@akcelik/strct 4.14.0 → 4.16.0

package/fesm2022/akcelik-strct.mjs

@@ -2113,6 +2113,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  *   <strct-avatar name="Ada Lovelace" status="online" />
  */
 class StrctAvatar {
+    /**
+     * An icon instead of initials — a group, an assistant, a brand mark. An
+     * `src` image still wins.
+     */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** `square` for a thing rather than a person (a group, an app). */
+    shape = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Surface tone. `neutral` keeps the default grey tile. */
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** The icon scales with the avatar. */
+    iconSize = computed(() => this.size() === 'lg' ? 22 : this.size() === 'sm' ? 13 : 17, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     /** Image URL. */
     src = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
@@ -2135,22 +2150,30 @@ class StrctAvatar {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAvatar, isStandalone: true, selector: "strct-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-av--sm": "size() === 'sm'", "class.strct-av--lg": "size() === 'lg'", "class.strct-av--online": "status() === 'online'", "class.strct-av--busy": "status() === 'busy'", "class.strct-av--offline": "status() === 'offline'", "attr.title": "name() || null" }, classAttribute: "strct-av" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAvatar, isStandalone: true, selector: "strct-avatar", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-av--square": "shape() === 'square'", "attr.data-tone": "tone()", "class.strct-av--sm": "size() === 'sm'", "class.strct-av--lg": "size() === 'lg'", "class.strct-av--online": "status() === 'online'", "class.strct-av--busy": "status() === 'busy'", "class.strct-av--offline": "status() === 'offline'", "attr.title": "name() || null" }, classAttribute: "strct-av" }, ngImport: i0, template: `
     @if (src()) {
       <img class="strct-av__img" [src]="src()" [alt]="name()" />
+    } @else if (icon()) {
+      <!-- Not every avatar is a person with initials: a group, an assistant, a
+           brand mark. -->
+      <strct-icon class="strct-av__icon" [name]="icon()" [size]="iconSize()" />
     } @else {
       <span class="strct-av__initials">{{ initials() }}</span>
     }
     @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:12px}.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;inset-inline-end:-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 });
