@akcelik/strct 4.8.0 → 4.10.0

package/fesm2022/akcelik-strct.mjs

@@ -7438,6 +7438,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }] } });
 
 let fieldCounter = 0;
+/** Text or a control rendered inside the field's box, before the input. */
+class StrctFieldPrefix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFieldPrefix, isStandalone: true, selector: "[strctFieldPrefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldPrefix, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctFieldPrefix]' }]
+        }] });
+/** Text or a control rendered inside the field's box, after the input. */
+class StrctFieldSuffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFieldSuffix, isStandalone: true, selector: "[strctFieldSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldSuffix, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctFieldSuffix]' }]
+        }] });
+/**
+ * A hint with markup in it, rendered where the string `hint` renders and
+ * carrying the same id, so it is still the control's description.
+ *
+ *   <ng-template strctFieldHint>Hosts with a switch named <strong>{{ n }}</strong> join it.</ng-template>
+ */
+class StrctFieldHint {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldHint, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFieldHint, isStandalone: true, selector: "ng-template[strctFieldHint]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldHint, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[strctFieldHint]' }]
+        }] });
+/**
+ * Wrapper that opts a run of `layout="inline"` fields out of the hairlines
+ * between them — for settings that belong together and should read as one
+ * block.
+ */
+class StrctFieldGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFieldGroup, isStandalone: true, selector: "[strctFieldGroup]", host: { classAttribute: "strct-field-group" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFieldGroup, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctFieldGroup]', host: { class: 'strct-field-group' } }]
+        }] });
 /**
  * Form-field wrapper: a label (with optional required marker), the projected
  * control, and a hint or error message. It auto-links the control via
@@ -7459,6 +7504,13 @@ class StrctField {
     /** Error message (string or first-of array); falsy clears the error state. */
     error = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /**
+     * `'inline'` puts the label and its hint in a fixed-width column
+     * (`--strct-field-label-w`, 220px) and the control beside them — how a long
+     * settings form reads. Below 480px of field width it falls back to stacked.
+     */
+    layout = input('stacked', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /**
      * Async-validation state rendered as a trailing adornment (spinner / check /
      * warning) plus its message in the hint/error slot — so apps stop composing a
@@ -7470,8 +7522,15 @@ class StrctField {
     n = ++fieldCounter;
     hintId = `strct-field-hint-${this.n}`;
     errorId = `strct-field-err-${this.n}`;
+    prefixId = `strct-field-pre-${this.n}`;
+    suffixId = `strct-field-suf-${this.n}`;
     controlId = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintTpl = contentChild(StrctFieldHint, { ...(ngDevMode ? { debugName: "hintTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    hasPrefix = contentChild(StrctFieldPrefix, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    hasSuffix = contentChild(StrctFieldSuffix, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
     errorText = computed(() => {
         const e = this.error();
         return (Array.isArray(e) ? e[0] : e) ?? '';
@@ -7497,6 +7556,9 @@ class StrctField {
         effect(() => {
             this.errorText();
             this.hint();
+            this.hintTpl();
+            this.hasPrefix();
+            this.hasSuffix();
             this.stateStatus();
             this.stateMessage();
             this.applyAria();
@@ -7514,15 +7576,37 @@ class StrctField {
         this.controlId.set(el.id);
         this.applyAria();
     }
+    /**
+     * A text addon belongs to the control's description — "Minimum memory, MB" —
+     * while an addon holding its own control (a send button) is a tab stop of its
+     * own and says nothing about the value.
+     */
+    addonDescription(sel, id) {
+        const el = this.host.nativeElement.querySelector(sel);
+        if (!el || !el.textContent?.trim())
+            return '';
+        if (el.matches('button, a, input, select, textarea'))
+            return '';
+        if (el.querySelector('button, a, input, select, textarea'))
+            return '';
+        return id;
+    }
     applyAria() {
         const el = this.control();
         if (!el)
             return;
-        const describedBy = this.errorText()
+        const message = this.errorText()
             ? this.errorId
-            : this.stateMessage() || this.hint()
+            : this.stateMessage() || this.hintTpl() || this.hint()
                 ? this.hintId
                 : '';
+        const describedBy = [
+            this.addonDescription('[strctFieldPrefix]', this.prefixId),
+            this.addonDescription('[strctFieldSuffix]', this.suffixId),
+            message,
+        ]
+            .filter(Boolean)
+            .join(' ');
         if (describedBy)
             el.setAttribute('aria-describedby', describedBy);
         else
@@ -7533,7 +7617,7 @@ class StrctField {
             el.removeAttribute('aria-invalid');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctField, isStandalone: true, selector: "strct-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, validationState: { classPropertyName: "validationState", publicName: "validationState", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field--invalid": "isInvalid()", "class.strct-field--validating": "stateActive()" }, classAttribute: "strct-field" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctField, isStandalone: true, selector: "strct-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, validationState: { classPropertyName: "validationState", publicName: "validationState", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field--invalid": "isInvalid()", "class.strct-field--validating": "stateActive()", "class.strct-field--inline": "layout() === 'inline'", "class.strct-field--prefix": "hasPrefix()", "class.strct-field--suffix": "hasSuffix()" }, classAttribute: "strct-field" }, queries: [{ propertyName: "hintTpl", first: true, predicate: StrctFieldHint, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "hasPrefix", first: true, predicate: StrctFieldPrefix, descendants: true, isSignal: true }, { propertyName: "hasSuffix", first: true, predicate: StrctFieldSuffix, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label class="strct-field__label" [attr.for]="controlId() || null">
         {{ label() }}
@@ -7543,6 +7627,15 @@ class StrctField {
       </label>
     }
     <div class="strct-field__control">
+      <!-- The addon slots come first so their selectors win over the catch-all
+           below (Angular matches in template order); CSS order puts them
+           either side of the control. -->
+      <span class="strct-field__addon strct-field__addon--prefix" [id]="prefixId">
+        <ng-content select="[strctFieldPrefix]" />
+      </span>
+      <span class="strct-field__addon strct-field__addon--suffix" [id]="suffixId">
+        <ng-content select="[strctFieldSuffix]" />
+      </span>
       <ng-content />
       @if (stateActive()) {
         <span class="strct-field__adorn strct-field__adorn--{{ stateStatus() }}" aria-hidden="true">
@@ -7567,14 +7660,18 @@ class StrctField {
       >
         {{ stateMessage() }}
       </div>
+    } @else if (hintTpl()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">
+        <ng-container [ngTemplateOutlet]="hintTpl()!" />
+      </div>
     } @else if (hint()) {
       <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
     }
-  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}.strct-field__addon{display:none;align-items:center;flex:none;font-size:13px;color:var(--t3)}.strct-field__addon--prefix{order:-1;padding-inline-start:var(--space-3)}.strct-field__addon--suffix{order:1;padding-inline-end:var(--space-3)}.strct-field--prefix .strct-field__addon--prefix,.strct-field--suffix .strct-field__addon--suffix{display:inline-flex}.strct-field__addon:has(.strct-btn){padding:3px}.strct-field--prefix .strct-field__control,.strct-field--suffix .strct-field__control{flex-direction:row;align-items:center;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-field--prefix .strct-field__control:hover,.strct-field--suffix .strct-field__control:hover{border-color:var(--b3)}.strct-field--prefix .strct-field__control:focus-within,.strct-field--suffix .strct-field__control:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-field--invalid.strct-field--prefix .strct-field__control,.strct-field--invalid.strct-field--suffix .strct-field__control{border-color:var(--critical)}.strct-field--prefix .strct-control,.strct-field--suffix .strct-control{flex:1;min-width:0;border:0;background:transparent}.strct-field--prefix .strct-control:focus,.strct-field--prefix .strct-control:focus-visible,.strct-field--suffix .strct-control:focus,.strct-field--suffix .strct-control:focus-visible{box-shadow:none;background:transparent}.strct-field--prefix textarea.strct-control,.strct-field--suffix textarea.strct-control{min-height:0}.strct-field--inline{container-type:inline-size;display:grid;grid-template-columns:var(--strct-field-label-w, 220px) minmax(0,1fr);column-gap:var(--space-3);row-gap:4px;align-items:start}.strct-field--inline>.strct-field__label{grid-column:1;grid-row:1;padding-block-start:9px}.strct-field--inline>.strct-field__control{grid-column:2;grid-row:1}.strct-field--inline>.strct-field__msg{grid-column:2;grid-row:2}.strct-field--inline>.strct-field__msg--hint{grid-column:1;padding-block-end:var(--space-2)}.strct-field--inline+.strct-field--inline{border-block-start:1px solid var(--b1);margin-block-start:var(--space-3);padding-block-start:var(--space-3)}.strct-field-group .strct-field--inline+.strct-field--inline{border-block-start:0;padding-block-start:0}@container (max-width: 480px){.strct-field--inline>.strct-field__label,.strct-field--inline>.strct-field__control,.strct-field--inline>.strct-field__msg{grid-column:1 / -1;grid-row:auto}.strct-field--inline>.strct-field__label{padding-block-start:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctField, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctSpinner], template: `
+            args: [{ selector: 'strct-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctSpinner, NgTemplateOutlet], template: `
     @if (label()) {
       <label class="strct-field__label" [attr.for]="controlId() || null">
         {{ label() }}
@@ -7584,6 +7681,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       </label>
     }
     <div class="strct-field__control">
+      <!-- The addon slots come first so their selectors win over the catch-all
+           below (Angular matches in template order); CSS order puts them
+           either side of the control. -->
+      <span class="strct-field__addon strct-field__addon--prefix" [id]="prefixId">
+        <ng-content select="[strctFieldPrefix]" />
+      </span>
+      <span class="strct-field__addon strct-field__addon--suffix" [id]="suffixId">
+        <ng-content select="[strctFieldSuffix]" />
+      </span>
       <ng-content />
       @if (stateActive()) {
         <span class="strct-field__adorn strct-field__adorn--{{ stateStatus() }}" aria-hidden="true">
@@ -7608,6 +7714,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       >
         {{ stateMessage() }}
       </div>
+    } @else if (hintTpl()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">
+        <ng-container [ngTemplateOutlet]="hintTpl()!" />
+      </div>
     } @else if (hint()) {
       <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
     }
@@ -7615,8 +7725,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-field',
                         '[class.strct-field--invalid]': 'isInvalid()',
                         '[class.strct-field--validating]': 'stateActive()',
-                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], validationState: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationState", required: false }] }] } });
+                        '[class.strct-field--inline]': "layout() === 'inline'",
+                        '[class.strct-field--prefix]': 'hasPrefix()',
+                        '[class.strct-field--suffix]': 'hasSuffix()',
+                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--critical);margin-inline-start:2px}.strct-field__control{position:relative;display:flex;flex-direction:column}.strct-field__adorn{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);display:inline-flex;align-items:center;pointer-events:none}.strct-field__adorn--ok{color:var(--success)}.strct-field__adorn--warning{color:var(--warning)}.strct-field__adorn--error{color:var(--critical)}.strct-field--validating .strct-control{padding-inline-end:32px}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint,.strct-field__msg--checking{color:var(--t3)}.strct-field__msg--ok{color:var(--success)}.strct-field__msg--warning{color:var(--warning)}.strct-field__msg--error{color:var(--critical)}.strct-field__addon{display:none;align-items:center;flex:none;font-size:13px;color:var(--t3)}.strct-field__addon--prefix{order:-1;padding-inline-start:var(--space-3)}.strct-field__addon--suffix{order:1;padding-inline-end:var(--space-3)}.strct-field--prefix .strct-field__addon--prefix,.strct-field--suffix .strct-field__addon--suffix{display:inline-flex}.strct-field__addon:has(.strct-btn){padding:3px}.strct-field--prefix .strct-field__control,.strct-field--suffix .strct-field__control{flex-direction:row;align-items:center;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-field--prefix .strct-field__control:hover,.strct-field--suffix .strct-field__control:hover{border-color:var(--b3)}.strct-field--prefix .strct-field__control:focus-within,.strct-field--suffix .strct-field__control:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-field--invalid.strct-field--prefix .strct-field__control,.strct-field--invalid.strct-field--suffix .strct-field__control{border-color:var(--critical)}.strct-field--prefix .strct-control,.strct-field--suffix .strct-control{flex:1;min-width:0;border:0;background:transparent}.strct-field--prefix .strct-control:focus,.strct-field--prefix .strct-control:focus-visible,.strct-field--suffix .strct-control:focus,.strct-field--suffix .strct-control:focus-visible{box-shadow:none;background:transparent}.strct-field--prefix textarea.strct-control,.strct-field--suffix textarea.strct-control{min-height:0}.strct-field--inline{container-type:inline-size;display:grid;grid-template-columns:var(--strct-field-label-w, 220px) minmax(0,1fr);column-gap:var(--space-3);row-gap:4px;align-items:start}.strct-field--inline>.strct-field__label{grid-column:1;grid-row:1;padding-block-start:9px}.strct-field--inline>.strct-field__control{grid-column:2;grid-row:1}.strct-field--inline>.strct-field__msg{grid-column:2;grid-row:2}.strct-field--inline>.strct-field__msg--hint{grid-column:1;padding-block-end:var(--space-2)}.strct-field--inline+.strct-field--inline{border-block-start:1px solid var(--b1);margin-block-start:var(--space-3);padding-block-start:var(--space-3)}.strct-field-group .strct-field--inline+.strct-field--inline{border-block-start:0;padding-block-start:0}@container (max-width: 480px){.strct-field--inline>.strct-field__label,.strct-field--inline>.strct-field__control,.strct-field--inline>.strct-field__msg{grid-column:1 / -1;grid-row:auto}.strct-field--inline>.strct-field__label{padding-block-start:0}.strct-field--inline>.strct-field__msg--hint{padding-block-end:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], validationState: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationState", required: false }] }], hintTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFieldHint), { ...{ read: TemplateRef }, isSignal: true }] }], hasPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFieldPrefix), { isSignal: true }] }], hasSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFieldSuffix), { isSignal: true }] }] } });
 
 /**
  * Applies the shared `.strct-control` look to a native input / textarea / select.
@@ -11740,178 +11853,452 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }] } });
 
 /**
- * Minimal, dependency-free XLSX writer for the datagrid's Excel export.
+ * Numeric stepper input: − / + buttons flanking a text field. The value is
+ * `number | null` (null = empty); typing is free-form (intermediate states
+ * like "-" are kept), committed values clamp to `min`/`max` on blur, and the
+ * buttons + keyboard always clamp immediately.
  *
- * An .xlsx file is a ZIP of SpreadsheetML parts. This builds the five
- * required parts with inline strings and zips them with STORED (uncompressed)
- * entries — no runtime dependency, byte-accurate CRC32, opens in Excel,
- * LibreOffice and Google Sheets.
+ *   <strct-number [min]="0" [max]="64" [step]="4" [(ngModel)]="vcpus" />
+ *
+ * Keyboard on the field: ArrowUp/Down ±step, PageUp/Down ±10×step,
+ * Home/End jump to min/max. The field exposes `role="spinbutton"` with
+ * aria-valuemin/max/now so assistive tech announces it as a number control.
  */
-const CRC_TABLE = (() => {
-    const t = new Uint32Array(256);
-    for (let n = 0; n < 256; n++) {
-        let c = n;
-        for (let k = 0; k < 8; k++)
-            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
-        t[n] = c >>> 0;
+class StrctNumber {
+    /** Minimum allowed value; null = unbounded. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum allowed value; null = unbounded. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step increment for buttons and Arrow keys (PageUp/Down use 10×). */
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Placeholder text when empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the + button (localizable). */
+    incrementLabel = input('Increment', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "incrementLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the − button (localizable). */
+    decrementLabel = input('Decrement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decrementLabel" }] : /* istanbul ignore next */ []));
+    /** Static disable; forms' setDisabledState also drives the disabled state. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Raw field text — may hold an unparseable intermediate state while typing. */
+    text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Disabled state pushed by the forms API (setDisabledState). */
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** At/below min (or min unset → never) — greys out the − button. */
+    atMin = computed(() => {
+        const v = this.value();
+        const m = this.min();
+        return v !== null && m !== null && v <= m;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
+    /** At/above max (or max unset → never) — greys out the + button. */
+    atMax = computed(() => {
+        const v = this.value();
+        const m = this.max();
+        return v !== null && m !== null && v >= m;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    onInput(event) {
+        const raw = event.target.value;
+        this.text.set(raw);
+        const trimmed = raw.trim();
+        if (trimmed === '') {
+            this.value.set(null);
+            this.onChange(null);
+            return;
+        }
+        const parsed = Number(trimmed);
+        // Intermediate states ("-", "1.", "2e") don't parse yet — keep the text,
+        // hold the last value; clamping happens on blur.
+        if (Number.isFinite(parsed)) {
+            this.value.set(parsed);
+            this.onChange(parsed);
+        }
     }
-    return t;
-})();
-function crc32(data) {
-    let c = 0xffffffff;
-    for (const byte of data)
-        c = CRC_TABLE[(c ^ byte) & 0xff] ^ (c >>> 8);
-    return (c ^ 0xffffffff) >>> 0;
-}
-const enc = new TextEncoder();
-/** ZIP with STORED entries (no compression — spreadsheets are small). */
-function zip(entries) {
-    const chunks = [];
-    const central = [];
-    let offset = 0;
-    const u16 = (n) => new Uint8Array([n & 0xff, (n >> 8) & 0xff]);
-    const u32 = (n) => new Uint8Array([n & 0xff, (n >> 8) & 0xff, (n >> 16) & 0xff, (n >> 24) & 0xff]);
-    const cat = (...parts) => {
-        const total = parts.reduce((s, p) => s + p.length, 0);
-        const out = new Uint8Array(total);
-        let o = 0;
-        for (const p of parts) {
-            out.set(p, o);
-            o += p.length;
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.stepBy(1);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.stepBy(-1);
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.stepBy(1, 10);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.stepBy(-1, 10);
+                break;
+            case 'Home': {
+                const m = this.min();
+                if (m === null)
+                    return;
+                event.preventDefault();
+                this.commitTo(m);
+                break;
+            }
+            case 'End': {
+                const m = this.max();
+                if (m === null)
+                    return;
+                event.preventDefault();
+                this.commitTo(m);
+                break;
+            }
         }
-        return out;
-    };
-    for (const { name, data } of entries) {
-        const nameBytes = enc.encode(name);
-        const crc = crc32(data);
-        const local = cat(u32(0x04034b50), u16(20), // version needed
-        u16(0), // flags
-        u16(0), // method: stored
-        u16(0), u16(0), // mod time/date
-        u32(crc), u32(data.length), u32(data.length), u16(nameBytes.length), u16(0), nameBytes, data);
-        central.push(cat(u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0), u32(crc), u32(data.length), u32(data.length), u16(nameBytes.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(offset), nameBytes));
-        chunks.push(local);
-        offset += local.length;
     }
-    const centralStart = offset;
-    const centralBytes = cat(...central);
-    const end = cat(u32(0x06054b50), u16(0), u16(0), u16(entries.length), u16(entries.length), u32(centralBytes.length), u32(centralStart), u16(0));
-    return cat(...chunks, centralBytes, end);
-}
-const xml = (s) => String(s ?? '')
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-/** A1-style column ref: 0 → A, 26 → AA … */
-function colRef(i) {
-    let s = '';
-    for (let n = i; n >= 0; n = Math.floor(n / 26) - 1)
-        s = String.fromCharCode(65 + (n % 26)) + s;
-    return s;
-}
-/**
- * Build a single-sheet workbook: `header` as a bold-free first row, then
- * `rows`. Numbers stay numeric; everything else exports as inline strings.
- */
-function buildXlsx(header, rows, sheetName = 'Data') {
-    const rowXml = (cells, r) => `<row r="${r}">` +
-        cells
-            .map((v, c) => {
-            const ref = `${colRef(c)}${r}`;
-            if (typeof v === 'number' && Number.isFinite(v)) {
-                return `<c r="${ref}"><v>${v}</v></c>`;
+    /** Commit the pending text on blur: parse, clamp, restore on garbage. */
+    onBlur() {
+        const trimmed = this.text().trim();
+        if (trimmed === '') {
+            if (this.value() !== null) {
+                this.value.set(null);
+                this.onChange(null);
             }
-            return `<c r="${ref}" t="inlineStr"><is><t xml:space="preserve">${xml(v)}</t></is></c>`;
-        })
-            .join('') +
-        '</row>';
-    const sheet = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
-        `<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>` +
-        rowXml(header, 1) +
-        rows.map((cells, i) => rowXml(cells, i + 2)).join('') +
-        `</sheetData></worksheet>`;
-    const workbook = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
-        `<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" ` +
-        `xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">` +
-        `<sheets><sheet name="${xml(sheetName)}" sheetId="1" r:id="rId1"/></sheets></workbook>`;
-    const workbookRels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
-        `<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
-        `<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/>` +
-        `</Relationships>`;
-    const rootRels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
-        `<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
-        `<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>` +
-        `</Relationships>`;
-    const contentTypes = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
-        `<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">` +
-        `<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>` +
-        `<Default Extension="xml" ContentType="application/xml"/>` +
-        `<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>` +
-        `<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>` +
-        `</Types>`;
-    return zip([
-        { name: '[Content_Types].xml', data: enc.encode(contentTypes) },
-        { name: '_rels/.rels', data: enc.encode(rootRels) },
-        { name: 'xl/workbook.xml', data: enc.encode(workbook) },
-        { name: 'xl/_rels/workbook.xml.rels', data: enc.encode(workbookRels) },
-        { name: 'xl/worksheets/sheet1.xml', data: enc.encode(sheet) },
-    ]);
+            this.text.set('');
+        }
+        else {
+            const parsed = Number(trimmed);
+            if (Number.isFinite(parsed)) {
+                const clamped = this.clamp(parsed);
+                this.value.set(clamped);
+                if (clamped !== parsed)
+                    this.onChange(clamped);
+                this.text.set(String(clamped));
+            }
+            else {
+                // Unparseable — restore the last committed value.
+                this.text.set(this.value() === null ? '' : String(this.value()));
+            }
+        }
+        this.onTouched();
+    }
+    /** Button / keyboard step: an empty field first lands on min (or 0). */
+    stepBy(dir, factor = 1) {
+        if (this.isDisabled())
+            return;
+        const v = this.value();
+        if (v === null) {
+            this.commitTo(this.min() ?? 0);
+            return;
+        }
+        this.commitTo(v + dir * factor * this.step());
+    }
+    commitTo(n) {
+        const clamped = this.clamp(this.snap(n));
+        this.value.set(clamped);
+        this.text.set(String(clamped));
+        this.onChange(clamped);
+        this.onTouched();
+    }
+    clamp(n) {
+        const lo = this.min();
+        const hi = this.max();
+        if (lo !== null && n < lo)
+            return lo;
+        if (hi !== null && n > hi)
+            return hi;
+        return n;
+    }
+    /** Trim float dust from step arithmetic (0.1 + 0.2), not a grid snap. */
+    snap(n) {
+        const step = this.step();
+        if (!Number.isFinite(step) || step <= 0)
+            return n;
+        const decimals = (String(step).split('.')[1] ?? '').length;
+        return Number(n.toFixed(Math.min(decimals + 2, 12)));
+    }
+    writeValue(value) {
+        const parsed = value === null || value === undefined ? null : Number(value);
+        const v = parsed !== null && Number.isFinite(parsed) ? this.clamp(parsed) : null;
+        this.value.set(v);
+        this.text.set(v === null ? '' : String(v));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctNumber, isStandalone: true, selector: "strct-number", inputs: { 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-num" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctNumber), multi: true },
+        ], ngImport: i0, template: `
+    <div class="strct-num__wrap">
+      <button
+        type="button"
+        class="strct-num__btn"
+        [attr.aria-label]="decrementLabel()"
+        [disabled]="isDisabled() || atMin()"
+        (click)="stepBy(-1)"
+      >
+        <strct-icon strictName="minus" [size]="12" [strokeWidth]="1.8" />
+      </button>
+      <input
+        type="text"
+        inputmode="decimal"
+        class="strct-control strct-num__input"
+        role="spinbutton"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [placeholder]="placeholder()"
+        [value]="text()"
+        [disabled]="isDisabled()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (blur)="onBlur()"
+      />
+      <button
+        type="button"
+        class="strct-num__btn"
+        [attr.aria-label]="incrementLabel()"
+        [disabled]="isDisabled() || atMax()"
+        (click)="stepBy(1)"
+      >
+        <strct-icon strictName="plus" [size]="12" [strokeWidth]="1.8" />
+      </button>
+    </div>
+  `, isInline: true, styles: [".strct-num{display:block;width:100%}.strct-num__wrap{display:flex;align-items:stretch;gap:var(--space-1)}.strct-num__input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}.strct-num__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-inline:var(--space-2);color:var(--t2);background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.strct-num__btn:hover:not(:disabled){color:var(--t1);border-color:var(--b3);background:var(--bg-3)}.strct-num__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctNumber, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-number', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctNumber), multi: true },
+                    ], template: `
+    <div class="strct-num__wrap">
+      <button
+        type="button"
+        class="strct-num__btn"
+        [attr.aria-label]="decrementLabel()"
+        [disabled]="isDisabled() || atMin()"
+        (click)="stepBy(-1)"
+      >
+        <strct-icon strictName="minus" [size]="12" [strokeWidth]="1.8" />
+      </button>
+      <input
+        type="text"
+        inputmode="decimal"
+        class="strct-control strct-num__input"
+        role="spinbutton"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [placeholder]="placeholder()"
+        [value]="text()"
+        [disabled]="isDisabled()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (blur)="onBlur()"
+      />
+      <button
+        type="button"
+        class="strct-num__btn"
+        [attr.aria-label]="incrementLabel()"
+        [disabled]="isDisabled() || atMax()"
+        (click)="stepBy(1)"
+      >
+        <strct-icon strictName="plus" [size]="12" [strokeWidth]="1.8" />
+      </button>
+    </div>
+  `, host: { class: 'strct-num' }, styles: [".strct-num{display:block;width:100%}.strct-num__wrap{display:flex;align-items:stretch;gap:var(--space-1)}.strct-num__input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}.strct-num__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-inline:var(--space-2);color:var(--t2);background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.strct-num__btn:hover:not(:disabled){color:var(--t1);border-color:var(--b3);background:var(--bg-3)}.strct-num__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}\n"] }]
+        }], propDecorators: { 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-const DG_LABELS = {
-    row: 'row',
-    rows: 'rows',
-    selected: 'selected',
-    selectAll: 'Select all rows on this page',
-    selectRow: 'Select row',
-    selectRowFor: (id) => `Select row ${id}`,
-    selectAllInGroup: (group) => `Select all in ${group}`,
-    openDetail: 'Open detail',
-    toggleDetail: 'Toggle detail',
-    closeDetail: 'Close detail',
-    rowActions: 'Row actions',
-    chooseColumns: 'Choose columns',
-    refresh: 'Refresh data',
-    actions: 'Actions',
-    filterColumn: 'Filter',
-    filterPlaceholder: 'Filter…',
-    clearFilter: 'Clear filter',
-    editCell: 'Edit',
-    toggleChildren: 'Toggle children',
-    quickFilter: 'Quick filter',
-};
-let datagridCounter = 0;
-/** Utility-column widths used when sticky columns are active (px). */
-const UTIL_W = { detail: 36, expand: 36, sel: 40 };
-/** Fallback width for a sticky column without an explicit px width. */
-const STICKY_FALLBACK_W = 120;
 /**
- * Marks the expandable-row detail template. The row is the template's implicit
- * context (`let-row`, or `let-row="row"`): `<ng-template strctRowDetail let-row> … {{ row['name'] }} … </ng-template>`.
+ * Minimal, dependency-free XLSX writer for the datagrid's Excel export.
+ *
+ * An .xlsx file is a ZIP of SpreadsheetML parts. This builds the five
+ * required parts with inline strings and zips them with STORED (uncompressed)
+ * entries — no runtime dependency, byte-accurate CRC32, opens in Excel,
+ * LibreOffice and Google Sheets.
  */
-class StrctRowDetailDef {
-    template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRowDetailDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctRowDetailDef, isStandalone: true, selector: "[strctRowDetail]", ngImport: i0 });
+const CRC_TABLE = (() => {
+    const t = new Uint32Array(256);
+    for (let n = 0; n < 256; n++) {
+        let c = n;
+        for (let k = 0; k < 8; k++)
+            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+        t[n] = c >>> 0;
+    }
+    return t;
+})();
+function crc32(data) {
+    let c = 0xffffffff;
+    for (const byte of data)
+        c = CRC_TABLE[(c ^ byte) & 0xff] ^ (c >>> 8);
+    return (c ^ 0xffffffff) >>> 0;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRowDetailDef, decorators: [{
-            type: Directive,
-            args: [{ selector: '[strctRowDetail]' }]
-        }] });
-/** Muted note inside the action bar, before the buttons. */
-class StrctDatagridActionBarCaption {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBarCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDatagridActionBarCaption, isStandalone: true, selector: "[strctDatagridActionBarCaption]", ngImport: i0 });
+const enc = new TextEncoder();
+/** ZIP with STORED entries (no compression — spreadsheets are small). */
+function zip(entries) {
+    const chunks = [];
+    const central = [];
+    let offset = 0;
+    const u16 = (n) => new Uint8Array([n & 0xff, (n >> 8) & 0xff]);
+    const u32 = (n) => new Uint8Array([n & 0xff, (n >> 8) & 0xff, (n >> 16) & 0xff, (n >> 24) & 0xff]);
+    const cat = (...parts) => {
+        const total = parts.reduce((s, p) => s + p.length, 0);
+        const out = new Uint8Array(total);
+        let o = 0;
+        for (const p of parts) {
+            out.set(p, o);
+            o += p.length;
+        }
+        return out;
+    };
+    for (const { name, data } of entries) {
+        const nameBytes = enc.encode(name);
+        const crc = crc32(data);
+        const local = cat(u32(0x04034b50), u16(20), // version needed
+        u16(0), // flags
+        u16(0), // method: stored
+        u16(0), u16(0), // mod time/date
+        u32(crc), u32(data.length), u32(data.length), u16(nameBytes.length), u16(0), nameBytes, data);
+        central.push(cat(u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0), u32(crc), u32(data.length), u32(data.length), u16(nameBytes.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(offset), nameBytes));
+        chunks.push(local);
+        offset += local.length;
+    }
+    const centralStart = offset;
+    const centralBytes = cat(...central);
+    const end = cat(u32(0x06054b50), u16(0), u16(0), u16(entries.length), u16(entries.length), u32(centralBytes.length), u32(centralStart), u16(0));
+    return cat(...chunks, centralBytes, end);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBarCaption, decorators: [{
-            type: Directive,
-            args: [{ selector: '[strctDatagridActionBarCaption]' }]
-        }] });
-/** Marks the persistent action-bar (toolbar) content shown above the grid. */
-class StrctDatagridActionBar {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDatagridActionBar, isStandalone: true, selector: "[strctDatagridActionBar]", ngImport: i0 });
+const xml = (s) => String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+/** A1-style column ref: 0 → A, 26 → AA … */
+function colRef(i) {
+    let s = '';
+    for (let n = i; n >= 0; n = Math.floor(n / 26) - 1)
+        s = String.fromCharCode(65 + (n % 26)) + s;
+    return s;
+}
+/**
+ * Build a single-sheet workbook: `header` as a bold-free first row, then
+ * `rows`. Numbers stay numeric; everything else exports as inline strings.
+ */
+function buildXlsx(header, rows, sheetName = 'Data') {
+    const rowXml = (cells, r) => `<row r="${r}">` +
+        cells
+            .map((v, c) => {
+            const ref = `${colRef(c)}${r}`;
+            if (typeof v === 'number' && Number.isFinite(v)) {
+                return `<c r="${ref}"><v>${v}</v></c>`;
+            }
+            return `<c r="${ref}" t="inlineStr"><is><t xml:space="preserve">${xml(v)}</t></is></c>`;
+        })
+            .join('') +
+        '</row>';
+    const sheet = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
+        `<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>` +
+        rowXml(header, 1) +
+        rows.map((cells, i) => rowXml(cells, i + 2)).join('') +
+        `</sheetData></worksheet>`;
+    const workbook = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
+        `<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" ` +
+        `xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">` +
+        `<sheets><sheet name="${xml(sheetName)}" sheetId="1" r:id="rId1"/></sheets></workbook>`;
+    const workbookRels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
+        `<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
+        `<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/>` +
+        `</Relationships>`;
+    const rootRels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
+        `<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
+        `<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>` +
+        `</Relationships>`;
+    const contentTypes = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
+        `<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">` +
+        `<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>` +
+        `<Default Extension="xml" ContentType="application/xml"/>` +
+        `<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>` +
+        `<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>` +
+        `</Types>`;
+    return zip([
+        { name: '[Content_Types].xml', data: enc.encode(contentTypes) },
+        { name: '_rels/.rels', data: enc.encode(rootRels) },
+        { name: 'xl/workbook.xml', data: enc.encode(workbook) },
+        { name: 'xl/_rels/workbook.xml.rels', data: enc.encode(workbookRels) },
+        { name: 'xl/worksheets/sheet1.xml', data: enc.encode(sheet) },
+    ]);
+}
+
+const DG_LABELS = {
+    row: 'row',
+    rows: 'rows',
+    selected: 'selected',
+    selectAll: 'Select all rows on this page',
+    selectRow: 'Select row',
+    selectRowFor: (id) => `Select row ${id}`,
+    selectAllInGroup: (group) => `Select all in ${group}`,
+    openDetail: 'Open detail',
+    toggleDetail: 'Toggle detail',
+    closeDetail: 'Close detail',
+    rowActions: 'Row actions',
+    chooseColumns: 'Choose columns',
+    refresh: 'Refresh data',
+    actions: 'Actions',
+    filterColumn: 'Filter',
+    filterPlaceholder: 'Filter…',
+    clearFilter: 'Clear filter',
+    editCell: 'Edit',
+    toggleChildren: 'Toggle children',
+    quickFilter: 'Quick filter',
+};
+let datagridCounter = 0;
+/** Utility-column widths used when sticky columns are active (px). */
+const UTIL_W = { detail: 36, expand: 36, sel: 40 };
+/** Fallback width for a sticky column without an explicit px width. */
+const STICKY_FALLBACK_W = 120;
+/**
+ * Marks the expandable-row detail template. The row is the template's implicit
+ * context (`let-row`, or `let-row="row"`): `<ng-template strctRowDetail let-row> … {{ row['name'] }} … </ng-template>`.
+ */
+class StrctRowDetailDef {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRowDetailDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctRowDetailDef, isStandalone: true, selector: "[strctRowDetail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRowDetailDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctRowDetail]' }]
+        }] });
+/** Muted note inside the action bar, before the buttons. */
+class StrctDatagridActionBarCaption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBarCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDatagridActionBarCaption, isStandalone: true, selector: "[strctDatagridActionBarCaption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBarCaption, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctDatagridActionBarCaption]' }]
+        }] });
+/** Marks the persistent action-bar (toolbar) content shown above the grid. */
+class StrctDatagridActionBar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDatagridActionBar, isStandalone: true, selector: "[strctDatagridActionBar]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagridActionBar, decorators: [{
             type: Directive,
