@akcelik/strct 4.15.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
@@ -21912,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`,
@@ -22757,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,