+  `, 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--square,.strct-av--square .strct-av__img{border-radius:var(--radius-md)}.strct-av__icon{line-height:0}.strct-av[data-tone=accent]{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-av[data-tone=accent-soft]{background:var(--acc-m);border-color:var(--acc30);color:var(--acc)}.strct-av[data-tone=success]{background:var(--success);border-color:transparent;color:var(--inv)}.strct-av[data-tone=warning]{background:var(--warning);border-color:transparent;color:var(--inv)}.strct-av[data-tone=critical]{background:var(--critical);border-color:transparent;color:var(--inv)}.strct-av--sm{width:26px;height:26px;font-size:12px}.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;inset-inline-end:-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"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAvatar, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+            args: [{ selector: 'strct-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
     @if (src()) {
       <img class="strct-av__img" [src]="src()" [alt]="name()" />
+    } @else if (icon()) {
+      <!-- Not every avatar is a person with initials: a group, an assistant, a
+           brand mark. -->
+      <strct-icon class="strct-av__icon" [name]="icon()" [size]="iconSize()" />
     } @else {
       <span class="strct-av__initials">{{ initials() }}</span>
     }
@@ -2159,14 +2182,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     }
   `, host: {
                         class: 'strct-av',
+                        '[class.strct-av--square]': "shape() === 'square'",
+                        '[attr.data-tone]': 'tone()',
                         '[class.strct-av--sm]': "size() === 'sm'",
                         '[class.strct-av--lg]': "size() === 'lg'",
                         '[class.strct-av--online]': "status() === 'online'",
                         '[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:12px}.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;inset-inline-end:-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 }] }] } });
+                    }, 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--square,.strct-av--square .strct-av__img{border-radius:var(--radius-md)}.strct-av__icon{line-height:0}.strct-av[data-tone=accent]{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-av[data-tone=accent-soft]{background:var(--acc-m);border-color:var(--acc30);color:var(--acc)}.strct-av[data-tone=success]{background:var(--success);border-color:transparent;color:var(--inv)}.strct-av[data-tone=warning]{background:var(--warning);border-color:transparent;color:var(--inv)}.strct-av[data-tone=critical]{background:var(--critical);border-color:transparent;color:var(--inv)}.strct-av--sm{width:26px;height:26px;font-size:12px}.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;inset-inline-end:-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: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], 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" />`.
@@ -3979,6 +4004,11 @@ class StrctTree {
      */
     density = input('compact', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    /** A bordered surface around the tree — for a picker inside a dialog. */
+    framed = input(false, { ...(ngDevMode ? { debugName: "framed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Caps the height in px; the tree scrolls inside its frame. */
+    maxHeight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
     /** Per-node right-click menu resolver. */
     nodeMenu = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nodeMenu" }] : /* istanbul ignore next */ []));
@@ -4347,7 +4377,7 @@ class StrctTree {
         this.expandedChange.emit([...this.currentSet()]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, nodeMenu: { classPropertyName: "nodeMenu", publicName: "nodeMenu", isSignal: true, isRequired: false, transformFunction: null }, canDrag: { classPropertyName: "canDrag", publicName: "canDrag", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null }, dragExpandDelay: { classPropertyName: "dragExpandDelay", publicName: "dragExpandDelay", isSignal: true, isRequired: false, transformFunction: null }, chevronAriaLabel: { classPropertyName: "chevronAriaLabel", publicName: "chevronAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeDrop: "nodeDrop", nodeActivated: "nodeActivated", nodeMenuSelect: "nodeMenuSelect", expandedIds: "expandedIdsChange", expandedChange: "expandedChange", nodeToggled: "nodeToggled" }, host: { attributes: { "role": "tree" }, properties: { "class.strct-tree--comfortable": "density() === 'comfortable'" }, classAttribute: "strct-tree" }, queries: [{ propertyName: "projectedNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, framed: { classPropertyName: "framed", publicName: "framed", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, nodeMenu: { classPropertyName: "nodeMenu", publicName: "nodeMenu", isSignal: true, isRequired: false, transformFunction: null }, canDrag: { classPropertyName: "canDrag", publicName: "canDrag", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null }, dragExpandDelay: { classPropertyName: "dragExpandDelay", publicName: "dragExpandDelay", isSignal: true, isRequired: false, transformFunction: null }, chevronAriaLabel: { classPropertyName: "chevronAriaLabel", publicName: "chevronAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeDrop: "nodeDrop", nodeActivated: "nodeActivated", nodeMenuSelect: "nodeMenuSelect", expandedIds: "expandedIdsChange", expandedChange: "expandedChange", nodeToggled: "nodeToggled" }, host: { attributes: { "role": "tree" }, properties: { "class.strct-tree--comfortable": "density() === 'comfortable'", "class.strct-tree--framed": "framed()", "style.max-height.px": "maxHeight()" }, classAttribute: "strct-tree" }, queries: [{ propertyName: "projectedNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
     @if (nodes(); as ns) {
       @for (n of ns; track n.id ?? n.label) {
         <strct-tree-node
@@ -4360,7 +4390,7 @@ class StrctTree {
     } @else {
       <ng-content />
     }
-  `, isInline: true, styles: [".strct-tree{display:block}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tree{display:block}.strct-tree--framed{border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);padding:var(--space-1)}.strct-tree[style*=max-height]{overflow:auto}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTree, decorators: [{
             type: Component,
@@ -4381,8 +4411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-tree',
                         role: 'tree',
                         '[class.strct-tree--comfortable]': "density() === 'comfortable'",
-                    }, styles: [".strct-tree{display:block}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], canDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrag", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], dragExpandDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragExpandDelay", required: false }] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], chevronAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronAriaLabel", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }], projectedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
+                        '[class.strct-tree--framed]': 'framed()',
+                        '[style.max-height.px]': 'maxHeight()',
+                    }, styles: [".strct-tree{display:block}.strct-tree--framed{border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);padding:var(--space-1)}.strct-tree[style*=max-height]{overflow:auto}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], framed: [{ type: i0.Input, args: [{ isSignal: true, alias: "framed", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], canDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrag", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], dragExpandDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragExpandDelay", required: false }] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], chevronAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronAriaLabel", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }], projectedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
 
 /**
  * Dev-mode diagnostics for combinations a component accepts but cannot honour.
@@ -12073,6 +12105,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
+/**
+ * Default accessible text per status, used when `label` is not given
+ * (localizable — override via `label`). The canonical `StrctStatus` vocabulary
+ * has no 'ok'/'info': OK maps to 'success', info to 'accent'.
+ */
+const DEFAULT_LABEL = {
+    neutral: 'Neutral',
+    accent: 'Info',
+    success: 'OK',
+    warning: 'Warning',
+    critical: 'Critical',
+};
+/**
+ * Presence/state dot that never relies on colour alone: the tone is painted by
+ * a pure-CSS dot while the state is also rendered as visually-hidden text, so
+ * screen readers (and colour-blind users copying text) get "Warning", not just
+ * a yellow circle. Use it inside avatars, menu rows, metric tiles — anywhere a
+ * bare coloured dot would otherwise carry meaning.
+ *
+ *   <strct-status-dot status="success" />
+ *   <strct-status-dot status="critical" size="sm" label="Node unreachable" />
+ */
+class StrctStatusDot {
+    /** Status tone (canonical vocabulary: OK = 'success', info = 'accent'). */
+    status = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible text describing the state (localizable). Empty falls back to a
+     * per-status default ("OK", "Warning", …) so the dot is never color-only.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Dot size: `sm` for dense rows, `md` standalone. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Something happening *now* — a task running, a live chart. The halo pulses
+     * once a second; the dot itself never changes size, so a column of dots does
+     * not jitter. Under `prefers-reduced-motion` the halo is a static ring.
+     */
+    pulse = input(false, { ...(ngDevMode ? { debugName: "pulse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    text = computed(() => this.label() || DEFAULT_LABEL[this.status()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctStatusDot, isStandalone: true, selector: "strct-status-dot", inputs: { 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 }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dot--accent": "status() === 'accent'", "class.strct-dot--success": "status() === 'success'", "class.strct-dot--warning": "status() === 'warning'", "class.strct-dot--critical": "status() === 'critical'", "class.strct-dot--sm": "size() === 'sm'", "class.strct-dot--pulse": "pulse()" }, classAttribute: "strct-dot" }, ngImport: i0, template: `
+    <span class="strct-dot__dot" aria-hidden="true"></span>
+    <span class="strct-dot__sr">{{ text() }}</span>
+  `, isInline: true, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-status-dot', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <span class="strct-dot__dot" aria-hidden="true"></span>
+    <span class="strct-dot__sr">{{ text() }}</span>
+  `, host: {
+                        class: 'strct-dot',
+                        '[class.strct-dot--accent]': "status() === 'accent'",
+                        '[class.strct-dot--success]': "status() === 'success'",
+                        '[class.strct-dot--warning]': "status() === 'warning'",
+                        '[class.strct-dot--critical]': "status() === 'critical'",
+                        '[class.strct-dot--sm]': "size() === 'sm'",
+                        '[class.strct-dot--pulse]': 'pulse()',
+                    }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }] } });
+
 /**
  * Compact definition list: aligned `label : value` rows with an optional trailing
  * slot. The `inline` variant is the horizontal "stat strip" (label-value pairs in
@@ -12097,8 +12194,11 @@ class StrctDescriptionList {
     /** Value alignment in stacked mode. */
     align = input('between', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Fixes the label column of `align="grid"` (e.g. `'160px'`). */
+    labelWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDescriptionList, isStandalone: true, selector: "strct-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dl--inline": "inline()", "class.strct-dl--start": "align() === 'start'" }, classAttribute: "strct-dl" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDescriptionList, isStandalone: true, selector: "strct-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dl--inline": "inline()", "class.strct-dl--start": "align() === 'start'", "class.strct-dl--grid": "align() === 'grid'", "style.--strct-dl-label-w": "labelWidth()" }, classAttribute: "strct-dl" }, ngImport: i0, template: `
     <dl class="strct-dl__list">
       @for (item of items(); track $index) {
         <div
@@ -12112,7 +12212,7 @@ class StrctDescriptionList {
       }
       <ng-content />
     </dl>
-  `, isInline: true, styles: [".strct-dl{display:flex;flex-direction:column;min-width:0}.strct-dl__list{display:flex;flex-direction:column;margin:0;padding:0;min-width:0}.strct-dl--inline .strct-dl__list{flex-direction:row;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:flex-start}.strct-desc{display:flex;align-items:baseline;gap:var(--space-3);padding:6px 0;font-size:var(--text-md);min-width:0}.strct-dl:not(.strct-dl--inline) .strct-desc{justify-content:space-between}.strct-dl:not(.strct-dl--inline) .strct-desc+.strct-desc{border-top:1px solid var(--b1)}.strct-dl--start .strct-desc{justify-content:flex-start}.strct-dl--inline .strct-desc{flex-direction:column;align-items:flex-start;gap:3px;padding:0}.strct-desc__label{color:var(--t3);font-size:var(--text-sm);font-weight:500;flex-shrink:0;white-space:nowrap}.strct-desc__value{margin:0;color:var(--t1);min-width:0;text-align:end}.strct-dl--inline .strct-desc__value,.strct-dl--start .strct-desc__value{text-align:start}.strct-desc--mono .strct-desc__value{font-family:var(--mono);font-size:var(--text-sm)}.strct-desc--muted .strct-desc__value{color:var(--t3)}.strct-desc__value:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dl{display:flex;flex-direction:column;min-width:0}.strct-dl__list{display:flex;flex-direction:column;margin:0;padding:0;min-width:0}.strct-dl--inline .strct-dl__list{flex-direction:row;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:flex-start}.strct-desc{display:flex;align-items:baseline;gap:var(--space-3);padding:6px 0;font-size:var(--text-md);min-width:0}.strct-dl:not(.strct-dl--inline) .strct-desc{justify-content:space-between}.strct-dl:not(.strct-dl--inline) .strct-desc+.strct-desc{border-top:1px solid var(--b1)}.strct-dl--start .strct-desc{justify-content:flex-start}.strct-dl--inline .strct-desc{flex-direction:column;align-items:flex-start;gap:3px;padding:0}.strct-desc__label{color:var(--t3);font-size:var(--text-sm);font-weight:500;flex-shrink:0;white-space:nowrap}.strct-desc__value{margin:0;color:var(--t1);min-width:0;text-align:end}.strct-dl--inline .strct-desc__value,.strct-dl--start .strct-desc__value{text-align:start}.strct-desc--mono .strct-desc__value{font-family:var(--mono);font-size:var(--text-sm)}.strct-desc--muted .strct-desc__value{color:var(--t3)}.strct-desc__value:empty{display:none}.strct-dl--grid .strct-dl__list{display:grid;grid-template-columns:var(--strct-dl-label-w, max-content) minmax(0,1fr);column-gap:var(--space-4)}.strct-dl--grid .strct-desc{display:contents}.strct-dl--grid .strct-desc__label,.strct-dl--grid .strct-desc__value{padding:6px 0;text-align:start}.strct-dl--grid .strct-desc+.strct-desc>.strct-desc__label,.strct-dl--grid .strct-desc+.strct-desc>.strct-desc__value{border-top:1px solid var(--b1)}.strct-desc__label{display:inline-flex;align-items:center;gap:6px}.strct-desc__note{display:block;margin-top:1px;font-size:var(--text-sm);color:var(--t3)}.strct-desc__note:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDescriptionList, decorators: [{
             type: Component,
@@ -12134,8 +12234,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-dl',
                         '[class.strct-dl--inline]': 'inline()',
                         '[class.strct-dl--start]': "align() === 'start'",
-                    }, styles: [".strct-dl{display:flex;flex-direction:column;min-width:0}.strct-dl__list{display:flex;flex-direction:column;margin:0;padding:0;min-width:0}.strct-dl--inline .strct-dl__list{flex-direction:row;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:flex-start}.strct-desc{display:flex;align-items:baseline;gap:var(--space-3);padding:6px 0;font-size:var(--text-md);min-width:0}.strct-dl:not(.strct-dl--inline) .strct-desc{justify-content:space-between}.strct-dl:not(.strct-dl--inline) .strct-desc+.strct-desc{border-top:1px solid var(--b1)}.strct-dl--start .strct-desc{justify-content:flex-start}.strct-dl--inline .strct-desc{flex-direction:column;align-items:flex-start;gap:3px;padding:0}.strct-desc__label{color:var(--t3);font-size:var(--text-sm);font-weight:500;flex-shrink:0;white-space:nowrap}.strct-desc__value{margin:0;color:var(--t1);min-width:0;text-align:end}.strct-dl--inline .strct-desc__value,.strct-dl--start .strct-desc__value{text-align:start}.strct-desc--mono .strct-desc__value{font-family:var(--mono);font-size:var(--text-sm)}.strct-desc--muted .strct-desc__value{color:var(--t3)}.strct-desc__value:empty{display:none}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+                        '[class.strct-dl--grid]': "align() === 'grid'",
+                        '[style.--strct-dl-label-w]': 'labelWidth()',
+                    }, styles: [".strct-dl{display:flex;flex-direction:column;min-width:0}.strct-dl__list{display:flex;flex-direction:column;margin:0;padding:0;min-width:0}.strct-dl--inline .strct-dl__list{flex-direction:row;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:flex-start}.strct-desc{display:flex;align-items:baseline;gap:var(--space-3);padding:6px 0;font-size:var(--text-md);min-width:0}.strct-dl:not(.strct-dl--inline) .strct-desc{justify-content:space-between}.strct-dl:not(.strct-dl--inline) .strct-desc+.strct-desc{border-top:1px solid var(--b1)}.strct-dl--start .strct-desc{justify-content:flex-start}.strct-dl--inline .strct-desc{flex-direction:column;align-items:flex-start;gap:3px;padding:0}.strct-desc__label{color:var(--t3);font-size:var(--text-sm);font-weight:500;flex-shrink:0;white-space:nowrap}.strct-desc__value{margin:0;color:var(--t1);min-width:0;text-align:end}.strct-dl--inline .strct-desc__value,.strct-dl--start .strct-desc__value{text-align:start}.strct-desc--mono .strct-desc__value{font-family:var(--mono);font-size:var(--text-sm)}.strct-desc--muted .strct-desc__value{color:var(--t3)}.strct-desc__value:empty{display:none}.strct-dl--grid .strct-dl__list{display:grid;grid-template-columns:var(--strct-dl-label-w, max-content) minmax(0,1fr);column-gap:var(--space-4)}.strct-dl--grid .strct-desc{display:contents}.strct-dl--grid .strct-desc__label,.strct-dl--grid .strct-desc__value{padding:6px 0;text-align:start}.strct-dl--grid .strct-desc+.strct-desc>.strct-desc__label,.strct-dl--grid .strct-desc+.strct-desc>.strct-desc__value{border-top:1px solid var(--b1)}.strct-desc__label{display:inline-flex;align-items:center;gap:6px}.strct-desc__note{display:block;margin-top:1px;font-size:var(--text-sm);color:var(--t3)}.strct-desc__note:empty{display:none}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }] } });
 /**
  * One projected `label → value` row inside a `<strct-description-list>`. The
  * value is whatever you project, so it can host a badge, icon or formatted text.
@@ -12148,11 +12250,36 @@ class StrctDesc {
     mono = input(false, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Dim the projected value. */
     muted = input(false, { ...(ngDevMode ? { debugName: "muted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A status dot before the label — "Agent · connected". */
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Accessible text for that dot; empty falls back to the per-status default. */
+    statusLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusLabel" }] : /* istanbul ignore next */ []));
+    /** A leading icon before the label. */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** A quiet second line under the value — "last seen 12 s ago". */
+    note = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDesc, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctDesc, isStandalone: true, selector: "strct-desc", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-desc--mono": "mono()", "class.strct-desc--muted": "muted()" }, classAttribute: "strct-desc" }, ngImport: i0, template: `
-    <dt class="strct-desc__label">{{ label() }}</dt>
-    <dd class="strct-desc__value"><ng-content /></dd>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDesc, isStandalone: true, selector: "strct-desc", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-desc--mono": "mono()", "class.strct-desc--muted": "muted()" }, classAttribute: "strct-desc" }, ngImport: i0, template: `
+    <dt class="strct-desc__label">
+      @if (status()) {
+        <strct-status-dot size="sm" [status]="status()!" [label]="statusLabel()" />
+      }
+      @if (icon()) {
+        <strct-icon [name]="icon()" [size]="14" />
+      }
+      {{ label() }}
+    </dt>
+    <dd class="strct-desc__value">
+      <ng-content />
+      @if (note()) {
+        <span class="strct-desc__note">{{ note() }}</span>
+      }
+    </dd>
+  `, isInline: true, dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctStatusDot, selector: "strct-status-dot", inputs: ["status", "label", "size", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDesc, decorators: [{
             type: Component,
@@ -12160,9 +12287,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     selector: 'strct-desc',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    imports: [StrctIcon, StrctStatusDot],
                     template: `
-    <dt class="strct-desc__label">{{ label() }}</dt>
-    <dd class="strct-desc__value"><ng-content /></dd>
+    <dt class="strct-desc__label">
+      @if (status()) {
+        <strct-status-dot size="sm" [status]="status()!" [label]="statusLabel()" />
+      }
+      @if (icon()) {
+        <strct-icon [name]="icon()" [size]="14" />
+      }
+      {{ label() }}
+    </dt>
+    <dd class="strct-desc__value">
+      <ng-content />
+      @if (note()) {
+        <span class="strct-desc__note">{{ note() }}</span>
+      }
+    </dd>
   `,
                     host: {
                         class: 'strct-desc',
@@ -12170,7 +12311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-desc--muted]': 'muted()',
                     },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }] } });
 
 /**
  * Per-column cell template for `strct-table` / `strct-datagrid`. The column key
@@ -17439,6 +17580,14 @@ class StrctDonut {
     ...(ngDevMode ? [{ debugName: "centerLabel" }] : /* istanbul ignore next */ []));
     /** Show a legend (color · label · value · %) beside the ring. */
     legend = input(false, { ...(ngDevMode ? { debugName: "legend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where the legend sits: beside the ring, or under it. */
+    legendPosition = input('side', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * A zero-value category keeps its legend row, muted — "0 failed" is
+     * information. Set it false to drop those rows instead.
+     */
+    keepEmpty = input(true, { ...(ngDevMode ? { debugName: "keepEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Gap between slices, in degrees. */
     gap = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
@@ -17477,6 +17626,12 @@ class StrctDonut {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
+    /** The rows the legend shows — every arc, or only the non-empty ones. */
+    legendArcs = computed(() => {
+        const rows = this.arcs().map((arc, index) => ({ ...arc, index }));
+        return this.keepEmpty() ? rows : rows.filter((r) => r.value !== 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendArcs" }] : /* istanbul ignore next */ []));
     centerMain = computed(() => {
         const h = this.hovered();
         if (h !== null)
@@ -17512,7 +17667,7 @@ class StrctDonut {
         this.hovered.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-donut" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, keepEmpty: { classPropertyName: "keepEmpty", publicName: "keepEmpty", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-donut--legend-below": "legendPosition() === 'below'" }, classAttribute: "strct-donut" }, ngImport: i0, template: `
     <div class="strct-donut__layout">
       <div class="strct-donut__wrap" [style.width.px]="size()" [style.height.px]="size()">
         <svg
@@ -17561,12 +17716,13 @@ class StrctDonut {
 
       @if (legend()) {
         <ul class="strct-donut__legend">
-          @for (arc of arcs(); track $index) {
+          @for (arc of legendArcs(); track arc.index) {
             <li
               class="strct-donut__leg"
-              [class.is-active]="hovered() === $index"
-              [class.is-dim]="hovered() !== null && hovered() !== $index"
-              (pointerenter)="enter($index)"
+              [class.is-active]="hovered() === arc.index"
+              [class.is-dim]="hovered() !== null && hovered() !== arc.index"
+              [class.is-empty]="arc.value === 0"
+              (pointerenter)="enter(arc.index)"
               (pointerleave)="leave()"
             >
               <span class="strct-donut__swatch" [style.background]="arc.color"></span>
@@ -17578,7 +17734,7 @@ class StrctDonut {
         </ul>
       }
     </div>
-  `, isInline: true, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut--legend-below .strct-donut__layout{flex-direction:column;align-items:center;gap:12px}.strct-donut__leg.is-empty{opacity:.55}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDonut, decorators: [{
             type: Component,
@@ -17631,12 +17787,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
       @if (legend()) {
         <ul class="strct-donut__legend">
-          @for (arc of arcs(); track $index) {
+          @for (arc of legendArcs(); track arc.index) {
             <li
               class="strct-donut__leg"
-              [class.is-active]="hovered() === $index"
-              [class.is-dim]="hovered() !== null && hovered() !== $index"
-              (pointerenter)="enter($index)"
+              [class.is-active]="hovered() === arc.index"
+              [class.is-dim]="hovered() !== null && hovered() !== arc.index"
+              [class.is-empty]="arc.value === 0"
+              (pointerenter)="enter(arc.index)"
               (pointerleave)="leave()"
             >
               <span class="strct-donut__swatch" [style.background]="arc.color"></span>
@@ -17648,8 +17805,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </ul>
       }
     </div>
-  `, host: { class: 'strct-donut' }, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"] }]
-        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+  `, host: {
+                        class: 'strct-donut',
+                        '[class.strct-donut--legend-below]': "legendPosition() === 'below'",
+                    }, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut--legend-below .strct-donut__layout{flex-direction:column;align-items:center;gap:12px}.strct-donut__leg.is-empty{opacity:.55}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"] }]
+        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], keepEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepEmpty", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
 
 const COLOR$1 = {
     accent: 'var(--acc)',
@@ -21893,71 +22053,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-/**
- * Default accessible text per status, used when `label` is not given
- * (localizable — override via `label`). The canonical `StrctStatus` vocabulary
- * has no 'ok'/'info': OK maps to 'success', info to 'accent'.
- */
-const DEFAULT_LABEL = {
-    neutral: 'Neutral',
-    accent: 'Info',
-    success: 'OK',
-    warning: 'Warning',
-    critical: 'Critical',
-};
-/**
- * Presence/state dot that never relies on colour alone: the tone is painted by
- * a pure-CSS dot while the state is also rendered as visually-hidden text, so
- * screen readers (and colour-blind users copying text) get "Warning", not just
- * a yellow circle. Use it inside avatars, menu rows, metric tiles — anywhere a
- * bare coloured dot would otherwise carry meaning.
- *
- *   <strct-status-dot status="success" />
- *   <strct-status-dot status="critical" size="sm" label="Node unreachable" />
- */
-class StrctStatusDot {
-    /** Status tone (canonical vocabulary: OK = 'success', info = 'accent'). */
-    status = input('neutral', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    /**
-     * Accessible text describing the state (localizable). Empty falls back to a
-     * per-status default ("OK", "Warning", …) so the dot is never color-only.
-     */
-    label = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Dot size: `sm` for dense rows, `md` standalone. */
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /**
-     * Something happening *now* — a task running, a live chart. The halo pulses
-     * once a second; the dot itself never changes size, so a column of dots does
-     * not jitter. Under `prefers-reduced-motion` the halo is a static ring.
-     */
-    pulse = input(false, { ...(ngDevMode ? { debugName: "pulse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    text = computed(() => this.label() || DEFAULT_LABEL[this.status()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctStatusDot, isStandalone: true, selector: "strct-status-dot", inputs: { 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 }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dot--accent": "status() === 'accent'", "class.strct-dot--success": "status() === 'success'", "class.strct-dot--warning": "status() === 'warning'", "class.strct-dot--critical": "status() === 'critical'", "class.strct-dot--sm": "size() === 'sm'", "class.strct-dot--pulse": "pulse()" }, classAttribute: "strct-dot" }, ngImport: i0, template: `
-    <span class="strct-dot__dot" aria-hidden="true"></span>
-    <span class="strct-dot__sr">{{ text() }}</span>
-  `, isInline: true, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-status-dot', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <span class="strct-dot__dot" aria-hidden="true"></span>
-    <span class="strct-dot__sr">{{ text() }}</span>
-  `, host: {
-                        class: 'strct-dot',
-                        '[class.strct-dot--accent]': "status() === 'accent'",
-                        '[class.strct-dot--success]': "status() === 'success'",
-                        '[class.strct-dot--warning]': "status() === 'warning'",
-                        '[class.strct-dot--critical]': "status() === 'critical'",
-                        '[class.strct-dot--sm]': "size() === 'sm'",
-                        '[class.strct-dot--pulse]': 'pulse()',
-                    }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }] } });
-
 const DEFAULT_LABELS = {
     live: 'Live',
     liveEvery: (s) => `Live · updates every ${s} s`,
@@ -22064,6 +22159,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-live[data-state=reconnecting] .strct-live__text,.strct-live[data-state=stale] .strct-live__text{color:var(--warning)}.strct-live .strct-dot__sr{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], updatedAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatedAt", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
 
+/**
+ * A chart's key is a component. The same swatch · label · value rows serve a
+ * line chart's series picker, a diagram's edge styles and a donut's categories
+ * — instead of 9px squares with inline backgrounds written per screen.
+ *
+ *   <strct-legend [items]="series" orientation="vertical" />
+ *   <strct-legend [items]="edges" interactive (itemToggle)="toggle($event)" />
+ *
+ * A category with zero items still belongs in the key: pass it `muted`, because
+ * "0 failed" is information.
+ */
+class StrctLegend {
+    /** The rows of the key. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** `vertical` stacks the rows and aligns their values. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Rows become toggle buttons carrying `aria-pressed`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The label of the row that was toggled. */
+    itemToggle = output();
+    /** The status vocabulary's own tokens — 'accent' is `--acc`, not `--accent`. */
+    static TONE = {
+        neutral: 'var(--t3)',
+        accent: 'var(--acc)',
+        success: 'var(--success)',
+        warning: 'var(--warning)',
+        critical: 'var(--critical)',
+    };
+    swatchColor(item) {
+        return item.color ?? StrctLegend.TONE[item.status ?? 'accent'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctLegend, isStandalone: true, selector: "strct-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemToggle: "itemToggle" }, host: { properties: { "class.strct-legend--vertical": "orientation() === 'vertical'" }, classAttribute: "strct-legend" }, ngImport: i0, template: `
+    <ul class="strct-legend__list" role="list">
+      @for (item of items(); track item.label) {
+        <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
+          @if (interactive()) {
+            <button
+              type="button"
+              class="strct-legend__hit"
+              [attr.aria-pressed]="!item.off"
+              (click)="itemToggle.emit(item.label)"
+            >
+              <span
+                class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+                [style.--strct-legend-color]="swatchColor(item)"
+                aria-hidden="true"
+              ></span>
+              <span class="strct-legend__label">{{ item.label }}</span>
+              @if (item.value !== undefined) {
+                <span class="strct-legend__value">{{ item.value }}</span>
+              }
+            </button>
+          } @else {
+            <span
+              class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+              [style.--strct-legend-color]="swatchColor(item)"
+              aria-hidden="true"
+            ></span>
+            <span class="strct-legend__label">{{ item.label }}</span>
+            @if (item.value !== undefined) {
+              <span class="strct-legend__value">{{ item.value }}</span>
+            }
+          }
+        </li>
+      }
+    </ul>
+  `, isInline: true, styles: [".strct-legend{display:block;font-size:var(--text-sm);color:var(--t2)}.strct-legend__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}.strct-legend--vertical .strct-legend__list{flex-direction:column;flex-wrap:nowrap;gap:2px}.strct-legend__row{display:flex;align-items:center;gap:7px;min-width:0}.strct-legend__row--muted{opacity:.55}.strct-legend__hit{display:flex;align-items:center;gap:7px;min-width:0;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;cursor:pointer}.strct-legend__hit:hover{background:var(--bg-3)}.strct-legend__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-legend__hit[aria-pressed=false]{opacity:.45}.strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:line-through}.strct-legend__swatch{flex:none;background:var(--strct-legend-color, var(--t3))}.strct-legend__swatch--square{width:9px;height:9px;border-radius:2px}.strct-legend__swatch--dot{width:9px;height:9px;border-radius:50%}.strct-legend__swatch--line{width:14px;height:2px;border-radius:1px}.strct-legend__swatch--dash{width:14px;height:2px;background:repeating-linear-gradient(to right,var(--strct-legend-color, var(--t3)) 0 4px,transparent 4px 7px)}.strct-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-legend__value{margin-inline-start:auto;padding-inline-start:8px;color:var(--t3);font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLegend, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-legend', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <ul class="strct-legend__list" role="list">
+      @for (item of items(); track item.label) {
+        <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
+          @if (interactive()) {
+            <button
+              type="button"
+              class="strct-legend__hit"
+              [attr.aria-pressed]="!item.off"
+              (click)="itemToggle.emit(item.label)"
+            >
+              <span
+                class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+                [style.--strct-legend-color]="swatchColor(item)"
+                aria-hidden="true"
+              ></span>
+              <span class="strct-legend__label">{{ item.label }}</span>
+              @if (item.value !== undefined) {
+                <span class="strct-legend__value">{{ item.value }}</span>
+              }
+            </button>
+          } @else {
+            <span
+              class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+              [style.--strct-legend-color]="swatchColor(item)"
+              aria-hidden="true"
+            ></span>
+            <span class="strct-legend__label">{{ item.label }}</span>
+            @if (item.value !== undefined) {
+              <span class="strct-legend__value">{{ item.value }}</span>
+            }
+          }
+        </li>
+      }
+    </ul>
+  `, host: {
+                        class: 'strct-legend',
+                        '[class.strct-legend--vertical]': "orientation() === 'vertical'",
+                    }, styles: [".strct-legend{display:block;font-size:var(--text-sm);color:var(--t2)}.strct-legend__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}.strct-legend--vertical .strct-legend__list{flex-direction:column;flex-wrap:nowrap;gap:2px}.strct-legend__row{display:flex;align-items:center;gap:7px;min-width:0}.strct-legend__row--muted{opacity:.55}.strct-legend__hit{display:flex;align-items:center;gap:7px;min-width:0;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;cursor:pointer}.strct-legend__hit:hover{background:var(--bg-3)}.strct-legend__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-legend__hit[aria-pressed=false]{opacity:.45}.strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:line-through}.strct-legend__swatch{flex:none;background:var(--strct-legend-color, var(--t3))}.strct-legend__swatch--square{width:9px;height:9px;border-radius:2px}.strct-legend__swatch--dot{width:9px;height:9px;border-radius:50%}.strct-legend__swatch--line{width:14px;height:2px;border-radius:1px}.strct-legend__swatch--dash{width:14px;height:2px;background:repeating-linear-gradient(to right,var(--strct-legend-color, var(--t3)) 0 4px,transparent 4px 7px)}.strct-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-legend__value{margin-inline-start:auto;padding-inline-start:8px;color:var(--t3);font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }] } });
+
 /**
  * A generic anchored overlay panel for arbitrary projected content — the
  * public primitive behind menus, signposts and rich pickers:
@@ -22624,7 +22833,7 @@ class StrctTreeSelect {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-tsel{position:relative;display:block;width:100%}.strct-tsel__field{position:relative}.strct-tsel__trigger{display:flex;align-items:center;gap:8px;padding-inline-end:30px;text-align:start;cursor:pointer}.strct-tsel__trigger--clearable{padding-inline-end:48px}.strct-tsel__trigger:disabled{cursor:not-allowed}.strct-tsel__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tsel__value--empty{color:var(--t3)}.strct-tsel__caret{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-tsel__clear{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer}.strct-tsel__clear:hover{color:var(--t1)}.strct-tsel__panel{z-index:var(--z-dropdown);max-height:260px;overflow-y:auto;padding:var(--space-1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shh)}.strct-tsel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctTree, selector: "strct-tree", inputs: ["nodes", "density", "nodeMenu", "canDrag", "canDrop", "dragExpandDelay", "chevronAriaLabel", "expandedIds"], outputs: ["nodeDrop", "nodeActivated", "nodeMenuSelect", "expandedIdsChange", "expandedChange", "nodeToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tsel{position:relative;display:block;width:100%}.strct-tsel__field{position:relative}.strct-tsel__trigger{display:flex;align-items:center;gap:8px;padding-inline-end:30px;text-align:start;cursor:pointer}.strct-tsel__trigger--clearable{padding-inline-end:48px}.strct-tsel__trigger:disabled{cursor:not-allowed}.strct-tsel__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tsel__value--empty{color:var(--t3)}.strct-tsel__caret{position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-tsel__clear{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer}.strct-tsel__clear:hover{color:var(--t1)}.strct-tsel__panel{z-index:var(--z-dropdown);max-height:260px;overflow-y:auto;padding:var(--space-1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shh)}.strct-tsel__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctTree, selector: "strct-tree", inputs: ["nodes", "density", "framed", "maxHeight", "nodeMenu", "canDrag", "canDrop", "dragExpandDelay", "chevronAriaLabel", "expandedIds"], outputs: ["nodeDrop", "nodeActivated", "nodeMenuSelect", "expandedIdsChange", "expandedChange", "nodeToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTreeSelect, decorators: [{
             type: Component,
@@ -23930,5 +24139,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map