@akcelik/strct 4.9.0 → 4.11.0

package/fesm2022/akcelik-strct.mjs

@@ -1941,6 +1941,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.2px;padding-block:3px;padding-inline:9px 7px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-inline-start-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warning{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-inline-start-width:1px;padding-inline-start:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:var(--inv)}.strct-badge--solid.strct-badge--success{background:var(--success);color:var(--inv)}.strct-badge--solid.strct-badge--warning{background:var(--warning);color:var(--inv)}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:var(--inv)}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
 
+/** Content rendered before the tag's text — a status dot, an icon. */
+class StrctTagLeading {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTagLeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctTagLeading, isStandalone: true, selector: "[strctTagLeading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTagLeading, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctTagLeading]' }]
+        }] });
 /**
  * Compact, optionally removable chip.
  *   <strct-tag status="accent" removable (removed)="drop()">Frontend</strct-tag>
@@ -1956,11 +1965,40 @@ class StrctTag {
     /** Accessible label for the remove button. */
     removeLabel = input('Remove', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The body becomes a control: pointer, hover, focus ring, and `activated` on
+     * click / Enter / Space. The × stays a separate tab stop, so "open it" and
+     * "remove it" are two targets.
+     */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `'pill'` rounds the tag fully — a chip for a thing, not a label on one. */
+    shape = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Monospace text, for names that are identifiers. */
+    mono = input(false, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Emitted when the user clicks the remove button. */
     removed = output();
+    /** Emitted when an `interactive` tag's body is activated. */
+    activated = output();
+    onActivate() {
+        if (this.interactive() && !this.disabled())
+            this.activated.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTag, isStandalone: true, selector: "strct-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class.strct-tag--accent": "status() === 'accent'", "class.strct-tag--success": "status() === 'success'", "class.strct-tag--warning": "status() === 'warning'", "class.strct-tag--critical": "status() === 'critical'" }, classAttribute: "strct-tag" }, ngImport: i0, template: `
-    <span class="strct-tag__text"><ng-content /></span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctTag, isStandalone: true, selector: "strct-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activated: "activated" }, host: { properties: { "class.strct-tag--interactive": "interactive() && !disabled()", "class.strct-tag--pill": "shape() === 'pill'", "class.strct-tag--mono": "mono()", "class.strct-tag--accent": "status() === 'accent'", "class.strct-tag--success": "status() === 'success'", "class.strct-tag--warning": "status() === 'warning'", "class.strct-tag--critical": "status() === 'critical'" }, classAttribute: "strct-tag" }, ngImport: i0, template: `
+    <span
+      class="strct-tag__text"
+      [attr.role]="interactive() ? 'button' : null"
+      [attr.tabindex]="interactive() && !disabled() ? 0 : null"
+      (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="$event.preventDefault(); onActivate()"
+    >
+      <!-- Declared before the catch-all so the selector wins; it renders first
+           either way. -->
+      <ng-content select="[strctTagLeading]" />
+      <ng-content />
+    </span>
     @if (removable() && !disabled()) {
       <button
         type="button"
@@ -1971,12 +2009,24 @@ class StrctTag {
         <strct-icon name="close" [size]="11" [strokeWidth]="1.6" />
       </button>
     }
-  `, isInline: true, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:9px 4px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-inline-end:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover,.strct-tag__remove:focus-visible{opacity:1;background:var(--dn)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:9px 4px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-inline-end:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__text{display:inline-flex;align-items:center;gap:5px}.strct-tag--interactive .strct-tag__text{cursor:pointer;border-radius:3px}.strct-tag--interactive:hover{border-color:var(--b3);background:var(--bg-2)}.strct-tag--interactive.strct-tag--accent:hover{border-color:var(--acc)}.strct-tag__text:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-tag--pill{border-radius:var(--radius-full, 999px);padding-inline:10px 5px}.strct-tag--pill:not(:has(.strct-tag__remove)){padding-inline-end:10px}.strct-tag--pill .strct-tag__remove{border-radius:999px}.strct-tag--mono{font-family:var(--mono)}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover,.strct-tag__remove:focus-visible{opacity:1;background:var(--dn)}\n"], 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: StrctTag, decorators: [{
             type: Component,
             args: [{ selector: 'strct-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <span class="strct-tag__text"><ng-content /></span>
+    <span
+      class="strct-tag__text"
+      [attr.role]="interactive() ? 'button' : null"
+      [attr.tabindex]="interactive() && !disabled() ? 0 : null"
+      (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="$event.preventDefault(); onActivate()"
+    >
+      <!-- Declared before the catch-all so the selector wins; it renders first
+           either way. -->
+      <ng-content select="[strctTagLeading]" />
+      <ng-content />
+    </span>
     @if (removable() && !disabled()) {
       <button
         type="button"
@@ -1989,12 +2039,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     }
   `, host: {
                         class: 'strct-tag',
+                        '[class.strct-tag--interactive]': 'interactive() && !disabled()',
+                        '[class.strct-tag--pill]': "shape() === 'pill'",
+                        '[class.strct-tag--mono]': 'mono()',
                         '[class.strct-tag--accent]': "status() === 'accent'",
                         '[class.strct-tag--success]': "status() === 'success'",
                         '[class.strct-tag--warning]': "status() === 'warning'",
                         '[class.strct-tag--critical]': "status() === 'critical'",
-                    }, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:9px 4px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-inline-end:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover,.strct-tag__remove:focus-visible{opacity:1;background:var(--dn)}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+                    }, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:9px 4px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-inline-end:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__text{display:inline-flex;align-items:center;gap:5px}.strct-tag--interactive .strct-tag__text{cursor:pointer;border-radius:3px}.strct-tag--interactive:hover{border-color:var(--b3);background:var(--bg-2)}.strct-tag--interactive.strct-tag--accent:hover{border-color:var(--acc)}.strct-tag__text:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-tag--pill{border-radius:var(--radius-full, 999px);padding-inline:10px 5px}.strct-tag--pill:not(:has(.strct-tag__remove)){padding-inline-end:10px}.strct-tag--pill .strct-tag__remove{border-radius:999px}.strct-tag--mono{font-family:var(--mono)}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover,.strct-tag__remove:focus-visible{opacity:1;background:var(--dn)}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 /**
  * Circular avatar: an image when `src` is set, otherwise initials from `name`.
@@ -7750,6 +7803,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }] });
 
+/**
+ * A description with markup in it, projected into `strct-checkbox`,
+ * `strct-toggle` or `strct-radio` — where the string `description` renders, and
+ * linked to the control the same way.
+ *
+ *   <strct-checkbox [(checked)]="net">
+ *     Network
+ *     <span strctControlDescription>The cluster networks and <strong>Windows Firewall</strong>.</span>
+ *   </strct-checkbox>
+ */
+class StrctControlDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctControlDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctControlDescription, isStandalone: true, selector: "[strctControlDescription]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctControlDescription, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctControlDescription]' }]
+        }] });
+
+let checkboxCounter = 0;
 /** Checkbox with custom box. Works with `[(ngModel)]` / reactive forms. */
 class StrctCheckbox {
     checked = model(false, /* @ts-ignore */
@@ -7766,6 +7839,31 @@ class StrctCheckbox {
     /** Accessible label for the checkbox (used when no text label is present). */
     ariaLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * A sentence under the label explaining the option's consequence. It renders
+     * inside the component's own `<label>` — so clicking it still toggles the
+     * option — and is linked with `aria-describedby` rather than becoming part of
+     * the name. `[strctControlDescription]` projects one with markup in it.
+     */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    n = ++checkboxCounter;
+    descId = `strct-cb-desc-${this.n}`;
+    labelId = `strct-cb-label-${this.n}`;
+    projDescId = `strct-cb-pdesc-${this.n}`;
+    projected = contentChild(StrctControlDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projected" }] : /* istanbul ignore next */ []));
+    described = computed(() => !!this.description() || !!this.projected(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "described" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.description() ? this.descId : this.projected() ? this.projDescId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * The description sits inside the `<label>` so clicking it still toggles the
+     * option — which would otherwise make it part of the name as well as the
+     * description. Naming the label span keeps the name to the label alone.
+     */
+    labelledBy = computed(() => this.described() && !this.ariaLabel() ? this.labelId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     onToggle(event) {
@@ -7786,10 +7884,14 @@ class StrctCheckbox {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctCheckbox, isStandalone: true, selector: "strct-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCheckbox, isStandalone: true, selector: "strct-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctCheckbox), multi: true },
-        ], ngImport: i0, template: `
-    <label class="strct-cb" [class.strct-cb--disabled]="isDisabled()">
+        ], queries: [{ propertyName: "projected", first: true, predicate: StrctControlDescription, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label
+      class="strct-cb"
+      [class.strct-cb--disabled]="isDisabled()"
+      [class.strct-cb--described]="described()"
+    >
       <input
         type="checkbox"
         class="strct-cb__native"
@@ -7797,22 +7899,40 @@ class StrctCheckbox {
         [disabled]="isDisabled()"
         [indeterminate]="indeterminate()"
         [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
         (change)="onToggle($event)"
         (blur)="onTouched()"
       />
       <span class="strct-cb__box">
         <strct-icon name="check" [size]="11" [strokeWidth]="2" />
       </span>
-      <span class="strct-cb__label"><ng-content /></span>
+      <span class="strct-cb__text">
+        <!-- The projected slot is declared first so its selector wins over the
+             catch-all below; CSS order puts it under the label. -->
+        @if (projected()) {
+          <span class="strct-cb__desc strct-cb__desc--projected" [id]="projDescId">
+            <ng-content select="[strctControlDescription]" />
+          </span>
+        }
+        <span class="strct-cb__label" [id]="labelId"><ng-content /></span>
+        @if (description()) {
+          <span class="strct-cb__desc" [id]="descId">{{ description() }}</span>
+        }
+      </span>
     </label>
-  `, isInline: true, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}.strct-cb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-cb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-cb__desc--projected{order:1}.strct-cb--described{align-items:flex-start}.strct-cb--described .strct-cb__box{margin-block-start:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'strct-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StrctIcon], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctCheckbox), multi: true },
                     ], template: `
-    <label class="strct-cb" [class.strct-cb--disabled]="isDisabled()">
+    <label
+      class="strct-cb"
+      [class.strct-cb--disabled]="isDisabled()"
+      [class.strct-cb--described]="described()"
+    >
       <input
         type="checkbox"
         class="strct-cb__native"
@@ -7820,17 +7940,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         [disabled]="isDisabled()"
         [indeterminate]="indeterminate()"
         [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
         (change)="onToggle($event)"
         (blur)="onTouched()"
       />
       <span class="strct-cb__box">
         <strct-icon name="check" [size]="11" [strokeWidth]="2" />
       </span>
-      <span class="strct-cb__label"><ng-content /></span>
+      <span class="strct-cb__text">
+        <!-- The projected slot is declared first so its selector wins over the
+             catch-all below; CSS order puts it under the label. -->
+        @if (projected()) {
+          <span class="strct-cb__desc strct-cb__desc--projected" [id]="projDescId">
+            <ng-content select="[strctControlDescription]" />
+          </span>
+        }
+        <span class="strct-cb__label" [id]="labelId"><ng-content /></span>
+        @if (description()) {
+          <span class="strct-cb__desc" [id]="descId">{{ description() }}</span>
+        }
+      </span>
     </label>
-  `, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}\n"] }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+  `, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}.strct-cb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-cb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-cb__desc--projected{order:1}.strct-cb--described{align-items:flex-start}.strct-cb--described .strct-cb__box{margin-block-start:1px}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctControlDescription), { isSignal: true }] }] } });
 
+let toggleCounter = 0;
 /** On/off switch. Works with `[(ngModel)]` / reactive forms. */
 class StrctToggle {
     checked = signal(false, /* @ts-ignore */
@@ -7842,6 +7977,26 @@ class StrctToggle {
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** Static disable; forms' setDisabledState also drives the disabled state. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * A sentence under the label explaining what turning this on does. It renders
+     * inside the component's own `<label>` and is linked with `aria-describedby`;
+     * `[strctControlDescription]` projects one with markup in it.
+     */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    n = ++toggleCounter;
+    descId = `strct-tg-desc-${this.n}`;
+    labelId = `strct-tg-label-${this.n}`;
+    projDescId = `strct-tg-pdesc-${this.n}`;
+    projected = contentChild(StrctControlDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projected" }] : /* istanbul ignore next */ []));
+    described = computed(() => !!this.description() || !!this.projected(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "described" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.description() ? this.descId : this.projected() ? this.projDescId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Keeps the name to the label when the description shares its `<label>`. */
+    labelledBy = computed(() => (this.described() ? this.labelId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     onToggle(event) {
@@ -7862,46 +8017,79 @@ class StrctToggle {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctToggle, isStandalone: true, selector: "strct-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctToggle, isStandalone: true, selector: "strct-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctToggle), multi: true },
-        ], ngImport: i0, template: `
-    <label class="strct-tg" [class.strct-tg--disabled]="isDisabled()">
+        ], queries: [{ propertyName: "projected", first: true, predicate: StrctControlDescription, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label
+      class="strct-tg"
+      [class.strct-tg--disabled]="isDisabled()"
+      [class.strct-tg--described]="described()"
+    >
       <input
         type="checkbox"
         class="strct-tg__native"
         role="switch"
         [checked]="checked()"
         [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
         (change)="onToggle($event)"
         (blur)="onTouched()"
       />
       <span class="strct-tg__track"><span class="strct-tg__thumb"></span></span>
-      <span class="strct-tg__label"><ng-content /></span>
+      <span class="strct-tg__text">
+        @if (projected()) {
+          <span class="strct-tg__desc strct-tg__desc--projected" [id]="projDescId">
+            <ng-content select="[strctControlDescription]" />
+          </span>
+        }
+        <span class="strct-tg__label" [id]="labelId"><ng-content /></span>
+        @if (description()) {
+          <span class="strct-tg__desc" [id]="descId">{{ description() }}</span>
+        }
+      </span>
     </label>
-  `, isInline: true, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}.strct-tg__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-tg__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-tg__desc--projected{order:1}.strct-tg--described{align-items:flex-start}.strct-tg--described .strct-tg__track{margin-block-start:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctToggle, decorators: [{
             type: Component,
             args: [{ selector: 'strct-toggle', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctToggle), multi: true },
                     ], template: `
-    <label class="strct-tg" [class.strct-tg--disabled]="isDisabled()">
+    <label
+      class="strct-tg"
+      [class.strct-tg--disabled]="isDisabled()"
+      [class.strct-tg--described]="described()"
+    >
       <input
         type="checkbox"
         class="strct-tg__native"
         role="switch"
         [checked]="checked()"
         [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
         (change)="onToggle($event)"
         (blur)="onTouched()"
       />
       <span class="strct-tg__track"><span class="strct-tg__thumb"></span></span>
-      <span class="strct-tg__label"><ng-content /></span>
+      <span class="strct-tg__text">
+        @if (projected()) {
+          <span class="strct-tg__desc strct-tg__desc--projected" [id]="projDescId">
+            <ng-content select="[strctControlDescription]" />
+          </span>
+        }
+        <span class="strct-tg__label" [id]="labelId"><ng-content /></span>
+        @if (description()) {
+          <span class="strct-tg__desc" [id]="descId">{{ description() }}</span>
+        }
+      </span>
     </label>
-  `, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}\n"] }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+  `, styles: [".strct-tg{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tg--disabled{opacity:.5;cursor:not-allowed}.strct-tg__native{position:absolute;opacity:0;width:0;height:0}.strct-tg__track{position:relative;width:34px;height:19px;border-radius:11px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--b3);transition:background .16s ease,border-color .16s ease}.strct-tg__thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--t2);transition:transform .16s ease,background .16s ease}.strct-tg__native:checked+.strct-tg__track{background:var(--acc);border-color:transparent}.strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(15px);background:var(--inv)}:host-context([dir=\"rtl\"]) .strct-tg__native:checked+.strct-tg__track .strct-tg__thumb{transform:translate(-15px)}.strct-tg__native:focus-visible+.strct-tg__track{box-shadow:0 0 0 3px var(--acc18)}.strct-tg__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-tg__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-tg__desc--projected{order:1}.strct-tg--described{align-items:flex-start}.strct-tg--described .strct-tg__track{margin-block-start:1px}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctControlDescription), { isSignal: true }] }] } });
 
 let groupCounter = 0;
+let radioCounter = 0;
 /**
  * Radio group (the form control). Wrap `<strct-radio>` items:
  *   <strct-radio-group [(ngModel)]="size">
@@ -7910,6 +8098,13 @@ let groupCounter = 0;
  *   </strct-radio-group>
  */
 class StrctRadioGroup {
+    /**
+     * `'card'` renders each option as a tile with room for an icon and a
+     * sentence — a choice between a few kinds of thing, each needing an
+     * explanation. It stays a native radio group: one tab stop, arrow keys.
+     */
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     name = `strct-radio-${++groupCounter}`;
     value = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -7935,16 +8130,20 @@ class StrctRadioGroup {
         this.isDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctRadioGroup, isStandalone: true, selector: "strct-radio-group", host: { attributes: { "role": "radiogroup" }, classAttribute: "strct-radio-group" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctRadioGroup, isStandalone: true, selector: "strct-radio-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radiogroup" }, properties: { "class.strct-radio-group--card": "variant() === 'card'" }, classAttribute: "strct-radio-group" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctRadioGroup), multi: true },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-radio-group{display:flex;flex-direction:column;gap:9px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-radio-group{display:flex;flex-direction:column;gap:9px}.strct-radio-group--card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-radio-card-min, 220px),100%),1fr));gap:var(--space-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRadioGroup, decorators: [{
             type: Component,
             args: [{ selector: 'strct-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctRadioGroup), multi: true },
-                    ], template: `<ng-content />`, host: { class: 'strct-radio-group', role: 'radiogroup' }, styles: [".strct-radio-group{display:flex;flex-direction:column;gap:9px}\n"] }]
-        }] });
+                    ], template: `<ng-content />`, host: {
+                        class: 'strct-radio-group',
+                        role: 'radiogroup',
+                        '[class.strct-radio-group--card]': "variant() === 'card'",
+                    }, styles: [".strct-radio-group{display:flex;flex-direction:column;gap:9px}.strct-radio-group--card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-radio-card-min, 220px),100%),1fr));gap:var(--space-2)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 /** One option inside a `<strct-radio-group>`. */
 class StrctRadio {
     /** Current value. */
@@ -7952,40 +8151,111 @@ class StrctRadio {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * A sentence under the label. It renders inside the component's own
+     * `<label>` and is linked with `aria-describedby`;
+     * `[strctControlDescription]` projects one with markup in it.
+     */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Leading icon — card variant only. */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     group = inject(StrctRadioGroup);
+    card = computed(() => this.group.variant() === 'card', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
+    n = ++radioCounter;
+    descId = `strct-rb-desc-${this.n}`;
+    labelId = `strct-rb-label-${this.n}`;
+    projDescId = `strct-rb-pdesc-${this.n}`;
+    projected = contentChild(StrctControlDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projected" }] : /* istanbul ignore next */ []));
+    described = computed(() => !!this.description() || !!this.projected(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "described" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.description() ? this.descId : this.projected() ? this.projDescId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Keeps the name to the label when the description shares its `<label>`. */
+    labelledBy = computed(() => (this.described() ? this.labelId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctRadio, isStandalone: true, selector: "strct-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <label class="strct-rb" [class.strct-rb--disabled]="disabled() || group.isDisabled()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctRadio, isStandalone: true, selector: "strct-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projected", first: true, predicate: StrctControlDescription, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label
+      class="strct-rb"
+      [class.strct-rb--disabled]="disabled() || group.isDisabled()"
+      [class.strct-rb--card]="card()"
+      [class.strct-rb--described]="described()"
+      [class.strct-rb--checked]="group.value() === value()"
+    >
       <input
         type="radio"
         class="strct-rb__native"
         [name]="group.name"
         [checked]="group.value() === value()"
         [disabled]="disabled() || group.isDisabled()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
         (change)="group.select(value())"
       />
       <span class="strct-rb__dot"></span>
-      <span class="strct-rb__label"><ng-content /></span>
+      <span class="strct-rb__text">
+        @if (projected()) {
+          <span class="strct-rb__desc strct-rb__desc--projected" [id]="projDescId">
+            <ng-content select="[strctControlDescription]" />
+          </span>
+        }
+        <span class="strct-rb__label" [id]="labelId">
+          @if (card() && icon()) {
+            <strct-icon class="strct-rb__icon" [name]="icon()" [size]="15" />
+          }
+          <ng-content />
+        </span>
+        @if (description()) {
+          <span class="strct-rb__desc" [id]="descId">{{ description() }}</span>
+        }
+      </span>
     </label>
-  `, isInline: true, styles: [".strct-rb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-rb--disabled{opacity:.5;cursor:not-allowed}.strct-rb__native{position:absolute;opacity:0;width:0;height:0}.strct-rb__dot{position:relative;width:17px;height:17px;border-radius:50%;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);transition:border-color .14s ease}.strct-rb__dot:after{content:\"\";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .14s ease}.strct-rb__native:checked+.strct-rb__dot{border-color:var(--acc)}.strct-rb__native:checked+.strct-rb__dot:after{transform:scale(1)}.strct-rb__native:focus-visible+.strct-rb__dot{box-shadow:0 0 0 3px var(--acc18)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-rb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-rb--disabled{opacity:.5;cursor:not-allowed}.strct-rb__native{position:absolute;opacity:0;width:0;height:0}.strct-rb__dot{position:relative;width:17px;height:17px;border-radius:50%;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);transition:border-color .14s ease}.strct-rb__dot:after{content:\"\";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .14s ease}.strct-rb__native:checked+.strct-rb__dot{border-color:var(--acc)}.strct-rb__native:checked+.strct-rb__dot:after{transform:scale(1)}.strct-rb__native:focus-visible+.strct-rb__dot{box-shadow:0 0 0 3px var(--acc18)}.strct-rb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-rb__label{display:inline-flex;align-items:center;gap:6px}.strct-rb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-rb__desc--projected{order:1}.strct-rb--described{align-items:flex-start}.strct-rb--described .strct-rb__dot{margin-block-start:1px}.strct-rb--card{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);height:100%;box-sizing:border-box;transition:border-color .14s ease,background .14s ease}.strct-rb--card:hover:not(.strct-rb--disabled){border-color:var(--b3)}.strct-rb--card.strct-rb--checked{border-color:var(--acc);background:var(--acc-s)}.strct-rb--card .strct-rb__label{font-weight:600}.strct-rb__icon{color:var(--acc);flex:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="strct-rb" [class.strct-rb--disabled]="disabled() || group.isDisabled()">
+            args: [{ selector: 'strct-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StrctIcon], template: `
+    <label
+      class="strct-rb"
+      [class.strct-rb--disabled]="disabled() || group.isDisabled()"
+      [class.strct-rb--card]="card()"
+      [class.strct-rb--described]="described()"
+      [class.strct-rb--checked]="group.value() === value()"
+    >
       <input
         type="radio"
         class="strct-rb__native"
         [name]="group.name"
         [checked]="group.value() === value()"
         [disabled]="disabled() || group.isDisabled()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
         (change)="group.select(value())"
       />
       <span class="strct-rb__dot"></span>
-      <span class="strct-rb__label"><ng-content /></span>
+      <span class="strct-rb__text">
+        @if (projected()) {
+          <span class="strct-rb__desc strct-rb__desc--projected" [id]="projDescId">
+            <ng-content select="[strctControlDescription]" />
+          </span>
+        }
+        <span class="strct-rb__label" [id]="labelId">
+          @if (card() && icon()) {
+            <strct-icon class="strct-rb__icon" [name]="icon()" [size]="15" />
+          }
+          <ng-content />
+        </span>
+        @if (description()) {
+          <span class="strct-rb__desc" [id]="descId">{{ description() }}</span>
+        }
+      </span>
     </label>
-  `, styles: [".strct-rb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-rb--disabled{opacity:.5;cursor:not-allowed}.strct-rb__native{position:absolute;opacity:0;width:0;height:0}.strct-rb__dot{position:relative;width:17px;height:17px;border-radius:50%;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);transition:border-color .14s ease}.strct-rb__dot:after{content:\"\";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .14s ease}.strct-rb__native:checked+.strct-rb__dot{border-color:var(--acc)}.strct-rb__native:checked+.strct-rb__dot:after{transform:scale(1)}.strct-rb__native:focus-visible+.strct-rb__dot{box-shadow:0 0 0 3px var(--acc18)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+  `, styles: [".strct-rb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-rb--disabled{opacity:.5;cursor:not-allowed}.strct-rb__native{position:absolute;opacity:0;width:0;height:0}.strct-rb__dot{position:relative;width:17px;height:17px;border-radius:50%;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);transition:border-color .14s ease}.strct-rb__dot:after{content:\"\";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .14s ease}.strct-rb__native:checked+.strct-rb__dot{border-color:var(--acc)}.strct-rb__native:checked+.strct-rb__dot:after{transform:scale(1)}.strct-rb__native:focus-visible+.strct-rb__dot{box-shadow:0 0 0 3px var(--acc18)}.strct-rb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-rb__label{display:inline-flex;align-items:center;gap:6px}.strct-rb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-rb__desc--projected{order:1}.strct-rb--described{align-items:flex-start}.strct-rb--described .strct-rb__dot{margin-block-start:1px}.strct-rb--card{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);height:100%;box-sizing:border-box;transition:border-color .14s ease,background .14s ease}.strct-rb--card:hover:not(.strct-rb--disabled){border-color:var(--b3)}.strct-rb--card.strct-rb--checked{border-color:var(--acc);background:var(--acc-s)}.strct-rb--card .strct-rb__label{font-weight:600}.strct-rb__icon{color:var(--acc);flex:none}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctControlDescription), { isSignal: true }] }] } });
 
 /**
  * One-of-N selection rendered as a joined segmented control with managed
@@ -8852,7 +9122,7 @@ class StrctChips {
         (blur)="commitDraft(); onTouched()"
       />
     </div>
-  `, isInline: true, styles: [".strct-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:38px;padding:5px 8px;background:var(--bg-2);border:1px solid var(--b2);border-radius:6px;cursor:text;transition:border-color .14s ease,box-shadow .14s ease}.strct-chips:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-chips__input{flex:1;min-width:80px;border:0;outline:none;background:transparent;font-family:var(--font);font-size:13px;color:var(--t1);padding:3px 2px}.strct-chips__input::placeholder{color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctTag, selector: "strct-tag", inputs: ["status", "removable", "disabled", "removeLabel"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:38px;padding:5px 8px;background:var(--bg-2);border:1px solid var(--b2);border-radius:6px;cursor:text;transition:border-color .14s ease,box-shadow .14s ease}.strct-chips:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-chips__input{flex:1;min-width:80px;border:0;outline:none;background:transparent;font-family:var(--font);font-size:13px;color:var(--t1);padding:3px 2px}.strct-chips__input::placeholder{color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctTag, selector: "strct-tag", inputs: ["status", "removable", "disabled", "removeLabel", "interactive", "shape", "mono"], outputs: ["removed", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChips, decorators: [{
             type: Component,
@@ -11853,68 +12123,342 @@ 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;')
+    /** 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()));
+            }
+        }
+        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 }] }] } });
+
+/**
+ * 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.
+ */
+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;
+}
+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);
+}
+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) {
@@ -12216,8 +12760,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 */
@@ -12592,9 +13137,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))
@@ -12603,7 +13219,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();
@@ -13716,16 +14332,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"
@@ -13737,7 +14384,7 @@ class StrctDatagrid {
                             }"
                           />
                         } @else {
-                          {{ row[col.key] }}
+                          {{ displayValue(row, col) }}
                         }
                       </td>
                     }
@@ -13872,7 +14519,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", "description"], 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,
@@ -13885,6 +14532,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">
@@ -14249,18 +14899,49 @@ 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()"
-                          />
-                        } @else if (cellTemplate(col.key); as tpl) {
-                          <ng-container
+                          @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"
                             [ngTemplateOutletContext]="{
                               $implicit: row,
@@ -14270,7 +14951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                             }"
                           />
                         } @else {
-                          {{ row[col.key] }}
+                          {{ displayValue(row, col) }}
                         }
                       </td>
                     }
@@ -14411,7 +15092,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']]
@@ -19473,7 +20154,7 @@ class StrctTransfer {
         }
       </ul>
     </div>
-  `, isInline: true, styles: [".strct-tf{display:flex;align-items:stretch;gap:10px;width:100%}.strct-tf__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:9px}.strct-tf__head{display:flex;align-items:baseline;gap:8px}.strct-tf__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-tf__count{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-tf__search{width:100%}.strct-tf__list{list-style:none;margin:0;padding:0;min-height:120px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:1px}.strct-tf__item{display:flex;align-items:center;padding:2px 4px;border-radius:5px;color:var(--t1);font-size:12.5px}.strct-tf__item strct-icon{margin-inline-end:6px}.strct-tf__item:hover{background:var(--bg-3)}.strct-tf__item--disabled{color:var(--t4);cursor:default}.strct-tf__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tf__empty{padding:12px 8px;font-size:12px;color:var(--t3)}.strct-tf__mid{display:flex;flex-direction:column;justify-content:center;gap:8px}[dir=rtl] .strct-tf__mid strct-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { 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-tf{display:flex;align-items:stretch;gap:10px;width:100%}.strct-tf__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-2);border:1px solid var(--b2);border-radius:9px}.strct-tf__head{display:flex;align-items:baseline;gap:8px}.strct-tf__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-tf__count{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-tf__search{width:100%}.strct-tf__list{list-style:none;margin:0;padding:0;min-height:120px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:1px}.strct-tf__item{display:flex;align-items:center;padding:2px 4px;border-radius:5px;color:var(--t1);font-size:12.5px}.strct-tf__item strct-icon{margin-inline-end:6px}.strct-tf__item:hover{background:var(--bg-3)}.strct-tf__item--disabled{color:var(--t4);cursor:default}.strct-tf__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tf__empty{padding:12px 8px;font-size:12px;color:var(--t3)}.strct-tf__mid{display:flex;flex-direction:column;justify-content:center;gap:8px}[dir=rtl] .strct-tf__mid strct-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel", "description"], outputs: ["checkedChange"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTransfer, decorators: [{
             type: Component,
@@ -20974,280 +21655,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, 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 }] }] } });
 
-/**
- * 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.
- *
- *   <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.
- */
-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);
-        }
-    }
-    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;
-            }
-        }
-    }
-    /** 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()));
-            }
-        }
-        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 }] }] } });
-
 /**
  * A generic anchored overlay panel for arbitrary projected content — the
  * public primitive behind menus, signposts and rich pickers:
@@ -23114,5 +23521,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, 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 };
+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, StrctControlDescription, 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, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map