@akcelik/strct 0.4.0 → 0.5.0

package/fesm2022/akcelik-strct.mjs

@@ -88,7 +88,6 @@ const STRCT_ICONS = {
     chevronLeft: '<path d="M10 3.5L5.5 8 10 12.5"/>',
     chevronDoubleRight: '<path d="M3.5 3.5L8 8l-4.5 4.5M8.5 3.5L13 8l-4.5 4.5"/>',
     chevronDown: '<path d="M3.5 6L8 10.5 12.5 6"/>',
-    ellipsis: '<circle cx="3.5" cy="8" r=".9" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r=".9" fill="currentColor" stroke="none"/><circle cx="12.5" cy="8" r=".9" fill="currentColor" stroke="none"/>',
     compass: '<circle cx="8" cy="8" r="6"/><path d="M10.6 5.4l-1.5 3.7-3.7 1.5 1.5-3.7 3.7-1.5z"/>',
     close: '<path d="M4 4l8 8M12 4l-8 8"/>',
     check: '<path d="M3.5 8.5l3 3 6-7"/>',
@@ -97,7 +96,6 @@ const STRCT_ICONS = {
     search: '<circle cx="7" cy="7" r="4"/><path d="M10 10l3.5 3.5"/>',
     calendar: '<rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M2.5 6.5h11M5.5 2v3M10.5 2v3"/>',
     eye: '<path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/>',
-    eyeOff: '<path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/><path d="M2.5 2.5l11 11"/>',
     upload: '<path d="M8 10.5V3M5 5.8L8 2.8l3 3M3 12.8h10"/>',
     download: '<path d="M8 2.5V10M5 7.2L8 10.2l3-3M3 12.8h10"/>',
     droplet: '<path d="M8 2.4S12 6.6 12 9.4a4 4 0 01-8 0c0-2.8 4-7 4-7z"/>',
@@ -108,7 +106,7 @@ const STRCT_ICONS = {
     moon: '<path d="M13 9a5 5 0 01-6-6 5.5 5.5 0 106 6z"/>',
     info: '<circle cx="8" cy="8" r="6"/><path d="M8 7.2v3.6M8 5.2v.2"/>',
     warning: '<path d="M8 2.5l6 11H2l6-11z"/><path d="M8 6.8v3M8 11.6v.2"/>',
-    danger: '<circle cx="8" cy="8" r="6"/><path d="M8 5v3.6M8 10.8v.2"/>',
+    critical: '<circle cx="8" cy="8" r="6"/><path d="M8 5v3.6M8 10.8v.2"/>',
     success: '<circle cx="8" cy="8" r="6"/><path d="M5.2 8.2l2 2 3.6-4"/>',
     bell: '<path d="M8 2.6a3.4 3.4 0 00-3.4 3.4c0 2.9-1.1 3.9-1.1 3.9h9s-1.1-1-1.1-3.9A3.4 3.4 0 008 2.6z"/><path d="M6.8 12.8a1.3 1.3 0 002.4 0"/>',
     heart: '<path d="M8 13.3S2.7 10 2.7 6.3A2.6 2.6 0 018 4.9a2.6 2.6 0 015.3 1.4C13.3 10 8 13.3 8 13.3z"/>',
@@ -127,6 +125,23 @@ const STRCT_ICONS = {
     folder: '<path d="M2 4.6a1 1 0 0 1 1-1h3.1l1.3 1.6H13a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>',
     template: '<path d="M4.3 2.5h4.6l3.1 3.1V13a.5.5 0 0 1-.5.5H4.3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z"/><path d="M8.7 2.6v3.1h3.1"/><path d="M5.8 9h4.2M5.8 11h2.6"/>',
     tag: '<path d="M2.6 7.7V3.2a.6.6 0 0 1 .6-.6h4.5l5.6 5.6a1 1 0 0 1 0 1.4l-3.5 3.5a1 1 0 0 1-1.4 0z"/><circle cx="5.4" cy="5.4" r=".9" fill="currentColor" stroke="none"/>',
+    // ── Actions ──────────────────────────────────────────────────
+    plus: '<path d="M8 3v10M3 8h10"/>',
+    minus: '<path d="M3 8h10"/>',
+    pencil: '<path d="M11.5 2.5l2 2-8.5 8.5-3 .5.5-3z"/>',
+    trash: '<path d="M2.5 4.5h11M5.5 4.5v8.5a1 1 0 001 1h3a1 1 0 001-1V4.5M6.5 3h3"/>',
+    refresh: '<path d="M13.5 7.5a5.5 5.5 0 11-2-5.2"/><path d="M13.5 2.5v3.5H10"/>',
+    filter: '<path d="M2 3.5h12l-4.5 5.5v4.5h-3V9z"/>',
+    settings: '<path d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"/><path d="M7.2 1.5h1.6l.3 1.8c.4.1.8.3 1.2.5l1.5-1.1 1.1 1.1-1.1 1.5c.2.4.4.8.5 1.2l1.8.3v1.6l-1.8.3c-.1.4-.3.8-.5 1.2l1.1 1.5-1.1 1.1-1.5-1.1c-.4.2-.8.4-1.2.5l-.3 1.8H7.2l-.3-1.8a5.4 5.4 0 01-1.2-.5l-1.5 1.1-1.1-1.1 1.1-1.5a5.4 5.4 0 01-.5-1.2l-1.8-.3V7.2l1.8-.3c.1-.4.3-.8.5-1.2L2.7 4.2l1.1-1.1 1.5 1.1c.4-.2.8-.4 1.2-.5z"/>',
+    user: '<path d="M8 8a2.5 2.5 0 100-5A2.5 2.5 0 008 8z"/><path d="M3 14.5c0-2.8 2.2-5 5-5s5 2.2 5 5"/>',
+    logout: '<path d="M10 3.5h2a1 1 0 011 1v7a1 1 0 01-1 1h-2M6.5 5.5L3.5 8l3 3M3.5 8h6.5"/>',
+    undo: '<path d="M4.5 5.5L2 8l2.5 2.5M2.5 8h7a3 3 0 013 3v.5"/>',
+    redo: '<path d="M11.5 5.5L14 8l-2.5 2.5M13.5 8h-7a3 3 0 00-3 3v.5"/>',
+    arrowUp: '<path d="M8 13V3M3.5 6.5L8 2l4.5 4.5"/>',
+    arrowDown: '<path d="M8 3v10M3.5 9.5L8 14l4.5-4.5"/>',
+    arrowLeft: '<path d="M13 8H3M6.5 3.5L2 8l4.5 4.5"/>',
+    arrowRight: '<path d="M3 8h10M9.5 3.5L14 8l-4.5 4.5"/>',
+    externalLink: '<path d="M9 2.5h4.5V7M13.5 2.5L8.5 7.5M11.5 9v3.5a1 1 0 01-1 1h-7a1 1 0 01-1-1v-7a1 1 0 011-1H7"/>',
     // ── Datacenter / infrastructure ─────────────────────────────
     datacenter: '<rect x="2.5" y="2.5" width="11" height="11" rx="1"/><path d="M5 5h6M5 7.3h6M5 9.6h3.5"/><circle cx="11" cy="9.7" r=".5" fill="currentColor" stroke="none"/>',
     rack: '<rect x="3.5" y="2" width="9" height="12" rx="1"/><path d="M3.5 5.2h9M3.5 8.4h9M3.5 11.6h9"/><circle cx="5.4" cy="3.6" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="6.8" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="10" r=".4" fill="currentColor" stroke="none"/>',
@@ -151,6 +166,21 @@ const STRCT_ICONS = {
     resourcePool: '<circle cx="8" cy="8" r="5.6"/><path d="M8 8V2.4M8 8l4.9 2.7"/>',
     // Port group — a grouped set of switch ports under a shared rail.
     portGroup: '<path d="M1.8 4.4h12.4"/><rect x="2.2" y="6.2" width="3.4" height="4" rx=".5"/><rect x="6.3" y="6.2" width="3.4" height="4" rx=".5"/><rect x="10.4" y="6.2" width="3.4" height="4" rx=".5"/><path d="M3.9 10.2v1.6M8 10.2v1.6M12.1 10.2v1.6"/>',
+    // ── Modern infrastructure ────────────────────────────────────
+    pod: '<path d="M3 4.5c0-1.1 2.2-2 5-2s5 .9 5 2v7c0 1.1-2.2 2-5 2s-5-.9-5-2z"/><path d="M3 4.5c0 1.1 2.2 2 5 2s5-.9 5-2"/>',
+    deployment: '<rect x="2.5" y="2.5" width="11" height="4.5" rx="1"/><rect x="2.5" y="9" width="11" height="4.5" rx="1"/><path d="M11.5 5.5l2.5-1.5v4l-2.5-1.5"/>',
+    service: '<circle cx="4.5" cy="8" r="2"/><circle cx="11.5" cy="4.5" r="2"/><circle cx="11.5" cy="11.5" r="2"/><path d="M6.2 6.8l3.3-1.3M6.2 9.2l3.3 1.3"/>',
+    node: '<rect x="2.5" y="4" width="11" height="8" rx="1"/><path d="M5 7h6M5 10h3"/><circle cx="11" cy="10" r=".7" fill="currentColor" stroke="none"/>',
+    ingress: '<path d="M1.5 4.5h10M1.5 8h8M1.5 11.5h10"/><path d="M10.5 6.5l3 1.5-3 1.5"/>',
+    cloud: '<path d="M11.5 10.5a2.5 2.5 0 00-1.5-4.5 2.8 2.8 0 00-5.2.3A2.5 2.5 0 004 10.5z"/>',
+    container: '<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><path d="M2.5 5.5h11M5.5 5.5V3M8 5.5V3M10.5 5.5V3"/>',
+    firewall: '<path d="M1.5 4h13v8h-13z"/><path d="M1.5 6.5h13M5 6.5V12M8 4V12M11 6.5V12"/>',
+    shield: '<path d="M8 2.3l5.2 1.9v3.3c0 3.1-2.3 5.1-5.2 6.4C5.1 12.6 2.8 10.6 2.8 7.5V4.2z"/>',
+    certificate: '<path d="M3 2.5h10v9H3z"/><path d="M3 5.5h10M6 8h4"/><circle cx="8" cy="11" r=".6" fill="currentColor" stroke="none"/><path d="M12 3.5l2 1.5-2 1.5V3.5z"/>',
+    key: '<circle cx="5" cy="9" r="2.8"/><path d="M6.9 7.1l5.6-5.6M11 4.5h2.5V7"/>',
+    metrics: '<path d="M2.5 13V3M2.5 13H13"/><path d="M4.5 10l2.5-4 2 2 3-5"/>',
+    logs: '<path d="M3 4.5h10M3 7h10M3 9.5h7M3 12h4"/>',
+    trace: '<circle cx="3.5" cy="5.5" r="1.2"/><circle cx="8" cy="11" r="1.2"/><circle cx="12.5" cy="5.5" r="1.2"/><path d="M4.5 6.3l2.5 3.4M9 9.2l2.5-3.4"/>',
     // ── Accessibility (original glyphs for generic concepts) ─────
     universalAccess: '<circle cx="8" cy="8" r="6"/><circle cx="8" cy="4.9" r=".9" fill="currentColor" stroke="none"/><path d="M4.9 6.3c2 .8 4.2 .8 6.2 0M8 6.4v3.1M6.3 11.9 8 9.4l1.7 2.5"/>',
     wheelchair: '<circle cx="6.5" cy="3.1" r="1.3"/><path d="M6.5 4.5v3.3h3.1l1.7 3.4"/><circle cx="6.7" cy="11.3" r="2.6"/><path d="M9.3 11.3h2.1l-.5 1.6"/>',
@@ -161,7 +191,6 @@ const STRCT_ICONS = {
     // ── Alert (original glyphs) ─────────────────────────────────
     siren: '<path d="M3.5 13h9M5 13V8a3 3 0 0 1 6 0v5M8 2.4V4M3.6 4.6l1 .9M12.4 4.6l-1 .9"/>',
     alarm: '<circle cx="8" cy="9" r="4.4"/><path d="M8 6.6V9l1.7 1M5 2.6 3.1 4.3M11 2.6l1.9 1.7M8 4.6V3"/>',
-    bellOff: '<path d="M8 2.6a3.4 3.4 0 00-3.4 3.4c0 2.9-1.1 3.9-1.1 3.9h9s-1.1-1-1.1-3.9A3.4 3.4 0 008 2.6z"/><path d="M6.8 12.8a1.3 1.3 0 002.4 0"/><path d="M2.6 2.6l10.8 10.8"/>',
     megaphone: '<path d="M3 7.3v1.6l7 3V4.3zM10 5.7 12.5 4.2v7.6L10 10.3M4 9.6l.9 3.1h1.6l-.7-2.9"/>',
     flag: '<path d="M4 13.5V3M4 3.6h7.4L9.8 6.2l1.6 2.6H4"/>',
     shieldAlert: '<path d="M8 2.3l5.2 1.9v3.3c0 3.1-2.3 5.1-5.2 6.4C5.1 12.6 2.8 10.6 2.8 7.5V4.2z"/><path d="M8 5.5v3.1M8 10.6v.2"/>',
@@ -180,20 +209,71 @@ const STRCT_ICONS = {
     vendorDell: '<circle cx="8" cy="8" r="5.6"/><path d="M5.4 8h3.4M5.4 6.6h2.6M5.4 9.4h2.6"/>',
     vendorKaytus: '<path d="M5 3v10M5 8l4.5-4.5M5 8l4.5 5"/>',
 };
+// Composite "off" variants — re-use base glyph + diagonal slash.
+STRCT_ICONS['eyeOff'] = `${STRCT_ICONS['eye']}<path d="M2.5 2.5l11 11"/>`;
+STRCT_ICONS['bellOff'] = `${STRCT_ICONS['bell']}<path d="M2.6 2.6l10.8 10.8"/>`;
 /** Icon names grouped for galleries / documentation. */
 const STRCT_ICON_GROUPS = [
     {
         label: 'General',
         names: [
-            'hexagon', 'search', 'menu', 'ellipsis', 'dots', 'close', 'check', 'calendar',
-            'eye', 'eyeOff', 'upload', 'download', 'sun', 'moon', 'bell', 'heart', 'layers',
-            'grid', 'form', 'chart', 'bars', 'gauge', 'palette', 'sidebar', 'compass',
-            'copy', 'code', 'book', 'terminal', 'folder', 'template', 'tag',
+            'hexagon',
+            'search',
+            'menu',
+            'dots',
+            'close',
+            'check',
+            'calendar',
+            'eye',
+            'eyeOff',
+            'upload',
+            'download',
+            'sun',
+            'moon',
+            'bell',
+            'heart',
+            'layers',
+            'grid',
+            'form',
+            'chart',
+            'bars',
+            'gauge',
+            'palette',
+            'sidebar',
+            'compass',
+            'copy',
+            'code',
+            'book',
+            'terminal',
+            'folder',
+            'template',
+            'tag',
+        ],
+    },
+    {
+        label: 'Actions',
+        names: [
+            'plus',
+            'minus',
+            'pencil',
+            'trash',
+            'refresh',
+            'filter',
+            'settings',
+            'user',
+            'logout',
+            'undo',
+            'redo',
+            'arrowUp',
+            'arrowDown',
+            'arrowLeft',
+            'arrowRight',
+            'externalLink',
         ],
     },
     {
         label: 'Status',
-        names: ['info', 'success', 'warning', 'danger', 'sync', 'lock', 'snapshot'],
+        names: ['info', 'success', 'warning', 'critical', 'sync', 'lock', 'snapshot'],
     },
     {
         label: 'Alert',
@@ -206,9 +286,43 @@ const STRCT_ICON_GROUPS = [
     {
         label: 'Datacenter',
         names: [
-            'datacenter', 'rack', 'cluster', 'host', 'vm', 'switch', 'storage',
-            'network', 'cpu', 'memory', 'disk', 'port', 'nic', 'hba', 'ethernet', 'power',
-            'resourcePool', 'portGroup',
+            'datacenter',
+            'rack',
+            'cluster',
+            'host',
+            'vm',
+            'switch',
+            'storage',
+            'network',
+            'cpu',
+            'memory',
+            'disk',
+            'port',
+            'nic',
+            'hba',
+            'ethernet',
+            'power',
+            'resourcePool',
+            'portGroup',
+        ],
+    },
+    {
+        label: 'Infrastructure',
+        names: [
+            'pod',
+            'deployment',
+            'service',
+            'node',
+            'ingress',
+            'cloud',
+            'container',
+            'firewall',
+            'shield',
+            'certificate',
+            'key',
+            'metrics',
+            'logs',
+            'trace',
         ],
     },
     {
@@ -240,24 +354,34 @@ function registerStrctIcon(name, content, options = {}) {
     }
 }
 /**
- * Inline stroke icon. `<strct-icon name="host" badge="ok" />` renders the host
+ * Inline stroke icon. `<strct-icon name="host" badge="success" />` renders the host
  * glyph with a green status dot (a "running host"). Unknown names render
  * nothing rather than throwing.
  */
 class StrctIcon {
     sanitizer = inject(DomSanitizer);
+    /** Icon name from the STRCT_ICONS registry. */
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Icon size in pixels. */
     size = input(16, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Stroke width for outline icons. */
     strokeWidth = input(1.4, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
     /** Optional status dot overlaid on the glyph (object state). */
     badge = input('none', ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the icon. When empty the icon is hidden from assistive tech. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** True when the named icon is a full-SVG (raw) icon registered by the app. */
     isRaw = computed(() => Object.prototype.hasOwnProperty.call(STRCT_RAW_ICONS, this.name()), ...(ngDevMode ? [{ debugName: "isRaw" }] : /* istanbul ignore next */ []));
     svg = computed(() => this.sanitizer.bypassSecurityTrustHtml(STRCT_ICONS[this.name()] ?? ''), ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
     rawSvg = computed(() => this.sanitizer.bypassSecurityTrustHtml(STRCT_RAW_ICONS[this.name()] ?? ''), ...(ngDevMode ? [{ debugName: "rawSvg" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctIcon, isStandalone: true, selector: "strct-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-icon" }, ngImport: i0, template: `@if (isRaw()) {
-      <span class="strct-icon__raw" [style.width.px]="size()" [style.height.px]="size()" [innerHTML]="rawSvg()"></span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctIcon, isStandalone: true, selector: "strct-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-icon" }, ngImport: i0, template: `@if (isRaw()) {
+      <span
+        class="strct-icon__raw"
+        [style.width.px]="size()"
+        [style.height.px]="size()"
+        [innerHTML]="rawSvg()"
+      ></span>
     } @else {
       <svg
         viewBox="0 0 16 16"
@@ -269,16 +393,24 @@ class StrctIcon {
         [style.width.px]="size()"
         [style.height.px]="size()"
         [innerHTML]="svg()"
+        role="img"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-hidden]="ariaLabel() ? null : 'true'"
       ></svg>
     }
     @if (badge() !== 'none') {
       <span class="strct-icon__badge strct-icon__badge--{{ badge() }}"></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:-1px;bottom:-1px;width:38%;height:38%;min-width:6px;min-height:6px;max-width:9px;max-height:9px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--ok{background:var(--ok)}.strct-icon__badge--warn{background:var(--wrn)}.strct-icon__badge--crit{background:var(--crt)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--info{background:var(--acc)}\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;right:-1px;bottom:-1px;width:38%;height:38%;min-width:6px;min-height:6px;max-width:9px;max-height:9px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--warning{background:var(--warning)}.strct-icon__badge--critical{background:var(--critical)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--info{background:var(--acc)}\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,
             args: [{ selector: 'strct-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `@if (isRaw()) {
-      <span class="strct-icon__raw" [style.width.px]="size()" [style.height.px]="size()" [innerHTML]="rawSvg()"></span>
+      <span
+        class="strct-icon__raw"
+        [style.width.px]="size()"
+        [style.height.px]="size()"
+        [innerHTML]="rawSvg()"
+      ></span>
     } @else {
       <svg
         viewBox="0 0 16 16"
@@ -290,12 +422,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         [style.width.px]="size()"
         [style.height.px]="size()"
         [innerHTML]="svg()"
+        role="img"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-hidden]="ariaLabel() ? null : 'true'"
       ></svg>
     }
     @if (badge() !== 'none') {
       <span class="strct-icon__badge strct-icon__badge--{{ badge() }}"></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:-1px;bottom:-1px;width:38%;height:38%;min-width:6px;min-height:6px;max-width:9px;max-height:9px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--ok{background:var(--ok)}.strct-icon__badge--warn{background:var(--wrn)}.strct-icon__badge--crit{background:var(--crt)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--info{background:var(--acc)}\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 }] }] } });
+    }`, 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:-1px;bottom:-1px;width:38%;height:38%;min-width:6px;min-height:6px;max-width:9px;max-height:9px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--warning{background:var(--warning)}.strct-icon__badge--critical{background:var(--critical)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--info{background:var(--acc)}\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}. */
 class StrctThemeSwitcher {
@@ -339,7 +474,7 @@ class StrctThemeSwitcher {
         <strct-icon name="moon" [size]="15" [strokeWidth]="1.5" />
       </button>
     </div>
-  `, isInline: true, styles: [".strct-ts{display:inline-flex;align-items:center;gap:14px}.strct-ts__pal{display:inline-flex;gap:7px}.strct-ts__dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;background:transparent;border:1.5px solid rgba(255,255,255,.35);transition:transform .15s ease,border-color .15s ease}.strct-ts__dot:hover{transform:scale(1.12)}.strct-ts__inner{width:11px;height:11px;border-radius:50%;display:block}.strct-ts__dot--on{border-color:#fff;box-shadow:0 0 0 2px #ffffff40}.strct-ts__pill{display:inline-flex;padding:2px;gap:2px;border-radius:7px;background:#ffffff1a}.strct-ts__pbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:#fff9;transition:background .14s ease,color .14s ease}.strct-ts__pbtn--on{background:#ffffff2e;color:#fff}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-ts{display:inline-flex;align-items:center;gap:14px}.strct-ts__pal{display:inline-flex;gap:7px}.strct-ts__dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;background:transparent;border:1.5px solid rgba(255,255,255,.35);transition:transform .15s ease,border-color .15s ease}.strct-ts__dot:hover{transform:scale(1.12)}.strct-ts__inner{width:11px;height:11px;border-radius:50%;display:block}.strct-ts__dot--on{border-color:#fff;box-shadow:0 0 0 2px #ffffff40}.strct-ts__pill{display:inline-flex;padding:2px;gap:2px;border-radius:7px;background:#ffffff1a}.strct-ts__pbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:#fff9;transition:background .14s ease,color .14s ease}.strct-ts__pbtn--on{background:#ffffff2e;color:#fff}\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: StrctThemeSwitcher, decorators: [{
             type: Component,
@@ -400,10 +535,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class StrctOverlay {
     el = inject((ElementRef)).nativeElement;
     zone = inject(NgZone);
+    /** Anchor element for positioning. */
     anchor = input.required({ ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), alias: 'strctOverlay' });
+    /** Preferred placement relative to the anchor. */
     placement = input('bottom-start', { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'strctOverlayPlacement' });
     /** Match the panel width to the anchor (combobox / date / cascade fields). */
     matchWidth = input(false, { ...(ngDevMode ? { debugName: "matchWidth" } : /* istanbul ignore next */ {}), alias: 'strctOverlayMatchWidth' });
+    /** Gap between anchor and panel in pixels. */
     gap = input(5, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), alias: 'strctOverlayGap' });
     onScrollResize = () => this.position();
     bound = false;
@@ -510,14 +648,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     <ng-content select="strct-footer" />
   `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}\n"] }]
         }] });
+/** Shared layout state between shell parts. */
+class StrctShellService {
+    mobileNavOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileNavOpen" }] : /* istanbul ignore next */ []));
+}
 /** Top application bar. Holds brand on the left and actions on the right. */
 class StrctHeader {
+    shell = inject(StrctShellService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctHeader, isStandalone: true, selector: "strct-header", host: { classAttribute: "strct-header" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:#ffffffeb}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctHeader, isStandalone: true, selector: "strct-header", host: { classAttribute: "strct-header" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="strct-header__drawer-toggle"
+      aria-label="Toggle navigation"
+      (click)="shell.mobileNavOpen.update((v) => !v)"
+    >
+      <strct-icon name="menu" [size]="18" />
+    </button>
+    <ng-content />
+  `, isInline: true, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:#ffffffeb}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:#ffffffd9;cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:#fff}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\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: StrctHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-header' }, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:#ffffffeb}\n"] }]
+            args: [{ selector: 'strct-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <button
+      type="button"
+      class="strct-header__drawer-toggle"
+      aria-label="Toggle navigation"
+      (click)="shell.mobileNavOpen.update((v) => !v)"
+    >
+      <strct-icon name="menu" [size]="18" />
+    </button>
+    <ng-content />
+  `, host: { class: 'strct-header' }, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:#ffffffeb}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:#ffffffd9;cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:#fff}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
         }] });
 /** Bottom status bar. */
 class StrctFooter {
@@ -531,12 +694,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 /** Scrollable left sidebar surface. Holds the icon nav and/or a tree. */
 class StrctVerticalNav {
+    shell = inject(StrctShellService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctVerticalNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctVerticalNav, isStandalone: true, selector: "strct-vertical-nav", host: { classAttribute: "strct-vnav" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--b2);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctVerticalNav, isStandalone: true, selector: "strct-vertical-nav", host: { properties: { "class.strct-vnav--open": "shell.mobileNavOpen()" }, classAttribute: "strct-vnav" }, ngImport: i0, template: `
+    @if (shell.mobileNavOpen()) {
+      <div
+        class="strct-vnav__backdrop"
+        tabindex="0"
+        role="button"
+        aria-label="Close navigation"
+        (click)="shell.mobileNavOpen.set(false)"
+        (keydown.enter)="shell.mobileNavOpen.set(false)"
+        (keydown.space)="shell.mobileNavOpen.set(false)"
+      ></div>
+    }
+    <ng-content />
+  `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-right: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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctVerticalNav, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-vertical-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-vnav' }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--b2);overflow:hidden}\n"] }]
+            args: [{ selector: 'strct-vertical-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (shell.mobileNavOpen()) {
+      <div
+        class="strct-vnav__backdrop"
+        tabindex="0"
+        role="button"
+        aria-label="Close navigation"
+        (click)="shell.mobileNavOpen.set(false)"
+        (keydown.enter)="shell.mobileNavOpen.set(false)"
+        (keydown.space)="shell.mobileNavOpen.set(false)"
+      ></div>
+    }
+    <ng-content />
+  `, 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-right: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"] }]
         }] });
 /** Horizontal strip of icon tabs (e.g. section switcher at the top of a sidebar). */
 class StrctNav {
@@ -549,7 +742,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** A single icon tab inside `<strct-nav>`. */
 class StrctNavItem {
+    /** Whether the item is active / selected. */
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Label text. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctNavItem, isStandalone: true, selector: "strct-nav-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button", "tabindex": "0" }, properties: { "class.strct-nav-item--active": "active()", "attr.title": "label() || null", "attr.aria-label": "label() || null", "attr.aria-pressed": "active()" }, classAttribute: "strct-nav-item" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-nav-item{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;cursor:pointer;color:var(--t2);transition:background .14s ease,color .14s ease}.strct-nav-item:hover{background:var(--bg-3);color:var(--t1)}.strct-nav-item--active{background:var(--acc-m);color:var(--acc)}.strct-nav-item:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -579,7 +774,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   </strct-login>
  */
 class StrctLogin {
+    /** Maximum width in pixels. */
     maxWidth = input(880, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Enable two-panel split layout. */
     split = input(false, { ...(ngDevMode ? { debugName: "split" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctLogin, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctLogin, isStandalone: true, selector: "strct-login", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-login" }, ngImport: i0, template: `
@@ -626,22 +823,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <a strct-button variant="flat" size="sm" href="...">Cancel</a>
  */
 class StrctButton {
+    /** Visual variant. */
     variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Opt in to a filled surface (use sparingly, for the primary action). */
     solid = input(false, { ...(ngDevMode ? { debugName: "solid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Expand to full width. */
     block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Square padding for a single-icon button. */
     iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctButton, isStandalone: true, selector: "button[strct-button], a[strct-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-btn--primary": "variant() === 'primary'", "class.strct-btn--danger": "variant() === 'danger'", "class.strct-btn--outline": "variant() === 'outline'", "class.strct-btn--flat": "variant() === 'flat'", "class.strct-btn--solid": "solid()", "class.strct-btn--sm": "size() === 'sm'", "class.strct-btn--mini": "size() === 'mini'", "class.strct-btn--block": "block()", "class.strct-btn--icon": "iconOnly()" }, classAttribute: "strct-btn" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);font-size:13px;font-weight:500;line-height:1;padding:7px 14px;border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--danger{border-color:var(--crt);color:var(--crt)}.strct-btn--danger:hover{background:var(--crt-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:#fff}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--danger{background:var(--crt);color:#fff}.strct-btn--solid.strct-btn--danger:hover{background:var(--crt);filter:brightness(1.08)}.strct-btn--sm{padding:4px 10px;font-size:12px;border-radius:5px}.strct-btn--mini{padding:2px 8px;font-size:11px;border-radius:4px}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{padding:7px}.strct-btn--icon.strct-btn--sm{padding:5px}.strct-btn--icon.strct-btn--mini{padding:3px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctButton, isStandalone: true, selector: "button[strct-button], a[strct-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-btn--primary": "variant() === 'primary'", "class.strct-btn--critical": "variant() === 'critical'", "class.strct-btn--outline": "variant() === 'outline'", "class.strct-btn--flat": "variant() === 'flat'", "class.strct-btn--solid": "solid()", "class.strct-btn--sm": "size() === 'sm'", "class.strct-btn--mini": "size() === 'mini'", "class.strct-btn--block": "block()", "class.strct-btn--icon": "iconOnly()" }, classAttribute: "strct-btn" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--critical{border-color:var(--critical);color:var(--critical)}.strct-btn--critical:hover{background:var(--critical-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:#fff}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--critical{background:var(--critical);color:#fff}.strct-btn--solid.strct-btn--critical:hover{background:var(--critical);filter:brightness(1.08)}.strct-btn--sm{padding:var(--space-1) var(--space-3);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--mini{padding:2px var(--space-2);font-size:11px;border-radius:var(--radius-sm)}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{padding:var(--space-2)}.strct-btn--icon.strct-btn--sm{padding:var(--space-1)}.strct-btn--icon.strct-btn--mini{padding:3px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctButton, decorators: [{
             type: Component,
             args: [{ selector: 'button[strct-button], a[strct-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
                         class: 'strct-btn',
                         '[class.strct-btn--primary]': "variant() === 'primary'",
-                        '[class.strct-btn--danger]': "variant() === 'danger'",
+                        '[class.strct-btn--critical]': "variant() === 'critical'",
                         '[class.strct-btn--outline]': "variant() === 'outline'",
                         '[class.strct-btn--flat]': "variant() === 'flat'",
                         '[class.strct-btn--solid]': 'solid()',
@@ -649,25 +849,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.strct-btn--mini]': "size() === 'mini'",
                         '[class.strct-btn--block]': 'block()',
                         '[class.strct-btn--icon]': 'iconOnly()',
-                    }, styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);font-size:13px;font-weight:500;line-height:1;padding:7px 14px;border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--danger{border-color:var(--crt);color:var(--crt)}.strct-btn--danger:hover{background:var(--crt-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:#fff}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--danger{background:var(--crt);color:#fff}.strct-btn--solid.strct-btn--danger:hover{background:var(--crt);filter:brightness(1.08)}.strct-btn--sm{padding:4px 10px;font-size:12px;border-radius:5px}.strct-btn--mini{padding:2px 8px;font-size:11px;border-radius:4px}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{padding:7px}.strct-btn--icon.strct-btn--sm{padding:5px}.strct-btn--icon.strct-btn--mini{padding:3px}\n"] }]
+                    }, styles: [".strct-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--t1);background:transparent;border:1px solid var(--b3);transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;text-decoration:none;white-space:nowrap}.strct-btn:hover{background:var(--bg-3);text-decoration:none}.strct-btn:active{background:var(--bg-a)}.strct-btn:disabled,.strct-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-btn--primary{border-color:var(--acc50);color:var(--acc)}.strct-btn--primary:hover{background:var(--acc-m);border-color:var(--acc)}.strct-btn--critical{border-color:var(--critical);color:var(--critical)}.strct-btn--critical:hover{background:var(--critical-bg)}.strct-btn--outline{border-color:var(--b3);color:var(--t1)}.strct-btn--outline:hover{background:var(--bg-3)}.strct-btn--flat{border-color:transparent;color:var(--t2)}.strct-btn--flat:hover{background:var(--bg-3);color:var(--t1)}.strct-btn--solid{background:var(--bg-3);border-color:transparent;color:var(--t1)}.strct-btn--solid:hover{background:var(--bg-h)}.strct-btn--solid.strct-btn--primary{background:var(--acc);color:#fff}.strct-btn--solid.strct-btn--primary:hover{background:var(--acc);filter:brightness(1.08)}.strct-btn--solid.strct-btn--critical{background:var(--critical);color:#fff}.strct-btn--solid.strct-btn--critical:hover{background:var(--critical);filter:brightness(1.08)}.strct-btn--sm{padding:var(--space-1) var(--space-3);font-size:12px;border-radius:var(--radius-sm)}.strct-btn--mini{padding:2px var(--space-2);font-size:11px;border-radius:var(--radius-sm)}.strct-btn--block{display:flex;width:100%}.strct-btn--icon{padding:var(--space-2)}.strct-btn--icon.strct-btn--sm{padding:var(--space-1)}.strct-btn--icon.strct-btn--mini{padding:3px}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
 /** Segments adjacent buttons into a single joined control. */
 class StrctButtonGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctButtonGroup, isStandalone: true, selector: "strct-button-group", host: { attributes: { "role": "group" }, classAttribute: "strct-btn-group" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-btn-group{display:inline-flex}.strct-btn-group>.strct-btn{border-radius:0}.strct-btn-group>.strct-btn:not(:first-child){margin-left:-1px}.strct-btn-group>.strct-btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.strct-btn-group>.strct-btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.strct-btn-group>.strct-btn:hover,.strct-btn-group>.strct-btn:focus-visible{position:relative;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctButtonGroup, isStandalone: true, selector: "strct-button-group", host: { attributes: { "role": "group" }, classAttribute: "strct-btn-group" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-btn-group{display:inline-flex}.strct-btn-group>.strct-btn{border-radius:0}.strct-btn-group>.strct-btn:not(:first-child){margin-left:-1px}.strct-btn-group>.strct-btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.strct-btn-group>.strct-btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.strct-btn-group>.strct-btn:hover,.strct-btn-group>.strct-btn:focus-visible{position:relative;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctButtonGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-btn-group', role: 'group' }, styles: [".strct-btn-group{display:inline-flex}.strct-btn-group>.strct-btn{border-radius:0}.strct-btn-group>.strct-btn:not(:first-child){margin-left:-1px}.strct-btn-group>.strct-btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.strct-btn-group>.strct-btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.strct-btn-group>.strct-btn:hover,.strct-btn-group>.strct-btn:focus-visible{position:relative;z-index:1}\n"] }]
+            args: [{ selector: 'strct-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-btn-group', role: 'group' }, styles: [".strct-btn-group{display:inline-flex}.strct-btn-group>.strct-btn{border-radius:0}.strct-btn-group>.strct-btn:not(:first-child){margin-left:-1px}.strct-btn-group>.strct-btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.strct-btn-group>.strct-btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.strct-btn-group>.strct-btn:hover,.strct-btn-group>.strct-btn:focus-visible{position:relative;z-index:1}\n"] }]
         }] });
 
 /** Small inline status pill: `<strct-badge status="success">Active</strct-badge>`. */
 class StrctBadge {
+    /** Visual status color. */
     status = input('neutral', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     /** Opt-in filled style instead of the default outlined style. */
     solid = input(false, { ...(ngDevMode ? { debugName: "solid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctBadge, isStandalone: true, selector: "strct-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-badge--accent": "status() === 'accent'", "class.strct-badge--success": "status() === 'success'", "class.strct-badge--warning": "status() === 'warning'", "class.strct-badge--danger": "status() === 'danger'", "class.strct-badge--solid": "solid()" }, classAttribute: "strct-badge" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;letter-spacing:.2px;padding:3px 7px 3px 9px;border-radius:4px;white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-left-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--ok);border-color:var(--ok)}.strct-badge--warning{color:var(--wrn);border-color:var(--wrn)}.strct-badge--danger{color:var(--crt);border-color:var(--crt)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-left-width:1px;padding-left:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:#fff}.strct-badge--solid.strct-badge--success{background:var(--ok);color:#fff}.strct-badge--solid.strct-badge--warning{background:var(--wrn);color:#fff}.strct-badge--solid.strct-badge--danger{background:var(--crt);color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctBadge, isStandalone: true, selector: "strct-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-badge--accent": "status() === 'accent'", "class.strct-badge--success": "status() === 'success'", "class.strct-badge--warninging": "status() === 'warning'", "class.strct-badge--critical": "status() === 'critical'", "class.strct-badge--solid": "solid()" }, classAttribute: "strct-badge" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;letter-spacing:.2px;padding:3px 7px 3px 9px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-left-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warninging{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-left-width:1px;padding-left:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:#fff}.strct-badge--solid.strct-badge--success{background:var(--success);color:#fff}.strct-badge--solid.strct-badge--warninging{background:var(--warning);color:#fff}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctBadge, decorators: [{
             type: Component,
@@ -675,10 +876,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'strct-badge',
                         '[class.strct-badge--accent]': "status() === 'accent'",
                         '[class.strct-badge--success]': "status() === 'success'",
-                        '[class.strct-badge--warning]': "status() === 'warning'",
-                        '[class.strct-badge--danger]': "status() === 'danger'",
+                        '[class.strct-badge--warninging]': "status() === 'warning'",
+                        '[class.strct-badge--critical]': "status() === 'critical'",
                         '[class.strct-badge--solid]': 'solid()',
-                    }, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;letter-spacing:.2px;padding:3px 7px 3px 9px;border-radius:4px;white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-left-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--ok);border-color:var(--ok)}.strct-badge--warning{color:var(--wrn);border-color:var(--wrn)}.strct-badge--danger{color:var(--crt);border-color:var(--crt)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-left-width:1px;padding-left:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:#fff}.strct-badge--solid.strct-badge--success{background:var(--ok);color:#fff}.strct-badge--solid.strct-badge--warning{background:var(--wrn);color:#fff}.strct-badge--solid.strct-badge--danger{background:var(--crt);color:#fff}\n"] }]
+                    }, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;letter-spacing:.2px;padding:3px 7px 3px 9px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-left-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warninging{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-left-width:1px;padding-left:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:#fff}.strct-badge--solid.strct-badge--success{background:var(--success);color:#fff}.strct-badge--solid.strct-badge--warninging{background:var(--warning);color:#fff}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:#fff}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
 
 /**
@@ -686,18 +887,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-tag status="accent" removable (removed)="drop()">Frontend</strct-tag>
  */
 class StrctTag {
+    /** Visual status color. */
     status = input('neutral', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Show a remove button. */
     removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the user clicks the remove button. */
     removed = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTag, isStandalone: true, selector: "strct-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class.strct-tag--accent": "status() === 'accent'", "class.strct-tag--success": "status() === 'success'", "class.strct-tag--warning": "status() === 'warning'", "class.strct-tag--danger": "status() === 'danger'" }, classAttribute: "strct-tag" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTag, isStandalone: true, selector: "strct-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class.strct-tag--accent": "status() === 'accent'", "class.strct-tag--success": "status() === 'success'", "class.strct-tag--warning": "status() === 'warning'", "class.strct-tag--critical": "status() === 'critical'" }, classAttribute: "strct-tag" }, ngImport: i0, template: `
     <span class="strct-tag__text"><ng-content /></span>
     @if (removable()) {
       <button type="button" class="strct-tag__remove" aria-label="Remove" (click)="removed.emit()">
         <strct-icon name="close" [size]="11" [strokeWidth]="1.6" />
       </button>
     }
-  `, isInline: true, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-right:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--ok);border-color:var(--ok);background:transparent}.strct-tag--warning{color:var(--wrn);border-color:var(--wrn);background:transparent}.strct-tag--danger{color:var(--crt);border-color:var(--crt);background:transparent}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover{opacity:1;background:var(--dn)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-right:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover{opacity:1;background:var(--dn)}\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: StrctTag, decorators: [{
             type: Component,
@@ -713,8 +917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.strct-tag--accent]': "status() === 'accent'",
                         '[class.strct-tag--success]': "status() === 'success'",
                         '[class.strct-tag--warning]': "status() === 'warning'",
-                        '[class.strct-tag--danger]': "status() === 'danger'",
-                    }, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-right:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--ok);border-color:var(--ok);background:transparent}.strct-tag--warning{color:var(--wrn);border-color:var(--wrn);background:transparent}.strct-tag--danger{color:var(--crt);border-color:var(--crt);background:transparent}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover{opacity:1;background:var(--dn)}\n"] }]
+                        '[class.strct-tag--critical]': "status() === 'critical'",
+                    }, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-right:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover{opacity:1;background:var(--dn)}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
@@ -722,9 +926,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-avatar name="Ada Lovelace" status="online" />
  */
 class StrctAvatar {
+    /** Image URL. */
     src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Display name (used for initials when src is absent). */
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual status color. */
     status = input('none', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     initials = computed(() => {
         const parts = this.name().trim().split(/\s+/).filter(Boolean);
@@ -744,7 +952,7 @@ class StrctAvatar {
     @if (status() !== 'none') {
       <span class="strct-av__status"></span>
     }
-  `, isInline: true, styles: [".strct-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--bg-3);color:var(--t1);overflow:visible;font-size:13px;font-weight:600;-webkit-user-select:none;user-select:none;border:1px solid var(--b2)}.strct-av--sm{width:26px;height:26px;font-size:11px}.strct-av--lg{width:48px;height:48px;font-size:17px}.strct-av__img{width:100%;height:100%;border-radius:50%;object-fit:cover}.strct-av__initials{line-height:1}.strct-av__status{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--bg-1);background:var(--t3)}.strct-av--online .strct-av__status{background:var(--ok)}.strct-av--busy .strct-av__status{background:var(--crt)}.strct-av--offline .strct-av__status{background:var(--t3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--bg-3);color:var(--t1);overflow:visible;font-size:13px;font-weight:600;-webkit-user-select:none;user-select:none;border:1px solid var(--b2)}.strct-av--sm{width:26px;height:26px;font-size:11px}.strct-av--lg{width:48px;height:48px;font-size:17px}.strct-av__img{width:100%;height:100%;border-radius:50%;object-fit:cover}.strct-av__initials{line-height:1}.strct-av__status{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--bg-1);background:var(--t3)}.strct-av--online .strct-av__status{background:var(--success)}.strct-av--busy .strct-av__status{background:var(--critical)}.strct-av--offline .strct-av__status{background:var(--t3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctAvatar, decorators: [{
             type: Component,
@@ -765,16 +973,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.strct-av--busy]': "status() === 'busy'",
                         '[class.strct-av--offline]': "status() === 'offline'",
                         '[attr.title]': 'name() || null',
-                    }, styles: [".strct-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--bg-3);color:var(--t1);overflow:visible;font-size:13px;font-weight:600;-webkit-user-select:none;user-select:none;border:1px solid var(--b2)}.strct-av--sm{width:26px;height:26px;font-size:11px}.strct-av--lg{width:48px;height:48px;font-size:17px}.strct-av__img{width:100%;height:100%;border-radius:50%;object-fit:cover}.strct-av__initials{line-height:1}.strct-av__status{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--bg-1);background:var(--t3)}.strct-av--online .strct-av__status{background:var(--ok)}.strct-av--busy .strct-av__status{background:var(--crt)}.strct-av--offline .strct-av__status{background:var(--t3)}\n"] }]
+                    }, styles: [".strct-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--bg-3);color:var(--t1);overflow:visible;font-size:13px;font-weight:600;-webkit-user-select:none;user-select:none;border:1px solid var(--b2)}.strct-av--sm{width:26px;height:26px;font-size:11px}.strct-av--lg{width:48px;height:48px;font-size:17px}.strct-av__img{width:100%;height:100%;border-radius:50%;object-fit:cover}.strct-av__initials{line-height:1}.strct-av__status{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--bg-1);background:var(--t3)}.strct-av--online .strct-av__status{background:var(--success)}.strct-av--busy .strct-av__status{background:var(--critical)}.strct-av--offline .strct-av__status{background:var(--t3)}\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
 
 /** Horizontal value/usage bar. `<strct-progress [value]="72" status="warning" />`. */
 class StrctProgress {
+    /** Current value. */
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Visual status color. */
     status = input('accent', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     clamped = computed(() => Math.max(0, Math.min(100, this.value())), ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctProgress, isStandalone: true, selector: "strct-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-progress--success": "status() === 'success'", "class.strct-progress--warning": "status() === 'warning'", "class.strct-progress--danger": "status() === 'danger'" }, classAttribute: "strct-progress" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctProgress, isStandalone: true, selector: "strct-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-progress--success": "status() === 'success'", "class.strct-progress--warning": "status() === 'warning'", "class.strct-progress--critical": "status() === 'critical'" }, classAttribute: "strct-progress" }, ngImport: i0, template: `
     <div
       class="strct-progress__track"
       role="progressbar"
@@ -784,7 +994,7 @@ class StrctProgress {
     >
       <div class="strct-progress__fill" [style.width.%]="clamped()"></div>
     </div>
-  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:4px;background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:4px;background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--ok)}.strct-progress--warning .strct-progress__fill{background:var(--wrn)}.strct-progress--danger .strct-progress__fill{background:var(--crt)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:4px;background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:4px;background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctProgress, decorators: [{
             type: Component,
@@ -802,12 +1012,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'strct-progress',
                         '[class.strct-progress--success]': "status() === 'success'",
                         '[class.strct-progress--warning]': "status() === 'warning'",
-                        '[class.strct-progress--danger]': "status() === 'danger'",
-                    }, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:4px;background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:4px;background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--ok)}.strct-progress--warning .strct-progress__fill{background:var(--wrn)}.strct-progress--danger .strct-progress__fill{background:var(--crt)}\n"] }]
+                        '[class.strct-progress--critical]': "status() === 'critical'",
+                    }, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:4px;background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:4px;background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
 
 /** Indeterminate loading ring. `<strct-spinner size="sm" />`. */
 class StrctSpinner {
+    /** Size variant. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctSpinner, isStandalone: true, selector: "strct-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-label": "Loading" }, properties: { "class.strct-spinner--sm": "size() === 'sm'", "class.strct-spinner--lg": "size() === 'lg'" }, classAttribute: "strct-spinner" }, ngImport: i0, template: '', isInline: true, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -829,8 +1040,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-skeleton circle width="40px" height="40px" />
  */
 class StrctSkeleton {
+    /** Width (CSS length). */
     width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Height in pixels. */
     height = input('14px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Circle. */
     circle = input(false, { ...(ngDevMode ? { debugName: "circle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctSkeleton, isStandalone: true, selector: "strct-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation", "aria-hidden": "true" }, properties: { "class.strct-skel--circle": "circle()", "style.width": "width()", "style.height": "height()" }, classAttribute: "strct-skel" }, ngImport: i0, template: '', isInline: true, styles: [".strct-skel{display:block;border-radius:5px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-h) 37%,var(--bg-3) 63%);background-size:400% 100%;animation:strct-skel-shimmer 1.4s ease infinite}.strct-skel--circle{border-radius:50%}@keyframes strct-skel-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.strct-skel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -857,7 +1071,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctSpeedDial {
     host = inject((ElementRef));
+    /** Icon name. */
     icon = input('ellipsis', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Direction the actions fan out. */
     direction = input('up', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle() {
@@ -888,7 +1104,7 @@ class StrctSpeedDial {
         <strct-icon [name]="icon()" [size]="18" [strokeWidth]="1.5" />
       </button>
     </div>
-  `, isInline: true, styles: [".strct-sd-host{display:inline-block}.strct-sd{position:relative;display:inline-flex}.strct-sd__fab{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:#fff;background:var(--acc);border:0;box-shadow:var(--shh);transition:filter .14s ease,transform .16s ease}.strct-sd__fab:hover{filter:brightness(1.08)}.strct-sd__fab--open{transform:rotate(45deg)}.strct-sd__actions{position:absolute;display:flex;gap:10px;z-index:10;animation:strct-sd-in .14s ease}.strct-sd__actions .strct-btn{border-radius:50%;box-shadow:var(--sh);background:var(--bg-1)}.strct-sd--up .strct-sd__actions{flex-direction:column;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.strct-sd--down .strct-sd__actions{flex-direction:column;top:calc(100% + 12px);left:50%;transform:translate(-50%)}.strct-sd--left .strct-sd__actions{flex-direction:row;right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.strct-sd--right .strct-sd__actions{flex-direction:row;left:calc(100% + 12px);top:50%;transform:translateY(-50%)}@keyframes strct-sd-in{0%{opacity:0}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-sd-host{display:inline-block}.strct-sd{position:relative;display:inline-flex}.strct-sd__fab{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:#fff;background:var(--acc);border:0;box-shadow:var(--shh);transition:filter .14s ease,transform .16s ease}.strct-sd__fab:hover{filter:brightness(1.08)}.strct-sd__fab--open{transform:rotate(45deg)}.strct-sd__actions{position:absolute;display:flex;gap:10px;z-index:10;animation:strct-sd-in .14s ease}.strct-sd__actions .strct-btn{border-radius:50%;box-shadow:var(--sh);background:var(--bg-1)}.strct-sd--up .strct-sd__actions{flex-direction:column;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.strct-sd--down .strct-sd__actions{flex-direction:column;top:calc(100% + 12px);left:50%;transform:translate(-50%)}.strct-sd--left .strct-sd__actions{flex-direction:row;right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.strct-sd--right .strct-sd__actions{flex-direction:row;left:calc(100% + 12px);top:50%;transform:translateY(-50%)}@keyframes strct-sd-in{0%{opacity:0}}\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: StrctSpeedDial, decorators: [{
             type: Component,
@@ -927,35 +1143,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctCard {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCard, isStandalone: true, selector: "strct-card", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--sh);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCard, isStandalone: true, selector: "strct-card", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--sh);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCard, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-card', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--sh);overflow:hidden}\n"] }]
+            args: [{ selector: 'strct-card', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--sh);overflow:hidden}\n"] }]
         }] });
+/** Header section of a {@link StrctCard}. */
 class StrctCardHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCardHeader, isStandalone: true, selector: "strct-card-header", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCardHeader, isStandalone: true, selector: "strct-card-header", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCardHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}\n"] }]
+            args: [{ selector: 'strct-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}\n"] }]
         }] });
+/** Body section of a {@link StrctCard}. */
 class StrctCardBlock {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCardBlock, isStandalone: true, selector: "strct-card-block", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:16px;color:var(--t2);font-size:13px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCardBlock, isStandalone: true, selector: "strct-card-block", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--space-4);color:var(--t2);font-size:13px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCardBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-card-block', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:block;padding:16px;color:var(--t2);font-size:13px}\n"] }]
+            args: [{ selector: 'strct-card-block', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:block;padding:var(--space-4);color:var(--t2);font-size:13px}\n"] }]
         }] });
+/** Footer section of a {@link StrctCard}. */
 class StrctCardFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCardFooter, isStandalone: true, selector: "strct-card-footer", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--b1);background:var(--bg-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: StrctCardFooter, isStandalone: true, selector: "strct-card-footer", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCardFooter, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-card-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--b1);background:var(--bg-2)}\n"] }]
+            args: [{ selector: 'strct-card-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}\n"] }]
         }] });
 
 /** Vertical container for `<strct-accordion-panel>` items. */
@@ -969,7 +1188,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** Collapsible panel with a header. `expanded` is two-way bindable. */
 class StrctAccordionPanel {
+    /** Panel heading. */
     heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is open (two-way). */
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     toggle() {
         this.expanded.update((v) => !v);
@@ -990,7 +1211,7 @@ class StrctAccordionPanel {
     @if (expanded()) {
       <div class="strct-acc__body"><ng-content /></div>
     }
-  `, isInline: true, styles: [".strct-acc{display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;overflow:hidden}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:left}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px 32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-acc{display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;overflow:hidden}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:left}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px 32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\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: StrctAccordionPanel, decorators: [{
             type: Component,
@@ -1014,7 +1235,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 /** A single tab. Place inside `<strct-tabs>`; `label` names its button. */
 class StrctTab {
+    /** Label text. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
     active = this._active.asReadonly();
@@ -1088,7 +1311,13 @@ class StrctTabs {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTabs, isStandalone: true, selector: "strct-tabs", host: { classAttribute: "strct-tabs" }, queries: [{ propertyName: "tabs", predicate: StrctTab, isSignal: true }], ngImport: i0, template: `
-    <div class="strct-tabs__bar" role="tablist" #bar (keydown)="onKeydown($event, bar)">
+    <div
+      class="strct-tabs__bar"
+      role="tablist"
+      tabindex="0"
+      #bar
+      (keydown)="onKeydown($event, bar)"
+    >
       @for (tab of tabs(); track tab; let i = $index) {
         <button
           type="button"
@@ -1105,12 +1334,18 @@ class StrctTabs {
       }
     </div>
     <div class="strct-tabs__panels"><ng-content /></div>
-  `, isInline: true, styles: [".strct-tabs{display:block}.strct-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--b2)}.strct-tabs__btn{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.strct-tabs__btn:hover{color:var(--t1)}.strct-tabs__btn--active{color:var(--acc);border-bottom-color:var(--acc)}.strct-tabs__btn:disabled{color:var(--t4);cursor:not-allowed}.strct-tabs__panels{padding-top:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tabs{display:block}.strct-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--b2);overflow-x:auto;white-space:nowrap;scrollbar-width:none}.strct-tabs__btn{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.strct-tabs__btn:hover{color:var(--t1)}.strct-tabs__btn--active{color:var(--acc);border-bottom-color:var(--acc)}.strct-tabs__btn:disabled{color:var(--t4);cursor:not-allowed}.strct-tabs__panels{padding-top:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTabs, decorators: [{
             type: Component,
             args: [{ selector: 'strct-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="strct-tabs__bar" role="tablist" #bar (keydown)="onKeydown($event, bar)">
+    <div
+      class="strct-tabs__bar"
+      role="tablist"
+      tabindex="0"
+      #bar
+      (keydown)="onKeydown($event, bar)"
+    >
       @for (tab of tabs(); track tab; let i = $index) {
         <button
           type="button"
@@ -1127,7 +1362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       }
     </div>
     <div class="strct-tabs__panels"><ng-content /></div>
-  `, host: { class: 'strct-tabs' }, styles: [".strct-tabs{display:block}.strct-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--b2)}.strct-tabs__btn{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.strct-tabs__btn:hover{color:var(--t1)}.strct-tabs__btn--active{color:var(--acc);border-bottom-color:var(--acc)}.strct-tabs__btn:disabled{color:var(--t4);cursor:not-allowed}.strct-tabs__panels{padding-top:16px}\n"] }]
+  `, host: { class: 'strct-tabs' }, styles: [".strct-tabs{display:block}.strct-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--b2);overflow-x:auto;white-space:nowrap;scrollbar-width:none}.strct-tabs__btn{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.strct-tabs__btn:hover{color:var(--t1)}.strct-tabs__btn--active{color:var(--acc);border-bottom-color:var(--acc)}.strct-tabs__btn:disabled{color:var(--t4);cursor:not-allowed}.strct-tabs__panels{padding-top:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTab), { isSignal: true }] }] } });
 
 /**
@@ -1138,12 +1373,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctMenuPanel {
     host = inject(ElementRef);
+    /** Menu items to display. */
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Arbitrary payload passed to item actions. */
     data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Horizontal position in pixels. */
     x = input(0, ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+    /** Vertical position in pixels. */
     y = input(0, ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+    /** Render as a nested submenu panel. */
     submenu = input(false, { ...(ngDevMode ? { debugName: "submenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when an item is selected. */
     select = output();
+    /** Emitted when the menu requests closing. */
     close = output();
     /** ArrowLeft inside a submenu — asks the parent to close it. */
     back = output();
@@ -1291,7 +1533,7 @@ class StrctMenuPanel {
               type="button"
               class="strct-menu__item"
               [attr.data-idx]="i"
-              [class.strct-menu__item--danger]="item.danger"
+              [class.strct-menu__item--critical]="item.critical"
               [class.strct-menu__item--active]="i === activeIndex()"
               [disabled]="item.disabled"
               role="menuitem"
@@ -1301,13 +1543,23 @@ class StrctMenuPanel {
               (click)="onItemClick(item, i, $event)"
             >
               @if (item.icon) {
-                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
+                <strct-icon
+                  class="strct-menu__icon"
+                  [name]="item.icon"
+                  [size]="14"
+                  [strokeWidth]="1.3"
+                />
               } @else {
                 <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
               }
               <span class="strct-menu__label">{{ item.label }}</span>
               @if (item.children?.length) {
-                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+                <strct-icon
+                  class="strct-menu__arrow"
+                  name="chevronRight"
+                  [size]="12"
+                  [strokeWidth]="1.6"
+                />
               }
             </button>
             @if (openSubIndex() === i && item.children?.length) {
@@ -1326,7 +1578,7 @@ class StrctMenuPanel {
         }
       }
     </div>
-  `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--critical{color:var(--critical)}.strct-menu__item--critical:hover:not(:disabled),.strct-menu__item--critical.strct-menu__item--active:not(:disabled){background:var(--critical-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--critical .strct-menu__icon{color:var(--critical)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { 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: StrctMenuPanel, decorators: [{
             type: Component,
@@ -1341,7 +1593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
               type="button"
               class="strct-menu__item"
               [attr.data-idx]="i"
-              [class.strct-menu__item--danger]="item.danger"
+              [class.strct-menu__item--critical]="item.critical"
               [class.strct-menu__item--active]="i === activeIndex()"
               [disabled]="item.disabled"
               role="menuitem"
@@ -1351,13 +1603,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
               (click)="onItemClick(item, i, $event)"
             >
               @if (item.icon) {
-                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
+                <strct-icon
+                  class="strct-menu__icon"
+                  [name]="item.icon"
+                  [size]="14"
+                  [strokeWidth]="1.3"
+                />
               } @else {
                 <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
               }
               <span class="strct-menu__label">{{ item.label }}</span>
               @if (item.children?.length) {
-                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+                <strct-icon
+                  class="strct-menu__arrow"
+                  name="chevronRight"
+                  [size]="12"
+                  [strokeWidth]="1.6"
+                />
               }
             </button>
             @if (openSubIndex() === i && item.children?.length) {
@@ -1382,7 +1644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[style.left.px]': 'submenu() ? null : posX()',
                         '[style.top.px]': 'submenu() ? null : posY()',
                         '[style.zIndex]': 'submenu() ? null : 1100',
-                    }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
+                    }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--critical{color:var(--critical)}.strct-menu__item--critical:hover:not(:disabled),.strct-menu__item--critical.strct-menu__item--active:not(:disabled){background:var(--critical-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--critical .strct-menu__icon{color:var(--critical)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], close: [{ type: i0.Output, args: ["close"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 /**
  * Right-click (context) menu driven by a data array. Attach to any trigger; the
@@ -1395,8 +1657,11 @@ class StrctContextMenuTrigger {
     envInjector = inject(EnvironmentInjector);
     zone = inject(NgZone);
     doc = inject(DOCUMENT$1);
+    /** Menu items to display. */
     items = input.required({ ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), alias: 'strctContextMenu' });
+    /** Arbitrary payload passed to item actions. */
     data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'strctContextMenuData' });
+    /** Emitted when a menu item is selected. */
     menuSelect = output();
     ref = null;
     onClose = () => this.zone.run(() => this.closeMenu());
@@ -1466,17 +1731,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *  - **Data:** pass a `[node]` object that recurses over its `children` —
  *    used internally by `<strct-tree [nodes]>`.
  *
- *   <strct-tree-node label="Group" icon="layers" badge="ok" [(expanded)]="open">
+ *   <strct-tree-node label="Group" icon="layers" badge="success" [(expanded)]="open">
  *     <strct-tree-node label="Leaf" icon="vm" [active]="true" />
  *   </strct-tree-node>
  */
 class StrctTreeNode {
     /** Data-driven node; when set, label/icon/children come from it. */
     node = input(null, ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    /** Label text. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Icon name. */
     icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Status dot variant. */
     badge = input('none', ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Whether the item is active / selected. */
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is open (two-way). */
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     /** Per-node menu resolver (data mode); bubbles down the recursion. */
     nodeMenu = input(null, ...(ngDevMode ? [{ debugName: "nodeMenu" }] : /* istanbul ignore next */ []));
@@ -1534,17 +1804,25 @@ class StrctTreeNode {
       class="strct-tnode__row"
       [class.strct-tnode__row--active]="displayActive()"
       role="treeitem"
+      tabindex="0"
+      [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
       [strctContextMenu]="menuItems()"
       [strctContextMenuData]="node()"
       (menuSelect)="onMenuSelect($event)"
       (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="onActivate()"
     >
       @if (hasChildren()) {
         <span
           class="strct-tnode__chevron"
           [class.strct-tnode__chevron--open]="isOpen()"
+          role="button"
+          tabindex="0"
           (click)="$event.stopPropagation(); toggle()"
+          (keydown.enter)="$event.stopPropagation(); toggle()"
+          (keydown.space)="$event.stopPropagation(); toggle()"
         >
           <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
         </span>
@@ -1579,7 +1857,7 @@ class StrctTreeNode {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, decorators: [{
             type: Component,
@@ -1588,17 +1866,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       class="strct-tnode__row"
       [class.strct-tnode__row--active]="displayActive()"
       role="treeitem"
+      tabindex="0"
+      [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
       [strctContextMenu]="menuItems()"
       [strctContextMenuData]="node()"
       (menuSelect)="onMenuSelect($event)"
       (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="onActivate()"
     >
       @if (hasChildren()) {
         <span
           class="strct-tnode__chevron"
           [class.strct-tnode__chevron--open]="isOpen()"
+          role="button"
+          tabindex="0"
           (click)="$event.stopPropagation(); toggle()"
+          (keydown.enter)="$event.stopPropagation(); toggle()"
+          (keydown.space)="$event.stopPropagation(); toggle()"
         >
           <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
         </span>
@@ -1711,12 +1997,17 @@ function unlockBodyScroll(doc) {
 class StrctModal {
     elementRef = inject((ElementRef));
     doc = inject(DOCUMENT);
+    /** Whether the panel is open (two-way). */
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Dialog title. */
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Hide the footer slot. */
     hideFooter = input(false, { ...(ngDevMode ? { debugName: "hideFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Allow closing via backdrop click / Escape. */
-    dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the alert is dismissed. */
     closed = output();
     titleId = `strct-modal-${++modalCounter}`;
     /** Element that had focus before the dialog opened, restored on close. */
@@ -1755,11 +2046,11 @@ class StrctModal {
         this.closed.emit();
     }
     onBackdrop() {
-        if (this.dismissable())
+        if (this.dismissible())
             this.close();
     }
     onEscape() {
-        if (this.open() && this.dismissable())
+        if (this.open() && this.dismissible())
             this.close();
     }
     /** Wrap Tab focus within the dialog. */
@@ -1796,9 +2087,16 @@ class StrctModal {
         (items[0] ?? this.dialog())?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctModal, isStandalone: true, selector: "strct-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctModal, isStandalone: true, selector: "strct-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
     @if (open()) {
-      <div class="strct-modal__overlay" (click)="onBackdrop()">
+      <div
+        class="strct-modal__overlay"
+        role="button"
+        tabindex="0"
+        (click)="onBackdrop()"
+        (keydown.enter)="onBackdrop()"
+        (keydown.space)="onBackdrop()"
+      >
         <div
           #dialog
           class="strct-modal__dialog"
@@ -1825,13 +2123,20 @@ class StrctModal {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}.strct-modal__dialog{width:100%;max-width:460px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:360px}.strct-modal__dialog--lg{max-width:720px}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:18px;overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(360px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(720px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctModal, decorators: [{
             type: Component,
             args: [{ selector: 'strct-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StrctIcon], template: `
     @if (open()) {
-      <div class="strct-modal__overlay" (click)="onBackdrop()">
+      <div
+        class="strct-modal__overlay"
+        role="button"
+        tabindex="0"
+        (click)="onBackdrop()"
+        (keydown.enter)="onBackdrop()"
+        (keydown.space)="onBackdrop()"
+      >
         <div
           #dialog
           class="strct-modal__dialog"
@@ -1860,19 +2165,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     }
   `, host: {
                         '(document:keydown.escape)': 'onEscape()',
-                    }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}.strct-modal__dialog{width:100%;max-width:460px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:360px}.strct-modal__dialog--lg{max-width:720px}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:18px;overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+                    }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(360px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(720px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Click-to-open menu:
  *   <strct-dropdown align="end">
  *     <button strct-button strctDropdownTrigger>Actions</button>
  *     <strct-dropdown-item>Rename</strct-dropdown-item>
- *     <strct-dropdown-item danger>Delete</strct-dropdown-item>
+ *     <strct-dropdown-item critical>Delete</strct-dropdown-item>
  *   </strct-dropdown>
  */
 class StrctDropdown {
     host = inject((ElementRef));
+    /** Horizontal alignment of the menu. */
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle() {
@@ -1891,7 +2197,15 @@ class StrctDropdown {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
-    <div #trigger class="strct-dd__trigger" (click)="toggle()">
+    <div
+      #trigger
+      class="strct-dd__trigger"
+      role="button"
+      tabindex="0"
+      (click)="toggle()"
+      (keydown.enter)="toggle()"
+      (keydown.space)="toggle()"
+    >
       <ng-content select="[strctDropdownTrigger]" />
     </div>
     @if (open()) {
@@ -1900,17 +2214,28 @@ class StrctDropdown {
         [strctOverlay]="trigger"
         [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
         role="menu"
+        tabindex="0"
         (click)="close()"
+        (keydown.enter)="close()"
+        (keydown.space)="close()"
       >
         <ng-content />
       </div>
     }
-  `, isInline: true, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'strct-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctOverlay], template: `
-    <div #trigger class="strct-dd__trigger" (click)="toggle()">
+    <div
+      #trigger
+      class="strct-dd__trigger"
+      role="button"
+      tabindex="0"
+      (click)="toggle()"
+      (keydown.enter)="toggle()"
+      (keydown.space)="toggle()"
+    >
       <ng-content select="[strctDropdownTrigger]" />
     </div>
     @if (open()) {
@@ -1919,12 +2244,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         [strctOverlay]="trigger"
         [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
         role="menu"
+        tabindex="0"
         (click)="close()"
+        (keydown.enter)="close()"
+        (keydown.space)="close()"
       >
         <ng-content />
       </div>
     }
-  `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
+  `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -1934,20 +2262,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }] } });
 /** A selectable row inside a `<strct-dropdown>`. */
 class StrctDropdownItem {
-    danger = input(false, { ...(ngDevMode ? { debugName: "danger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Danger. */
+    critical = input(false, { ...(ngDevMode ? { debugName: "critical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, properties: { "class.strct-dd__item--danger": "danger()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover{background:var(--bg-3)}.strct-dd__item--danger{color:var(--crt)}.strct-dd__item--danger:hover{background:var(--crt-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, properties: { "class.strct-dd__item--critical": "critical()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover{background:var(--bg-3)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'strct-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
                         class: 'strct-dd__item',
                         role: 'menuitem',
-                        '[class.strct-dd__item--danger]': 'danger()',
+                        '[class.strct-dd__item--critical]': 'critical()',
                         '[attr.aria-disabled]': 'disabled() || null',
-                    }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover{background:var(--bg-3)}.strct-dd__item--danger{color:var(--crt)}.strct-dd__item--danger:hover{background:var(--crt-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"] }]
-        }], propDecorators: { danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover{background:var(--bg-3)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"] }]
+        }], propDecorators: { critical: [{ type: i0.Input, args: [{ isSignal: true, alias: "critical", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /** Thin separator between groups of menu items. */
 class StrctDropdownDivider {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1965,7 +2295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *     <div>Right-click here</div>
  *     <ng-container strctContextMenuItems>
  *       <strct-dropdown-item>Open</strct-dropdown-item>
- *       <strct-dropdown-item danger>Delete</strct-dropdown-item>
+ *       <strct-dropdown-item critical>Delete</strct-dropdown-item>
  *     </ng-container>
  *   </strct-context-menu>
  */
@@ -2006,10 +2336,13 @@ class StrctContextMenu {
       <div
         class="strct-ctx__menu"
         role="menu"
+        tabindex="0"
         [style.left.px]="x()"
         [style.top.px]="y()"
         (click)="close()"
         (contextmenu)="$event.preventDefault(); close()"
+        (keydown.enter)="close()"
+        (keydown.space)="close()"
       >
         <ng-content select="[strctContextMenuItems]" />
       </div>
@@ -2026,10 +2359,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       <div
         class="strct-ctx__menu"
         role="menu"
+        tabindex="0"
         [style.left.px]="x()"
         [style.top.px]="y()"
         (click)="close()"
         (contextmenu)="$event.preventDefault(); close()"
+        (keydown.enter)="close()"
+        (keydown.space)="close()"
       >
         <ng-content select="[strctContextMenuItems]" />
       </div>
@@ -2057,6 +2393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctSubmenu {
     host = inject(ElementRef);
+    /** Label text. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Optional leading icon; when omitted the icon column is still reserved so
      *  the label stays aligned with sibling items that do have icons. */
@@ -2092,8 +2429,15 @@ class StrctSubmenu {
         } @else {
           <span class="strct-submenu__icon-spacer" aria-hidden="true"></span>
         }
-        <span class="strct-submenu__label">{{ label() }}<ng-content select="[strctSubmenuLabel]" /></span>
-        <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+        <span class="strct-submenu__label"
+          >{{ label() }}<ng-content select="[strctSubmenuLabel]"
+        /></span>
+        <strct-icon
+          class="strct-submenu__arrow"
+          name="chevronRight"
+          [size]="12"
+          [strokeWidth]="1.6"
+        />
       </div>
       @if (open()) {
         <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
@@ -2101,7 +2445,7 @@ class StrctSubmenu {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\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: StrctSubmenu, decorators: [{
             type: Component,
@@ -2125,8 +2469,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         } @else {
           <span class="strct-submenu__icon-spacer" aria-hidden="true"></span>
         }
-        <span class="strct-submenu__label">{{ label() }}<ng-content select="[strctSubmenuLabel]" /></span>
-        <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+        <span class="strct-submenu__label"
+          >{{ label() }}<ng-content select="[strctSubmenuLabel]"
+        /></span>
+        <strct-icon
+          class="strct-submenu__arrow"
+          name="chevronRight"
+          [size]="12"
+          [strokeWidth]="1.6"
+        />
       </div>
       @if (open()) {
         <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
@@ -2139,6 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 /** A single wizard step. `label` names it in the step header. */
 class StrctStep {
+    /** Label text. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** When false, the wizard's Next / Finish is disabled on this step. */
     canAdvance = input(true, { ...(ngDevMode ? { debugName: "canAdvance" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2174,7 +2526,9 @@ class StrctWizard {
     submitting = input(false, { ...(ngDevMode ? { debugName: "submitting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Show a Cancel button on the left. */
     cancelable = input(false, { ...(ngDevMode ? { debugName: "cancelable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the user clicks Finish. */
     finished = output();
+    /** Emitted when the user clicks Cancel. */
     cancelled = output();
     /** Emits the new step index after a Back / Next move. */
     stepChange = output();
@@ -2229,7 +2583,9 @@ class StrctWizard {
           Cancel
         </button>
       }
-      <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">Back</button>
+      <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">
+        Back
+      </button>
       @if (isLast()) {
         <button
           strct-button
@@ -2240,7 +2596,9 @@ class StrctWizard {
           {{ submitting() ? 'Submitting…' : finishLabel() }}
         </button>
       } @else {
-        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">Next</button>
+        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">
+          Next
+        </button>
       }
     </div>
   `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-right:auto}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2272,7 +2630,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           Cancel
         </button>
       }
-      <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">Back</button>
+      <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">
+        Back
+      </button>
       @if (isLast()) {
         <button
           strct-button
@@ -2283,7 +2643,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           {{ submitting() ? 'Submitting…' : finishLabel() }}
         </button>
       } @else {
-        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">Next</button>
+        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">
+          Next
+        </button>
       }
     </div>
   `, host: { class: 'strct-wiz' }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-right:auto}\n"] }]
@@ -2296,6 +2658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-divider vertical />
  */
 class StrctDivider {
+    /** Render as a vertical rule. */
     vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctDivider, isStandalone: true, selector: "strct-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class.strct-divider--vertical": "vertical()", "attr.aria-orientation": "vertical() ? 'vertical' : 'horizontal'" }, classAttribute: "strct-divider" }, ngImport: i0, template: `<span class="strct-divider__label"><ng-content /></span>`, isInline: true, styles: [".strct-divider{display:flex;align-items:center;gap:12px;width:100%;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.strct-divider:before,.strct-divider:after{content:\"\";flex:1;height:1px;background:var(--b2)}.strct-divider__label:empty{display:none}.strct-divider:has(.strct-divider__label:empty){gap:0}.strct-divider--vertical{display:inline-block;width:1px;min-height:1em;height:auto;align-self:stretch;background:var(--b2);margin:0 2px}.strct-divider--vertical:before,.strct-divider--vertical:after{content:none}.strct-divider--vertical .strct-divider__label{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2321,6 +2684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** One crumb. Mark the final one `current`. */
 class StrctBreadcrumbItem {
+    /** Mark as the current page. */
     current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctBreadcrumbItem, isStandalone: true, selector: "strct-breadcrumb-item", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-bc__item--current": "current()", "attr.aria-current": "current() ? 'page' : null" }, classAttribute: "strct-bc__item" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-bc__item{display:inline-flex;align-items:center;color:var(--t2)}.strct-bc__item a{color:var(--t2);text-decoration:none}.strct-bc__item a:hover{color:var(--acc);text-decoration:none}.strct-bc__item--current{color:var(--t1);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2339,8 +2703,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-pagination [total]="240" [pageSize]="20" [(page)]="page" />
  */
 class StrctPagination {
+    /** Total number of items. */
     total = input.required(...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** Rows per page (0 disables paging). */
     pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Current page (two-way). */
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     pageCount = computed(() => Math.max(1, Math.ceil(this.total() / Math.max(1, this.pageSize()))), ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
     pages = computed(() => {
@@ -2403,7 +2770,7 @@ class StrctPagination {
     >
       <strct-icon name="chevronRight" [size]="13" [strokeWidth]="1.7" />
     </button>
-  `, isInline: true, styles: [".strct-pg{display:inline-flex;align-items:center;gap:4px}.strct-pg__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-family:var(--font);font-size:13px;cursor:pointer;color:var(--t1);background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-pg__btn:hover{background:var(--bg-3)}.strct-pg__btn--active{color:var(--acc);border-color:var(--acc30);background:var(--acc-m)}.strct-pg__btn:disabled{color:var(--t4);cursor:not-allowed;background:transparent}.strct-pg__nav{color:var(--t2)}.strct-pg__dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:30px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-pg{display:inline-flex;align-items:center;gap:4px}.strct-pg__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-family:var(--font);font-size:13px;cursor:pointer;color:var(--t1);background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-pg__btn:hover{background:var(--bg-3)}.strct-pg__btn--active{color:var(--acc);border-color:var(--acc30);background:var(--acc-m)}.strct-pg__btn:disabled{color:var(--t4);cursor:not-allowed;background:transparent}.strct-pg__nav{color:var(--t2)}.strct-pg__dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:30px;color:var(--t3)}\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: StrctPagination, decorators: [{
             type: Component,
@@ -2457,8 +2824,11 @@ let fieldCounter = 0;
  *   </strct-field>
  */
 class StrctField {
+    /** Label text. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Show a required marker on the label. */
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Helper text shown below the field. */
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     /** Error message (string or first-of array); falsy clears the error state. */
     error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
@@ -2510,7 +2880,10 @@ class StrctField {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctField, isStandalone: true, selector: "strct-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field--invalid": "!!errorText()" }, classAttribute: "strct-field" }, ngImport: i0, template: `
     @if (label()) {
       <label class="strct-field__label" [attr.for]="controlId() || null">
-        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+        {{ label() }}
+        @if (required()) {
+          <span class="strct-field__req" aria-hidden="true">*</span>
+        }
       </label>
     }
     <div class="strct-field__control"><ng-content /></div>
@@ -2521,14 +2894,17 @@ class StrctField {
     } @else if (hint()) {
       <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
     }
-  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, decorators: [{
             type: Component,
             args: [{ selector: 'strct-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     @if (label()) {
       <label class="strct-field__label" [attr.for]="controlId() || null">
-        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+        {{ label() }}
+        @if (required()) {
+          <span class="strct-field__req" aria-hidden="true">*</span>
+        }
       </label>
     }
     <div class="strct-field__control"><ng-content /></div>
@@ -2542,7 +2918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: {
                         class: 'strct-field',
                         '[class.strct-field--invalid]': '!!errorText()',
-                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"] }]
+                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--critical)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
 /**
@@ -2610,7 +2986,7 @@ class StrctCheckbox {
       </span>
       <span class="strct-cb__label"><ng-content /></span>
     </label>
-  `, isInline: true, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:#fff}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:#fff}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCheckbox, decorators: [{
             type: Component,
@@ -2746,7 +3122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** One option inside a `<strct-radio-group>`. */
 class StrctRadio {
+    /** Current value. */
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     group = inject(StrctRadioGroup);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2788,10 +3166,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-range [min]="0" [max]="100" [(ngModel)]="volume" showValue />
  */
 class StrctRange {
+    /** Minimum allowed value. */
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum allowed value or top of the value axis. */
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step increment. */
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Display the current numeric value. */
     showValue = input(false, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -2866,19 +3249,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 const LEVELS = [
-    { label: 'Weak', color: 'var(--crt)' },
-    { label: 'Weak', color: 'var(--crt)' },
-    { label: 'Fair', color: 'var(--wrn)' },
+    { label: 'Weak', color: 'var(--critical)' },
+    { label: 'Weak', color: 'var(--critical)' },
+    { label: 'Fair', color: 'var(--warning)' },
     { label: 'Good', color: 'var(--acc)' },
-    { label: 'Strong', color: 'var(--ok)' },
+    { label: 'Strong', color: 'var(--success)' },
 ];
 /**
  * Password input with a reveal toggle and an optional strength meter. CVA-compatible.
  *   <strct-password [(ngModel)]="pw" meter />
  */
 class StrctPassword {
+    /** Placeholder text when empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Show a strength meter. */
     meter = input(false, { ...(ngDevMode ? { debugName: "meter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     revealed = signal(false, ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
@@ -2956,7 +3342,7 @@ class StrctPassword {
         <span class="strct-pw__label" [style.color]="level().color">{{ level().label }}</span>
       </div>
     }
-  `, isInline: true, styles: [".strct-pw{display:block;width:100%;max-width:280px}.strct-pw__field{position:relative}.strct-pw__input{padding-right:38px}.strct-pw__toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-pw__toggle:hover{color:var(--acc);background:var(--bg-3)}.strct-pw__meter{display:flex;align-items:center;gap:9px;margin-top:7px}.strct-pw__bars{display:flex;gap:3px;flex:1}.strct-pw__bar{flex:1;height:3px;border-radius:2px;transition:background .2s ease}.strct-pw__label{font-size:11px;font-weight:600;min-width:42px;text-align:right}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-pw{display:block;width:100%;max-width:280px}.strct-pw__field{position:relative}.strct-pw__input{padding-right:38px}.strct-pw__toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-pw__toggle:hover{color:var(--acc);background:var(--bg-3)}.strct-pw__meter{display:flex;align-items:center;gap:9px;margin-top:7px}.strct-pw__bars{display:flex;gap:3px;flex:1}.strct-pw__bar{flex:1;height:3px;border-radius:2px;transition:background .2s ease}.strct-pw__label{font-size:11px;font-weight:600;min-width:42px;text-align:right}\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: StrctPassword, decorators: [{
             type: Component,
@@ -3005,8 +3391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-file [(ngModel)]="files" multiple accept="image/*" />
  */
 class StrctFile {
+    /** Multiple. */
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accept. */
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
     dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -3099,14 +3488,19 @@ class StrctFile {
           <li class="strct-file__file">
             <span class="strct-file__name">{{ file.name }}</span>
             <span class="strct-file__size">{{ humanSize(file.size) }}</span>
-            <button type="button" class="strct-file__remove" aria-label="Remove" (click)="remove(file)">
+            <button
+              type="button"
+              class="strct-file__remove"
+              aria-label="Remove"
+              (click)="remove(file)"
+            >
               <strct-icon name="close" [size]="12" />
             </button>
           </li>
         }
       </ul>
     }
-  `, isInline: true, styles: [".strct-file{display:block;width:100%;max-width:360px}.strct-file__zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;text-align:center;cursor:pointer;color:var(--t2);background:var(--bg-2);border:1px dashed var(--b3);border-radius:8px;transition:border-color .14s ease,background .14s ease,color .14s ease}.strct-file__zone:hover{border-color:var(--acc30);color:var(--t1)}.strct-file__zone strct-icon{color:var(--t3)}.strct-file__zone--drag{border-color:var(--acc);background:var(--acc-m);color:var(--t1)}.strct-file__zone--drag strct-icon{color:var(--acc)}.strct-file__zone--disabled{opacity:.5;cursor:not-allowed}.strct-file__prompt{font-size:13px}.strct-file__browse{color:var(--acc)}.strct-file__native{display:none}.strct-file__list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.strct-file__file{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13px;background:var(--bg-1);border:1px solid var(--b2);border-radius:6px}.strct-file__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}.strct-file__size{font-size:11px;color:var(--t3);font-family:var(--mono)}.strct-file__remove{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-file__remove:hover{color:var(--crt);background:var(--crt-bg)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-file{display:block;width:100%;max-width:360px}.strct-file__zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;text-align:center;cursor:pointer;color:var(--t2);background:var(--bg-2);border:1px dashed var(--b3);border-radius:8px;transition:border-color .14s ease,background .14s ease,color .14s ease}.strct-file__zone:hover{border-color:var(--acc30);color:var(--t1)}.strct-file__zone strct-icon{color:var(--t3)}.strct-file__zone--drag{border-color:var(--acc);background:var(--acc-m);color:var(--t1)}.strct-file__zone--drag strct-icon{color:var(--acc)}.strct-file__zone--disabled{opacity:.5;cursor:not-allowed}.strct-file__prompt{font-size:13px}.strct-file__browse{color:var(--acc)}.strct-file__native{display:none}.strct-file__list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.strct-file__file{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13px;background:var(--bg-1);border:1px solid var(--b2);border-radius:6px}.strct-file__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}.strct-file__size{font-size:11px;color:var(--t3);font-family:var(--mono)}.strct-file__remove{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-file__remove:hover{color:var(--critical);background:var(--critical-bg)}\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: StrctFile, decorators: [{
             type: Component,
@@ -3147,20 +3541,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           <li class="strct-file__file">
             <span class="strct-file__name">{{ file.name }}</span>
             <span class="strct-file__size">{{ humanSize(file.size) }}</span>
-            <button type="button" class="strct-file__remove" aria-label="Remove" (click)="remove(file)">
+            <button
+              type="button"
+              class="strct-file__remove"
+              aria-label="Remove"
+              (click)="remove(file)"
+            >
               <strct-icon name="close" [size]="12" />
             </button>
           </li>
         }
       </ul>
     }
-  `, host: { class: 'strct-file' }, styles: [".strct-file{display:block;width:100%;max-width:360px}.strct-file__zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;text-align:center;cursor:pointer;color:var(--t2);background:var(--bg-2);border:1px dashed var(--b3);border-radius:8px;transition:border-color .14s ease,background .14s ease,color .14s ease}.strct-file__zone:hover{border-color:var(--acc30);color:var(--t1)}.strct-file__zone strct-icon{color:var(--t3)}.strct-file__zone--drag{border-color:var(--acc);background:var(--acc-m);color:var(--t1)}.strct-file__zone--drag strct-icon{color:var(--acc)}.strct-file__zone--disabled{opacity:.5;cursor:not-allowed}.strct-file__prompt{font-size:13px}.strct-file__browse{color:var(--acc)}.strct-file__native{display:none}.strct-file__list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.strct-file__file{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13px;background:var(--bg-1);border:1px solid var(--b2);border-radius:6px}.strct-file__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}.strct-file__size{font-size:11px;color:var(--t3);font-family:var(--mono)}.strct-file__remove{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-file__remove:hover{color:var(--crt);background:var(--crt-bg)}\n"] }]
+  `, host: { class: 'strct-file' }, styles: [".strct-file{display:block;width:100%;max-width:360px}.strct-file__zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;text-align:center;cursor:pointer;color:var(--t2);background:var(--bg-2);border:1px dashed var(--b3);border-radius:8px;transition:border-color .14s ease,background .14s ease,color .14s ease}.strct-file__zone:hover{border-color:var(--acc30);color:var(--t1)}.strct-file__zone strct-icon{color:var(--t3)}.strct-file__zone--drag{border-color:var(--acc);background:var(--acc-m);color:var(--t1)}.strct-file__zone--drag strct-icon{color:var(--acc)}.strct-file__zone--disabled{opacity:.5;cursor:not-allowed}.strct-file__prompt{font-size:13px}.strct-file__browse{color:var(--acc)}.strct-file__native{display:none}.strct-file__list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.strct-file__file{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13px;background:var(--bg-1);border:1px solid var(--b2);border-radius:6px}.strct-file__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}.strct-file__size{font-size:11px;color:var(--t3);font-family:var(--mono)}.strct-file__remove{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-file__remove:hover{color:var(--critical);background:var(--critical-bg)}\n"] }]
         }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /** Star rating input. CVA value is the selected count (0–max). */
 class StrctRating {
+    /** Maximum allowed value or top of the value axis. */
     max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input(18, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Prevent user interaction. */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     hover = signal(0, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
@@ -3194,7 +3596,13 @@ class StrctRating {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctRating, isStandalone: true, selector: "strct-rating", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctRating), multi: true },
         ], ngImport: i0, template: `
-    <div class="strct-rating" role="slider" [attr.aria-valuemin]="0" [attr.aria-valuemax]="max()" [attr.aria-valuenow]="value()">
+    <div
+      class="strct-rating"
+      role="slider"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="value()"
+    >
       @for (star of stars(); track star) {
         <button
           type="button"
@@ -3218,14 +3626,20 @@ class StrctRating {
         </button>
       }
     </div>
-  `, isInline: true, styles: [".strct-rating{display:inline-flex;gap:3px}.strct-rating__star{display:inline-flex;padding:1px;border:0;background:transparent;cursor:pointer;color:var(--t4);transition:color .12s ease,transform .1s ease}.strct-rating__star:hover:not(:disabled){transform:scale(1.12)}.strct-rating__star--on{color:var(--wrn)}.strct-rating__star:disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-rating{display:inline-flex;gap:3px}.strct-rating__star{display:inline-flex;padding:1px;border:0;background:transparent;cursor:pointer;color:var(--t4);transition:color .12s ease,transform .1s ease}.strct-rating__star:hover:not(:disabled){transform:scale(1.12)}.strct-rating__star--on{color:var(--warning)}.strct-rating__star:disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRating, decorators: [{
             type: Component,
             args: [{ selector: 'strct-rating', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctRating), multi: true },
                     ], template: `
-    <div class="strct-rating" role="slider" [attr.aria-valuemin]="0" [attr.aria-valuemax]="max()" [attr.aria-valuenow]="value()">
+    <div
+      class="strct-rating"
+      role="slider"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="value()"
+    >
       @for (star of stars(); track star) {
         <button
           type="button"
@@ -3249,7 +3663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         </button>
       }
     </div>
-  `, styles: [".strct-rating{display:inline-flex;gap:3px}.strct-rating__star{display:inline-flex;padding:1px;border:0;background:transparent;cursor:pointer;color:var(--t4);transition:color .12s ease,transform .1s ease}.strct-rating__star:hover:not(:disabled){transform:scale(1.12)}.strct-rating__star--on{color:var(--wrn)}.strct-rating__star:disabled{cursor:default}\n"] }]
+  `, styles: [".strct-rating{display:inline-flex;gap:3px}.strct-rating__star{display:inline-flex;padding:1px;border:0;background:transparent;cursor:pointer;color:var(--t4);transition:color .12s ease,transform .1s ease}.strct-rating__star:hover:not(:disabled){transform:scale(1.12)}.strct-rating__star--on{color:var(--warning)}.strct-rating__star:disabled{cursor:default}\n"] }]
         }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 /**
@@ -3258,7 +3672,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-chips [(ngModel)]="labels" placeholder="Add a tag…" />
  */
 class StrctChips {
+    /** Placeholder text when empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Allow duplicate tags. */
     allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : /* istanbul ignore next */ []));
     value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
@@ -3308,7 +3724,14 @@ class StrctChips {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctChips, isStandalone: true, selector: "strct-chips", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctChips), multi: true },
         ], ngImport: i0, template: `
-    <div class="strct-chips" (click)="input.focus()">
+    <div
+      class="strct-chips"
+      role="button"
+      tabindex="0"
+      (click)="input.focus()"
+      (keydown.enter)="input.focus()"
+      (keydown.space)="input.focus()"
+    >
       @for (chip of value(); track chip) {
         <strct-tag status="accent" removable (removed)="remove(chip)">{{ chip }}</strct-tag>
       }
@@ -3331,7 +3754,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             args: [{ selector: 'strct-chips', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctTag], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctChips), multi: true },
                     ], template: `
-    <div class="strct-chips" (click)="input.focus()">
+    <div
+      class="strct-chips"
+      role="button"
+      tabindex="0"
+      (click)="input.focus()"
+      (keydown.enter)="input.focus()"
+      (keydown.space)="input.focus()"
+    >
       @for (chip of value(); track chip) {
         <strct-tag status="accent" removable (removed)="remove(chip)">{{ chip }}</strct-tag>
       }
@@ -3357,7 +3787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctInputOtp {
     host = inject((ElementRef));
+    /** Number of OTP boxes. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /** Mask each box as a password dot. */
     masked = input(false, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
     slots = signal([], ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -3479,9 +3911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const COLOR$2 = {
     accent: 'var(--acc)',
-    success: 'var(--ok)',
-    warning: 'var(--wrn)',
-    danger: 'var(--crt)',
+    success: 'var(--success)',
+    warning: 'var(--warning)',
+    critical: 'var(--critical)',
 };
 /**
  * Rotary dial input. Drag (up/down), arrow keys, Home/End or the wheel change
@@ -3490,12 +3922,19 @@ const COLOR$2 = {
  */
 class StrctKnob {
     elementRef = inject((ElementRef));
+    /** Minimum allowed value. */
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum allowed value or top of the value axis. */
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step increment. */
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input(96, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Stroke thickness in pixels. */
     thickness = input(9, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    /** Visual status color. */
     status = input('accent', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Label text. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -3561,7 +4000,8 @@ class StrctKnob {
             case 'End':
                 this.setValue(this.max());
                 break;
-            default: handled = false;
+            default:
+                handled = false;
         }
         if (handled) {
             event.preventDefault();
@@ -3616,23 +4056,36 @@ class StrctKnob {
         <g [attr.transform]="'rotate(135 ' + half() + ' ' + half() + ')'">
           <circle
             class="strct-knob__track"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="trackDash()"
           />
           <circle
             class="strct-knob__value"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke]="color()" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke]="color()"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="valueDash()"
           />
         </g>
         <g [attr.transform]="'rotate(' + pointerAngle() + ' ' + half() + ' ' + half() + ')'">
           <line
             class="strct-knob__pointer"
-            [attr.x1]="half()" [attr.y1]="half()"
-            [attr.x2]="half()" [attr.y2]="thickness() + 3"
-            [attr.stroke]="color()" stroke-width="2.5" stroke-linecap="round"
+            [attr.x1]="half()"
+            [attr.y1]="half()"
+            [attr.x2]="half()"
+            [attr.y2]="thickness() + 3"
+            [attr.stroke]="color()"
+            stroke-width="2.5"
+            stroke-linecap="round"
           />
         </g>
       </svg>
@@ -3666,23 +4119,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         <g [attr.transform]="'rotate(135 ' + half() + ' ' + half() + ')'">
           <circle
             class="strct-knob__track"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="trackDash()"
           />
           <circle
             class="strct-knob__value"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke]="color()" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke]="color()"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="valueDash()"
           />
         </g>
         <g [attr.transform]="'rotate(' + pointerAngle() + ' ' + half() + ' ' + half() + ')'">
           <line
             class="strct-knob__pointer"
-            [attr.x1]="half()" [attr.y1]="half()"
-            [attr.x2]="half()" [attr.y2]="thickness() + 3"
-            [attr.stroke]="color()" stroke-width="2.5" stroke-linecap="round"
+            [attr.x1]="half()"
+            [attr.y1]="half()"
+            [attr.x2]="half()"
+            [attr.y2]="thickness() + 3"
+            [attr.stroke]="color()"
+            stroke-width="2.5"
+            stroke-linecap="round"
           />
         </g>
       </svg>
@@ -3720,7 +4186,9 @@ const STRCT_MASKS = {
  *   <strct-input-mask mask="HH:HH:HH:HH:HH:HH" uppercase [(ngModel)]="mac" />
  */
 class StrctInputMask {
+    /** Mask pattern (9=digit, A=letter, H=hex, *=alnum). */
     mask = input.required(...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    /** Placeholder text when empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Upper-case entered letters (handy for hex MAC / WWPN). */
     uppercase = input(false, { ...(ngDevMode ? { debugName: "uppercase" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -3832,8 +4300,12 @@ let comboboxCounter = 0;
 class StrctCombobox {
     host = inject((ElementRef));
     listId = `strct-cbx-${++comboboxCounter}`;
+    /** Available options. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Placeholder text when empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Show a skeleton placeholder while options are loading. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -3940,7 +4412,7 @@ class StrctCombobox {
         this.isDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCombobox, isStandalone: true, selector: "strct-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-cbx" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCombobox, isStandalone: true, selector: "strct-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-cbx" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctCombobox), multi: true },
         ], ngImport: i0, template: `
     <div #field class="strct-cbx__field">
@@ -3952,7 +4424,9 @@ class StrctCombobox {
         autocomplete="off"
         [attr.aria-expanded]="open()"
         [attr.aria-controls]="listId"
-        [attr.aria-activedescendant]="open() && filtered().length ? listId + '-' + activeIndex() : null"
+        [attr.aria-activedescendant]="
+          open() && filtered().length ? listId + '-' + activeIndex() : null
+        "
         [placeholder]="placeholder()"
         [value]="query()"
         [disabled]="isDisabled()"
@@ -3972,25 +4446,31 @@ class StrctCombobox {
         strctOverlayPlacement="bottom-start"
         [strctOverlayMatchWidth]="true"
       >
-        @for (opt of filtered(); track opt.value; let i = $index) {
-          <div
-            class="strct-cbx__opt"
-            [id]="listId + '-' + i"
-            [class.strct-cbx__opt--active]="opt.value === value()"
-            [class.strct-cbx__opt--highlight]="i === activeIndex()"
-            role="option"
-            [attr.aria-selected]="opt.value === value()"
-            (mousedown)="select(opt, $event)"
-            (mousemove)="activeIndex.set(i)"
-          >
-            {{ opt.label }}
+        @if (loading()) {
+          <div class="strct-cbx__skeleton">
+            <div class="strct-cbx__skeleton-block"></div>
           </div>
-        } @empty {
-          <div class="strct-cbx__empty">No matches</div>
+        } @else {
+          @for (opt of filtered(); track opt.value; let i = $index) {
+            <div
+              class="strct-cbx__opt"
+              [id]="listId + '-' + i"
+              [class.strct-cbx__opt--active]="opt.value === value()"
+              [class.strct-cbx__opt--highlight]="i === activeIndex()"
+              role="option"
+              [attr.aria-selected]="opt.value === value()"
+              (mousedown)="select(opt, $event)"
+              (mousemove)="activeIndex.set(i)"
+            >
+              {{ opt.label }}
+            </div>
+          } @empty {
+            <div class="strct-cbx__empty">No matches</div>
+          }
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCombobox, decorators: [{
             type: Component,
@@ -4006,7 +4486,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         autocomplete="off"
         [attr.aria-expanded]="open()"
         [attr.aria-controls]="listId"
-        [attr.aria-activedescendant]="open() && filtered().length ? listId + '-' + activeIndex() : null"
+        [attr.aria-activedescendant]="
+          open() && filtered().length ? listId + '-' + activeIndex() : null
+        "
         [placeholder]="placeholder()"
         [value]="query()"
         [disabled]="isDisabled()"
@@ -4026,33 +4508,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         strctOverlayPlacement="bottom-start"
         [strctOverlayMatchWidth]="true"
       >
-        @for (opt of filtered(); track opt.value; let i = $index) {
-          <div
-            class="strct-cbx__opt"
-            [id]="listId + '-' + i"
-            [class.strct-cbx__opt--active]="opt.value === value()"
-            [class.strct-cbx__opt--highlight]="i === activeIndex()"
-            role="option"
-            [attr.aria-selected]="opt.value === value()"
-            (mousedown)="select(opt, $event)"
-            (mousemove)="activeIndex.set(i)"
-          >
-            {{ opt.label }}
+        @if (loading()) {
+          <div class="strct-cbx__skeleton">
+            <div class="strct-cbx__skeleton-block"></div>
           </div>
-        } @empty {
-          <div class="strct-cbx__empty">No matches</div>
+        } @else {
+          @for (opt of filtered(); track opt.value; let i = $index) {
+            <div
+              class="strct-cbx__opt"
+              [id]="listId + '-' + i"
+              [class.strct-cbx__opt--active]="opt.value === value()"
+              [class.strct-cbx__opt--highlight]="i === activeIndex()"
+              role="option"
+              [attr.aria-selected]="opt.value === value()"
+              (mousedown)="select(opt, $event)"
+              (mousemove)="activeIndex.set(i)"
+            >
+              {{ opt.label }}
+            </div>
+          } @empty {
+            <div class="strct-cbx__empty">No matches</div>
+          }
         }
       </div>
     }
-  `, host: { class: 'strct-cbx' }, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], onDocClick: [{
+  `, host: { class: 'strct-cbx' }, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
 
 const MONTHS = [
-    'January', 'February', 'March', 'April', 'May', 'June',
-    'July', 'August', 'September', 'October', 'November', 'December',
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
 ];
 const DOW = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const pad = (n) => String(n).padStart(2, '0');
@@ -4063,6 +4561,7 @@ const toIso = (y, m, d) => `${y}-${pad(m + 1)}-${pad(d)}`;
  */
 class StrctDatepicker {
     host = inject((ElementRef));
+    /** Placeholder text when empty. */
     placeholder = input('Select a date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     dow = DOW;
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -4236,13 +4735,28 @@ class StrctDatepicker {
     </div>
 
     @if (open()) {
-      <div class="strct-dp__panel" role="dialog" [strctOverlay]="field" strctOverlayPlacement="bottom-start">
+      <div
+        class="strct-dp__panel"
+        role="dialog"
+        [strctOverlay]="field"
+        strctOverlayPlacement="bottom-start"
+      >
         <div class="strct-dp__head">
-          <button type="button" class="strct-dp__nav" aria-label="Previous month" (click)="shiftMonth(-1)">
+          <button
+            type="button"
+            class="strct-dp__nav"
+            aria-label="Previous month"
+            (click)="shiftMonth(-1)"
+          >
             <strct-icon name="chevronLeft" [size]="14" [strokeWidth]="1.7" />
           </button>
           <span class="strct-dp__title">{{ monthLabel() }}</span>
-          <button type="button" class="strct-dp__nav" aria-label="Next month" (click)="shiftMonth(1)">
+          <button
+            type="button"
+            class="strct-dp__nav"
+            aria-label="Next month"
+            (click)="shiftMonth(1)"
+          >
             <strct-icon name="chevronRight" [size]="14" [strokeWidth]="1.7" />
           </button>
         </div>
@@ -4268,7 +4782,7 @@ class StrctDatepicker {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-dp{position:relative;display:inline-block;width:100%;max-width:240px}.strct-dp__field{position:relative}.strct-dp__input{padding-right:36px;cursor:pointer}.strct-dp__icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__icon:hover{color:var(--acc);background:var(--bg-3)}.strct-dp__panel{position:absolute;top:calc(100% + 5px);left:0;z-index:250;width:250px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.strct-dp__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-dp__nav{display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__nav:hover{color:var(--t1);background:var(--bg-3)}.strct-dp__dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.strct-dp__dow span{text-align:center;font-size:10px;font-weight:600;color:var(--t3);padding:4px 0}.strct-dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.strct-dp__day{aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;cursor:pointer;font-family:var(--font);font-size:12px;color:var(--t1)}.strct-dp__day:hover{background:var(--bg-3)}.strct-dp__day--muted{color:var(--t3)}.strct-dp__day--today{box-shadow:inset 0 0 0 1px var(--acc30)}.strct-dp__day--focused{box-shadow:inset 0 0 0 2px var(--acc)}.strct-dp__day--selected{background:var(--acc);color:#fff}.strct-dp__day--selected:hover{background:var(--acc)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dp{position:relative;display:inline-block;width:100%;max-width:240px}.strct-dp__field{position:relative}.strct-dp__input{padding-right:36px;cursor:pointer}.strct-dp__icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__icon:hover{color:var(--acc);background:var(--bg-3)}.strct-dp__panel{position:absolute;top:calc(100% + 5px);left:0;z-index:250;width:250px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.strct-dp__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-dp__nav{display:inline-flex;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer}.strct-dp__nav:hover{color:var(--t1);background:var(--bg-3)}.strct-dp__dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.strct-dp__dow span{text-align:center;font-size:10px;font-weight:600;color:var(--t3);padding:4px 0}.strct-dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.strct-dp__day{aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;cursor:pointer;font-family:var(--font);font-size:12px;color:var(--t1)}.strct-dp__day:hover{background:var(--bg-3)}.strct-dp__day--muted{color:var(--t3)}.strct-dp__day--today{box-shadow:inset 0 0 0 1px var(--acc30)}.strct-dp__day--focused{box-shadow:inset 0 0 0 2px var(--acc)}.strct-dp__day--selected{background:var(--acc);color:#fff}.strct-dp__day--selected:hover{background:var(--acc)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDatepicker, decorators: [{
             type: Component,
@@ -4298,13 +4812,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     </div>
 
     @if (open()) {
-      <div class="strct-dp__panel" role="dialog" [strctOverlay]="field" strctOverlayPlacement="bottom-start">
+      <div
+        class="strct-dp__panel"
+        role="dialog"
+        [strctOverlay]="field"
+        strctOverlayPlacement="bottom-start"
+      >
         <div class="strct-dp__head">
-          <button type="button" class="strct-dp__nav" aria-label="Previous month" (click)="shiftMonth(-1)">
+          <button
+            type="button"
+            class="strct-dp__nav"
+            aria-label="Previous month"
+            (click)="shiftMonth(-1)"
+          >
             <strct-icon name="chevronLeft" [size]="14" [strokeWidth]="1.7" />
           </button>
           <span class="strct-dp__title">{{ monthLabel() }}</span>
-          <button type="button" class="strct-dp__nav" aria-label="Next month" (click)="shiftMonth(1)">
+          <button
+            type="button"
+            class="strct-dp__nav"
+            aria-label="Next month"
+            (click)="shiftMonth(1)"
+          >
             <strct-icon name="chevronRight" [size]="14" [strokeWidth]="1.7" />
           </button>
         </div>
@@ -4340,8 +4869,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }] } });
 
 const DEFAULT_SWATCHES = [
-    '#7b9ec8', '#5a7ea3', '#7da87e', '#5e8a60', '#bfae6a', '#9a8a3e',
-    '#b87872', '#a0635c', '#96724e', '#c49a6c', '#8d7bc8', '#5a5a64',
+    '#7b9ec8',
+    '#5a7ea3',
+    '#7da87e',
+    '#5e8a60',
+    '#bfae6a',
+    '#9a8a3e',
+    '#b87872',
+    '#a0635c',
+    '#96724e',
+    '#c49a6c',
+    '#8d7bc8',
+    '#5a5a64',
 ];
 const HEX = /^#([0-9a-f]{6})$/i;
 /**
@@ -4350,6 +4889,7 @@ const HEX = /^#([0-9a-f]{6})$/i;
  */
 class StrctColorPicker {
     host = inject((ElementRef));
+    /** Custom palette swatches. */
     swatches = input(DEFAULT_SWATCHES, ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
@@ -4420,7 +4960,12 @@ class StrctColorPicker {
     </button>
 
     @if (open()) {
-      <div class="strct-cp__panel" role="dialog" [strctOverlay]="trigger" strctOverlayPlacement="bottom-start">
+      <div
+        class="strct-cp__panel"
+        role="dialog"
+        [strctOverlay]="trigger"
+        strctOverlayPlacement="bottom-start"
+      >
         <div class="strct-cp__grid">
           @for (color of swatches(); track color) {
             <button
@@ -4462,7 +5007,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     </button>
 
     @if (open()) {
-      <div class="strct-cp__panel" role="dialog" [strctOverlay]="trigger" strctOverlayPlacement="bottom-start">
+      <div
+        class="strct-cp__panel"
+        role="dialog"
+        [strctOverlay]="trigger"
+        strctOverlayPlacement="bottom-start"
+      >
         <div class="strct-cp__grid">
           @for (color of swatches(); track color) {
             <button
@@ -4502,6 +5052,7 @@ class StrctCascadeHost {
  */
 class StrctCascadeNode {
     host = inject(StrctCascadeHost);
+    /** Option. */
     option = input.required(...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     hasChildren = computed(() => !!this.option().children?.length, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
@@ -4520,9 +5071,12 @@ class StrctCascadeNode {
       class="strct-csn"
       [class.strct-csn--selected]="isLeafSelected()"
       role="menuitem"
+      tabindex="0"
       (mouseenter)="hasChildren() && open.set(true)"
       (mouseleave)="open.set(false)"
       (click)="onClick($event)"
+      (keydown.enter)="onClick($event)"
+      (keydown.space)="onClick($event)"
     >
       <span class="strct-csn__label">{{ option().label }}</span>
       @if (hasChildren()) {
@@ -4536,7 +5090,7 @@ class StrctCascadeNode {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".strct-csn{position:relative;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-csn:hover{background:var(--bg-3)}.strct-csn--selected{color:var(--acc);background:var(--acc-m)}.strct-csn__label{flex:1;white-space:nowrap}.strct-csn__arrow{color:var(--t3)}.strct-csn__flyout{position:absolute;top:-5px;left:100%;z-index:1;min-width:160px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => StrctCascadeNode), selector: "strct-cascade-node", inputs: ["option"] }, { kind: "component", type: i0.forwardRef(() => StrctIcon), selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-csn{position:relative;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-csn:hover{background:var(--bg-3)}.strct-csn--selected{color:var(--acc);background:var(--acc-m)}.strct-csn__label{flex:1;white-space:nowrap}.strct-csn__arrow{color:var(--t3)}.strct-csn__flyout{position:absolute;top:-5px;left:100%;z-index:1;min-width:160px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => StrctCascadeNode), selector: "strct-cascade-node", inputs: ["option"] }, { kind: "component", type: i0.forwardRef(() => 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: StrctCascadeNode, decorators: [{
             type: Component,
@@ -4545,9 +5099,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       class="strct-csn"
       [class.strct-csn--selected]="isLeafSelected()"
       role="menuitem"
+      tabindex="0"
       (mouseenter)="hasChildren() && open.set(true)"
       (mouseleave)="open.set(false)"
       (click)="onClick($event)"
+      (keydown.enter)="onClick($event)"
+      (keydown.space)="onClick($event)"
     >
       <span class="strct-csn__label">{{ option().label }}</span>
       @if (hasChildren()) {
@@ -4570,7 +5127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctCascadeSelect extends StrctCascadeHost {
     elementRef = inject((ElementRef));
+    /** Available options. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Placeholder text when empty. */
     placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -4642,13 +5201,18 @@ class StrctCascadeSelect extends StrctCascadeHost {
       <strct-icon class="strct-cs__caret" name="chevronDown" [size]="14" />
     </button>
     @if (open()) {
-      <div class="strct-cs__panel" role="menu" [strctOverlay]="trigger" strctOverlayPlacement="bottom-start">
+      <div
+        class="strct-cs__panel"
+        role="menu"
+        [strctOverlay]="trigger"
+        strctOverlayPlacement="bottom-start"
+      >
         @for (opt of options(); track opt) {
           <strct-cascade-node [option]="opt" />
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-cs{position:relative;display:inline-block;width:100%;max-width:280px}.strct-cs__trigger{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;cursor:pointer;font-family:var(--font);font-size:13px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2);text-align:left}.strct-cs__trigger:hover{border-color:var(--b3)}.strct-cs__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cs__value--empty,.strct-cs__caret{color:var(--t3)}.strct-cs__panel{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}\n"], dependencies: [{ kind: "component", type: StrctCascadeNode, selector: "strct-cascade-node", inputs: ["option"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cs{position:relative;display:inline-block;width:100%;max-width:280px}.strct-cs__trigger{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;cursor:pointer;font-family:var(--font);font-size:13px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2);text-align:left}.strct-cs__trigger:hover{border-color:var(--b3)}.strct-cs__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cs__value--empty,.strct-cs__caret{color:var(--t3)}.strct-cs__panel{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}\n"], dependencies: [{ kind: "component", type: StrctCascadeNode, selector: "strct-cascade-node", inputs: ["option"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCascadeSelect, decorators: [{
             type: Component,
@@ -4670,7 +5234,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       <strct-icon class="strct-cs__caret" name="chevronDown" [size]="14" />
     </button>
     @if (open()) {
-      <div class="strct-cs__panel" role="menu" [strctOverlay]="trigger" strctOverlayPlacement="bottom-start">
+      <div
+        class="strct-cs__panel"
+        role="menu"
+        [strctOverlay]="trigger"
+        strctOverlayPlacement="bottom-start"
+      >
         @for (opt of options(); track opt) {
           <strct-cascade-node [option]="opt" />
         }
@@ -4690,10 +5259,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * is the directive value; the row, value and column are the template context:
  *
  *   <ng-template strctCell="status" let-row let-value="value">
- *     <strct-badge [status]="row['ok'] ? 'success' : 'danger'">{{ value }}</strct-badge>
+ *     <strct-badge [status]="row['success'] ? 'success' : 'critical'">{{ value }}</strct-badge>
  *   </ng-template>
  */
 class StrctCellDef {
+    /** Key. */
     key = input.required({ ...(ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {}), alias: 'strctCell' });
     template = inject(TemplateRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -4709,11 +5279,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   <strct-table [columns]="cols" [rows]="data" hover />
  */
 class StrctTable {
+    /** Column definitions. */
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Data rows. */
     rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Enable zebra-striping. */
     striped = input(false, { ...(ngDevMode ? { debugName: "striped" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Highlight rows on hover. */
     hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Message shown when there are no rows. */
     emptyText = input('No data', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Show skeleton rows while data is loading. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     cellDefs = contentChildren(StrctCellDef, ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
     cellMap = computed(() => {
         const m = new Map();
@@ -4725,39 +5302,59 @@ class StrctTable {
         return this.cellMap().get(key) ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTable, isStandalone: true, selector: "strct-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-table-host--striped": "striped()", "class.strct-table-host--hover": "hover()" }, classAttribute: "strct-table-host" }, queries: [{ propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTable, isStandalone: true, selector: "strct-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", 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 } }, host: { properties: { "class.strct-table-host--striped": "striped()", "class.strct-table-host--hover": "hover()" }, classAttribute: "strct-table-host" }, queries: [{ propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
     <table class="strct-table">
       <thead>
         <tr>
           @for (col of columns(); track col.key) {
-            <th [style.text-align]="col.align ?? 'start'" [style.width]="col.width">{{ col.label }}</th>
+            <th [style.text-align]="col.align ?? 'start'" [style.width]="col.width">
+              {{ col.label }}
+            </th>
           }
         </tr>
       </thead>
       <tbody>
-        @for (row of rows(); track $index) {
-          <tr>
-            @for (col of columns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">
-                @if (cellTemplate(col.key); as tpl) {
-                  <ng-container
-                    [ngTemplateOutlet]="tpl"
-                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
-                  />
-                } @else {
-                  {{ row[col.key] }}
-                }
+        @if (loading()) {
+          @for (_ of [1, 2, 3]; track $index) {
+            <tr class="strct-table__skeleton-row">
+              @for (col of columns(); track col.key) {
+                <td [style.text-align]="col.align ?? 'start'">
+                  <div class="strct-table__skeleton-block"></div>
+                </td>
+              }
+            </tr>
+          }
+        } @else {
+          @for (row of rows(); track $index) {
+            <tr>
+              @for (col of columns(); track col.key) {
+                <td [style.text-align]="col.align ?? 'start'">
+                  @if (cellTemplate(col.key); as tpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="tpl"
+                      [ngTemplateOutletContext]="{
+                        $implicit: row,
+                        value: row[col.key],
+                        column: col,
+                      }"
+                    />
+                  } @else {
+                    {{ row[col.key] }}
+                  }
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr>
+              <td class="strct-table__empty" [attr.colspan]="columns().length">
+                {{ emptyText() }}
               </td>
-            }
-          </tr>
-        } @empty {
-          <tr>
-            <td class="strct-table__empty" [attr.colspan]="columns().length">{{ emptyText() }}</td>
-          </tr>
+            </tr>
+          }
         }
       </tbody>
     </table>
-  `, isInline: true, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-table__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-table__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTable, decorators: [{
             type: Component,
@@ -4766,30 +5363,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       <thead>
         <tr>
           @for (col of columns(); track col.key) {
-            <th [style.text-align]="col.align ?? 'start'" [style.width]="col.width">{{ col.label }}</th>
+            <th [style.text-align]="col.align ?? 'start'" [style.width]="col.width">
+              {{ col.label }}
+            </th>
           }
         </tr>
       </thead>
       <tbody>
-        @for (row of rows(); track $index) {
-          <tr>
-            @for (col of columns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">
-                @if (cellTemplate(col.key); as tpl) {
-                  <ng-container
-                    [ngTemplateOutlet]="tpl"
-                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
-                  />
-                } @else {
-                  {{ row[col.key] }}
-                }
+        @if (loading()) {
+          @for (_ of [1, 2, 3]; track $index) {
+            <tr class="strct-table__skeleton-row">
+              @for (col of columns(); track col.key) {
+                <td [style.text-align]="col.align ?? 'start'">
+                  <div class="strct-table__skeleton-block"></div>
+                </td>
+              }
+            </tr>
+          }
+        } @else {
+          @for (row of rows(); track $index) {
+            <tr>
+              @for (col of columns(); track col.key) {
+                <td [style.text-align]="col.align ?? 'start'">
+                  @if (cellTemplate(col.key); as tpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="tpl"
+                      [ngTemplateOutletContext]="{
+                        $implicit: row,
+                        value: row[col.key],
+                        column: col,
+                      }"
+                    />
+                  } @else {
+                    {{ row[col.key] }}
+                  }
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr>
+              <td class="strct-table__empty" [attr.colspan]="columns().length">
+                {{ emptyText() }}
               </td>
-            }
-          </tr>
-        } @empty {
-          <tr>
-            <td class="strct-table__empty" [attr.colspan]="columns().length">{{ emptyText() }}</td>
-          </tr>
+            </tr>
+          }
         }
       </tbody>
     </table>
@@ -4797,8 +5414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'strct-table-host',
                         '[class.strct-table-host--striped]': 'striped()',
                         '[class.strct-table-host--hover]': 'hover()',
-                    }, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
+                    }, styles: [".strct-table-host{display:block;overflow-x:auto}.strct-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-table th,.strct-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2)}.strct-table td{color:var(--t1)}.strct-table tbody tr:last-child td{border-bottom:0}.strct-table-host--striped tbody tr:nth-child(2n) td{background:var(--bg-2)}.strct-table-host--hover tbody tr:hover td{background:var(--acc-s)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-table__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-table__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-table__empty{text-align:center;color:var(--t3);padding:22px}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
 
 /**
  * Marks the expandable-row detail template. The row is the template's implicit
@@ -4831,23 +5448,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   </strct-datagrid>
  */
 class StrctDatagrid {
+    /** Column definitions. */
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Data rows. */
     rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Rows per page (0 disables paging). */
     pageSize = input(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Enable row selection. */
     selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Expand a row in place to reveal its detail template below it. */
     expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Collapse the grid to a single column and open a side detail pane for the
      *  clicked row (distinct from {@link expandable}). */
     detailPane = input(false, { ...(ngDevMode ? { debugName: "detailPane" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Compact density mode. */
     compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Message shown when there are no rows. */
     emptyText = input('No data', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Show skeleton rows while data is loading. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Stable row identity (property key or function). Set this for live-refreshing
      * data so selection, expansion and the active detail row survive re-fetches
      * that replace the row objects. Defaults to object identity.
      */
     rowId = input(null, ...(ngDevMode ? [{ debugName: "rowId" }] : /* istanbul ignore next */ []));
+    /** Emitted when the selection changes. */
     selectionChange = output();
     detailDef = contentChild(StrctRowDetailDef, ...(ngDevMode ? [{ debugName: "detailDef" }] : /* istanbul ignore next */ []));
     actionBarDef = contentChild(StrctDatagridActionBar, ...(ngDevMode ? [{ debugName: "actionBarDef" }] : /* istanbul ignore next */ []));
@@ -4972,13 +5598,23 @@ class StrctDatagrid {
     toggleExpand(row) {
         const id = this.idOf(row);
         const next = new Set(this.expandedRows());
-        next.has(id) ? next.delete(id) : next.add(id);
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
         this.expandedRows.set(next);
     }
     toggleRow(row) {
         const id = this.idOf(row);
         const next = new Set(this.selected());
-        next.has(id) ? next.delete(id) : next.add(id);
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
         this.commitSelection(next);
     }
     toggleAll() {
@@ -5007,7 +5643,7 @@ 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 }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.strct-dg-host--compact": "compact()" }, 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 }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.strct-dg-host--compact": "compact()" }, 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>
     }
@@ -5015,135 +5651,175 @@ class StrctDatagrid {
     @if (selectable() && selectedCount() > 0) {
       <div class="strct-dg__actionbar">
         <span class="strct-dg__actionbar-count">{{ selectedCount() }} selected</span>
-        <button type="button" class="strct-dg__actionbar-clear" (click)="clearSelection()">Clear</button>
-        <span class="strct-dg__actionbar-actions"><ng-content select="[strctDatagridActions]" /></span>
+        <button type="button" class="strct-dg__actionbar-clear" (click)="clearSelection()">
+          Clear
+        </button>
+        <span class="strct-dg__actionbar-actions"
+          ><ng-content select="[strctDatagridActions]"
+        /></span>
       </div>
     }
 
     <div class="strct-dg__layout" [class.strct-dg__layout--paned]="paneOpen()">
-    <table class="strct-dg">
-      <thead>
-        <tr>
-          @if (canDetail()) {
-            <th class="strct-dg__expandcol"></th>
-          }
-          @if (canExpand()) {
-            <th class="strct-dg__expandcol"></th>
-          }
-          @if (selectable()) {
-            <th class="strct-dg__sel">
-              <input
-                type="checkbox"
-                aria-label="Select all rows on this page"
-                [checked]="allPageSelected()"
-                [indeterminate]="somePageSelected()"
-                (change)="toggleAll()"
-              />
-            </th>
-          }
-          @for (col of visibleColumns(); track col.key) {
-            <th
-              [style.text-align]="col.align ?? 'start'"
-              [style.width]="col.width"
-              [class.strct-dg__th--sortable]="col.sortable"
-              [attr.tabindex]="col.sortable ? 0 : null"
-              [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
-              (click)="col.sortable && sortBy(col.key)"
-              (keydown.enter)="col.sortable && sortBy(col.key)"
-              (keydown.space)="col.sortable && onHeaderSpace($event, col.key)"
-            >
-              <span class="strct-dg__hd">
-                {{ col.label }}
-                @if (col.sortable) {
-                  <strct-icon class="strct-dg__sorticon" [name]="sortIcon(col.key)" [size]="13" />
-                }
-              </span>
-            </th>
-          }
-        </tr>
-      </thead>
-      <tbody>
-        @for (row of paged(); 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">
-                <button
-                  type="button"
-                  class="strct-dg__detailbtn"
-                  [class.strct-dg__detailbtn--active]="row === activeRow()"
-                  [attr.aria-expanded]="row === activeRow()"
-                  aria-label="Open detail"
-                  (click)="openDetail(row)"
+      <div class="strct-dg__scroll">
+        <table class="strct-dg">
+          <thead>
+            <tr>
+              @if (canDetail()) {
+                <th class="strct-dg__expandcol"></th>
+              }
+              @if (canExpand()) {
+                <th class="strct-dg__expandcol"></th>
+              }
+              @if (selectable()) {
+                <th class="strct-dg__sel">
+                  <input
+                    type="checkbox"
+                    aria-label="Select all rows on this page"
+                    [checked]="allPageSelected()"
+                    [indeterminate]="somePageSelected()"
+                    (change)="toggleAll()"
+                  />
+                </th>
+              }
+              @for (col of visibleColumns(); track col.key) {
+                <th
+                  [style.text-align]="col.align ?? 'start'"
+                  [style.width]="col.width"
+                  [class.strct-dg__th--sortable]="col.sortable"
+                  [attr.tabindex]="col.sortable ? 0 : null"
+                  [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
+                  (click)="col.sortable && sortBy(col.key)"
+                  (keydown.enter)="col.sortable && sortBy(col.key)"
+                  (keydown.space)="col.sortable && onHeaderSpace($event, col.key)"
                 >
-                  <strct-icon name="chevronDoubleRight" [size]="13" [strokeWidth]="1.6" />
-                </button>
-              </td>
-            }
-            @if (canExpand()) {
-              <td class="strct-dg__expandcell">
-                <button
-                  type="button"
-                  class="strct-dg__expandbtn"
-                  [class.strct-dg__expandbtn--open]="isExpanded(row)"
-                  [attr.aria-expanded]="isExpanded(row)"
-                  aria-label="Toggle detail"
-                  (click)="toggleExpand(row)"
+                  <span class="strct-dg__hd">
+                    {{ col.label }}
+                    @if (col.sortable) {
+                      <strct-icon
+                        class="strct-dg__sorticon"
+                        [name]="sortIcon(col.key)"
+                        [size]="13"
+                      />
+                    }
+                  </span>
+                </th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @if (loading()) {
+              @for (_ of [1, 2, 3, 4, 5]; track $index) {
+                <tr class="strct-dg__skeleton-row">
+                  @if (canDetail()) {
+                    <td class="strct-dg__expandcell"></td>
+                  }
+                  @if (canExpand()) {
+                    <td class="strct-dg__expandcell"></td>
+                  }
+                  @if (selectable()) {
+                    <td class="strct-dg__sel"></td>
+                  }
+                  @for (col of visibleColumns(); track col.key) {
+                    <td [style.text-align]="col.align ?? 'start'">
+                      <div class="strct-dg__skeleton-block"></div>
+                    </td>
+                  }
+                </tr>
+              }
+            } @else {
+              @for (row of paged(); track rowKey(row)) {
+                <tr
+                  [class.strct-dg__row--selected]="isSelected(row)"
+                  [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
                 >
-                  <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                </button>
-              </td>
-            }
-            @if (selectable()) {
-              <td class="strct-dg__sel">
-                <input
-                  type="checkbox"
-                  aria-label="Select row"
-                  [checked]="isSelected(row)"
-                  (change)="toggleRow(row)"
-                />
-              </td>
-            }
-            @for (col of visibleColumns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">
-                @if (cellTemplate(col.key); as tpl) {
-                  <ng-container
-                    [ngTemplateOutlet]="tpl"
-                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
-                  />
-                } @else {
-                  {{ row[col.key] }}
+                  @if (canDetail()) {
+                    <td class="strct-dg__expandcell">
+                      <button
+                        type="button"
+                        class="strct-dg__detailbtn"
+                        [class.strct-dg__detailbtn--active]="row === activeRow()"
+                        [attr.aria-expanded]="row === activeRow()"
+                        aria-label="Open detail"
+                        (click)="openDetail(row)"
+                      >
+                        <strct-icon name="chevronDoubleRight" [size]="13" [strokeWidth]="1.6" />
+                      </button>
+                    </td>
+                  }
+                  @if (canExpand()) {
+                    <td class="strct-dg__expandcell">
+                      <button
+                        type="button"
+                        class="strct-dg__expandbtn"
+                        [class.strct-dg__expandbtn--open]="isExpanded(row)"
+                        [attr.aria-expanded]="isExpanded(row)"
+                        aria-label="Toggle detail"
+                        (click)="toggleExpand(row)"
+                      >
+                        <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+                      </button>
+                    </td>
+                  }
+                  @if (selectable()) {
+                    <td class="strct-dg__sel">
+                      <input
+                        type="checkbox"
+                        aria-label="Select row"
+                        [checked]="isSelected(row)"
+                        (change)="toggleRow(row)"
+                      />
+                    </td>
+                  }
+                  @for (col of visibleColumns(); track col.key) {
+                    <td [style.text-align]="col.align ?? 'start'">
+                      @if (cellTemplate(col.key); as tpl) {
+                        <ng-container
+                          [ngTemplateOutlet]="tpl"
+                          [ngTemplateOutletContext]="{
+                            $implicit: row,
+                            value: row[col.key],
+                            column: col,
+                          }"
+                        />
+                      } @else {
+                        {{ row[col.key] }}
+                      }
+                    </td>
+                  }
+                </tr>
+                @if (canExpand() && isExpanded(row)) {
+                  <tr class="strct-dg__detailrow">
+                    <td [attr.colspan]="colspan()">
+                      <div class="strct-dg__detail">
+                        <ng-container
+                          [ngTemplateOutlet]="detailDef()!.template"
+                          [ngTemplateOutletContext]="{ $implicit: row }"
+                        />
+                      </div>
+                    </td>
+                  </tr>
                 }
-              </td>
+              } @empty {
+                <tr>
+                  <td class="strct-dg__empty" [attr.colspan]="colspan()">{{ emptyText() }}</td>
+                </tr>
+              }
             }
-          </tr>
-          @if (canExpand() && isExpanded(row)) {
-            <tr class="strct-dg__detailrow">
-              <td [attr.colspan]="colspan()">
-                <div class="strct-dg__detail">
-                  <ng-container
-                    [ngTemplateOutlet]="detailDef()!.template"
-                    [ngTemplateOutletContext]="{ $implicit: row }"
-                  />
-                </div>
-              </td>
-            </tr>
-          }
-        } @empty {
-          <tr>
-            <td class="strct-dg__empty" [attr.colspan]="colspan()">{{ emptyText() }}</td>
-          </tr>
-        }
-      </tbody>
-    </table>
+          </tbody>
+        </table>
+      </div>
 
       @if (paneOpen()) {
         <aside class="strct-dg__pane">
           <div class="strct-dg__pane-head">
             <span class="strct-dg__pane-title">{{ activeRow()![columns()[0].key] }}</span>
-            <button type="button" class="strct-dg__pane-close" aria-label="Close detail" (click)="closePane()">
+            <button
+              type="button"
+              class="strct-dg__pane-close"
+              aria-label="Close detail"
+              (click)="closePane()"
+            >
               <strct-icon name="close" [size]="13" />
             </button>
           </div>
@@ -5157,7 +5833,7 @@ class StrctDatagrid {
       }
     </div>
 
-    @if (pageSize() > 0) {
+    @if (pageSize() > 0 && !loading()) {
       <div class="strct-dg__foot">
         <span class="strct-dg__count">
           {{ sorted().length }} {{ sorted().length === 1 ? 'row' : 'rows' }}
@@ -5168,7 +5844,7 @@ class StrctDatagrid {
         <strct-pagination [total]="sorted().length" [pageSize]="pageSize()" [(page)]="page" />
       </div>
     }
-  `, isInline: true, styles: [".strct-dg-host{display:block}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg th{font-size:11px;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 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__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;gap:14px;align-items:flex-start}.strct-dg__layout--paned .strct-dg{width:auto;min-width:180px;max-width:260px;flex-shrink: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-right: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-right: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-left:2px solid var(--acc);border-radius:8px;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)}}.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:8px 10px;margin-bottom:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:8px}.strct-dg__actionbar{display:flex;align-items:center;gap:14px;padding:8px 12px;margin-bottom:10px;background:var(--acc-m);border:1px solid var(--acc30);border-radius:7px;font-size:13px;animation:strct-dg-bar-in .12s ease}.strct-dg__actionbar-count{color:var(--acc);font-weight:600}.strct-dg__actionbar-clear{border:0;background:transparent;color:var(--t2);cursor:pointer;font-size:12px;padding:2px 4px}.strct-dg__actionbar-clear:hover{color:var(--t1)}.strct-dg__actionbar-actions{display:flex;gap:8px;margin-left:auto}@keyframes strct-dg-bar-in{0%{opacity:0;transform:translateY(-4px)}}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.strct-dg__count{font-size:12px;color:var(--t2)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dg-host{display:block}.strct-dg__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg th{font-size:11px;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 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__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;gap:14px;align-items:flex-start}.strct-dg__layout--paned .strct-dg{width:auto;min-width:180px;max-width:260px;flex-shrink: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-right: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-right: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-left:2px solid var(--acc);border-radius:8px;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:8px 10px;margin-bottom:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:8px}.strct-dg__actionbar{display:flex;align-items:center;gap:14px;padding:8px 12px;margin-bottom:10px;background:var(--acc-m);border:1px solid var(--acc30);border-radius:7px;font-size:13px;animation:strct-dg-bar-in .12s ease}.strct-dg__actionbar-count{color:var(--acc);font-weight:600}.strct-dg__actionbar-clear{border:0;background:transparent;color:var(--t2);cursor:pointer;font-size:12px;padding:2px 4px}.strct-dg__actionbar-clear:hover{color:var(--t1)}.strct-dg__actionbar-actions{display:flex;gap:8px;margin-left:auto}@keyframes strct-dg-bar-in{0%{opacity:0;transform:translateY(-4px)}}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.strct-dg__count{font-size:12px;color:var(--t2)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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,
@@ -5180,135 +5856,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     @if (selectable() && selectedCount() > 0) {
       <div class="strct-dg__actionbar">
         <span class="strct-dg__actionbar-count">{{ selectedCount() }} selected</span>
-        <button type="button" class="strct-dg__actionbar-clear" (click)="clearSelection()">Clear</button>
-        <span class="strct-dg__actionbar-actions"><ng-content select="[strctDatagridActions]" /></span>
+        <button type="button" class="strct-dg__actionbar-clear" (click)="clearSelection()">
+          Clear
+        </button>
+        <span class="strct-dg__actionbar-actions"
+          ><ng-content select="[strctDatagridActions]"
+        /></span>
       </div>
     }
 
     <div class="strct-dg__layout" [class.strct-dg__layout--paned]="paneOpen()">
-    <table class="strct-dg">
-      <thead>
-        <tr>
-          @if (canDetail()) {
-            <th class="strct-dg__expandcol"></th>
-          }
-          @if (canExpand()) {
-            <th class="strct-dg__expandcol"></th>
-          }
-          @if (selectable()) {
-            <th class="strct-dg__sel">
-              <input
-                type="checkbox"
-                aria-label="Select all rows on this page"
-                [checked]="allPageSelected()"
-                [indeterminate]="somePageSelected()"
-                (change)="toggleAll()"
-              />
-            </th>
-          }
-          @for (col of visibleColumns(); track col.key) {
-            <th
-              [style.text-align]="col.align ?? 'start'"
-              [style.width]="col.width"
-              [class.strct-dg__th--sortable]="col.sortable"
-              [attr.tabindex]="col.sortable ? 0 : null"
-              [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
-              (click)="col.sortable && sortBy(col.key)"
-              (keydown.enter)="col.sortable && sortBy(col.key)"
-              (keydown.space)="col.sortable && onHeaderSpace($event, col.key)"
-            >
-              <span class="strct-dg__hd">
-                {{ col.label }}
-                @if (col.sortable) {
-                  <strct-icon class="strct-dg__sorticon" [name]="sortIcon(col.key)" [size]="13" />
-                }
-              </span>
-            </th>
-          }
-        </tr>
-      </thead>
-      <tbody>
-        @for (row of paged(); 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">
-                <button
-                  type="button"
-                  class="strct-dg__detailbtn"
-                  [class.strct-dg__detailbtn--active]="row === activeRow()"
-                  [attr.aria-expanded]="row === activeRow()"
-                  aria-label="Open detail"
-                  (click)="openDetail(row)"
+      <div class="strct-dg__scroll">
+        <table class="strct-dg">
+          <thead>
+            <tr>
+              @if (canDetail()) {
+                <th class="strct-dg__expandcol"></th>
+              }
+              @if (canExpand()) {
+                <th class="strct-dg__expandcol"></th>
+              }
+              @if (selectable()) {
+                <th class="strct-dg__sel">
+                  <input
+                    type="checkbox"
+                    aria-label="Select all rows on this page"
+                    [checked]="allPageSelected()"
+                    [indeterminate]="somePageSelected()"
+                    (change)="toggleAll()"
+                  />
+                </th>
+              }
+              @for (col of visibleColumns(); track col.key) {
+                <th
+                  [style.text-align]="col.align ?? 'start'"
+                  [style.width]="col.width"
+                  [class.strct-dg__th--sortable]="col.sortable"
+                  [attr.tabindex]="col.sortable ? 0 : null"
+                  [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
+                  (click)="col.sortable && sortBy(col.key)"
+                  (keydown.enter)="col.sortable && sortBy(col.key)"
+                  (keydown.space)="col.sortable && onHeaderSpace($event, col.key)"
                 >
-                  <strct-icon name="chevronDoubleRight" [size]="13" [strokeWidth]="1.6" />
-                </button>
-              </td>
-            }
-            @if (canExpand()) {
-              <td class="strct-dg__expandcell">
-                <button
-                  type="button"
-                  class="strct-dg__expandbtn"
-                  [class.strct-dg__expandbtn--open]="isExpanded(row)"
-                  [attr.aria-expanded]="isExpanded(row)"
-                  aria-label="Toggle detail"
-                  (click)="toggleExpand(row)"
+                  <span class="strct-dg__hd">
+                    {{ col.label }}
+                    @if (col.sortable) {
+                      <strct-icon
+                        class="strct-dg__sorticon"
+                        [name]="sortIcon(col.key)"
+                        [size]="13"
+                      />
+                    }
+                  </span>
+                </th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @if (loading()) {
+              @for (_ of [1, 2, 3, 4, 5]; track $index) {
+                <tr class="strct-dg__skeleton-row">
+                  @if (canDetail()) {
+                    <td class="strct-dg__expandcell"></td>
+                  }
+                  @if (canExpand()) {
+                    <td class="strct-dg__expandcell"></td>
+                  }
+                  @if (selectable()) {
+                    <td class="strct-dg__sel"></td>
+                  }
+                  @for (col of visibleColumns(); track col.key) {
+                    <td [style.text-align]="col.align ?? 'start'">
+                      <div class="strct-dg__skeleton-block"></div>
+                    </td>
+                  }
+                </tr>
+              }
+            } @else {
+              @for (row of paged(); track rowKey(row)) {
+                <tr
+                  [class.strct-dg__row--selected]="isSelected(row)"
+                  [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
                 >
-                  <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                </button>
-              </td>
-            }
-            @if (selectable()) {
-              <td class="strct-dg__sel">
-                <input
-                  type="checkbox"
-                  aria-label="Select row"
-                  [checked]="isSelected(row)"
-                  (change)="toggleRow(row)"
-                />
-              </td>
-            }
-            @for (col of visibleColumns(); track col.key) {
-              <td [style.text-align]="col.align ?? 'start'">
-                @if (cellTemplate(col.key); as tpl) {
-                  <ng-container
-                    [ngTemplateOutlet]="tpl"
-                    [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key], column: col }"
-                  />
-                } @else {
-                  {{ row[col.key] }}
+                  @if (canDetail()) {
+                    <td class="strct-dg__expandcell">
+                      <button
+                        type="button"
+                        class="strct-dg__detailbtn"
+                        [class.strct-dg__detailbtn--active]="row === activeRow()"
+                        [attr.aria-expanded]="row === activeRow()"
+                        aria-label="Open detail"
+                        (click)="openDetail(row)"
+                      >
+                        <strct-icon name="chevronDoubleRight" [size]="13" [strokeWidth]="1.6" />
+                      </button>
+                    </td>
+                  }
+                  @if (canExpand()) {
+                    <td class="strct-dg__expandcell">
+                      <button
+                        type="button"
+                        class="strct-dg__expandbtn"
+                        [class.strct-dg__expandbtn--open]="isExpanded(row)"
+                        [attr.aria-expanded]="isExpanded(row)"
+                        aria-label="Toggle detail"
+                        (click)="toggleExpand(row)"
+                      >
+                        <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+                      </button>
+                    </td>
+                  }
+                  @if (selectable()) {
+                    <td class="strct-dg__sel">
+                      <input
+                        type="checkbox"
+                        aria-label="Select row"
+                        [checked]="isSelected(row)"
+                        (change)="toggleRow(row)"
+                      />
+                    </td>
+                  }
+                  @for (col of visibleColumns(); track col.key) {
+                    <td [style.text-align]="col.align ?? 'start'">
+                      @if (cellTemplate(col.key); as tpl) {
+                        <ng-container
+                          [ngTemplateOutlet]="tpl"
+                          [ngTemplateOutletContext]="{
+                            $implicit: row,
+                            value: row[col.key],
+                            column: col,
+                          }"
+                        />
+                      } @else {
+                        {{ row[col.key] }}
+                      }
+                    </td>
+                  }
+                </tr>
+                @if (canExpand() && isExpanded(row)) {
+                  <tr class="strct-dg__detailrow">
+                    <td [attr.colspan]="colspan()">
+                      <div class="strct-dg__detail">
+                        <ng-container
+                          [ngTemplateOutlet]="detailDef()!.template"
+                          [ngTemplateOutletContext]="{ $implicit: row }"
+                        />
+                      </div>
+                    </td>
+                  </tr>
                 }
-              </td>
+              } @empty {
+                <tr>
+                  <td class="strct-dg__empty" [attr.colspan]="colspan()">{{ emptyText() }}</td>
+                </tr>
+              }
             }
-          </tr>
-          @if (canExpand() && isExpanded(row)) {
-            <tr class="strct-dg__detailrow">
-              <td [attr.colspan]="colspan()">
-                <div class="strct-dg__detail">
-                  <ng-container
-                    [ngTemplateOutlet]="detailDef()!.template"
-                    [ngTemplateOutletContext]="{ $implicit: row }"
-                  />
-                </div>
-              </td>
-            </tr>
-          }
-        } @empty {
-          <tr>
-            <td class="strct-dg__empty" [attr.colspan]="colspan()">{{ emptyText() }}</td>
-          </tr>
-        }
-      </tbody>
-    </table>
+          </tbody>
+        </table>
+      </div>
 
       @if (paneOpen()) {
         <aside class="strct-dg__pane">
           <div class="strct-dg__pane-head">
             <span class="strct-dg__pane-title">{{ activeRow()![columns()[0].key] }}</span>
-            <button type="button" class="strct-dg__pane-close" aria-label="Close detail" (click)="closePane()">
+            <button
+              type="button"
+              class="strct-dg__pane-close"
+              aria-label="Close detail"
+              (click)="closePane()"
+            >
               <strct-icon name="close" [size]="13" />
             </button>
           </div>
@@ -5322,7 +6038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       }
     </div>
 
-    @if (pageSize() > 0) {
+    @if (pageSize() > 0 && !loading()) {
       <div class="strct-dg__foot">
         <span class="strct-dg__count">
           {{ sorted().length }} {{ sorted().length === 1 ? 'row' : 'rows' }}
@@ -5336,8 +6052,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: {
                         class: 'strct-dg-host',
                         '[class.strct-dg-host--compact]': 'compact()',
-                    }, styles: [".strct-dg-host{display:block}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg th{font-size:11px;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 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__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;gap:14px;align-items:flex-start}.strct-dg__layout--paned .strct-dg{width:auto;min-width:180px;max-width:260px;flex-shrink: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-right: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-right: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-left:2px solid var(--acc);border-radius:8px;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)}}.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:8px 10px;margin-bottom:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:8px}.strct-dg__actionbar{display:flex;align-items:center;gap:14px;padding:8px 12px;margin-bottom:10px;background:var(--acc-m);border:1px solid var(--acc30);border-radius:7px;font-size:13px;animation:strct-dg-bar-in .12s ease}.strct-dg__actionbar-count{color:var(--acc);font-weight:600}.strct-dg__actionbar-clear{border:0;background:transparent;color:var(--t2);cursor:pointer;font-size:12px;padding:2px 4px}.strct-dg__actionbar-clear:hover{color:var(--t1)}.strct-dg__actionbar-actions{display:flex;gap:8px;margin-left:auto}@keyframes strct-dg-bar-in{0%{opacity:0;transform:translateY(-4px)}}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.strct-dg__count{font-size:12px;color:var(--t2)}\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 }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], 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 }] }] } });
+                    }, styles: [".strct-dg-host{display:block}.strct-dg__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--b2);border-radius:8px;overflow:hidden}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--b1)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg th{font-size:11px;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 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__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;gap:14px;align-items:flex-start}.strct-dg__layout--paned .strct-dg{width:auto;min-width:180px;max-width:260px;flex-shrink: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-right: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-right: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-left:2px solid var(--acc);border-radius:8px;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:8px 10px;margin-bottom:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:8px}.strct-dg__actionbar{display:flex;align-items:center;gap:14px;padding:8px 12px;margin-bottom:10px;background:var(--acc-m);border:1px solid var(--acc30);border-radius:7px;font-size:13px;animation:strct-dg-bar-in .12s ease}.strct-dg__actionbar-count{color:var(--acc);font-weight:600}.strct-dg__actionbar-clear{border:0;background:transparent;color:var(--t2);cursor:pointer;font-size:12px;padding:2px 4px}.strct-dg__actionbar-clear:hover{color:var(--t1)}.strct-dg__actionbar-actions{display:flex;gap:8px;margin-left:auto}@keyframes strct-dg-bar-in{0%{opacity:0;transform:translateY(-4px)}}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.strct-dg__count{font-size:12px;color:var(--t2)}\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 }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], 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 {
@@ -5350,10 +6066,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** A timeline entry: a node on the rail plus a title and projected body. */
 class StrctTimelineItem {
+    /** Dialog title. */
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** State. */
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctTimelineItem, isStandalone: true, selector: "strct-timeline-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-tli--current": "state() === 'current'", "class.strct-tli--success": "state() === 'success'", "class.strct-tli--warning": "state() === 'warning'", "class.strct-tli--danger": "state() === 'danger'" }, classAttribute: "strct-tli" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctTimelineItem, isStandalone: true, selector: "strct-timeline-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-tli--current": "state() === 'current'", "class.strct-tli--success": "state() === 'success'", "class.strct-tli--warning": "state() === 'warning'", "class.strct-tli--critical": "state() === 'critical'" }, classAttribute: "strct-tli" }, ngImport: i0, template: `
     <div class="strct-tli__rail">
       <span class="strct-tli__node"></span>
       <span class="strct-tli__line"></span>
@@ -5362,7 +6080,7 @@ class StrctTimelineItem {
       <div class="strct-tli__title">{{ title() }}</div>
       <div class="strct-tli__body"><ng-content /></div>
     </div>
-  `, isInline: true, styles: [".strct-tli{display:flex;gap:12px}.strct-tli__rail{display:flex;flex-direction:column;align-items:center}.strct-tli__node{width:11px;height:11px;border-radius:50%;margin-top:3px;flex-shrink:0;background:var(--bg-1);border:2px solid var(--b3)}.strct-tli__line{flex:1;width:2px;background:var(--b2);margin:4px 0}.strct-tli:last-child .strct-tli__line{display:none}.strct-tli__content{padding-bottom:18px}.strct-tli__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-tli__body{margin-top:3px;font-size:13px;color:var(--t2)}.strct-tli--current .strct-tli__node{border-color:var(--acc);background:var(--acc-m);box-shadow:0 0 0 3px var(--acc18)}.strct-tli--success .strct-tli__node{border-color:var(--ok);background:var(--ok)}.strct-tli--warning .strct-tli__node{border-color:var(--wrn);background:var(--wrn)}.strct-tli--danger .strct-tli__node{border-color:var(--crt);background:var(--crt)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tli{display:flex;gap:12px}.strct-tli__rail{display:flex;flex-direction:column;align-items:center}.strct-tli__node{width:11px;height:11px;border-radius:50%;margin-top:3px;flex-shrink:0;background:var(--bg-1);border:2px solid var(--b3)}.strct-tli__line{flex:1;width:2px;background:var(--b2);margin:4px 0}.strct-tli:last-child .strct-tli__line{display:none}.strct-tli__content{padding-bottom:18px}.strct-tli__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-tli__body{margin-top:3px;font-size:13px;color:var(--t2)}.strct-tli--current .strct-tli__node{border-color:var(--acc);background:var(--acc-m);box-shadow:0 0 0 3px var(--acc18)}.strct-tli--success .strct-tli__node{border-color:var(--success);background:var(--success)}.strct-tli--warning .strct-tli__node{border-color:var(--warning);background:var(--warning)}.strct-tli--critical .strct-tli__node{border-color:var(--critical);background:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTimelineItem, decorators: [{
             type: Component,
@@ -5380,8 +6098,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.strct-tli--current]': "state() === 'current'",
                         '[class.strct-tli--success]': "state() === 'success'",
                         '[class.strct-tli--warning]': "state() === 'warning'",
-                        '[class.strct-tli--danger]': "state() === 'danger'",
-                    }, styles: [".strct-tli{display:flex;gap:12px}.strct-tli__rail{display:flex;flex-direction:column;align-items:center}.strct-tli__node{width:11px;height:11px;border-radius:50%;margin-top:3px;flex-shrink:0;background:var(--bg-1);border:2px solid var(--b3)}.strct-tli__line{flex:1;width:2px;background:var(--b2);margin:4px 0}.strct-tli:last-child .strct-tli__line{display:none}.strct-tli__content{padding-bottom:18px}.strct-tli__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-tli__body{margin-top:3px;font-size:13px;color:var(--t2)}.strct-tli--current .strct-tli__node{border-color:var(--acc);background:var(--acc-m);box-shadow:0 0 0 3px var(--acc18)}.strct-tli--success .strct-tli__node{border-color:var(--ok);background:var(--ok)}.strct-tli--warning .strct-tli__node{border-color:var(--wrn);background:var(--wrn)}.strct-tli--danger .strct-tli__node{border-color:var(--crt);background:var(--crt)}\n"] }]
+                        '[class.strct-tli--critical]': "state() === 'critical'",
+                    }, styles: [".strct-tli{display:flex;gap:12px}.strct-tli__rail{display:flex;flex-direction:column;align-items:center}.strct-tli__node{width:11px;height:11px;border-radius:50%;margin-top:3px;flex-shrink:0;background:var(--bg-1);border:2px solid var(--b3)}.strct-tli__line{flex:1;width:2px;background:var(--b2);margin:4px 0}.strct-tli:last-child .strct-tli__line{display:none}.strct-tli__content{padding-bottom:18px}.strct-tli__title{font-size:13px;font-weight:600;color:var(--t1)}.strct-tli__body{margin-top:3px;font-size:13px;color:var(--t2)}.strct-tli--current .strct-tli__node{border-color:var(--acc);background:var(--acc-m);box-shadow:0 0 0 3px var(--acc18)}.strct-tli--success .strct-tli__node{border-color:var(--success);background:var(--success)}.strct-tli--warning .strct-tli__node{border-color:var(--warning);background:var(--warning)}.strct-tli--critical .strct-tli__node{border-color:var(--critical);background:var(--critical)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
 
 /** Key/value definition list. Wraps `<strct-stack-item>` rows. */
@@ -5395,6 +6113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** A label + value row. The value is projected content. */
 class StrctStackItem {
+    /** Label text. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctStackItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctStackItem, isStandalone: true, selector: "strct-stack-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "strct-stack__item" }, ngImport: i0, template: `
@@ -5412,18 +6131,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const STROKE = {
     accent: 'var(--acc)',
-    success: 'var(--ok)',
-    warning: 'var(--wrn)',
-    danger: 'var(--crt)',
+    success: 'var(--success)',
+    warning: 'var(--warning)',
+    critical: 'var(--critical)',
 };
 /**
  * Tiny inline trend line. `<strct-sparkline [data]="[3,5,4,8,6,9]" area />`.
  */
 class StrctSparkline {
+    /** Data array. */
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Visual status color. */
     status = input('accent', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Fill the area under the line. */
     area = input(false, { ...(ngDevMode ? { debugName: "area" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Width (CSS length). */
     width = input(100, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Height in pixels. */
     height = input(30, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
     color = computed(() => STROKE[this.status()], ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     points = computed(() => {
@@ -5436,7 +6160,9 @@ class StrctSparkline {
         const stepX = d.length > 1 ? 100 / (d.length - 1) : 0;
         return d.map((v, i) => ({ x: i * stepX, y: 29 - ((v - min) / span) * 28 }));
     }, ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
-    linePoints = computed(() => this.points().map((p) => `${p.x},${p.y}`).join(' '), ...(ngDevMode ? [{ debugName: "linePoints" }] : /* istanbul ignore next */ []));
+    linePoints = computed(() => this.points()
+        .map((p) => `${p.x},${p.y}`)
+        .join(' '), ...(ngDevMode ? [{ debugName: "linePoints" }] : /* istanbul ignore next */ []));
     areaPoints = computed(() => {
         const pts = this.points();
         if (!pts.length)
@@ -5489,9 +6215,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const COLOR$1 = {
     accent: 'var(--acc)',
-    success: 'var(--ok)',
-    warning: 'var(--wrn)',
-    danger: 'var(--crt)',
+    success: 'var(--success)',
+    warning: 'var(--warning)',
+    critical: 'var(--critical)',
 };
 const VB_W = 320;
 const PAD = { l: 6, r: 6, t: 10, b: 10 };
@@ -5500,10 +6226,15 @@ const PAD = { l: 6, r: 6, t: 10, b: 10 };
  *   <strct-chart [data]="cpu" type="area" [labels]="hours" status="warning" />
  */
 class StrctChart {
+    /** Data array. */
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Visual type / variant. */
     type = input('line', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** X-axis labels. */
     labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** Visual status color. */
     status = input('accent', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Height in pixels. */
     height = input(160, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
     /** Override the top of the value axis (defaults to the data max + headroom). */
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
@@ -5530,7 +6261,9 @@ class StrctChart {
             y: PAD.t + (1 - Math.max(0, v) / max) * this.chartH(),
         }));
     }, ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
-    linePoints = computed(() => this.points().map((p) => `${p.x},${p.y}`).join(' '), ...(ngDevMode ? [{ debugName: "linePoints" }] : /* istanbul ignore next */ []));
+    linePoints = computed(() => this.points()
+        .map((p) => `${p.x},${p.y}`)
+        .join(' '), ...(ngDevMode ? [{ debugName: "linePoints" }] : /* istanbul ignore next */ []));
     areaPoints = computed(() => {
         const pts = this.points();
         if (!pts.length)
@@ -5564,20 +6297,44 @@ class StrctChart {
       [style.height.px]="height()"
     >
       @for (g of gridY(); track g) {
-        <line class="strct-chart__grid" [attr.x1]="pad.l" [attr.x2]="vbW - pad.r" [attr.y1]="g" [attr.y2]="g" />
+        <line
+          class="strct-chart__grid"
+          [attr.x1]="pad.l"
+          [attr.x2]="vbW - pad.r"
+          [attr.y1]="g"
+          [attr.y2]="g"
+        />
       }
 
       @if (type() === 'bar') {
         @for (b of bars(); track $index) {
-          <rect class="strct-chart__bar" [attr.x]="b.x" [attr.y]="b.y" [attr.width]="b.w" [attr.height]="b.h" [attr.fill]="color()" />
+          <rect
+            class="strct-chart__bar"
+            [attr.x]="b.x"
+            [attr.y]="b.y"
+            [attr.width]="b.w"
+            [attr.height]="b.h"
+            [attr.fill]="color()"
+          />
         }
       } @else {
         @if (type() === 'area') {
           <polygon class="strct-chart__area" [attr.points]="areaPoints()" [attr.fill]="color()" />
         }
-        <polyline class="strct-chart__line" fill="none" [attr.points]="linePoints()" [attr.stroke]="color()" />
+        <polyline
+          class="strct-chart__line"
+          fill="none"
+          [attr.points]="linePoints()"
+          [attr.stroke]="color()"
+        />
         @for (p of points(); track $index) {
-          <circle class="strct-chart__dot" [attr.cx]="p.x" [attr.cy]="p.y" r="2" [attr.fill]="color()" />
+          <circle
+            class="strct-chart__dot"
+            [attr.cx]="p.x"
+            [attr.cy]="p.y"
+            r="2"
+            [attr.fill]="color()"
+          />
         }
       }
     </svg>
@@ -5601,20 +6358,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       [style.height.px]="height()"
     >
       @for (g of gridY(); track g) {
-        <line class="strct-chart__grid" [attr.x1]="pad.l" [attr.x2]="vbW - pad.r" [attr.y1]="g" [attr.y2]="g" />
+        <line
+          class="strct-chart__grid"
+          [attr.x1]="pad.l"
+          [attr.x2]="vbW - pad.r"
+          [attr.y1]="g"
+          [attr.y2]="g"
+        />
       }
 
       @if (type() === 'bar') {
         @for (b of bars(); track $index) {
-          <rect class="strct-chart__bar" [attr.x]="b.x" [attr.y]="b.y" [attr.width]="b.w" [attr.height]="b.h" [attr.fill]="color()" />
+          <rect
+            class="strct-chart__bar"
+            [attr.x]="b.x"
+            [attr.y]="b.y"
+            [attr.width]="b.w"
+            [attr.height]="b.h"
+            [attr.fill]="color()"
+          />
         }
       } @else {
         @if (type() === 'area') {
           <polygon class="strct-chart__area" [attr.points]="areaPoints()" [attr.fill]="color()" />
         }
-        <polyline class="strct-chart__line" fill="none" [attr.points]="linePoints()" [attr.stroke]="color()" />
+        <polyline
+          class="strct-chart__line"
+          fill="none"
+          [attr.points]="linePoints()"
+          [attr.stroke]="color()"
+        />
         @for (p of points(); track $index) {
-          <circle class="strct-chart__dot" [attr.cx]="p.x" [attr.cy]="p.y" r="2" [attr.fill]="color()" />
+          <circle
+            class="strct-chart__dot"
+            [attr.cx]="p.x"
+            [attr.cy]="p.y"
+            r="2"
+            [attr.fill]="color()"
+          />
         }
       }
     </svg>
@@ -5629,17 +6410,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-chart' }, styles: [".strct-chart{display:block}.strct-chart__svg{width:100%;display:block}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{opacity:.13}.strct-chart__dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__bar{rx:1.5}.strct-chart__labels{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--t3)}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
 
-const PALETTE = ['var(--acc)', 'var(--ok)', 'var(--wrn)', 'var(--crt)', 'var(--acc50)', 'var(--t3)'];
+const PALETTE = [
+    'var(--acc)',
+    'var(--success)',
+    'var(--warning)',
+    'var(--critical)',
+    'var(--acc50)',
+    'var(--t3)',
+];
 /**
  * Donut / ring chart from weighted segments.
  *   <strct-donut [segments]="[{value:6,label:'Running'},{value:2,label:'Off'}]"
  *                centerValue="8" centerLabel="VMs" />
  */
 class StrctDonut {
+    /** Weighted segments. */
     segments = input.required(...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input(120, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Stroke thickness in pixels. */
     thickness = input(14, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    /** Value shown in the donut center. */
     centerValue = input('', ...(ngDevMode ? [{ debugName: "centerValue" }] : /* istanbul ignore next */ []));
+    /** Label shown in the donut center. */
     centerLabel = input('', ...(ngDevMode ? [{ debugName: "centerLabel" }] : /* istanbul ignore next */ []));
     half = computed(() => this.size() / 2, ...(ngDevMode ? [{ debugName: "half" }] : /* istanbul ignore next */ []));
     radius = computed(() => (this.size() - this.thickness()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
@@ -5659,17 +6452,28 @@ class StrctDonut {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDonut, isStandalone: true, selector: "strct-donut", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-donut" }, ngImport: i0, template: `
     <div class="strct-donut__wrap" [style.width.px]="size()" [style.height.px]="size()">
-      <svg [attr.viewBox]="'0 0 ' + size() + ' ' + size()" [style.width.px]="size()" [style.height.px]="size()">
+      <svg
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        [style.width.px]="size()"
+        [style.height.px]="size()"
+      >
         <g [attr.transform]="'rotate(-90 ' + half() + ' ' + half() + ')'">
           <circle
             class="strct-donut__track"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke-width]="thickness()"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke-width]="thickness()"
           />
           @for (arc of arcs(); track $index) {
             <circle
-              [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-              fill="none" [attr.stroke]="arc.color" [attr.stroke-width]="thickness()"
+              [attr.cx]="half()"
+              [attr.cy]="half()"
+              [attr.r]="radius()"
+              fill="none"
+              [attr.stroke]="arc.color"
+              [attr.stroke-width]="thickness()"
               [attr.stroke-dasharray]="arc.len + ' ' + (circumference() - arc.len)"
               [attr.stroke-dashoffset]="-arc.offset"
             />
@@ -5689,17 +6493,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             type: Component,
             args: [{ selector: 'strct-donut', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div class="strct-donut__wrap" [style.width.px]="size()" [style.height.px]="size()">
-      <svg [attr.viewBox]="'0 0 ' + size() + ' ' + size()" [style.width.px]="size()" [style.height.px]="size()">
+      <svg
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        [style.width.px]="size()"
+        [style.height.px]="size()"
+      >
         <g [attr.transform]="'rotate(-90 ' + half() + ' ' + half() + ')'">
           <circle
             class="strct-donut__track"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke-width]="thickness()"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke-width]="thickness()"
           />
           @for (arc of arcs(); track $index) {
             <circle
-              [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-              fill="none" [attr.stroke]="arc.color" [attr.stroke-width]="thickness()"
+              [attr.cx]="half()"
+              [attr.cy]="half()"
+              [attr.r]="radius()"
+              fill="none"
+              [attr.stroke]="arc.color"
+              [attr.stroke-width]="thickness()"
               [attr.stroke-dasharray]="arc.len + ' ' + (circumference() - arc.len)"
               [attr.stroke-dashoffset]="-arc.offset"
             />
@@ -5718,19 +6533,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const COLOR = {
     accent: 'var(--acc)',
-    success: 'var(--ok)',
-    warning: 'var(--wrn)',
-    danger: 'var(--crt)',
+    success: 'var(--success)',
+    warning: 'var(--warning)',
+    critical: 'var(--critical)',
 };
 /**
  * 270° radial gauge for a 0–100 value (CPU, memory, capacity …).
  *   <strct-gauge [value]="72" status="warning" label="CPU" />
  */
 class StrctGauge {
+    /** Current value. */
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Visual status color. */
     status = input('accent', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Label text. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
     size = input(120, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Stroke thickness in pixels. */
     thickness = input(12, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
     clamped = computed(() => Math.round(Math.max(0, Math.min(100, this.value()))), ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
     half = computed(() => this.size() / 2, ...(ngDevMode ? [{ debugName: "half" }] : /* istanbul ignore next */ []));
@@ -5748,18 +6568,31 @@ class StrctGauge {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctGauge, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctGauge, isStandalone: true, selector: "strct-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-gauge" }, ngImport: i0, template: `
     <div class="strct-gauge__wrap" [style.width.px]="size()" [style.height.px]="size()">
-      <svg [attr.viewBox]="'0 0 ' + size() + ' ' + size()" [style.width.px]="size()" [style.height.px]="size()">
+      <svg
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        [style.width.px]="size()"
+        [style.height.px]="size()"
+      >
         <g [attr.transform]="'rotate(135 ' + half() + ' ' + half() + ')'">
           <circle
             class="strct-gauge__track"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="trackDash()"
           />
           <circle
             class="strct-gauge__value"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke]="color()" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke]="color()"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="valueDash()"
           />
         </g>
@@ -5777,18 +6610,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             type: Component,
             args: [{ selector: 'strct-gauge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div class="strct-gauge__wrap" [style.width.px]="size()" [style.height.px]="size()">
-      <svg [attr.viewBox]="'0 0 ' + size() + ' ' + size()" [style.width.px]="size()" [style.height.px]="size()">
+      <svg
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        [style.width.px]="size()"
+        [style.height.px]="size()"
+      >
         <g [attr.transform]="'rotate(135 ' + half() + ' ' + half() + ')'">
           <circle
             class="strct-gauge__track"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="trackDash()"
           />
           <circle
             class="strct-gauge__value"
-            [attr.cx]="half()" [attr.cy]="half()" [attr.r]="radius()"
-            fill="none" [attr.stroke]="color()" [attr.stroke-width]="thickness()" stroke-linecap="round"
+            [attr.cx]="half()"
+            [attr.cy]="half()"
+            [attr.r]="radius()"
+            fill="none"
+            [attr.stroke]="color()"
+            [attr.stroke-width]="thickness()"
+            stroke-linecap="round"
             [attr.stroke-dasharray]="valueDash()"
           />
         </g>
@@ -5805,8 +6651,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 /** Inline contextual banner. `<strct-alert type="warning">…</strct-alert>`. */
 class StrctAlert {
+    /** Visual type / variant. */
     type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Show a dismiss button. */
     closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the alert is dismissed. */
     closed = output();
     icon = computed(() => {
         switch (this.type()) {
@@ -5814,14 +6663,14 @@ class StrctAlert {
                 return 'success';
             case 'warning':
                 return 'warning';
-            case 'danger':
-                return 'danger';
+            case 'critical':
+                return 'critical';
             default:
                 return 'info';
         }
     }, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctAlert, isStandalone: true, selector: "strct-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { attributes: { "role": "status" }, properties: { "class.strct-alert--success": "type() === 'success'", "class.strct-alert--warning": "type() === 'warning'", "class.strct-alert--danger": "type() === 'danger'" }, classAttribute: "strct-alert" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctAlert, isStandalone: true, selector: "strct-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { attributes: { "role": "status" }, properties: { "class.strct-alert--success": "type() === 'success'", "class.strct-alert--warning": "type() === 'warning'", "class.strct-alert--critical": "type() === 'critical'" }, classAttribute: "strct-alert" }, ngImport: i0, template: `
     <strct-icon [name]="icon()" [size]="15" />
     <div class="strct-alert__body"><ng-content /></div>
     @if (closable()) {
@@ -5829,7 +6678,7 @@ class StrctAlert {
         <strct-icon name="close" [size]="13" />
       </button>
     }
-  `, isInline: true, styles: [".strct-alert{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:7px;font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-left-color:var(--ok)}.strct-alert--success strct-icon{color:var(--ok)}.strct-alert--warning{border-left-color:var(--wrn)}.strct-alert--warning strct-icon{color:var(--wrn)}.strct-alert--danger{border-left-color:var(--crt)}.strct-alert--danger strct-icon{color:var(--crt)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-alert{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-left-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-left-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-left-color:var(--critical)}.strct-alert--critical strct-icon{color: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: StrctAlert, decorators: [{
             type: Component,
@@ -5846,8 +6695,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         role: 'status',
                         '[class.strct-alert--success]': "type() === 'success'",
                         '[class.strct-alert--warning]': "type() === 'warning'",
-                        '[class.strct-alert--danger]': "type() === 'danger'",
-                    }, styles: [".strct-alert{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:7px;font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-left-color:var(--ok)}.strct-alert--success strct-icon{color:var(--ok)}.strct-alert--warning{border-left-color:var(--wrn)}.strct-alert--warning strct-icon{color:var(--wrn)}.strct-alert--danger{border-left-color:var(--crt)}.strct-alert--danger strct-icon{color:var(--crt)}\n"] }]
+                        '[class.strct-alert--critical]': "type() === 'critical'",
+                    }, styles: [".strct-alert{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-left-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-left-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-left-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
@@ -5860,7 +6709,9 @@ class StrctTooltip {
     renderer = inject(Renderer2);
     doc = inject(DOCUMENT);
     bubble = null;
+    /** Tooltip text. */
     strctTooltip = input.required(...(ngDevMode ? [{ debugName: "strctTooltip" }] : /* istanbul ignore next */ []));
+    /** Tooltip placement relative to the host. */
     tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     show() {
         const text = this.strctTooltip();
@@ -5958,6 +6809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctSignpost {
     host = inject((ElementRef));
+    /** Popover placement relative to the trigger. */
     position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle() {
@@ -5988,7 +6840,15 @@ class StrctSignpost {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSignpost, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSignpost, isStandalone: true, selector: "strct-signpost", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-sp" }, ngImport: i0, template: `
-    <div #trigger class="strct-sp__trigger" (click)="toggle()">
+    <div
+      #trigger
+      class="strct-sp__trigger"
+      role="button"
+      tabindex="0"
+      (click)="toggle()"
+      (keydown.enter)="toggle()"
+      (keydown.space)="toggle()"
+    >
       <ng-content select="[strctSignpostTrigger]" />
     </div>
     @if (open()) {
@@ -6007,7 +6867,15 @@ class StrctSignpost {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSignpost, decorators: [{
             type: Component,
             args: [{ selector: 'strct-signpost', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctOverlay], template: `
-    <div #trigger class="strct-sp__trigger" (click)="toggle()">
+    <div
+      #trigger
+      class="strct-sp__trigger"
+      role="button"
+      tabindex="0"
+      (click)="toggle()"
+      (keydown.enter)="toggle()"
+      (keydown.space)="toggle()"
+    >
       <ng-content select="[strctSignpostTrigger]" />
     </div>
     @if (open()) {
@@ -6042,7 +6910,10 @@ class StrctToastService {
     show(message, options = {}) {
         const id = ++this.counter;
         const duration = options.duration ?? 4000;
-        this._toasts.update((list) => [...list, { id, type: options.type ?? 'info', message, duration }]);
+        this._toasts.update((list) => [
+            ...list,
+            { id, type: options.type ?? 'info', message, duration },
+        ]);
         if (duration > 0) {
             setTimeout(() => this.dismiss(id), duration);
         }
@@ -6057,8 +6928,8 @@ class StrctToastService {
     warning(message, duration) {
         return this.show(message, { type: 'warning', duration });
     }
-    danger(message, duration) {
-        return this.show(message, { type: 'danger', duration });
+    critical(message, duration) {
+        return this.show(message, { type: 'critical', duration });
     }
     dismiss(id) {
         this._toasts.update((list) => list.filter((t) => t.id !== id));
@@ -6077,7 +6948,7 @@ const TOAST_ICON = {
     info: 'info',
     success: 'success',
     warning: 'warning',
-    danger: 'danger',
+    critical: 'critical',
 };
 /** Renders the toast stack. Place once, typically just inside the app shell. */
 class StrctToastOutlet {
@@ -6093,7 +6964,7 @@ class StrctToastOutlet {
           class="strct-toast"
           [class.strct-toast--success]="toast.type === 'success'"
           [class.strct-toast--warning]="toast.type === 'warning'"
-          [class.strct-toast--danger]="toast.type === 'danger'"
+          [class.strct-toast--critical]="toast.type === 'critical'"
         >
           <strct-icon [name]="icon(toast.type)" [size]="15" />
           <span class="strct-toast__msg">{{ toast.message }}</span>
@@ -6108,7 +6979,7 @@ class StrctToastOutlet {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".strct-toasts{position:fixed;top:16px;right:16px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none}.strct-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 12px;font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc);border-radius:7px;box-shadow:var(--shh);animation:strct-toast-in .16s ease}.strct-toast strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-toast__msg{flex:1}.strct-toast__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-toast__close:hover{color:var(--t1);background:var(--bg-3)}.strct-toast--success{border-left-color:var(--ok)}.strct-toast--success strct-icon{color:var(--ok)}.strct-toast--warning{border-left-color:var(--wrn)}.strct-toast--warning strct-icon{color:var(--wrn)}.strct-toast--danger{border-left-color:var(--crt)}.strct-toast--danger strct-icon{color:var(--crt)}@keyframes strct-toast-in{0%{opacity:0;transform:translate(16px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-toasts{position:fixed;top:var(--space-4);right:var(--space-4);z-index:1200;display:flex;flex-direction:column;gap:var(--space-2);max-width:360px;pointer-events:none}.strct-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-toast-in .16s ease}.strct-toast strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-toast__msg{flex:1}.strct-toast__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-toast__close:hover{color:var(--t1);background:var(--bg-3)}.strct-toast--success{border-left-color:var(--success)}.strct-toast--success strct-icon{color:var(--success)}.strct-toast--warning{border-left-color:var(--warning)}.strct-toast--warning strct-icon{color:var(--warning)}.strct-toast--critical{border-left-color:var(--critical)}.strct-toast--critical strct-icon{color:var(--critical)}@keyframes strct-toast-in{0%{opacity:0;transform:translate(16px)}}\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: StrctToastOutlet, decorators: [{
             type: Component,
@@ -6119,7 +6990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           class="strct-toast"
           [class.strct-toast--success]="toast.type === 'success'"
           [class.strct-toast--warning]="toast.type === 'warning'"
-          [class.strct-toast--danger]="toast.type === 'danger'"
+          [class.strct-toast--critical]="toast.type === 'critical'"
         >
           <strct-icon [name]="icon(toast.type)" [size]="15" />
           <span class="strct-toast__msg">{{ toast.message }}</span>
@@ -6134,10 +7005,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         </div>
       }
     </div>
-  `, styles: [".strct-toasts{position:fixed;top:16px;right:16px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none}.strct-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 12px;font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc);border-radius:7px;box-shadow:var(--shh);animation:strct-toast-in .16s ease}.strct-toast strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-toast__msg{flex:1}.strct-toast__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-toast__close:hover{color:var(--t1);background:var(--bg-3)}.strct-toast--success{border-left-color:var(--ok)}.strct-toast--success strct-icon{color:var(--ok)}.strct-toast--warning{border-left-color:var(--wrn)}.strct-toast--warning strct-icon{color:var(--wrn)}.strct-toast--danger{border-left-color:var(--crt)}.strct-toast--danger strct-icon{color:var(--crt)}@keyframes strct-toast-in{0%{opacity:0;transform:translate(16px)}}\n"] }]
+  `, styles: [".strct-toasts{position:fixed;top:var(--space-4);right:var(--space-4);z-index:1200;display:flex;flex-direction:column;gap:var(--space-2);max-width:360px;pointer-events:none}.strct-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-toast-in .16s ease}.strct-toast strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-toast__msg{flex:1}.strct-toast__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-toast__close:hover{color:var(--t1);background:var(--bg-3)}.strct-toast--success{border-left-color:var(--success)}.strct-toast--success strct-icon{color:var(--success)}.strct-toast--warning{border-left-color:var(--warning)}.strct-toast--warning strct-icon{color:var(--warning)}.strct-toast--critical{border-left-color:var(--critical)}.strct-toast--critical strct-icon{color:var(--critical)}@keyframes strct-toast-in{0%{opacity:0;transform:translate(16px)}}\n"] }]
         }] });
 
-/*
+/**
  * Public API surface of the strct UI library.
  */
 // Theme
@@ -6146,5 +7017,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
 //# sourceMappingURL=akcelik-strct.mjs.map