@akcelik/strct 5.0.0 → 5.0.2

package/fesm2022/akcelik-strct.mjs

@@ -1749,7 +1749,7 @@ class StrctPageHeader {
       <div class="strct-ph__actions"><ng-content select="[strctPageHeaderActions]" /></div>
     </div>
     <ng-content />
-  `, isInline: true, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:var(--text-lg);font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:18px;font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctPageHeader, decorators: [{
             type: Component,
@@ -1794,7 +1794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-ph',
                         '[class.strct-ph--divider]': 'divider()',
                         '[class.strct-ph--pane]': "size() === 'pane'",
-                    }, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:var(--text-lg);font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"] }]
+                    }, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:18px;font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /** Leading marker of a row — a badge, a status dot, an icon. */
@@ -2216,8 +2216,25 @@ function strctCheckHostInputs(host, selector, owns) {
  * way to break a flex host.
  */
 function strctCheckHostDisplay(host, selector, expected) {
+    // A host inside a closed modal or an unshown tab is not in the document yet,
+    // so getComputedStyle reports '' — which is not an override. Warning there
+    // would be wrong twice over: the message is nonsense, and because the warning
+    // deduplicates by key it would mask a real override later on the same page.
+    // Wait for the element to be laid out instead.
+    if (!host.isConnected) {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => {
+            if (!host.isConnected)
+                return;
+            ro.disconnect();
+            strctCheckHostDisplay(host, selector, expected);
+        });
+        ro.observe(host);
+        return;
+    }
     const actual = getComputedStyle(host).display;
-    if (actual === expected)
+    if (!actual || actual === expected)
         return;
     strctDevWarn(`host-display:${selector}`, `[strct] <${selector}> needs display: ${expected}, but it computes to ${actual}. ` +
         `Wrap it, or set the margin on a wrapper, rather than changing its display.`);
@@ -2660,7 +2677,7 @@ class StrctSpinner {
       <span class="strct-spinner__ring"></span>
       <span class="strct-spinner__caption">{{ caption() }}</span>
     }
-  `, isInline: true, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}.strct-spinner--captioned{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;height:auto;border:0;border-radius:0;animation:none}.strct-spinner__ring{flex:none;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm .strct-spinner__ring{width:14px;height:14px;border-width:2px}.strct-spinner--lg .strct-spinner__ring{width:34px;height:34px;border-width:3px}@media(prefers-reduced-motion:reduce){.strct-spinner__ring{animation-duration:1.6s}}.strct-spinner__caption{font-size:var(--text-sm);color:var(--t3);line-height:1.3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSpinner, decorators: [{
             type: Component,
@@ -2676,7 +2693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[attr.aria-label]': 'caption() || label()',
                         '[class.strct-spinner--sm]': "size() === 'sm'",
                         '[class.strct-spinner--lg]': "size() === 'lg'",
-                    }, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}\n"] }]
+                    }, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}.strct-spinner--captioned{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;height:auto;border:0;border-radius:0;animation:none}.strct-spinner__ring{flex:none;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm .strct-spinner__ring{width:14px;height:14px;border-width:2px}.strct-spinner--lg .strct-spinner__ring{width:34px;height:34px;border-width:3px}@media(prefers-reduced-motion:reduce){.strct-spinner__ring{animation-duration:1.6s}}.strct-spinner__caption{font-size:var(--text-sm);color:var(--t3);line-height:1.3}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }] } });
 
 /**
@@ -7793,22 +7810,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class StrctCodeInline {
     /** Append a copy button that copies this element's text. */
     copyable = input(false, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * What the copy button puts on the clipboard, when that is not simply what
+     * the element says — a span showing a shortened thumbprint copies the whole
+     * one. Empty follows the element's own text, including later changes.
+     */
+    value = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Long ids wrap instead of overflowing a narrow card. */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     host = inject(ElementRef);
     vcr = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    /** The button, once it exists; and a counter the observer bumps. */
+    copyRef = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyRef" }] : /* istanbul ignore next */ []));
+    revision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
             if (!this.copyable())
                 return;
             const el = this.host.nativeElement;
             const ref = this.vcr.createComponent(StrctCopy);
-            // The text to copy is what the element says, before the button joins it.
-            ref.setInput('text', el.textContent?.trim() ?? '');
-            ref.changeDetectorRef.detectChanges();
             el.appendChild(ref.location.nativeElement);
+            this.copyRef.set(ref);
+            // The element's text is not a signal, so watch it: a path or a thumbprint
+            // that loads later must be the text that gets copied, not the first one.
+            if (typeof MutationObserver !== 'undefined') {
+                const mo = new MutationObserver(() => this.revision.update((n) => n + 1));
+                mo.observe(el, { childList: true, characterData: true, subtree: true });
+                this.destroyRef.onDestroy(() => mo.disconnect());
+            }
+        });
+        // Keeps the button's text in step with `value`, or with the element.
+        effect(() => {
+            const ref = this.copyRef();
+            if (!ref)
+                return;
+            this.revision(); // re-read the element whenever its text changed
+            const text = this.value() || this.ownText();
+            untracked(() => {
+                ref.setInput('text', text);
+                ref.changeDetectorRef.detectChanges();
+            });
         });
     }
