npm - @akcelik/strct - Versions diffs - 5.0.1 → 5.1.0 - Mend

@akcelik/strct 5.0.1 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/fesm2022/akcelik-strct.mjs +238 -34
package/fesm2022/akcelik-strct.mjs.map +1 -1
package/package.json +1 -1
package/styles/_base.scss +53 -0
package/types/akcelik-strct.d.ts +62 -7

package/fesm2022/akcelik-strct.mjs CHANGED Viewed

@@ -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. */
@@ -1849,6 +1849,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class StrctListItem {
     /** The row activates on click / Enter / Space and emits `activated`. */
     interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Let the title and description wrap instead of ending in an ellipsis — for
+     * rows that carry a sentence. `strct-list [wrap]` does the same for every
+     * row at once; this is the per-row form.
+     */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Marks the current row (`aria-current`). */
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Optional leading rail, as `strct-card [status]`. */
@@ -1861,7 +1867,7 @@ class StrctListItem {
             this.activated.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctListItem, isStandalone: true, selector: "strct-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "listitem" }, properties: { "class.strct-li--interactive": "interactive()", "class.strct-li--selected": "selected()", "class.strct-li--status": "status()", "attr.data-status": "status()" }, classAttribute: "strct-li" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctListItem, isStandalone: true, selector: "strct-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "listitem" }, properties: { "class.strct-li--interactive": "interactive()", "class.strct-li--wrap": "wrap()", "class.strct-li--selected": "selected()", "class.strct-li--status": "status()", "attr.data-status": "status()" }, classAttribute: "strct-li" }, ngImport: i0, template: `
     <div
       class="strct-li__main"
       [attr.role]="interactive() ? 'button' : null"
@@ -1879,7 +1885,7 @@ class StrctListItem {
       <span class="strct-li__meta"><ng-content select="[strctListItemMeta]" /></span>
     </div>
     <span class="strct-li__trailing"><ng-content select="[strctListItemTrailing]" /></span>
-  `, isInline: true, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li--wrap .strct-li__main,.strct-list--wrap .strct-li__main{align-items:flex-start}.strct-li--wrap .strct-li__leading,.strct-list--wrap .strct-li__leading{min-height:calc(var(--text-md) * 1.45)}.strct-li--wrap .strct-li__title,.strct-li--wrap .strct-li__desc,.strct-list--wrap .strct-li__title,.strct-list--wrap .strct-li__desc{overflow:visible;text-overflow:clip;white-space:normal}.strct-li--wrap .strct-li__meta,.strct-list--wrap .strct-li__meta{align-self:flex-start;min-height:calc(var(--text-md) * 1.45)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctListItem, decorators: [{
             type: Component,
@@ -1905,11 +1911,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-li',
                         role: 'listitem',
                         '[class.strct-li--interactive]': 'interactive()',
+                        '[class.strct-li--wrap]': 'wrap()',
                         '[class.strct-li--selected]': 'selected()',
                         '[class.strct-li--status]': 'status()',
                         '[attr.data-status]': 'status()',
-                    }, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"] }]
-        }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+                    }, styles: [".strct-li{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);position:relative}.strct-list--dividers .strct-li+.strct-li{border-block-start:1px solid var(--b1)}.strct-li__main{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;min-height:44px;padding-block:6px;text-align:start;border-radius:var(--radius-sm)}.strct-list--dense .strct-li__main{min-height:32px;padding-block:2px}.strct-li--interactive .strct-li__main{cursor:pointer}.strct-li--interactive:hover{background:var(--bg-2)}.strct-li--selected{background:var(--acc-s)}.strct-li__main:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-li--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--t3)}.strct-li[data-status=accent]:before{background:var(--acc)}.strct-li[data-status=success]:before{background:var(--success)}.strct-li[data-status=warning]:before{background:var(--warning)}.strct-li[data-status=critical]:before{background:var(--critical)}.strct-li--wrap .strct-li__main,.strct-list--wrap .strct-li__main{align-items:flex-start}.strct-li--wrap .strct-li__leading,.strct-list--wrap .strct-li__leading{min-height:calc(var(--text-md) * 1.45)}.strct-li--wrap .strct-li__title,.strct-li--wrap .strct-li__desc,.strct-list--wrap .strct-li__title,.strct-list--wrap .strct-li__desc{overflow:visible;text-overflow:clip;white-space:normal}.strct-li--wrap .strct-li__meta,.strct-list--wrap .strct-li__meta{align-self:flex-start;min-height:calc(var(--text-md) * 1.45)}.strct-li__leading:empty,.strct-li__meta:empty,.strct-li__desc:empty,.strct-li__trailing:empty{display:none}.strct-li__leading{display:inline-flex;align-items:center;flex:none}.strct-li__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.strct-li__title{font-size:var(--text-md);color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__desc{font-size:var(--text-sm);color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-li__meta{display:inline-flex;align-items:center;flex:none;font-size:var(--text-sm);color:var(--t3);white-space:nowrap}.strct-li__trailing{display:inline-flex;align-items:center;gap:var(--space-2);flex:none}@container (max-width: 360px){.strct-li__main{flex-wrap:wrap}.strct-li__meta{flex-basis:100%;padding-inline-start:0}}\n"] }]
+        }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 /**
  * A short list of things with a status — alarms, findings, clusters in a
  * summary. A table needs a header row and columns, a timeline implies time
@@ -1929,6 +1936,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class StrctList {
     /** 32px rows instead of 44px. */
     dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Every row's title and description wrap instead of ending in an ellipsis.
