@akcelik/strct 5.21.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';
@@ -29759,6 +29855,13 @@ const STRCT_MD_LIMITS = {
     depth: 8,
     /** Inline delimiter runs considered per text span. */
     delimiters: 2000,
+    /**
+     * How far a closing delimiter or bracket is looked for. Without it every
+     * unmatched opener scanned to the end of the document, once each: a 64 KiB
+     * line of "*a " took 1.6 s to read, and a streamed reply is read again on
+     * every token.
+     */
+    scan: 4096,
 };
 const RULE = /^ {0,3}((\*\s*){3,}|(-\s*){3,}|(_\s*){3,})$/;
 const ATX = /^ {0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
@@ -29996,9 +30099,10 @@ function parseInlines(source, options = {}) {
                 continue;
             }
         }
-        // Hard break: two spaces at the end of a line, or a backslash.
+        // Hard break: two spaces at the end of a line, or a backslash — or every
+        // newline, where the consumer asked for GitHub's comment style.
         if (ch === '\n') {
-            const hard = buf.endsWith('  ') || buf.endsWith('\\');
+            const hard = options.breaks === true || buf.endsWith('  ') || buf.endsWith('\\');
             buf = buf.replace(/( {2,}|\\)$/, '');
             flush();
             out.push(hard ? { kind: 'break' } : { kind: 'text', text: ' ' });
@@ -30040,13 +30144,39 @@ function parseInlines(source, options = {}) {
                 }
             }
         }
