@akcelik/strct 4.2.1 → 4.4.0

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, Injector, viewChildren, Renderer2, Pipe, PLATFORM_ID, afterRenderEffect } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, Injector, viewChildren, Renderer2, Pipe, afterRenderEffect } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -2791,6 +2791,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['contextmenu', ['$event']]
             }] } });
 
+/**
+ * Screen-reader announcements for state changes that have no visible text —
+ * "12 rows loaded", "Snapshot created" (Material's LiveAnnouncer, strct-sized):
+ *
+ *   private announcer = inject(StrctAnnouncer);
+ *   this.announcer.announce('12 rows loaded');
+ *
+ * Maintains one visually-hidden live region per politeness level; repeated
+ * identical messages are re-announced (the region is cleared first).
+ */
+class StrctAnnouncer {
+    regions = new Map();
+    clearTimers = new Map();
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    announce(message, politeness = 'polite') {
+        if (!this.isBrowser)
+            return;
+        const region = this.regionFor(politeness);
+        // Clear first so identical consecutive messages still fire.
+        region.textContent = '';
+        setTimeout(() => (region.textContent = message));
+        clearTimeout(this.clearTimers.get(politeness));
+        // Stale announcements should not linger for the next SR user to stumble on.
+        this.clearTimers.set(politeness, setTimeout(() => (region.textContent = ''), 10_000));
+    }
+    regionFor(politeness) {
+        let region = this.regions.get(politeness);
+        if (!region) {
+            region = document.createElement('div');
+            region.setAttribute('aria-live', politeness);
+            region.setAttribute('aria-atomic', 'true');
+            region.className = 'strct-announcer';
+            region.style.cssText =
+                'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
+            document.body.appendChild(region);
+            this.regions.set(politeness, region);
+        }
+        return region;
+    }
+    ngOnDestroy() {
+        for (const timer of this.clearTimers.values())
+            clearTimeout(timer);
+        this.clearTimers.clear();
+        for (const region of this.regions.values())
+            region.remove();
+        this.regions.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /** Default chevron aria-label factory — mirrors the `chevronAriaLabel` input default. */
 const defaultChevronAriaLabel = (expanded, label) => `${expanded ? 'Collapse' : 'Expand'} ${label}`;
 let treeNodeCounter = 0;
@@ -2831,6 +2886,67 @@ class StrctTreeNode {
     nodeActivated = output();
     /** Data-mode right-click menu selection (bubbles to the tree). */
     nodeMenuSelect = output();
+    /** Whether this row can be picked up — the tree asks the consumer's `canDrag`.
+     *  Reads `nodes()` too, so a refresh that makes a node movable is honoured. */
+    isDraggable = computed(() => {
+        const n = this.node();
+        this.tree?.nodes();
+        return !!n && !!this.tree?.canDragNode(n);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDraggable" }] : /* istanbul ignore next */ []));
+    isDragSource = computed(() => {
+        const n = this.node();
+        return !!n && !!this.tree?.isDragSource(n);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragSource" }] : /* istanbul ignore next */ []));
+    isDropTarget = computed(() => {
+        const n = this.node();
+        return !!n && !!this.tree?.isDropTarget(n);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDropTarget" }] : /* istanbul ignore next */ []));
+    onDragStart(event) {
+        const n = this.node();
+        if (!n || !this.tree || !this.isDraggable())
+            return;
+        event.stopPropagation();
+        // Firefox starts no drag without data on the transfer.
+        event.dataTransfer?.setData('text/plain', n.label);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+        this.tree.beginDrag(n);
+    }
+    onDragEnd() {
+        this.tree?.endDrag();
+    }
+    onDragOver(event) {
+        const n = this.node();
+        if (!n || !this.tree)
+            return;
+        event.stopPropagation();
+        this.tree.dragOver(n, event.clientY);
+        if (!this.tree.acceptsDrop(n)) {
+            // No preventDefault: the pointer keeps the browser's "not allowed" cursor.
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+    }
+    onDragLeave() {
+        const n = this.node();
+        if (n)
+            this.tree?.dragLeave(n);
+    }
+    onDrop(event) {
+        const n = this.node();
+        if (!n || !this.tree)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.tree.dropOn(n);
+    }
     /** Right-click menu items for this node ([] when no resolver / not data mode). */
     menuItems = computed(() => {
         const fn = this.nodeMenu();
@@ -2992,9 +3108,17 @@ class StrctTreeNode {
       [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
       [attr.aria-owns]="hasChildren() && isOpen() ? groupId : null"
+      [attr.draggable]="isDraggable() ? 'true' : null"
+      [class.strct-tnode__row--dragging]="isDragSource()"
+      [class.strct-tnode__row--droptarget]="isDropTarget()"
       [strctContextMenu]="menuItems()"
       [strctContextMenuData]="node()"
       (menuSelect)="onMenuSelect($event)"
+      (dragstart)="onDragStart($event)"
+      (dragend)="onDragEnd()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave()"
+      (drop)="onDrop($event)"
       (click)="onActivate()"
       (focus)="onRowFocus()"
       (keydown)="onRowKeydown($event)"
@@ -3045,7 +3169,7 @@ class StrctTreeNode {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-inline-start:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--dragging{opacity:.45}.strct-tnode__row--droptarget,.strct-tnode__row--droptarget:hover{background:var(--acc-s);outline:1px solid var(--acc);outline-offset:-1px}.strct-tnode__row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-inline-start:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTreeNode, decorators: [{
             type: Component,
@@ -3061,9 +3185,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
       [attr.aria-owns]="hasChildren() && isOpen() ? groupId : null"
+      [attr.draggable]="isDraggable() ? 'true' : null"
+      [class.strct-tnode__row--dragging]="isDragSource()"
+      [class.strct-tnode__row--droptarget]="isDropTarget()"
       [strctContextMenu]="menuItems()"
       [strctContextMenuData]="node()"
       (menuSelect)="onMenuSelect($event)"
+      (dragstart)="onDragStart($event)"
+      (dragend)="onDragEnd()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave()"
+      (drop)="onDrop($event)"
       (click)="onActivate()"
       (focus)="onRowFocus()"
       (keydown)="onRowKeydown($event)"
@@ -3120,7 +3252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         // siblings in the DOM, so the host must not appear in the a11y tree.
                         role: 'none',
                         '[attr.data-node-id]': 'node()?.id ?? null',
-                    }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-inline-start:16px}\n"] }]
+                    }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--dragging{opacity:.45}.strct-tnode__row--droptarget,.strct-tnode__row--droptarget:hover{background:var(--acc-s);outline:1px solid var(--acc);outline-offset:-1px}.strct-tnode__row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--t3);transition:transform .15s ease;width:24px;height:24px;margin:-5px;margin-inline-end:-10px;flex-shrink:0}.strct-tnode__chevron--open{transform:rotate(90deg)}[dir=rtl] .strct-tnode__chevron:not(.strct-tnode__chevron--open){transform:rotate(180deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}@media(prefers-reduced-motion:reduce){.strct-tnode__chevron{transition:none}}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-inline-start:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }], directChildNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
 /**
  * Root container for a tree. Either project `<strct-tree-node>` children, or
@@ -3141,6 +3273,29 @@ class StrctTree {
     /** Per-node right-click menu resolver. */
     nodeMenu = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nodeMenu" }] : /* istanbul ignore next */ []));
+    /**
+     * Which nodes can be picked up. Default: none, so a tree without this input
+     * behaves exactly as before. Asked again whenever `nodes` changes, because
+     * a refresh can make a node movable.
+     */
+    canDrag = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrag" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the dragged node may land, asked during `dragover`. A browser does
+     * not let `dragover` read the drag's data, so the tree keeps the source node
+     * and hands it to you here. Without this input nothing accepts a drop — the
+     * gesture belongs to the tree, the rule belongs to you.
+     *
+     * Two rules are built in whatever this returns: a node is never dropped on
+     * itself, and never into its own subtree (that would be a cycle).
+     */
+    canDrop = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrop" }] : /* istanbul ignore next */ []));
+    /** How long a collapsed node must be hovered mid-drag before it expands (ms). */
+    dragExpandDelay = input(700, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragExpandDelay" }] : /* istanbul ignore next */ []));
+    /** Emitted for an accepted drop only. */
+    nodeDrop = output();
     /** Accessible label of each node's chevron toggle; receives the expanded state and the node label. */
     chevronAriaLabel = input(defaultChevronAriaLabel, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chevronAriaLabel" }] : /* istanbul ignore next */ []));
@@ -3324,6 +3479,144 @@ class StrctTree {
             }
         }
     }
+    // ── Drag and drop ──────────────────────────────────────────────
+    announcer = inject(StrctAnnouncer);
+    hostEl = inject(ElementRef);
+    dragSourceNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragSourceNode" }] : /* istanbul ignore next */ []));
+    dropTargetNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTargetNode" }] : /* istanbul ignore next */ []));
+    /** Pending hover-expand for a collapsed target. */
+    expandTimer = null;
+    expandTimerKey = null;
+    /** Edge auto-scroll while a drag is in flight. */
+    scrollFrame = null;
+    scrollStep = 0;
+    canDragNode(node) {
+        return this.canDrag()?.(node) ?? false;
+    }
+    isDragSource(node) {
+        const src = this.dragSourceNode();
+        return !!src && this.keyOf(src) === this.keyOf(node);
+    }
+    isDropTarget(node) {
+        const t = this.dropTargetNode();
+        return !!t && this.keyOf(t) === this.keyOf(node);
+    }
+    /** Whether the current drag may land on `target`: the built-in guards first,
+     *  then the consumer's rule. */
+    acceptsDrop(target) {
+        const source = this.dragSourceNode();
+        if (!source)
+            return false;
+        if (this.keyOf(source) === this.keyOf(target))
+            return false;
+        if (this.containsNode(source, target))
+            return false;
+        return this.canDrop()?.(source, target) ?? false;
+    }
+    /** Whether `node` is somewhere inside `root`'s subtree. */
+    containsNode(root, node) {
+        const key = this.keyOf(node);
+        const walk = (list) => (list ?? []).some((n) => this.keyOf(n) === key || walk(n.children));
+        return walk(root.children);
+    }
+    beginDrag(node) {
+        this.dragSourceNode.set(node);
+        this.announcer.announce(`Dragging ${node.label}`);
+    }
+    /** Called from every `dragover` on a row: highlight, hover-expand, scroll. */
+    dragOver(target, clientY) {
+        if (!this.dragSourceNode())
+            return;
+        const accepts = this.acceptsDrop(target);
+        this.dropTargetNode.set(accepts ? target : null);
+        this.scheduleHoverExpand(target);
+        this.edgeScroll(clientY);
+    }
+    dragLeave(target) {
+        if (this.isDropTarget(target))
+            this.dropTargetNode.set(null);
+        if (this.expandTimerKey === this.keyOf(target))
+            this.clearExpandTimer();
+        this.stopEdgeScroll();
+    }
+    dropOn(target) {
+        const source = this.dragSourceNode();
+        const accepted = !!source && this.acceptsDrop(target);
+        if (source && accepted) {
+            this.nodeDrop.emit({ source, target, position: 'into' });
+            this.announcer.announce(`Dropped ${source.label} on ${target.label}`);
+        }
+        this.endDrag();
+    }
+    /** Always runs, including when the drop lands outside the tree (dragend). */
+    endDrag() {
+        this.dragSourceNode.set(null);
+        this.dropTargetNode.set(null);
+        this.clearExpandTimer();
+        this.stopEdgeScroll();
+    }
+    /** A collapsed node hovered long enough opens, so a target that is not yet
+     *  visible can be reached at all — the normal case in a big inventory. */
+    scheduleHoverExpand(target) {
+        const key = this.keyOf(target);
+        if (this.expandTimerKey === key)
+            return;
+        this.clearExpandTimer();
+        if (!target.children?.length || this.currentSet().has(key))
+            return;
+        this.expandTimerKey = key;
+        this.expandTimer = setTimeout(() => {
+            this.expandTimer = null;
+            this.expandTimerKey = null;
+            if (this.dragSourceNode() && !this.currentSet().has(key))
+                this.toggleNode(target);
+        }, this.dragExpandDelay());
+    }
+    clearExpandTimer() {
+        if (this.expandTimer != null)
+            clearTimeout(this.expandTimer);
+        this.expandTimer = null;
+        this.expandTimerKey = null;
+    }
+    /** Nearest scrolling ancestor, so a long tree can be traversed mid-drag. */
+    scrollParent() {
+        let el = this.hostEl.nativeElement;
+        while (el) {
+            const canScroll = el.scrollHeight > el.clientHeight + 1;
+            if (canScroll && /auto|scroll|overlay/.test(getComputedStyle(el).overflowY))
+                return el;
+            el = el.parentElement;
+        }
+        return null;
+    }
+    edgeScroll(clientY) {
+        const box = this.scrollParent();
+        if (!box)
+            return;
+        const r = box.getBoundingClientRect();
+        const zone = 36;
+        const step = clientY < r.top + zone ? -12 : clientY > r.bottom - zone ? 12 : 0;
+        this.scrollStep = step;
+        if (!step)
+            return this.stopEdgeScroll();
+        if (this.scrollFrame != null)
+            return;
+        const tick = () => {
+            if (!this.scrollStep || !this.dragSourceNode())
+                return this.stopEdgeScroll();
+            box.scrollTop += this.scrollStep;
+            this.scrollFrame = requestAnimationFrame(tick);
+        };
+        this.scrollFrame = requestAnimationFrame(tick);
+    }
+    stopEdgeScroll() {
+        if (this.scrollFrame != null)
+            cancelAnimationFrame(this.scrollFrame);
+        this.scrollFrame = null;
+        this.scrollStep = 0;
+    }
     /** Toggle a node's expansion, updating state and emitting outputs. */
     toggleNode(node) {
         const key = this.keyOf(node);
@@ -3345,7 +3638,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 }, chevronAriaLabel: { classPropertyName: "chevronAriaLabel", publicName: "chevronAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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 }, 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: `
     @if (nodes(); as ns) {
       @for (n of ns; track n.id ?? n.label) {
         <strct-tree-node
@@ -3380,7 +3673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         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 }] }], 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 }] }] } });
+        }], 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 }] }] } });
 
 /**
  * Dev-mode diagnostics for combinations a component accepts but cannot honour.
@@ -19254,61 +19547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-/**
- * Screen-reader announcements for state changes that have no visible text —
- * "12 rows loaded", "Snapshot created" (Material's LiveAnnouncer, strct-sized):
- *
- *   private announcer = inject(StrctAnnouncer);
- *   this.announcer.announce('12 rows loaded');
- *
- * Maintains one visually-hidden live region per politeness level; repeated
- * identical messages are re-announced (the region is cleared first).
- */
-class StrctAnnouncer {
-    regions = new Map();
-    clearTimers = new Map();
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    announce(message, politeness = 'polite') {
-        if (!this.isBrowser)
-            return;
-        const region = this.regionFor(politeness);
-        // Clear first so identical consecutive messages still fire.
-        region.textContent = '';
-        setTimeout(() => (region.textContent = message));
-        clearTimeout(this.clearTimers.get(politeness));
-        // Stale announcements should not linger for the next SR user to stumble on.
-        this.clearTimers.set(politeness, setTimeout(() => (region.textContent = ''), 10_000));
-    }
-    regionFor(politeness) {
-        let region = this.regions.get(politeness);
-        if (!region) {
-            region = document.createElement('div');
-            region.setAttribute('aria-live', politeness);
-            region.setAttribute('aria-atomic', 'true');
-            region.className = 'strct-announcer';
-            region.style.cssText =
-                'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
-            document.body.appendChild(region);
-            this.regions.set(politeness, region);
-        }
-        return region;
-    }
-    ngOnDestroy() {
-        for (const timer of this.clearTimers.values())
-            clearTimeout(timer);
-        this.clearTimers.clear();
-        for (const region of this.regions.values())
-            region.remove();
-        this.regions.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAnnouncer, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 function normalize(combo) {
     return combo
         .toLowerCase()
@@ -20678,7 +20916,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"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctTree, selector: "strct-tree", inputs: ["nodes", "density", "nodeMenu", "chevronAriaLabel", "expandedIds"], outputs: ["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"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTreeSelect, decorators: [{
             type: Component,
@@ -21612,6 +21850,34 @@ class StrctHeatmap {
     /** Scale ceiling — the value that maps to full intensity. Auto (data max) when null. */
     max = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * Label every n-th column (1 = every column, today's behaviour). 24 hourly
+     * columns in a narrow card cannot all carry a readable label; labelling every
+     * third keeps "14:00" legible instead of forcing it down to "14".
+     */
+    colLabelEvery = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colLabelEvery" }] : /* istanbul ignore next */ []));
+    /**
+     * Column label text, so a column can be keyed by an ISO time and shown as
+     * "14:00". Return '' to drop a label. Applied after `colLabelEvery`.
+     */
+    colLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Cell tooltip text. Without it a cell reads `row × col: value`, which for a
+     * utilisation grid has no unit — `hv-05 · 14:00 — 47% CPU` is the readable form.
+     */
+    valueFormat = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /**
+     * Colour by band instead of one hue: `status` (accent by default) below
+     * `warning`, the warning hue from there, the critical hue from `critical`.
+     * Intensity is scaled by the value's position WITHIN its band, so a 96% cell
+     * reads darker than an 81% one and both read as critical/warning at a glance.
+     * Unset: today's single-hue ramp across the whole range.
+     */
+    thresholds = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thresholds" }] : /* istanbul ignore next */ []));
     /** Base color of the intensity ramp. */
     status = input('accent', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -21710,7 +21976,7 @@ class StrctHeatmap {
                     w: round(w),
                     h: ch,
                     fill: value === undefined ? 'var(--bg-2)' : this.fillFor(value),
-                    tip: value === undefined ? null : `${row} × ${col}: ${value}`,
+                    tip: value === undefined ? null : this.tipFor(value, row, col),
                 });
             });
         });
@@ -21732,9 +21998,24 @@ class StrctHeatmap {
         const gap = this.gap();
         const x0 = this.rowLabelWidth();
         const y = this.height() - 4;
-        return this.colOrder().map((text, c) => ({ text, x: round(x0 + c * (w + gap) + w / 2), y }));
+        const every = Math.max(1, Math.trunc(this.colLabelEvery()));
+        const format = this.colLabel();
+        const out = [];
+        this.colOrder().forEach((col, c) => {
+            if (c % every !== 0)
+                return;
+            const text = format ? format(col, c) : col;
+            if (text === '')
+                return;
+            out.push({ text, x: round(x0 + c * (w + gap) + w / 2), y });
+        });
+        return out;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colLabels" }] : /* istanbul ignore next */ []));
+    tipFor(value, row, col) {
+        const format = this.valueFormat();
+        return format ? format(value, row, col) : `${row} × ${col}: ${value}`;
+    }
     /** Screen-reader summary of the whole grid (role="img" name). */
     aria = computed(() => {
         const info = {
@@ -21752,17 +22033,41 @@ class StrctHeatmap {
     /**
      * Intensity ramp: 8% of the status hue for the smallest non-zero value up
      * to 100% at the ceiling; zero stays on the empty-cell surface.
+     *
+     * With `thresholds`, the hue comes from the value's band and the intensity
+     * from its position inside that band, floored at 45% — a band has to be
+     * recognisable as itself, and a pale cell must not read as "no data".
      */
     fillFor(value) {
         if (value <= 0)
             return 'var(--bg-2)';
         const maxV = this.maxVal();
-        const t = maxV > 0 ? Math.min(value / maxV, 1) : 0;
-        const pct = 8 + Math.round(t * 92);
+        const t = this.thresholds();
+        if (t) {
+            const { color, from, to } = this.bandFor(value, t, maxV);
+            const span = to - from;
+            const pos = span > 0 ? Math.min(Math.max((value - from) / span, 0), 1) : 1;
+            const pct = 45 + Math.round(pos * 55);
+            return `color-mix(in srgb, ${color} ${pct}%, var(--bg-1))`;
+        }
+        const ratio = maxV > 0 ? Math.min(value / maxV, 1) : 0;
+        const pct = 8 + Math.round(ratio * 92);
         return `color-mix(in srgb, ${this.color()} ${pct}%, var(--bg-1))`;
     }
+    /** The band a value falls in: its hue and the range intensity scales over. */
+    bandFor(value, t, maxV) {
+        const ceiling = Math.max(maxV, value);
+        if (t.critical != null && value >= t.critical) {
+            return { color: COLOR.critical, from: t.critical, to: ceiling };
+        }
+        if (t.warning != null && value >= t.warning) {
+            return { color: COLOR.warning, from: t.warning, to: t.critical ?? ceiling };
+        }
+        const upper = t.warning ?? t.critical ?? ceiling;
+        return { color: this.color(), from: 0, to: upper };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeatmap, isStandalone: true, selector: "strct-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormat: { classPropertyName: "summaryFormat", publicName: "summaryFormat", isSignal: true, isRequired: false, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowLabelWidth: { classPropertyName: "rowLabelWidth", publicName: "rowLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-heatmap" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeatmap, isStandalone: true, selector: "strct-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, colLabelEvery: { classPropertyName: "colLabelEvery", publicName: "colLabelEvery", isSignal: true, isRequired: false, transformFunction: null }, colLabel: { classPropertyName: "colLabel", publicName: "colLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormat: { classPropertyName: "summaryFormat", publicName: "summaryFormat", isSignal: true, isRequired: false, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowLabelWidth: { classPropertyName: "rowLabelWidth", publicName: "rowLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-heatmap" }, ngImport: i0, template: `
     @if (isEmpty()) {
       <div class="strct-heatmap__empty">{{ emptyText() }}</div>
     } @else {
@@ -21774,7 +22079,10 @@ class StrctHeatmap {
         [attr.width]="width()"
         [attr.height]="height()"
       >
-        @for (l of rowLabels(); track l.text) {
+        <!-- Tracked by index: label text is data and repeats legitimately (two
+             hosts with the same name, hour 02 twice at the DST fall-back), and
+             a thinned column axis repeats the empty string. -->
+        @for (l of rowLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--row"
             [attr.x]="l.x"
@@ -21785,7 +22093,7 @@ class StrctHeatmap {
             {{ l.text }}
           </text>
         }
-        @for (l of colLabels(); track l.text) {
+        @for (l of colLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--col"
             [attr.x]="l.x"
@@ -21829,7 +22137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         [attr.width]="width()"
         [attr.height]="height()"
       >
-        @for (l of rowLabels(); track l.text) {
+        <!-- Tracked by index: label text is data and repeats legitimately (two
+             hosts with the same name, hour 02 twice at the DST fall-back), and
+             a thinned column axis repeats the empty string. -->
+        @for (l of rowLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--row"
             [attr.x]="l.x"
@@ -21840,7 +22151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             {{ l.text }}
           </text>
         }
-        @for (l of colLabels(); track l.text) {
+        @for (l of colLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--col"
             [attr.x]="l.x"
@@ -21869,7 +22180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       </svg>
     }
   `, host: { class: 'strct-heatmap' }, styles: [".strct-heatmap{display:block}.strct-heatmap__svg{width:100%;display:block}.strct-heatmap__empty{display:flex;align-items:center;justify-content:center;min-height:60px;font-size:12px;color:var(--t3)}.strct-heatmap__label{fill:var(--t3);font-size:10px}.strct-heatmap__label--row{font-family:var(--font)}.strct-heatmap__label--col{font-family:var(--mono);font-variant-numeric:tabular-nums}.strct-heatmap__cell{stroke:var(--bg-1);stroke-width:1}@media(prefers-reduced-motion:no-preference){.strct-heatmap__cell{transition:opacity .12s ease}}.strct-heatmap__cell:hover{opacity:.75}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summaryFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryFormat", required: false }] }], cellHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], rowLabelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabelWidth", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], colLabelEvery: [{ type: i0.Input, args: [{ isSignal: true, alias: "colLabelEvery", required: false }] }], colLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "colLabel", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summaryFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryFormat", required: false }] }], cellHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], rowLabelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabelWidth", required: false }] }] } });
 
 /**
  * Public API surface of the strct UI library.