npm - @akcelik/strct - Versions diffs - 0.29.0 → 0.31.1 - Mend

@akcelik/strct 0.29.0 → 0.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/akcelik-strct.mjs +572 -80
package/fesm2022/akcelik-strct.mjs.map +1 -1
package/package.json +3 -2
package/types/akcelik-strct.d.ts +124 -3

package/fesm2022/akcelik-strct.mjs CHANGED Viewed

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, TemplateRef, untracked, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 /** All palettes the token system ships with, in display order. */
@@ -641,7 +642,7 @@ class StrctIcon {
           </svg>
         }
       </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__badge{position:absolute;right:-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));right:-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\"}.strct-icon__badge--maintenance{background:var(--warning);right:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }`, 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__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\"}.strct-icon__badge--maintenance{background:var(--warning);inset-inline-end:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctIcon, decorators: [{
             type: Component,
@@ -685,7 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           </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__badge{position:absolute;right:-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));right:-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\"}.strct-icon__badge--maintenance{background:var(--warning);right:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"] }]
+    }`, 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__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\"}.strct-icon__badge--maintenance{background:var(--warning);inset-inline-end:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 /** Palette dots + light/dark pill, wired to {@link StrctThemeService}. */
@@ -965,7 +966,7 @@ class StrctVerticalNav {
       ></div>
     }
     <ng-content />
-  `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;left:0;bottom:0;z-index:300;transform:translate(-100%);transition:transform .2s ease}.strct-vnav--open{transform:translate(0)}.strct-vnav__backdrop{position:fixed;inset:0;z-index:299;background:#00000080;animation:strct-vnav-backdrop-in .2s ease}}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:300;transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}.strct-vnav__backdrop{position:fixed;inset:0;z-index:299;background:#00000080;animation:strct-vnav-backdrop-in .2s ease}}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctVerticalNav, decorators: [{
             type: Component,
@@ -985,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: {
                         class: 'strct-vnav',
                         '[class.strct-vnav--open]': 'shell.mobileNavOpen()',
-                    }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;left:0;bottom:0;z-index:300;transform:translate(-100%);transition:transform .2s ease}.strct-vnav--open{transform:translate(0)}.strct-vnav__backdrop{position:fixed;inset:0;z-index:299;background:#00000080;animation:strct-vnav-backdrop-in .2s ease}}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}}\n"] }]
+                    }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:300;transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}.strct-vnav__backdrop{position:fixed;inset:0;z-index:299;background:#00000080;animation:strct-vnav-backdrop-in .2s ease}}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}}\n"] }]
         }] });
 /** Horizontal strip of icon tabs (e.g. section switcher at the top of a sidebar). */
 class StrctNav {
@@ -1039,16 +1040,90 @@ class StrctRail {
     ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Emitted when an item is chosen. */
     select = output();
-    pick(item) {
+    topItems = computed(() => this.items().filter((i) => i.placement !== 'bottom'), ...(ngDevMode ? [{ debugName: "topItems" }] : /* istanbul ignore next */ []));
+    bottomItems = computed(() => this.items().filter((i) => i.placement === 'bottom'), ...(ngDevMode ? [{ debugName: "bottomItems" }] : /* istanbul ignore next */ []));
+    /** Enabled item with a router destination → renders as `<a routerLink>`. */
+    isRouted(item) {
+        return item.routerLink != null && !item.disabled;
+    }
+    /**
+     * Active state of a router-link item: an explicit `activeId` is authoritative;
+     * without one, the router's own active state drives it.
+     */
+    isActive(item, routerActive) {
+        const id = this.activeId();
+        return id !== null ? item.id === id : routerActive;
+    }
+    pick(item, event) {
         if (item.disabled)
             return;
+        // A modified / non-primary click on a link is the browser's (new tab etc.) —
+        // never ours: no activeId change, no (select).
+        if (event &&
+            (item.routerLink != null || item.href) &&
+            (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+            return;
+        }
         this.activeId.set(item.id);
         this.select.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctRail, isStandalone: true, selector: "strct-rail", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange", collapsed: "collapsedChange", select: "select" }, host: { properties: { "class.strct-rail--collapsed": "collapsed()" }, classAttribute: "strct-rail" }, ngImport: i0, template: `
-    <nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
-      @for (item of items(); track item.id) {
+    <!-- Shared row content: icon, label, trailing indicator, badge / dot. -->
+    <ng-template #rowContent let-item>
+      <strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
+      @if (!collapsed()) {
+        <span class="strct-rail__label">{{ item.label }}</span>
+        @if (item.trailingIcon) {
+          <strct-icon
+            class="strct-rail__trailing"
+            [name]="item.trailingIcon"
+            [size]="14"
+            [strokeWidth]="1.5"
+          />
+        }
+      }
+      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+        <span
+          class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
+          [class.strct-rail__badge--dot]="collapsed()"
+        >
+          @if (!collapsed()) {
+            {{ item.badge }}
+          }
+        </span>
+      } @else if (item.dot) {
+        <span class="strct-rail__dot strct-rail__dot--{{ item.dotStatus ?? 'accent' }}"></span>
+      }
+    </ng-template>
+    <!-- One rail row: a router link, a plain link, or a button (today's default). -->
+    <ng-template #row let-item>
+      @if (isRouted(item)) {
+        <a
+          class="strct-rail__item"
+          [routerLink]="item.routerLink"
+          routerLinkActive
+          #rla="routerLinkActive"
+          [class.strct-rail__item--active]="isActive(item, rla.isActive)"
+          [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
+          [attr.title]="collapsed() ? item.label : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else if (item.href && !item.disabled) {
+        <a
+          class="strct-rail__item"
+          [href]="item.href"
+          [class.strct-rail__item--active]="item.id === activeId()"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          [attr.title]="collapsed() ? item.label : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else {
         <button
           type="button"
           class="strct-rail__item"
@@ -1056,24 +1131,26 @@ class StrctRail {
           [disabled]="item.disabled"
           [attr.aria-current]="item.id === activeId() ? 'page' : null"
           [attr.title]="collapsed() ? item.label : null"
-          (click)="pick(item)"
+          (click)="pick(item, $event)"
         >
-          <strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
-          @if (!collapsed()) {
-            <span class="strct-rail__label">{{ item.label }}</span>
-          }
-          @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
-            <span
-              class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
-              [class.strct-rail__badge--dot]="collapsed()"
-            >
-              @if (!collapsed()) {
-                {{ item.badge }}
-              }
-            </span>
-          }
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
         </button>
       }
+    </ng-template>
+    <nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
+      <div class="strct-rail__group strct-rail__group--top">
+        @for (item of topItems(); track item.id) {
+          <ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
+        }
+      </div>
+      @if (bottomItems().length) {
+        <div class="strct-rail__group strct-rail__group--bottom">
+          @for (item of bottomItems(); track item.id) {
+            <ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
+          }
+        </div>
+      }
     </nav>
     @if (collapsible()) {
@@ -1090,13 +1167,66 @@ class StrctRail {
         }
       </button>
     }
-  `, isInline: true, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:8px;overflow-y:auto}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:start;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;right:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px}.strct-rail__group{display:flex;flex-direction:column;gap:2px}.strct-rail__group--top{flex:1;min-height:0;overflow-y:auto}.strct-rail__group--bottom{margin-top:8px;padding-top:8px;border-top:1px solid var(--b1)}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:start;text-decoration:none;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;inset-inline-end:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__trailing{flex-shrink:0;color:var(--t3)}.strct-rail__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-rail--collapsed .strct-rail__dot{position:absolute;top:5px;inset-inline-end:7px}.strct-rail__dot--accent{background:var(--acc)}.strct-rail__dot--success{background:var(--success)}.strct-rail__dot--warning{background:var(--warning)}.strct-rail__dot--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-rail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
-      @for (item of items(); track item.id) {
+            args: [{ selector: 'strct-rail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, StrctIcon], template: `
+    <!-- Shared row content: icon, label, trailing indicator, badge / dot. -->
+    <ng-template #rowContent let-item>
+      <strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
+      @if (!collapsed()) {
+        <span class="strct-rail__label">{{ item.label }}</span>
+        @if (item.trailingIcon) {
+          <strct-icon
+            class="strct-rail__trailing"
+            [name]="item.trailingIcon"
+            [size]="14"
+            [strokeWidth]="1.5"
+          />
+        }
+      }
+      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+        <span
+          class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
+          [class.strct-rail__badge--dot]="collapsed()"
+        >
+          @if (!collapsed()) {
+            {{ item.badge }}
+          }
+        </span>
+      } @else if (item.dot) {
+        <span class="strct-rail__dot strct-rail__dot--{{ item.dotStatus ?? 'accent' }}"></span>
+      }
+    </ng-template>
+    <!-- One rail row: a router link, a plain link, or a button (today's default). -->
+    <ng-template #row let-item>
+      @if (isRouted(item)) {
+        <a
+          class="strct-rail__item"
+          [routerLink]="item.routerLink"
+          routerLinkActive
+          #rla="routerLinkActive"
+          [class.strct-rail__item--active]="isActive(item, rla.isActive)"
+          [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
+          [attr.title]="collapsed() ? item.label : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else if (item.href && !item.disabled) {
+        <a
+          class="strct-rail__item"
+          [href]="item.href"
+          [class.strct-rail__item--active]="item.id === activeId()"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          [attr.title]="collapsed() ? item.label : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else {
         <button
           type="button"
           class="strct-rail__item"
@@ -1104,24 +1234,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           [disabled]="item.disabled"
           [attr.aria-current]="item.id === activeId() ? 'page' : null"
           [attr.title]="collapsed() ? item.label : null"
-          (click)="pick(item)"
+          (click)="pick(item, $event)"
         >
-          <strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
-          @if (!collapsed()) {
-            <span class="strct-rail__label">{{ item.label }}</span>
-          }
-          @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
-            <span
-              class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
-              [class.strct-rail__badge--dot]="collapsed()"
-            >
-              @if (!collapsed()) {
-                {{ item.badge }}
-              }
-            </span>
-          }
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
         </button>
       }
+    </ng-template>
+    <nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
+      <div class="strct-rail__group strct-rail__group--top">
+        @for (item of topItems(); track item.id) {
+          <ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
+        }
+      </div>
+      @if (bottomItems().length) {
+        <div class="strct-rail__group strct-rail__group--bottom">
+          @for (item of bottomItems(); track item.id) {
+            <ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
+          }
+        </div>
+      }
     </nav>
     @if (collapsible()) {
@@ -1141,7 +1273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: {
                         class: 'strct-rail',
                         '[class.strct-rail--collapsed]': 'collapsed()',
-                    }, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:8px;overflow-y:auto}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:start;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;right:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"] }]
+                    }, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px}.strct-rail__group{display:flex;flex-direction:column;gap:2px}.strct-rail__group--top{flex:1;min-height:0;overflow-y:auto}.strct-rail__group--bottom{margin-top:8px;padding-top:8px;border-top:1px solid var(--b1)}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:start;text-decoration:none;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;inset-inline-end:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__trailing{flex-shrink:0;color:var(--t3)}.strct-rail__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-rail--collapsed .strct-rail__dot{position:absolute;top:5px;inset-inline-end:7px}.strct-rail__dot--accent{background:var(--acc)}.strct-rail__dot--success{background:var(--success)}.strct-rail__dot--warning{background:var(--warning)}.strct-rail__dot--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 /**
@@ -3074,7 +3206,7 @@ class StrctDrawer {
         }
       </aside>
     }
-  `, isInline: true, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:1100;background:#00000070;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.strct-drawer{position:fixed;z-index:1101;display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{left:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{right:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:1100;background:#00000070;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.strct-drawer{position:fixed;z-index:1101;display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{inset-inline-start:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{inset-inline-end:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}[dir=rtl] .strct-drawer--start{animation-name:strct-drawer-in-end}[dir=rtl] .strct-drawer--end{animation-name:strct-drawer-in-start}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawer, decorators: [{
             type: Component,
@@ -3114,7 +3246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }
       </aside>
     }
-  `, host: { class: 'strct-drawer-host' }, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:1100;background:#00000070;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.strct-drawer{position:fixed;z-index:1101;display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{left:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{right:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"] }]
+  `, host: { class: 'strct-drawer-host' }, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:1100;background:#00000070;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.strct-drawer{position:fixed;z-index:1101;display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{inset-inline-start:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{inset-inline-end:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}[dir=rtl] .strct-drawer--start{animation-name:strct-drawer-in-end}[dir=rtl] .strct-drawer--end{animation-name:strct-drawer-in-start}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], footerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDrawerFooter), { isSignal: true }] }] } });
 /**
@@ -3859,6 +3991,25 @@ class StrctSectionMenu {
                     />
                   }
                   <span class="strct-sm__item-label">{{ item.label }}</span>
+                  @if (item.trailingIcon) {
+                    <strct-icon
+                      class="strct-sm__trailing"
+                      [name]="item.trailingIcon"
+                      [size]="14"
+                      [strokeWidth]="1.5"
+                    />
+                  }
+                  @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+                    <span
+                      class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}"
+                    >
+                      {{ item.badge }}
+                    </span>
+                  } @else if (item.dot) {
+                    <span
+                      class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"
+                    ></span>
+                  }
                 </button>
               }
             </div>
@@ -3866,7 +4017,7 @@ class StrctSectionMenu {
         </div>
       }
     </nav>
-  `, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSectionMenu, decorators: [{
             type: Component,
@@ -3918,6 +4069,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     />
                   }
                   <span class="strct-sm__item-label">{{ item.label }}</span>
+                  @if (item.trailingIcon) {
+                    <strct-icon
+                      class="strct-sm__trailing"
+                      [name]="item.trailingIcon"
+                      [size]="14"
+                      [strokeWidth]="1.5"
+                    />
+                  }
+                  @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+                    <span
+                      class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}"
+                    >
+                      {{ item.badge }}
+                    </span>
+                  } @else if (item.dot) {
+                    <span
+                      class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"
+                    ></span>
+                  }
                 </button>
               }
             </div>
@@ -3925,7 +4095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         </div>
       }
     </nav>
-  `, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+  `, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"] }]
         }], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 /**
@@ -4592,7 +4762,7 @@ class StrctToggle {
       <span class="strct-tg__track"><span class="strct-tg__thumb"></span></span>
       <span class="strct-tg__label"><ng-content /></span>
     </label>
-  `, isInline: true, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctToggle, decorators: [{
             type: Component,
@@ -4612,7 +4782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       <span class="strct-tg__track"><span class="strct-tg__thumb"></span></span>
       <span class="strct-tg__label"><ng-content /></span>
     </label>
-  `, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}\n"] }]
+  `, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 let groupCounter = 0;
@@ -7216,6 +7386,10 @@ const DG_LABELS = {
     refresh: 'Refresh data',
     actions: 'Actions',
 };
+/** Utility-column widths used when sticky columns are active (px). */
+const UTIL_W = { detail: 36, expand: 36, sel: 40 };
+/** Fallback width for a sticky column without an explicit px width. */
+const STICKY_FALLBACK_W = 120;
 /**
  * Marks the expandable-row detail template. The row is the template's implicit
  * context: `<ng-template strctRowDetail let-row> … {{ row['name'] }} … </ng-template>`.
@@ -7302,12 +7476,42 @@ class StrctDatagrid {
     labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     /** Effective labels (defaults + overrides). */
     L = computed(() => ({ ...DG_LABELS, ...this.labels() }), ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
+    /**
+     * Virtual scrolling for large data sets: only the rows inside the viewport
+     * (plus a small overscan) are in the DOM — 20k+ rows stay smooth. The scroll
+     * area gets `viewportHeight` and a sticky header. Assumes uniform
+     * `rowHeight`; combine with `expandable` is unsupported.
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Scroll viewport height in px (virtual mode). */
+    viewportHeight = input(360, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Uniform row height in px (virtual mode; tune when `compact`). */
+    rowHeight = input(38, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Server-side mode: the grid never sorts or slices `rows` itself — it shows
+     * them as given and emits `(lazyLoad)` with `{ page, pageSize, sortKey,
+     * sortDir }` whenever the user pages or sorts (and once on init). Provide
+     * `total` so the pager and count reflect the full server-side set.
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Total row count on the server (lazy mode). */
+    total = input(null, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /**
+     * Persist the user's column widths + hidden columns under this key in
+     * localStorage (`strct-dg:<key>`), restoring them on init. For full control
+     * use the two-way `columnState` instead (both may be combined).
+     */
+    stateKey = input(null, ...(ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []));
+    /** User column preferences (two-way): widths from resize, hidden from the chooser. */
+    columnState = model(null, ...(ngDevMode ? [{ debugName: "columnState" }] : /* istanbul ignore next */ []));
     /** Emitted when the selection changes. */
     selectionChange = output();
     /** Emitted when the refresh button is clicked. */
     syncChange = output();
     /** Emitted when a row's action-menu item is chosen. */
     rowAction = output();
+    /** Server-side data request (lazy mode): load this page / sort and set `rows`. */
+    lazyLoad = output();
     menu = inject(StrctMenuService);
     detailDef = contentChild(StrctRowDetailDef, ...(ngDevMode ? [{ debugName: "detailDef" }] : /* istanbul ignore next */ []));
     actionBarDef = contentChild(StrctDatagridActionBar, ...(ngDevMode ? [{ debugName: "actionBarDef" }] : /* istanbul ignore next */ []));
@@ -7379,6 +7583,9 @@ class StrctDatagrid {
         return this.columns().filter((c) => !hidden.has(c.key));
     }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
     sorted = computed(() => {
+        // Server-side mode: rows arrive already ordered / sliced — never touch them.
+        if (this.lazy())
+            return this.rows();
         const { key, dir } = this.sort();
         const data = [...this.rows()];
         if (!key)
@@ -7388,11 +7595,87 @@ class StrctDatagrid {
     }, ...(ngDevMode ? [{ debugName: "sorted" }] : /* istanbul ignore next */ []));
     paged = computed(() => {
         const size = this.pageSize();
-        if (size <= 0)
+        if (this.lazy() || size <= 0)
             return this.sorted();
         const start = (this.page() - 1) * size;
         return this.sorted().slice(start, start + size);
     }, ...(ngDevMode ? [{ debugName: "paged" }] : /* istanbul ignore next */ []));
+    /** Full count for the pager / footer (server total in lazy mode). */
+    totalCount = computed(() => this.lazy() ? (this.total() ?? this.rows().length) : this.sorted().length, ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+    // ── Virtual scrolling ──────────────────────────────────────────
+    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    onScroll(event) {
+        this.scrollTop.set(event.target.scrollTop);
+    }
+    /** Visible index window incl. overscan (virtual mode). */
+    vRange = computed(() => {
+        const rh = Math.max(1, this.rowHeight());
+        const n = this.sorted().length;
+        const start = Math.max(0, Math.floor(this.scrollTop() / rh) - 6);
+        const count = Math.ceil(this.viewportHeight() / rh) + 12;
+        return { start, end: Math.min(n, start + count) };
+    }, ...(ngDevMode ? [{ debugName: "vRange" }] : /* istanbul ignore next */ []));
+    /** The rows actually rendered: the virtual window, or the current page. */
+    renderRows = computed(() => this.virtual() ? this.sorted().slice(this.vRange().start, this.vRange().end) : this.paged(), ...(ngDevMode ? [{ debugName: "renderRows" }] : /* istanbul ignore next */ []));
+    topPad = computed(() => this.virtual() ? this.vRange().start * this.rowHeight() : 0, ...(ngDevMode ? [{ debugName: "topPad" }] : /* istanbul ignore next */ []));
+    bottomPad = computed(() => this.virtual() ? Math.max(0, (this.sorted().length - this.vRange().end) * this.rowHeight()) : 0, ...(ngDevMode ? [{ debugName: "bottomPad" }] : /* istanbul ignore next */ []));
+    // ── Sticky (frozen) columns ────────────────────────────────────
+    stickyActive = computed(() => !this.paneOpen() && this.visibleColumns().some((c) => c.sticky), ...(ngDevMode ? [{ debugName: "stickyActive" }] : /* istanbul ignore next */ []));
+    /** Total width of the frozen utility columns (detail / expand / select). */
+    utilityWidth = computed(() => (this.canDetail() ? UTIL_W.detail : 0) +
+        (this.canExpand() ? UTIL_W.expand : 0) +
+        (this.selectable() ? UTIL_W.sel : 0), ...(ngDevMode ? [{ debugName: "utilityWidth" }] : /* istanbul ignore next */ []));
+    /** Left offset of a frozen utility column, or null when sticky is off. */
+    utilLeft(which) {
+        if (!this.stickyActive())
+            return null;
+        let x = 0;
+        if (which === 'detail')
+            return x;
+        if (this.canDetail())
+            x += UTIL_W.detail;
+        if (which === 'expand')
+            return x;
+        if (this.canExpand())
+            x += UTIL_W.expand;
+        return x;
+    }
+    /** Effective px width of a column (resize override → declared px → fallback). */
+    colPx(col) {
+        const resized = this.columnWidths().get(col.key);
+        if (resized != null)
+            return resized;
+        const m = /^(\d+(?:\.\d+)?)px$/.exec(col.width ?? '');
+        return m ? parseFloat(m[1]) : STICKY_FALLBACK_W;
+    }
+    /** key → left px for sticky data columns. */
+    stickyOffsets = computed(() => {
+        const map = new Map();
+        if (!this.stickyActive())
+            return map;
+        let x = this.utilityWidth();
+        for (const col of this.visibleColumns()) {
+            if (!col.sticky)
+                continue;
+            map.set(col.key, x);
+            x += this.colPx(col);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "stickyOffsets" }] : /* istanbul ignore next */ []));
+    stickyLeft(key) {
+        return this.stickyOffsets().get(key) ?? null;
+    }
+    isSticky(col) {
+        return !!col.sticky && this.stickyActive();
+    }
+    /** The last frozen column carries the edge shadow. */
+    lastStickyKey = computed(() => {
+        let last = null;
+        for (const col of this.visibleColumns())
+            if (col.sticky)
+                last = col.key;
+        return this.stickyActive() ? last : null;
+    }, ...(ngDevMode ? [{ debugName: "lastStickyKey" }] : /* istanbul ignore next */ []));
     allPageSelected = computed(() => {
         const rows = this.paged();
         return rows.length > 0 && rows.every((r) => this.selected().has(this.idOf(r)));
@@ -7411,13 +7694,18 @@ class StrctDatagrid {
     cellTemplate(key) {
         return this.cellMap().get(key) ?? null;
     }
+    /** Last emitted lazy request (dedupe key). */
+    lastLazyKey = '';
+    /** Last serialized column state pushed outward (loop guard). */
+    lastStateKey = '';
     constructor() {
-        // Keep the page in range when the data set shrinks.
+        // Keep the page in range when the data set shrinks (server total in lazy mode).
         effect(() => {
             const size = this.pageSize();
             if (size <= 0)
                 return;
-            const pageCount = Math.max(1, Math.ceil(this.sorted().length / size));
+            const count = this.totalCount();
+            const pageCount = Math.max(1, Math.ceil(count / size));
             if (this.page() > pageCount)
                 this.page.set(pageCount);
         });
@@ -7429,6 +7717,106 @@ class StrctDatagrid {
                 return;
             untracked(() => this.selected.set(new Set(init)));
         });
+        // Server-side mode: announce what to load whenever page / sort / pageSize
+        // change (and once on init, so the consumer fetches the first page).
+        effect(() => {
+            if (!this.lazy())
+                return;
+            const state = {
+                page: this.page(),
+                pageSize: this.pageSize(),
+                sortKey: this.sort().key,
+                sortDir: this.sort().dir,
+            };
+            const key = JSON.stringify(state);
+            untracked(() => {
+                if (key === this.lastLazyKey)
+                    return;
+                this.lastLazyKey = key;
+                this.lazyLoad.emit(state);
+            });
+        });
+        // Restore persisted column preferences once, before the first render.
+        const persisted = this.readPersistedState();
+        if (persisted)
+            this.applyColumnState(persisted);
+        // Apply externally-driven columnState.
+        effect(() => {
+            const st = this.columnState();
+            untracked(() => {
+                if (!st || JSON.stringify(st) === this.lastStateKey)
+                    return;
+                this.lastStateKey = JSON.stringify(st);
+                this.applyColumnState(st);
+            });
+        });
+        // Push user changes (resize / chooser) outward + persist under stateKey.
+        effect(() => {
+            const widths = Object.fromEntries(this.columnWidths());
+            const hidden = [...this.hiddenColumns()];
+            const st = { widths, hidden };
+            const key = JSON.stringify(st);
+            untracked(() => {
+                if (key === this.lastStateKey)
+                    return;
+                this.lastStateKey = key;
+                this.columnState.set(st);
+                const sk = this.stateKey();
+                if (sk && typeof localStorage !== 'undefined') {
+                    try {
+                        localStorage.setItem(`strct-dg:${sk}`, key);
+                    }
+                    catch {
+                        /* storage full / denied — persistence is best-effort */
+                    }
+                }
+            });
+        });
+    }
+    readPersistedState() {
+        const sk = this.stateKey();
+        if (!sk || typeof localStorage === 'undefined')
+            return null;
+        try {
+            const raw = localStorage.getItem(`strct-dg:${sk}`);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    applyColumnState(st) {
+        this.columnWidths.set(new Map(Object.entries(st.widths ?? {}).map(([k, v]) => [k, Number(v)])));
+        this.hiddenColumns.set(new Set(st.hidden ?? []));
+    }
+    /**
+     * The grid as CSV: header labels + every non-hidden column, all rows in the
+     * current order (client mode: the full sorted set, not just the page).
+     */
+    toCSV() {
+        const hidden = this.hiddenColumns();
+        const cols = this.columns().filter((c) => !hidden.has(c.key));
+        const esc = (v) => {
+            const s = v == null ? '' : String(v);
+            return /[",\n;]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+        };
+        const data = this.lazy() ? this.rows() : this.sorted();
+        return [
+            cols.map((c) => esc(c.label)).join(','),
+            ...data.map((r) => cols.map((c) => esc(r[c.key])).join(',')),
+        ].join('\n');
+    }
+    /** Download the grid as a CSV file. */
+    downloadCSV(filename = 'datagrid.csv') {
+        if (typeof document === 'undefined')
+            return;
+        const blob = new Blob(['\uFEFF' + this.toCSV()], { type: 'text/csv;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
     }
     colspan() {
         return (this.visibleColumns().length +
@@ -7556,24 +7944,43 @@ class StrctDatagrid {
         return String(a ?? '').localeCompare(String(b ?? ''), undefined, { numeric: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDatagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction" }, host: { properties: { "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnState: "columnStateChange", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad" }, host: { properties: { "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--sticky": "stickyActive()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
     @if (actionBarDef()) {
       <div class="strct-dg__toolbar"><ng-content select="[strctDatagridActionBar]" /></div>
     }
     <div class="strct-dg__layout" [class.strct-dg__layout--paned]="paneOpen()">
-      <div class="strct-dg__scroll" tabindex="0" role="region" [attr.aria-label]="L().rows">
+      <div
+        class="strct-dg__scroll"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="L().rows"
+        [style.max-height.px]="virtual() ? viewportHeight() : null"
+        (scroll)="virtual() && onScroll($event)"
+      >
         <table class="strct-dg">
           <thead>
             <tr>
               @if (canDetail()) {
-                <th class="strct-dg__expandcol"></th>
+                <th
+                  class="strct-dg__expandcol"
+                  [class.strct-dg__cell--sticky]="stickyActive()"
+                  [style.left.px]="utilLeft('detail')"
+                ></th>
               }
               @if (canExpand()) {
-                <th class="strct-dg__expandcol"></th>
+                <th
+                  class="strct-dg__expandcol"
+                  [class.strct-dg__cell--sticky]="stickyActive()"
+                  [style.left.px]="utilLeft('expand')"
+                ></th>
               }
               @if (selectable()) {
-                <th class="strct-dg__sel">
+                <th
+                  class="strct-dg__sel"
+                  [class.strct-dg__cell--sticky]="stickyActive()"
+                  [style.left.px]="utilLeft('sel')"
+                >
                   <strct-checkbox
                     [ariaLabel]="L().selectAll"
                     [checked]="allPageSelected()"
@@ -7587,6 +7994,9 @@ class StrctDatagrid {
                   [style.text-align]="col.align ?? 'start'"
                   [style.width]="colWidth(col.key) ?? col.width ?? null"
                   [class.strct-dg__th--sortable]="col.sortable"
+                  [class.strct-dg__cell--sticky]="isSticky(col)"
+                  [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
+                  [style.left.px]="stickyLeft(col.key)"
                   [attr.tabindex]="col.sortable ? 0 : null"
                   [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
                   (click)="col.sortable && sortBy(col.key)"
@@ -7640,13 +8050,22 @@ class StrctDatagrid {
                 </tr>
               }
             } @else {
-              @for (row of paged(); track rowKey(row)) {
+              @if (virtual() && topPad() > 0) {
+                <tr class="strct-dg__vspacer" aria-hidden="true">
+                  <td [attr.colspan]="colspan()" [style.height.px]="topPad()"></td>
+                </tr>
+              }
+              @for (row of renderRows(); track rowKey(row)) {
                 <tr
                   [class.strct-dg__row--selected]="isSelected(row)"
                   [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
                 >
                   @if (canDetail()) {
-                    <td class="strct-dg__expandcell">
+                    <td
+                      class="strct-dg__expandcell"
+                      [class.strct-dg__cell--sticky]="stickyActive()"
+                      [style.left.px]="utilLeft('detail')"
+                    >
                       <button
                         type="button"
                         class="strct-dg__detailbtn"
@@ -7660,7 +8079,11 @@ class StrctDatagrid {
                     </td>
                   }
                   @if (canExpand()) {
-                    <td class="strct-dg__expandcell">
+                    <td
+                      class="strct-dg__expandcell"
+                      [class.strct-dg__cell--sticky]="stickyActive()"
+                      [style.left.px]="utilLeft('expand')"
+                    >
                       <button
                         type="button"
                         class="strct-dg__expandbtn"
@@ -7674,7 +8097,11 @@ class StrctDatagrid {
                     </td>
                   }
                   @if (selectable()) {
-                    <td class="strct-dg__sel">
+                    <td
+                      class="strct-dg__sel"
+                      [class.strct-dg__cell--sticky]="stickyActive()"
+                      [style.left.px]="utilLeft('sel')"
+                    >
                       <strct-checkbox
                         [ariaLabel]="L().selectRow"
                         [checked]="isSelected(row)"
@@ -7683,7 +8110,12 @@ class StrctDatagrid {
                     </td>
                   }
                   @for (col of visibleColumns(); track col.key) {
-                    <td [style.text-align]="col.align ?? 'start'">
+                    <td
+                      [style.text-align]="col.align ?? 'start'"
+                      [class.strct-dg__cell--sticky]="isSticky(col)"
+                      [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
+                      [style.left.px]="stickyLeft(col.key)"
+                    >
                       @if (cellTemplate(col.key); as tpl) {
                         <ng-container
                           [ngTemplateOutlet]="tpl"
@@ -7728,6 +8160,11 @@ class StrctDatagrid {
                   <td class="strct-dg__empty" [attr.colspan]="colspan()">{{ emptyText() }}</td>
                 </tr>
               }
+              @if (virtual() && bottomPad() > 0) {
+                <tr class="strct-dg__vspacer" aria-hidden="true">
+                  <td [attr.colspan]="colspan()" [style.height.px]="bottomPad()"></td>
+                </tr>
+              }
             }
           </tbody>
         </table>
@@ -7756,7 +8193,7 @@ class StrctDatagrid {
       }
     </div>
-    @if (pageSize() > 0 && !loading()) {
+    @if ((pageSize() > 0 || virtual()) && !loading()) {
       <div class="strct-dg__foot">
         <div class="strct-dg__foot-left">
           @if (columnChooser() || sync()) {
@@ -7802,7 +8239,7 @@ class StrctDatagrid {
             </div>
           }
           <span class="strct-dg__count">
-            {{ sorted().length }} {{ sorted().length === 1 ? L().row : L().rows }}
+            {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
             @if (selectedCount()) {
               <span class="strct-dg__count-sep">|</span>
               <span class="strct-dg__count-sel">{{ selectedCount() }} {{ L().selected }}</span>
@@ -7810,11 +8247,13 @@ class StrctDatagrid {
           </span>
         </div>
         <div class="strct-dg__foot-right">
-          <strct-pagination [total]="sorted().length" [pageSize]="pageSize()" [(page)]="page" />
+          @if (pageSize() > 0) {
+            <strct-pagination [total]="totalCount()" [pageSize]="pageSize()" [(page)]="page" />
+          }
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.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:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.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 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__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;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}.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:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.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:5px;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{display:inline-flex;padding:3px;border:0;border-radius:4px;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:4px;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:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.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;right: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:0 8px 8px 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:4px;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;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.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);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{left:auto;right:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;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)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "isDisabled", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange", "isDisabledChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .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:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-1px;width:7px;pointer-events:none;background:linear-gradient(90deg,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:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.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 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__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:2}.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:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.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:5px;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{display:inline-flex;padding:3px;border:0;border-radius:4px;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:4px;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:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.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;right: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:0 8px 8px 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:4px;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;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.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);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;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:6px;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)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "isDisabled", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange", "isDisabledChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDatagrid, decorators: [{
             type: Component,
@@ -7831,18 +8270,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     }
     <div class="strct-dg__layout" [class.strct-dg__layout--paned]="paneOpen()">
-      <div class="strct-dg__scroll" tabindex="0" role="region" [attr.aria-label]="L().rows">
+      <div
+        class="strct-dg__scroll"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="L().rows"
+        [style.max-height.px]="virtual() ? viewportHeight() : null"
+        (scroll)="virtual() && onScroll($event)"
+      >
         <table class="strct-dg">
           <thead>
             <tr>
               @if (canDetail()) {
-                <th class="strct-dg__expandcol"></th>
+                <th
+                  class="strct-dg__expandcol"
+                  [class.strct-dg__cell--sticky]="stickyActive()"
+                  [style.left.px]="utilLeft('detail')"
+                ></th>
               }
               @if (canExpand()) {
-                <th class="strct-dg__expandcol"></th>
+                <th
+                  class="strct-dg__expandcol"
+                  [class.strct-dg__cell--sticky]="stickyActive()"
+                  [style.left.px]="utilLeft('expand')"
+                ></th>
               }
               @if (selectable()) {
-                <th class="strct-dg__sel">
+                <th
+                  class="strct-dg__sel"
+                  [class.strct-dg__cell--sticky]="stickyActive()"
+                  [style.left.px]="utilLeft('sel')"
+                >
                   <strct-checkbox
                     [ariaLabel]="L().selectAll"
                     [checked]="allPageSelected()"
@@ -7856,6 +8314,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                   [style.text-align]="col.align ?? 'start'"
                   [style.width]="colWidth(col.key) ?? col.width ?? null"
                   [class.strct-dg__th--sortable]="col.sortable"
+                  [class.strct-dg__cell--sticky]="isSticky(col)"
+                  [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
+                  [style.left.px]="stickyLeft(col.key)"
                   [attr.tabindex]="col.sortable ? 0 : null"
                   [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
                   (click)="col.sortable && sortBy(col.key)"
@@ -7909,13 +8370,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 </tr>
               }
             } @else {
-              @for (row of paged(); track rowKey(row)) {
+              @if (virtual() && topPad() > 0) {
+                <tr class="strct-dg__vspacer" aria-hidden="true">
+                  <td [attr.colspan]="colspan()" [style.height.px]="topPad()"></td>
+                </tr>
+              }
+              @for (row of renderRows(); track rowKey(row)) {
                 <tr
                   [class.strct-dg__row--selected]="isSelected(row)"
                   [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
                 >
                   @if (canDetail()) {
-                    <td class="strct-dg__expandcell">
+                    <td
+                      class="strct-dg__expandcell"
+                      [class.strct-dg__cell--sticky]="stickyActive()"
+                      [style.left.px]="utilLeft('detail')"
+                    >
                       <button
                         type="button"
                         class="strct-dg__detailbtn"
@@ -7929,7 +8399,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     </td>
                   }
                   @if (canExpand()) {
-                    <td class="strct-dg__expandcell">
+                    <td
+                      class="strct-dg__expandcell"
+                      [class.strct-dg__cell--sticky]="stickyActive()"
+                      [style.left.px]="utilLeft('expand')"
+                    >
                       <button
                         type="button"
                         class="strct-dg__expandbtn"
@@ -7943,7 +8417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     </td>
                   }
                   @if (selectable()) {
-                    <td class="strct-dg__sel">
+                    <td
+                      class="strct-dg__sel"
+                      [class.strct-dg__cell--sticky]="stickyActive()"
+                      [style.left.px]="utilLeft('sel')"
+                    >
                       <strct-checkbox
                         [ariaLabel]="L().selectRow"
                         [checked]="isSelected(row)"
@@ -7952,7 +8430,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     </td>
                   }
                   @for (col of visibleColumns(); track col.key) {
-                    <td [style.text-align]="col.align ?? 'start'">
+                    <td
+                      [style.text-align]="col.align ?? 'start'"
+                      [class.strct-dg__cell--sticky]="isSticky(col)"
+                      [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
+                      [style.left.px]="stickyLeft(col.key)"
+                    >
                       @if (cellTemplate(col.key); as tpl) {
                         <ng-container
                           [ngTemplateOutlet]="tpl"
@@ -7997,6 +8480,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                   <td class="strct-dg__empty" [attr.colspan]="colspan()">{{ emptyText() }}</td>
                 </tr>
               }
+              @if (virtual() && bottomPad() > 0) {
+                <tr class="strct-dg__vspacer" aria-hidden="true">
+                  <td [attr.colspan]="colspan()" [style.height.px]="bottomPad()"></td>
+                </tr>
+              }
             }
           </tbody>
         </table>
@@ -8025,7 +8513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       }
     </div>
-    @if (pageSize() > 0 && !loading()) {
+    @if ((pageSize() > 0 || virtual()) && !loading()) {
       <div class="strct-dg__foot">
         <div class="strct-dg__foot-left">
           @if (columnChooser() || sync()) {
@@ -8071,7 +8559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             </div>
           }
           <span class="strct-dg__count">
-            {{ sorted().length }} {{ sorted().length === 1 ? L().row : L().rows }}
+            {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
             @if (selectedCount()) {
               <span class="strct-dg__count-sep">|</span>
               <span class="strct-dg__count-sel">{{ selectedCount() }} {{ L().selected }}</span>
@@ -8079,7 +8567,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           </span>
         </div>
         <div class="strct-dg__foot-right">
-          <strct-pagination [total]="sorted().length" [pageSize]="pageSize()" [(page)]="page" />
+          @if (pageSize() > 0) {
+            <strct-pagination [total]="totalCount()" [pageSize]="pageSize()" [(page)]="page" />
+          }
         </div>
       </div>
     }
@@ -8087,8 +8577,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'strct-dg-host',
                         '[class.strct-dg-host--compact]': 'compact()',
                         '[class.strct-dg-host--singleline]': 'singleLine()',
-                    }, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.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:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.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 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__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;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}.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:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.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:5px;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{display:inline-flex;padding:3px;border:0;border-radius:4px;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:4px;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:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.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;right: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:0 8px 8px 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:4px;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;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.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);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{left:auto;right:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;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)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
+                        '[class.strct-dg-host--virtual]': 'virtual()',
+                        '[class.strct-dg-host--sticky]': 'stickyActive()',
+                    }, styles: [".strct-dg-host{display:block;border:1px solid var(--b2);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:5}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .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:3}.strct-dg thead th.strct-dg__cell--sticky{z-index:6}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-1px;width:7px;pointer-events:none;background:linear-gradient(90deg,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:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.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 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__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:2}.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:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.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:5px;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{display:inline-flex;padding:3px;border:0;border-radius:4px;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:4px;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:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.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;right: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:0 8px 8px 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:4px;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;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.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);left:0;z-index:10;min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;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:6px;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)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
 /** Vertical timeline container. Wraps `<strct-timeline-item>` children. */
 class StrctTimeline {