+     * `strct-list-item [wrap]` turns it on for one row.
+     */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Hairline between rows. */
     dividers = input(true, { ...(ngDevMode ? { debugName: "dividers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Shown when the list has no items. */
@@ -1940,7 +1952,7 @@ class StrctList {
     items = contentChildren(StrctListItem, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctList, isStandalone: true, selector: "strct-list", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "label() || null", "class.strct-list--dense": "dense()", "class.strct-list--dividers": "dividers()" }, classAttribute: "strct-list" }, queries: [{ propertyName: "items", predicate: StrctListItem, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctList, isStandalone: true, selector: "strct-list", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "label() || null", "class.strct-list--dense": "dense()", "class.strct-list--dividers": "dividers()", "class.strct-list--wrap": "wrap()" }, classAttribute: "strct-list" }, queries: [{ propertyName: "items", predicate: StrctListItem, isSignal: true }], ngImport: i0, template: `
     <ng-content />
     @if (emptyText() && !items().length) {
       <p class="strct-list__empty">{{ emptyText() }}</p>
@@ -1960,8 +1972,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[attr.aria-label]': 'label() || null',
                         '[class.strct-list--dense]': 'dense()',
                         '[class.strct-list--dividers]': 'dividers()',
+                        '[class.strct-list--wrap]': 'wrap()',
                     }, styles: [".strct-list{display:block;container-type:inline-size}.strct-list__empty{margin:0;padding:var(--space-3);font-size:var(--text-sm);color:var(--t3)}\n"] }]
-        }], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctListItem), { isSignal: true }] }] } });
+        }], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctListItem), { isSignal: true }] }] } });
 /** Follows the heading on its line — a badge, a count, a status dot. */
 class StrctSectionHeaderMeta {
@@ -2317,6 +2330,14 @@ class StrctTag {
     /** Accessible label for the remove button. */
     removeLabel = input('Remove', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * What activating the tag's body does, for assistive tech. The body's own
+     * name is its text plus the leading slot — "Connected APP02" — which says
+     * what the tag *is*, not what pressing it does ("Show the console of APP02").
+     * The × keeps `removeLabel`.
+     */
+    activateLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activateLabel" }] : /* istanbul ignore next */ []));
     /**
      * The body becomes a control: pointer, hover, focus ring, and `activated` on
      * click / Enter / Space. The × stays a separate tab stop, so "open it" and
@@ -2337,11 +2358,12 @@ class StrctTag {
             this.activated.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTag, isStandalone: true, selector: "strct-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activated: "activated" }, host: { properties: { "class.strct-tag--interactive": "interactive() && !disabled()", "class.strct-tag--pill": "shape() === 'pill'", "class.strct-tag--mono": "mono()", "class.strct-tag--accent": "status() === 'accent'", "class.strct-tag--success": "status() === 'success'", "class.strct-tag--warning": "status() === 'warning'", "class.strct-tag--critical": "status() === 'critical'" }, classAttribute: "strct-tag" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTag, isStandalone: true, selector: "strct-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, activateLabel: { classPropertyName: "activateLabel", publicName: "activateLabel", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activated: "activated" }, host: { properties: { "class.strct-tag--interactive": "interactive() && !disabled()", "class.strct-tag--pill": "shape() === 'pill'", "class.strct-tag--mono": "mono()", "class.strct-tag--accent": "status() === 'accent'", "class.strct-tag--success": "status() === 'success'", "class.strct-tag--warning": "status() === 'warning'", "class.strct-tag--critical": "status() === 'critical'" }, classAttribute: "strct-tag" }, ngImport: i0, template: `
     <span
       class="strct-tag__text"
       [attr.role]="interactive() ? 'button' : null"
       [attr.tabindex]="interactive() && !disabled() ? 0 : null"
+      [attr.aria-label]="interactive() && activateLabel() ? activateLabel() : null"
       (click)="onActivate()"
       (keydown.enter)="onActivate()"
       (keydown.space)="$event.preventDefault(); onActivate()"
@@ -2370,6 +2392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       class="strct-tag__text"
       [attr.role]="interactive() ? 'button' : null"
       [attr.tabindex]="interactive() && !disabled() ? 0 : null"
+      [attr.aria-label]="interactive() && activateLabel() ? activateLabel() : null"
       (click)="onActivate()"
       (keydown.enter)="onActivate()"
       (keydown.space)="$event.preventDefault(); onActivate()"
@@ -2399,7 +2422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-tag--warning]': "status() === 'warning'",
                         '[class.strct-tag--critical]': "status() === 'critical'",
                     }, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:9px 4px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-inline-end:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__text{display:inline-flex;align-items:center;gap:5px}.strct-tag--interactive .strct-tag__text{cursor:pointer;border-radius:3px}.strct-tag--interactive:hover{border-color:var(--b3);background:var(--bg-2)}.strct-tag--interactive.strct-tag--accent:hover{border-color:var(--acc)}.strct-tag__text:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-tag--pill{border-radius:var(--radius-full, 999px);padding-inline:10px 5px}.strct-tag--pill:not(:has(.strct-tag__remove)){padding-inline-end:10px}.strct-tag--pill .strct-tag__remove{border-radius:999px}.strct-tag--mono{font-family:var(--mono)}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover,.strct-tag__remove:focus-visible{opacity:1;background:var(--dn)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], activateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLabel", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 /**
  * Circular avatar: an image when `src` is set, otherwise initials from `name`.
@@ -2899,6 +2922,12 @@ class StrctCard {
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Tighter paddings for dense dashboards. */
     dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Fill the height the layout gives the card (a stretched grid cell) as a
+     * column: the block takes the slack and the footer sits on the bottom edge,
+     * so a row of cards has its actions on one line.
+     */
+    fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Indeterminate top bar + aria-busy; body/footer dim and ignore input. */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Allow collapsing to just the header (a chevron appears in the header). */
@@ -2910,7 +2939,7 @@ class StrctCard {
         this.collapsed.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctCard, isStandalone: true, selector: "strct-card", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.strct-card--accent": "status() === 'accent'", "class.strct-card--success": "status() === 'success'", "class.strct-card--warning": "status() === 'warning'", "class.strct-card--critical": "status() === 'critical'", "class.strct-card--interactive": "interactive()", "class.strct-card--selected": "selected()", "class.strct-card--dense": "dense()", "class.strct-card--loading": "loading()", "class.strct-card--collapsed": "collapsible() && collapsed()", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "strct-card" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-card{position:relative;display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--sh);overflow:hidden}.strct-card--accent{border-inline-start:3px solid var(--acc)}.strct-card--success{border-inline-start:3px solid var(--success)}.strct-card--warning{border-inline-start:3px solid var(--warning)}.strct-card--critical{border-inline-start:3px solid var(--critical)}.strct-card--interactive{cursor:pointer;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}.strct-card--interactive:hover{border-color:var(--acc50);transform:translateY(-1px);box-shadow:var(--shh)}.strct-card--interactive:focus-within{border-color:var(--acc)}.strct-card--selected{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--sh)}.strct-card--dense{--strct-card-px: var(--space-3);--strct-card-py: var(--space-2);--strct-card-pb: var(--space-3)}.strct-card--loading:before{content:\"\";position:absolute;top:0;left:0;height:2px;width:40%;background:var(--acc);animation:strct-card-load 1.1s ease-in-out infinite;z-index:var(--z-base)}.strct-card--loading>strct-card-block,.strct-card--loading>strct-card-footer{opacity:.55;pointer-events:none}@keyframes strct-card-load{0%{transform:translate(-100%)}to{transform:translate(280%)}}.strct-card--collapsed>strct-card-block,.strct-card--collapsed>strct-card-footer{display:none}.strct-card--collapsed>strct-card-header{border-bottom:0}@media(prefers-reduced-motion:reduce){.strct-card--interactive{transition:none}.strct-card--interactive:hover{transform:none}.strct-card--loading:before{animation:none;width:100%;opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctCard, isStandalone: true, selector: "strct-card", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.strct-card--accent": "status() === 'accent'", "class.strct-card--success": "status() === 'success'", "class.strct-card--warning": "status() === 'warning'", "class.strct-card--critical": "status() === 'critical'", "class.strct-card--interactive": "interactive()", "class.strct-card--selected": "selected()", "class.strct-card--dense": "dense()", "class.strct-card--loading": "loading()", "class.strct-card--fill": "fill()", "class.strct-card--collapsed": "collapsible() && collapsed()", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "strct-card" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-card{position:relative;display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--sh);overflow:hidden}.strct-card--fill{display:flex;flex-direction:column;height:100%}.strct-card--fill .strct-card__block{flex:1}.strct-card--fill .strct-card__footer{margin-block-start:auto}.strct-card--accent{border-inline-start:3px solid var(--acc)}.strct-card--success{border-inline-start:3px solid var(--success)}.strct-card--warning{border-inline-start:3px solid var(--warning)}.strct-card--critical{border-inline-start:3px solid var(--critical)}.strct-card--interactive{cursor:pointer;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}.strct-card--interactive:hover{border-color:var(--acc50);transform:translateY(-1px);box-shadow:var(--shh)}.strct-card--interactive:focus-within{border-color:var(--acc)}.strct-card--selected{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--sh)}.strct-card--dense{--strct-card-px: var(--space-3);--strct-card-py: var(--space-2);--strct-card-pb: var(--space-3)}.strct-card--loading:before{content:\"\";position:absolute;top:0;left:0;height:2px;width:40%;background:var(--acc);animation:strct-card-load 1.1s ease-in-out infinite;z-index:var(--z-base)}.strct-card--loading>strct-card-block,.strct-card--loading>strct-card-footer{opacity:.55;pointer-events:none}@keyframes strct-card-load{0%{transform:translate(-100%)}to{transform:translate(280%)}}.strct-card--collapsed>strct-card-block,.strct-card--collapsed>strct-card-footer{display:none}.strct-card--collapsed>strct-card-header{border-bottom:0}@media(prefers-reduced-motion:reduce){.strct-card--interactive{transition:none}.strct-card--interactive:hover{transform:none}.strct-card--loading:before{animation:none;width:100%;opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCard, decorators: [{
             type: Component,
@@ -2924,10 +2953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-card--selected]': 'selected()',
                         '[class.strct-card--dense]': 'dense()',
                         '[class.strct-card--loading]': 'loading()',
+                        '[class.strct-card--fill]': 'fill()',
                         '[class.strct-card--collapsed]': 'collapsible() && collapsed()',
                         '[attr.aria-busy]': 'loading() ? "true" : null',
-                    }, styles: [".strct-card{position:relative;display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--sh);overflow:hidden}.strct-card--accent{border-inline-start:3px solid var(--acc)}.strct-card--success{border-inline-start:3px solid var(--success)}.strct-card--warning{border-inline-start:3px solid var(--warning)}.strct-card--critical{border-inline-start:3px solid var(--critical)}.strct-card--interactive{cursor:pointer;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}.strct-card--interactive:hover{border-color:var(--acc50);transform:translateY(-1px);box-shadow:var(--shh)}.strct-card--interactive:focus-within{border-color:var(--acc)}.strct-card--selected{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--sh)}.strct-card--dense{--strct-card-px: var(--space-3);--strct-card-py: var(--space-2);--strct-card-pb: var(--space-3)}.strct-card--loading:before{content:\"\";position:absolute;top:0;left:0;height:2px;width:40%;background:var(--acc);animation:strct-card-load 1.1s ease-in-out infinite;z-index:var(--z-base)}.strct-card--loading>strct-card-block,.strct-card--loading>strct-card-footer{opacity:.55;pointer-events:none}@keyframes strct-card-load{0%{transform:translate(-100%)}to{transform:translate(280%)}}.strct-card--collapsed>strct-card-block,.strct-card--collapsed>strct-card-footer{display:none}.strct-card--collapsed>strct-card-header{border-bottom:0}@media(prefers-reduced-motion:reduce){.strct-card--interactive{transition:none}.strct-card--interactive:hover{transform:none}.strct-card--loading:before{animation:none;width:100%;opacity:.4}}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+                    }, styles: [".strct-card{position:relative;display:block;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--sh);overflow:hidden}.strct-card--fill{display:flex;flex-direction:column;height:100%}.strct-card--fill .strct-card__block{flex:1}.strct-card--fill .strct-card__footer{margin-block-start:auto}.strct-card--accent{border-inline-start:3px solid var(--acc)}.strct-card--success{border-inline-start:3px solid var(--success)}.strct-card--warning{border-inline-start:3px solid var(--warning)}.strct-card--critical{border-inline-start:3px solid var(--critical)}.strct-card--interactive{cursor:pointer;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}.strct-card--interactive:hover{border-color:var(--acc50);transform:translateY(-1px);box-shadow:var(--shh)}.strct-card--interactive:focus-within{border-color:var(--acc)}.strct-card--selected{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--sh)}.strct-card--dense{--strct-card-px: var(--space-3);--strct-card-py: var(--space-2);--strct-card-pb: var(--space-3)}.strct-card--loading:before{content:\"\";position:absolute;top:0;left:0;height:2px;width:40%;background:var(--acc);animation:strct-card-load 1.1s ease-in-out infinite;z-index:var(--z-base)}.strct-card--loading>strct-card-block,.strct-card--loading>strct-card-footer{opacity:.55;pointer-events:none}@keyframes strct-card-load{0%{transform:translate(-100%)}to{transform:translate(280%)}}.strct-card--collapsed>strct-card-block,.strct-card--collapsed>strct-card-footer{display:none}.strct-card--collapsed>strct-card-header{border-bottom:0}@media(prefers-reduced-motion:reduce){.strct-card--interactive{transition:none}.strct-card--interactive:hover{transform:none}.strct-card--loading:before{animation:none;width:100%;opacity:.4}}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
 /** Header section of a {@link StrctCard}. */
 class StrctCardHeader {
     /** Optional leading icon (StrctIcon set). */
@@ -2939,6 +2969,15 @@ class StrctCardHeader {
     /** `title` — as today; `overline` — uppercase, letter-spaced, quieter. */
     appearance = input('title', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /**
+     * Render `heading` as a real heading element at this level, so the card's
+     * title joins the page outline. `null` (the default) keeps the span, which
+     * is what a card inside an already-titled section wants.
+     */
+    level = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    /** Let a long heading wrap instead of ending in an ellipsis. */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Accessible labels for the collapse toggle (localizable). */
     collapseLabel = input('Collapse', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
@@ -2946,13 +2985,38 @@ class StrctCardHeader {
     ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
     card = inject(StrctCard, { optional: true });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCardHeader, isStandalone: true, selector: "strct-card-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-card__header--overline": "appearance() === 'overline'" }, classAttribute: "strct-card__header" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCardHeader, isStandalone: true, selector: "strct-card-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-card__header--overline": "appearance() === 'overline'", "class.strct-card__header--wrap": "wrap()" }, classAttribute: "strct-card__header" }, ngImport: i0, template: `
     <span class="strct-card__hmain">
+      <!-- Declared before the catch-all so the selector wins; CSS order keeps
+           it first. A drag grip leads the title this way. -->
+      <ng-content select="[strctCardHeaderLeading]" />
       @if (icon()) {
         <strct-icon class="strct-card__hicon" [name]="icon()" [size]="16" [strokeWidth]="1.4" />
       }
       @if (heading()) {
-        <span class="strct-card__htitle">{{ heading() }}</span>
+        <!-- A card title belongs in the page outline when the consumer says
+             where: level renders the real heading element, and the default
+             stays a span so no app grows headings it did not ask for. -->
+        @switch (level()) {
+          @case (2) {
+            <h2 class="strct-card__htitle">{{ heading() }}</h2>
+          }
+          @case (3) {
+            <h3 class="strct-card__htitle">{{ heading() }}</h3>
+          }
+          @case (4) {
+            <h4 class="strct-card__htitle">{{ heading() }}</h4>
+          }
+          @case (5) {
+            <h5 class="strct-card__htitle">{{ heading() }}</h5>
+          }
+          @case (6) {
+            <h6 class="strct-card__htitle">{{ heading() }}</h6>
+          }
+          @default {
+            <span class="strct-card__htitle">{{ heading() }}</span>
+          }
+        }
       }
       <ng-content select="[strctCardHeaderMeta]" />
       <!-- Default slot: with no heading this renders exactly as before. -->
@@ -2978,17 +3042,42 @@ class StrctCardHeader {
         />
       </button>
     }
-  `, isInline: true, styles: [".strct-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--strct-card-py, var(--space-3)) var(--strct-card-px, var(--space-4));border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-card__hmain,.strct-card__hend{display:flex;align-items:center;gap:var(--space-2);min-width:0}.strct-card__hend:empty{display:none}.strct-card__htitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-card__header--overline .strct-card__htitle{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}[strctCardHeaderNote]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:var(--text-sm);color:var(--t3)}.strct-card__hicon{color:var(--t2);flex-shrink:0}.strct-card__collapse{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px;margin-inline-start:0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t3);cursor:pointer;flex-shrink:0}.strct-card__collapse:hover{color:var(--t1);background:var(--bg-3)}.strct-card__collapse:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-card__collapse strct-icon{transition:transform .15s ease}.strct-card__chev--collapsed{transform:rotate(-90deg)}@media(prefers-reduced-motion:reduce){.strct-card__collapse strct-icon{transition: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-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--strct-card-py, var(--space-3)) var(--strct-card-px, var(--space-4));border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-card__hmain,.strct-card__hend{display:flex;align-items:center;gap:var(--space-2);min-width:0}.strct-card__hend:empty{display:none}.strct-card__htitle{min-width:0;margin:0;font:inherit;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-card__header--wrap{align-items:flex-start}.strct-card__header--wrap .strct-card__htitle{overflow:visible;text-overflow:clip;white-space:normal}.strct-card__header--wrap .strct-card__hmain{flex-wrap:wrap}.strct-card__header--overline .strct-card__htitle{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}[strctCardHeaderNote]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:var(--text-sm);color:var(--t3)}.strct-card__hicon{color:var(--t2);flex-shrink:0}.strct-card__collapse{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px;margin-inline-start:0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t3);cursor:pointer;flex-shrink:0}.strct-card__collapse:hover{color:var(--t1);background:var(--bg-3)}.strct-card__collapse:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-card__collapse strct-icon{transition:transform .15s ease}.strct-card__chev--collapsed{transform:rotate(-90deg)}@media(prefers-reduced-motion:reduce){.strct-card__collapse strct-icon{transition: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: StrctCardHeader, decorators: [{
             type: Component,
             args: [{ selector: 'strct-card-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
     <span class="strct-card__hmain">
+      <!-- Declared before the catch-all so the selector wins; CSS order keeps
+           it first. A drag grip leads the title this way. -->
+      <ng-content select="[strctCardHeaderLeading]" />
       @if (icon()) {
         <strct-icon class="strct-card__hicon" [name]="icon()" [size]="16" [strokeWidth]="1.4" />
       }
       @if (heading()) {
-        <span class="strct-card__htitle">{{ heading() }}</span>
+        <!-- A card title belongs in the page outline when the consumer says
+             where: level renders the real heading element, and the default
+             stays a span so no app grows headings it did not ask for. -->
+        @switch (level()) {
+          @case (2) {
+            <h2 class="strct-card__htitle">{{ heading() }}</h2>
+          }
+          @case (3) {
+            <h3 class="strct-card__htitle">{{ heading() }}</h3>
+          }
+          @case (4) {
+            <h4 class="strct-card__htitle">{{ heading() }}</h4>
+          }
+          @case (5) {
+            <h5 class="strct-card__htitle">{{ heading() }}</h5>
+          }
+          @case (6) {
+            <h6 class="strct-card__htitle">{{ heading() }}</h6>
+          }
+          @default {
+            <span class="strct-card__htitle">{{ heading() }}</span>
+          }
+        }
       }
       <ng-content select="[strctCardHeaderMeta]" />
       <!-- Default slot: with no heading this renders exactly as before. -->
@@ -3017,8 +3106,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
   `, host: {
                         class: 'strct-card__header',
                         '[class.strct-card__header--overline]': "appearance() === 'overline'",
-                    }, styles: [".strct-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--strct-card-py, var(--space-3)) var(--strct-card-px, var(--space-4));border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-card__hmain,.strct-card__hend{display:flex;align-items:center;gap:var(--space-2);min-width:0}.strct-card__hend:empty{display:none}.strct-card__htitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-card__header--overline .strct-card__htitle{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}[strctCardHeaderNote]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:var(--text-sm);color:var(--t3)}.strct-card__hicon{color:var(--t2);flex-shrink:0}.strct-card__collapse{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px;margin-inline-start:0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t3);cursor:pointer;flex-shrink:0}.strct-card__collapse:hover{color:var(--t1);background:var(--bg-3)}.strct-card__collapse:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-card__collapse strct-icon{transition:transform .15s ease}.strct-card__chev--collapsed{transform:rotate(-90deg)}@media(prefers-reduced-motion:reduce){.strct-card__collapse strct-icon{transition:none}}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }] } });
+                        '[class.strct-card__header--wrap]': 'wrap()',
+                    }, styles: [".strct-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--strct-card-py, var(--space-3)) var(--strct-card-px, var(--space-4));border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-card__hmain,.strct-card__hend{display:flex;align-items:center;gap:var(--space-2);min-width:0}.strct-card__hend:empty{display:none}.strct-card__htitle{min-width:0;margin:0;font:inherit;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-card__header--wrap{align-items:flex-start}.strct-card__header--wrap .strct-card__htitle{overflow:visible;text-overflow:clip;white-space:normal}.strct-card__header--wrap .strct-card__hmain{flex-wrap:wrap}.strct-card__header--overline .strct-card__htitle{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}[strctCardHeaderNote]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:var(--text-sm);color:var(--t3)}.strct-card__hicon{color:var(--t2);flex-shrink:0}.strct-card__collapse{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px;margin-inline-start:0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t3);cursor:pointer;flex-shrink:0}.strct-card__collapse:hover{color:var(--t1);background:var(--bg-3)}.strct-card__collapse:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-card__collapse strct-icon{transition:transform .15s ease}.strct-card__chev--collapsed{transform:rotate(-90deg)}@media(prefers-reduced-motion:reduce){.strct-card__collapse strct-icon{transition:none}}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }] } });
+/** Leads the card's heading — a drag grip, a status dot, an avatar. */
+class StrctCardHeaderLeading {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCardHeaderLeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctCardHeaderLeading, isStandalone: true, selector: "[strctCardHeaderLeading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCardHeaderLeading, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctCardHeaderLeading]' }]
+        }] });
 /** Follows the card's heading on its line — a badge, a count. */
 class StrctCardHeaderMeta {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCardHeaderMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -7810,22 +7909,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,
@@ -7834,9 +7971,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
@@ -9662,7 +9800,7 @@ class StrctChips {
         (blur)="commitDraft(); onTouched()"
       />
     </div>
-  `, isInline: true, styles: [".strct-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:38px;padding:5px 8px;background:var(--bg-2);border:1px solid var(--b2);border-radius:6px;cursor:text;transition:border-color .14s ease,box-shadow .14s ease}.strct-chips:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-chips__input{flex:1;min-width:80px;border:0;outline:none;background:transparent;font-family:var(--font);font-size:13px;color:var(--t1);padding:3px 2px}.strct-chips__input::placeholder{color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctTag, selector: "strct-tag", inputs: ["status", "removable", "disabled", "removeLabel", "interactive", "shape", "mono"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:38px;padding:5px 8px;background:var(--bg-2);border:1px solid var(--b2);border-radius:6px;cursor:text;transition:border-color .14s ease,box-shadow .14s ease}.strct-chips:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-chips__input{flex:1;min-width:80px;border:0;outline:none;background:transparent;font-family:var(--font);font-size:13px;color:var(--t1);padding:3px 2px}.strct-chips__input::placeholder{color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctTag, selector: "strct-tag", inputs: ["status", "removable", "disabled", "removeLabel", "activateLabel", "interactive", "shape", "mono"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChips, decorators: [{
             type: Component,
@@ -14309,6 +14447,26 @@ 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
@@ -22973,7 +23131,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() {
@@ -23059,7 +23219,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,
@@ -23070,11 +23230,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: [{
@@ -23649,6 +23812,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 */ []));
@@ -23663,6 +23827,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(() => {
@@ -23672,6 +23846,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() {
@@ -24062,8 +24249,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())
@@ -26750,5 +26954,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map