@@ -12103,8 +12490,9 @@ class StrctDatagrid {
     rowAction = output();
     /** Server-side data request (lazy mode): load this page / sort and set `rows`. */
     lazyLoad = output();
-    /** An editable cell was committed (Enter / blur). The grid does not mutate
-     *  rows — apply `value` to your data and pass the updated array back in. */
+    /** An editable cell was committed (Enter / blur, or choosing in a `select`
+     *  editor). The grid does not mutate rows — apply the value to your data and
+     *  pass the updated array back in. */
     cellEdit = output();
     menu = inject(StrctMenuService);
     detailDef = contentChild(StrctRowDetailDef, /* @ts-ignore */
@@ -12479,9 +12867,80 @@ class StrctDatagrid {
         const e = this.editing();
         return !!e && e.rowKey === this.rowKey(row) && e.colKey === col.key;
     }
+    /** The value a typed editor holds while it is open (committed on Enter / blur). */
+    editDraft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editDraft" }] : /* istanbul ignore next */ []));
     startEdit(row, col) {
         this.editing.set({ rowKey: this.rowKey(row), colKey: col.key });
-        setTimeout(() => this.hostRef.nativeElement.querySelector('.strct-dg__editinput')?.focus());
+        this.editDraft.set(row[col.key]);
+        setTimeout(() => {
+            const editor = this.hostRef.nativeElement.querySelector('.strct-dg__editinput, .strct-dg__editselect, .strct-dg__editnumber');
+            if (!editor)
+                return;
+            // The stepper buttons come first in the DOM; the value is what the user
+            // came to change, so focus lands on the field itself.
+            (editor.matches('input')
+                ? editor
+                : (editor.querySelector('input') ??
+                    editor.querySelector('button')))?.focus();
+        });
+    }
+    /** A select column reads as its option's label, not as the stored value. */
+    displayValue(row, col) {
+        const raw = row[col.key];
+        if (col.editor !== 'select')
+            return raw;
+        return col.editorOptions?.find((o) => o.value === raw)?.label ?? raw;
+    }
+    /** Close the editor and emit `cellEdit` when the value actually changed. */
+    commitValue(row, col, raw) {
+        if (!this.isEditingCell(row, col))
+            return;
+        this.editing.set(null);
+        const value = this.clampToColumn(col, raw);
+        const previous = row[col.key];
+        if (previous === value)
+            return;
+        this.cellEdit.emit({
+            row,
+            column: col,
+            value: value == null ? '' : String(value),
+            typedValue: value,
+            previous,
+        });
+    }
+    /** Enter / blur on a typed editor commits what it currently holds. */
+    commitDraft(row, col, event) {
+        event?.stopPropagation();
+        this.commitValue(row, col, this.editDraft());
+    }
+    /**
+     * A column that declares bounds means them: Enter commits what the field
+     * holds, and `strct-number` only clamps on blur, so the grid clamps here
+     * rather than letting an out-of-range value reach `cellEdit`.
+     */
+    clampToColumn(col, value) {
+        if (col.editor !== 'number' || typeof value !== 'number' || !Number.isFinite(value))
+            return value;
+        const min = col.editorMin;
+        const max = col.editorMax;
+        let v = value;
+        if (min != null && v < min)
+            v = min;
+        if (max != null && v > max)
+            v = max;
+        return v;
+    }
+    /**
+     * A number editor is a field between two stepper buttons, so focus moves
+     * inside it — only a move that actually leaves the editor is a blur.
+     */
+    commitOnLeave(row, col, event) {
+        const editor = event.currentTarget;
+        const next = event.relatedTarget;
+        if (next instanceof Node && editor.contains(next))
+            return;
+        this.commitDraft(row, col, event);
     }
     commitEdit(row, col, event) {
         if (!this.isEditingCell(row, col))
@@ -12490,7 +12949,7 @@ class StrctDatagrid {
         this.editing.set(null);
         const previous = row[col.key];
         if (String(previous ?? '') !== value)
-            this.cellEdit.emit({ row, column: col, value, previous });
+            this.cellEdit.emit({ row, column: col, value, typedValue: value, previous });
     }
     cancelEdit(event) {
         event?.stopPropagation();
@@ -13603,16 +14062,47 @@ class StrctDatagrid {
                           }
                         }
                         @if (isEditingCell(row, col)) {
-                          <input
-                            class="strct-dg__editinput"
-                            type="text"
-                            [value]="row[col.key] ?? ''"
-                            [attr.aria-label]="L().editCell + ': ' + col.label"
-                            (keydown.enter)="commitEdit(row, col, $event)"
-                            (keydown.escape)="cancelEdit($event)"
-                            (blur)="commitEdit(row, col, $event)"
-                            (click)="$event.stopPropagation()"
-                          />
+                          @switch (col.editor ?? 'text') {
+                            @case ('select') {
+                              <!-- Choosing is the commit: there is nothing to
+                                   confirm with Enter once an option is picked. -->
+                              <strct-select
+                                class="strct-dg__editselect"
+                                [options]="col.editorOptions ?? []"
+                                [listLabel]="L().editCell + ': ' + col.label"
+                                [ngModel]="row[col.key]"
+                                (ngModelChange)="commitValue(row, col, $event)"
+                                (keydown.escape)="cancelEdit($event)"
+                                (click)="$event.stopPropagation()"
+                              />
+                            }
+                            @case ('number') {
+                              <strct-number
+                                class="strct-dg__editnumber"
+                                [min]="col.editorMin ?? null"
+                                [max]="col.editorMax ?? null"
+                                [step]="col.editorStep ?? 1"
+                                [ngModel]="row[col.key]"
+                                (ngModelChange)="editDraft.set($event)"
+                                (keydown.enter)="commitDraft(row, col, $event)"
+                                (keydown.escape)="cancelEdit($event)"
+                                (focusout)="commitOnLeave(row, col, $event)"
+                                (click)="$event.stopPropagation()"
+                              />
+                            }
+                            @default {
+                              <input
+                                class="strct-dg__editinput"
+                                type="text"
+                                [value]="row[col.key] ?? ''"
+                                [attr.aria-label]="L().editCell + ': ' + col.label"
+                                (keydown.enter)="commitEdit(row, col, $event)"
+                                (keydown.escape)="cancelEdit($event)"
+                                (blur)="commitEdit(row, col, $event)"
+                                (click)="$event.stopPropagation()"
+                              />
+                            }
+                          }
                         } @else if (cellTemplate(col.key); as tpl) {
                           <ng-container
                             [ngTemplateOutlet]="tpl"
@@ -13624,7 +14114,7 @@ class StrctDatagrid {
                             }"
                           />
                         } @else {
-                          {{ row[col.key] }}
+                          {{ displayValue(row, col) }}
                         }
                       </td>
                     }
@@ -13759,7 +14249,7 @@ class StrctDatagrid {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }, { kind: "component", type: StrctSelect, selector: "strct-select", inputs: ["options", "placeholder", "listLabel", "emptyText", "disabled", "compareWith"] }, { kind: "component", type: StrctNumber, selector: "strct-number", inputs: ["min", "max", "step", "placeholder", "incrementLabel", "decrementLabel", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagrid, decorators: [{
             type: Component,
@@ -13772,6 +14262,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         StrctButtonGroup,
                         StrctOverlay,
                         StrctSearchbox,
+                        StrctSelect,
+                        StrctNumber,
+                        FormsModule,
                     ], template: `
     @if (actionBarDef() || quickFilterable()) {
       <div class="strct-dg__toolbar">
@@ -14136,16 +14629,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                           }
                         }
                         @if (isEditingCell(row, col)) {
-                          <input
-                            class="strct-dg__editinput"
-                            type="text"
-                            [value]="row[col.key] ?? ''"
-                            [attr.aria-label]="L().editCell + ': ' + col.label"
-                            (keydown.enter)="commitEdit(row, col, $event)"
-                            (keydown.escape)="cancelEdit($event)"
-                            (blur)="commitEdit(row, col, $event)"
-                            (click)="$event.stopPropagation()"
-                          />
+                          @switch (col.editor ?? 'text') {
+                            @case ('select') {
+                              <!-- Choosing is the commit: there is nothing to
+                                   confirm with Enter once an option is picked. -->
+                              <strct-select
+                                class="strct-dg__editselect"
+                                [options]="col.editorOptions ?? []"
+                                [listLabel]="L().editCell + ': ' + col.label"
+                                [ngModel]="row[col.key]"
+                                (ngModelChange)="commitValue(row, col, $event)"
+                                (keydown.escape)="cancelEdit($event)"
+                                (click)="$event.stopPropagation()"
+                              />
+                            }
+                            @case ('number') {
+                              <strct-number
+                                class="strct-dg__editnumber"
+                                [min]="col.editorMin ?? null"
+                                [max]="col.editorMax ?? null"
+                                [step]="col.editorStep ?? 1"
+                                [ngModel]="row[col.key]"
+                                (ngModelChange)="editDraft.set($event)"
+                                (keydown.enter)="commitDraft(row, col, $event)"
+                                (keydown.escape)="cancelEdit($event)"
+                                (focusout)="commitOnLeave(row, col, $event)"
+                                (click)="$event.stopPropagation()"
+                              />
+                            }
+                            @default {
+                              <input
+                                class="strct-dg__editinput"
+                                type="text"
+                                [value]="row[col.key] ?? ''"
+                                [attr.aria-label]="L().editCell + ': ' + col.label"
+                                (keydown.enter)="commitEdit(row, col, $event)"
+                                (keydown.escape)="cancelEdit($event)"
+                                (blur)="commitEdit(row, col, $event)"
+                                (click)="$event.stopPropagation()"
+                              />
+                            }
+                          }
                         } @else if (cellTemplate(col.key); as tpl) {
                           <ng-container
                             [ngTemplateOutlet]="tpl"
@@ -14157,7 +14681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                             }"
                           />
                         } @else {
-                          {{ row[col.key] }}
+                          {{ displayValue(row, col) }}
                         }
                       </td>
                     }
@@ -14298,7 +14822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-dg-host--singleline]': 'singleLine()',
                         '[class.strct-dg-host--virtual]': 'virtual()',
                         '[class.strct-dg-host--sticky]': 'stickyActive()',
-                    }, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
+                    }, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t3)}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:9px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:9px;border-start-end-radius:9px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:9px;border-end-end-radius:9px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:var(--acc-s)}.strct-dg__row--selected td{background:var(--acc-m)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned .strct-dg__scroll{flex:0 0 auto;width:260px;min-width:260px;max-width:260px}.strct-dg__layout--paned .strct-dg{width:260px;min-width:260px;max-width:260px;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__row--clickable{cursor:pointer}.strct-dg__row--active td{background:var(--acc-m)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:8px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t3);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:11.5px;cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], groupSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelect", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }, { type: i0.Output, args: ["quickFilterChange"] }], quickFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterFields", required: false }] }], quickFilterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterable", required: false }] }], quickFilterAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterAlign", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }], onDocClickOverlays: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -19699,1441 +20223,1167 @@ class StrctTour {
         const w = 300;
         const h = 170;
         if (!r) {
-            return {
-                top: Math.max(20, window.innerHeight / 2 - h / 2),
-                left: Math.max(20, window.innerWidth / 2 - w / 2),
-            };
-        }
-        // Below the target if it fits, else above; clamped into the viewport.
-        let top = r.top + r.height + 14;
-        if (top + h > window.innerHeight - 12)
-            top = Math.max(12, r.top - h - 14);
-        const left = Math.min(Math.max(12, r.left), window.innerWidth - w - 12);
-        return { top, left };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cardPos" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Restart from step 0 on open; scroll the first target into view.
-        effect(() => {
-            if (this.open()) {
-                this.previousActive = saveFocusedElement();
-                this.index.set(0);
-                this.scrollToTarget();
-                this.focusNextButton();
-            }
-            else {
-                restoreFocus(this.previousActive);
-                this.previousActive = null;
-            }
-        });
-    }
-    next() {
-        if (this.index() >= this.steps().length - 1) {
-            this.open.set(false);
-            this.finished.emit();
-            return;
-        }
-        this.index.update((i) => i + 1);
-        this.scrollToTarget();
-        this.focusNextButton();
-    }
-    prev() {
-        this.index.update((i) => Math.max(0, i - 1));
-        this.scrollToTarget();
-        this.focusNextButton();
-    }
-    close() {
-        this.open.set(false);
-        this.dismissed.emit();
-    }
-    /** Wrap Tab focus within the card. */
-    onTab(event) {
-        const card = this.card();
-        if (card)
-            keepTabInside(event, card);
-    }
-    /** Escape closes; stopPropagation so a host modal/drawer does not also close. */
-    onEscapeKey(event) {
-        event.stopPropagation();
-        this.close();
-    }
-    /**
-     * Arrow keys step through the tour, mirrored under RTL. No shared direction
-     * helper exists (other components handle RTL in CSS only), so read the
-     * card's computed direction here.
-     */
-    onArrow(event, dir) {
-        event.preventDefault();
-        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
-        if ((dir === 'right') !== rtl)
-            this.next();
-        else
-            this.prev();
-    }
-    /** Home/End jump to the first/last step. */
-    onHomeEnd(event, last) {
-        event.preventDefault();
-        this.index.set(last ? this.steps().length - 1 : 0);
-        this.scrollToTarget();
-        this.focusNextButton();
-    }
-    scrollToTarget() {
-        setTimeout(() => {
-            const sel = this.steps()[this.index()]?.target;
-            if (sel)
-                document.querySelector(sel)?.scrollIntoView?.({ block: 'center' });
-            this.measureTick.update((n) => n + 1);
-        });
-    }
-    card() {
-        return this.elementRef.nativeElement.querySelector('.strct-tour__card');
-    }
-    /** Move focus to the step's primary (Next/Done) action once the card has rendered. */
-    focusNextButton() {
-        setTimeout(() => {
-            if (!this.open())
-                return;
-            const card = this.card();
-            if (!card)
-                return;
-            const nav = card.querySelectorAll('.strct-tour__nav button');
-            const primary = nav[nav.length - 1];
-            if (primary)
-                primary.focus();
-            else
-                focusFirstIn(card);
-        });
-    }
-    onReflow() {
-        if (this.open())
-            this.measureTick.update((n) => n + 1);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTour, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTour, isStandalone: true, selector: "strct-tour", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", finished: "finished", dismissed: "dismissed" }, host: { listeners: { "window:resize": "onReflow()", "window:scroll": "onReflow()" } }, ngImport: i0, template: `
-    @if (open() && current(); as step) {
-      <!-- Always the click-catcher; dims only when no ring (its shadow dims). -->
-      <div
-        class="strct-tour__backdrop"
-        [class.strct-tour__backdrop--dim]="!spot()"
-        (click)="close()"
-      ></div>
-      @if (spot(); as r) {
-        <div
-          class="strct-tour__ring"
-          [style.top.px]="r.top - 6"
-          [style.left.px]="r.left - 6"
-          [style.width.px]="r.width + 12"
-          [style.height.px]="r.height + 12"
-        ></div>
-      }
-      <div
-        class="strct-tour__card"
-        role="dialog"
-        [attr.aria-labelledby]="titleId"
-        [style.top.px]="cardPos().top"
-        [style.left.px]="cardPos().left"
-        (keydown.tab)="onTab($event)"
-        (keydown.shift.tab)="onTab($event)"
-        (keydown.escape)="onEscapeKey($event)"
-        (keydown.arrowleft)="onArrow($event, 'left')"
-        (keydown.arrowright)="onArrow($event, 'right')"
-        (keydown.home)="onHomeEnd($event, false)"
-        (keydown.end)="onHomeEnd($event, true)"
-      >
-        <div class="strct-tour__step">{{ index() + 1 }} / {{ steps().length }}</div>
-        <div class="strct-tour__title" [id]="titleId">{{ step.title }}</div>
-        <div class="strct-tour__body">{{ step.body }}</div>
-        <div class="strct-tour__nav">
-          <button strct-button size="sm" variant="flat" (click)="close()">
-            {{ skipLabel() }}
-          </button>
-          <span class="strct-tour__grow"></span>
-          @if (index() > 0) {
-            <button strct-button size="sm" variant="neutral" (click)="prev()">
-              {{ backLabel() }}
-            </button>
-          }
-          <button strct-button size="sm" variant="primary" solid (click)="next()">
-            {{ index() === steps().length - 1 ? doneLabel() : nextLabel() }}
-          </button>
-        </div>
-      </div>
-    }
-  `, isInline: true, styles: [".strct-tour__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:transparent}.strct-tour__backdrop--dim{background:var(--backdrop)}.strct-tour__ring{position:fixed;z-index:calc(var(--z-tour) + 1);border:2px solid var(--acc);border-radius:9px;box-shadow:0 0 0 4px var(--acc30),0 0 0 9999px var(--backdrop);pointer-events:none}.strct-tour__card{position:fixed;z-index:calc(var(--z-tour) + 2);width:300px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-tour__step{font-size:10.5px;font-weight:600;letter-spacing:.6px;color:var(--t3);margin-bottom:4px;font-variant-numeric:tabular-nums}.strct-tour__title{font-size:13.5px;font-weight:650;color:var(--t1);margin-bottom:6px}.strct-tour__body{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:12px}.strct-tour__nav{display:flex;align-items:center;gap:8px}.strct-tour__grow{flex:1}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTour, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-tour', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton], template: `
-    @if (open() && current(); as step) {
-      <!-- Always the click-catcher; dims only when no ring (its shadow dims). -->
-      <div
-        class="strct-tour__backdrop"
-        [class.strct-tour__backdrop--dim]="!spot()"
-        (click)="close()"
-      ></div>
-      @if (spot(); as r) {
-        <div
-          class="strct-tour__ring"
-          [style.top.px]="r.top - 6"
-          [style.left.px]="r.left - 6"
-          [style.width.px]="r.width + 12"
-          [style.height.px]="r.height + 12"
-        ></div>
-      }
-      <div
-        class="strct-tour__card"
-        role="dialog"
-        [attr.aria-labelledby]="titleId"
-        [style.top.px]="cardPos().top"
-        [style.left.px]="cardPos().left"
-        (keydown.tab)="onTab($event)"
-        (keydown.shift.tab)="onTab($event)"
-        (keydown.escape)="onEscapeKey($event)"
-        (keydown.arrowleft)="onArrow($event, 'left')"
-        (keydown.arrowright)="onArrow($event, 'right')"
-        (keydown.home)="onHomeEnd($event, false)"
-        (keydown.end)="onHomeEnd($event, true)"
-      >
-        <div class="strct-tour__step">{{ index() + 1 }} / {{ steps().length }}</div>
-        <div class="strct-tour__title" [id]="titleId">{{ step.title }}</div>
-        <div class="strct-tour__body">{{ step.body }}</div>
-        <div class="strct-tour__nav">
-          <button strct-button size="sm" variant="flat" (click)="close()">
-            {{ skipLabel() }}
-          </button>
-          <span class="strct-tour__grow"></span>
-          @if (index() > 0) {
-            <button strct-button size="sm" variant="neutral" (click)="prev()">
-              {{ backLabel() }}
-            </button>
-          }
-          <button strct-button size="sm" variant="primary" solid (click)="next()">
-            {{ index() === steps().length - 1 ? doneLabel() : nextLabel() }}
-          </button>
-        </div>
-      </div>
-    }
-  `, styles: [".strct-tour__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:transparent}.strct-tour__backdrop--dim{background:var(--backdrop)}.strct-tour__ring{position:fixed;z-index:calc(var(--z-tour) + 1);border:2px solid var(--acc);border-radius:9px;box-shadow:0 0 0 4px var(--acc30),0 0 0 9999px var(--backdrop);pointer-events:none}.strct-tour__card{position:fixed;z-index:calc(var(--z-tour) + 2);width:300px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-tour__step{font-size:10.5px;font-weight:600;letter-spacing:.6px;color:var(--t3);margin-bottom:4px;font-variant-numeric:tabular-nums}.strct-tour__title{font-size:13.5px;font-weight:650;color:var(--t1);margin-bottom:6px}.strct-tour__body{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:12px}.strct-tour__nav{display:flex;align-items:center;gap:8px}.strct-tour__grow{flex:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], skipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], onReflow: [{
-                type: HostListener,
-                args: ['window:resize']
-            }, {
-                type: HostListener,
-                args: ['window:scroll']
-            }] } });
-
-let menubarCounter = 0;
-/**
- * Horizontal menubar — the application-menu strip ("File · Edit · View") for
- * dense tool-style consoles:
- *
- *   <strct-menubar [menus]="menus" (picked)="run($event)" />
- *
- * Click (or Enter/Down) opens a menu and focus moves into it; Left/Right move
- * across the bar and, while open, switch the open menu (the APG menubar
- * convention). Up/Down (+Home/End) rove the open menu, Right/Left enter and
- * leave an item's one-level `children` submenu. Escape and outside click
- * close, returning focus to the bar. `(picked)` carries `{ menu, item }`.
- */
-class StrctMenubar {
-    host = inject(ElementRef);
-    /** Top-level menus. */
-    menus = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
-    /** Accessible name of the bar (localizable). */
-    ariaLabel = input('Application menu', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** A menu entry was chosen. */
-    picked = output();
-    openId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
-    focusIdx = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "focusIdx" }] : /* istanbul ignore next */ []));
-    /** Index of the item whose one-level submenu is open. */
-    subIdx = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "subIdx" }] : /* istanbul ignore next */ []));
-    /** Top-level button that opened the menu — focus returns here on close. */
-    trigger = null;
-    toggleMenu(id, i) {
-        this.focusIdx.set(i);
-        if (this.openId() === id) {
-            this.closeMenu(false);
-        }
-        else {
-            this.trigger = saveFocusedElement();
-            this.openId.set(id);
-            this.subIdx.set(null);
-        }
-    }
-    onItemClick(menu, item, i) {
-        if (item.disabled)
-            return;
-        if (item.children?.length) {
-            this.subIdx.set(this.subIdx() === i ? null : i);
-            return;
-        }
-        this.pick(menu, item);
-    }
-    onItemHover(item, i) {
-        if (item.disabled)
-            return;
-        if (item.children?.length)
-            this.subIdx.set(i);
-        else if (this.subIdx() != null)
-            this.subIdx.set(null);
-    }
-    pick(menu, item) {
-        if (item.disabled)
-            return;
-        this.closeMenu(true);
-        item.action?.(item.data);
-        this.picked.emit({ menu, item });
-    }
-    onTopKey(event, i) {
-        const menus = this.menus();
-        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-            event.preventDefault();
-            if (this.openId()) {
-                // While a menu is open, moving across the bar switches the open menu.
-                this.switchTop(event.key === 'ArrowRight' ? 1 : -1);
-            }
-            else {
-                const dir = event.key === 'ArrowRight' ? 1 : -1;
-                const next = (i + dir + menus.length) % menus.length;
-                this.focusIdx.set(next);
-                setTimeout(() => this.topButtons()[next]?.focus());
-            }
-        }
-        else if (event.key === 'ArrowDown' || event.key === 'Enter') {
-            event.preventDefault();
-            this.trigger = saveFocusedElement();
-            this.openId.set(menus[i].id);
-            this.subIdx.set(null);
-            setTimeout(() => {
-                const menuEl = this.host.nativeElement.querySelector('.strct-mb__menu');
-                if (menuEl)
-                    focusFirstIn(menuEl);
-            });
-        }
-        else if (event.key === 'Escape' && this.openId()) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.closeMenu(true);
-        }
-    }
-    onMenuKey(event, menu) {
-        const active = document.activeElement;
-        const inSub = !!active?.classList.contains('strct-mb__subitem');
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'ArrowUp': {
-                event.preventDefault();
-                event.stopPropagation();
-                const list = this.navButtons(inSub);
-                const dir = event.key === 'ArrowDown' ? 1 : -1;
-                const cur = list.indexOf(active);
-                list[(cur + dir + list.length) % list.length]?.focus();
-                break;
-            }
-            case 'Home':
-            case 'End': {
-                event.preventDefault();
-                event.stopPropagation();
-                const list = this.navButtons(inSub);
-                (event.key === 'Home' ? list[0] : list[list.length - 1])?.focus();
-                break;
-            }
-            case 'ArrowRight': {
-                if (inSub)
-                    break; // deepest level — nothing further to open
-                event.preventDefault();
-                event.stopPropagation();
-                const idx = Number(active?.getAttribute('data-idx'));
-                if (menu.items[idx]?.children?.length && !menu.items[idx].disabled) {
-                    this.subIdx.set(idx);
-                    setTimeout(() => this.navButtons(true)[0]?.focus());
-                }
-                else {
-                    this.switchTop(1);
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                event.preventDefault();
-                event.stopPropagation();
-                if (inSub) {
-                    const parent = this.subIdx();
-                    this.subIdx.set(null);
-                    this.host.nativeElement
-                        .querySelector(`.strct-mb__item[data-idx="${parent}"]`)
-                        ?.focus();
-                }
-                else if (this.subIdx() != null) {
-                    this.subIdx.set(null);
-                }
-                else {
-                    this.switchTop(-1);
-                }
-                break;
+            return {
+                top: Math.max(20, window.innerHeight / 2 - h / 2),
+                left: Math.max(20, window.innerWidth / 2 - w / 2),
+            };
+        }
+        // Below the target if it fits, else above; clamped into the viewport.
+        let top = r.top + r.height + 14;
+        if (top + h > window.innerHeight - 12)
+            top = Math.max(12, r.top - h - 14);
+        const left = Math.min(Math.max(12, r.left), window.innerWidth - w - 12);
+        return { top, left };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardPos" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Restart from step 0 on open; scroll the first target into view.
+        effect(() => {
+            if (this.open()) {
+                this.previousActive = saveFocusedElement();
+                this.index.set(0);
+                this.scrollToTarget();
+                this.focusNextButton();
             }
-            case 'Escape': {
-                event.preventDefault();
-                event.stopPropagation();
-                this.closeMenu(true);
-                break;
+            else {
+                restoreFocus(this.previousActive);
+                this.previousActive = null;
             }
+        });
+    }
+    next() {
+        if (this.index() >= this.steps().length - 1) {
+            this.open.set(false);
+            this.finished.emit();
+            return;
         }
+        this.index.update((i) => i + 1);
+        this.scrollToTarget();
+        this.focusNextButton();
     }
-    /** Switch the open menu to the next/previous top-level entry; focus follows. */
-    switchTop(dir) {
-        const menus = this.menus();
-        const next = (this.focusIdx() + dir + menus.length) % menus.length;
-        this.focusIdx.set(next);
-        this.openId.set(menus[next].id);
-        this.subIdx.set(null);
-        setTimeout(() => this.topButtons()[next]?.focus());
+    prev() {
+        this.index.update((i) => Math.max(0, i - 1));
+        this.scrollToTarget();
+        this.focusNextButton();
     }
-    closeMenu(returnFocus) {
-        this.openId.set(null);
-        this.subIdx.set(null);
-        if (returnFocus)
-            restoreFocus(this.trigger);
-        this.trigger = null;
+    close() {
+        this.open.set(false);
+        this.dismissed.emit();
     }
-    uid = ++menubarCounter;
-    hintId(menuId, i, j) {
-        // menu ids are consumer data; aria-describedby splits on whitespace.
-        const menu = menuId.replace(/\s+/g, '_');
-        return `strct-mb-${this.uid}-${menu}-${i}${j == null ? '' : '-' + j}-hint`;
+    /** Wrap Tab focus within the card. */
+    onTab(event) {
+        const card = this.card();
+        if (card)
+            keepTabInside(event, card);
     }
-    topButtons() {
-        return Array.from(this.host.nativeElement.querySelectorAll('.strct-mb__top'));
+    /** Escape closes; stopPropagation so a host modal/drawer does not also close. */
+    onEscapeKey(event) {
+        event.stopPropagation();
+        this.close();
     }
-    /** Keyboard-reachable item buttons of the open menu — either its items or the
-     *  open submenu's: enabled ones, plus disabled ones that carry a hint (so the
-     *  reason can be read). A disabled entry with nothing to say is skipped. */
-    navButtons(sub) {
-        const menuEl = this.host.nativeElement.querySelector('.strct-mb__menu');
-        if (!menuEl)
-            return [];
-        const sel = sub ? '.strct-mb__subitem' : '.strct-mb__item:not(.strct-mb__subitem)';
-        return Array.from(menuEl.querySelectorAll(sel)).filter((b) => b.getAttribute('aria-disabled') !== 'true' || b.hasAttribute('aria-describedby'));
+    /**
+     * Arrow keys step through the tour, mirrored under RTL. No shared direction
+     * helper exists (other components handle RTL in CSS only), so read the
+     * card's computed direction here.
+     */
+    onArrow(event, dir) {
+        event.preventDefault();
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        if ((dir === 'right') !== rtl)
+            this.next();
+        else
+            this.prev();
     }
-    onDocClick(event) {
-        if (this.openId() && !this.host.nativeElement.contains(event.target)) {
-            this.closeMenu(false);
-        }
+    /** Home/End jump to the first/last step. */
+    onHomeEnd(event, last) {
+        event.preventDefault();
+        this.index.set(last ? this.steps().length - 1 : 0);
+        this.scrollToTarget();
+        this.focusNextButton();
     }
-    onEscape(event) {
-        if (!this.openId())
-            return;
-        event.stopPropagation();
-        this.closeMenu(true);
+    scrollToTarget() {
+        setTimeout(() => {
+            const sel = this.steps()[this.index()]?.target;
+            if (sel)
+                document.querySelector(sel)?.scrollIntoView?.({ block: 'center' });
+            this.measureTick.update((n) => n + 1);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMenubar, isStandalone: true, selector: "strct-menubar", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape($event)" } }, ngImport: i0, template: `
-    <div class="strct-mb" role="menubar" [attr.aria-label]="ariaLabel()">
-      @for (menu of menus(); track menu.id; let i = $index) {
-        <div class="strct-mb__wrap">
-          <button
-            type="button"
-            class="strct-mb__top"
-            role="menuitem"
-            [class.strct-mb__top--open]="openId() === menu.id"
-            [attr.aria-haspopup]="'menu'"
-            [attr.aria-expanded]="openId() === menu.id"
-            [attr.tabindex]="i === focusIdx() ? 0 : -1"
-            (click)="toggleMenu(menu.id, i)"
-            (keydown)="onTopKey($event, i)"
-          >
-            {{ menu.label }}
-          </button>
-          @if (openId() === menu.id) {
-            <div
-              class="strct-mb__menu"
-              role="menu"
-              tabindex="-1"
-              [attr.aria-label]="menu.label"
-              (keydown)="onMenuKey($event, menu)"
-            >
-              @for (item of menu.items; track $index; let i = $index) {
-                @if (item.divider) {
-                  <div class="strct-mb__divider" role="separator"></div>
-                } @else {
-                  <div class="strct-mb__row">
-                    <button
-                      type="button"
-                      class="strct-mb__item"
-                      role="menuitem"
-                      [attr.data-idx]="i"
-                      [class.strct-mb__item--critical]="item.critical"
-                      [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
-                      [attr.aria-expanded]="item.children?.length ? subIdx() === i : null"
-                      [attr.aria-disabled]="item.disabled ? 'true' : null"
-                      [attr.aria-describedby]="item.hint ? hintId(menu.id, i) : null"
-                      [attr.title]="item.hint || null"
-                      (click)="onItemClick(menu, item, i)"
-                      (mouseenter)="onItemHover(item, i)"
-                    >
-                      @if (item.icon) {
-                        <strct-icon [name]="item.icon" [size]="13" />
-                      }
-                      {{ item.label }}
-                      @if (item.children?.length) {
-                        <strct-icon class="strct-mb__caret" name="chevronRight" [size]="12" />
-                      }
-                    </button>
-                    @if (item.hint) {
-                      <span [id]="hintId(menu.id, i)" hidden>{{ item.hint }}</span>
-                    }
-                    @if (subIdx() === i && item.children?.length) {
-                      <div class="strct-mb__submenu" role="menu" [attr.aria-label]="item.label">
-                        @for (sub of item.children; track $index; let j = $index) {
-                          @if (sub.divider) {
-                            <div class="strct-mb__divider" role="separator"></div>
-                          } @else {
-                            <button
-                              type="button"
-                              class="strct-mb__item strct-mb__subitem"
-                              role="menuitem"
-                              [class.strct-mb__item--critical]="sub.critical"
-                              [attr.aria-disabled]="sub.disabled ? 'true' : null"
-                              [attr.aria-describedby]="sub.hint ? hintId(menu.id, i, j) : null"
-                              [attr.title]="sub.hint || null"
-                              (click)="pick(menu, sub)"
-                            >
-                              @if (sub.icon) {
-                                <strct-icon [name]="sub.icon" [size]="13" />
-                              }
-                              {{ sub.label }}
-                            </button>
-                            @if (sub.hint) {
-                              <span [id]="hintId(menu.id, i, j)" hidden>{{ sub.hint }}</span>
-                            }
-                          }
-                        }
-                      </div>
-                    }
-                  </div>
-                }
-              }
-            </div>
+    card() {
+        return this.elementRef.nativeElement.querySelector('.strct-tour__card');
+    }
+    /** Move focus to the step's primary (Next/Done) action once the card has rendered. */
+    focusNextButton() {
+        setTimeout(() => {
+            if (!this.open())
+                return;
+            const card = this.card();
+            if (!card)
+                return;
+            const nav = card.querySelectorAll('.strct-tour__nav button');
+            const primary = nav[nav.length - 1];
+            if (primary)
+                primary.focus();
+            else
+                focusFirstIn(card);
+        });
+    }
+    onReflow() {
+        if (this.open())
+            this.measureTick.update((n) => n + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTour, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTour, isStandalone: true, selector: "strct-tour", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLabel: { classPropertyName: "skipLabel", publicName: "skipLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", finished: "finished", dismissed: "dismissed" }, host: { listeners: { "window:resize": "onReflow()", "window:scroll": "onReflow()" } }, ngImport: i0, template: `
+    @if (open() && current(); as step) {
+      <!-- Always the click-catcher; dims only when no ring (its shadow dims). -->
+      <div
+        class="strct-tour__backdrop"
+        [class.strct-tour__backdrop--dim]="!spot()"
+        (click)="close()"
+      ></div>
+      @if (spot(); as r) {
+        <div
+          class="strct-tour__ring"
+          [style.top.px]="r.top - 6"
+          [style.left.px]="r.left - 6"
+          [style.width.px]="r.width + 12"
+          [style.height.px]="r.height + 12"
+        ></div>
+      }
+      <div
+        class="strct-tour__card"
+        role="dialog"
+        [attr.aria-labelledby]="titleId"
+        [style.top.px]="cardPos().top"
+        [style.left.px]="cardPos().left"
+        (keydown.tab)="onTab($event)"
+        (keydown.shift.tab)="onTab($event)"
+        (keydown.escape)="onEscapeKey($event)"
+        (keydown.arrowleft)="onArrow($event, 'left')"
+        (keydown.arrowright)="onArrow($event, 'right')"
+        (keydown.home)="onHomeEnd($event, false)"
+        (keydown.end)="onHomeEnd($event, true)"
+      >
+        <div class="strct-tour__step">{{ index() + 1 }} / {{ steps().length }}</div>
+        <div class="strct-tour__title" [id]="titleId">{{ step.title }}</div>
+        <div class="strct-tour__body">{{ step.body }}</div>
+        <div class="strct-tour__nav">
+          <button strct-button size="sm" variant="flat" (click)="close()">
+            {{ skipLabel() }}
+          </button>
+          <span class="strct-tour__grow"></span>
+          @if (index() > 0) {
+            <button strct-button size="sm" variant="neutral" (click)="prev()">
+              {{ backLabel() }}
+            </button>
           }
+          <button strct-button size="sm" variant="primary" solid (click)="next()">
+            {{ index() === steps().length - 1 ? doneLabel() : nextLabel() }}
+          </button>
         </div>
-      }
-    </div>
-  `, isInline: true, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not([aria-disabled=true]){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not([aria-disabled=true]){background:var(--critical-bg)}.strct-mb__item[aria-disabled=true]{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+      </div>
+    }
+  `, isInline: true, styles: [".strct-tour__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:transparent}.strct-tour__backdrop--dim{background:var(--backdrop)}.strct-tour__ring{position:fixed;z-index:calc(var(--z-tour) + 1);border:2px solid var(--acc);border-radius:9px;box-shadow:0 0 0 4px var(--acc30),0 0 0 9999px var(--backdrop);pointer-events:none}.strct-tour__card{position:fixed;z-index:calc(var(--z-tour) + 2);width:300px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-tour__step{font-size:10.5px;font-weight:600;letter-spacing:.6px;color:var(--t3);margin-bottom:4px;font-variant-numeric:tabular-nums}.strct-tour__title{font-size:13.5px;font-weight:650;color:var(--t1);margin-bottom:6px}.strct-tour__body{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:12px}.strct-tour__nav{display:flex;align-items:center;gap:8px}.strct-tour__grow{flex:1}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMenubar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTour, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-menubar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <div class="strct-mb" role="menubar" [attr.aria-label]="ariaLabel()">
-      @for (menu of menus(); track menu.id; let i = $index) {
-        <div class="strct-mb__wrap">
-          <button
-            type="button"
-            class="strct-mb__top"
-            role="menuitem"
-            [class.strct-mb__top--open]="openId() === menu.id"
-            [attr.aria-haspopup]="'menu'"
-            [attr.aria-expanded]="openId() === menu.id"
-            [attr.tabindex]="i === focusIdx() ? 0 : -1"
-            (click)="toggleMenu(menu.id, i)"
-            (keydown)="onTopKey($event, i)"
-          >
-            {{ menu.label }}
+            args: [{ selector: 'strct-tour', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton], template: `
+    @if (open() && current(); as step) {
+      <!-- Always the click-catcher; dims only when no ring (its shadow dims). -->
+      <div
+        class="strct-tour__backdrop"
+        [class.strct-tour__backdrop--dim]="!spot()"
+        (click)="close()"
+      ></div>
+      @if (spot(); as r) {
+        <div
+          class="strct-tour__ring"
+          [style.top.px]="r.top - 6"
+          [style.left.px]="r.left - 6"
+          [style.width.px]="r.width + 12"
+          [style.height.px]="r.height + 12"
+        ></div>
+      }
+      <div
+        class="strct-tour__card"
+        role="dialog"
+        [attr.aria-labelledby]="titleId"
+        [style.top.px]="cardPos().top"
+        [style.left.px]="cardPos().left"
+        (keydown.tab)="onTab($event)"
+        (keydown.shift.tab)="onTab($event)"
+        (keydown.escape)="onEscapeKey($event)"
+        (keydown.arrowleft)="onArrow($event, 'left')"
+        (keydown.arrowright)="onArrow($event, 'right')"
+        (keydown.home)="onHomeEnd($event, false)"
+        (keydown.end)="onHomeEnd($event, true)"
+      >
+        <div class="strct-tour__step">{{ index() + 1 }} / {{ steps().length }}</div>
+        <div class="strct-tour__title" [id]="titleId">{{ step.title }}</div>
+        <div class="strct-tour__body">{{ step.body }}</div>
+        <div class="strct-tour__nav">
+          <button strct-button size="sm" variant="flat" (click)="close()">
+            {{ skipLabel() }}
           </button>
-          @if (openId() === menu.id) {
-            <div
-              class="strct-mb__menu"
-              role="menu"
-              tabindex="-1"
-              [attr.aria-label]="menu.label"
-              (keydown)="onMenuKey($event, menu)"
-            >
-              @for (item of menu.items; track $index; let i = $index) {
-                @if (item.divider) {
-                  <div class="strct-mb__divider" role="separator"></div>
-                } @else {
-                  <div class="strct-mb__row">
-                    <button
-                      type="button"
-                      class="strct-mb__item"
-                      role="menuitem"
-                      [attr.data-idx]="i"
-                      [class.strct-mb__item--critical]="item.critical"
-                      [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
-                      [attr.aria-expanded]="item.children?.length ? subIdx() === i : null"
-                      [attr.aria-disabled]="item.disabled ? 'true' : null"
-                      [attr.aria-describedby]="item.hint ? hintId(menu.id, i) : null"
-                      [attr.title]="item.hint || null"
-                      (click)="onItemClick(menu, item, i)"
-                      (mouseenter)="onItemHover(item, i)"
-                    >
-                      @if (item.icon) {
-                        <strct-icon [name]="item.icon" [size]="13" />
-                      }
-                      {{ item.label }}
-                      @if (item.children?.length) {
-                        <strct-icon class="strct-mb__caret" name="chevronRight" [size]="12" />
-                      }
-                    </button>
-                    @if (item.hint) {
-                      <span [id]="hintId(menu.id, i)" hidden>{{ item.hint }}</span>
-                    }
-                    @if (subIdx() === i && item.children?.length) {
-                      <div class="strct-mb__submenu" role="menu" [attr.aria-label]="item.label">
-                        @for (sub of item.children; track $index; let j = $index) {
-                          @if (sub.divider) {
-                            <div class="strct-mb__divider" role="separator"></div>
-                          } @else {
-                            <button
-                              type="button"
-                              class="strct-mb__item strct-mb__subitem"
-                              role="menuitem"
-                              [class.strct-mb__item--critical]="sub.critical"
-                              [attr.aria-disabled]="sub.disabled ? 'true' : null"
-                              [attr.aria-describedby]="sub.hint ? hintId(menu.id, i, j) : null"
-                              [attr.title]="sub.hint || null"
-                              (click)="pick(menu, sub)"
-                            >
-                              @if (sub.icon) {
-                                <strct-icon [name]="sub.icon" [size]="13" />
-                              }
-                              {{ sub.label }}
-                            </button>
-                            @if (sub.hint) {
-                              <span [id]="hintId(menu.id, i, j)" hidden>{{ sub.hint }}</span>
-                            }
-                          }
-                        }
-                      </div>
-                    }
-                  </div>
-                }
-              }
-            </div>
+          <span class="strct-tour__grow"></span>
+          @if (index() > 0) {
+            <button strct-button size="sm" variant="neutral" (click)="prev()">
+              {{ backLabel() }}
+            </button>
           }
+          <button strct-button size="sm" variant="primary" solid (click)="next()">
+            {{ index() === steps().length - 1 ? doneLabel() : nextLabel() }}
+          </button>
         </div>
-      }
-    </div>
-  `, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not([aria-disabled=true]){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not([aria-disabled=true]){background:var(--critical-bg)}.strct-mb__item[aria-disabled=true]{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"] }]
-        }], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], onDocClick: [{
+      </div>
+    }
+  `, styles: [".strct-tour__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:transparent}.strct-tour__backdrop--dim{background:var(--backdrop)}.strct-tour__ring{position:fixed;z-index:calc(var(--z-tour) + 1);border:2px solid var(--acc);border-radius:9px;box-shadow:0 0 0 4px var(--acc30),0 0 0 9999px var(--backdrop);pointer-events:none}.strct-tour__card{position:fixed;z-index:calc(var(--z-tour) + 2);width:300px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--b2);border-radius:9px;box-shadow:var(--shh)}.strct-tour__step{font-size:10.5px;font-weight:600;letter-spacing:.6px;color:var(--t3);margin-bottom:4px;font-variant-numeric:tabular-nums}.strct-tour__title{font-size:13.5px;font-weight:650;color:var(--t1);margin-bottom:6px}.strct-tour__body{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:12px}.strct-tour__nav{display:flex;align-items:center;gap:8px}.strct-tour__grow{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], skipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], onReflow: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
-            }], onEscape: [{
+                args: ['window:resize']
+            }, {
                 type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
+                args: ['window:scroll']
             }] } });
 
-function normalize(combo) {
-    return combo
-        .toLowerCase()
-        .split('+')
-        .map((p) => p.trim())
-        .sort()
-        .join('+');
-}
-function comboOf(event) {
-    const parts = [];
-    if (event.ctrlKey)
-        parts.push('ctrl');
-    if (event.metaKey)
-        parts.push('meta');
-    if (event.altKey)
-        parts.push('alt');
-    if (event.shiftKey)
-        parts.push('shift');
-    parts.push(event.key.toLowerCase());
-    return parts.sort().join('+');
-}
-/** `mod` matches Ctrl (and ⌘ on mac keyboards) — expand to both. */
-function expand(combo) {
-    const n = combo.toLowerCase();
-    if (!n.includes('mod'))
-        return [normalize(n)];
-    return [normalize(n.replace('mod', 'ctrl')), normalize(n.replace('mod', 'meta'))];
-}
+let menubarCounter = 0;
 /**
- * Application hotkeys, centrally registered so they are discoverable — the
- * Blueprint pattern:
+ * Horizontal menubar — the application-menu strip ("File · Edit · View") for
+ * dense tool-style consoles:
  *
- *   private hotkeys = inject(StrctHotkeysService);
- *   ngOnInit() { this.dispose = this.hotkeys.register(
- *     { combo: 'mod+k', description: 'Open command palette', group: 'Global',
- *       handler: () => this.palette.open() }); }
+ *   <strct-menubar [menus]="menus" (picked)="run($event)" />
  *
- * Combos: `'a'`, `'shift+?'`, `'ctrl+k'`, `'meta+shift+p'`, `'mod+k'` (mod = Ctrl/⌘).
- * Plain-key combos are suppressed while typing in inputs / textareas /
- * contenteditable; modifier combos always fire. Pair with
- * `<strct-hotkeys-help/>` for the ⌘/ ("?") cheatsheet overlay.
+ * Click (or Enter/Down) opens a menu and focus moves into it; Left/Right move
+ * across the bar and, while open, switch the open menu (the APG menubar
+ * convention). Up/Down (+Home/End) rove the open menu, Right/Left enter and
+ * leave an item's one-level `children` submenu. Escape and outside click
+ * close, returning focus to the bar. `(picked)` carries `{ menu, item }`.
  */
-class StrctHotkeysService {
-    registry = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
-    /** All registered hotkeys (for the help overlay). */
-    hotkeys = this.registry.asReadonly();
-    listener = (event) => this.onKeydown(event);
-    constructor() {
-        document.addEventListener('keydown', this.listener);
-    }
-    /** Register a hotkey; the returned function unregisters it. */
-    register(hotkey) {
-        this.registry.update((list) => [...list, hotkey]);
-        return () => this.registry.update((list) => list.filter((h) => h !== hotkey));
+class StrctMenubar {
+    host = inject(ElementRef);
+    /** Top-level menus. */
+    menus = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the bar (localizable). */
+    ariaLabel = input('Application menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** A menu entry was chosen. */
+    picked = output();
+    openId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    focusIdx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusIdx" }] : /* istanbul ignore next */ []));
+    /** Index of the item whose one-level submenu is open. */
+    subIdx = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subIdx" }] : /* istanbul ignore next */ []));
+    /** Top-level button that opened the menu — focus returns here on close. */
+    trigger = null;
+    toggleMenu(id, i) {
+        this.focusIdx.set(i);
+        if (this.openId() === id) {
+            this.closeMenu(false);
+        }
+        else {
+            this.trigger = saveFocusedElement();
+            this.openId.set(id);
+            this.subIdx.set(null);
+        }
     }
-    onKeydown(event) {
-        const combo = comboOf(event);
-        const typing = isTyping(event);
-        for (const hk of this.registry()) {
-            if (!expand(hk.combo).includes(combo))
-                continue;
-            // While typing, only modifier combos may fire.
-            if (typing && !(event.ctrlKey || event.metaKey || event.altKey))
-                continue;
-            event.preventDefault();
-            hk.handler(event);
+    onItemClick(menu, item, i) {
+        if (item.disabled)
+            return;
+        if (item.children?.length) {
+            this.subIdx.set(this.subIdx() === i ? null : i);
             return;
         }
+        this.pick(menu, item);
     }
-    ngOnDestroy() {
-        document.removeEventListener('keydown', this.listener);
+    onItemHover(item, i) {
+        if (item.disabled)
+            return;
+        if (item.children?.length)
+            this.subIdx.set(i);
+        else if (this.subIdx() != null)
+            this.subIdx.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-function isTyping(event) {
-    const el = event.target;
-    if (!el)
-        return false;
-    return (el.tagName === 'INPUT' ||
-        el.tagName === 'TEXTAREA' ||
-        el.tagName === 'SELECT' ||
-        el.isContentEditable);
-}
-/**
- * The hotkey cheatsheet overlay. Mount once near the app root; it registers
- * `shift+?` (typed as `?`) itself and lists everything in the service, grouped:
- *
- *   <strct-hotkeys-help />
- */
-class StrctHotkeysHelp {
-    service = inject(StrctHotkeysService);
-    host = inject((ElementRef));
-    /** Overlay visibility (two-way; `?` toggles it too). */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /** Localizable strings. */
-    title = input('Keyboard shortcuts', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    emptyText = input('No shortcuts registered.', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
-    /** Accessible label of the × close button (localizable). */
-    closeLabel = input('Close', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    /** Element that had focus before the overlay opened, restored on close. */
-    previousActive = null;
-    grouped = computed(() => {
-        const groups = new Map();
-        for (const hk of this.service.hotkeys()) {
-            const name = hk.group ?? 'General';
-            const list = groups.get(name);
-            if (list)
-                list.push(hk);
-            else
-                groups.set(name, [hk]);
-        }
-        return [...groups.entries()].map(([name, keys]) => ({ name, keys }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
-    constructor() {
-        const dispose = this.service.register({
-            combo: 'shift+?',
-            description: 'Show this help',
-            group: 'General',
-            handler: () => this.open.update((v) => !v),
-        });
-        inject(DestroyRef).onDestroy(dispose);
-        // Focus lifecycle: remember the trigger, move focus into the dialog once
-        // it has rendered, and hand focus back on close.
-        effect(() => {
-            if (this.open()) {
-                this.previousActive = saveFocusedElement();
-                setTimeout(() => {
-                    const dialog = this.host.nativeElement.querySelector('.strct-hkh');
-                    if (dialog)
-                        focusFirstIn(dialog);
-                });
+    pick(menu, item) {
+        if (item.disabled)
+            return;
+        this.closeMenu(true);
+        item.action?.(item.data);
+        this.picked.emit({ menu, item });
+    }
+    onTopKey(event, i) {
+        const menus = this.menus();
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            if (this.openId()) {
+                // While a menu is open, moving across the bar switches the open menu.
+                this.switchTop(event.key === 'ArrowRight' ? 1 : -1);
             }
             else {
-                restoreFocus(this.previousActive);
-                this.previousActive = null;
+                const dir = event.key === 'ArrowRight' ? 1 : -1;
+                const next = (i + dir + menus.length) % menus.length;
+                this.focusIdx.set(next);
+                setTimeout(() => this.topButtons()[next]?.focus());
             }
-        });
+        }
+        else if (event.key === 'ArrowDown' || event.key === 'Enter') {
+            event.preventDefault();
+            this.trigger = saveFocusedElement();
+            this.openId.set(menus[i].id);
+            this.subIdx.set(null);
+            setTimeout(() => {
+                const menuEl = this.host.nativeElement.querySelector('.strct-mb__menu');
+                if (menuEl)
+                    focusFirstIn(menuEl);
+            });
+        }
+        else if (event.key === 'Escape' && this.openId()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeMenu(true);
+        }
     }
-    // Escape is handled locally — registering it in the service would swallow
-    // every Escape in the app (the service preventDefaults on match).
-    onEscape(event) {
-        if (!this.open())
-            return;
-        // Document-level: stopImmediatePropagation so a host modal/drawer with its
-        // own document listener doesn't also see the Escape the overlay consumed.
-        event.stopImmediatePropagation();
-        this.open.set(false);
+    onMenuKey(event, menu) {
+        const active = document.activeElement;
+        const inSub = !!active?.classList.contains('strct-mb__subitem');
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const list = this.navButtons(inSub);
+                const dir = event.key === 'ArrowDown' ? 1 : -1;
+                const cur = list.indexOf(active);
+                list[(cur + dir + list.length) % list.length]?.focus();
+                break;
+            }
+            case 'Home':
+            case 'End': {
+                event.preventDefault();
+                event.stopPropagation();
+                const list = this.navButtons(inSub);
+                (event.key === 'Home' ? list[0] : list[list.length - 1])?.focus();
+                break;
+            }
+            case 'ArrowRight': {
+                if (inSub)
+                    break; // deepest level — nothing further to open
+                event.preventDefault();
+                event.stopPropagation();
+                const idx = Number(active?.getAttribute('data-idx'));
+                if (menu.items[idx]?.children?.length && !menu.items[idx].disabled) {
+                    this.subIdx.set(idx);
+                    setTimeout(() => this.navButtons(true)[0]?.focus());
+                }
+                else {
+                    this.switchTop(1);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                event.stopPropagation();
+                if (inSub) {
+                    const parent = this.subIdx();
+                    this.subIdx.set(null);
+                    this.host.nativeElement
+                        .querySelector(`.strct-mb__item[data-idx="${parent}"]`)
+                        ?.focus();
+                }
+                else if (this.subIdx() != null) {
+                    this.subIdx.set(null);
+                }
+                else {
+                    this.switchTop(-1);
+                }
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                event.stopPropagation();
+                this.closeMenu(true);
+                break;
+            }
+        }
     }
-    parts(combo) {
-        return combo.split('+').map((p) => {
-            const map = {
-                mod: '⌘/Ctrl',
-                meta: '⌘',
-                ctrl: 'Ctrl',
-                alt: 'Alt',
-                shift: 'Shift',
-                escape: 'Esc',
-            };
-            return map[p.trim().toLowerCase()] ?? p.trim().toUpperCase();
-        });
+    /** Switch the open menu to the next/previous top-level entry; focus follows. */
+    switchTop(dir) {
+        const menus = this.menus();
+        const next = (this.focusIdx() + dir + menus.length) % menus.length;
+        this.focusIdx.set(next);
+        this.openId.set(menus[next].id);
+        this.subIdx.set(null);
+        setTimeout(() => this.topButtons()[next]?.focus());
+    }
+    closeMenu(returnFocus) {
+        this.openId.set(null);
+        this.subIdx.set(null);
+        if (returnFocus)
+            restoreFocus(this.trigger);
+        this.trigger = null;
+    }
+    uid = ++menubarCounter;
+    hintId(menuId, i, j) {
+        // menu ids are consumer data; aria-describedby splits on whitespace.
+        const menu = menuId.replace(/\s+/g, '_');
+        return `strct-mb-${this.uid}-${menu}-${i}${j == null ? '' : '-' + j}-hint`;
+    }
+    topButtons() {
+        return Array.from(this.host.nativeElement.querySelectorAll('.strct-mb__top'));
+    }
+    /** Keyboard-reachable item buttons of the open menu — either its items or the
+     *  open submenu's: enabled ones, plus disabled ones that carry a hint (so the
+     *  reason can be read). A disabled entry with nothing to say is skipped. */
+    navButtons(sub) {
+        const menuEl = this.host.nativeElement.querySelector('.strct-mb__menu');
+        if (!menuEl)
+            return [];
+        const sel = sub ? '.strct-mb__subitem' : '.strct-mb__item:not(.strct-mb__subitem)';
+        return Array.from(menuEl.querySelectorAll(sel)).filter((b) => b.getAttribute('aria-disabled') !== 'true' || b.hasAttribute('aria-describedby'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysHelp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHotkeysHelp, isStandalone: true, selector: "strct-hotkeys-help", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" } }, ngImport: i0, template: `
-    @if (open()) {
-      <div class="strct-hkh__backdrop" (click)="open.set(false)"></div>
-      <div class="strct-hkh" role="dialog" aria-modal="true" [attr.aria-label]="title()">
-        <div class="strct-hkh__head">
-          <span class="strct-hkh__title">{{ title() }}</span>
-          <span class="strct-hkh__headside">
-            <strct-kbd>?</strct-kbd>
-            <button
-              type="button"
-              class="strct-hkh__close"
-              [attr.aria-label]="closeLabel()"
-              (click)="open.set(false)"
-            >
-              <strct-icon name="close" [size]="14" />
-            </button>
-          </span>
-        </div>
-        @for (group of grouped(); track group.name) {
-          <div class="strct-hkh__group">
-            <div class="strct-hkh__groupname">{{ group.name }}</div>
-            @for (hk of group.keys; track hk.combo + hk.description) {
-              <div class="strct-hkh__row">
-                <span class="strct-hkh__desc">{{ hk.description }}</span>
-                <span class="strct-hkh__keys">
-                  @for (part of parts(hk.combo); track $index) {
-                    <strct-kbd>{{ part }}</strct-kbd>
-                  }
-                </span>
-              </div>
-            }
-          </div>
-        } @empty {
-          <p class="strct-hkh__empty">{{ emptyText() }}</p>
+    onDocClick(event) {
+        if (this.openId() && !this.host.nativeElement.contains(event.target)) {
+            this.closeMenu(false);
         }
-      </div>
     }
-  `, isInline: true, styles: [".strct-hkh__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:var(--backdrop)}.strct-hkh{position:fixed;z-index:calc(var(--z-tour) + 1);top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh)}.strct-hkh__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.strct-hkh__title{font-size:13.5px;font-weight:650;color:var(--t1)}.strct-hkh__headside{display:inline-flex;align-items:center;gap:8px}.strct-hkh__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-hkh__close:hover{color:var(--t1);background:var(--bg-3)}.strct-hkh__group{margin-bottom:12px}.strct-hkh__groupname{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-hkh__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.strct-hkh__desc{font-size:12.5px;color:var(--t1)}.strct-hkh__keys{display:inline-flex;gap:4px}.strct-hkh__empty{font-size:12.5px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    onEscape(event) {
+        if (!this.openId())
+            return;
+        event.stopPropagation();
+        this.closeMenu(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMenubar, isStandalone: true, selector: "strct-menubar", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape($event)" } }, ngImport: i0, template: `
+    <div class="strct-mb" role="menubar" [attr.aria-label]="ariaLabel()">
+      @for (menu of menus(); track menu.id; let i = $index) {
+        <div class="strct-mb__wrap">
+          <button
+            type="button"
+            class="strct-mb__top"
+            role="menuitem"
+            [class.strct-mb__top--open]="openId() === menu.id"
+            [attr.aria-haspopup]="'menu'"
+            [attr.aria-expanded]="openId() === menu.id"
+            [attr.tabindex]="i === focusIdx() ? 0 : -1"
+            (click)="toggleMenu(menu.id, i)"
+            (keydown)="onTopKey($event, i)"
+          >
+            {{ menu.label }}
+          </button>
+          @if (openId() === menu.id) {
+            <div
+              class="strct-mb__menu"
+              role="menu"
+              tabindex="-1"
+              [attr.aria-label]="menu.label"
+              (keydown)="onMenuKey($event, menu)"
+            >
+              @for (item of menu.items; track $index; let i = $index) {
+                @if (item.divider) {
+                  <div class="strct-mb__divider" role="separator"></div>
+                } @else {
+                  <div class="strct-mb__row">
+                    <button
+                      type="button"
+                      class="strct-mb__item"
+                      role="menuitem"
+                      [attr.data-idx]="i"
+                      [class.strct-mb__item--critical]="item.critical"
+                      [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
+                      [attr.aria-expanded]="item.children?.length ? subIdx() === i : null"
+                      [attr.aria-disabled]="item.disabled ? 'true' : null"
+                      [attr.aria-describedby]="item.hint ? hintId(menu.id, i) : null"
+                      [attr.title]="item.hint || null"
+                      (click)="onItemClick(menu, item, i)"
+                      (mouseenter)="onItemHover(item, i)"
+                    >
+                      @if (item.icon) {
+                        <strct-icon [name]="item.icon" [size]="13" />
+                      }
+                      {{ item.label }}
+                      @if (item.children?.length) {
+                        <strct-icon class="strct-mb__caret" name="chevronRight" [size]="12" />
+                      }
+                    </button>
+                    @if (item.hint) {
+                      <span [id]="hintId(menu.id, i)" hidden>{{ item.hint }}</span>
+                    }
+                    @if (subIdx() === i && item.children?.length) {
+                      <div class="strct-mb__submenu" role="menu" [attr.aria-label]="item.label">
+                        @for (sub of item.children; track $index; let j = $index) {
+                          @if (sub.divider) {
+                            <div class="strct-mb__divider" role="separator"></div>
+                          } @else {
+                            <button
+                              type="button"
+                              class="strct-mb__item strct-mb__subitem"
+                              role="menuitem"
+                              [class.strct-mb__item--critical]="sub.critical"
+                              [attr.aria-disabled]="sub.disabled ? 'true' : null"
+                              [attr.aria-describedby]="sub.hint ? hintId(menu.id, i, j) : null"
+                              [attr.title]="sub.hint || null"
+                              (click)="pick(menu, sub)"
+                            >
+                              @if (sub.icon) {
+                                <strct-icon [name]="sub.icon" [size]="13" />
+                              }
+                              {{ sub.label }}
+                            </button>
+                            @if (sub.hint) {
+                              <span [id]="hintId(menu.id, i, j)" hidden>{{ sub.hint }}</span>
+                            }
+                          }
+                        }
+                      </div>
+                    }
+                  </div>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not([aria-disabled=true]){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not([aria-disabled=true]){background:var(--critical-bg)}.strct-mb__item[aria-disabled=true]{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysHelp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMenubar, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-hotkeys-help', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctKbd], template: `
-    @if (open()) {
-      <div class="strct-hkh__backdrop" (click)="open.set(false)"></div>
-      <div class="strct-hkh" role="dialog" aria-modal="true" [attr.aria-label]="title()">
-        <div class="strct-hkh__head">
-          <span class="strct-hkh__title">{{ title() }}</span>
-          <span class="strct-hkh__headside">
-            <strct-kbd>?</strct-kbd>
-            <button
-              type="button"
-              class="strct-hkh__close"
-              [attr.aria-label]="closeLabel()"
-              (click)="open.set(false)"
+            args: [{ selector: 'strct-menubar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <div class="strct-mb" role="menubar" [attr.aria-label]="ariaLabel()">
+      @for (menu of menus(); track menu.id; let i = $index) {
+        <div class="strct-mb__wrap">
+          <button
+            type="button"
+            class="strct-mb__top"
+            role="menuitem"
+            [class.strct-mb__top--open]="openId() === menu.id"
+            [attr.aria-haspopup]="'menu'"
+            [attr.aria-expanded]="openId() === menu.id"
+            [attr.tabindex]="i === focusIdx() ? 0 : -1"
+            (click)="toggleMenu(menu.id, i)"
+            (keydown)="onTopKey($event, i)"
+          >
+            {{ menu.label }}
+          </button>
+          @if (openId() === menu.id) {
+            <div
+              class="strct-mb__menu"
+              role="menu"
+              tabindex="-1"
+              [attr.aria-label]="menu.label"
+              (keydown)="onMenuKey($event, menu)"
             >
-              <strct-icon name="close" [size]="14" />
-            </button>
-          </span>
-        </div>
-        @for (group of grouped(); track group.name) {
-          <div class="strct-hkh__group">
-            <div class="strct-hkh__groupname">{{ group.name }}</div>
-            @for (hk of group.keys; track hk.combo + hk.description) {
-              <div class="strct-hkh__row">
-                <span class="strct-hkh__desc">{{ hk.description }}</span>
-                <span class="strct-hkh__keys">
-                  @for (part of parts(hk.combo); track $index) {
-                    <strct-kbd>{{ part }}</strct-kbd>
-                  }
-                </span>
-              </div>
-            }
-          </div>
-        } @empty {
-          <p class="strct-hkh__empty">{{ emptyText() }}</p>
-        }
-      </div>
-    }
-  `, styles: [".strct-hkh__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:var(--backdrop)}.strct-hkh{position:fixed;z-index:calc(var(--z-tour) + 1);top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh)}.strct-hkh__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.strct-hkh__title{font-size:13.5px;font-weight:650;color:var(--t1)}.strct-hkh__headside{display:inline-flex;align-items:center;gap:8px}.strct-hkh__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-hkh__close:hover{color:var(--t1);background:var(--bg-3)}.strct-hkh__group{margin-bottom:12px}.strct-hkh__groupname{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-hkh__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.strct-hkh__desc{font-size:12.5px;color:var(--t1)}.strct-hkh__keys{display:inline-flex;gap:4px}.strct-hkh__empty{font-size:12.5px;color:var(--t3)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], onEscape: [{
+              @for (item of menu.items; track $index; let i = $index) {
+                @if (item.divider) {
+                  <div class="strct-mb__divider" role="separator"></div>
+                } @else {
+                  <div class="strct-mb__row">
+                    <button
+                      type="button"
+                      class="strct-mb__item"
+                      role="menuitem"
+                      [attr.data-idx]="i"
+                      [class.strct-mb__item--critical]="item.critical"
+                      [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
+                      [attr.aria-expanded]="item.children?.length ? subIdx() === i : null"
+                      [attr.aria-disabled]="item.disabled ? 'true' : null"
+                      [attr.aria-describedby]="item.hint ? hintId(menu.id, i) : null"
+                      [attr.title]="item.hint || null"
+                      (click)="onItemClick(menu, item, i)"
+                      (mouseenter)="onItemHover(item, i)"
+                    >
+                      @if (item.icon) {
+                        <strct-icon [name]="item.icon" [size]="13" />
+                      }
+                      {{ item.label }}
+                      @if (item.children?.length) {
+                        <strct-icon class="strct-mb__caret" name="chevronRight" [size]="12" />
+                      }
+                    </button>
+                    @if (item.hint) {
+                      <span [id]="hintId(menu.id, i)" hidden>{{ item.hint }}</span>
+                    }
+                    @if (subIdx() === i && item.children?.length) {
+                      <div class="strct-mb__submenu" role="menu" [attr.aria-label]="item.label">
+                        @for (sub of item.children; track $index; let j = $index) {
+                          @if (sub.divider) {
+                            <div class="strct-mb__divider" role="separator"></div>
+                          } @else {
+                            <button
+                              type="button"
+                              class="strct-mb__item strct-mb__subitem"
+                              role="menuitem"
+                              [class.strct-mb__item--critical]="sub.critical"
+                              [attr.aria-disabled]="sub.disabled ? 'true' : null"
+                              [attr.aria-describedby]="sub.hint ? hintId(menu.id, i, j) : null"
+                              [attr.title]="sub.hint || null"
+                              (click)="pick(menu, sub)"
+                            >
+                              @if (sub.icon) {
+                                <strct-icon [name]="sub.icon" [size]="13" />
+                              }
+                              {{ sub.label }}
+                            </button>
+                            @if (sub.hint) {
+                              <span [id]="hintId(menu.id, i, j)" hidden>{{ sub.hint }}</span>
+                            }
+                          }
+                        }
+                      </div>
+                    }
+                  </div>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not([aria-disabled=true]){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not([aria-disabled=true]){background:var(--critical-bg)}.strct-mb__item[aria-disabled=true]{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-let reorderCounter = 0;
+function normalize(combo) {
+    return combo
+        .toLowerCase()
+        .split('+')
+        .map((p) => p.trim())
+        .sort()
+        .join('+');
+}
+function comboOf(event) {
+    const parts = [];
+    if (event.ctrlKey)
+        parts.push('ctrl');
+    if (event.metaKey)
+        parts.push('meta');
+    if (event.altKey)
+        parts.push('alt');
+    if (event.shiftKey)
+        parts.push('shift');
+    parts.push(event.key.toLowerCase());
+    return parts.sort().join('+');
+}
+/** `mod` matches Ctrl (and ⌘ on mac keyboards) — expand to both. */
+function expand(combo) {
+    const n = combo.toLowerCase();
+    if (!n.includes('mod'))
+        return [normalize(n)];
+    return [normalize(n.replace('mod', 'ctrl')), normalize(n.replace('mod', 'meta'))];
+}
 /**
- * List drag-reorder primitive — the consumer owns the array:
- *
- *   <ul strctReorder (reordered)="move($event)">
- *     @for (s of steps(); track s.id) {
- *       <li strctReorderItem>{{ s.label }}</li>
- *     }
- *   </ul>
+ * Application hotkeys, centrally registered so they are discoverable — the
+ * Blueprint pattern:
  *
- *   move({ from, to }: StrctReorderEvent) {
- *     this.steps.update((s) => { const c = [...s]; c.splice(to, 0, ...c.splice(from, 1)); return c; });
- *   }
+ *   private hotkeys = inject(StrctHotkeysService);
+ *   ngOnInit() { this.dispose = this.hotkeys.register(
+ *     { combo: 'mod+k', description: 'Open command palette', group: 'Global',
+ *       handler: () => this.palette.open() }); }
  *
- * Items are HTML5-draggable; keyboard reorder is Alt+ArrowUp / Alt+ArrowDown
- * on the focused item (items get `tabindex="0"` unless they already manage
- * focus). Indexes are positions among the `strctReorderItem` siblings.
- * Completed moves are announced in a live region (see `announcement`) and
- * items reference the sr-only `instructions` via `aria-describedby`.
+ * Combos: `'a'`, `'shift+?'`, `'ctrl+k'`, `'meta+shift+p'`, `'mod+k'` (mod = Ctrl/⌘).
+ * Plain-key combos are suppressed while typing in inputs / textareas /
+ * contenteditable; modifier combos always fire. Pair with
+ * `<strct-hotkeys-help/>` for the ⌘/ ("?") cheatsheet overlay.
  */
-class StrctReorder {
-    host = inject(ElementRef);
-    renderer = inject(Renderer2);
-    doc = inject(DOCUMENT);
-    announcer = inject(StrctAnnouncer);
-    /** Emits when a drag or keyboard move completes. */
-    reordered = output();
-    /** Disable all reordering (display-only mode). */
-    reorderDisabled = input(false, { ...(ngDevMode ? { debugName: "reorderDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Keyboard instructions (localizable), rendered sr-only and referenced by
-     * every item's `aria-describedby`. Set to '' to opt out.
-     */
-    instructions = input('Press Alt+ArrowUp or Alt+ArrowDown to move this item', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "instructions" }] : /* istanbul ignore next */ []));
-    /**
-     * Builds the live-region announcement after a move (localizable):
-     * (moved item's text, new 1-based position, item count).
-     */
-    announcement = input((label, position, total) => `Moved ${label} to position ${position} of ${total}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
-    dragIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
-    overIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overIndex" }] : /* istanbul ignore next */ []));
-    /** Id of the sr-only instructions element the items point to. */
-    instructionsId = `strct-reorder-hint-${++reorderCounter}`;
-    hint = null;
+class StrctHotkeysService {
+    registry = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    /** All registered hotkeys (for the help overlay). */
+    hotkeys = this.registry.asReadonly();
+    listener = (event) => this.onKeydown(event);
     constructor() {
-        // Keep the sr-only instructions element in sync with the input.
-        effect(() => {
-            const text = this.instructions();
-            if (text && !this.hint) {
-                this.hint = this.renderer.createElement('span');
-                this.renderer.setAttribute(this.hint, 'id', this.instructionsId);
-                this.hint.style.cssText =
-                    'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
-                this.renderer.appendChild(this.doc.body, this.hint);
-            }
-            if (this.hint)
-                this.hint.textContent = text;
-        });
-    }
-    items() {
-        return [...this.host.nativeElement.querySelectorAll('[strctReorderItem]')];
-    }
-    indexOf(el) {
-        return this.items().indexOf(el);
-    }
-    commit(from, to) {
-        this.dragIndex.set(null);
-        this.overIndex.set(null);
-        if (from < 0 || to < 0 || from === to)
-            return;
-        const label = this.items()[from]?.textContent?.trim() ?? '';
-        this.reordered.emit({ from, to });
-        this.announcer.announce(this.announcement()(label, to + 1, this.items().length));
-    }
-    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)
-            return;
-        if (event.target.closest('[strctReorderItem]'))
-            return;
-        event.preventDefault();
+        document.addEventListener('keydown', this.listener);
     }
-    onContainerDrop(event) {
-        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);
+    /** Register a hotkey; the returned function unregisters it. */
+    register(hotkey) {
+        this.registry.update((list) => [...list, hotkey]);
+        return () => this.registry.update((list) => list.filter((h) => h !== hotkey));
     }
-    onDragLeave(event) {
-        // dragleave also fires when moving between children; only clear the
-        // highlight when the drag truly leaves the container.
-        const next = event.relatedTarget;
-        if (next && this.host.nativeElement.contains(next))
+    onKeydown(event) {
+        const combo = comboOf(event);
+        const typing = isTyping(event);
+        for (const hk of this.registry()) {
+            if (!expand(hk.combo).includes(combo))
+                continue;
+            // While typing, only modifier combos may fire.
+            if (typing && !(event.ctrlKey || event.metaKey || event.altKey))
+                continue;
+            event.preventDefault();
+            hk.handler(event);
             return;
-        this.overIndex.set(null);
+        }
     }
     ngOnDestroy() {
-        if (this.hint) {
-            this.renderer.removeChild(this.doc.body, this.hint);
-            this.hint = null;
-        }
+        document.removeEventListener('keydown', this.listener);
     }
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysService, providedIn: 'root' });
 }
-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: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onContainerDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }] } });
-/** One draggable row inside a `[strctReorder]` container. */
-class StrctReorderItem {
-    list = inject(StrctReorder);
-    el = inject(ElementRef);
-    // Captured before our own binding ever writes tabindex, so it never flips.
-    hadOwnTabindex = this.el.nativeElement.hasAttribute('tabindex');
-    hostTabindex() {
-        return this.hadOwnTabindex ? null : 0;
-    }
-    isDragging() {
-        return this.list.dragIndex() === this.index();
-    }
-    isOver() {
-        return this.list.overIndex() === this.index() && this.list.dragIndex() !== this.index();
-    }
-    index() {
-        return this.list.indexOf(this.el.nativeElement);
-    }
-    onDragStart(event) {
-        if (this.list.reorderDisabled())
-            return;
-        this.list.dragIndex.set(this.index());
-        event.dataTransfer?.setData('text/plain', String(this.index()));
-        if (event.dataTransfer)
-            event.dataTransfer.effectAllowed = 'move';
-    }
-    onDragOver(event) {
-        if (this.list.dragIndex() == null)
-            return;
-        event.preventDefault();
-        this.list.overIndex.set(this.index());
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+function isTyping(event) {
+    const el = event.target;
+    if (!el)
+        return false;
+    return (el.tagName === 'INPUT' ||
+        el.tagName === 'TEXTAREA' ||
+        el.tagName === 'SELECT' ||
+        el.isContentEditable);
+}
+/**
+ * The hotkey cheatsheet overlay. Mount once near the app root; it registers
+ * `shift+?` (typed as `?`) itself and lists everything in the service, grouped:
+ *
+ *   <strct-hotkeys-help />
+ */
+class StrctHotkeysHelp {
+    service = inject(StrctHotkeysService);
+    host = inject((ElementRef));
+    /** Overlay visibility (two-way; `?` toggles it too). */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    title = input('Keyboard shortcuts', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    emptyText = input('No shortcuts registered.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the × close button (localizable). */
+    closeLabel = input('Close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    /** Element that had focus before the overlay opened, restored on close. */
+    previousActive = null;
+    grouped = computed(() => {
+        const groups = new Map();
+        for (const hk of this.service.hotkeys()) {
+            const name = hk.group ?? 'General';
+            const list = groups.get(name);
+            if (list)
+                list.push(hk);
+            else
+                groups.set(name, [hk]);
+        }
+        return [...groups.entries()].map(([name, keys]) => ({ name, keys }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const dispose = this.service.register({
+            combo: 'shift+?',
+            description: 'Show this help',
+            group: 'General',
+            handler: () => this.open.update((v) => !v),
+        });
+        inject(DestroyRef).onDestroy(dispose);
+        // Focus lifecycle: remember the trigger, move focus into the dialog once
+        // it has rendered, and hand focus back on close.
+        effect(() => {
+            if (this.open()) {
+                this.previousActive = saveFocusedElement();
+                setTimeout(() => {
+                    const dialog = this.host.nativeElement.querySelector('.strct-hkh');
+                    if (dialog)
+                        focusFirstIn(dialog);
+                });
+            }
+            else {
+                restoreFocus(this.previousActive);
+                this.previousActive = null;
+            }
+        });
     }
-    onDrop(event) {
-        event.preventDefault();
-        const from = this.list.dragIndex();
-        if (from == null)
+    // Escape is handled locally — registering it in the service would swallow
+    // every Escape in the app (the service preventDefaults on match).
+    onEscape(event) {
+        if (!this.open())
             return;
-        this.list.commit(from, this.index());
+        // Document-level: stopImmediatePropagation so a host modal/drawer with its
+        // own document listener doesn't also see the Escape the overlay consumed.
+        event.stopImmediatePropagation();
+        this.open.set(false);
     }
-    onDragEnd() {
-        this.list.dragIndex.set(null);
-        this.list.overIndex.set(null);
+    parts(combo) {
+        return combo.split('+').map((p) => {
+            const map = {
+                mod: '⌘/Ctrl',
+                meta: '⌘',
+                ctrl: 'Ctrl',
+                alt: 'Alt',
+                shift: 'Shift',
+                escape: 'Esc',
+            };
+            return map[p.trim().toLowerCase()] ?? p.trim().toUpperCase();
+        });
     }
-    onKeydown(event) {
-        if (this.list.reorderDisabled() || !event.altKey)
-            return;
-        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
-            return;
-        event.preventDefault();
-        const from = this.index();
-        const to = event.key === 'ArrowUp' ? from - 1 : from + 1;
-        if (to < 0 || to >= this.list.items().length)
-            return;
-        this.list.commit(from, to);
-        // Keep focus on the moved item after the consumer re-renders.
-        setTimeout(() => this.list.items()[to]?.focus());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysHelp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHotkeysHelp, isStandalone: true, selector: "strct-hotkeys-help", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" } }, ngImport: i0, template: `
+    @if (open()) {
+      <div class="strct-hkh__backdrop" (click)="open.set(false)"></div>
+      <div class="strct-hkh" role="dialog" aria-modal="true" [attr.aria-label]="title()">
+        <div class="strct-hkh__head">
+          <span class="strct-hkh__title">{{ title() }}</span>
+          <span class="strct-hkh__headside">
+            <strct-kbd>?</strct-kbd>
+            <button
+              type="button"
+              class="strct-hkh__close"
+              [attr.aria-label]="closeLabel()"
+              (click)="open.set(false)"
+            >
+              <strct-icon name="close" [size]="14" />
+            </button>
+          </span>
+        </div>
+        @for (group of grouped(); track group.name) {
+          <div class="strct-hkh__group">
+            <div class="strct-hkh__groupname">{{ group.name }}</div>
+            @for (hk of group.keys; track hk.combo + hk.description) {
+              <div class="strct-hkh__row">
+                <span class="strct-hkh__desc">{{ hk.description }}</span>
+                <span class="strct-hkh__keys">
+                  @for (part of parts(hk.combo); track $index) {
+                    <strct-kbd>{{ part }}</strct-kbd>
+                  }
+                </span>
+              </div>
+            }
+          </div>
+        } @empty {
+          <p class="strct-hkh__empty">{{ emptyText() }}</p>
+        }
+      </div>
     }
-    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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[strctReorderItem]',
-                    host: {
-                        '[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',
-                    },
-                }]
-        }], propDecorators: { onDragStart: [{
-                type: HostListener,
-                args: ['dragstart', ['$event']]
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }], onDragEnd: [{
-                type: HostListener,
-                args: ['dragend']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-/**
- * Default accessible text per status, used when `label` is not given
- * (localizable — override via `label`). The canonical `StrctStatus` vocabulary
- * has no 'ok'/'info': OK maps to 'success', info to 'accent'.
- */
-const DEFAULT_LABEL = {
-    neutral: 'Neutral',
-    accent: 'Info',
-    success: 'OK',
-    warning: 'Warning',
-    critical: 'Critical',
-};
-/**
- * Presence/state dot that never relies on colour alone: the tone is painted by
- * a pure-CSS dot while the state is also rendered as visually-hidden text, so
- * screen readers (and colour-blind users copying text) get "Warning", not just
- * a yellow circle. Use it inside avatars, menu rows, metric tiles — anywhere a
- * bare coloured dot would otherwise carry meaning.
- *
- *   <strct-status-dot status="success" />
- *   <strct-status-dot status="critical" size="sm" label="Node unreachable" />
- */
-class StrctStatusDot {
-    /** Status tone (canonical vocabulary: OK = 'success', info = 'accent'). */
-    status = input('neutral', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    /**
-     * Accessible text describing the state (localizable). Empty falls back to a
-     * per-status default ("OK", "Warning", …) so the dot is never color-only.
-     */
-    label = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Dot size: `sm` for dense rows, `md` standalone. */
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    text = computed(() => this.label() || DEFAULT_LABEL[this.status()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctStatusDot, isStandalone: true, selector: "strct-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dot--accent": "status() === 'accent'", "class.strct-dot--success": "status() === 'success'", "class.strct-dot--warning": "status() === 'warning'", "class.strct-dot--critical": "status() === 'critical'", "class.strct-dot--sm": "size() === 'sm'" }, classAttribute: "strct-dot" }, ngImport: i0, template: `
-    <span class="strct-dot__dot" aria-hidden="true"></span>
-    <span class="strct-dot__sr">{{ text() }}</span>
-  `, isInline: true, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-hkh__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:var(--backdrop)}.strct-hkh{position:fixed;z-index:calc(var(--z-tour) + 1);top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh)}.strct-hkh__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.strct-hkh__title{font-size:13.5px;font-weight:650;color:var(--t1)}.strct-hkh__headside{display:inline-flex;align-items:center;gap:8px}.strct-hkh__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-hkh__close:hover{color:var(--t1);background:var(--bg-3)}.strct-hkh__group{margin-bottom:12px}.strct-hkh__groupname{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-hkh__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.strct-hkh__desc{font-size:12.5px;color:var(--t1)}.strct-hkh__keys{display:inline-flex;gap:4px}.strct-hkh__empty{font-size:12.5px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHotkeysHelp, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-status-dot', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <span class="strct-dot__dot" aria-hidden="true"></span>
-    <span class="strct-dot__sr">{{ text() }}</span>
-  `, host: {
-                        class: 'strct-dot',
-                        '[class.strct-dot--accent]': "status() === 'accent'",
-                        '[class.strct-dot--success]': "status() === 'success'",
-                        '[class.strct-dot--warning]': "status() === 'warning'",
-                        '[class.strct-dot--critical]': "status() === 'critical'",
-                        '[class.strct-dot--sm]': "size() === 'sm'",
-                    }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+            args: [{ selector: 'strct-hotkeys-help', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctKbd], template: `
+    @if (open()) {
+      <div class="strct-hkh__backdrop" (click)="open.set(false)"></div>
+      <div class="strct-hkh" role="dialog" aria-modal="true" [attr.aria-label]="title()">
+        <div class="strct-hkh__head">
+          <span class="strct-hkh__title">{{ title() }}</span>
+          <span class="strct-hkh__headside">
+            <strct-kbd>?</strct-kbd>
+            <button
+              type="button"
+              class="strct-hkh__close"
+              [attr.aria-label]="closeLabel()"
+              (click)="open.set(false)"
+            >
+              <strct-icon name="close" [size]="14" />
+            </button>
+          </span>
+        </div>
+        @for (group of grouped(); track group.name) {
+          <div class="strct-hkh__group">
+            <div class="strct-hkh__groupname">{{ group.name }}</div>
+            @for (hk of group.keys; track hk.combo + hk.description) {
+              <div class="strct-hkh__row">
+                <span class="strct-hkh__desc">{{ hk.description }}</span>
+                <span class="strct-hkh__keys">
+                  @for (part of parts(hk.combo); track $index) {
+                    <strct-kbd>{{ part }}</strct-kbd>
+                  }
+                </span>
+              </div>
+            }
+          </div>
+        } @empty {
+          <p class="strct-hkh__empty">{{ emptyText() }}</p>
+        }
+      </div>
+    }
+  `, styles: [".strct-hkh__backdrop{position:fixed;inset:0;z-index:var(--z-tour);background:var(--backdrop)}.strct-hkh{position:fixed;z-index:calc(var(--z-tour) + 1);top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;background:var(--bg-1);border:1px solid var(--b2);border-radius:10px;box-shadow:var(--shh)}.strct-hkh__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.strct-hkh__title{font-size:13.5px;font-weight:650;color:var(--t1)}.strct-hkh__headside{display:inline-flex;align-items:center;gap:8px}.strct-hkh__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-hkh__close:hover{color:var(--t1);background:var(--bg-3)}.strct-hkh__group{margin-bottom:12px}.strct-hkh__groupname{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-hkh__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.strct-hkh__desc{font-size:12.5px;color:var(--t1)}.strct-hkh__keys{display:inline-flex;gap:4px}.strct-hkh__empty{font-size:12.5px;color:var(--t3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
 
+let reorderCounter = 0;
 /**
- * Numeric stepper input: − / + buttons flanking a text field. The value is
- * `number | null` (null = empty); typing is free-form (intermediate states
- * like "-" are kept), committed values clamp to `min`/`max` on blur, and the
- * buttons + keyboard always clamp immediately.
+ * List drag-reorder primitive — the consumer owns the array:
  *
- *   <strct-number [min]="0" [max]="64" [step]="4" [(ngModel)]="vcpus" />
+ *   <ul strctReorder (reordered)="move($event)">
+ *     @for (s of steps(); track s.id) {
+ *       <li strctReorderItem>{{ s.label }}</li>
+ *     }
+ *   </ul>
  *
- * Keyboard on the field: ArrowUp/Down ±step, PageUp/Down ±10×step,
- * Home/End jump to min/max. The field exposes `role="spinbutton"` with
- * aria-valuemin/max/now so assistive tech announces it as a number control.
+ *   move({ from, to }: StrctReorderEvent) {
+ *     this.steps.update((s) => { const c = [...s]; c.splice(to, 0, ...c.splice(from, 1)); return c; });
+ *   }
+ *
+ * Items are HTML5-draggable; keyboard reorder is Alt+ArrowUp / Alt+ArrowDown
+ * on the focused item (items get `tabindex="0"` unless they already manage
+ * focus). Indexes are positions among the `strctReorderItem` siblings.
+ * Completed moves are announced in a live region (see `announcement`) and
+ * items reference the sr-only `instructions` via `aria-describedby`.
  */
-class StrctNumber {
-    /** Minimum allowed value; null = unbounded. */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-    /** Maximum allowed value; null = unbounded. */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-    /** Step increment for buttons and Arrow keys (PageUp/Down use 10×). */
-    step = input(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    /** Placeholder text when empty. */
-    placeholder = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    /** Accessible label of the + button (localizable). */
-    incrementLabel = input('Increment', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "incrementLabel" }] : /* istanbul ignore next */ []));
-    /** Accessible label of the − button (localizable). */
-    decrementLabel = input('Decrement', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "decrementLabel" }] : /* istanbul ignore next */ []));
-    /** Static disable; forms' setDisabledState also drives the disabled state. */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    value = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Raw field text — may hold an unparseable intermediate state while typing. */
-    text = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    /** Disabled state pushed by the forms API (setDisabledState). */
-    cvaDisabled = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    /** At/below min (or min unset → never) — greys out the − button. */
-    atMin = computed(() => {
-        const v = this.value();
-        const m = this.min();
-        return v !== null && m !== null && v <= m;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
-    /** At/above max (or max unset → never) — greys out the + button. */
-    atMax = computed(() => {
-        const v = this.value();
-        const m = this.max();
-        return v !== null && m !== null && v >= m;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
-    onChange = () => { };
-    onTouched = () => { };
-    onInput(event) {
-        const raw = event.target.value;
-        this.text.set(raw);
-        const trimmed = raw.trim();
-        if (trimmed === '') {
-            this.value.set(null);
-            this.onChange(null);
+class StrctReorder {
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    doc = inject(DOCUMENT);
+    announcer = inject(StrctAnnouncer);
+    /** Emits when a drag or keyboard move completes. */
+    reordered = output();
+    /** Disable all reordering (display-only mode). */
+    reorderDisabled = input(false, { ...(ngDevMode ? { debugName: "reorderDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Keyboard instructions (localizable), rendered sr-only and referenced by
+     * every item's `aria-describedby`. Set to '' to opt out.
+     */
+    instructions = input('Press Alt+ArrowUp or Alt+ArrowDown to move this item', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instructions" }] : /* istanbul ignore next */ []));
+    /**
+     * Builds the live-region announcement after a move (localizable):
+     * (moved item's text, new 1-based position, item count).
+     */
+    announcement = input((label, position, total) => `Moved ${label} to position ${position} of ${total}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    dragIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
+    overIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overIndex" }] : /* istanbul ignore next */ []));
+    /** Id of the sr-only instructions element the items point to. */
+    instructionsId = `strct-reorder-hint-${++reorderCounter}`;
+    hint = null;
+    constructor() {
+        // Keep the sr-only instructions element in sync with the input.
+        effect(() => {
+            const text = this.instructions();
+            if (text && !this.hint) {
+                this.hint = this.renderer.createElement('span');
+                this.renderer.setAttribute(this.hint, 'id', this.instructionsId);
+                this.hint.style.cssText =
+                    'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;';
+                this.renderer.appendChild(this.doc.body, this.hint);
+            }
+            if (this.hint)
+                this.hint.textContent = text;
+        });
+    }
+    items() {
+        return [...this.host.nativeElement.querySelectorAll('[strctReorderItem]')];
+    }
+    indexOf(el) {
+        return this.items().indexOf(el);
+    }
+    commit(from, to) {
+        this.dragIndex.set(null);
+        this.overIndex.set(null);
+        if (from < 0 || to < 0 || from === to)
             return;
-        }
-        const parsed = Number(trimmed);
-        // Intermediate states ("-", "1.", "2e") don't parse yet — keep the text,
-        // hold the last value; clamping happens on blur.
-        if (Number.isFinite(parsed)) {
-            this.value.set(parsed);
-            this.onChange(parsed);
-        }
+        const label = this.items()[from]?.textContent?.trim() ?? '';
+        this.reordered.emit({ from, to });
+        this.announcer.announce(this.announcement()(label, to + 1, this.items().length));
     }
-    onKeydown(event) {
-        if (this.isDisabled())
+    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)
             return;
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                this.stepBy(1);
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this.stepBy(-1);
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                this.stepBy(1, 10);
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                this.stepBy(-1, 10);
-                break;
-            case 'Home': {
-                const m = this.min();
-                if (m === null)
-                    return;
-                event.preventDefault();
-                this.commitTo(m);
-                break;
-            }
-            case 'End': {
-                const m = this.max();
-                if (m === null)
-                    return;
-                event.preventDefault();
-                this.commitTo(m);
-                break;
-            }
-        }
+        if (event.target.closest('[strctReorderItem]'))
+            return;
+        event.preventDefault();
     }
-    /** Commit the pending text on blur: parse, clamp, restore on garbage. */
-    onBlur() {
-        const trimmed = this.text().trim();
-        if (trimmed === '') {
-            if (this.value() !== null) {
-                this.value.set(null);
-                this.onChange(null);
-            }
-            this.text.set('');
-        }
-        else {
-            const parsed = Number(trimmed);
-            if (Number.isFinite(parsed)) {
-                const clamped = this.clamp(parsed);
-                this.value.set(clamped);
-                if (clamped !== parsed)
-                    this.onChange(clamped);
-                this.text.set(String(clamped));
-            }
-            else {
-                // Unparseable — restore the last committed value.
-                this.text.set(this.value() === null ? '' : String(this.value()));
-            }
+    onContainerDrop(event) {
+        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);
+    }
+    onDragLeave(event) {
+        // dragleave also fires when moving between children; only clear the
+        // highlight when the drag truly leaves the container.
+        const next = event.relatedTarget;
+        if (next && this.host.nativeElement.contains(next))
+            return;
+        this.overIndex.set(null);
+    }
+    ngOnDestroy() {
+        if (this.hint) {
+            this.renderer.removeChild(this.doc.body, this.hint);
+            this.hint = null;
         }
-        this.onTouched();
     }
-    /** Button / keyboard step: an empty field first lands on min (or 0). */
-    stepBy(dir, factor = 1) {
-        if (this.isDisabled())
-            return;
-        const v = this.value();
-        if (v === null) {
-            this.commitTo(this.min() ?? 0);
-            return;
-        }
-        this.commitTo(v + dir * factor * this.step());
+    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 });
+}
+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: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onContainerDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }] } });
+/** One draggable row inside a `[strctReorder]` container. */
+class StrctReorderItem {
+    list = inject(StrctReorder);
+    el = inject(ElementRef);
+    // Captured before our own binding ever writes tabindex, so it never flips.
+    hadOwnTabindex = this.el.nativeElement.hasAttribute('tabindex');
+    hostTabindex() {
+        return this.hadOwnTabindex ? null : 0;
+    }
+    isDragging() {
+        return this.list.dragIndex() === this.index();
     }
-    commitTo(n) {
-        const clamped = this.clamp(this.snap(n));
-        this.value.set(clamped);
-        this.text.set(String(clamped));
-        this.onChange(clamped);
-        this.onTouched();
+    isOver() {
+        return this.list.overIndex() === this.index() && this.list.dragIndex() !== this.index();
     }
-    clamp(n) {
-        const lo = this.min();
-        const hi = this.max();
-        if (lo !== null && n < lo)
-            return lo;
-        if (hi !== null && n > hi)
-            return hi;
-        return n;
+    index() {
+        return this.list.indexOf(this.el.nativeElement);
     }
-    /** Trim float dust from step arithmetic (0.1 + 0.2), not a grid snap. */
-    snap(n) {
-        const step = this.step();
-        if (!Number.isFinite(step) || step <= 0)
-            return n;
-        const decimals = (String(step).split('.')[1] ?? '').length;
-        return Number(n.toFixed(Math.min(decimals + 2, 12)));
+    onDragStart(event) {
+        if (this.list.reorderDisabled())
+            return;
+        this.list.dragIndex.set(this.index());
+        event.dataTransfer?.setData('text/plain', String(this.index()));
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
     }
-    writeValue(value) {
-        const parsed = value === null || value === undefined ? null : Number(value);
-        const v = parsed !== null && Number.isFinite(parsed) ? this.clamp(parsed) : null;
-        this.value.set(v);
-        this.text.set(v === null ? '' : String(v));
+    onDragOver(event) {
+        if (this.list.dragIndex() == null)
+            return;
+        event.preventDefault();
+        this.list.overIndex.set(this.index());
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    onDrop(event) {
+        event.preventDefault();
+        const from = this.list.dragIndex();
+        if (from == null)
+            return;
+        this.list.commit(from, this.index());
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    onDragEnd() {
+        this.list.dragIndex.set(null);
+        this.list.overIndex.set(null);
     }
-    setDisabledState(isDisabled) {
-        this.cvaDisabled.set(isDisabled);
+    onKeydown(event) {
+        if (this.list.reorderDisabled() || !event.altKey)
+            return;
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+            return;
+        event.preventDefault();
+        const from = this.index();
+        const to = event.key === 'ArrowUp' ? from - 1 : from + 1;
+        if (to < 0 || to >= this.list.items().length)
+            return;
+        this.list.commit(from, to);
+        // Keep focus on the moved item after the consumer re-renders.
+        setTimeout(() => this.list.items()[to]?.focus());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctNumber, isStandalone: true, selector: "strct-number", inputs: { 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-num" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctNumber), multi: true },
-        ], ngImport: i0, template: `
-    <div class="strct-num__wrap">
-      <button
-        type="button"
-        class="strct-num__btn"
-        [attr.aria-label]="decrementLabel()"
-        [disabled]="isDisabled() || atMin()"
-        (click)="stepBy(-1)"
-      >
-        <strct-icon strictName="minus" [size]="12" [strokeWidth]="1.8" />
-      </button>
-      <input
-        type="text"
-        inputmode="decimal"
-        class="strct-control strct-num__input"
-        role="spinbutton"
-        [attr.aria-valuemin]="min()"
-        [attr.aria-valuemax]="max()"
-        [attr.aria-valuenow]="value()"
-        [placeholder]="placeholder()"
-        [value]="text()"
-        [disabled]="isDisabled()"
-        (input)="onInput($event)"
-        (keydown)="onKeydown($event)"
-        (blur)="onBlur()"
-      />
-      <button
-        type="button"
-        class="strct-num__btn"
-        [attr.aria-label]="incrementLabel()"
-        [disabled]="isDisabled() || atMax()"
-        (click)="stepBy(1)"
-      >
-        <strct-icon strictName="plus" [size]="12" [strokeWidth]="1.8" />
-      </button>
-    </div>
-  `, isInline: true, styles: [".strct-num{display:block;width:100%}.strct-num__wrap{display:flex;align-items:stretch;gap:var(--space-1)}.strct-num__input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}.strct-num__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-inline:var(--space-2);color:var(--t2);background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.strct-num__btn:hover:not(:disabled){color:var(--t1);border-color:var(--b3);background:var(--bg-3)}.strct-num__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctNumber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctReorderItem]',
+                    host: {
+                        '[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',
+                    },
+                }]
+        }], propDecorators: { onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['dragend']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Default accessible text per status, used when `label` is not given
+ * (localizable — override via `label`). The canonical `StrctStatus` vocabulary
+ * has no 'ok'/'info': OK maps to 'success', info to 'accent'.
+ */
+const DEFAULT_LABEL = {
+    neutral: 'Neutral',
+    accent: 'Info',
+    success: 'OK',
+    warning: 'Warning',
+    critical: 'Critical',
+};
+/**
+ * Presence/state dot that never relies on colour alone: the tone is painted by
+ * a pure-CSS dot while the state is also rendered as visually-hidden text, so
+ * screen readers (and colour-blind users copying text) get "Warning", not just
+ * a yellow circle. Use it inside avatars, menu rows, metric tiles — anywhere a
+ * bare coloured dot would otherwise carry meaning.
+ *
+ *   <strct-status-dot status="success" />
+ *   <strct-status-dot status="critical" size="sm" label="Node unreachable" />
+ */
+class StrctStatusDot {
+    /** Status tone (canonical vocabulary: OK = 'success', info = 'accent'). */
+    status = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible text describing the state (localizable). Empty falls back to a
+     * per-status default ("OK", "Warning", …) so the dot is never color-only.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Dot size: `sm` for dense rows, `md` standalone. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    text = computed(() => this.label() || DEFAULT_LABEL[this.status()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctStatusDot, isStandalone: true, selector: "strct-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dot--accent": "status() === 'accent'", "class.strct-dot--success": "status() === 'success'", "class.strct-dot--warning": "status() === 'warning'", "class.strct-dot--critical": "status() === 'critical'", "class.strct-dot--sm": "size() === 'sm'" }, classAttribute: "strct-dot" }, ngImport: i0, template: `
+    <span class="strct-dot__dot" aria-hidden="true"></span>
+    <span class="strct-dot__sr">{{ text() }}</span>
+  `, isInline: true, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-number', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctNumber), multi: true },
-                    ], template: `
-    <div class="strct-num__wrap">
-      <button
-        type="button"
-        class="strct-num__btn"
-        [attr.aria-label]="decrementLabel()"
-        [disabled]="isDisabled() || atMin()"
-        (click)="stepBy(-1)"
-      >
-        <strct-icon strictName="minus" [size]="12" [strokeWidth]="1.8" />
-      </button>
-      <input
-        type="text"
-        inputmode="decimal"
-        class="strct-control strct-num__input"
-        role="spinbutton"
-        [attr.aria-valuemin]="min()"
-        [attr.aria-valuemax]="max()"
-        [attr.aria-valuenow]="value()"
-        [placeholder]="placeholder()"
-        [value]="text()"
-        [disabled]="isDisabled()"
-        (input)="onInput($event)"
-        (keydown)="onKeydown($event)"
-        (blur)="onBlur()"
-      />
-      <button
-        type="button"
-        class="strct-num__btn"
-        [attr.aria-label]="incrementLabel()"
-        [disabled]="isDisabled() || atMax()"
-        (click)="stepBy(1)"
-      >
-        <strct-icon strictName="plus" [size]="12" [strokeWidth]="1.8" />
-      </button>
-    </div>
-  `, host: { class: 'strct-num' }, styles: [".strct-num{display:block;width:100%}.strct-num__wrap{display:flex;align-items:stretch;gap:var(--space-1)}.strct-num__input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}.strct-num__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-inline:var(--space-2);color:var(--t2);background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.strct-num__btn:hover:not(:disabled){color:var(--t1);border-color:var(--b3);background:var(--bg-3)}.strct-num__btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}\n"] }]
-        }], propDecorators: { 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+            args: [{ selector: 'strct-status-dot', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <span class="strct-dot__dot" aria-hidden="true"></span>
+    <span class="strct-dot__sr">{{ text() }}</span>
+  `, host: {
+                        class: 'strct-dot',
+                        '[class.strct-dot--accent]': "status() === 'accent'",
+                        '[class.strct-dot--success]': "status() === 'success'",
+                        '[class.strct-dot--warning]': "status() === 'warning'",
+                        '[class.strct-dot--critical]': "status() === 'critical'",
+                        '[class.strct-dot--sm]': "size() === 'sm'",
+                    }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * A generic anchored overlay panel for arbitrary projected content — the
@@ -23001,5 +23251,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, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, 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, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, 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, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, 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, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, 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