@akcelik/strct 6.2.0 → 6.3.0

package/fesm2022/akcelik-strct.mjs

@@ -572,7 +572,7 @@ var StrctIcon = class StrctIcon {
 	sanitizer = inject(DomSanitizer);
 	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 	strictName = input(null, ...ngDevMode ? [{ debugName: "strictName" }] : /* istanbul ignore next */ []);
-	size = input(16, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	strokeWidth = input(1.4, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
 	badge = input("none", ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
 	mode = input("none", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
@@ -588,7 +588,6 @@ var StrctIcon = class StrctIcon {
 		const max = this.countMax();
 		return n > max ? `${max}+` : String(n);
 	}, ...ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []);
-	countFontSize = computed(() => Math.max(9, Math.round(this.size() * .58)), ...ngDevMode ? [{ debugName: "countFontSize" }] : /* istanbul ignore next */ []);
 	shownMode = computed(() => this.mode(), ...ngDevMode ? [{ debugName: "shownMode" }] : /* istanbul ignore next */ []);
 	shownBadge = computed(() => this.badge(), ...ngDevMode ? [{ debugName: "shownBadge" }] : /* istanbul ignore next */ []);
 	accessibleLabel = computed(() => {
@@ -717,15 +716,13 @@ var StrctIcon = class StrctIcon {
 				transformFunction: null
 			}
 		},
-		host: { classAttribute: "strct-icon" },
+		host: {
+			properties: { "style.--icon-size.px": "size()" },
+			classAttribute: "strct-icon"
+		},
 		ngImport: i0,
 		template: `@if (isRaw()) {
-      <span
-        class="strct-icon__raw"
-        [style.width.px]="size()"
-        [style.height.px]="size()"
-        [innerHTML]="rawSvg()"
-      ></span>
+      <span class="strct-icon__raw" [innerHTML]="rawSvg()"></span>
     } @else {
       <svg
         viewBox="0 0 16 16"
@@ -734,8 +731,6 @@ var StrctIcon = class StrctIcon {
         [attr.stroke-width]="strokeWidth()"
         stroke-linecap="round"
         stroke-linejoin="round"
-        [style.width.px]="size()"
-        [style.height.px]="size()"
         [innerHTML]="svg()"
         role="img"
         [attr.aria-label]="accessibleLabel() || null"
@@ -745,12 +740,9 @@ var StrctIcon = class StrctIcon {
     @if (countText(); as text) {
       <!-- A bell with seven alarms says 7: the count replaces the status dot,
            and carries its own text for assistive tech when the icon is named. -->
-      <span
-        class="strct-icon__count strct-icon__count--{{ countStatus() }}"
-        [style.fontSize.px]="countFontSize()"
-        aria-hidden="true"
-        >{{ text }}</span
-      >
+      <span class="strct-icon__count strct-icon__count--{{ countStatus() }}" aria-hidden="true">{{
+        text
+      }}</span>
     } @else if (shownBadge() !== 'none') {
       <span class="strct-icon__badge strct-icon__badge--{{ shownBadge() }}"></span>
     }
@@ -774,7 +766,7 @@ var StrctIcon = class StrctIcon {
       </span>
     }`,
 		isInline: true,
-		styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__count{position:absolute;inset-inline-end:-6px;top:-6px;display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding-inline:4px;box-sizing:border-box;border-radius:999px;font-family:var(--font);font-weight:600;line-height:1;color:var(--inv);background:var(--t2);box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__count--accent{background:var(--acc)}.strct-icon__count--success{background:var(--success)}.strct-icon__count--warning{background:var(--warning)}.strct-icon__count--critical{background:var(--critical)}.strct-icon__mode{position:absolute;inset-inline-end:-3px;top:-3px;display:flex;align-items:center;justify-content:center;width:56%;height:56%;min-width:9px;min-height:9px;max-width:12px;max-height:12px;box-sizing:border-box;border-radius:22%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__mode>svg{width:100%;height:100%;display:block}.strct-icon__mode--maintenance{background:color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:var(--inv)}.strct-icon__mode--maintenanceEntering{background:var(--bg-1);border:1.5px solid color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:color-mix(in srgb,var(--t1),var(--bg-1) 10%)}.strct-icon__badge{position:absolute;inset-inline-end:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off,.strct-icon__badge--paused,.strct-icon__badge--running{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));inset-inline-end:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical);border-radius:1px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));width:58%;height:58%;min-width:10px;min-height:10px;max-width:15px;max-height:15px;font-size:clamp(6px,56%,9px)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--running{background:var(--success)}.strct-icon__badge--running:before{content:\"\";width:46%;height:46%;min-width:4px;min-height:4px;background:var(--inv);clip-path:polygon(15% 2%,100% 50%,15% 98%);transform:translate(9%)}.strct-icon__badge--paused{background:var(--warning)}.strct-icon__badge--paused:before{content:\"\";width:1.6px;height:42%;min-height:4px;background:var(--inv);box-shadow:2.6px 0 0 var(--inv);transform:translate(-1.3px)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\";width:40%;height:40%;min-width:3.5px;min-height:3.5px;background:var(--inv);border-radius:1px}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}\n"],
+		styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon>svg,.strct-icon__raw{width:var(--icon-size, 16px);height:var(--icon-size, 16px)}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__count{position:absolute;inset-inline-end:-6px;top:-6px;display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding-inline:4px;box-sizing:border-box;border-radius:999px;font-family:var(--font);font-size:max(9px,calc(var(--icon-size, 16px) * .58));font-weight:600;line-height:1;color:var(--inv);background:var(--t2);box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__count--accent{background:var(--acc)}.strct-icon__count--success{background:var(--success)}.strct-icon__count--warning{background:var(--warning)}.strct-icon__count--critical{background:var(--critical)}.strct-icon__mode{position:absolute;inset-inline-end:-3px;top:-3px;display:flex;align-items:center;justify-content:center;width:56%;height:56%;min-width:9px;min-height:9px;max-width:12px;max-height:12px;box-sizing:border-box;border-radius:22%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__mode>svg{width:100%;height:100%;display:block}.strct-icon__mode--maintenance{background:color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:var(--inv)}.strct-icon__mode--maintenanceEntering{background:var(--bg-1);border:1.5px solid color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:color-mix(in srgb,var(--t1),var(--bg-1) 10%)}.strct-icon__badge{position:absolute;inset-inline-end:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off,.strct-icon__badge--paused,.strct-icon__badge--running{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));inset-inline-end:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical);border-radius:1px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));width:58%;height:58%;min-width:10px;min-height:10px;max-width:15px;max-height:15px;font-size:clamp(6px,56%,9px)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--running{background:var(--success)}.strct-icon__badge--running:before{content:\"\";width:46%;height:46%;min-width:4px;min-height:4px;background:var(--inv);clip-path:polygon(15% 2%,100% 50%,15% 98%);transform:translate(9%)}.strct-icon__badge--paused{background:var(--warning)}.strct-icon__badge--paused:before{content:\"\";width:1.6px;height:42%;min-height:4px;background:var(--inv);box-shadow:2.6px 0 0 var(--inv);transform:translate(-1.3px)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\";width:40%;height:40%;min-width:3.5px;min-height:3.5px;background:var(--inv);border-radius:1px}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
@@ -791,12 +783,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			template: `@if (isRaw()) {
-      <span
-        class="strct-icon__raw"
-        [style.width.px]="size()"
-        [style.height.px]="size()"
-        [innerHTML]="rawSvg()"
-      ></span>
+      <span class="strct-icon__raw" [innerHTML]="rawSvg()"></span>
     } @else {
       <svg
         viewBox="0 0 16 16"
@@ -805,8 +792,6 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.stroke-width]="strokeWidth()"
         stroke-linecap="round"
         stroke-linejoin="round"
-        [style.width.px]="size()"
-        [style.height.px]="size()"
         [innerHTML]="svg()"
         role="img"
         [attr.aria-label]="accessibleLabel() || null"
@@ -816,12 +801,9 @@ i0.ɵɵngDeclareClassMetadata({
     @if (countText(); as text) {
       <!-- A bell with seven alarms says 7: the count replaces the status dot,
            and carries its own text for assistive tech when the icon is named. -->
-      <span
-        class="strct-icon__count strct-icon__count--{{ countStatus() }}"
-        [style.fontSize.px]="countFontSize()"
-        aria-hidden="true"
-        >{{ text }}</span
-      >
+      <span class="strct-icon__count strct-icon__count--{{ countStatus() }}" aria-hidden="true">{{
+        text
+      }}</span>
     } @else if (shownBadge() !== 'none') {
       <span class="strct-icon__badge strct-icon__badge--{{ shownBadge() }}"></span>
     }
@@ -844,8 +826,11 @@ i0.ɵɵngDeclareClassMetadata({
         </svg>
       </span>
     }`,
-			host: { class: "strct-icon" },
-			styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__count{position:absolute;inset-inline-end:-6px;top:-6px;display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding-inline:4px;box-sizing:border-box;border-radius:999px;font-family:var(--font);font-weight:600;line-height:1;color:var(--inv);background:var(--t2);box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__count--accent{background:var(--acc)}.strct-icon__count--success{background:var(--success)}.strct-icon__count--warning{background:var(--warning)}.strct-icon__count--critical{background:var(--critical)}.strct-icon__mode{position:absolute;inset-inline-end:-3px;top:-3px;display:flex;align-items:center;justify-content:center;width:56%;height:56%;min-width:9px;min-height:9px;max-width:12px;max-height:12px;box-sizing:border-box;border-radius:22%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__mode>svg{width:100%;height:100%;display:block}.strct-icon__mode--maintenance{background:color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:var(--inv)}.strct-icon__mode--maintenanceEntering{background:var(--bg-1);border:1.5px solid color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:color-mix(in srgb,var(--t1),var(--bg-1) 10%)}.strct-icon__badge{position:absolute;inset-inline-end:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off,.strct-icon__badge--paused,.strct-icon__badge--running{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));inset-inline-end:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical);border-radius:1px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));width:58%;height:58%;min-width:10px;min-height:10px;max-width:15px;max-height:15px;font-size:clamp(6px,56%,9px)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--running{background:var(--success)}.strct-icon__badge--running:before{content:\"\";width:46%;height:46%;min-width:4px;min-height:4px;background:var(--inv);clip-path:polygon(15% 2%,100% 50%,15% 98%);transform:translate(9%)}.strct-icon__badge--paused{background:var(--warning)}.strct-icon__badge--paused:before{content:\"\";width:1.6px;height:42%;min-height:4px;background:var(--inv);box-shadow:2.6px 0 0 var(--inv);transform:translate(-1.3px)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\";width:40%;height:40%;min-width:3.5px;min-height:3.5px;background:var(--inv);border-radius:1px}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}\n"]
+			host: {
+				class: "strct-icon",
+				"[style.--icon-size.px]": "size()"
+			},
+			styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon>svg,.strct-icon__raw{width:var(--icon-size, 16px);height:var(--icon-size, 16px)}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__count{position:absolute;inset-inline-end:-6px;top:-6px;display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding-inline:4px;box-sizing:border-box;border-radius:999px;font-family:var(--font);font-size:max(9px,calc(var(--icon-size, 16px) * .58));font-weight:600;line-height:1;color:var(--inv);background:var(--t2);box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__count--accent{background:var(--acc)}.strct-icon__count--success{background:var(--success)}.strct-icon__count--warning{background:var(--warning)}.strct-icon__count--critical{background:var(--critical)}.strct-icon__mode{position:absolute;inset-inline-end:-3px;top:-3px;display:flex;align-items:center;justify-content:center;width:56%;height:56%;min-width:9px;min-height:9px;max-width:12px;max-height:12px;box-sizing:border-box;border-radius:22%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__mode>svg{width:100%;height:100%;display:block}.strct-icon__mode--maintenance{background:color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:var(--inv)}.strct-icon__mode--maintenanceEntering{background:var(--bg-1);border:1.5px solid color-mix(in srgb,var(--t1),var(--bg-1) 10%);color:color-mix(in srgb,var(--t1),var(--bg-1) 10%)}.strct-icon__badge{position:absolute;inset-inline-end:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off,.strct-icon__badge--paused,.strct-icon__badge--running{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));inset-inline-end:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical);border-radius:1px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));width:58%;height:58%;min-width:10px;min-height:10px;max-width:15px;max-height:15px;font-size:clamp(6px,56%,9px)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--running{background:var(--success)}.strct-icon__badge--running:before{content:\"\";width:46%;height:46%;min-width:4px;min-height:4px;background:var(--inv);clip-path:polygon(15% 2%,100% 50%,15% 98%);transform:translate(9%)}.strct-icon__badge--paused{background:var(--warning)}.strct-icon__badge--paused:before{content:\"\";width:1.6px;height:42%;min-height:4px;background:var(--inv);box-shadow:2.6px 0 0 var(--inv);transform:translate(-1.3px)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\";width:40%;height:40%;min-width:3.5px;min-height:3.5px;background:var(--inv);border-radius:1px}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -1150,9 +1135,13 @@ i0.ɵɵngDeclareClassMetadata({
 function strctControlHeight(size) {
 	return `var(--control-h-${size})`;
 }
+function strctIconSize(size) {
+	return `var(--icon-size-${size})`;
+}
 var StrctControlSizeDirective = class StrctControlSizeDirective {
 	strctControlSize = input("md", ...ngDevMode ? [{ debugName: "strctControlSize" }] : /* istanbul ignore next */ []);
 	height = computed(() => strctControlHeight(this.strctControlSize()), ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	iconSize = computed(() => strctIconSize(this.strctControlSize()), ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
@@ -1174,7 +1163,10 @@ var StrctControlSizeDirective = class StrctControlSizeDirective {
 			isRequired: false,
 			transformFunction: null
 		} },
-		host: { properties: { "style.--control-h": "height()" } },
+		host: { properties: {
+			"style.--control-h": "height()",
+			"style.--icon-size": "iconSize()"
+		} },
 		ngImport: i0
 	});
 };
@@ -1187,7 +1179,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Directive,
 		args: [{
 			selector: "[strctControlSize]",
-			host: { "[style.--control-h]": "height()" }
+			host: {
+				"[style.--control-h]": "height()",
+				"[style.--icon-size]": "iconSize()"
+			}
 		}]
 	}],
 	propDecorators: { strctControlSize: [{
@@ -5579,7 +5574,7 @@ var StrctButton = class StrctButton {
 		ngImport: i0,
 		template: `<ng-content />`,
 		isInline: true,
-		styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;box-sizing:border-box;height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--critical{border-color:var(--critical);color:var(--critical)}.strct-btn--critical:hover{background:var(--critical-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--link{display:inline;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--acc);font-weight:inherit;line-height:inherit;white-space:normal;text-align:start}.strct-btn--link:hover,.strct-btn--link:focus-visible{background:none;text-decoration:underline}.strct-btn--link:active{background:none}.strct-btn--link:disabled,.strct-btn--link[aria-disabled=true]{color:var(--t4);text-decoration:none}.strct-btn--link.strct-btn--sm,.strct-btn--link.strct-btn--mini{padding:0}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:var(--inv)}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--critical{background:var(--critical);color:var(--inv)}.strct-btn--solid.strct-btn--critical:hover{background:var(--critical);filter:brightness(1.08)}.strct-btn--sm{--control-h: var(--control-h-sm);padding:0 var(--space-3);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--lg{--control-h: var(--control-h-lg);padding:0 var(--space-5);font-size:14px}.strct-btn--mini{height:auto;padding:2px var(--space-2);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{width:var(--control-h);padding:0}.strct-btn--icon.strct-btn--mini{width:auto;padding:3px}\n"],
+		styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;box-sizing:border-box;height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--critical{border-color:var(--critical);color:var(--critical)}.strct-btn--critical:hover{background:var(--critical-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--link{display:inline;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--acc);font-weight:inherit;line-height:inherit;white-space:normal;text-align:start}.strct-btn--link:hover,.strct-btn--link:focus-visible{background:none;text-decoration:underline}.strct-btn--link:active{background:none}.strct-btn--link:disabled,.strct-btn--link[aria-disabled=true]{color:var(--t4);text-decoration:none}.strct-btn--link.strct-btn--sm,.strct-btn--link.strct-btn--mini{padding:0}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:var(--inv)}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--critical{background:var(--critical);color:var(--inv)}.strct-btn--solid.strct-btn--critical:hover{background:var(--critical);filter:brightness(1.08)}.strct-btn--sm{--control-h: var(--control-h-sm);--icon-size: var(--icon-size-sm);padding:0 var(--space-3);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--lg{--control-h: var(--control-h-lg);--icon-size: var(--icon-size-lg);padding:0 var(--space-5);font-size:14px}.strct-btn--mini{--icon-size: var(--icon-size-sm);height:auto;padding:2px var(--space-2);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{width:var(--control-h);padding:0}.strct-btn--icon.strct-btn--mini{width:auto;padding:3px}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
@@ -5617,7 +5612,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"(mouseleave)": "hideReason()",
 				"(blur)": "hideReason()"
 			},
-			styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;box-sizing:border-box;height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--critical{border-color:var(--critical);color:var(--critical)}.strct-btn--critical:hover{background:var(--critical-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--link{display:inline;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--acc);font-weight:inherit;line-height:inherit;white-space:normal;text-align:start}.strct-btn--link:hover,.strct-btn--link:focus-visible{background:none;text-decoration:underline}.strct-btn--link:active{background:none}.strct-btn--link:disabled,.strct-btn--link[aria-disabled=true]{color:var(--t4);text-decoration:none}.strct-btn--link.strct-btn--sm,.strct-btn--link.strct-btn--mini{padding:0}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:var(--inv)}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--critical{background:var(--critical);color:var(--inv)}.strct-btn--solid.strct-btn--critical:hover{background:var(--critical);filter:brightness(1.08)}.strct-btn--sm{--control-h: var(--control-h-sm);padding:0 var(--space-3);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--lg{--control-h: var(--control-h-lg);padding:0 var(--space-5);font-size:14px}.strct-btn--mini{height:auto;padding:2px var(--space-2);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{width:var(--control-h);padding:0}.strct-btn--icon.strct-btn--mini{width:auto;padding:3px}\n"]
+			styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;box-sizing:border-box;height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--critical{border-color:var(--critical);color:var(--critical)}.strct-btn--critical:hover{background:var(--critical-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--link{display:inline;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--acc);font-weight:inherit;line-height:inherit;white-space:normal;text-align:start}.strct-btn--link:hover,.strct-btn--link:focus-visible{background:none;text-decoration:underline}.strct-btn--link:active{background:none}.strct-btn--link:disabled,.strct-btn--link[aria-disabled=true]{color:var(--t4);text-decoration:none}.strct-btn--link.strct-btn--sm,.strct-btn--link.strct-btn--mini{padding:0}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:var(--inv)}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--critical{background:var(--critical);color:var(--inv)}.strct-btn--solid.strct-btn--critical:hover{background:var(--critical);filter:brightness(1.08)}.strct-btn--sm{--control-h: var(--control-h-sm);--icon-size: var(--icon-size-sm);padding:0 var(--space-3);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--lg{--control-h: var(--control-h-lg);--icon-size: var(--icon-size-lg);padding:0 var(--space-5);font-size:14px}.strct-btn--mini{--icon-size: var(--icon-size-sm);height:auto;padding:2px var(--space-2);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{width:var(--control-h);padding:0}.strct-btn--icon.strct-btn--mini{width:auto;padding:3px}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -14525,6 +14520,10 @@ var StrctSearchbox = class StrctSearchbox {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	placeholder = input("Search", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
@@ -14659,7 +14658,10 @@ var StrctSearchbox = class StrctSearchbox {
 			activated: "activated"
 		},
 		host: {
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-sb-host"
 		},
 		providers: [{
@@ -14814,7 +14816,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-sb-host",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-sb-host{display:inline-flex;max-width:100%}.strct-sb{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box;height:var(--control-h);padding:0 8px 0 10px;border:1px solid var(--strct-sb-border, var(--b2));border-radius:3px;background:var(--strct-sb-bg, var(--bg-2));color:var(--strct-sb-fg, var(--t2));font-family:var(--font);font-size:var(--strct-sb-font-size, 12.5px);transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-sb--trigger{cursor:pointer;text-align:start}.strct-sb--trigger:hover:not(:disabled){color:var(--strct-sb-fg-hover, var(--t1));background:var(--strct-sb-bg-hover, var(--bg-3))}.strct-sb--trigger:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-sb:focus-within:not(.strct-sb--trigger){border-color:var(--acc50);color:var(--t1)}.strct-sb--disabled,.strct-sb--trigger:disabled{opacity:.55;cursor:not-allowed}.strct-sb__icon{flex-shrink:0;color:var(--strct-sb-muted, var(--t3))}.strct-sb__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sb__input{flex:1;min-width:0;border:0;padding:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;outline:none}.strct-sb__input::placeholder{color:var(--t3)}.strct-sb__kbd{flex-shrink:0;font-family:var(--mono);font-size:10px;line-height:1;padding:3px 5px;border:1px solid var(--strct-sb-kbd-border, var(--b2));border-radius:2px;background:var(--strct-sb-kbd-bg, var(--bg-2));color:var(--strct-sb-kbd-fg, var(--t3))}.strct-sb__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:-2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-sb__clear:hover{color:var(--t1);background:var(--bg-3)}.strct-sb__clear:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}@media(prefers-reduced-motion:reduce){.strct-sb{transition:none}}\n"]
 		}]
@@ -16785,6 +16788,10 @@ var StrctInput = class StrctInput {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	mono = input(false, {
 		...ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -16822,7 +16829,8 @@ var StrctInput = class StrctInput {
 		host: {
 			properties: {
 				"class.strct-control--mono": "mono()",
-				"style.--control-h": "controlHeight()"
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
 			},
 			classAttribute: "strct-control"
 		},
@@ -16841,7 +16849,8 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: "strct-control",
 				"[class.strct-control--mono]": "mono()",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			}
 		}]
 	}],
@@ -17886,7 +17895,7 @@ var StrctSegmented = class StrctSegmented {
     }
   `,
 		isInline: true,
-		styles: [".strct-seg__count{margin-inline-start:5px;font-variant-numeric:tabular-nums;color:var(--t3)}.strct-seg__count--accent{color:var(--acc)}.strct-seg__count--success{color:var(--success)}.strct-seg__count--warning{color:var(--warning)}.strct-seg__count--critical{color:var(--critical)}.strct-seg{display:inline-flex;gap:2px;box-sizing:border-box;height:var(--control-h);padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:0 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm{--control-h: var(--control-h-sm)}.strct-seg--lg{--control-h: var(--control-h-lg)}.strct-seg--lg .strct-seg__opt{padding:0 18px;font-size:14px}.strct-seg--sm .strct-seg__opt{padding:0 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh),0 0 0 1px var(--b1)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\n"],
+		styles: [".strct-seg__count{margin-inline-start:5px;font-variant-numeric:tabular-nums;color:var(--t3)}.strct-seg__count--accent{color:var(--acc)}.strct-seg__count--success{color:var(--success)}.strct-seg__count--warning{color:var(--warning)}.strct-seg__count--critical{color:var(--critical)}.strct-seg{display:inline-flex;gap:2px;box-sizing:border-box;height:var(--control-h);padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:0 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm{--control-h: var(--control-h-sm);--icon-size: var(--icon-size-sm)}.strct-seg--lg{--control-h: var(--control-h-lg);--icon-size: var(--icon-size-lg)}.strct-seg--lg .strct-seg__opt{padding:0 18px;font-size:14px}.strct-seg--sm .strct-seg__opt{padding:0 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh),0 0 0 1px var(--b1)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\n"],
 		dependencies: [{
 			kind: "component",
 			type: StrctIcon,
@@ -17967,7 +17976,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.strct-seg--disabled]": "isDisabled()",
 				"(keydown)": "onKeydown($event)"
 			},
-			styles: [".strct-seg__count{margin-inline-start:5px;font-variant-numeric:tabular-nums;color:var(--t3)}.strct-seg__count--accent{color:var(--acc)}.strct-seg__count--success{color:var(--success)}.strct-seg__count--warning{color:var(--warning)}.strct-seg__count--critical{color:var(--critical)}.strct-seg{display:inline-flex;gap:2px;box-sizing:border-box;height:var(--control-h);padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:0 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm{--control-h: var(--control-h-sm)}.strct-seg--lg{--control-h: var(--control-h-lg)}.strct-seg--lg .strct-seg__opt{padding:0 18px;font-size:14px}.strct-seg--sm .strct-seg__opt{padding:0 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh),0 0 0 1px var(--b1)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\n"]
+			styles: [".strct-seg__count{margin-inline-start:5px;font-variant-numeric:tabular-nums;color:var(--t3)}.strct-seg__count--accent{color:var(--acc)}.strct-seg__count--success{color:var(--success)}.strct-seg__count--warning{color:var(--warning)}.strct-seg__count--critical{color:var(--critical)}.strct-seg{display:inline-flex;gap:2px;box-sizing:border-box;height:var(--control-h);padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:0 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm{--control-h: var(--control-h-sm);--icon-size: var(--icon-size-sm)}.strct-seg--lg{--control-h: var(--control-h-lg);--icon-size: var(--icon-size-lg)}.strct-seg--lg .strct-seg__opt{padding:0 18px;font-size:14px}.strct-seg--sm .strct-seg__opt{padding:0 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh),0 0 0 1px var(--b1)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -18243,6 +18252,10 @@ var StrctPassword = class StrctPassword {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	meter = input(false, {
 		...ngDevMode ? { debugName: "meter" } : /* istanbul ignore next */ {},
@@ -18374,7 +18387,10 @@ var StrctPassword = class StrctPassword {
 			}
 		},
 		host: {
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-pw"
 		},
 		providers: [{
@@ -18499,7 +18515,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-pw",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-pw{display:block;width:100%}.strct-pw__field{position:relative}.strct-pw__input{padding-inline-end:38px}.strct-pw__toggle{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:2px;background:transparent;color:var(--t2);cursor:pointer}.strct-pw__toggle:hover{color:var(--acc);background:var(--bg-3)}.strct-pw__meter{display:flex;align-items:center;gap:9px;margin-top:7px}.strct-pw__bars{display:flex;gap:3px;flex:1}.strct-pw__bar{flex:1;height:3px;border-radius:1px;transition:background .2s ease}.strct-pw__label{font-size:12px;font-weight:600;min-width:42px;text-align:end}\n"]
 		}]
@@ -20069,6 +20086,10 @@ var StrctInputMask = class StrctInputMask {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	mask = input.required(...ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	uppercase = input(false, {
@@ -20172,7 +20193,10 @@ var StrctInputMask = class StrctInputMask {
 				transformFunction: null
 			}
 		},
-		host: { properties: { "style.--control-h": "controlHeight()" } },
+		host: { properties: {
+			"style.--control-h": "controlHeight()",
+			"style.--icon-size": "controlIconSize()"
+		} },
 		providers: [{
 			provide: NG_VALUE_ACCESSOR,
 			useExisting: forwardRef(() => StrctInputMask),
@@ -20206,7 +20230,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "strct-input-mask",
-			host: { "[style.--control-h]": "controlHeight()" },
+			host: {
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
+			},
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			providers: [{
@@ -20271,6 +20298,10 @@ var StrctCombobox = class StrctCombobox {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	inputEl = viewChild.required("input", ...ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []);
 	listId = `strct-cbx-${++comboboxCounter}`;
@@ -20668,7 +20699,10 @@ var StrctCombobox = class StrctCombobox {
 		},
 		host: {
 			listeners: { "document:click": "onDocClick($event)" },
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-cbx"
 		},
 		providers: [{
@@ -21012,7 +21046,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-cbx",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-inline-end:30px}.strct-cbx__field--multi{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding-block:4px;cursor:text}.strct-cbx__field--multi:focus-within{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-cbx__input--bare{flex:1;min-width:60px;padding:2px 0;font:inherit;font-size:13px;color:var(--t1);background:none;border:none;outline:none}.strct-cbx__chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 4px 2px 8px;font-size:12px;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2);border-radius:var(--radius-sm)}.strct-cbx__chip-x{display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:1px;cursor:pointer}.strct-cbx__chip-x:hover{color:var(--t1);background:var(--bg-4)}.strct-cbx__clear{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:1px;cursor:pointer}.strct-cbx__clear:hover{color:var(--t1)}.strct-cbx__caret{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:var(--z-dropdown);max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh)}.strct-cbx__group{padding:7px 10px 3px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--t3)}.strct-cbx__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:2px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--selected{font-weight:600;background:var(--acc-s)}.strct-cbx__opt--selected.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-cbx__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-cbx__opt-icon{display:inline-flex;flex:none;color:var(--t3)}.strct-cbx__opt--selected .strct-cbx__opt-icon{color:var(--t1)}.strct-cbx__opt-text{display:flex;flex-direction:column;min-width:0}.strct-cbx__opt-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;color:var(--t3)}.strct-cbx__opt--custom{border-top:1px solid var(--b2);border-radius:0 0 2px 2px;color:var(--t2)}.strct-cbx__chip-icon{display:inline-flex;color:var(--t3)}.strct-cbx__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cbx__match{font-weight:700;color:var(--acc)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"]
 		}]
@@ -21139,6 +21174,10 @@ var StrctSelect = class StrctSelect {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	listId = `strct-sel-${++selectCounter}`;
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -21358,7 +21397,10 @@ var StrctSelect = class StrctSelect {
 		},
 		host: {
 			listeners: { "document:click": "onDocClick($event)" },
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-sel"
 		},
 		providers: [{
@@ -21537,7 +21579,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-sel",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-sel{position:relative;display:block;width:100%}.strct-sel__btn{display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer}.strct-sel__btn:disabled{cursor:not-allowed}.strct-sel__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sel__value--placeholder{color:var(--t3)}.strct-sel__caret{flex:none;color:var(--t3)}.strct-sel__list{z-index:var(--z-dropdown);max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh)}.strct-sel__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:2px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-sel__opt--highlight{background:var(--bg-3)}.strct-sel__opt--selected{font-weight:600;background:var(--acc-s)}.strct-sel__opt--selected.strct-sel__opt--highlight{background:var(--acc-m)}.strct-sel__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-sel__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-sel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"]
 		}]
@@ -21662,6 +21705,10 @@ var StrctDatepicker = class StrctDatepicker {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	placeholder = input("Select a date", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	monthNames = input(MONTHS, ...ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []);
@@ -21949,7 +21996,10 @@ var StrctDatepicker = class StrctDatepicker {
 				"document:click": "onDocClick($event)",
 				"document:keydown.escape": "onEscape($event)"
 			},
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-dp"
 		},
 		providers: [{
@@ -22194,7 +22244,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-dp",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-dp{position:relative;display:inline-block;width:100%}.strct-dp__field{position:relative}.strct-dp__input{padding-inline-end:36px;cursor:pointer}.strct-dp__icon{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:2px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__icon:hover{color:var(--acc);background:var(--bg-3)}.strct-dp__panel{position:absolute;top:calc(100% + 5px);inset-inline-start:0;z-index:var(--z-popover);width:250px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shh)}.strct-dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.strct-dp__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-dp__nav{display:inline-flex;padding:5px;border:0;border-radius:2px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__nav:hover{color:var(--t1);background:var(--bg-3)}.strct-dp__dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.strct-dp__dow span{text-align:center;font-size:12px;font-weight:600;color:var(--t3);padding:4px 0}.strct-dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.strct-dp__day{aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:3px;background:transparent;cursor:pointer;font-family:var(--font);font-size:12px;color:var(--t1)}.strct-dp__day:hover{background:var(--bg-3)}.strct-dp__day--muted{color:var(--t3)}.strct-dp__day--today{box-shadow:inset 0 0 0 1px var(--acc30)}.strct-dp__day--focused{box-shadow:inset 0 0 0 2px var(--acc)}.strct-dp__day--selected{background:var(--acc);color:var(--inv)}.strct-dp__day--selected:hover{background:var(--acc)}\n"]
 		}]
@@ -22304,6 +22355,10 @@ var StrctColorPicker = class StrctColorPicker {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	swatches = input(DEFAULT_SWATCHES, ...ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []);
 	value = signal("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -22407,7 +22462,10 @@ var StrctColorPicker = class StrctColorPicker {
 				"document:click": "onDocClick($event)",
 				"document:keydown.escape": "onEscape($event)"
 			},
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-cp"
 		},
 		providers: [{
@@ -22536,7 +22594,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-cp",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-cp{position:relative;display:inline-block}.strct-cp__trigger{display:inline-flex;align-items:center;gap:9px;padding:6px 11px 6px 7px;border-radius:3px;cursor:pointer;font-family:var(--font);font-size:13px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2)}.strct-cp__trigger:hover{border-color:var(--b3)}.strct-cp__swatch{width:20px;height:20px;border-radius:2px;flex-shrink:0;border:1px solid var(--b3);background-clip:padding-box}.strct-cp__value{font-family:var(--mono);font-size:12px}.strct-cp__panel{position:absolute;top:calc(100% + 5px);left:0;z-index:var(--z-popover);width:196px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shh)}.strct-cp__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:9px}.strct-cp__chip{aspect-ratio:1;border-radius:2px;cursor:pointer;padding:0;border:1px solid var(--b2);background-clip:padding-box;transition:transform .12s ease}.strct-cp__chip:hover{transform:scale(1.1)}.strct-cp__chip--active{box-shadow:0 0 0 2px var(--bg-1),0 0 0 4px var(--acc)}.strct-cp__hex{font-family:var(--mono);font-size:12px;text-transform:lowercase}\n"]
 		}]
@@ -22907,6 +22966,10 @@ var StrctCascadeSelect = class StrctCascadeSelect extends StrctCascadeHost {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	elementRef = inject(ElementRef);
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 	placeholder = input("Select…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
@@ -23043,7 +23106,10 @@ var StrctCascadeSelect = class StrctCascadeSelect extends StrctCascadeHost {
 				"document:click": "onDocClick($event)",
 				"document:keydown.escape": "onEscape($event)"
 			},
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-cs"
 		},
 		providers: [{
@@ -23183,7 +23249,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-cs",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-cs{position:relative;display:inline-block;width:100%}.strct-cs__trigger{display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer}.strct-cs__trigger:disabled{cursor:not-allowed}.strct-cs__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cs__value--empty{color:var(--t3)}.strct-cs__caret{flex:none;color:var(--t3)}.strct-cs__panel{z-index:var(--z-dropdown);min-width:180px}\n"]
 		}]
@@ -24666,6 +24733,10 @@ var StrctNumber = class StrctNumber {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
 	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
 	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
@@ -24886,7 +24957,10 @@ var StrctNumber = class StrctNumber {
 			}
 		},
 		host: {
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-num"
 		},
 		providers: [{
@@ -25015,7 +25089,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-num",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-num{display:block;width:100%}.strct-num__wrap{display:flex;align-items:stretch;gap:var(--space-1)}.strct-num__input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}.strct-num__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-inline:var(--space-2);color:var(--t2);background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.strct-num__btn:hover:not(:disabled){color:var(--t1);border-color:var(--b3);background:var(--bg-3)}.strct-num__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}\n"]
 		}]
@@ -27251,7 +27326,7 @@ var StrctDatagrid = class StrctDatagrid {
 			}
 		],
 		ngImport: i0,
-		template: "<!-- One polite region for everything the grid does to itself: sorting,\n     paging and filtering all change the rows without saying so. -->\n<span class=\"strct-dg__announcer\" role=\"status\" aria-live=\"polite\">{{ announcement() }}</span>\n@if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {\n  <div class=\"strct-dg__toolbar\">\n    @if (quickFilterable()) {\n      <strct-searchbox\n        class=\"strct-dg__quickfilter\"\n        [class.strct-dg__quickfilter--end]=\"quickFilterAlign() === 'end'\"\n        [placeholder]=\"L().quickFilter\"\n        [ariaLabel]=\"L().quickFilter\"\n        [value]=\"quickFilter()\"\n        (valueChange)=\"quickFilter.set($event)\"\n      />\n      @if (filterNote(); as note) {\n        <span\n          class=\"strct-dg__filternote\"\n          [class.strct-dg__filternote--end]=\"quickFilterAlign() === 'end'\"\n          >{{ note }}</span\n        >\n      }\n    }\n    <span class=\"strct-dg__actioncaption\">\n      <ng-content select=\"[strctDatagridActionBarCaption]\" />\n    </span>\n    <ng-content select=\"[strctDatagridActionBar]\" />\n  </div>\n}\n\n@if (hasEditableColumn()) {\n  <!-- What the editable cells point at with aria-describedby: a keyboard\n       user is told the cell can be edited, and how. -->\n  <span class=\"strct-sr-only\" [id]=\"editHintId\">{{ L().editCellInstructions }}</span>\n}\n\n@if (bulkHint(); as hint) {\n  <!-- Selecting the page is not selecting the set. Say which one happened,\n       and offer the other. -->\n  <div class=\"strct-dg__bulk\" role=\"status\">\n    <span>{{ hint.text }}</span>\n    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"hint.run()\">\n      {{ hint.action }}\n    </button>\n  </div>\n}\n<div\n  class=\"strct-dg__layout\"\n  [class.strct-dg__layout--paned]=\"paneOpen()\"\n  [class.strct-dg__layout--panetakeover]=\"paneOpen() && narrowPane()\"\n  [style.--strct-dg-pane-list-w]=\"paneListWidth()\"\n>\n  <div\n    class=\"strct-dg__scroll\"\n    tabindex=\"0\"\n    role=\"region\"\n    [attr.aria-label]=\"regionName(L().rows)\"\n    [style.max-height.px]=\"virtual() ? viewportHeight() : maxHeight()\"\n    (scroll)=\"virtual() && onScroll($event)\"\n  >\n    <table\n      class=\"strct-dg\"\n      [attr.role]=\"childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null\"\n      [attr.aria-rowcount]=\"ariaRowCount()\"\n      [attr.aria-labelledby]=\"caption() ? captionId : null\"\n    >\n      @if (caption()) {\n        <caption class=\"strct-dg__caption\" [id]=\"captionId\">\n          {{\n            caption()\n          }}\n        </caption>\n      }\n      <thead>\n        <tr>\n          <!-- A utility column is still a column: axe reports every empty\n               header, and a screen-reader user hears nothing where the\n               detail, expand and select controls are. The name is hidden,\n               not absent. -->\n          @if (canDetail()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@detail\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('detail')\"\n              [style.width.px]=\"utilWidth('@detail')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().detailColumn }}</span>\n            </th>\n          }\n          @if (canExpand()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@expand\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('expand')\"\n              [style.width.px]=\"utilWidth('@expand')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().expandColumn }}</span>\n            </th>\n          }\n          @if (hasSelectionColumn()) {\n            <th\n              class=\"strct-dg__sel\"\n              scope=\"col\"\n              data-col=\"@sel\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('sel')\"\n              [style.width.px]=\"utilWidth('@sel')\"\n            >\n              @if (mode() === 'multiple') {\n                <strct-checkbox\n                  [ariaLabel]=\"L().selectAll\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  (checkedChange)=\"toggleAll()\"\n                />\n              } @else {\n                <span class=\"strct-sr-only\">{{ L().selectColumn }}</span>\n              }\n            </th>\n          }\n          @for (col of visibleColumns(); track col.key) {\n            <th\n              scope=\"col\"\n              [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n              [style.width]=\"headerWidth(col)\"\n              [class.strct-dg__th--sortable]=\"col.sortable\"\n              [class.strct-dg__th--drop]=\"col.key === dropKey()\"\n              [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n              [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n              [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n              [attr.data-col]=\"col.key\"\n              [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n              [attr.draggable]=\"reorderable() ? true : null\"\n              (dragstart)=\"onColDragStart(col.key, $event)\"\n              (dragover)=\"onColDragOver(col.key, $event)\"\n              (drop)=\"onColDrop(col.key)\"\n              (dragend)=\"onColDragEnd()\"\n            >\n              <span class=\"strct-dg__hd\">\n                <!-- A header that sorts is a button: a th with tabindex is\n                     read as \"column header, focusable\" and never says it\n                     can be activated. aria-sort stays on the th, which is\n                     what carries the column's sorted state. -->\n                @if (col.sortable) {\n                  <!-- The button covers most of the header, so it carries\n                       the drag source too: a reorderable column has to be\n                       grabbable where the pointer actually lands. The\n                       event bubbles to the th's own handlers. -->\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__sortbtn\"\n                    [attr.draggable]=\"reorderable() ? true : null\"\n                    (click)=\"sortBy(col.key)\"\n                  >\n                    {{ col.label }}\n                    <strct-icon class=\"strct-dg__sorticon\" [name]=\"sortIcon(col.key)\" [size]=\"13\" />\n                  </button>\n                } @else {\n                  {{ col.label }}\n                }\n                @if (col.filterable || col.filterOptions) {\n                  <button\n                    #fbtn\n                    type=\"button\"\n                    class=\"strct-dg__filterbtn\"\n                    [class.strct-dg__filterbtn--active]=\"hasFilter(col.key)\"\n                    [attr.aria-expanded]=\"filterOpenKey() === col.key\"\n                    [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                    (click)=\"toggleFilterPanel(col.key, $event)\"\n                    (keydown.enter)=\"$event.stopPropagation()\"\n                    (keydown.space)=\"$event.stopPropagation()\"\n                  >\n                    <strct-icon name=\"filter\" [size]=\"12\" />\n                  </button>\n                  @if (filterOpenKey() === col.key) {\n                    <div\n                      class=\"strct-dg__filterpanel\"\n                      role=\"dialog\"\n                      [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                      [strctOverlay]=\"fbtn\"\n                      strctOverlayPlacement=\"bottom-start\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown.enter)=\"$event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                    >\n                      @if (col.filterOptions; as opts) {\n                        @for (opt of opts; track $index) {\n                          <label class=\"strct-dg__filteropt\">\n                            <input\n                              type=\"checkbox\"\n                              [checked]=\"optionChecked(col.key, opt)\"\n                              (change)=\"toggleFilterOption(col.key, opt)\"\n                            />\n                            <span>{{ opt }}</span>\n                          </label>\n                        }\n                      } @else {\n                        <input\n                          class=\"strct-dg__filterinput\"\n                          type=\"text\"\n                          [attr.placeholder]=\"L().filterPlaceholder\"\n                          [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                          [value]=\"textFilter(col.key)\"\n                          (input)=\"setTextFilter(col.key, $any($event.target).value)\"\n                        />\n                      }\n                      <button\n                        type=\"button\"\n                        class=\"strct-dg__filterclear\"\n                        [disabled]=\"!hasFilter(col.key)\"\n                        (click)=\"clearFilter(col.key)\"\n                      >\n                        {{ L().clearFilter }}\n                      </button>\n                    </div>\n                  }\n                }\n              </span>\n              @if (resizable() && col.resizable !== false) {\n                <!-- A separator, not a bare div: a column could only be\n                     resized with a mouse, which is the one input a\n                     console cannot assume. -->\n                <div\n                  class=\"strct-dg__resize\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"L().resizeColumn(col.label)\"\n                  [attr.aria-valuenow]=\"separatorValue(col.key)\"\n                  [attr.aria-valuemin]=\"40\"\n                  (mousedown)=\"onResizeStart($event, col.key)\"\n                  (keydown)=\"onResizeKey($event, col.key)\"\n                  (dblclick)=\"resetWidth(col.key)\"\n                ></div>\n              }\n            </th>\n          }\n          @if (canActions()) {\n            <th\n              class=\"strct-dg__actioncol\"\n              scope=\"col\"\n              data-col=\"@actions\"\n              [attr.aria-label]=\"L().actions\"\n              [style.width.px]=\"utilWidth('@actions')\"\n            ></th>\n          }\n          @if (widthsApplied()) {\n            <!-- The leftover lives here, so every column keeps the width it\n                 was given: with each column stated the browser scales them\n                 all to fit (200px asked, 231px drawn), and with one cell\n                 left free they are exact and the remainder lands in it. A\n                 presentational cell, so it says nothing and, once the stated\n                 widths fill the grid, takes no width either. -->\n            <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n          }\n        </tr>\n      </thead>\n      <!--\n        focusin is the real keyboard path (focus does not bubble from cells);\n        the plain focus binding exists to satisfy mouse-events-have-key-events.\n      -->\n      <tbody\n        (mouseover)=\"revealIfClipped($event)\"\n        (focusin)=\"revealIfClipped($event)\"\n        (focus)=\"revealIfClipped($event)\"\n      >\n        @if (loading()) {\n          @for (_ of [1, 2, 3, 4, 5]; track $index) {\n            <tr class=\"strct-dg__skeleton-row\">\n              @if (canDetail()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (canExpand()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (hasSelectionColumn()) {\n                <td class=\"strct-dg__sel\"></td>\n              }\n              @for (col of visibleColumns(); track col.key) {\n                <td [style.text-align]=\"col.align ?? 'start'\">\n                  <div class=\"strct-dg__skeleton-block\"></div>\n                </td>\n              }\n              @if (canActions()) {\n                <td class=\"strct-dg__actioncell\"></td>\n              }\n              @if (widthsApplied()) {\n                <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n              }\n            </tr>\n          }\n        } @else {\n          @if (virtual() && topPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td>\n            </tr>\n          }\n          @for (it of displayItems(); track itemKey(it)) {\n            @if (it.group; as grp) {\n              <!-- Group header: distinct value + count, collapsible. -->\n              <tr class=\"strct-dg__grouprow\">\n                @if (groupSelect() && mode() === 'multiple') {\n                  <td class=\"strct-dg__sel\">\n                    <strct-checkbox\n                      [ariaLabel]=\"L().selectAllInGroup(grp.label)\"\n                      [checked]=\"groupAllSelected(grp.key)\"\n                      [indeterminate]=\"groupSomeSelected(grp.key)\"\n                      (checkedChange)=\"toggleGroupSelection(grp.key)\"\n                    />\n                  </td>\n                }\n                <td\n                  [attr.colspan]=\"\n                    groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()\n                  \"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__groupbtn\"\n                    [attr.aria-expanded]=\"!grp.collapsed\"\n                    (click)=\"toggleGroup(grp.key)\"\n                  >\n                    <span\n                      class=\"strct-dg__groupchev\"\n                      [class.strct-dg__groupchev--open]=\"!grp.collapsed\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </span>\n                    @if (groupHeaderDef(); as tpl) {\n                      <!-- The consumer draws the row; the button, its\n                           aria-expanded and the keyboard stay ours. -->\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: grp,\n                          group: grp,\n                          count: grp.count,\n                        }\"\n                      />\n                    } @else {\n                      <span\n                        class=\"strct-dg__grouplabel strct-dg__grouplabel--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.label }}</span\n                      >\n                      <!-- The three spans run together in the button's\n                           name (\"Needs your decision1Blocks the join…\");\n                           the separators are read, not seen. -->\n                      <span class=\"strct-dg__announcer\">, </span>\n                      <span\n                        class=\"strct-dg__groupcount strct-dg__groupcount--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.count }}</span\n                      >\n                      <!-- Seen: the chip's number. Heard: the number with\n                           the grid's noun, because \"Inconclusive, 3\" does\n                           not say three of what. -->\n                      <span class=\"strct-dg__announcer\"> {{ countNoun(grp.count) }}</span>\n                      @if (grp.note) {\n                        <span class=\"strct-dg__announcer\">. </span>\n                        <span class=\"strct-dg__groupnote\">{{ grp.note }}</span>\n                      }\n                    }\n                  </button>\n                </td>\n              </tr>\n            } @else {\n              @let row = it.row!;\n              <tr\n                [attr.aria-rowindex]=\"ariaRowIndex(row)\"\n                [class.strct-dg__row--selected]=\"isSelected(row)\"\n                [class.strct-dg__row--locked]=\"lockedReason(row) !== null\"\n                [attr.aria-selected]=\"mode() === 'none' ? null : isSelected(row)\"\n                [attr.aria-disabled]=\"lockedReason(row) !== null ? 'true' : null\"\n                [attr.title]=\"lockedReason(row) || null\"\n                (click)=\"onRowPick(row)\"\n                [class.strct-dg__row--active]=\"paneOpen() && row === activeRow()\"\n                [attr.aria-level]=\"childrenKey() ? treeDepth(row) + 1 : null\"\n                [attr.aria-expanded]=\"\n                  childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null\n                \"\n                [attr.tabindex]=\"\n                  childrenKey()\n                    ? treeRowTabindex(row)\n                    : gridMode()\n                      ? gridRowTabindex(row)\n                      : canDetail()\n                        ? paneRowTabindex(row)\n                        : null\n                \"\n                (keydown)=\"\n                  childrenKey()\n                    ? onTreeRowKeydown(row, $event)\n                    : gridMode()\n                      ? onGridRowKeydown(row, $event)\n                      : onPaneRowKeydown(row, $event)\n                \"\n                (dblclick)=\"onRowActivate(row)\"\n              >\n                @if (canDetail()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('detail')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__detailbtn\"\n                      [class.strct-dg__detailbtn--active]=\"row === activeRow()\"\n                      [attr.aria-expanded]=\"row === activeRow()\"\n                      [attr.aria-label]=\"L().openDetail\"\n                      (click)=\"openDetail(row)\"\n                    >\n                      <strct-icon name=\"chevronDoubleRight\" [size]=\"13\" [strokeWidth]=\"1.6\" />\n                    </button>\n                  </td>\n                }\n                @if (canExpand()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('expand')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__expandbtn\"\n                      [class.strct-dg__expandbtn--open]=\"isExpanded(row)\"\n                      [attr.aria-expanded]=\"isExpanded(row)\"\n                      [attr.aria-label]=\"L().toggleDetail\"\n                      (click)=\"toggleExpand(row)\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </button>\n                  </td>\n                }\n                @if (hasSelectionColumn()) {\n                  <td\n                    class=\"strct-dg__sel\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('sel')\"\n                  >\n                    @if (mode() === 'single') {\n                      <!-- A native radio group: one name per grid, so the\n                           arrow keys move between rows and Space picks,\n                           without the grid inventing its own keyboarding. -->\n                      <input\n                        type=\"radio\"\n                        class=\"strct-dg__radio\"\n                        [name]=\"radioName\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [attr.tabindex]=\"ctlTabindex()\"\n                        (change)=\"selectSingle(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <!-- click fires (and bubbles) before the input's change,\n                           so the modifier is recorded by the time toggleRow runs. -->\n                      <strct-checkbox\n                        [ariaLabel]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [tabIndex]=\"ctlTabindex()\"\n                        (click)=\"noteRangeIntent($event); $event.stopPropagation()\"\n                        (checkedChange)=\"toggleRow(row)\"\n                      />\n                    }\n                  </td>\n                }\n                @for (col of visibleColumns(); track col.key; let colIdx = $index) {\n                  <td\n                    [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n                    [class.strct-dg__cell--mono]=\"col.mono\"\n                    [class.strct-dg__cell--muted]=\"col.muted\"\n                    [class.strct-dg__cell--numeric]=\"col.numeric\"\n                    [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n                    [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n                    [class.strct-dg__cell--editable]=\"col.editable\"\n                    [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n                    [attr.data-edit]=\"col.editable ? '' : null\"\n                    [attr.tabindex]=\"col.editable ? editCellTabindex(row, col) : null\"\n                    [attr.aria-describedby]=\"col.editable ? editHintId : null\"\n                    (dblclick)=\"col.editable && startEdit(row, col)\"\n                    (focus)=\"col.editable && onEditCellFocus(row, col)\"\n                    (keydown)=\"col.editable && onEditCellKeydown(row, col, $event)\"\n                  >\n                    @if (childrenKey() && colIdx === 0) {\n                      <span\n                        class=\"strct-dg__treepad\"\n                        [style.width.px]=\"treeDepth(row) * 18\"\n                        aria-hidden=\"true\"\n                      ></span>\n                      @if (treeHasChildren(row)) {\n                        <button\n                          type=\"button\"\n                          class=\"strct-dg__treebtn\"\n                          [class.strct-dg__treebtn--open]=\"treeExpanded(row)\"\n                          [attr.aria-expanded]=\"treeExpanded(row)\"\n                          [attr.aria-label]=\"L().toggleChildren\"\n                          (click)=\"toggleTreeRow(row)\"\n                        >\n                          <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                        </button>\n                      } @else {\n                        <span\n                          class=\"strct-dg__treebtn strct-dg__treebtn--leaf\"\n                          aria-hidden=\"true\"\n                        ></span>\n                      }\n                    }\n                    @if (isEditingCell(row, col)) {\n                      @switch (col.editor ?? 'text') {\n                        @case ('select') {\n                          <!-- Choosing is the commit: there is nothing to\n                               confirm with Enter once an option is picked. -->\n                          <strct-select\n                            class=\"strct-dg__editselect\"\n                            [options]=\"editorOptionsFor(row, col)\"\n                            [listLabel]=\"L().editCell + ': ' + col.label\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"commitValue(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @case ('number') {\n                          <strct-number\n                            class=\"strct-dg__editnumber\"\n                            [ariaLabel]=\"L().editCell + ': ' + col.label\"\n                            [min]=\"col.editorMin ?? null\"\n                            [max]=\"col.editorMax ?? null\"\n                            [step]=\"col.editorStep ?? 1\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"editDraft.set($event)\"\n                            (keydown.enter)=\"commitDraft(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (focusout)=\"commitOnLeave(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @default {\n                          <input\n                            class=\"strct-dg__editinput\"\n                            type=\"text\"\n                            [value]=\"row[col.key] ?? ''\"\n                            [attr.aria-label]=\"L().editCell + ': ' + col.label\"\n                            (keydown.enter)=\"commitEdit(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (blur)=\"commitEdit(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      }\n                    } @else if (cellTemplate(col.key); as tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          value: row[col.key],\n                          column: col,\n                        }\"\n                      />\n                    } @else if (isBlank(row, col)) {\n                      <span class=\"strct-dg__empty\" [attr.aria-label]=\"col.emptyLabel || null\">{{\n                        col.emptyText\n                      }}</span>\n                    } @else {\n                      {{ displayValue(row, col) }}\n                      @if (col.descriptionKey && row[col.descriptionKey]) {\n                        <span class=\"strct-dg__celldesc\">{{ row[col.descriptionKey] }}</span>\n                      }\n                    }\n                    <!-- The affordance a mouse never needed: a cell that\n                         can be edited says so on hover and on focus. -->\n                    @if (col.editable && editHint() && !isEditingCell(row, col)) {\n                      <strct-icon\n                        class=\"strct-dg__editpencil\"\n                        name=\"pencil\"\n                        [size]=\"12\"\n                        [strokeWidth]=\"1.6\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                  </td>\n                }\n                @if (canActions()) {\n                  <td class=\"strct-dg__actioncell\">\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__kebab\"\n                      [attr.aria-label]=\"L().rowActions\"\n                      (click)=\"openRowMenu(row, $event)\"\n                    >\n                      <strct-icon name=\"dots\" [size]=\"16\" />\n                    </button>\n                  </td>\n                }\n                @if (widthsApplied()) {\n                  <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n                }\n              </tr>\n              @if (canExpand() && isExpanded(row)) {\n                <tr class=\"strct-dg__detailrow\">\n                  <td [attr.colspan]=\"colspan()\">\n                    <div class=\"strct-dg__detail\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"detailDef()!.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, row }\"\n                      />\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          } @empty {\n            <!-- \"Nothing here\" and \"nothing matches what you typed\" are\n                 different states: the second one can be undone, and\n                 saying so is the whole point. -->\n            <tr>\n              <td class=\"strct-dg__emptyrow\" [attr.colspan]=\"colspan()\">\n                @if (filteredAway()) {\n                  <strct-empty-state\n                    size=\"sm\"\n                    [titleLevel]=\"null\"\n                    [title]=\"L().noMatches\"\n                    [description]=\"noMatchesDescription()\"\n                  >\n                    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"clearAllFilters()\">\n                      {{ L().clearFilters }}\n                    </button>\n                  </strct-empty-state>\n                } @else {\n                  <!-- Not a heading: a grid is a region of a page, and an\n                       empty one used to put an <h3> in its outline. -->\n                  <strct-empty-state size=\"sm\" [titleLevel]=\"null\" [title]=\"emptyText()\" />\n                }\n              </td>\n            </tr>\n          }\n          @if (virtual() && bottomPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paneOpen()) {\n    <aside class=\"strct-dg__pane\">\n      <div class=\"strct-dg__pane-head\">\n        @if (narrowPane()) {\n          <!-- The pane has taken the list's place, so there is a way back. -->\n          <button\n            type=\"button\"\n            class=\"strct-dg__pane-back\"\n            [attr.aria-label]=\"L().backToList\"\n            (click)=\"closePane()\"\n          >\n            <strct-icon name=\"chevronLeft\" [size]=\"13\" />\n          </button>\n        }\n        <span class=\"strct-dg__pane-title\">\n          <ng-content select=\"[strctDetailPaneTitle]\" />\n          @if (!paneTitleDef()) {\n            {{ activeRow()![columns()[0].key] }}\n          }\n        </span>\n        <span class=\"strct-dg__pane-meta\">\n          <ng-content select=\"[strctDetailPaneMeta]\" />\n        </span>\n        <span class=\"strct-dg__pane-actions\">\n          <ng-content select=\"[strctDetailPaneActions]\" />\n        </span>\n        <button\n          type=\"button\"\n          class=\"strct-dg__pane-close\"\n          [attr.aria-label]=\"L().closeDetail\"\n          (click)=\"closePane()\"\n        >\n          <strct-icon name=\"close\" [size]=\"13\" />\n        </button>\n      </div>\n      <div class=\"strct-dg__pane-body\">\n        <ng-container\n          [ngTemplateOutlet]=\"detailDef()!.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: activeRow(), row: activeRow() }\"\n        />\n      </div>\n    </aside>\n  }\n</div>\n\n@if (showFooter()) {\n  <div class=\"strct-dg__foot\">\n    <div class=\"strct-dg__foot-left\">\n      @if (columnChooser() || sync()) {\n        <div class=\"strct-dg__actions\">\n          <strct-button-group>\n            @if (columnChooser()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [class.is-open]=\"chooserOpen()\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().chooseColumns\"\n                (click)=\"toggleChooser($event)\"\n              >\n                <strct-icon name=\"settings\" [size]=\"16\" />\n              </button>\n            }\n            @if (sync()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().refresh\"\n                (click)=\"syncChange.emit()\"\n              >\n                <strct-icon name=\"refresh\" [size]=\"16\" />\n              </button>\n            }\n          </strct-button-group>\n          @if (columnChooser() && chooserOpen()) {\n            <div class=\"strct-dg__chooser-menu\">\n              @for (col of columns(); track col.key) {\n                <!-- The whole row toggles; the checkbox's own click must not\n                     reach the row or the column would flip twice. -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                <div\n                  class=\"strct-dg__chooser-item\"\n                  (click)=\"toggleColumn(col.key, hiddenColumns().has(col.key))\"\n                >\n                  <strct-checkbox\n                    [checked]=\"!hiddenColumns().has(col.key)\"\n                    (checkedChange)=\"toggleColumn(col.key, $event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span>{{ col.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <span class=\"strct-dg__count\">\n        @if (paging() === 'more') {\n          {{ L().showing(rows().length, moreTotal() ?? undefined) }}\n        } @else {\n          {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}\n        }\n        @if (selectedCount() && mode() !== 'single') {\n          <span class=\"strct-dg__count-sep\">|</span>\n          <span class=\"strct-dg__count-sel\">{{ selectedCount() }} {{ L().selected }}</span>\n        }\n      </span>\n    </div>\n    <div class=\"strct-dg__foot-right\">\n      <!-- A feed that pages by cursor loads more at the end: page numbers\n           are something a cursor API cannot answer. It takes the pager's\n           place — the column chooser, the sync button and the count are\n           the footer's, not the pager's. -->\n      @if (paging() === 'more') {\n        @if (hasMore()) {\n          <button\n            strct-button\n            size=\"sm\"\n            class=\"strct-dg__more\"\n            [disabled]=\"loadingMore()\"\n            (click)=\"loadMore.emit()\"\n          >\n            @if (loadingMore()) {\n              <strct-spinner size=\"sm\" />\n            }\n            {{ L().loadMore }}\n          </button>\n        }\n      } @else if (pageSize() > 0 && !groupBy()) {\n        <strct-pagination\n          [total]=\"totalCount()\"\n          [pageSize]=\"pageSize()\"\n          [page]=\"page()\"\n          [regionLabel]=\"regionName(L().pagination)\"\n          (pageChange)=\"goToPage($event)\"\n        />\n      }\n    </div>\n  </div>\n}\n",
+		template: "<!-- One polite region for everything the grid does to itself: sorting,\n     paging and filtering all change the rows without saying so. -->\n<span class=\"strct-dg__announcer\" role=\"status\" aria-live=\"polite\">{{ announcement() }}</span>\n@if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {\n  <div class=\"strct-dg__toolbar\">\n    @if (quickFilterable()) {\n      <strct-searchbox\n        class=\"strct-dg__quickfilter\"\n        [class.strct-dg__quickfilter--end]=\"quickFilterAlign() === 'end'\"\n        [placeholder]=\"L().quickFilter\"\n        [ariaLabel]=\"L().quickFilter\"\n        [value]=\"quickFilter()\"\n        (valueChange)=\"quickFilter.set($event)\"\n      />\n      @if (filterNote(); as note) {\n        <span\n          class=\"strct-dg__filternote\"\n          [class.strct-dg__filternote--end]=\"quickFilterAlign() === 'end'\"\n          >{{ note }}</span\n        >\n      }\n    }\n    <span class=\"strct-dg__actioncaption\">\n      <ng-content select=\"[strctDatagridActionBarCaption]\" />\n    </span>\n    <ng-content select=\"[strctDatagridActionBar]\" />\n  </div>\n}\n\n@if (hasEditableColumn()) {\n  <!-- What the editable cells point at with aria-describedby: a keyboard\n       user is told the cell can be edited, and how. -->\n  <span class=\"strct-sr-only\" [id]=\"editHintId\">{{ L().editCellInstructions }}</span>\n}\n\n@if (bulkHint(); as hint) {\n  <!-- Selecting the page is not selecting the set. Say which one happened,\n       and offer the other. -->\n  <div class=\"strct-dg__bulk\" role=\"status\">\n    <span>{{ hint.text }}</span>\n    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"hint.run()\">\n      {{ hint.action }}\n    </button>\n  </div>\n}\n<div\n  class=\"strct-dg__layout\"\n  [class.strct-dg__layout--paned]=\"paneOpen()\"\n  [class.strct-dg__layout--panetakeover]=\"paneOpen() && narrowPane()\"\n  [style.--strct-dg-pane-list-w]=\"paneListWidth()\"\n>\n  <div\n    class=\"strct-dg__scroll\"\n    tabindex=\"0\"\n    role=\"region\"\n    [attr.aria-label]=\"regionName(L().rows)\"\n    [style.max-height.px]=\"virtual() ? viewportHeight() : maxHeight()\"\n    (scroll)=\"virtual() && onScroll($event)\"\n  >\n    <table\n      class=\"strct-dg\"\n      [attr.role]=\"childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null\"\n      [attr.aria-rowcount]=\"ariaRowCount()\"\n      [attr.aria-labelledby]=\"caption() ? captionId : null\"\n    >\n      @if (caption()) {\n        <caption class=\"strct-dg__caption\" [id]=\"captionId\">\n          {{\n            caption()\n          }}\n        </caption>\n      }\n      <thead>\n        <tr>\n          <!-- A utility column is still a column: axe reports every empty\n               header, and a screen-reader user hears nothing where the\n               detail, expand and select controls are. The name is hidden,\n               not absent. -->\n          @if (canDetail()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@detail\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('detail')\"\n              [style.width.px]=\"utilWidth('@detail')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().detailColumn }}</span>\n            </th>\n          }\n          @if (canExpand()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@expand\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('expand')\"\n              [style.width.px]=\"utilWidth('@expand')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().expandColumn }}</span>\n            </th>\n          }\n          @if (hasSelectionColumn()) {\n            <th\n              class=\"strct-dg__sel\"\n              scope=\"col\"\n              data-col=\"@sel\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('sel')\"\n              [style.width.px]=\"utilWidth('@sel')\"\n            >\n              @if (mode() === 'multiple') {\n                <strct-checkbox\n                  [ariaLabel]=\"L().selectAll\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  (checkedChange)=\"toggleAll()\"\n                />\n              } @else {\n                <span class=\"strct-sr-only\">{{ L().selectColumn }}</span>\n              }\n            </th>\n          }\n          @for (col of visibleColumns(); track col.key) {\n            <th\n              scope=\"col\"\n              [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n              [style.width]=\"headerWidth(col)\"\n              [class.strct-dg__th--sortable]=\"col.sortable\"\n              [class.strct-dg__th--drop]=\"col.key === dropKey()\"\n              [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n              [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n              [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n              [attr.data-col]=\"col.key\"\n              [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n              [attr.draggable]=\"reorderable() ? true : null\"\n              (dragstart)=\"onColDragStart(col.key, $event)\"\n              (dragover)=\"onColDragOver(col.key, $event)\"\n              (drop)=\"onColDrop(col.key)\"\n              (dragend)=\"onColDragEnd()\"\n            >\n              <span class=\"strct-dg__hd\">\n                <!-- A header that sorts is a button: a th with tabindex is\n                     read as \"column header, focusable\" and never says it\n                     can be activated. aria-sort stays on the th, which is\n                     what carries the column's sorted state. -->\n                @if (col.sortable) {\n                  <!-- The button covers most of the header, so it carries\n                       the drag source too: a reorderable column has to be\n                       grabbable where the pointer actually lands. The\n                       event bubbles to the th's own handlers. -->\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__sortbtn\"\n                    [attr.draggable]=\"reorderable() ? true : null\"\n                    (click)=\"sortBy(col.key)\"\n                  >\n                    {{ col.label }}\n                    <strct-icon class=\"strct-dg__sorticon\" [name]=\"sortIcon(col.key)\" [size]=\"13\" />\n                  </button>\n                } @else {\n                  {{ col.label }}\n                }\n                @if (col.filterable || col.filterOptions) {\n                  <button\n                    #fbtn\n                    type=\"button\"\n                    class=\"strct-dg__filterbtn\"\n                    [class.strct-dg__filterbtn--active]=\"hasFilter(col.key)\"\n                    [attr.aria-expanded]=\"filterOpenKey() === col.key\"\n                    [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                    (click)=\"toggleFilterPanel(col.key, $event)\"\n                    (keydown.enter)=\"$event.stopPropagation()\"\n                    (keydown.space)=\"$event.stopPropagation()\"\n                  >\n                    <strct-icon name=\"filter\" [size]=\"12\" />\n                  </button>\n                  @if (filterOpenKey() === col.key) {\n                    <div\n                      class=\"strct-dg__filterpanel\"\n                      role=\"dialog\"\n                      [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                      [strctOverlay]=\"fbtn\"\n                      strctOverlayPlacement=\"bottom-start\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown.enter)=\"$event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                    >\n                      @if (col.filterOptions; as opts) {\n                        @for (opt of opts; track $index) {\n                          <label class=\"strct-dg__filteropt\">\n                            <input\n                              type=\"checkbox\"\n                              [checked]=\"optionChecked(col.key, opt)\"\n                              (change)=\"toggleFilterOption(col.key, opt)\"\n                            />\n                            <span>{{ opt }}</span>\n                          </label>\n                        }\n                      } @else {\n                        <input\n                          class=\"strct-dg__filterinput\"\n                          type=\"text\"\n                          [attr.placeholder]=\"L().filterPlaceholder\"\n                          [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                          [value]=\"textFilter(col.key)\"\n                          (input)=\"setTextFilter(col.key, $any($event.target).value)\"\n                        />\n                      }\n                      <button\n                        type=\"button\"\n                        class=\"strct-dg__filterclear\"\n                        [disabled]=\"!hasFilter(col.key)\"\n                        (click)=\"clearFilter(col.key)\"\n                      >\n                        {{ L().clearFilter }}\n                      </button>\n                    </div>\n                  }\n                }\n              </span>\n              @if (resizable() && col.resizable !== false) {\n                <!-- A separator, not a bare div: a column could only be\n                     resized with a mouse, which is the one input a\n                     console cannot assume. -->\n                <div\n                  class=\"strct-dg__resize\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"L().resizeColumn(col.label)\"\n                  [attr.aria-valuenow]=\"separatorValue(col.key)\"\n                  [attr.aria-valuemin]=\"40\"\n                  (mousedown)=\"onResizeStart($event, col.key)\"\n                  (keydown)=\"onResizeKey($event, col.key)\"\n                  (dblclick)=\"resetWidth(col.key)\"\n                ></div>\n              }\n            </th>\n          }\n          @if (canActions()) {\n            <th\n              class=\"strct-dg__actioncol\"\n              scope=\"col\"\n              data-col=\"@actions\"\n              [attr.aria-label]=\"L().actions\"\n              [style.width.px]=\"utilWidth('@actions')\"\n            ></th>\n          }\n          @if (widthsApplied()) {\n            <!-- The leftover lives here, so every column keeps the width it\n                 was given: with each column stated the browser scales them\n                 all to fit (200px asked, 231px drawn), and with one cell\n                 left free they are exact and the remainder lands in it. A\n                 presentational cell, so it says nothing and, once the stated\n                 widths fill the grid, takes no width either. -->\n            <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n          }\n        </tr>\n      </thead>\n      <!--\n        focusin is the real keyboard path (focus does not bubble from cells);\n        the plain focus binding exists to satisfy mouse-events-have-key-events.\n      -->\n      <tbody\n        (mouseover)=\"revealIfClipped($event)\"\n        (focusin)=\"revealIfClipped($event)\"\n        (focus)=\"revealIfClipped($event)\"\n      >\n        @if (loading()) {\n          @for (_ of [1, 2, 3, 4, 5]; track $index) {\n            <tr class=\"strct-dg__skeleton-row\">\n              @if (canDetail()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (canExpand()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (hasSelectionColumn()) {\n                <td class=\"strct-dg__sel\"></td>\n              }\n              @for (col of visibleColumns(); track col.key) {\n                <td [style.text-align]=\"col.align ?? 'start'\">\n                  <div class=\"strct-dg__skeleton-block\"></div>\n                </td>\n              }\n              @if (canActions()) {\n                <td class=\"strct-dg__actioncell\"></td>\n              }\n              @if (widthsApplied()) {\n                <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n              }\n            </tr>\n          }\n        } @else {\n          @if (virtual() && topPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td>\n            </tr>\n          }\n          @for (it of displayItems(); track itemKey(it)) {\n            @if (it.group; as grp) {\n              <!-- Group header: distinct value + count, collapsible. -->\n              <tr class=\"strct-dg__grouprow\">\n                @if (groupSelect() && mode() === 'multiple') {\n                  <td class=\"strct-dg__sel\">\n                    <strct-checkbox\n                      [ariaLabel]=\"L().selectAllInGroup(grp.label)\"\n                      [checked]=\"groupAllSelected(grp.key)\"\n                      [indeterminate]=\"groupSomeSelected(grp.key)\"\n                      (checkedChange)=\"toggleGroupSelection(grp.key)\"\n                    />\n                  </td>\n                }\n                <td\n                  [attr.colspan]=\"\n                    groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()\n                  \"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__groupbtn\"\n                    [attr.aria-expanded]=\"!grp.collapsed\"\n                    (click)=\"toggleGroup(grp.key)\"\n                  >\n                    <span\n                      class=\"strct-dg__groupchev\"\n                      [class.strct-dg__groupchev--open]=\"!grp.collapsed\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </span>\n                    @if (groupHeaderDef(); as tpl) {\n                      <!-- The consumer draws the row; the button, its\n                           aria-expanded and the keyboard stay ours. -->\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: grp,\n                          group: grp,\n                          count: grp.count,\n                        }\"\n                      />\n                    } @else {\n                      <span\n                        class=\"strct-dg__grouplabel strct-dg__grouplabel--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.label }}</span\n                      >\n                      <!-- The three spans run together in the button's\n                           name (\"Needs your decision1Blocks the join…\");\n                           the separators are read, not seen. -->\n                      <span class=\"strct-dg__announcer\">, </span>\n                      <span\n                        class=\"strct-dg__groupcount strct-dg__groupcount--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.count }}</span\n                      >\n                      <!-- Seen: the chip's number. Heard: the number with\n                           the grid's noun, because \"Inconclusive, 3\" does\n                           not say three of what. -->\n                      <span class=\"strct-dg__announcer\"> {{ countNoun(grp.count) }}</span>\n                      @if (grp.note) {\n                        <span class=\"strct-dg__announcer\">. </span>\n                        <span class=\"strct-dg__groupnote\">{{ grp.note }}</span>\n                      }\n                    }\n                  </button>\n                </td>\n              </tr>\n            } @else {\n              @let row = it.row!;\n              <tr\n                [attr.aria-rowindex]=\"ariaRowIndex(row)\"\n                [class.strct-dg__row--selected]=\"isSelected(row)\"\n                [class.strct-dg__row--locked]=\"lockedReason(row) !== null\"\n                [attr.aria-selected]=\"mode() === 'none' ? null : isSelected(row)\"\n                [attr.aria-disabled]=\"lockedReason(row) !== null ? 'true' : null\"\n                [attr.title]=\"lockedReason(row) || null\"\n                (click)=\"onRowPick(row)\"\n                [class.strct-dg__row--active]=\"paneOpen() && row === activeRow()\"\n                [attr.aria-level]=\"childrenKey() ? treeDepth(row) + 1 : null\"\n                [attr.aria-expanded]=\"\n                  childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null\n                \"\n                [attr.tabindex]=\"\n                  childrenKey()\n                    ? treeRowTabindex(row)\n                    : gridMode()\n                      ? gridRowTabindex(row)\n                      : canDetail()\n                        ? paneRowTabindex(row)\n                        : null\n                \"\n                (keydown)=\"\n                  childrenKey()\n                    ? onTreeRowKeydown(row, $event)\n                    : gridMode()\n                      ? onGridRowKeydown(row, $event)\n                      : onPaneRowKeydown(row, $event)\n                \"\n                (dblclick)=\"onRowActivate(row)\"\n              >\n                @if (canDetail()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('detail')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__detailbtn\"\n                      [class.strct-dg__detailbtn--active]=\"row === activeRow()\"\n                      [attr.aria-expanded]=\"row === activeRow()\"\n                      [attr.aria-label]=\"L().openDetail\"\n                      (click)=\"openDetail(row)\"\n                    >\n                      <strct-icon name=\"chevronDoubleRight\" [size]=\"13\" [strokeWidth]=\"1.6\" />\n                    </button>\n                  </td>\n                }\n                @if (canExpand()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('expand')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__expandbtn\"\n                      [class.strct-dg__expandbtn--open]=\"isExpanded(row)\"\n                      [attr.aria-expanded]=\"isExpanded(row)\"\n                      [attr.aria-label]=\"L().toggleDetail\"\n                      (click)=\"toggleExpand(row)\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </button>\n                  </td>\n                }\n                @if (hasSelectionColumn()) {\n                  <td\n                    class=\"strct-dg__sel\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('sel')\"\n                  >\n                    @if (mode() === 'single') {\n                      <!-- A native radio group: one name per grid, so the\n                           arrow keys move between rows and Space picks,\n                           without the grid inventing its own keyboarding. -->\n                      <input\n                        type=\"radio\"\n                        class=\"strct-dg__radio\"\n                        [name]=\"radioName\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [attr.tabindex]=\"ctlTabindex()\"\n                        (change)=\"selectSingle(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <!-- click fires (and bubbles) before the input's change,\n                           so the modifier is recorded by the time toggleRow runs. -->\n                      <strct-checkbox\n                        [ariaLabel]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [tabIndex]=\"ctlTabindex()\"\n                        (click)=\"noteRangeIntent($event); $event.stopPropagation()\"\n                        (checkedChange)=\"toggleRow(row)\"\n                      />\n                    }\n                  </td>\n                }\n                @for (col of visibleColumns(); track col.key; let colIdx = $index) {\n                  <td\n                    [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n                    [class.strct-dg__cell--mono]=\"col.mono\"\n                    [class.strct-dg__cell--muted]=\"col.muted\"\n                    [class.strct-dg__cell--numeric]=\"col.numeric\"\n                    [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n                    [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n                    [class.strct-dg__cell--editable]=\"col.editable\"\n                    [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n                    [attr.data-edit]=\"col.editable ? '' : null\"\n                    [attr.tabindex]=\"col.editable ? editCellTabindex(row, col) : null\"\n                    [attr.aria-describedby]=\"col.editable ? editHintId : null\"\n                    (dblclick)=\"col.editable && startEdit(row, col)\"\n                    (focus)=\"col.editable && onEditCellFocus(row, col)\"\n                    (keydown)=\"col.editable && onEditCellKeydown(row, col, $event)\"\n                  >\n                    @if (childrenKey() && colIdx === 0) {\n                      <span\n                        class=\"strct-dg__treepad\"\n                        [style.width.px]=\"treeDepth(row) * 18\"\n                        aria-hidden=\"true\"\n                      ></span>\n                      @if (treeHasChildren(row)) {\n                        <button\n                          type=\"button\"\n                          class=\"strct-dg__treebtn\"\n                          [class.strct-dg__treebtn--open]=\"treeExpanded(row)\"\n                          [attr.aria-expanded]=\"treeExpanded(row)\"\n                          [attr.aria-label]=\"L().toggleChildren\"\n                          (click)=\"toggleTreeRow(row)\"\n                        >\n                          <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                        </button>\n                      } @else {\n                        <span\n                          class=\"strct-dg__treebtn strct-dg__treebtn--leaf\"\n                          aria-hidden=\"true\"\n                        ></span>\n                      }\n                    }\n                    @if (isEditingCell(row, col)) {\n                      @switch (col.editor ?? 'text') {\n                        @case ('select') {\n                          <!-- Choosing is the commit: there is nothing to\n                               confirm with Enter once an option is picked. -->\n                          <strct-select\n                            class=\"strct-dg__editselect\"\n                            [options]=\"editorOptionsFor(row, col)\"\n                            [listLabel]=\"L().editCell + ': ' + col.label\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"commitValue(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @case ('number') {\n                          <strct-number\n                            class=\"strct-dg__editnumber\"\n                            [ariaLabel]=\"L().editCell + ': ' + col.label\"\n                            [min]=\"col.editorMin ?? null\"\n                            [max]=\"col.editorMax ?? null\"\n                            [step]=\"col.editorStep ?? 1\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"editDraft.set($event)\"\n                            (keydown.enter)=\"commitDraft(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (focusout)=\"commitOnLeave(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @default {\n                          <input\n                            class=\"strct-dg__editinput\"\n                            type=\"text\"\n                            [value]=\"row[col.key] ?? ''\"\n                            [attr.aria-label]=\"L().editCell + ': ' + col.label\"\n                            (keydown.enter)=\"commitEdit(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (blur)=\"commitEdit(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      }\n                    } @else if (cellTemplate(col.key); as tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          value: row[col.key],\n                          column: col,\n                        }\"\n                      />\n                    } @else if (isBlank(row, col)) {\n                      <span class=\"strct-dg__empty\" [attr.aria-label]=\"col.emptyLabel || null\">{{\n                        col.emptyText\n                      }}</span>\n                    } @else {\n                      {{ displayValue(row, col) }}\n                      @if (col.descriptionKey && row[col.descriptionKey]) {\n                        <span class=\"strct-dg__celldesc\">{{ row[col.descriptionKey] }}</span>\n                      }\n                    }\n                    <!-- The affordance a mouse never needed: a cell that\n                         can be edited says so on hover and on focus. -->\n                    @if (col.editable && editHint() && !isEditingCell(row, col)) {\n                      <strct-icon\n                        class=\"strct-dg__editpencil\"\n                        name=\"pencil\"\n                        [size]=\"12\"\n                        [strokeWidth]=\"1.6\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                  </td>\n                }\n                @if (canActions()) {\n                  <td class=\"strct-dg__actioncell\">\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__kebab\"\n                      [attr.aria-label]=\"L().rowActions\"\n                      (click)=\"openRowMenu(row, $event)\"\n                    >\n                      <strct-icon name=\"dots\" [size]=\"16\" />\n                    </button>\n                  </td>\n                }\n                @if (widthsApplied()) {\n                  <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n                }\n              </tr>\n              @if (canExpand() && isExpanded(row)) {\n                <tr class=\"strct-dg__detailrow\">\n                  <td [attr.colspan]=\"colspan()\">\n                    <div class=\"strct-dg__detail\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"detailDef()!.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, row }\"\n                      />\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          } @empty {\n            <!-- \"Nothing here\" and \"nothing matches what you typed\" are\n                 different states: the second one can be undone, and\n                 saying so is the whole point. -->\n            <tr>\n              <td class=\"strct-dg__emptyrow\" [attr.colspan]=\"colspan()\">\n                @if (filteredAway()) {\n                  <strct-empty-state\n                    size=\"sm\"\n                    [titleLevel]=\"null\"\n                    [title]=\"L().noMatches\"\n                    [description]=\"noMatchesDescription()\"\n                  >\n                    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"clearAllFilters()\">\n                      {{ L().clearFilters }}\n                    </button>\n                  </strct-empty-state>\n                } @else {\n                  <!-- Not a heading: a grid is a region of a page, and an\n                       empty one used to put an <h3> in its outline. -->\n                  <strct-empty-state size=\"sm\" [titleLevel]=\"null\" [title]=\"emptyText()\" />\n                }\n              </td>\n            </tr>\n          }\n          @if (virtual() && bottomPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paneOpen()) {\n    <aside class=\"strct-dg__pane\">\n      <div class=\"strct-dg__pane-head\">\n        @if (narrowPane()) {\n          <!-- The pane has taken the list's place, so there is a way back. -->\n          <button\n            type=\"button\"\n            class=\"strct-dg__pane-back\"\n            [attr.aria-label]=\"L().backToList\"\n            (click)=\"closePane()\"\n          >\n            <strct-icon name=\"chevronLeft\" [size]=\"13\" />\n          </button>\n        }\n        <span class=\"strct-dg__pane-title\">\n          <ng-content select=\"[strctDetailPaneTitle]\" />\n          @if (!paneTitleDef()) {\n            {{ activeRow()![columns()[0].key] }}\n          }\n        </span>\n        <span class=\"strct-dg__pane-meta\">\n          <ng-content select=\"[strctDetailPaneMeta]\" />\n        </span>\n        <span class=\"strct-dg__pane-actions\">\n          <ng-content select=\"[strctDetailPaneActions]\" />\n        </span>\n        <button\n          type=\"button\"\n          class=\"strct-dg__pane-close\"\n          [attr.aria-label]=\"L().closeDetail\"\n          (click)=\"closePane()\"\n        >\n          <strct-icon name=\"close\" [size]=\"13\" />\n        </button>\n      </div>\n      <div class=\"strct-dg__pane-body\">\n        <ng-container\n          [ngTemplateOutlet]=\"detailDef()!.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: activeRow(), row: activeRow() }\"\n        />\n      </div>\n    </aside>\n  }\n</div>\n\n@if (showFooter()) {\n  <div class=\"strct-dg__foot\">\n    <div class=\"strct-dg__foot-left\">\n      @if (columnChooser() || sync()) {\n        <div class=\"strct-dg__actions\">\n          <strct-button-group>\n            @if (columnChooser()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [class.is-open]=\"chooserOpen()\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().chooseColumns\"\n                (click)=\"toggleChooser($event)\"\n              >\n                <strct-icon name=\"settings\" />\n              </button>\n            }\n            @if (sync()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().refresh\"\n                (click)=\"syncChange.emit()\"\n              >\n                <strct-icon name=\"refresh\" />\n              </button>\n            }\n          </strct-button-group>\n          @if (columnChooser() && chooserOpen()) {\n            <div class=\"strct-dg__chooser-menu\">\n              @for (col of columns(); track col.key) {\n                <!-- The whole row toggles; the checkbox's own click must not\n                     reach the row or the column would flip twice. -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                <div\n                  class=\"strct-dg__chooser-item\"\n                  (click)=\"toggleColumn(col.key, hiddenColumns().has(col.key))\"\n                >\n                  <strct-checkbox\n                    [checked]=\"!hiddenColumns().has(col.key)\"\n                    (checkedChange)=\"toggleColumn(col.key, $event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span>{{ col.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <span class=\"strct-dg__count\">\n        @if (paging() === 'more') {\n          {{ L().showing(rows().length, moreTotal() ?? undefined) }}\n        } @else {\n          {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}\n        }\n        @if (selectedCount() && mode() !== 'single') {\n          <span class=\"strct-dg__count-sep\">|</span>\n          <span class=\"strct-dg__count-sel\">{{ selectedCount() }} {{ L().selected }}</span>\n        }\n      </span>\n    </div>\n    <div class=\"strct-dg__foot-right\">\n      <!-- A feed that pages by cursor loads more at the end: page numbers\n           are something a cursor API cannot answer. It takes the pager's\n           place — the column chooser, the sync button and the count are\n           the footer's, not the pager's. -->\n      @if (paging() === 'more') {\n        @if (hasMore()) {\n          <button\n            strct-button\n            size=\"sm\"\n            class=\"strct-dg__more\"\n            [disabled]=\"loadingMore()\"\n            (click)=\"loadMore.emit()\"\n          >\n            @if (loadingMore()) {\n              <strct-spinner size=\"sm\" />\n            }\n            {{ L().loadMore }}\n          </button>\n        }\n      } @else if (pageSize() > 0 && !groupBy()) {\n        <strct-pagination\n          [total]=\"totalCount()\"\n          [pageSize]=\"pageSize()\"\n          [page]=\"page()\"\n          [regionLabel]=\"regionName(L().pagination)\"\n          (pageChange)=\"goToPage($event)\"\n        />\n      }\n    </div>\n  </div>\n}\n",
 		styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t2)}.strct-dg__bulk{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:7px 12px;border-bottom:1px solid var(--b2);background:var(--acc-s);color:var(--t2);font-size:var(--text-md)}.strct-dg__announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t2)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t2)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t2);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:var(--text-sm);font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__grouplabel--critical{color:var(--critical)}.strct-dg__grouplabel--warning{color:var(--warning)}.strct-dg__grouplabel--success{color:var(--success)}.strct-dg__grouplabel--accent{color:var(--acc)}.strct-dg__grouplabel--neutral,.strct-dg__grouplabel--none{color:var(--t1)}.strct-dg__groupnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg__groupcount--critical{background:var(--critical-bg);color:var(--critical)}.strct-dg__groupcount--warning{background:var(--warning-bg);color:var(--warning)}.strct-dg__groupcount--success{background:var(--success-bg);color:var(--success)}.strct-dg__groupcount--neutral,.strct-dg__groupcount--none{background:var(--bg-3);color:var(--t2)}.strct-dg-host--singleline .strct-dg{border-collapse:separate;border-spacing:0}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:4px;border-start-end-radius:4px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:4px;border-end-end-radius:4px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td .strct-btn--link{display:inline-block;max-width:100%;overflow:hidden;white-space:inherit;text-overflow:ellipsis;vertical-align:bottom}.strct-dg-host--fixedcols .strct-dg{table-layout:fixed}.strct-dg-host--fixedcols.strct-dg-host--sticky .strct-dg{width:100%;min-width:0}.strct-dg-host--fixedcols .strct-dg th,.strct-dg-host--fixedcols .strct-dg td{box-sizing:border-box}.strct-dg__filler{padding:0}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__sortbtn{display:inline-flex;align-items:center;gap:inherit;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}.strct-dg__sortbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel .strct-cb,.strct-dg__sel .strct-dg__radio,.strct-dg__expandbtn{position:relative}.strct-dg__sel .strct-cb:after,.strct-dg__sel .strct-dg__radio:after,.strct-dg__expandbtn:after{content:\"\";position:absolute;inset:-11px -13px;min-width:24px;min-height:24px}.strct-dg-host--compact .strct-dg__sel .strct-cb:after,.strct-dg-host--compact .strct-dg__sel .strct-dg__radio:after,.strct-dg-host--compact .strct-dg__expandbtn:after{inset:-7px -11px}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned>.strct-dg__scroll{flex:0 0 auto;width:var(--strct-dg-pane-list-w, 260px);min-width:var(--strct-dg-pane-list-w, 260px);max-width:var(--strct-dg-pane-list-w, 260px)}.strct-dg__layout--paned>.strct-dg__scroll>.strct-dg{width:100%;min-width:0;max-width:none;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__layout--panetakeover>.strct-dg__scroll{display:none}.strct-dg__layout--panetakeover>.strct-dg__pane{flex:1;min-width:0}.strct-dg__pane-meta,.strct-dg__pane-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-dg__pane-meta:empty,.strct-dg__pane-actions:empty{display:none}.strct-dg__pane-actions{margin-inline-start:auto}.strct-dg__pane-back{display:inline-flex;align-items:center;border:0;background:none;color:var(--t2);cursor:pointer;padding:2px;border-radius:var(--radius-sm)}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t2);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:var(--text-sm);cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"],
 		dependencies: [
 			{
@@ -27482,7 +27557,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.strct-dg-host--sticky]": "stickyActive()",
 				"[class.strct-dg-host--flush]": "flush()"
 			},
-			template: "<!-- One polite region for everything the grid does to itself: sorting,\n     paging and filtering all change the rows without saying so. -->\n<span class=\"strct-dg__announcer\" role=\"status\" aria-live=\"polite\">{{ announcement() }}</span>\n@if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {\n  <div class=\"strct-dg__toolbar\">\n    @if (quickFilterable()) {\n      <strct-searchbox\n        class=\"strct-dg__quickfilter\"\n        [class.strct-dg__quickfilter--end]=\"quickFilterAlign() === 'end'\"\n        [placeholder]=\"L().quickFilter\"\n        [ariaLabel]=\"L().quickFilter\"\n        [value]=\"quickFilter()\"\n        (valueChange)=\"quickFilter.set($event)\"\n      />\n      @if (filterNote(); as note) {\n        <span\n          class=\"strct-dg__filternote\"\n          [class.strct-dg__filternote--end]=\"quickFilterAlign() === 'end'\"\n          >{{ note }}</span\n        >\n      }\n    }\n    <span class=\"strct-dg__actioncaption\">\n      <ng-content select=\"[strctDatagridActionBarCaption]\" />\n    </span>\n    <ng-content select=\"[strctDatagridActionBar]\" />\n  </div>\n}\n\n@if (hasEditableColumn()) {\n  <!-- What the editable cells point at with aria-describedby: a keyboard\n       user is told the cell can be edited, and how. -->\n  <span class=\"strct-sr-only\" [id]=\"editHintId\">{{ L().editCellInstructions }}</span>\n}\n\n@if (bulkHint(); as hint) {\n  <!-- Selecting the page is not selecting the set. Say which one happened,\n       and offer the other. -->\n  <div class=\"strct-dg__bulk\" role=\"status\">\n    <span>{{ hint.text }}</span>\n    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"hint.run()\">\n      {{ hint.action }}\n    </button>\n  </div>\n}\n<div\n  class=\"strct-dg__layout\"\n  [class.strct-dg__layout--paned]=\"paneOpen()\"\n  [class.strct-dg__layout--panetakeover]=\"paneOpen() && narrowPane()\"\n  [style.--strct-dg-pane-list-w]=\"paneListWidth()\"\n>\n  <div\n    class=\"strct-dg__scroll\"\n    tabindex=\"0\"\n    role=\"region\"\n    [attr.aria-label]=\"regionName(L().rows)\"\n    [style.max-height.px]=\"virtual() ? viewportHeight() : maxHeight()\"\n    (scroll)=\"virtual() && onScroll($event)\"\n  >\n    <table\n      class=\"strct-dg\"\n      [attr.role]=\"childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null\"\n      [attr.aria-rowcount]=\"ariaRowCount()\"\n      [attr.aria-labelledby]=\"caption() ? captionId : null\"\n    >\n      @if (caption()) {\n        <caption class=\"strct-dg__caption\" [id]=\"captionId\">\n          {{\n            caption()\n          }}\n        </caption>\n      }\n      <thead>\n        <tr>\n          <!-- A utility column is still a column: axe reports every empty\n               header, and a screen-reader user hears nothing where the\n               detail, expand and select controls are. The name is hidden,\n               not absent. -->\n          @if (canDetail()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@detail\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('detail')\"\n              [style.width.px]=\"utilWidth('@detail')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().detailColumn }}</span>\n            </th>\n          }\n          @if (canExpand()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@expand\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('expand')\"\n              [style.width.px]=\"utilWidth('@expand')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().expandColumn }}</span>\n            </th>\n          }\n          @if (hasSelectionColumn()) {\n            <th\n              class=\"strct-dg__sel\"\n              scope=\"col\"\n              data-col=\"@sel\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('sel')\"\n              [style.width.px]=\"utilWidth('@sel')\"\n            >\n              @if (mode() === 'multiple') {\n                <strct-checkbox\n                  [ariaLabel]=\"L().selectAll\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  (checkedChange)=\"toggleAll()\"\n                />\n              } @else {\n                <span class=\"strct-sr-only\">{{ L().selectColumn }}</span>\n              }\n            </th>\n          }\n          @for (col of visibleColumns(); track col.key) {\n            <th\n              scope=\"col\"\n              [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n              [style.width]=\"headerWidth(col)\"\n              [class.strct-dg__th--sortable]=\"col.sortable\"\n              [class.strct-dg__th--drop]=\"col.key === dropKey()\"\n              [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n              [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n              [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n              [attr.data-col]=\"col.key\"\n              [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n              [attr.draggable]=\"reorderable() ? true : null\"\n              (dragstart)=\"onColDragStart(col.key, $event)\"\n              (dragover)=\"onColDragOver(col.key, $event)\"\n              (drop)=\"onColDrop(col.key)\"\n              (dragend)=\"onColDragEnd()\"\n            >\n              <span class=\"strct-dg__hd\">\n                <!-- A header that sorts is a button: a th with tabindex is\n                     read as \"column header, focusable\" and never says it\n                     can be activated. aria-sort stays on the th, which is\n                     what carries the column's sorted state. -->\n                @if (col.sortable) {\n                  <!-- The button covers most of the header, so it carries\n                       the drag source too: a reorderable column has to be\n                       grabbable where the pointer actually lands. The\n                       event bubbles to the th's own handlers. -->\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__sortbtn\"\n                    [attr.draggable]=\"reorderable() ? true : null\"\n                    (click)=\"sortBy(col.key)\"\n                  >\n                    {{ col.label }}\n                    <strct-icon class=\"strct-dg__sorticon\" [name]=\"sortIcon(col.key)\" [size]=\"13\" />\n                  </button>\n                } @else {\n                  {{ col.label }}\n                }\n                @if (col.filterable || col.filterOptions) {\n                  <button\n                    #fbtn\n                    type=\"button\"\n                    class=\"strct-dg__filterbtn\"\n                    [class.strct-dg__filterbtn--active]=\"hasFilter(col.key)\"\n                    [attr.aria-expanded]=\"filterOpenKey() === col.key\"\n                    [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                    (click)=\"toggleFilterPanel(col.key, $event)\"\n                    (keydown.enter)=\"$event.stopPropagation()\"\n                    (keydown.space)=\"$event.stopPropagation()\"\n                  >\n                    <strct-icon name=\"filter\" [size]=\"12\" />\n                  </button>\n                  @if (filterOpenKey() === col.key) {\n                    <div\n                      class=\"strct-dg__filterpanel\"\n                      role=\"dialog\"\n                      [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                      [strctOverlay]=\"fbtn\"\n                      strctOverlayPlacement=\"bottom-start\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown.enter)=\"$event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                    >\n                      @if (col.filterOptions; as opts) {\n                        @for (opt of opts; track $index) {\n                          <label class=\"strct-dg__filteropt\">\n                            <input\n                              type=\"checkbox\"\n                              [checked]=\"optionChecked(col.key, opt)\"\n                              (change)=\"toggleFilterOption(col.key, opt)\"\n                            />\n                            <span>{{ opt }}</span>\n                          </label>\n                        }\n                      } @else {\n                        <input\n                          class=\"strct-dg__filterinput\"\n                          type=\"text\"\n                          [attr.placeholder]=\"L().filterPlaceholder\"\n                          [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                          [value]=\"textFilter(col.key)\"\n                          (input)=\"setTextFilter(col.key, $any($event.target).value)\"\n                        />\n                      }\n                      <button\n                        type=\"button\"\n                        class=\"strct-dg__filterclear\"\n                        [disabled]=\"!hasFilter(col.key)\"\n                        (click)=\"clearFilter(col.key)\"\n                      >\n                        {{ L().clearFilter }}\n                      </button>\n                    </div>\n                  }\n                }\n              </span>\n              @if (resizable() && col.resizable !== false) {\n                <!-- A separator, not a bare div: a column could only be\n                     resized with a mouse, which is the one input a\n                     console cannot assume. -->\n                <div\n                  class=\"strct-dg__resize\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"L().resizeColumn(col.label)\"\n                  [attr.aria-valuenow]=\"separatorValue(col.key)\"\n                  [attr.aria-valuemin]=\"40\"\n                  (mousedown)=\"onResizeStart($event, col.key)\"\n                  (keydown)=\"onResizeKey($event, col.key)\"\n                  (dblclick)=\"resetWidth(col.key)\"\n                ></div>\n              }\n            </th>\n          }\n          @if (canActions()) {\n            <th\n              class=\"strct-dg__actioncol\"\n              scope=\"col\"\n              data-col=\"@actions\"\n              [attr.aria-label]=\"L().actions\"\n              [style.width.px]=\"utilWidth('@actions')\"\n            ></th>\n          }\n          @if (widthsApplied()) {\n            <!-- The leftover lives here, so every column keeps the width it\n                 was given: with each column stated the browser scales them\n                 all to fit (200px asked, 231px drawn), and with one cell\n                 left free they are exact and the remainder lands in it. A\n                 presentational cell, so it says nothing and, once the stated\n                 widths fill the grid, takes no width either. -->\n            <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n          }\n        </tr>\n      </thead>\n      <!--\n        focusin is the real keyboard path (focus does not bubble from cells);\n        the plain focus binding exists to satisfy mouse-events-have-key-events.\n      -->\n      <tbody\n        (mouseover)=\"revealIfClipped($event)\"\n        (focusin)=\"revealIfClipped($event)\"\n        (focus)=\"revealIfClipped($event)\"\n      >\n        @if (loading()) {\n          @for (_ of [1, 2, 3, 4, 5]; track $index) {\n            <tr class=\"strct-dg__skeleton-row\">\n              @if (canDetail()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (canExpand()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (hasSelectionColumn()) {\n                <td class=\"strct-dg__sel\"></td>\n              }\n              @for (col of visibleColumns(); track col.key) {\n                <td [style.text-align]=\"col.align ?? 'start'\">\n                  <div class=\"strct-dg__skeleton-block\"></div>\n                </td>\n              }\n              @if (canActions()) {\n                <td class=\"strct-dg__actioncell\"></td>\n              }\n              @if (widthsApplied()) {\n                <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n              }\n            </tr>\n          }\n        } @else {\n          @if (virtual() && topPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td>\n            </tr>\n          }\n          @for (it of displayItems(); track itemKey(it)) {\n            @if (it.group; as grp) {\n              <!-- Group header: distinct value + count, collapsible. -->\n              <tr class=\"strct-dg__grouprow\">\n                @if (groupSelect() && mode() === 'multiple') {\n                  <td class=\"strct-dg__sel\">\n                    <strct-checkbox\n                      [ariaLabel]=\"L().selectAllInGroup(grp.label)\"\n                      [checked]=\"groupAllSelected(grp.key)\"\n                      [indeterminate]=\"groupSomeSelected(grp.key)\"\n                      (checkedChange)=\"toggleGroupSelection(grp.key)\"\n                    />\n                  </td>\n                }\n                <td\n                  [attr.colspan]=\"\n                    groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()\n                  \"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__groupbtn\"\n                    [attr.aria-expanded]=\"!grp.collapsed\"\n                    (click)=\"toggleGroup(grp.key)\"\n                  >\n                    <span\n                      class=\"strct-dg__groupchev\"\n                      [class.strct-dg__groupchev--open]=\"!grp.collapsed\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </span>\n                    @if (groupHeaderDef(); as tpl) {\n                      <!-- The consumer draws the row; the button, its\n                           aria-expanded and the keyboard stay ours. -->\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: grp,\n                          group: grp,\n                          count: grp.count,\n                        }\"\n                      />\n                    } @else {\n                      <span\n                        class=\"strct-dg__grouplabel strct-dg__grouplabel--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.label }}</span\n                      >\n                      <!-- The three spans run together in the button's\n                           name (\"Needs your decision1Blocks the join…\");\n                           the separators are read, not seen. -->\n                      <span class=\"strct-dg__announcer\">, </span>\n                      <span\n                        class=\"strct-dg__groupcount strct-dg__groupcount--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.count }}</span\n                      >\n                      <!-- Seen: the chip's number. Heard: the number with\n                           the grid's noun, because \"Inconclusive, 3\" does\n                           not say three of what. -->\n                      <span class=\"strct-dg__announcer\"> {{ countNoun(grp.count) }}</span>\n                      @if (grp.note) {\n                        <span class=\"strct-dg__announcer\">. </span>\n                        <span class=\"strct-dg__groupnote\">{{ grp.note }}</span>\n                      }\n                    }\n                  </button>\n                </td>\n              </tr>\n            } @else {\n              @let row = it.row!;\n              <tr\n                [attr.aria-rowindex]=\"ariaRowIndex(row)\"\n                [class.strct-dg__row--selected]=\"isSelected(row)\"\n                [class.strct-dg__row--locked]=\"lockedReason(row) !== null\"\n                [attr.aria-selected]=\"mode() === 'none' ? null : isSelected(row)\"\n                [attr.aria-disabled]=\"lockedReason(row) !== null ? 'true' : null\"\n                [attr.title]=\"lockedReason(row) || null\"\n                (click)=\"onRowPick(row)\"\n                [class.strct-dg__row--active]=\"paneOpen() && row === activeRow()\"\n                [attr.aria-level]=\"childrenKey() ? treeDepth(row) + 1 : null\"\n                [attr.aria-expanded]=\"\n                  childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null\n                \"\n                [attr.tabindex]=\"\n                  childrenKey()\n                    ? treeRowTabindex(row)\n                    : gridMode()\n                      ? gridRowTabindex(row)\n                      : canDetail()\n                        ? paneRowTabindex(row)\n                        : null\n                \"\n                (keydown)=\"\n                  childrenKey()\n                    ? onTreeRowKeydown(row, $event)\n                    : gridMode()\n                      ? onGridRowKeydown(row, $event)\n                      : onPaneRowKeydown(row, $event)\n                \"\n                (dblclick)=\"onRowActivate(row)\"\n              >\n                @if (canDetail()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('detail')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__detailbtn\"\n                      [class.strct-dg__detailbtn--active]=\"row === activeRow()\"\n                      [attr.aria-expanded]=\"row === activeRow()\"\n                      [attr.aria-label]=\"L().openDetail\"\n                      (click)=\"openDetail(row)\"\n                    >\n                      <strct-icon name=\"chevronDoubleRight\" [size]=\"13\" [strokeWidth]=\"1.6\" />\n                    </button>\n                  </td>\n                }\n                @if (canExpand()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('expand')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__expandbtn\"\n                      [class.strct-dg__expandbtn--open]=\"isExpanded(row)\"\n                      [attr.aria-expanded]=\"isExpanded(row)\"\n                      [attr.aria-label]=\"L().toggleDetail\"\n                      (click)=\"toggleExpand(row)\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </button>\n                  </td>\n                }\n                @if (hasSelectionColumn()) {\n                  <td\n                    class=\"strct-dg__sel\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('sel')\"\n                  >\n                    @if (mode() === 'single') {\n                      <!-- A native radio group: one name per grid, so the\n                           arrow keys move between rows and Space picks,\n                           without the grid inventing its own keyboarding. -->\n                      <input\n                        type=\"radio\"\n                        class=\"strct-dg__radio\"\n                        [name]=\"radioName\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [attr.tabindex]=\"ctlTabindex()\"\n                        (change)=\"selectSingle(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <!-- click fires (and bubbles) before the input's change,\n                           so the modifier is recorded by the time toggleRow runs. -->\n                      <strct-checkbox\n                        [ariaLabel]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [tabIndex]=\"ctlTabindex()\"\n                        (click)=\"noteRangeIntent($event); $event.stopPropagation()\"\n                        (checkedChange)=\"toggleRow(row)\"\n                      />\n                    }\n                  </td>\n                }\n                @for (col of visibleColumns(); track col.key; let colIdx = $index) {\n                  <td\n                    [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n                    [class.strct-dg__cell--mono]=\"col.mono\"\n                    [class.strct-dg__cell--muted]=\"col.muted\"\n                    [class.strct-dg__cell--numeric]=\"col.numeric\"\n                    [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n                    [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n                    [class.strct-dg__cell--editable]=\"col.editable\"\n                    [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n                    [attr.data-edit]=\"col.editable ? '' : null\"\n                    [attr.tabindex]=\"col.editable ? editCellTabindex(row, col) : null\"\n                    [attr.aria-describedby]=\"col.editable ? editHintId : null\"\n                    (dblclick)=\"col.editable && startEdit(row, col)\"\n                    (focus)=\"col.editable && onEditCellFocus(row, col)\"\n                    (keydown)=\"col.editable && onEditCellKeydown(row, col, $event)\"\n                  >\n                    @if (childrenKey() && colIdx === 0) {\n                      <span\n                        class=\"strct-dg__treepad\"\n                        [style.width.px]=\"treeDepth(row) * 18\"\n                        aria-hidden=\"true\"\n                      ></span>\n                      @if (treeHasChildren(row)) {\n                        <button\n                          type=\"button\"\n                          class=\"strct-dg__treebtn\"\n                          [class.strct-dg__treebtn--open]=\"treeExpanded(row)\"\n                          [attr.aria-expanded]=\"treeExpanded(row)\"\n                          [attr.aria-label]=\"L().toggleChildren\"\n                          (click)=\"toggleTreeRow(row)\"\n                        >\n                          <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                        </button>\n                      } @else {\n                        <span\n                          class=\"strct-dg__treebtn strct-dg__treebtn--leaf\"\n                          aria-hidden=\"true\"\n                        ></span>\n                      }\n                    }\n                    @if (isEditingCell(row, col)) {\n                      @switch (col.editor ?? 'text') {\n                        @case ('select') {\n                          <!-- Choosing is the commit: there is nothing to\n                               confirm with Enter once an option is picked. -->\n                          <strct-select\n                            class=\"strct-dg__editselect\"\n                            [options]=\"editorOptionsFor(row, col)\"\n                            [listLabel]=\"L().editCell + ': ' + col.label\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"commitValue(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @case ('number') {\n                          <strct-number\n                            class=\"strct-dg__editnumber\"\n                            [ariaLabel]=\"L().editCell + ': ' + col.label\"\n                            [min]=\"col.editorMin ?? null\"\n                            [max]=\"col.editorMax ?? null\"\n                            [step]=\"col.editorStep ?? 1\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"editDraft.set($event)\"\n                            (keydown.enter)=\"commitDraft(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (focusout)=\"commitOnLeave(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @default {\n                          <input\n                            class=\"strct-dg__editinput\"\n                            type=\"text\"\n                            [value]=\"row[col.key] ?? ''\"\n                            [attr.aria-label]=\"L().editCell + ': ' + col.label\"\n                            (keydown.enter)=\"commitEdit(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (blur)=\"commitEdit(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      }\n                    } @else if (cellTemplate(col.key); as tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          value: row[col.key],\n                          column: col,\n                        }\"\n                      />\n                    } @else if (isBlank(row, col)) {\n                      <span class=\"strct-dg__empty\" [attr.aria-label]=\"col.emptyLabel || null\">{{\n                        col.emptyText\n                      }}</span>\n                    } @else {\n                      {{ displayValue(row, col) }}\n                      @if (col.descriptionKey && row[col.descriptionKey]) {\n                        <span class=\"strct-dg__celldesc\">{{ row[col.descriptionKey] }}</span>\n                      }\n                    }\n                    <!-- The affordance a mouse never needed: a cell that\n                         can be edited says so on hover and on focus. -->\n                    @if (col.editable && editHint() && !isEditingCell(row, col)) {\n                      <strct-icon\n                        class=\"strct-dg__editpencil\"\n                        name=\"pencil\"\n                        [size]=\"12\"\n                        [strokeWidth]=\"1.6\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                  </td>\n                }\n                @if (canActions()) {\n                  <td class=\"strct-dg__actioncell\">\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__kebab\"\n                      [attr.aria-label]=\"L().rowActions\"\n                      (click)=\"openRowMenu(row, $event)\"\n                    >\n                      <strct-icon name=\"dots\" [size]=\"16\" />\n                    </button>\n                  </td>\n                }\n                @if (widthsApplied()) {\n                  <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n                }\n              </tr>\n              @if (canExpand() && isExpanded(row)) {\n                <tr class=\"strct-dg__detailrow\">\n                  <td [attr.colspan]=\"colspan()\">\n                    <div class=\"strct-dg__detail\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"detailDef()!.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, row }\"\n                      />\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          } @empty {\n            <!-- \"Nothing here\" and \"nothing matches what you typed\" are\n                 different states: the second one can be undone, and\n                 saying so is the whole point. -->\n            <tr>\n              <td class=\"strct-dg__emptyrow\" [attr.colspan]=\"colspan()\">\n                @if (filteredAway()) {\n                  <strct-empty-state\n                    size=\"sm\"\n                    [titleLevel]=\"null\"\n                    [title]=\"L().noMatches\"\n                    [description]=\"noMatchesDescription()\"\n                  >\n                    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"clearAllFilters()\">\n                      {{ L().clearFilters }}\n                    </button>\n                  </strct-empty-state>\n                } @else {\n                  <!-- Not a heading: a grid is a region of a page, and an\n                       empty one used to put an <h3> in its outline. -->\n                  <strct-empty-state size=\"sm\" [titleLevel]=\"null\" [title]=\"emptyText()\" />\n                }\n              </td>\n            </tr>\n          }\n          @if (virtual() && bottomPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paneOpen()) {\n    <aside class=\"strct-dg__pane\">\n      <div class=\"strct-dg__pane-head\">\n        @if (narrowPane()) {\n          <!-- The pane has taken the list's place, so there is a way back. -->\n          <button\n            type=\"button\"\n            class=\"strct-dg__pane-back\"\n            [attr.aria-label]=\"L().backToList\"\n            (click)=\"closePane()\"\n          >\n            <strct-icon name=\"chevronLeft\" [size]=\"13\" />\n          </button>\n        }\n        <span class=\"strct-dg__pane-title\">\n          <ng-content select=\"[strctDetailPaneTitle]\" />\n          @if (!paneTitleDef()) {\n            {{ activeRow()![columns()[0].key] }}\n          }\n        </span>\n        <span class=\"strct-dg__pane-meta\">\n          <ng-content select=\"[strctDetailPaneMeta]\" />\n        </span>\n        <span class=\"strct-dg__pane-actions\">\n          <ng-content select=\"[strctDetailPaneActions]\" />\n        </span>\n        <button\n          type=\"button\"\n          class=\"strct-dg__pane-close\"\n          [attr.aria-label]=\"L().closeDetail\"\n          (click)=\"closePane()\"\n        >\n          <strct-icon name=\"close\" [size]=\"13\" />\n        </button>\n      </div>\n      <div class=\"strct-dg__pane-body\">\n        <ng-container\n          [ngTemplateOutlet]=\"detailDef()!.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: activeRow(), row: activeRow() }\"\n        />\n      </div>\n    </aside>\n  }\n</div>\n\n@if (showFooter()) {\n  <div class=\"strct-dg__foot\">\n    <div class=\"strct-dg__foot-left\">\n      @if (columnChooser() || sync()) {\n        <div class=\"strct-dg__actions\">\n          <strct-button-group>\n            @if (columnChooser()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [class.is-open]=\"chooserOpen()\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().chooseColumns\"\n                (click)=\"toggleChooser($event)\"\n              >\n                <strct-icon name=\"settings\" [size]=\"16\" />\n              </button>\n            }\n            @if (sync()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().refresh\"\n                (click)=\"syncChange.emit()\"\n              >\n                <strct-icon name=\"refresh\" [size]=\"16\" />\n              </button>\n            }\n          </strct-button-group>\n          @if (columnChooser() && chooserOpen()) {\n            <div class=\"strct-dg__chooser-menu\">\n              @for (col of columns(); track col.key) {\n                <!-- The whole row toggles; the checkbox's own click must not\n                     reach the row or the column would flip twice. -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                <div\n                  class=\"strct-dg__chooser-item\"\n                  (click)=\"toggleColumn(col.key, hiddenColumns().has(col.key))\"\n                >\n                  <strct-checkbox\n                    [checked]=\"!hiddenColumns().has(col.key)\"\n                    (checkedChange)=\"toggleColumn(col.key, $event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span>{{ col.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <span class=\"strct-dg__count\">\n        @if (paging() === 'more') {\n          {{ L().showing(rows().length, moreTotal() ?? undefined) }}\n        } @else {\n          {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}\n        }\n        @if (selectedCount() && mode() !== 'single') {\n          <span class=\"strct-dg__count-sep\">|</span>\n          <span class=\"strct-dg__count-sel\">{{ selectedCount() }} {{ L().selected }}</span>\n        }\n      </span>\n    </div>\n    <div class=\"strct-dg__foot-right\">\n      <!-- A feed that pages by cursor loads more at the end: page numbers\n           are something a cursor API cannot answer. It takes the pager's\n           place — the column chooser, the sync button and the count are\n           the footer's, not the pager's. -->\n      @if (paging() === 'more') {\n        @if (hasMore()) {\n          <button\n            strct-button\n            size=\"sm\"\n            class=\"strct-dg__more\"\n            [disabled]=\"loadingMore()\"\n            (click)=\"loadMore.emit()\"\n          >\n            @if (loadingMore()) {\n              <strct-spinner size=\"sm\" />\n            }\n            {{ L().loadMore }}\n          </button>\n        }\n      } @else if (pageSize() > 0 && !groupBy()) {\n        <strct-pagination\n          [total]=\"totalCount()\"\n          [pageSize]=\"pageSize()\"\n          [page]=\"page()\"\n          [regionLabel]=\"regionName(L().pagination)\"\n          (pageChange)=\"goToPage($event)\"\n        />\n      }\n    </div>\n  </div>\n}\n",
+			template: "<!-- One polite region for everything the grid does to itself: sorting,\n     paging and filtering all change the rows without saying so. -->\n<span class=\"strct-dg__announcer\" role=\"status\" aria-live=\"polite\">{{ announcement() }}</span>\n@if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {\n  <div class=\"strct-dg__toolbar\">\n    @if (quickFilterable()) {\n      <strct-searchbox\n        class=\"strct-dg__quickfilter\"\n        [class.strct-dg__quickfilter--end]=\"quickFilterAlign() === 'end'\"\n        [placeholder]=\"L().quickFilter\"\n        [ariaLabel]=\"L().quickFilter\"\n        [value]=\"quickFilter()\"\n        (valueChange)=\"quickFilter.set($event)\"\n      />\n      @if (filterNote(); as note) {\n        <span\n          class=\"strct-dg__filternote\"\n          [class.strct-dg__filternote--end]=\"quickFilterAlign() === 'end'\"\n          >{{ note }}</span\n        >\n      }\n    }\n    <span class=\"strct-dg__actioncaption\">\n      <ng-content select=\"[strctDatagridActionBarCaption]\" />\n    </span>\n    <ng-content select=\"[strctDatagridActionBar]\" />\n  </div>\n}\n\n@if (hasEditableColumn()) {\n  <!-- What the editable cells point at with aria-describedby: a keyboard\n       user is told the cell can be edited, and how. -->\n  <span class=\"strct-sr-only\" [id]=\"editHintId\">{{ L().editCellInstructions }}</span>\n}\n\n@if (bulkHint(); as hint) {\n  <!-- Selecting the page is not selecting the set. Say which one happened,\n       and offer the other. -->\n  <div class=\"strct-dg__bulk\" role=\"status\">\n    <span>{{ hint.text }}</span>\n    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"hint.run()\">\n      {{ hint.action }}\n    </button>\n  </div>\n}\n<div\n  class=\"strct-dg__layout\"\n  [class.strct-dg__layout--paned]=\"paneOpen()\"\n  [class.strct-dg__layout--panetakeover]=\"paneOpen() && narrowPane()\"\n  [style.--strct-dg-pane-list-w]=\"paneListWidth()\"\n>\n  <div\n    class=\"strct-dg__scroll\"\n    tabindex=\"0\"\n    role=\"region\"\n    [attr.aria-label]=\"regionName(L().rows)\"\n    [style.max-height.px]=\"virtual() ? viewportHeight() : maxHeight()\"\n    (scroll)=\"virtual() && onScroll($event)\"\n  >\n    <table\n      class=\"strct-dg\"\n      [attr.role]=\"childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null\"\n      [attr.aria-rowcount]=\"ariaRowCount()\"\n      [attr.aria-labelledby]=\"caption() ? captionId : null\"\n    >\n      @if (caption()) {\n        <caption class=\"strct-dg__caption\" [id]=\"captionId\">\n          {{\n            caption()\n          }}\n        </caption>\n      }\n      <thead>\n        <tr>\n          <!-- A utility column is still a column: axe reports every empty\n               header, and a screen-reader user hears nothing where the\n               detail, expand and select controls are. The name is hidden,\n               not absent. -->\n          @if (canDetail()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@detail\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('detail')\"\n              [style.width.px]=\"utilWidth('@detail')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().detailColumn }}</span>\n            </th>\n          }\n          @if (canExpand()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              data-col=\"@expand\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('expand')\"\n              [style.width.px]=\"utilWidth('@expand')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().expandColumn }}</span>\n            </th>\n          }\n          @if (hasSelectionColumn()) {\n            <th\n              class=\"strct-dg__sel\"\n              scope=\"col\"\n              data-col=\"@sel\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('sel')\"\n              [style.width.px]=\"utilWidth('@sel')\"\n            >\n              @if (mode() === 'multiple') {\n                <strct-checkbox\n                  [ariaLabel]=\"L().selectAll\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  (checkedChange)=\"toggleAll()\"\n                />\n              } @else {\n                <span class=\"strct-sr-only\">{{ L().selectColumn }}</span>\n              }\n            </th>\n          }\n          @for (col of visibleColumns(); track col.key) {\n            <th\n              scope=\"col\"\n              [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n              [style.width]=\"headerWidth(col)\"\n              [class.strct-dg__th--sortable]=\"col.sortable\"\n              [class.strct-dg__th--drop]=\"col.key === dropKey()\"\n              [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n              [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n              [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n              [attr.data-col]=\"col.key\"\n              [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n              [attr.draggable]=\"reorderable() ? true : null\"\n              (dragstart)=\"onColDragStart(col.key, $event)\"\n              (dragover)=\"onColDragOver(col.key, $event)\"\n              (drop)=\"onColDrop(col.key)\"\n              (dragend)=\"onColDragEnd()\"\n            >\n              <span class=\"strct-dg__hd\">\n                <!-- A header that sorts is a button: a th with tabindex is\n                     read as \"column header, focusable\" and never says it\n                     can be activated. aria-sort stays on the th, which is\n                     what carries the column's sorted state. -->\n                @if (col.sortable) {\n                  <!-- The button covers most of the header, so it carries\n                       the drag source too: a reorderable column has to be\n                       grabbable where the pointer actually lands. The\n                       event bubbles to the th's own handlers. -->\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__sortbtn\"\n                    [attr.draggable]=\"reorderable() ? true : null\"\n                    (click)=\"sortBy(col.key)\"\n                  >\n                    {{ col.label }}\n                    <strct-icon class=\"strct-dg__sorticon\" [name]=\"sortIcon(col.key)\" [size]=\"13\" />\n                  </button>\n                } @else {\n                  {{ col.label }}\n                }\n                @if (col.filterable || col.filterOptions) {\n                  <button\n                    #fbtn\n                    type=\"button\"\n                    class=\"strct-dg__filterbtn\"\n                    [class.strct-dg__filterbtn--active]=\"hasFilter(col.key)\"\n                    [attr.aria-expanded]=\"filterOpenKey() === col.key\"\n                    [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                    (click)=\"toggleFilterPanel(col.key, $event)\"\n                    (keydown.enter)=\"$event.stopPropagation()\"\n                    (keydown.space)=\"$event.stopPropagation()\"\n                  >\n                    <strct-icon name=\"filter\" [size]=\"12\" />\n                  </button>\n                  @if (filterOpenKey() === col.key) {\n                    <div\n                      class=\"strct-dg__filterpanel\"\n                      role=\"dialog\"\n                      [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                      [strctOverlay]=\"fbtn\"\n                      strctOverlayPlacement=\"bottom-start\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown.enter)=\"$event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                    >\n                      @if (col.filterOptions; as opts) {\n                        @for (opt of opts; track $index) {\n                          <label class=\"strct-dg__filteropt\">\n                            <input\n                              type=\"checkbox\"\n                              [checked]=\"optionChecked(col.key, opt)\"\n                              (change)=\"toggleFilterOption(col.key, opt)\"\n                            />\n                            <span>{{ opt }}</span>\n                          </label>\n                        }\n                      } @else {\n                        <input\n                          class=\"strct-dg__filterinput\"\n                          type=\"text\"\n                          [attr.placeholder]=\"L().filterPlaceholder\"\n                          [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                          [value]=\"textFilter(col.key)\"\n                          (input)=\"setTextFilter(col.key, $any($event.target).value)\"\n                        />\n                      }\n                      <button\n                        type=\"button\"\n                        class=\"strct-dg__filterclear\"\n                        [disabled]=\"!hasFilter(col.key)\"\n                        (click)=\"clearFilter(col.key)\"\n                      >\n                        {{ L().clearFilter }}\n                      </button>\n                    </div>\n                  }\n                }\n              </span>\n              @if (resizable() && col.resizable !== false) {\n                <!-- A separator, not a bare div: a column could only be\n                     resized with a mouse, which is the one input a\n                     console cannot assume. -->\n                <div\n                  class=\"strct-dg__resize\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"L().resizeColumn(col.label)\"\n                  [attr.aria-valuenow]=\"separatorValue(col.key)\"\n                  [attr.aria-valuemin]=\"40\"\n                  (mousedown)=\"onResizeStart($event, col.key)\"\n                  (keydown)=\"onResizeKey($event, col.key)\"\n                  (dblclick)=\"resetWidth(col.key)\"\n                ></div>\n              }\n            </th>\n          }\n          @if (canActions()) {\n            <th\n              class=\"strct-dg__actioncol\"\n              scope=\"col\"\n              data-col=\"@actions\"\n              [attr.aria-label]=\"L().actions\"\n              [style.width.px]=\"utilWidth('@actions')\"\n            ></th>\n          }\n          @if (widthsApplied()) {\n            <!-- The leftover lives here, so every column keeps the width it\n                 was given: with each column stated the browser scales them\n                 all to fit (200px asked, 231px drawn), and with one cell\n                 left free they are exact and the remainder lands in it. A\n                 presentational cell, so it says nothing and, once the stated\n                 widths fill the grid, takes no width either. -->\n            <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n          }\n        </tr>\n      </thead>\n      <!--\n        focusin is the real keyboard path (focus does not bubble from cells);\n        the plain focus binding exists to satisfy mouse-events-have-key-events.\n      -->\n      <tbody\n        (mouseover)=\"revealIfClipped($event)\"\n        (focusin)=\"revealIfClipped($event)\"\n        (focus)=\"revealIfClipped($event)\"\n      >\n        @if (loading()) {\n          @for (_ of [1, 2, 3, 4, 5]; track $index) {\n            <tr class=\"strct-dg__skeleton-row\">\n              @if (canDetail()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (canExpand()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (hasSelectionColumn()) {\n                <td class=\"strct-dg__sel\"></td>\n              }\n              @for (col of visibleColumns(); track col.key) {\n                <td [style.text-align]=\"col.align ?? 'start'\">\n                  <div class=\"strct-dg__skeleton-block\"></div>\n                </td>\n              }\n              @if (canActions()) {\n                <td class=\"strct-dg__actioncell\"></td>\n              }\n              @if (widthsApplied()) {\n                <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n              }\n            </tr>\n          }\n        } @else {\n          @if (virtual() && topPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td>\n            </tr>\n          }\n          @for (it of displayItems(); track itemKey(it)) {\n            @if (it.group; as grp) {\n              <!-- Group header: distinct value + count, collapsible. -->\n              <tr class=\"strct-dg__grouprow\">\n                @if (groupSelect() && mode() === 'multiple') {\n                  <td class=\"strct-dg__sel\">\n                    <strct-checkbox\n                      [ariaLabel]=\"L().selectAllInGroup(grp.label)\"\n                      [checked]=\"groupAllSelected(grp.key)\"\n                      [indeterminate]=\"groupSomeSelected(grp.key)\"\n                      (checkedChange)=\"toggleGroupSelection(grp.key)\"\n                    />\n                  </td>\n                }\n                <td\n                  [attr.colspan]=\"\n                    groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()\n                  \"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__groupbtn\"\n                    [attr.aria-expanded]=\"!grp.collapsed\"\n                    (click)=\"toggleGroup(grp.key)\"\n                  >\n                    <span\n                      class=\"strct-dg__groupchev\"\n                      [class.strct-dg__groupchev--open]=\"!grp.collapsed\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </span>\n                    @if (groupHeaderDef(); as tpl) {\n                      <!-- The consumer draws the row; the button, its\n                           aria-expanded and the keyboard stay ours. -->\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: grp,\n                          group: grp,\n                          count: grp.count,\n                        }\"\n                      />\n                    } @else {\n                      <span\n                        class=\"strct-dg__grouplabel strct-dg__grouplabel--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.label }}</span\n                      >\n                      <!-- The three spans run together in the button's\n                           name (\"Needs your decision1Blocks the join…\");\n                           the separators are read, not seen. -->\n                      <span class=\"strct-dg__announcer\">, </span>\n                      <span\n                        class=\"strct-dg__groupcount strct-dg__groupcount--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.count }}</span\n                      >\n                      <!-- Seen: the chip's number. Heard: the number with\n                           the grid's noun, because \"Inconclusive, 3\" does\n                           not say three of what. -->\n                      <span class=\"strct-dg__announcer\"> {{ countNoun(grp.count) }}</span>\n                      @if (grp.note) {\n                        <span class=\"strct-dg__announcer\">. </span>\n                        <span class=\"strct-dg__groupnote\">{{ grp.note }}</span>\n                      }\n                    }\n                  </button>\n                </td>\n              </tr>\n            } @else {\n              @let row = it.row!;\n              <tr\n                [attr.aria-rowindex]=\"ariaRowIndex(row)\"\n                [class.strct-dg__row--selected]=\"isSelected(row)\"\n                [class.strct-dg__row--locked]=\"lockedReason(row) !== null\"\n                [attr.aria-selected]=\"mode() === 'none' ? null : isSelected(row)\"\n                [attr.aria-disabled]=\"lockedReason(row) !== null ? 'true' : null\"\n                [attr.title]=\"lockedReason(row) || null\"\n                (click)=\"onRowPick(row)\"\n                [class.strct-dg__row--active]=\"paneOpen() && row === activeRow()\"\n                [attr.aria-level]=\"childrenKey() ? treeDepth(row) + 1 : null\"\n                [attr.aria-expanded]=\"\n                  childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null\n                \"\n                [attr.tabindex]=\"\n                  childrenKey()\n                    ? treeRowTabindex(row)\n                    : gridMode()\n                      ? gridRowTabindex(row)\n                      : canDetail()\n                        ? paneRowTabindex(row)\n                        : null\n                \"\n                (keydown)=\"\n                  childrenKey()\n                    ? onTreeRowKeydown(row, $event)\n                    : gridMode()\n                      ? onGridRowKeydown(row, $event)\n                      : onPaneRowKeydown(row, $event)\n                \"\n                (dblclick)=\"onRowActivate(row)\"\n              >\n                @if (canDetail()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('detail')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__detailbtn\"\n                      [class.strct-dg__detailbtn--active]=\"row === activeRow()\"\n                      [attr.aria-expanded]=\"row === activeRow()\"\n                      [attr.aria-label]=\"L().openDetail\"\n                      (click)=\"openDetail(row)\"\n                    >\n                      <strct-icon name=\"chevronDoubleRight\" [size]=\"13\" [strokeWidth]=\"1.6\" />\n                    </button>\n                  </td>\n                }\n                @if (canExpand()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('expand')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__expandbtn\"\n                      [class.strct-dg__expandbtn--open]=\"isExpanded(row)\"\n                      [attr.aria-expanded]=\"isExpanded(row)\"\n                      [attr.aria-label]=\"L().toggleDetail\"\n                      (click)=\"toggleExpand(row)\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </button>\n                  </td>\n                }\n                @if (hasSelectionColumn()) {\n                  <td\n                    class=\"strct-dg__sel\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('sel')\"\n                  >\n                    @if (mode() === 'single') {\n                      <!-- A native radio group: one name per grid, so the\n                           arrow keys move between rows and Space picks,\n                           without the grid inventing its own keyboarding. -->\n                      <input\n                        type=\"radio\"\n                        class=\"strct-dg__radio\"\n                        [name]=\"radioName\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [attr.tabindex]=\"ctlTabindex()\"\n                        (change)=\"selectSingle(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <!-- click fires (and bubbles) before the input's change,\n                           so the modifier is recorded by the time toggleRow runs. -->\n                      <strct-checkbox\n                        [ariaLabel]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [tabIndex]=\"ctlTabindex()\"\n                        (click)=\"noteRangeIntent($event); $event.stopPropagation()\"\n                        (checkedChange)=\"toggleRow(row)\"\n                      />\n                    }\n                  </td>\n                }\n                @for (col of visibleColumns(); track col.key; let colIdx = $index) {\n                  <td\n                    [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n                    [class.strct-dg__cell--mono]=\"col.mono\"\n                    [class.strct-dg__cell--muted]=\"col.muted\"\n                    [class.strct-dg__cell--numeric]=\"col.numeric\"\n                    [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n                    [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n                    [class.strct-dg__cell--editable]=\"col.editable\"\n                    [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n                    [attr.data-edit]=\"col.editable ? '' : null\"\n                    [attr.tabindex]=\"col.editable ? editCellTabindex(row, col) : null\"\n                    [attr.aria-describedby]=\"col.editable ? editHintId : null\"\n                    (dblclick)=\"col.editable && startEdit(row, col)\"\n                    (focus)=\"col.editable && onEditCellFocus(row, col)\"\n                    (keydown)=\"col.editable && onEditCellKeydown(row, col, $event)\"\n                  >\n                    @if (childrenKey() && colIdx === 0) {\n                      <span\n                        class=\"strct-dg__treepad\"\n                        [style.width.px]=\"treeDepth(row) * 18\"\n                        aria-hidden=\"true\"\n                      ></span>\n                      @if (treeHasChildren(row)) {\n                        <button\n                          type=\"button\"\n                          class=\"strct-dg__treebtn\"\n                          [class.strct-dg__treebtn--open]=\"treeExpanded(row)\"\n                          [attr.aria-expanded]=\"treeExpanded(row)\"\n                          [attr.aria-label]=\"L().toggleChildren\"\n                          (click)=\"toggleTreeRow(row)\"\n                        >\n                          <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                        </button>\n                      } @else {\n                        <span\n                          class=\"strct-dg__treebtn strct-dg__treebtn--leaf\"\n                          aria-hidden=\"true\"\n                        ></span>\n                      }\n                    }\n                    @if (isEditingCell(row, col)) {\n                      @switch (col.editor ?? 'text') {\n                        @case ('select') {\n                          <!-- Choosing is the commit: there is nothing to\n                               confirm with Enter once an option is picked. -->\n                          <strct-select\n                            class=\"strct-dg__editselect\"\n                            [options]=\"editorOptionsFor(row, col)\"\n                            [listLabel]=\"L().editCell + ': ' + col.label\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"commitValue(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @case ('number') {\n                          <strct-number\n                            class=\"strct-dg__editnumber\"\n                            [ariaLabel]=\"L().editCell + ': ' + col.label\"\n                            [min]=\"col.editorMin ?? null\"\n                            [max]=\"col.editorMax ?? null\"\n                            [step]=\"col.editorStep ?? 1\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"editDraft.set($event)\"\n                            (keydown.enter)=\"commitDraft(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (focusout)=\"commitOnLeave(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @default {\n                          <input\n                            class=\"strct-dg__editinput\"\n                            type=\"text\"\n                            [value]=\"row[col.key] ?? ''\"\n                            [attr.aria-label]=\"L().editCell + ': ' + col.label\"\n                            (keydown.enter)=\"commitEdit(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (blur)=\"commitEdit(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      }\n                    } @else if (cellTemplate(col.key); as tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          value: row[col.key],\n                          column: col,\n                        }\"\n                      />\n                    } @else if (isBlank(row, col)) {\n                      <span class=\"strct-dg__empty\" [attr.aria-label]=\"col.emptyLabel || null\">{{\n                        col.emptyText\n                      }}</span>\n                    } @else {\n                      {{ displayValue(row, col) }}\n                      @if (col.descriptionKey && row[col.descriptionKey]) {\n                        <span class=\"strct-dg__celldesc\">{{ row[col.descriptionKey] }}</span>\n                      }\n                    }\n                    <!-- The affordance a mouse never needed: a cell that\n                         can be edited says so on hover and on focus. -->\n                    @if (col.editable && editHint() && !isEditingCell(row, col)) {\n                      <strct-icon\n                        class=\"strct-dg__editpencil\"\n                        name=\"pencil\"\n                        [size]=\"12\"\n                        [strokeWidth]=\"1.6\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                  </td>\n                }\n                @if (canActions()) {\n                  <td class=\"strct-dg__actioncell\">\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__kebab\"\n                      [attr.aria-label]=\"L().rowActions\"\n                      (click)=\"openRowMenu(row, $event)\"\n                    >\n                      <strct-icon name=\"dots\" [size]=\"16\" />\n                    </button>\n                  </td>\n                }\n                @if (widthsApplied()) {\n                  <td class=\"strct-dg__filler\" aria-hidden=\"true\"></td>\n                }\n              </tr>\n              @if (canExpand() && isExpanded(row)) {\n                <tr class=\"strct-dg__detailrow\">\n                  <td [attr.colspan]=\"colspan()\">\n                    <div class=\"strct-dg__detail\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"detailDef()!.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, row }\"\n                      />\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          } @empty {\n            <!-- \"Nothing here\" and \"nothing matches what you typed\" are\n                 different states: the second one can be undone, and\n                 saying so is the whole point. -->\n            <tr>\n              <td class=\"strct-dg__emptyrow\" [attr.colspan]=\"colspan()\">\n                @if (filteredAway()) {\n                  <strct-empty-state\n                    size=\"sm\"\n                    [titleLevel]=\"null\"\n                    [title]=\"L().noMatches\"\n                    [description]=\"noMatchesDescription()\"\n                  >\n                    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"clearAllFilters()\">\n                      {{ L().clearFilters }}\n                    </button>\n                  </strct-empty-state>\n                } @else {\n                  <!-- Not a heading: a grid is a region of a page, and an\n                       empty one used to put an <h3> in its outline. -->\n                  <strct-empty-state size=\"sm\" [titleLevel]=\"null\" [title]=\"emptyText()\" />\n                }\n              </td>\n            </tr>\n          }\n          @if (virtual() && bottomPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paneOpen()) {\n    <aside class=\"strct-dg__pane\">\n      <div class=\"strct-dg__pane-head\">\n        @if (narrowPane()) {\n          <!-- The pane has taken the list's place, so there is a way back. -->\n          <button\n            type=\"button\"\n            class=\"strct-dg__pane-back\"\n            [attr.aria-label]=\"L().backToList\"\n            (click)=\"closePane()\"\n          >\n            <strct-icon name=\"chevronLeft\" [size]=\"13\" />\n          </button>\n        }\n        <span class=\"strct-dg__pane-title\">\n          <ng-content select=\"[strctDetailPaneTitle]\" />\n          @if (!paneTitleDef()) {\n            {{ activeRow()![columns()[0].key] }}\n          }\n        </span>\n        <span class=\"strct-dg__pane-meta\">\n          <ng-content select=\"[strctDetailPaneMeta]\" />\n        </span>\n        <span class=\"strct-dg__pane-actions\">\n          <ng-content select=\"[strctDetailPaneActions]\" />\n        </span>\n        <button\n          type=\"button\"\n          class=\"strct-dg__pane-close\"\n          [attr.aria-label]=\"L().closeDetail\"\n          (click)=\"closePane()\"\n        >\n          <strct-icon name=\"close\" [size]=\"13\" />\n        </button>\n      </div>\n      <div class=\"strct-dg__pane-body\">\n        <ng-container\n          [ngTemplateOutlet]=\"detailDef()!.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: activeRow(), row: activeRow() }\"\n        />\n      </div>\n    </aside>\n  }\n</div>\n\n@if (showFooter()) {\n  <div class=\"strct-dg__foot\">\n    <div class=\"strct-dg__foot-left\">\n      @if (columnChooser() || sync()) {\n        <div class=\"strct-dg__actions\">\n          <strct-button-group>\n            @if (columnChooser()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [class.is-open]=\"chooserOpen()\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().chooseColumns\"\n                (click)=\"toggleChooser($event)\"\n              >\n                <strct-icon name=\"settings\" />\n              </button>\n            }\n            @if (sync()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().refresh\"\n                (click)=\"syncChange.emit()\"\n              >\n                <strct-icon name=\"refresh\" />\n              </button>\n            }\n          </strct-button-group>\n          @if (columnChooser() && chooserOpen()) {\n            <div class=\"strct-dg__chooser-menu\">\n              @for (col of columns(); track col.key) {\n                <!-- The whole row toggles; the checkbox's own click must not\n                     reach the row or the column would flip twice. -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                <div\n                  class=\"strct-dg__chooser-item\"\n                  (click)=\"toggleColumn(col.key, hiddenColumns().has(col.key))\"\n                >\n                  <strct-checkbox\n                    [checked]=\"!hiddenColumns().has(col.key)\"\n                    (checkedChange)=\"toggleColumn(col.key, $event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span>{{ col.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <span class=\"strct-dg__count\">\n        @if (paging() === 'more') {\n          {{ L().showing(rows().length, moreTotal() ?? undefined) }}\n        } @else {\n          {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}\n        }\n        @if (selectedCount() && mode() !== 'single') {\n          <span class=\"strct-dg__count-sep\">|</span>\n          <span class=\"strct-dg__count-sel\">{{ selectedCount() }} {{ L().selected }}</span>\n        }\n      </span>\n    </div>\n    <div class=\"strct-dg__foot-right\">\n      <!-- A feed that pages by cursor loads more at the end: page numbers\n           are something a cursor API cannot answer. It takes the pager's\n           place — the column chooser, the sync button and the count are\n           the footer's, not the pager's. -->\n      @if (paging() === 'more') {\n        @if (hasMore()) {\n          <button\n            strct-button\n            size=\"sm\"\n            class=\"strct-dg__more\"\n            [disabled]=\"loadingMore()\"\n            (click)=\"loadMore.emit()\"\n          >\n            @if (loadingMore()) {\n              <strct-spinner size=\"sm\" />\n            }\n            {{ L().loadMore }}\n          </button>\n        }\n      } @else if (pageSize() > 0 && !groupBy()) {\n        <strct-pagination\n          [total]=\"totalCount()\"\n          [pageSize]=\"pageSize()\"\n          [page]=\"page()\"\n          [regionLabel]=\"regionName(L().pagination)\"\n          (pageChange)=\"goToPage($event)\"\n        />\n      }\n    </div>\n  </div>\n}\n",
 			styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t2)}.strct-dg__bulk{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:7px 12px;border-bottom:1px solid var(--b2);background:var(--acc-s);color:var(--t2);font-size:var(--text-md)}.strct-dg__announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t2)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t2)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t2);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:var(--text-sm);font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__grouplabel--critical{color:var(--critical)}.strct-dg__grouplabel--warning{color:var(--warning)}.strct-dg__grouplabel--success{color:var(--success)}.strct-dg__grouplabel--accent{color:var(--acc)}.strct-dg__grouplabel--neutral,.strct-dg__grouplabel--none{color:var(--t1)}.strct-dg__groupnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg__groupcount--critical{background:var(--critical-bg);color:var(--critical)}.strct-dg__groupcount--warning{background:var(--warning-bg);color:var(--warning)}.strct-dg__groupcount--success{background:var(--success-bg);color:var(--success)}.strct-dg__groupcount--neutral,.strct-dg__groupcount--none{background:var(--bg-3);color:var(--t2)}.strct-dg-host--singleline .strct-dg{border-collapse:separate;border-spacing:0}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:4px;border-start-end-radius:4px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:4px;border-end-end-radius:4px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td .strct-btn--link{display:inline-block;max-width:100%;overflow:hidden;white-space:inherit;text-overflow:ellipsis;vertical-align:bottom}.strct-dg-host--fixedcols .strct-dg{table-layout:fixed}.strct-dg-host--fixedcols.strct-dg-host--sticky .strct-dg{width:100%;min-width:0}.strct-dg-host--fixedcols .strct-dg th,.strct-dg-host--fixedcols .strct-dg td{box-sizing:border-box}.strct-dg__filler{padding:0}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__sortbtn{display:inline-flex;align-items:center;gap:inherit;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}.strct-dg__sortbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel .strct-cb,.strct-dg__sel .strct-dg__radio,.strct-dg__expandbtn{position:relative}.strct-dg__sel .strct-cb:after,.strct-dg__sel .strct-dg__radio:after,.strct-dg__expandbtn:after{content:\"\";position:absolute;inset:-11px -13px;min-width:24px;min-height:24px}.strct-dg-host--compact .strct-dg__sel .strct-cb:after,.strct-dg-host--compact .strct-dg__sel .strct-dg__radio:after,.strct-dg-host--compact .strct-dg__expandbtn:after{inset:-7px -11px}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned>.strct-dg__scroll{flex:0 0 auto;width:var(--strct-dg-pane-list-w, 260px);min-width:var(--strct-dg-pane-list-w, 260px);max-width:var(--strct-dg-pane-list-w, 260px)}.strct-dg__layout--paned>.strct-dg__scroll>.strct-dg{width:100%;min-width:0;max-width:none;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__layout--panetakeover>.strct-dg__scroll{display:none}.strct-dg__layout--panetakeover>.strct-dg__pane{flex:1;min-width:0}.strct-dg__pane-meta,.strct-dg__pane-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-dg__pane-meta:empty,.strct-dg__pane-actions:empty{display:none}.strct-dg__pane-actions{margin-inline-start:auto}.strct-dg__pane-back{display:inline-flex;align-items:center;border:0;background:none;color:var(--t2);cursor:pointer;padding:2px;border-radius:var(--radius-sm)}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t2);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:var(--text-sm);cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"]
 		}]
 	}],
@@ -34054,9 +34129,9 @@ var StrctTimeRangePicker = class StrctTimeRangePicker {
         strctDropdownTrigger
         class="strct-tr__trigger"
       >
-        <strct-icon name="clock" [size]="13" />
+        <strct-icon name="clock" />
         <span class="strct-tr__label">{{ triggerLabel() }}</span>
-        <strct-icon name="chevronDown" [size]="12" />
+        <strct-icon name="chevronDown" />
       </button>
 
       <div class="strct-tr__panel">
@@ -34196,9 +34271,9 @@ i0.ɵɵngDeclareClassMetadata({
         strctDropdownTrigger
         class="strct-tr__trigger"
       >
-        <strct-icon name="clock" [size]="13" />
+        <strct-icon name="clock" />
         <span class="strct-tr__label">{{ triggerLabel() }}</span>
-        <strct-icon name="chevronDown" [size]="12" />
+        <strct-icon name="chevronDown" />
       </button>
 
       <div class="strct-tr__panel">
@@ -34604,7 +34679,7 @@ var StrctLogViewer = class StrctLogViewer {
         [attr.aria-pressed]="follow()"
         (click)="toggleFollow()"
       >
-        <strct-icon name="chevronDoubleDown" [size]="12" />
+        <strct-icon name="chevronDoubleDown" />
         {{ followLabel() }}
       </button>
     </div>
@@ -34713,7 +34788,7 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.aria-pressed]="follow()"
         (click)="toggleFollow()"
       >
-        <strct-icon name="chevronDoubleDown" [size]="12" />
+        <strct-icon name="chevronDoubleDown" />
         {{ followLabel() }}
       </button>
     </div>
@@ -36447,7 +36522,7 @@ var StrctTransfer = class StrctTransfer {
         [attr.aria-label]="assignLabel()"
         (click)="assign()"
       >
-        <strct-icon name="chevronRight" [size]="14" />
+        <strct-icon name="chevronRight" />
       </button>
       <button
         strct-button
@@ -36457,7 +36532,7 @@ var StrctTransfer = class StrctTransfer {
         [attr.aria-label]="unassignLabel()"
         (click)="unassign()"
       >
-        <strct-icon name="chevronLeft" [size]="14" />
+        <strct-icon name="chevronLeft" />
       </button>
     </div>
 
@@ -36628,7 +36703,7 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.aria-label]="assignLabel()"
         (click)="assign()"
       >
-        <strct-icon name="chevronRight" [size]="14" />
+        <strct-icon name="chevronRight" />
       </button>
       <button
         strct-button
@@ -36638,7 +36713,7 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.aria-label]="unassignLabel()"
         (click)="unassign()"
       >
-        <strct-icon name="chevronLeft" [size]="14" />
+        <strct-icon name="chevronLeft" />
       </button>
     </div>
 
@@ -43343,6 +43418,10 @@ var StrctTreeSelect = class StrctTreeSelect {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	nodes = input([], ...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
 	placeholder = input("Select…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
@@ -43536,7 +43615,10 @@ var StrctTreeSelect = class StrctTreeSelect {
 				"document:click": "onDocClick($event)",
 				"document:keydown.escape": "onEscape($event)"
 			},
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-tsel"
 		},
 		providers: [{
@@ -43734,7 +43816,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-tsel",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-tsel{position:relative;display:block;width:100%}.strct-tsel__field{position:relative}.strct-tsel__trigger{display:flex;align-items:center;gap:8px;padding-inline-end:30px;text-align:start;cursor:pointer}.strct-tsel__trigger--clearable{padding-inline-end:48px}.strct-tsel__trigger:disabled{cursor:not-allowed}.strct-tsel__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tsel__value--empty{color:var(--t3)}.strct-tsel__caret{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-tsel__clear{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer}.strct-tsel__clear:hover{color:var(--t1)}.strct-tsel__panel{z-index:var(--z-dropdown);max-height:260px;overflow-y:auto;padding:var(--space-1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shh)}.strct-tsel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"]
 		}]
@@ -43812,6 +43895,10 @@ var StrctDatetimePicker = class StrctDatetimePicker {
 		const s = this.size();
 		return s ? strctControlHeight(s) : null;
 	}, ...ngDevMode ? [{ debugName: "controlHeight" }] : /* istanbul ignore next */ []);
+	controlIconSize = computed(() => {
+		const s = this.size();
+		return s ? strctIconSize(s) : null;
+	}, ...ngDevMode ? [{ debugName: "controlIconSize" }] : /* istanbul ignore next */ []);
 	placeholder = input("Select a date", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	minuteStep = input(1, ...ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []);
 	monthNames = input(STRCT_DP_MONTHS, ...ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []);
@@ -43980,7 +44067,10 @@ var StrctDatetimePicker = class StrctDatetimePicker {
 			}
 		},
 		host: {
-			properties: { "style.--control-h": "controlHeight()" },
+			properties: {
+				"style.--control-h": "controlHeight()",
+				"style.--icon-size": "controlIconSize()"
+			},
 			classAttribute: "strct-dtp"
 		},
 		providers: [{
@@ -44142,7 +44232,8 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			host: {
 				class: "strct-dtp",
-				"[style.--control-h]": "controlHeight()"
+				"[style.--control-h]": "controlHeight()",
+				"[style.--icon-size]": "controlIconSize()"
 			},
 			styles: [".strct-dtp{display:block;width:100%}.strct-dtp__field.strct-control{display:flex;align-items:center;gap:4px;padding:2px 6px 2px 2px}.strct-dtp__field:focus-within{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-dtp__field--disabled{opacity:var(--disabled-opacity);background:var(--bg-3)}.strct-dtp__date{flex:1;min-width:0}.strct-dtp .strct-dp__input,.strct-dtp .strct-dp__input:focus,.strct-dtp .strct-dp__input:focus-visible{padding-block:6px;border-color:transparent;background:transparent;box-shadow:none}.strct-dtp .strct-dp__input:disabled{opacity:1;background:transparent}.strct-dtp__time{flex:none;padding:4px 6px;font-family:var(--font);font-size:13px;color:var(--t1);background:transparent;border:1px solid var(--b2);border-radius:var(--radius-sm);cursor:pointer}.strct-dtp__time:hover{border-color:var(--b3)}.strct-dtp__time:focus-visible{outline:none;border-color:var(--acc50)}.strct-dtp__time:disabled{cursor:not-allowed}.strct-dtp__colon{flex:none;color:var(--t3)}\n"]
 		}]
@@ -47736,6 +47827,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { DG_LABELS, FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAccordionPanelMeta, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenuTrigger, StrctControlDescription, StrctControlSizeDirective, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProductSwitcher, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, defaultStateWords, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, placeTooltip, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctControlHeight, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctShowTooltip, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { DG_LABELS, FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAccordionPanelMeta, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenuTrigger, StrctControlDescription, StrctControlSizeDirective, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProductSwitcher, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, defaultStateWords, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, placeTooltip, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctControlHeight, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctIconSize, strctParseMarkdown, strctQrMatrix, strctShowTooltip, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 
 //# sourceMappingURL=akcelik-strct.mjs.map