+        // A bare URL is a link: a model writes "see https://example.com/x" far
+        // more often than it writes an autolink. Trailing punctuation belongs to
+        // the sentence, not the address.
+        if ((ch === 'h' || ch === 'H') && /^https?:\/\//i.test(source.slice(i, i + 8))) {
+            const match = /^https?:\/\/[^\s<]+/i.exec(source.slice(i));
+            if (match) {
+                let url = match[0];
+                const trail = /[.,;:!?)\]'"]+$/.exec(url);
+                if (trail) {
+                    // A closing bracket is part of the address when the URL opened one.
+                    const kept = url.slice(0, url.length - trail[0].length);
+                    url = kept.includes('(') && trail[0].startsWith(')') ? kept + ')' : kept;
+                }
+                if (url.length > 'https://'.length) {
+                    flush();
+                    out.push({ kind: 'link', href: url, children: [{ kind: 'text', text: url }] });
+                    i += url.length;
+                    continue;
+                }
+            }
+        }
         // Emphasis, strong, strikethrough. A delimiter only opens when something
         // follows it immediately and only closes when something precedes it —
         // the flanking rule, which is what keeps "2 * 3 * 4" arithmetic.
         if ((ch === '*' || ch === '_' || ch === '~') && budget-- > 0) {
             const run = new RegExp(`^\\${ch}+`).exec(source.slice(i))[0];
             const len = ch === '~' ? (run.length >= 2 ? 2 : 0) : Math.min(run.length, 2);
-            const opens = !/^\s|^$/.test(source.slice(i + run.length, i + run.length + 1) || '');
+            const after = source.slice(i + run.length, i + run.length + 1) || '';
+            const before = i > 0 ? source[i - 1] : '';
+            // An underscore inside a word is a character, not a delimiter — or
+            // `list_inventory for vm_cpu_usage` loses its underscores to emphasis.
+            const intraword = ch === '_' && /[\p{L}\p{N}]/u.test(before) && /[\p{L}\p{N}]/u.test(after);
+            const opens = !/^\s|^$/.test(after) && !intraword;
             if (len && opens) {
                 const marker = ch.repeat(len);
                 const close = findCloser(source, marker, i + len);
@@ -30075,10 +30205,15 @@ function parseInlines(source, options = {}) {
  * no such closer is not a delimiter at all, it is the character written.
  */
 function findCloser(source, marker, from) {
+    // Bounded: an unmatched delimiter in a long reply used to scan to the end of
+    // the document, once per delimiter — 1.6s for a 64 KiB line of "*a ".
+    const limit = Math.min(source.length, from + STRCT_MD_LIMITS.scan);
     let at = source.indexOf(marker, from);
-    while (at !== -1) {
+    while (at !== -1 && at < limit) {
         const before = source[at - 1];
-        if (before && !/\s/.test(before))
+        const after = source[at + marker.length] ?? '';
+        const intraword = marker[0] === '_' && /[\p{L}\p{N}]/u.test(before ?? '') && /[\p{L}\p{N}]/u.test(after);
+        if (before && !/\s/.test(before) && !intraword)
             return at;
         at = source.indexOf(marker, at + marker.length);
     }
@@ -30087,7 +30222,8 @@ function findCloser(source, marker, from) {
 /** The index of the `]` matching the `[` at `from`, or -1. */
 function matchBracket(source, from) {
     let depth = 0;
-    for (let i = from; i < source.length; i++) {
+    const limit = Math.min(source.length, from + STRCT_MD_LIMITS.scan);
+    for (let i = from; i < limit; i++) {
         if (source[i] === '\\') {
             i++;
             continue;
@@ -30140,7 +30276,7 @@ function applyTokens(text, tokenize) {
  * model wrote: `javascript:`, `data:`, a protocol-relative `//host`, or
  * anything this does not recognise.
  */
-function strctClassifyHref(href) {
+function strctClassifyHref(href, options = {}) {
     const raw = (href ?? '').trim();
     if (!raw)
         return null;
@@ -30149,10 +30285,16 @@ function strctClassifyHref(href) {
         return null;
     if (/^https?:\/\/[^/]/i.test(raw))
         return 'external';
-    if (/^mailto:[^@\s]+@[^@\s]+$/i.test(raw))
+    // mailto: opens a mail client with a subject and a body the model wrote, so
+    // it is something an app says yes to rather than the default.
+    if (options.mailto && /^mailto:[^@\s]+@[^@\s]+$/i.test(raw))
         return 'external';
     if (raw.startsWith('//'))
         return null;
+    // A browser reads a backslash as a slash: "/\evil.example" is an in-app
+    // path to this function and https://evil.example/ to a middle-click.
+    if (/[\\]/.test(raw) || /%5c/i.test(raw))
+        return null;
     if (raw.startsWith('/'))
         return 'internal';
     return null;
@@ -30226,10 +30368,32 @@ class StrctMarkdown {
     /** Claim runs of plain text — an inventory id becomes an object chip. */
     tokens = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
+    /**
+     * A single newline is a line break, the way a comment box reads: a model
+     * writing "Host: X\nCPU: 40 %" means two lines. Off by default, which is
+     * CommonMark.
+     */
+    breaks = input(false, { ...(ngDevMode ? { debugName: "breaks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What a screen reader hears after an external link (localisable). */
+    newTabLabel = input(' (opens in a new tab)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "newTabLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The token templates of the view that nested this one. A list item or a
+     * quote is drawn by a nested view, which has no projected content of its
+     * own — without this its claimed runs fall back to plain text.
+     */
+    inheritedTokens = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inheritedTokens" }] : /* istanbul ignore next */ []));
     /** An in-app link was followed; the consumer routes it. */
     navigate = output();
-    tokenDefs = contentChildren(StrctMarkdownToken, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tokenDefs" }] : /* istanbul ignore next */ []));
+    ownTokenDefs = contentChildren(StrctMarkdownToken, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownTokenDefs" }] : /* istanbul ignore next */ []));
+    /** This view's own templates, plus the ones handed down to it. */
+    allTokenDefs = computed(() => {
+        const own = this.ownTokenDefs();
+        return own.length ? own : this.inheritedTokens();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allTokenDefs" }] : /* istanbul ignore next */ []));
     blocks = computed(() => {
         const given = this.tree();
         if (given)
@@ -30237,6 +30401,7 @@ class StrctMarkdown {
         return strctParseMarkdown(this.source(), {
             streaming: this.streaming(),
             tokenize: this.tokens() ?? undefined,
+            breaks: this.breaks(),
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
@@ -30248,7 +30413,7 @@ class StrctMarkdown {
         return own ? own(href) : strctClassifyHref(href);
     }
     tokenTemplate(kind) {
-        return this.tokenDefs().find((d) => d.strctMarkdownToken() === kind)?.template ?? null;
+        return this.allTokenDefs().find((d) => d.strctMarkdownToken() === kind)?.template ?? null;
     }
     /** The caret belongs to the last block, and only while streaming. */
     caretOn(index) {
@@ -30263,7 +30428,7 @@ class StrctMarkdown {
         this.navigate.emit(href);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMarkdown, isStandalone: true, selector: "strct-markdown", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, headingOffset: { classPropertyName: "headingOffset", publicName: "headingOffset", isSignal: true, isRequired: false, transformFunction: null }, linkPolicy: { classPropertyName: "linkPolicy", publicName: "linkPolicy", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { classAttribute: "strct-md" }, queries: [{ propertyName: "tokenDefs", predicate: StrctMarkdownToken, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMarkdown, isStandalone: true, selector: "strct-markdown", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, headingOffset: { classPropertyName: "headingOffset", publicName: "headingOffset", isSignal: true, isRequired: false, transformFunction: null }, linkPolicy: { classPropertyName: "linkPolicy", publicName: "linkPolicy", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, breaks: { classPropertyName: "breaks", publicName: "breaks", isSignal: true, isRequired: false, transformFunction: null }, newTabLabel: { classPropertyName: "newTabLabel", publicName: "newTabLabel", isSignal: true, isRequired: false, transformFunction: null }, inheritedTokens: { classPropertyName: "inheritedTokens", publicName: "inheritedTokens", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { classAttribute: "strct-md" }, queries: [{ propertyName: "ownTokenDefs", predicate: StrctMarkdownToken, isSignal: true }], ngImport: i0, template: `
     @for (block of blocks(); track $index) {
       @switch (block.kind) {
         @case ('p') {
@@ -30408,10 +30573,16 @@ class StrctMarkdown {
     <!-- Blocks inside a list item or a quote. -->
     <ng-template #blockRun let-blocks>
       @for (b of blocks; track $index) {
+        <!-- The nested view had no token templates of its own, so a claimed
+             run inside a list item or a quote was drawn as plain text while
+             the same run in a paragraph became a chip. -->
         <strct-markdown
           [tree]="[b]"
           [headingOffset]="headingOffset()"
           [linkPolicy]="linkPolicy()"
+          [tokens]="tokens()"
+          [breaks]="breaks()"
+          [inheritedTokens]="allTokenDefs()"
           (navigate)="navigate.emit($event)"
         />
       }
@@ -30483,6 +30654,7 @@ class StrctMarkdown {
                     [size]="11"
                     aria-hidden="true"
                   />
+                  <span class="strct-sr-only">{{ newTabLabel() }}</span>
                 </a>
               }
               @case ('internal') {
@@ -30509,7 +30681,7 @@ class StrctMarkdown {
         }
       }
     </ng-template>
-  `, isInline: true, styles: [".strct-md{display:block;color:var(--t1);font-size:13px;line-height:1.55}.strct-md__p{margin:0 0 var(--space-2)}.strct-md__p:last-child{margin-bottom:0}.strct-md__h{margin:var(--space-3) 0 var(--space-2);font-size:14px;font-weight:600;color:var(--t1)}.strct-md__h:first-child{margin-top:0}.strct-md__list{margin:0 0 var(--space-2);padding-inline-start:20px}.strct-md__list li{margin-block:2px}.strct-md__quote{margin:0 0 var(--space-2);padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2);color:var(--t2)}.strct-md__rule{border:0;border-block-start:1px solid var(--b1);margin:var(--space-3) 0}.strct-md__codespan{font-family:var(--mono);font-size:.92em;background:var(--bg-2);border-radius:var(--radius-sm);padding:1px 4px}.strct-md__code{margin-block-end:var(--space-2)}.strct-md__link{color:var(--acc)}.strct-md__ext{margin-inline-start:2px;vertical-align:-1px}.strct-md__tablewrap{overflow-x:auto;margin-block-end:var(--space-2)}.strct-md__table{border-collapse:collapse;width:max-content;min-width:100%}.strct-md__table th,.strct-md__table td{border:1px solid var(--b1);padding:4px 8px;text-align:start}.strct-md__table th{background:var(--bg-2);font-weight:600}.strct-md__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:-2px;background:var(--acc);animation:strct-md-caret 1s steps(2) infinite}@keyframes strct-md-caret{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-md__caret{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctMarkdown, selector: "strct-markdown", inputs: ["source", "tree", "streaming", "headingOffset", "linkPolicy", "tokens"], outputs: ["navigate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCode, selector: "strct-code", inputs: ["code", "title", "language", "copyable", "collapsible", "collapsed", "lineNumbers", "wrap", "maxHeight", "collapseLabel", "expandLabel", "regionLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-md{display:block;color:var(--t1);font-size:13px;line-height:1.55}.strct-md__p{margin:0 0 var(--space-2)}.strct-md__p:last-child{margin-bottom:0}.strct-md__h{margin:var(--space-3) 0 var(--space-2);font-size:14px;font-weight:600;color:var(--t1)}.strct-md__h:first-child{margin-top:0}.strct-md__list{margin:0 0 var(--space-2);padding-inline-start:20px}.strct-md__list li{margin-block:2px}.strct-md__quote{margin:0 0 var(--space-2);padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2);color:var(--t2)}.strct-md__rule{border:0;border-block-start:1px solid var(--b1);margin:var(--space-3) 0}.strct-md__codespan{font-family:var(--mono);font-size:.92em;background:var(--bg-2);border-radius:var(--radius-sm);padding:1px 4px}.strct-md__code{margin-block-end:var(--space-2)}.strct-md__link{color:var(--acc)}.strct-md__ext{margin-inline-start:2px;vertical-align:-1px}.strct-md__tablewrap{overflow-x:auto;margin-block-end:var(--space-2)}.strct-md__table{border-collapse:collapse;width:max-content;min-width:100%}.strct-md__table th,.strct-md__table td{border:1px solid var(--b1);padding:4px 8px;text-align:start}.strct-md__table th{background:var(--bg-2);font-weight:600}.strct-md__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:-2px;background:var(--acc);animation:strct-md-caret 1s steps(2) infinite}@keyframes strct-md-caret{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-md__caret{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctMarkdown, selector: "strct-markdown", inputs: ["source", "tree", "streaming", "headingOffset", "linkPolicy", "tokens", "breaks", "newTabLabel", "inheritedTokens"], outputs: ["navigate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCode, selector: "strct-code", inputs: ["code", "title", "language", "copyable", "collapsible", "collapsed", "lineNumbers", "wrap", "maxHeight", "collapseLabel", "expandLabel", "regionLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMarkdown, decorators: [{
             type: Component,
@@ -30658,10 +30830,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <!-- Blocks inside a list item or a quote. -->
     <ng-template #blockRun let-blocks>
       @for (b of blocks; track $index) {
+        <!-- The nested view had no token templates of its own, so a claimed
+             run inside a list item or a quote was drawn as plain text while
+             the same run in a paragraph became a chip. -->
         <strct-markdown
           [tree]="[b]"
           [headingOffset]="headingOffset()"
           [linkPolicy]="linkPolicy()"
+          [tokens]="tokens()"
+          [breaks]="breaks()"
+          [inheritedTokens]="allTokenDefs()"
           (navigate)="navigate.emit($event)"
         />
       }
@@ -30733,6 +30911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     [size]="11"
                     aria-hidden="true"
                   />
+                  <span class="strct-sr-only">{{ newTabLabel() }}</span>
                 </a>
               }
               @case ('internal') {
@@ -30760,7 +30939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       }
     </ng-template>
   `, host: { class: 'strct-md' }, styles: [".strct-md{display:block;color:var(--t1);font-size:13px;line-height:1.55}.strct-md__p{margin:0 0 var(--space-2)}.strct-md__p:last-child{margin-bottom:0}.strct-md__h{margin:var(--space-3) 0 var(--space-2);font-size:14px;font-weight:600;color:var(--t1)}.strct-md__h:first-child{margin-top:0}.strct-md__list{margin:0 0 var(--space-2);padding-inline-start:20px}.strct-md__list li{margin-block:2px}.strct-md__quote{margin:0 0 var(--space-2);padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2);color:var(--t2)}.strct-md__rule{border:0;border-block-start:1px solid var(--b1);margin:var(--space-3) 0}.strct-md__codespan{font-family:var(--mono);font-size:.92em;background:var(--bg-2);border-radius:var(--radius-sm);padding:1px 4px}.strct-md__code{margin-block-end:var(--space-2)}.strct-md__link{color:var(--acc)}.strct-md__ext{margin-inline-start:2px;vertical-align:-1px}.strct-md__tablewrap{overflow-x:auto;margin-block-end:var(--space-2)}.strct-md__table{border-collapse:collapse;width:max-content;min-width:100%}.strct-md__table th,.strct-md__table td{border:1px solid var(--b1);padding:4px 8px;text-align:start}.strct-md__table th{background:var(--bg-2);font-weight:600}.strct-md__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:-2px;background:var(--acc);animation:strct-md-caret 1s steps(2) infinite}@keyframes strct-md-caret{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-md__caret{animation:none}}\n"] }]
-        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], headingOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingOffset", required: false }] }], linkPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkPolicy", required: false }] }], tokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "tokens", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], tokenDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctMarkdownToken), { isSignal: true }] }] } });
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], headingOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingOffset", required: false }] }], linkPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkPolicy", required: false }] }], tokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "tokens", required: false }] }], breaks: [{ type: i0.Input, args: [{ isSignal: true, alias: "breaks", required: false }] }], newTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newTabLabel", required: false }] }], inheritedTokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritedTokens", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], ownTokenDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctMarkdownToken), { isSignal: true }] }] } });
 
 /**
  * The product switcher every multi-product console grows: a chip beside the
@@ -30863,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. -->
@@ -30890,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
@@ -30899,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
@@ -30907,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>
@@ -30947,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>
@@ -30970,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. -->
@@ -30997,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
@@ -31006,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
@@ -31014,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>
@@ -31054,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>