@akcelik/strct 4.19.0 → 4.21.0

package/fesm2022/akcelik-strct.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, contentChildren, HostListener, effect, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, ViewContainerRef, Injector, viewChildren, Renderer2, Pipe, afterRenderEffect } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -1033,21 +1033,66 @@ class StrctShellService {
  *   </strct-shell>
  */
 class StrctShell {
+    /**
+     * Id of the main region. Given one, the shell renders "Skip to main content"
+     * as its first focusable element — invisible until focused. Null (the
+     * default) renders nothing, so existing shells are unchanged.
+     */
+    skipLinkTarget = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkTarget" }] : /* istanbul ignore next */ []));
+    /** The link's text (localisable). */
+    skipLinkLabel = input('Skip to main content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : /* istanbul ignore next */ []));
+    doc = inject(DOCUMENT$1);
+    /**
+     * Moves focus rather than only the scroll position: an href alone scrolls
+     * without focusing, so the next Tab would resume from the link.
+     */
+    skipToMain(event) {
+        const id = this.skipLinkTarget();
+        const target = id ? this.doc.getElementById(id) : null;
+        if (!target)
+            return;
+        event.preventDefault();
+        if (!target.hasAttribute('tabindex'))
+            target.setAttribute('tabindex', '-1');
+        target.focus();
+        // Optional: not every environment implements it (jsdom does not).
+        target.scrollIntoView?.({ block: 'start' });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", inputs: { skipLinkTarget: { classPropertyName: "skipLinkTarget", publicName: "skipLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
+    @if (skipLinkTarget()) {
+      <!-- The first focusable element on the page, invisible until focused. -->
+      <a
+        class="strct-shell__skip"
+        [attr.href]="'#' + skipLinkTarget()"
+        (click)="skipToMain($event)"
+        >{{ skipLinkLabel() }}</a
+      >
+    }
     <ng-content select="strct-header" />
     <div class="strct-shell__main"><ng-content /></div>
     <ng-content select="strct-footer" />
-  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, decorators: [{
             type: Component,
             args: [{ selector: 'strct-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [StrctShellService], template: `
+    @if (skipLinkTarget()) {
+      <!-- The first focusable element on the page, invisible until focused. -->
+      <a
+        class="strct-shell__skip"
+        [attr.href]="'#' + skipLinkTarget()"
+        (click)="skipToMain($event)"
+        >{{ skipLinkLabel() }}</a
+      >
+    }
     <ng-content select="strct-header" />
     <div class="strct-shell__main"><ng-content /></div>
     <ng-content select="strct-footer" />
-  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}\n"] }]
-        }] });
+  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
+        }], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
 /** Top application bar. Holds brand on the left and actions on the right. */
 class StrctHeader {
     /** Accessible label of the mobile drawer toggle. */
@@ -2790,13 +2835,20 @@ class StrctAccordionPanel {
     /** Whether the panel is open (two-way). */
     expanded = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /**
+     * `quiet` is a fold in running text — no border or background, a `--text-sm`
+     * summary in `--t2` with a chevron, the body indented. It reads like a raw
+     * `<details>` while keeping the button + region semantics.
+     */
+    appearance = input('boxed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     bodyId = `strct-acc-${++accordionCounter}`;
     headId = `${this.bodyId}-head`;
     toggle() {
         this.expanded.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAccordionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAccordionPanel, isStandalone: true, selector: "strct-accordion-panel", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "strct-acc" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAccordionPanel, isStandalone: true, selector: "strct-accordion-panel", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.strct-acc--quiet": "appearance() === 'quiet'" }, classAttribute: "strct-acc" }, ngImport: i0, template: `
     <button
       type="button"
       class="strct-acc__head"
@@ -2815,7 +2867,7 @@ class StrctAccordionPanel {
         <ng-content />
       </div>
     }
-  `, isInline: true, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\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-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}.strct-acc--quiet+.strct-acc--quiet{border-top:0}.strct-acc--quiet .strct-acc__head{width:auto;padding:2px 0;gap:6px;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-acc--quiet .strct-acc__head:hover{background:none;color:var(--t1);text-decoration:underline}.strct-acc--quiet .strct-acc__head:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-acc--quiet .strct-acc__title{flex:none}.strct-acc--quiet .strct-acc__body{padding:4px 0 8px;padding-inline-start:var(--space-3);border-top:0;font-size:var(--text-sm)}\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: StrctAccordionPanel, decorators: [{
             type: Component,
@@ -2838,8 +2890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <ng-content />
       </div>
     }
-  `, host: { class: 'strct-acc' }, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\n"] }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+  `, host: {
+                        class: 'strct-acc',
+                        '[class.strct-acc--quiet]': "appearance() === 'quiet'",
+                    }, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}.strct-acc--quiet+.strct-acc--quiet{border-top:0}.strct-acc--quiet .strct-acc__head{width:auto;padding:2px 0;gap:6px;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-acc--quiet .strct-acc__head:hover{background:none;color:var(--t1);text-decoration:underline}.strct-acc--quiet .strct-acc__head:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-acc--quiet .strct-acc__title{flex:none}.strct-acc--quiet .strct-acc__body{padding:4px 0 8px;padding-inline-start:var(--space-3);border-top:0;font-size:var(--text-sm)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
 let tabsCounter = 0;
 /** A single tab. Place inside `<strct-tabs>`; `label` names its button. */
@@ -20698,6 +20753,22 @@ class StrctSplitter {
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(85, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * What `split`, `minSize` and `maxSize` are measured in. A sidebar is 280px,
+     * not 22%, so `px` sizes the start pane in pixels and drags it in pixels.
+     */
+    unit = input('percent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    /** Bounds in `unit` for the start pane; they win over `min` / `max`. */
+    minSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    maxSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** The start pane can be collapsed to nothing (Enter on the gutter). */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether it is collapsed (two-way). */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /** Stack panes vertically (gutter drags up/down). */
     vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Accessible name of the separator (localizable). */
@@ -20706,8 +20777,20 @@ class StrctSplitter {
     /** Keyboard nudge step in percent. */
     step = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    clamped = computed(() => Math.min(this.max(), Math.max(this.min(), this.split())), /* @ts-ignore */
+    /** The effective bounds, in whichever unit the splitter is measured in. */
+    lowerBound = computed(() => this.minSize() ?? (this.unit() === 'px' ? 0 : this.min()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lowerBound" }] : /* istanbul ignore next */ []));
+    upperBound = computed(() => this.maxSize() ?? (this.unit() === 'px' ? Number.POSITIVE_INFINITY : this.max()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "upperBound" }] : /* istanbul ignore next */ []));
+    clamped = computed(() => Math.min(this.upperBound(), Math.max(this.lowerBound(), this.split())), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    /** The start pane's flex-basis: its size, or nothing while collapsed. */
+    startBasis = computed(() => {
+        if (this.collapsed())
+            return '0px';
+        return this.unit() === 'px' ? `${this.clamped()}px` : `${this.clamped()}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startBasis" }] : /* istanbul ignore next */ []));
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
     moveHandler = (e) => this.onDragMove(e);
@@ -20733,7 +20816,11 @@ class StrctSplitter {
             : (event.clientX - rect.left) / rect.width;
         if (!this.vertical() && this.isRtl())
             ratio = 1 - ratio;
-        this.split.set(Math.min(this.max(), Math.max(this.min(), Math.round(ratio * 100))));
+        const span = this.vertical() ? rect.height : rect.width;
+        const next = this.unit() === 'px' ? Math.round(ratio * span) : Math.round(ratio * 100);
+        if (this.collapsed())
+            this.collapsed.set(false);
+        this.split.set(Math.min(this.upperBound(), Math.max(this.lowerBound(), next)));
     }
     onDragEnd() {
         this.dragging.set(false);
@@ -20754,23 +20841,36 @@ class StrctSplitter {
         // RTL: the start pane extends to the left, so Left grows and Right shrinks.
         if (!this.vertical() && this.isRtl())
             [dec, inc] = [inc, dec];
+        // Enter collapses a collapsible pane, and restores it.
+        if (this.collapsible() && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            this.collapsed.update((v) => !v);
+            return;
+        }
+        const step = this.unit() === 'px' ? this.step() * 8 : this.step();
         let next = null;
         if (event.key === dec)
-            next = this.clamped() - this.step();
+            next = this.clamped() - step;
         else if (event.key === inc)
-            next = this.clamped() + this.step();
+            next = this.clamped() + step;
         else if (event.key === 'Home')
-            next = this.min();
+            next = this.lowerBound();
         else if (event.key === 'End')
-            next = this.max();
+            next = Number.isFinite(this.upperBound()) ? this.upperBound() : this.clamped() + step * 4;
         if (next == null)
             return;
         event.preventDefault();
-        this.split.set(Math.min(this.max(), Math.max(this.min(), next)));
+        if (this.collapsed())
+            this.collapsed.set(false);
+        this.split.set(Math.min(this.upperBound(), Math.max(this.lowerBound(), next)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctSplitter, isStandalone: true, selector: "strct-splitter", inputs: { split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, gutterLabel: { classPropertyName: "gutterLabel", publicName: "gutterLabel", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { split: "splitChange" }, host: { properties: { "class.strct-split--vertical": "vertical()", "class.strct-split--dragging": "dragging()" }, classAttribute: "strct-split" }, ngImport: i0, template: `
-    <div class="strct-split__pane" [style.flex-basis.%]="clamped()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctSplitter, isStandalone: true, selector: "strct-splitter", inputs: { split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", 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 }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, gutterLabel: { classPropertyName: "gutterLabel", publicName: "gutterLabel", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { split: "splitChange", collapsed: "collapsedChange" }, host: { properties: { "class.strct-split--vertical": "vertical()", "class.strct-split--dragging": "dragging()" }, classAttribute: "strct-split" }, ngImport: i0, template: `
+    <div
+      class="strct-split__pane"
+      [class.strct-split__pane--collapsed]="collapsed()"
+      [style.flex-basis]="startBasis()"
+    >
       <ng-content select="[strctPaneStart]" />
     </div>
     <div
@@ -20779,9 +20879,10 @@ class StrctSplitter {
       tabindex="0"
       [attr.aria-label]="gutterLabel()"
       [attr.aria-orientation]="vertical() ? 'horizontal' : 'vertical'"
-      [attr.aria-valuenow]="clamped()"
-      [attr.aria-valuemin]="min()"
-      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="collapsed() ? 0 : clamped()"
+      [attr.aria-valuemin]="lowerBound()"
+      [attr.aria-valuemax]="upperBound()"
+      [attr.aria-expanded]="collapsible() ? !collapsed() : null"
       (pointerdown)="onDragStart($event)"
       (keydown)="onKeydown($event)"
     >
@@ -20790,12 +20891,16 @@ class StrctSplitter {
     <div class="strct-split__pane strct-split__pane--end">
       <ng-content select="[strctPaneEnd]" />
     </div>
-  `, isInline: true, styles: [".strct-split{display:flex;width:100%;min-height:0}.strct-split--vertical{flex-direction:column}.strct-split__pane{flex-grow:0;flex-shrink:0;overflow:auto;min-width:0;min-height:0}.strct-split__pane--end{flex:1 1 0}.strct-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:7px;cursor:col-resize;background:transparent;touch-action:none}.strct-split--vertical>.strct-split__gutter{width:auto;height:7px;cursor:row-resize}.strct-split__gutter:hover,.strct-split--dragging>.strct-split__gutter{background:var(--acc18)}.strct-split__gutter:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-split__grip{width:1.5px;height:26px;border-radius:1px;background:var(--b2)}.strct-split--vertical .strct-split__grip{width:26px;height:1.5px}.strct-split--dragging{-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-split{display:flex;width:100%;min-height:0}.strct-split--vertical{flex-direction:column}.strct-split__pane--collapsed{overflow:hidden}.strct-split__pane{flex-grow:0;flex-shrink:0;overflow:auto;min-width:0;min-height:0}.strct-split__pane--end{flex:1 1 0}.strct-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:7px;cursor:col-resize;background:transparent;touch-action:none}.strct-split--vertical>.strct-split__gutter{width:auto;height:7px;cursor:row-resize}.strct-split__gutter:hover,.strct-split--dragging>.strct-split__gutter{background:var(--acc18)}.strct-split__gutter:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-split__grip{width:1.5px;height:26px;border-radius:1px;background:var(--b2)}.strct-split--vertical .strct-split__grip{width:26px;height:1.5px}.strct-split--dragging{-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSplitter, decorators: [{
             type: Component,
             args: [{ selector: 'strct-splitter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="strct-split__pane" [style.flex-basis.%]="clamped()">
+    <div
+      class="strct-split__pane"
+      [class.strct-split__pane--collapsed]="collapsed()"
+      [style.flex-basis]="startBasis()"
+    >
       <ng-content select="[strctPaneStart]" />
     </div>
     <div
@@ -20804,9 +20909,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       tabindex="0"
       [attr.aria-label]="gutterLabel()"
       [attr.aria-orientation]="vertical() ? 'horizontal' : 'vertical'"
-      [attr.aria-valuenow]="clamped()"
-      [attr.aria-valuemin]="min()"
-      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="collapsed() ? 0 : clamped()"
+      [attr.aria-valuemin]="lowerBound()"
+      [attr.aria-valuemax]="upperBound()"
+      [attr.aria-expanded]="collapsible() ? !collapsed() : null"
       (pointerdown)="onDragStart($event)"
       (keydown)="onKeydown($event)"
     >
@@ -20819,8 +20925,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-split',
                         '[class.strct-split--vertical]': 'vertical()',
                         '[class.strct-split--dragging]': 'dragging()',
-                    }, styles: [".strct-split{display:flex;width:100%;min-height:0}.strct-split--vertical{flex-direction:column}.strct-split__pane{flex-grow:0;flex-shrink:0;overflow:auto;min-width:0;min-height:0}.strct-split__pane--end{flex:1 1 0}.strct-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:7px;cursor:col-resize;background:transparent;touch-action:none}.strct-split--vertical>.strct-split__gutter{width:auto;height:7px;cursor:row-resize}.strct-split__gutter:hover,.strct-split--dragging>.strct-split__gutter{background:var(--acc18)}.strct-split__gutter:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-split__grip{width:1.5px;height:26px;border-radius:1px;background:var(--b2)}.strct-split--vertical .strct-split__grip{width:26px;height:1.5px}.strct-split--dragging{-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }, { type: i0.Output, args: ["splitChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], gutterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterLabel", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+                    }, styles: [".strct-split{display:flex;width:100%;min-height:0}.strct-split--vertical{flex-direction:column}.strct-split__pane--collapsed{overflow:hidden}.strct-split__pane{flex-grow:0;flex-shrink:0;overflow:auto;min-width:0;min-height:0}.strct-split__pane--end{flex:1 1 0}.strct-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:7px;cursor:col-resize;background:transparent;touch-action:none}.strct-split--vertical>.strct-split__gutter{width:auto;height:7px;cursor:row-resize}.strct-split__gutter:hover,.strct-split--dragging>.strct-split__gutter{background:var(--acc18)}.strct-split__gutter:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-split__grip{width:1.5px;height:26px;border-radius:1px;background:var(--b2)}.strct-split--vertical .strct-split__grip{width:26px;height:1.5px}.strct-split--dragging{-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }, { type: i0.Output, args: ["splitChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", 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"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], gutterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterLabel", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+
+/**
+ * The splitter's gutter, for layouts the splitter does not own — a shell grid,
+ * a docked panel. It draws the library's grip and brings the separator
+ * semantics with it: `role="separator"`, a tab stop, arrows that step, Home and
+ * End for the bounds, and Enter to collapse when `collapsible`.
+ *
+ *   <div [strctResizeHandle]="'y'" [(size)]="panelHeight" [min]="120" [max]="600"
+ *        aria-label="Resize the task panel"></div>
+ *
+ * The consumer owns the size — the handle only reports it, so the value can be
+ * persisted, clamped or animated as the layout needs.
+ */
+class StrctResizeHandle {
+    /** Which axis the handle resizes along: `'x'` (default) or `'y'`. */
+    axis = input('x', { ...(ngDevMode ? { debugName: "axis" } : /* istanbul ignore next */ {}), alias: 'strctResizeHandle' });
+    /** The size being dragged, in px (two-way). */
+    size = model(240, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Bounds, in px. */
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(Number.POSITIVE_INFINITY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Arrow-key step in px; Shift multiplies it by four. */
+    step = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Enter collapses the pane the handle sizes. */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether it is collapsed (two-way). */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * Which side of the handle the sized pane is on. `'before'` (default) grows
+     * the pane as the pointer moves toward the inline/block end.
+     */
+    side = input('before', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef);
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    origin = 0;
+    originSize = 0;
+    rtl = computed(() => getComputedStyle(this.el.nativeElement).direction === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
+    move = (e) => this.onMove(e);
+    up = () => this.onUp();
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.detach());
+    }
+    onDown(event) {
+        event.preventDefault();
+        this.el.nativeElement.setPointerCapture?.(event.pointerId);
+        this.origin = this.axis() === 'y' ? event.clientY : event.clientX;
+        this.originSize = this.size();
+        this.dragging.set(true);
+        document.addEventListener('pointermove', this.move);
+        document.addEventListener('pointerup', this.up);
+        document.addEventListener('pointercancel', this.up);
+    }
+    onMove(event) {
+        let delta = (this.axis() === 'y' ? event.clientY : event.clientX) - this.origin;
+        // Pointer coordinates are physical; the pane is logical.
+        if (this.axis() === 'x' && this.rtl())
+            delta = -delta;
+        if (this.side() === 'after')
+            delta = -delta;
+        if (this.collapsed())
+            this.collapsed.set(false);
+        this.commit(this.originSize + delta);
+    }
+    onUp() {
+        this.dragging.set(false);
+        this.detach();
+    }
+    detach() {
+        document.removeEventListener('pointermove', this.move);
+        document.removeEventListener('pointerup', this.up);
+        document.removeEventListener('pointercancel', this.up);
+    }
+    onKeydown(event) {
+        if (this.collapsible() && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            this.collapsed.update((v) => !v);
+            return;
+        }
+        let dec = this.axis() === 'y' ? 'ArrowUp' : 'ArrowLeft';
+        let inc = this.axis() === 'y' ? 'ArrowDown' : 'ArrowRight';
+        if (this.axis() === 'x' && this.rtl())
+            [dec, inc] = [inc, dec];
+        if (this.side() === 'after')
+            [dec, inc] = [inc, dec];
+        const step = this.step() * (event.shiftKey ? 4 : 1);
+        let next = null;
+        if (event.key === dec)
+            next = this.size() - step;
+        else if (event.key === inc)
+            next = this.size() + step;
+        else if (event.key === 'Home')
+            next = this.min();
+        else if (event.key === 'End')
+            next = Number.isFinite(this.max()) ? this.max() : this.size() + step * 4;
+        if (next == null)
+            return;
+        event.preventDefault();
+        if (this.collapsed())
+            this.collapsed.set(false);
+        this.commit(next);
+    }
+    commit(value) {
+        this.size.set(Math.round(Math.min(this.max(), Math.max(this.min(), value))));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctResizeHandle, isStandalone: true, selector: "[strctResizeHandle]", inputs: { axis: { classPropertyName: "axis", publicName: "strctResizeHandle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", 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 }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", collapsed: "collapsedChange" }, host: { attributes: { "role": "separator", "tabindex": "0" }, listeners: { "pointerdown": "onDown($event)", "keydown": "onKeydown($event)" }, properties: { "class.strct-resize--y": "axis() === 'y'", "class.strct-resize--dragging": "dragging()", "attr.aria-orientation": "axis() === 'y' ? 'horizontal' : 'vertical'", "attr.aria-valuenow": "size()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-expanded": "collapsible() ? !collapsed() : null" }, classAttribute: "strct-resize" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctResizeHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctResizeHandle]',
+                    host: {
+                        class: 'strct-resize',
+                        role: 'separator',
+                        tabindex: '0',
+                        '[class.strct-resize--y]': "axis() === 'y'",
+                        '[class.strct-resize--dragging]': 'dragging()',
+                        '[attr.aria-orientation]': "axis() === 'y' ? 'horizontal' : 'vertical'",
+                        '[attr.aria-valuenow]': 'size()',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-expanded]': 'collapsible() ? !collapsed() : null',
+                        '(pointerdown)': 'onDown($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctResizeHandle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", 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"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }] } });
 
 /**
  * Dual-list transfer (picklist) — "assign hosts to the cluster": all items on
@@ -22216,6 +22457,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
+/**
+ * Connects several `[strctReorder]` lists, so a card can move between the
+ * columns of a board — by its handle, or with Alt+ArrowLeft / Alt+ArrowRight.
+ * Moves within one list stay on that list's `reordered`; moves across lists
+ * come out here.
+ */
+class StrctReorderGroup {
+    /** A card moved from one list to another. */
+    moved = output();
+    /** Every list in this group, in DOM order. */
+    lists = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lists" }] : /* istanbul ignore next */ []));
+    /** Where the current drag started, so a drop elsewhere knows its origin. */
+    source = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    register(list) {
+        this.lists.update((ls) => [...ls, list]);
+    }
+    unregister(list) {
+        this.lists.update((ls) => ls.filter((l) => l !== list));
+    }
+    /** The list next to `list` in the given direction, or null at the ends. */
+    neighbour(list, dir) {
+        const ordered = this.ordered();
+        const i = ordered.indexOf(list);
+        return ordered[i + dir] ?? null;
+    }
+    /** DOM order, not registration order — columns read left to right. */
+    ordered() {
+        return [...this.lists()].sort((a, b) => a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctReorderGroup, isStandalone: true, selector: "[strctReorderGroup]", outputs: { moved: "moved" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderGroup, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctReorderGroup]' }]
+        }], propDecorators: { moved: [{ type: i0.Output, args: ["moved"] }] } });
 let reorderCounter = 0;
 /**
  * List drag-reorder primitive — the consumer owns the array:
@@ -22238,6 +22517,8 @@ let reorderCounter = 0;
  */
 class StrctReorder {
     host = inject(ElementRef);
+    /** The group this list belongs to, when it is one of several. */
+    group = inject(StrctReorderGroup, { optional: true });
     renderer = inject(Renderer2);
     doc = inject(DOCUMENT);
     announcer = inject(StrctAnnouncer);
@@ -22257,6 +22538,12 @@ class StrctReorder {
      */
     announcement = input((label, position, total) => `Moved ${label} to position ${position} of ${total}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** This list's name inside a `[strctReorderGroup]`. */
+    listId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
+    /** What a move between lists says (localizable). */
+    moveAnnouncement = input((label, list, position, total) => `Moved ${label} to ${list}, position ${position} of ${total}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moveAnnouncement" }] : /* istanbul ignore next */ []));
     dragIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
     overIndex = signal(null, /* @ts-ignore */
@@ -22264,7 +22551,31 @@ class StrctReorder {
     /** Id of the sr-only instructions element the items point to. */
     instructionsId = `strct-reorder-hint-${++reorderCounter}`;
     hint = null;
+    /** The container element — the group orders its lists by DOM position. */
+    element() {
+        return this.host.nativeElement;
+    }
+    /** Move an item into this list at `index`, and say so. */
+    acceptFrom(from, fromIndex, index) {
+        const item = from.items()[fromIndex];
+        if (!item)
+            return;
+        const label = item.textContent?.trim() ?? '';
+        const toIndex = Math.max(0, Math.min(index, this.items().length));
+        from.dragIndex.set(null);
+        this.overIndex.set(null);
+        this.group?.source.set(null);
+        this.group?.moved.emit({
+            item,
+            fromList: from.listId(),
+            toList: this.listId(),
+            fromIndex,
+            toIndex,
+        });
+        this.announcer.announce(this.moveAnnouncement()(label, this.listId(), toIndex + 1, this.items().length + 1));
+    }
     constructor() {
+        this.group?.register(this);
         // Keep the sr-only instructions element in sync with the input.
         effect(() => {
             const text = this.instructions();
@@ -22297,18 +22608,24 @@ class StrctReorder {
     onContainerDragOver(event) {
         // Only the container's own empty space (below the last item); drags over
         // items are handled by the items themselves.
-        if (this.dragIndex() == null)
+        if (this.dragIndex() == null && !this.group?.source())
             return;
         if (event.target.closest('[strctReorderItem]'))
             return;
         event.preventDefault();
     }
     onContainerDrop(event) {
+        if (event.target.closest('[strctReorderItem]'))
+            return;
+        const source = this.group?.source();
+        if (source && source.list !== this) {
+            event.preventDefault();
+            this.acceptFrom(source.list, source.index, this.items().length);
+            return;
+        }
         const from = this.dragIndex();
         if (from == null)
             return; // an item already consumed this drop
-        if (event.target.closest('[strctReorderItem]'))
-            return;
         event.preventDefault();
         // Drop into empty space moves the item to the end.
         this.commit(from, this.items().length - 1);
@@ -22322,18 +22639,19 @@ class StrctReorder {
         this.overIndex.set(null);
     }
     ngOnDestroy() {
+        this.group?.unregister(this);
         if (this.hint) {
             this.renderer.removeChild(this.doc.body, this.hint);
             this.hint = null;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctReorder, isStandalone: true, selector: "[strctReorder]", inputs: { reorderDisabled: { classPropertyName: "reorderDisabled", publicName: "reorderDisabled", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reordered: "reordered" }, host: { listeners: { "dragover": "onContainerDragOver($event)", "drop": "onContainerDrop($event)", "dragleave": "onDragLeave($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctReorder, isStandalone: true, selector: "[strctReorder]", inputs: { reorderDisabled: { classPropertyName: "reorderDisabled", publicName: "reorderDisabled", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, moveAnnouncement: { classPropertyName: "moveAnnouncement", publicName: "moveAnnouncement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reordered: "reordered" }, host: { listeners: { "dragover": "onContainerDragOver($event)", "drop": "onContainerDrop($event)", "dragleave": "onDragLeave($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorder, decorators: [{
             type: Directive,
             args: [{ selector: '[strctReorder]' }]
-        }], ctorParameters: () => [], propDecorators: { reordered: [{ type: i0.Output, args: ["reordered"] }], reorderDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderDisabled", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], announcement: [{ type: i0.Input, args: [{ isSignal: true, alias: "announcement", required: false }] }], onContainerDragOver: [{
+        }], ctorParameters: () => [], propDecorators: { reordered: [{ type: i0.Output, args: ["reordered"] }], reorderDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderDisabled", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], announcement: [{ type: i0.Input, args: [{ isSignal: true, alias: "announcement", required: false }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], moveAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnnouncement", required: false }] }], onContainerDragOver: [{
                 type: HostListener,
                 args: ['dragover', ['$event']]
             }], onContainerDrop: [{
@@ -22343,6 +22661,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 type: HostListener,
                 args: ['dragleave', ['$event']]
             }] } });
+/**
+ * The only place a drag may start from, when an item has one. Content that is
+ * itself draggable — text selection, a chart brush — must not start a move.
+ */
+class StrctReorderHandle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctReorderHandle, isStandalone: true, selector: "[strctReorderHandle]", host: { classAttribute: "strct-reorder__handle" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderHandle, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctReorderHandle]', host: { class: 'strct-reorder__handle' } }]
+        }] });
 /** One draggable row inside a `[strctReorder]` container. */
 class StrctReorderItem {
     list = inject(StrctReorder);
@@ -22352,6 +22682,12 @@ class StrctReorderItem {
     hostTabindex() {
         return this.hadOwnTabindex ? null : 0;
     }
+    /** The keys that apply: the sideways pair only when there is somewhere to go. */
+    shortcuts() {
+        return this.list.group
+            ? 'Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight'
+            : 'Alt+ArrowUp Alt+ArrowDown';
+    }
     isDragging() {
         return this.list.dragIndex() === this.index();
     }
@@ -22361,22 +22697,38 @@ class StrctReorderItem {
     index() {
         return this.list.indexOf(this.el.nativeElement);
     }
+    /** Where the last pointerdown landed — a drag may only start on a handle. */
+    fromHandle = false;
+    onPointerDown(event) {
+        this.fromHandle = !!event.target.closest('[strctReorderHandle]');
+    }
     onDragStart(event) {
         if (this.list.reorderDisabled())
             return;
+        // With a handle present, only the handle starts a move.
+        if (this.el.nativeElement.querySelector('[strctReorderHandle]') && !this.fromHandle) {
+            event.preventDefault();
+            return;
+        }
         this.list.dragIndex.set(this.index());
+        this.list.group?.source.set({ list: this.list, index: this.index() });
         event.dataTransfer?.setData('text/plain', String(this.index()));
         if (event.dataTransfer)
             event.dataTransfer.effectAllowed = 'move';
     }
     onDragOver(event) {
-        if (this.list.dragIndex() == null)
+        if (this.list.dragIndex() == null && !this.list.group?.source())
             return;
         event.preventDefault();
         this.list.overIndex.set(this.index());
     }
     onDrop(event) {
         event.preventDefault();
+        const source = this.list.group?.source();
+        if (source && source.list !== this.list) {
+            this.list.acceptFrom(source.list, source.index, this.index());
+            return;
+        }
         const from = this.list.dragIndex();
         if (from == null)
             return;
@@ -22385,10 +22737,23 @@ class StrctReorderItem {
     onDragEnd() {
         this.list.dragIndex.set(null);
         this.list.overIndex.set(null);
+        this.list.group?.source.set(null);
     }
     onKeydown(event) {
         if (this.list.reorderDisabled() || !event.altKey)
             return;
+        const group = this.list.group;
+        // Alt+Left / Alt+Right move to the neighbouring list at the same index.
+        if (group && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            const target = group.neighbour(this.list, event.key === 'ArrowLeft' ? -1 : 1);
+            if (!target)
+                return;
+            event.preventDefault();
+            const index = this.index();
+            target.acceptFrom(this.list, index, index);
+            setTimeout(() => target.items()[Math.min(index, target.items().length - 1)]?.focus());
+            return;
+        }
         if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
             return;
         event.preventDefault();
@@ -22401,7 +22766,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: { "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": "'Alt+ArrowUp Alt+ArrowDown'", "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": "'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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, decorators: [{
             type: Directive,
@@ -22413,13 +22778,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-reorder--dragging]': 'isDragging()',
                         '[class.strct-reorder--over]': 'isOver()',
                         '[attr.aria-roledescription]': "'sortable'",
-                        '[attr.aria-keyshortcuts]': "'Alt+ArrowUp Alt+ArrowDown'",
+                        '[attr.aria-keyshortcuts]': 'shortcuts()',
                         '[attr.aria-posinset]': 'index() + 1',
                         '[attr.aria-setsize]': 'list.items().length',
                         '[attr.aria-describedby]': 'list.instructions() ? list.instructionsId : null',
                     },
                 }]
-        }], propDecorators: { onDragStart: [{
+        }], propDecorators: { onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onDragStart: [{
                 type: HostListener,
                 args: ['dragstart', ['$event']]
             }], onDragOver: [{
@@ -22793,6 +23161,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-steps{display:block;min-width:0}.strct-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}.strct-steps--vertical .strct-steps__list{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.strct-steps__step{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--b2);border-radius:999px;font-size:var(--text-sm);color:var(--t2);background:var(--bg-1);min-width:0}.strct-steps--dense .strct-steps__step{padding:2px 8px}.strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:\"\";position:absolute;inset-inline-start:-5px;width:5px;height:1px;background:var(--b2)}.strct-steps--vertical .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:14px;top:-7px;width:1px;height:7px}.strct-steps__marker:empty{display:none}.strct-steps__marker{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:600;background:var(--bg-3);color:var(--t2)}.strct-steps__text{display:flex;flex-direction:column;min-width:0}.strct-steps__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-steps__desc{font-size:var(--text-sm);color:var(--t3);white-space:normal}.strct-steps__action{margin-inline-start:auto;padding-inline-start:8px;flex:none}.strct-steps__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-steps__step[data-state=done]{border-color:var(--success);color:var(--success)}.strct-steps__step[data-state=done] .strct-steps__marker{background:var(--success);color:var(--inv)}.strct-steps__step[data-state=active]{border-color:var(--acc);color:var(--acc);background:var(--acc-s)}.strct-steps__step[data-state=active] .strct-steps__marker{background:var(--acc);color:var(--inv)}.strct-steps__step[data-state=failed]{border-color:var(--critical);color:var(--critical)}.strct-steps__step[data-state=failed] .strct-steps__marker{background:var(--critical);color:var(--inv)}.strct-steps__step[data-state=blocked]{border-color:var(--warning);color:var(--warning)}.strct-steps__step[data-state=blocked] .strct-steps__marker{background:var(--warning);color:var(--inv)}.strct-steps__step[data-state=skipped]{color:var(--t3);border-style:dashed}.strct-steps__step[data-state=skipped] .strct-steps__label{text-decoration:line-through}.strct-steps__step[data-state=pending]{color:var(--t3);border-color:var(--t4)}.strct-steps__step[data-state=active]:after{content:\"\";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--acc);animation:strct-steps-pulse 1.4s ease-out infinite;pointer-events:none}@keyframes strct-steps-pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.strct-steps__step[data-state=active]:after{animation:none;opacity:.5;transform:none}}.strct-steps--dots .strct-steps__step{padding:0;border:0;background:none;gap:4px}.strct-steps--dots .strct-steps__label{display:none}.strct-steps--dots .strct-steps__marker{display:inline-flex;width:9px;height:9px;font-size:0}.strct-steps--dots .strct-steps__step[data-state=pending] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b3)}.strct-steps--dots .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:-4px;width:4px}.strct-steps--cards .strct-steps__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-steps-card-min, 220px),100%),1fr));gap:var(--space-3)}.strct-steps--cards .strct-steps__step{align-items:flex-start;border-radius:var(--radius-lg);padding:var(--space-3);background:var(--bg-1)}.strct-steps--cards .strct-steps__label{font-weight:600;white-space:normal}.strct-steps--cards .strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:none}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], actionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctStepAction), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
+const STATE_ICON = {
+    empty: 'monitor',
+    off: 'stopped',
+    error: 'warning',
+};
+/**
+ * A live picture — a console thumbnail, a camera — sits in a fixed-ratio frame,
+ * and when there is no picture yet, or none at all, the frame says why **in its
+ * own small space**: an empty state is too large for a 240px card.
+ *
+ *   <strct-media-frame ratio="4 / 3"><img [src]="thumb" alt="" /></strct-media-frame>
+ *   <strct-media-frame state="off" message="The VM is off" />
+ */
+class StrctMediaFrame {
+    /** The frame's aspect ratio, as a CSS `aspect-ratio` value. */
+    ratio = input('4 / 3', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    /** What the frame shows: the projected picture, or why there is none. */
+    state = input('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** The placeholder's line ("The VM is off"). */
+    message = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Overrides the icon derived from `state`. */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** The whole frame becomes one tab stop that emits `activated`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The accessible name of that control; falls back to `message`. */
+    activateLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activateLabel" }] : /* istanbul ignore next */ []));
+    /** The frame was activated. */
+    activated = output();
+    iconName = computed(() => {
+        const explicit = this.icon();
+        if (explicit)
+            return explicit;
+        const state = this.state();
+        return state === 'content' || state === 'loading' ? '' : STATE_ICON[state];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMediaFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMediaFrame, isStandalone: true, selector: "strct-media-frame", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, activateLabel: { classPropertyName: "activateLabel", publicName: "activateLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { properties: { "style.aspect-ratio": "ratio()", "attr.data-state": "state()", "class.strct-mf--interactive": "interactive()" }, classAttribute: "strct-mf" }, ngImport: i0, template: `
+    @if (state() === 'content') {
+      <ng-content />
+    } @else {
+      <span class="strct-mf__placeholder">
+        @if (state() === 'loading') {
+          <strct-spinner size="sm" />
+        } @else if (iconName()) {
+          <strct-icon [name]="iconName()" [size]="20" />
+        }
+        @if (message()) {
+          <span class="strct-mf__msg">{{ message() }}</span>
+        }
+      </span>
+    }
+    @if (interactive()) {
+      <button
+        type="button"
+        class="strct-mf__hit"
+        [attr.aria-label]="activateLabel() || message() || null"
+        (click)="activated.emit()"
+      ></button>
+    }
+  `, isInline: true, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\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: StrctMediaFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-media-frame', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctSpinner], template: `
+    @if (state() === 'content') {
+      <ng-content />
+    } @else {
+      <span class="strct-mf__placeholder">
+        @if (state() === 'loading') {
+          <strct-spinner size="sm" />
+        } @else if (iconName()) {
+          <strct-icon [name]="iconName()" [size]="20" />
+        }
+        @if (message()) {
+          <span class="strct-mf__msg">{{ message() }}</span>
+        }
+      </span>
+    }
+    @if (interactive()) {
+      <button
+        type="button"
+        class="strct-mf__hit"
+        [attr.aria-label]="activateLabel() || message() || null"
+        (click)="activated.emit()"
+      ></button>
+    }
+  `, host: {
+                        class: 'strct-mf',
+                        '[style.aspect-ratio]': 'ratio()',
+                        '[attr.data-state]': 'state()',
+                        '[class.strct-mf--interactive]': 'interactive()',
+                    }, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\n"] }]
+        }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+
 /**
  * A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
  * arrow is the library's, the new one is emphasised — and assistive tech hears
@@ -24709,5 +25177,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, 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, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, 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, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, 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, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, 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, 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, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map