@akcelik/strct 5.22.0 → 5.23.0

package/fesm2022/akcelik-strct.mjs

@@ -2299,6 +2299,7 @@ class StrctRail {
           class="strct-rail__item"
           [routerLink]="item.routerLink"
           routerLinkActive
+          ariaCurrentWhenActive="page"
           #rla="routerLinkActive"
           [class.strct-rail__item--active]="isActive(item, rla.isActive)"
           [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
@@ -2402,6 +2403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           class="strct-rail__item"
           [routerLink]="item.routerLink"
           routerLinkActive
+          ariaCurrentWhenActive="page"
           #rla="routerLinkActive"
           [class.strct-rail__item--active]="isActive(item, rla.isActive)"
           [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
@@ -5276,6 +5278,9 @@ class StrctTreeNode {
     /** Roving tabindex: inside a tree only the active row is tabbable. */
     rowTabindex = computed(() => this.tree ? (this.tree.isRovingActive(this) ? 0 : -1) : 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowTabindex" }] : /* istanbul ignore next */ []));
+    /** Wording of the "children are being read" row (from the owning tree). */
+    loadingLabel = computed(() => this.tree?.loadingLabel() ?? 'Loading…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
     /** Accessible label of the chevron toggle (factory from the owning tree). */
     chevronAriaLabel = computed(() => (this.tree?.chevronAriaLabel() ?? defaultChevronAriaLabel)(this.isOpen(), this.displayLabel()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chevronAriaLabel" }] : /* istanbul ignore next */ []));
@@ -5305,7 +5310,13 @@ class StrctTreeNode {
     }
     hasChildren = computed(() => {
         const n = this.node();
-        return n ? (n.children?.length ?? 0) > 0 : this.childNodes().length > 0;
+        if (!n)
+            return this.childNodes().length > 0;
+        // A folder whose listing has not been asked for still opens: without
+        // this it had no chevron and no aria-expanded, so it could not be.
+        if (n.hasChildren !== undefined)
+            return n.hasChildren || (n.children?.length ?? 0) > 0;
+        return (n.children?.length ?? 0) > 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     isOpen = computed(() => {
@@ -5357,6 +5368,7 @@ class StrctTreeNode {
       [attr.aria-posinset]="posInSet()"
       [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
+      [attr.aria-busy]="node()?.loading ? true : null"
       [attr.aria-owns]="hasChildren() && isOpen() ? groupId : null"
       [attr.draggable]="isDraggable() ? 'true' : null"
       [class.strct-tnode__row--dragging]="isDragSource()"
@@ -5401,10 +5413,24 @@ class StrctTreeNode {
         />
       }
       <span class="strct-tnode__label">{{ displayLabel() }}</span>
+      @if (node()?.tag; as tag) {
+        <strct-badge class="strct-tnode__tag" [status]="tag.status ?? 'neutral'">{{
+          tag.label
+        }}</strct-badge>
+      }
+      @if (node()?.meta; as meta) {
+        <span class="strct-tnode__meta">{{ meta }}</span>
+      }
       <ng-content select="[strctTreeTrailing]" />
     </div>
     @if (hasChildren() && isOpen()) {
       <div class="strct-tnode__children" role="group" [id]="groupId">
+        @if (node()?.loading) {
+          <div class="strct-tnode__loading">
+            <span class="strct-tnode__spacer"></span>
+            <strct-spinner size="sm" [caption]="loadingLabel()" />
+          </div>
+        }
         @if (node()) {
           @for (child of node()!.children ?? []; track child.id ?? child.label) {
             <strct-tree-node
@@ -5419,11 +5445,11 @@ 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:2px;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(--t1);font-weight:600}.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", "count", "countMax", "countStatus", "countLabel"] }, { 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:2px;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(--t1);font-weight:600}.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__tag,.strct-tnode__meta{flex-shrink:0}.strct-tnode__meta{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-tnode__row--active .strct-tnode__meta{font-weight:400}.strct-tnode__children{margin-inline-start:16px}.strct-tnode__loading{display:flex;align-items:center;gap:6px;padding:4px 9px;font-size:13px;color:var(--t3)}\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", "count", "countMax", "countStatus", "countLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }, { kind: "component", type: StrctBadge, selector: "strct-badge", inputs: ["status", "tone", "solid"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }], 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,
-            args: [{ selector: 'strct-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctContextMenuTrigger], template: `
+            args: [{ selector: 'strct-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctContextMenuTrigger, StrctBadge, StrctSpinner], template: `
     <div
       class="strct-tnode__row"
       [class.strct-tnode__row--active]="displayActive()"
@@ -5434,6 +5460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       [attr.aria-posinset]="posInSet()"
       [attr.aria-selected]="displayActive()"
       [attr.aria-expanded]="hasChildren() ? isOpen() : null"
+      [attr.aria-busy]="node()?.loading ? true : null"
       [attr.aria-owns]="hasChildren() && isOpen() ? groupId : null"
       [attr.draggable]="isDraggable() ? 'true' : null"
       [class.strct-tnode__row--dragging]="isDragSource()"
@@ -5478,10 +5505,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         />
       }
       <span class="strct-tnode__label">{{ displayLabel() }}</span>
+      @if (node()?.tag; as tag) {
+        <strct-badge class="strct-tnode__tag" [status]="tag.status ?? 'neutral'">{{
+          tag.label
+        }}</strct-badge>
+      }
+      @if (node()?.meta; as meta) {
+        <span class="strct-tnode__meta">{{ meta }}</span>
+      }
       <ng-content select="[strctTreeTrailing]" />
     </div>
     @if (hasChildren() && isOpen()) {
       <div class="strct-tnode__children" role="group" [id]="groupId">
+        @if (node()?.loading) {
+          <div class="strct-tnode__loading">
+            <span class="strct-tnode__spacer"></span>
+            <strct-spinner size="sm" [caption]="loadingLabel()" />
+          </div>
+        }
         @if (node()) {
           @for (child of node()!.children ?? []; track child.id ?? child.label) {
             <strct-tree-node
@@ -5502,7 +5543,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:2px;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(--t1);font-weight:600}.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:2px;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(--t1);font-weight:600}.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__tag,.strct-tnode__meta{flex-shrink:0}.strct-tnode__meta{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-tnode__row--active .strct-tnode__meta{font-weight:400}.strct-tnode__children{margin-inline-start:16px}.strct-tnode__loading{display:flex;align-items:center;gap:6px;padding:4px 9px;font-size:13px;color:var(--t3)}\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
@@ -5551,6 +5592,9 @@ class StrctTree {
     ...(ngDevMode ? [{ debugName: "dragExpandDelay" }] : /* istanbul ignore next */ []));
     /** Emitted for an accepted drop only. */
     nodeDrop = output();
+    /** Wording of the row shown under a node whose children are being read (`node.loading`). */
+    loadingLabel = input('Loading…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
     /** 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 */ []));
@@ -5893,7 +5937,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 }, 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: `
+    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 }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", 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
@@ -5930,7 +5974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[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:3px;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 }] }] } });
+        }], 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"] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", 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 }] }] } });
 
 /**
  * Refcounted body scroll-lock shared across any number of simultaneously
@@ -6123,10 +6167,25 @@ class StrctModal {
             this.close();
     }
     onEscape(event) {
-        // A control that used Escape first keeps it: an IME composition, a
-        // searchbox that clears. Both mark the event handled.
+        // A control that used Escape first keeps it: a searchbox that clears
+        // marks the event handled (it did not, until 5.23.0).
         if (event?.defaultPrevented)
             return;
+        // An IME composition ends on Escape, and the keystroke is the composer's.
+        if (event?.isComposing)
+            return;
+        // An Escape raised inside another surface on top — a command palette
+        // opened over this modal, a menu, a listbox — belongs to that surface.
+        // isTopmostModal only knows about modals, so the palette's Escape used to
+        // close the palette AND the modal. An Escape with the focus on nothing in
+        // particular is still ours.
+        const target = event?.target;
+        const surface = target instanceof Element
+            ? target.closest('[role="dialog"], [role="menu"], [role="listbox"], [role="tree"]')
+            : null;
+        const dialog = this.elementRef.nativeElement.querySelector('.strct-modal__dialog');
+        if (surface && dialog && surface !== dialog && !dialog.contains(surface))
+            return;
         // With several modals open, only the topmost one reacts to Escape.
         const allowed = this.closeOnEscape() ?? this.dismissible();
         if (this.open() && allowed && isTopmostModal(this))
@@ -7736,6 +7795,7 @@ class StrctSectionMenu {
           class="strct-sm__item"
           [routerLink]="item.routerLink"
           routerLinkActive
+          ariaCurrentWhenActive="page"
           #rla="routerLinkActive"
           [class.strct-sm__item--active]="isActive(item, rla.isActive)"
           [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
@@ -7846,6 +7906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           class="strct-sm__item"
           [routerLink]="item.routerLink"
           routerLinkActive
+          ariaCurrentWhenActive="page"
           #rla="routerLinkActive"
           [class.strct-sm__item--active]="isActive(item, rla.isActive)"
           [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
@@ -8402,6 +8463,16 @@ class StrctSearchbox {
         this.onChange(next);
     }
     /** Clear the text (Escape / the × button). */
+    /**
+     * An Escape that clears a value is used: a modal around this box takes an
+     * unhandled Escape as "close me", and the same keystroke did both.
+     */
+    onEscape(event) {
+        if (!this.value())
+            return;
+        event.preventDefault();
+        this.clear();
+    }
     clear() {
         if (!this.value())
             return;
@@ -8456,7 +8527,7 @@ class StrctSearchbox {
           [value]="value()"
           (input)="onInput($event)"
           (keydown.enter)="search.emit(value())"
-          (keydown.escape)="clear()"
+          (keydown.escape)="onEscape($event)"
           (focus)="focused.set(true)"
           (blur)="focused.set(false); onTouched()"
         />
@@ -8509,7 +8580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           [value]="value()"
           (input)="onInput($event)"
           (keydown.enter)="search.emit(value())"
-          (keydown.escape)="clear()"
+          (keydown.escape)="onEscape($event)"
           (focus)="focused.set(true)"
           (blur)="focused.set(false); onTouched()"
         />
@@ -28428,7 +28499,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", "framed", "maxHeight", "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", "loadingLabel", "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,
@@ -28717,6 +28788,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             type: Directive,
             args: [{ selector: '[strctToolbarCaption]' }]
         }] });
+/** A control whose own keyboard is the caret's. */
+function isTextEntry(el) {
+    if (!el)
+        return false;
+    // `isContentEditable` is a rendering-time property: jsdom does not implement
+    // it, so the attribute is read too — a consumer's own test sees the same
+    // behaviour as a browser.
+    if (el.isContentEditable)
+        return true;
+    const editable = el.closest('[contenteditable]')?.getAttribute('contenteditable');
+    if (editable !== null && editable !== undefined && editable !== 'false')
+        return true;
+    const tag = el.tagName;
+    if (tag === 'TEXTAREA')
+        return true;
+    if (tag !== 'INPUT')
+        return false;
+    const type = el.type;
+    return !['button', 'submit', 'reset', 'checkbox', 'radio', 'range', 'color', 'file'].includes(type);
+}
 class StrctToolbar {
     host = inject(ElementRef);
     /** Accessible name of the toolbar (localizable). */
@@ -28753,6 +28844,11 @@ class StrctToolbar {
         const target = event.target;
         if (target?.closest('[role=listbox], [role=menu], [role=dialog], [role=tree], [role=grid]'))
             return;
+        // A text field keeps its arrows for the caret — APG's toolbar says so, and
+        // ArrowLeft inside a searchbox in the bar used to jump to the button
+        // before it instead of moving one character.
+        if (isTextEntry(target))
+            return;
         const vertical = this.orientation() === 'vertical';
         const prevKey = vertical ? 'ArrowUp' : 'ArrowLeft';
         const nextKey = vertical ? 'ArrowDown' : 'ArrowRight';
@@ -30946,22 +31042,6 @@ class StrctProductSwitcher {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctProductSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctProductSwitcher, isStandalone: true, selector: "strct-product-switcher", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, switchLabel: { classPropertyName: "switchLabel", publicName: "switchLabel", isSignal: true, isRequired: false, transformFunction: null }, shortLabelWidth: { classPropertyName: "shortLabelWidth", publicName: "shortLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", opened: "opened", select: "select" }, host: { classAttribute: "strct-ps" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <!-- What a row holds, whichever element carries it. -->
-    <ng-template #rowBody let-item>
-      @if (item.icon) {
-        <strct-icon strctDropdownItemIcon [tone]="item.tone ?? ''" [name]="item.icon" [size]="16" />
-      }
-      <span strctDropdownItemLabel>{{ item.name }}</span>
-      @if (item.description) {
-        <span strctDropdownItemDescription>
-          @if (item.status) {
-            <strct-status-dot [status]="item.status" />
-          }
-          {{ item.description }}
-        </span>
-      }
-    </ng-template>
-
     <!-- A row is a link where the product has an address, so it can be opened
          in a new tab — and a menuitemradio either way, checked on the one you
          are in. -->
@@ -30973,7 +31053,23 @@ class StrctProductSwitcher {
           [selected]="item.id === current()"
           (click)="pick(item, $event)"
         >
-          <ng-container *ngTemplateOutlet="rowBody; context: { $implicit: item }" />
+          @if (item.icon) {
+            <strct-icon
+              strctDropdownItemIcon
+              [tone]="item.tone ?? ''"
+              [name]="item.icon"
+              [size]="16"
+            />
+          }
+          <span strctDropdownItemLabel>{{ item.name }}</span>
+          @if (item.description) {
+            <span strctDropdownItemDescription>
+              @if (item.status) {
+                <strct-status-dot [status]="item.status" />
+              }
+              {{ item.description }}
+            </span>
+          }
         </a>
       } @else if (item.href && !item.disabled) {
         <a
@@ -30982,7 +31078,23 @@ class StrctProductSwitcher {
           [selected]="item.id === current()"
           (click)="pick(item, $event)"
         >
-          <ng-container *ngTemplateOutlet="rowBody; context: { $implicit: item }" />
+          @if (item.icon) {
+            <strct-icon
+              strctDropdownItemIcon
+              [tone]="item.tone ?? ''"
+              [name]="item.icon"
+              [size]="16"
+            />
+          }
+          <span strctDropdownItemLabel>{{ item.name }}</span>
+          @if (item.description) {
+            <span strctDropdownItemDescription>
+              @if (item.status) {
+                <strct-status-dot [status]="item.status" />
+              }
+              {{ item.description }}
+            </span>
+          }
         </a>
       } @else {
         <strct-dropdown-item
@@ -30990,7 +31102,23 @@ class StrctProductSwitcher {
           [disabled]="!!item.disabled"
           (click)="pick(item)"
         >
-          <ng-container *ngTemplateOutlet="rowBody; context: { $implicit: item }" />
+          @if (item.icon) {
+            <strct-icon
+              strctDropdownItemIcon
+              [tone]="item.tone ?? ''"
+              [name]="item.icon"
+              [size]="16"
+            />
+          }
+          <span strctDropdownItemLabel>{{ item.name }}</span>
+          @if (item.description) {
+            <span strctDropdownItemDescription>
+              @if (item.status) {
+                <strct-status-dot [status]="item.status" />
+              }
+              {{ item.description }}
+            </span>
+          }
         </strct-dropdown-item>
       }
     </ng-template>
@@ -31030,7 +31158,7 @@ class StrctProductSwitcher {
             class="strct-ps__icon"
             [name]="item.icon"
             [size]="16"
-            [style.color]="item.tone || null"
+            [style.color]="item.headerTone || item.tone || null"
           />
         }
         <span class="strct-ps__label">{{ chipText() }}</span>
@@ -31053,22 +31181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         StrctDropdownItemDescription,
                         StrctDropdownDivider,
                     ], template: `
-    <!-- What a row holds, whichever element carries it. -->
-    <ng-template #rowBody let-item>
-      @if (item.icon) {
-        <strct-icon strctDropdownItemIcon [tone]="item.tone ?? ''" [name]="item.icon" [size]="16" />
-      }
-      <span strctDropdownItemLabel>{{ item.name }}</span>
-      @if (item.description) {
-        <span strctDropdownItemDescription>
-          @if (item.status) {
-            <strct-status-dot [status]="item.status" />
-          }
-          {{ item.description }}
-        </span>
-      }
-    </ng-template>
-
     <!-- A row is a link where the product has an address, so it can be opened
          in a new tab — and a menuitemradio either way, checked on the one you
          are in. -->
@@ -31080,7 +31192,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           [selected]="item.id === current()"
           (click)="pick(item, $event)"
         >
-          <ng-container *ngTemplateOutlet="rowBody; context: { $implicit: item }" />
+          @if (item.icon) {
+            <strct-icon
+              strctDropdownItemIcon
+              [tone]="item.tone ?? ''"
+              [name]="item.icon"
+              [size]="16"
+            />
+          }
+          <span strctDropdownItemLabel>{{ item.name }}</span>
+          @if (item.description) {
+            <span strctDropdownItemDescription>
+              @if (item.status) {
+                <strct-status-dot [status]="item.status" />
+              }
+              {{ item.description }}
+            </span>
+          }
         </a>
       } @else if (item.href && !item.disabled) {
         <a
@@ -31089,7 +31217,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           [selected]="item.id === current()"
           (click)="pick(item, $event)"
         >
-          <ng-container *ngTemplateOutlet="rowBody; context: { $implicit: item }" />
+          @if (item.icon) {
+            <strct-icon
+              strctDropdownItemIcon
+              [tone]="item.tone ?? ''"
+              [name]="item.icon"
+              [size]="16"
+            />
+          }
+          <span strctDropdownItemLabel>{{ item.name }}</span>
+          @if (item.description) {
+            <span strctDropdownItemDescription>
+              @if (item.status) {
+                <strct-status-dot [status]="item.status" />
+              }
+              {{ item.description }}
+            </span>
+          }
         </a>
       } @else {
         <strct-dropdown-item
@@ -31097,7 +31241,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           [disabled]="!!item.disabled"
           (click)="pick(item)"
         >
-          <ng-container *ngTemplateOutlet="rowBody; context: { $implicit: item }" />
+          @if (item.icon) {
+            <strct-icon
+              strctDropdownItemIcon
+              [tone]="item.tone ?? ''"
+              [name]="item.icon"
+              [size]="16"
+            />
+          }
+          <span strctDropdownItemLabel>{{ item.name }}</span>
+          @if (item.description) {
+            <span strctDropdownItemDescription>
+              @if (item.status) {
+                <strct-status-dot [status]="item.status" />
+              }
+              {{ item.description }}
+            </span>
+          }
         </strct-dropdown-item>
       }
     </ng-template>
@@ -31137,7 +31297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             class="strct-ps__icon"
             [name]="item.icon"
             [size]="16"
-            [style.color]="item.tone || null"
+            [style.color]="item.headerTone || item.tone || null"
           />
         }
         <span class="strct-ps__label">{{ chipText() }}</span>