@akcelik/strct 4.10.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,
@@ -14249,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__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }, { kind: "component", type: StrctSelect, selector: "strct-select", inputs: ["options", "placeholder", "listLabel", "emptyText", "disabled", "compareWith"] }, { kind: "component", type: StrctNumber, selector: "strct-number", inputs: ["min", "max", "step", "placeholder", "incrementLabel", "decrementLabel", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, 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,
@@ -19884,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,
@@ -23251,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