+    /** What the element says, without the copy button's own content. */
+    ownText() {
+        const clone = this.host.nativeElement.cloneNode(true);
+        clone.querySelector('strct-copy')?.remove();
+        return clone.textContent?.trim() ?? '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCodeInline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctCodeInline, isStandalone: true, selector: "[strctCode]", inputs: { copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-code-inline--copyable": "copyable()" }, classAttribute: "strct-code-inline" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctCodeInline, isStandalone: true, selector: "[strctCode]", inputs: { copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-code-inline--copyable": "copyable()", "class.strct-code-inline--wrap": "wrap()" }, classAttribute: "strct-code-inline" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCodeInline, decorators: [{
             type: Directive,
@@ -7817,9 +7872,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     host: {
                         class: 'strct-code-inline',
                         '[class.strct-code-inline--copyable]': 'copyable()',
+                        '[class.strct-code-inline--wrap]': 'wrap()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
 
 /**
  * The standard strip above a data grid: a search field, the active filter
@@ -12522,6 +12578,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 /**
  * One projected `label → value` row inside a `<strct-description-list>`. The
  * value is whatever you project, so it can host a badge, icon or formatted text.
+ *
+ * Use **`<div strctDesc>`** inside a list: `<dl>` allows only `dt` / `dd` pairs
+ * or `<div>` wrappers as children, so a `<strct-desc>` element between them is
+ * invalid and assistive tech loses the pairing. `<strct-desc>` still works for a
+ * row rendered outside a list.
  */
 class StrctDesc {
     /** The row's label. */
@@ -12544,7 +12605,7 @@ class StrctDesc {
     note = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDesc, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDesc, isStandalone: true, selector: "strct-desc", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-desc--mono": "mono()", "class.strct-desc--muted": "muted()" }, classAttribute: "strct-desc" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDesc, isStandalone: true, selector: "strct-desc, div[strctDesc]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-desc--mono": "mono()", "class.strct-desc--muted": "muted()" }, classAttribute: "strct-desc" }, ngImport: i0, template: `
     <dt class="strct-desc__label">
       @if (status()) {
         <strct-status-dot size="sm" [status]="status()!" [label]="statusLabel()" />
@@ -12565,7 +12626,11 @@ class StrctDesc {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDesc, decorators: [{
             type: Component,
             args: [{
-                    selector: 'strct-desc',
+                    // Both spellings. `<strct-desc>` is the readable one, but a custom element
+                    // between `<dl>` and its `dt` / `dd` breaks the content model — axe reports
+                    // definition-list and dlitem — so inside a list, use `<div strctDesc>`, which
+                    // the model does allow. (`StrctInput` gained `strct-input` the same way.)
+                    selector: 'strct-desc, div[strctDesc]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [StrctIcon, StrctStatusDot],
@@ -14283,6 +14348,51 @@ class StrctDatagrid {
                 return;
             untracked(() => this.selected.set(new Set(init)));
         });
+        // A selection must not outlive its rows: after a delete the footer said
+        // "2 selected" and selectionChange consumers held ids for rows that are
+        // gone. Prune to the ids the current rows can account for, and emit only
+        // when the pruning actually removed something. A lazy grid cannot prove a
+        // row is gone rather than on another page, so it is left alone.
+        effect(() => {
+            const rows = this.rows();
+            if (this.lazy())
+                return;
+            untracked(() => {
+                const selected = this.selected();
+                if (!selected.size)
+                    return;
+                const present = new Set(rows.map((r) => this.idOf(r)));
+                const kept = new Set([...selected].filter((id) => present.has(id)));
+                if (kept.size === selected.size)
+                    return;
+                this.commitSelection(kept);
+            });
+        });
+        // Single mode: the checked row follows `selectedId`, whoever wrote it — the
+        // user picking, or a consumer restoring a pick from an earlier step. It
+        // writes `selected` directly rather than through commitSelection, so an
+        // external write never emits selectionChange (a user's own pick already
+        // emitted one).
+        effect(() => {
+            if (this.mode() !== 'single')
+                return;
+            const id = this.selectedId();
+            untracked(() => {
+                const next = id == null ? new Set() : new Set([id]);
+                const current = this.selected();
+                if (current.size === next.size && [...next].every((v) => current.has(v)))
+                    return;
+                this.selected.set(next);
+                // Keep the row snapshot in step when the row is loaded; a pick set
+                // before the rows arrive is cached when it is toggled later.
+                this.selectedRowCache.clear();
+                if (id != null) {
+                    const row = this.rows().find((r) => this.idOf(r) === id);
+                    if (row)
+                        this.selectedRowCache.set(id, row);
+                }
+            });
+        });
         // Dev mode only: say so when rowId or initialSelection cannot do what they
         // were given to do. In production the effect is never registered.
         if (typeof ngDevMode !== 'undefined' && ngDevMode) {
@@ -19737,7 +19847,7 @@ class StrctEmptyState {
       <p class="strct-empty__desc">{{ description() }}</p>
     }
     <div class="strct-empty__actions"><ng-content /></div>
-  `, isInline: true, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty--sm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px var(--space-2);text-align:start;padding:var(--space-3)}.strct-empty--sm .strct-empty__icon{width:16px;height:16px;border-radius:0;margin-bottom:0;background:none;grid-row:1}.strct-empty--sm .strct-empty__title{font-size:13px;grid-row:1}.strct-empty--sm .strct-empty__desc,.strct-empty--sm .strct-empty__actions{grid-column:2}.strct-empty--sm .strct-empty__desc{font-size:var(--text-sm);max-width:none}.strct-empty--sm .strct-empty__actions:empty{display:none}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { 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: StrctEmptyState, decorators: [{
             type: Component,
@@ -19762,7 +19872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-empty',
                         '[class.strct-empty--sm]': "size() === 'sm'",
                         '[attr.aria-busy]': "variant() === 'loading' ? 'true' : null",
-                    }, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"] }]
+                    }, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty--sm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px var(--space-2);text-align:start;padding:var(--space-3)}.strct-empty--sm .strct-empty__icon{width:16px;height:16px;border-radius:0;margin-bottom:0;background:none;grid-row:1}.strct-empty--sm .strct-empty__title{font-size:13px;grid-row:1}.strct-empty--sm .strct-empty__desc,.strct-empty--sm .strct-empty__actions{grid-column:2}.strct-empty--sm .strct-empty__desc{font-size:var(--text-sm);max-width:none}.strct-empty--sm .strct-empty__actions:empty{display:none}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
 /**
@@ -22922,7 +23032,9 @@ class StrctReorderItem {
     // Captured before our own binding ever writes tabindex, so it never flips.
     hadOwnTabindex = this.el.nativeElement.hasAttribute('tabindex');
     hostTabindex() {
-        return this.hadOwnTabindex ? null : 0;
+        if (this.hadOwnTabindex)
+            return null;
+        return this.list.reorderDisabled() ? null : 0;
     }
     /** The keys that apply: the sideways pair only when there is somewhere to go. */
     shortcuts() {
@@ -23008,7 +23120,7 @@ class StrctReorderItem {
         setTimeout(() => this.list.items()[to]?.focus());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctReorderItem, isStandalone: true, selector: "[strctReorderItem]", host: { listeners: { "pointerdown": "onPointerDown($event)", "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "!list.reorderDisabled()", "attr.tabindex": "hostTabindex()", "class.strct-reorder--dragging": "isDragging()", "class.strct-reorder--over": "isOver()", "attr.aria-roledescription": "'sortable'", "attr.aria-keyshortcuts": "shortcuts()", "attr.aria-posinset": "index() + 1", "attr.aria-setsize": "list.items().length", "attr.aria-describedby": "list.instructions() ? list.instructionsId : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctReorderItem, isStandalone: true, selector: "[strctReorderItem]", host: { listeners: { "pointerdown": "onPointerDown($event)", "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "!list.reorderDisabled()", "attr.tabindex": "hostTabindex()", "class.strct-reorder--dragging": "isDragging()", "class.strct-reorder--over": "isOver()", "attr.aria-roledescription": "list.reorderDisabled() ? null : 'sortable'", "attr.aria-keyshortcuts": "list.reorderDisabled() ? null : shortcuts()", "attr.aria-posinset": "list.reorderDisabled() ? null : index() + 1", "attr.aria-setsize": "list.reorderDisabled() ? null : list.items().length", "attr.aria-describedby": "list.reorderDisabled() || !list.instructions() ? null : list.instructionsId" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, decorators: [{
             type: Directive,
@@ -23019,11 +23131,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[attr.tabindex]': 'hostTabindex()',
                         '[class.strct-reorder--dragging]': 'isDragging()',
                         '[class.strct-reorder--over]': 'isOver()',
-                        '[attr.aria-roledescription]': "'sortable'",
-                        '[attr.aria-keyshortcuts]': 'shortcuts()',
-                        '[attr.aria-posinset]': 'index() + 1',
-                        '[attr.aria-setsize]': 'list.items().length',
-                        '[attr.aria-describedby]': 'list.instructions() ? list.instructionsId : null',
+                        // A display-only list says nothing about sorting: no roledescription, no
+                        // shortcuts, no tab stop of its own, and no description pointing at
+                        // instructions that do not apply.
+                        '[attr.aria-roledescription]': "list.reorderDisabled() ? null : 'sortable'",
+                        '[attr.aria-keyshortcuts]': 'list.reorderDisabled() ? null : shortcuts()',
+                        '[attr.aria-posinset]': 'list.reorderDisabled() ? null : index() + 1',
+                        '[attr.aria-setsize]': 'list.reorderDisabled() ? null : list.items().length',
+                        '[attr.aria-describedby]': 'list.reorderDisabled() || !list.instructions() ? null : list.instructionsId',
                     },
                 }]
         }], propDecorators: { onPointerDown: [{
@@ -23598,6 +23713,7 @@ class StrctWindow {
     ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
     service = inject(StrctWindowService);
     doc = inject(DOCUMENT$1);
+    zone = inject(NgZone);
     host = inject(ElementRef);
     zOffset = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zOffset" }] : /* istanbul ignore next */ []));
@@ -23612,6 +23728,16 @@ class StrctWindow {
     rect = computed(() => this.bounds() ?? this.fallback(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
     restoreTo = null;
+    /** A click beside the window, when `closeOnOutside` asks for one. */
+    onOutside = (event) => {
+        if (this.closeOnOutside() !== 'minimize' || !this.open() || this.minimized())
+            return;
+        const frame = this.host.nativeElement.querySelector('.strct-window__frame');
+        const target = event.target;
+        if (frame && target instanceof Node && frame.contains(target))
+            return;
+        this.zone.run(() => this.minimize());
+    };
     constructor() {
         this.service.register(this);
         effect(() => {
@@ -23621,6 +23747,19 @@ class StrctWindow {
                 queueMicrotask(() => this.focusTitle());
             }
         });
+        // `closeOnOutside` was declared and never read. The listener is added only
+        // while a window asks for it, and outside the zone — a click anywhere on
+        // the page must not cost a change-detection pass for every open window.
+        effect((onCleanup) => {
+            if (this.closeOnOutside() !== 'minimize' || !this.open() || this.minimized())
+                return;
+            // Deferred, so the click that opened the window does not close it.
+            const timer = setTimeout(() => this.zone.runOutsideAngular(() => this.doc.addEventListener('pointerdown', this.onOutside, true)));
+            onCleanup(() => {
+                clearTimeout(timer);
+                this.doc.removeEventListener('pointerdown', this.onOutside, true);
+            });
+        });
     }
     /** Raise this window above the others when it is clicked. */
     focusWindow() {
@@ -24011,8 +24150,25 @@ class StrctChatThread {
     /** False once the reader scrolls away from the end; true again at the end. */
     atEnd = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
     constructor() {
-        afterNextRender(() => this.scrollToEnd());
+        afterNextRender(() => {
+            this.scrollToEnd();
+            // A new message, or a streaming one growing, changes the list's height —
+            // and nothing else tells the thread that. Following `busy` alone left the
+            // reader looking at the message before last.
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const list = this.host.nativeElement.querySelector('.strct-chat__list');
+            if (!list)
+                return;
+            const ro = new ResizeObserver(() => {
+                if (this.autoScroll() && this.atEnd())
+                    this.scrollToEnd();
+            });
+            ro.observe(list);
+            this.destroyRef.onDestroy(() => ro.disconnect());
+        });
         effect(() => {
             this.busy();
             if (this.autoScroll() && this.atEnd())