@akcelik/strct 1.16.0 → 1.19.0

package/fesm2022/akcelik-strct.mjs

@@ -3195,7 +3195,7 @@ class StrctModal {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 480px) + 2px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 480px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation: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: "21.2.16", ngImport: i0, type: StrctModal, decorators: [{
             type: Component,
@@ -3254,7 +3254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     }
   `, host: {
                         '(document:keydown.escape)': 'onEscape()',
-                    }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
+                    }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 480px) + 2px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 480px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], chromeless: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeless", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
@@ -3400,7 +3400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *   </strct-dropdown>
  */
 class StrctDropdown {
-    host = inject((ElementRef));
+    host = inject(ElementRef);
     /** Horizontal alignment of the menu. */
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     /**
@@ -3419,16 +3419,83 @@ class StrctDropdown {
         // Angular has already read the input by now; the DOM attribute must go.
         this.host.nativeElement.removeAttribute('popover');
     }
+    /** Where focus was when the menu opened — restored on Escape/selection. */
+    lastFocused = null;
     toggle() {
-        this.open.update((v) => !v);
+        const willOpen = !this.open();
+        if (willOpen)
+            this.lastFocused = document.activeElement;
+        this.open.set(willOpen);
+        if (willOpen && !this.popover())
+            this.focusInitialItem();
+    }
+    /** Open (if closed) and move focus into the menu — ArrowDown on the trigger. */
+    openMenu() {
+        if (this.open())
+            return;
+        this.lastFocused = document.activeElement;
+        this.open.set(true);
+        if (!this.popover())
+            this.focusInitialItem();
     }
-    close() {
+    close(restoreFocus = false) {
         this.open.set(false);
+        if (restoreFocus)
+            this.lastFocused?.focus?.();
     }
-    /** Menu items close on activation; popover form controls never do. */
-    onInnerActivate() {
-        if (!this.popover())
+    /**
+     * Menu mode closes ONLY on a real item activation — a click that lands on
+     * the menu's padding or a divider (a 2px miss) keeps it open instead of
+     * throwing the whole interaction away. Popover form controls never close.
+     */
+    onInnerActivate(event) {
+        if (this.popover())
+            return;
+        const item = event.target?.closest('strct-dropdown-item');
+        if (item && item.getAttribute('aria-disabled') !== 'true')
+            this.close(true);
+    }
+    /** APG menu keyboarding: arrows rove, Home/End jump, Enter/Space activate. */
+    onMenuKeydown(event) {
+        if (this.popover())
+            return;
+        const items = this.enabledItems();
+        if (!items.length)
+            return;
+        const idx = items.indexOf(event.target);
+        const key = event.key;
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault();
+            const next = idx === -1
+                ? key === 'ArrowDown'
+                    ? 0
+                    : items.length - 1
+                : (idx + (key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+            items[next].focus();
+        }
+        else if (key === 'Home' || key === 'End') {
+            event.preventDefault();
+            items[key === 'Home' ? 0 : items.length - 1].focus();
+        }
+        else if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            event.target.click();
+        }
+        else if (key === 'Tab') {
             this.close();
+        }
+    }
+    enabledItems() {
+        return [
+            ...this.host.nativeElement.querySelectorAll('strct-dropdown-item:not([aria-disabled="true"])'),
+        ];
+    }
+    /** Focus the selected item if there is one, else the first — after render. */
+    focusInitialItem() {
+        setTimeout(() => {
+            const items = this.enabledItems();
+            (items.find((i) => i.getAttribute('aria-checked') === 'true') ?? items[0])?.focus();
+        });
     }
     onDocClick(event) {
         if (this.open() && !this.host.nativeElement.contains(event.target)) {
@@ -3436,7 +3503,8 @@ class StrctDropdown {
         }
     }
     onEscape() {
-        this.close();
+        if (this.open())
+            this.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, popoverLabel: { classPropertyName: "popoverLabel", publicName: "popoverLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
@@ -3462,9 +3530,8 @@ class StrctDropdown {
         [attr.role]="popover() ? 'dialog' : 'menu'"
         [attr.aria-label]="popover() ? popoverLabel() : null"
         [attr.tabindex]="popover() ? -1 : 0"
-        (click)="onInnerActivate()"
-        (keydown.enter)="onInnerActivate()"
-        (keydown.space)="onInnerActivate()"
+        (click)="onInnerActivate($event)"
+        (keydown)="onMenuKeydown($event)"
       >
         <ng-content />
       </div>
@@ -3496,9 +3563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         [attr.role]="popover() ? 'dialog' : 'menu'"
         [attr.aria-label]="popover() ? popoverLabel() : null"
         [attr.tabindex]="popover() ? -1 : 0"
-        (click)="onInnerActivate()"
-        (keydown.enter)="onInnerActivate()"
-        (keydown.space)="onInnerActivate()"
+        (click)="onInnerActivate($event)"
+        (keydown)="onMenuKeydown($event)"
       >
         <ng-content />
       </div>
@@ -3518,8 +3584,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class StrctDropdownTrigger {
     dd = inject(StrctDropdown, { optional: true });
+    onArrowDown(event) {
+        if (!this.dd || this.dd.popover())
+            return;
+        event.preventDefault();
+        this.dd.openMenu();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctDropdownTrigger, isStandalone: true, selector: "[strctDropdownTrigger]", host: { properties: { "attr.aria-haspopup": "dd ? (dd.popover() ? 'dialog' : 'menu') : null", "attr.aria-expanded": "dd ? dd.open() : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctDropdownTrigger, isStandalone: true, selector: "[strctDropdownTrigger]", host: { listeners: { "keydown.arrowdown": "onArrowDown($event)" }, properties: { "attr.aria-haspopup": "dd ? (dd.popover() ? 'dialog' : 'menu') : null", "attr.aria-expanded": "dd ? dd.open() : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownTrigger, decorators: [{
             type: Directive,
@@ -3528,27 +3600,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     host: {
                         '[attr.aria-haspopup]': "dd ? (dd.popover() ? 'dialog' : 'menu') : null",
                         '[attr.aria-expanded]': 'dd ? dd.open() : null',
+                        '(keydown.arrowdown)': 'onArrowDown($event)',
                     },
                 }]
         }] });
 /** A selectable row inside a `<strct-dropdown>`. */
 class StrctDropdownItem {
+    /**
+     * Select-like usage: bind `selected` and the item becomes a
+     * `menuitemradio` with `aria-checked`, a leading ✓ on the current choice
+     * and an aligned lead slot — so reopening the menu shows what is chosen.
+     * Leave unbound for plain action items.
+     */
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     /** Danger. */
     critical = input(false, { ...(ngDevMode ? { debugName: "critical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Static disable flag. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, properties: { "class.strct-dd__item--critical": "critical()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover{background:var(--bg-3)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "disabled() ? null : -1", "class.strct-dd__item--critical": "critical()", "class.strct-dd__item--selected": "selected() === true", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `@if (selected() !== null) {
+      <span class="strct-dd__check" aria-hidden="true">
+        @if (selected()) {
+          <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
+        }
+      </span>
+    }
+    <ng-content />`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\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: "21.2.16", ngImport: i0, type: StrctDropdownItem, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
+            args: [{ selector: 'strct-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `@if (selected() !== null) {
+      <span class="strct-dd__check" aria-hidden="true">
+        @if (selected()) {
+          <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
+        }
+      </span>
+    }
+    <ng-content />`, host: {
                         class: 'strct-dd__item',
-                        role: 'menuitem',
+                        '[attr.role]': "selected() === null ? 'menuitem' : 'menuitemradio'",
+                        '[attr.aria-checked]': 'selected()',
+                        '[attr.tabindex]': 'disabled() ? null : -1',
                         '[class.strct-dd__item--critical]': 'critical()',
+                        '[class.strct-dd__item--selected]': 'selected() === true',
                         '[attr.aria-disabled]': 'disabled() || null',
-                    }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover{background:var(--bg-3)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"] }]
-        }], propDecorators: { critical: [{ type: i0.Input, args: [{ isSignal: true, alias: "critical", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"] }]
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], critical: [{ type: i0.Input, args: [{ isSignal: true, alias: "critical", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /** Thin separator between groups of menu items. */
 class StrctDropdownDivider {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdownDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3817,7 +3914,7 @@ function provideStrctWizardDefaults(defaults) {
  * rail — dashed-ring states (idle ⊙ / active ●⊙ / done ✓), a progress bar
  * with an “n/N” counter, and click-back navigation to visited steps — plus an
  * optional right column projected via `strctWizardAside` (live summaries).
- * The rail never flips horizontal: under ~720px of component width it
+ * The rail never flips horizontal: under ~700px of component width it
  * collapses to a compact vertical ring column (container query).
  *
  *   <strct-wizard vertical title="Create virtual machine">
@@ -3855,6 +3952,13 @@ class StrctWizard {
     flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Rail heading shown above the progress bar (vertical mode). */
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Name the content pane after the active step (vertical mode): the step's
+     * `label` as a heading, its `description` as the lede. In the compact
+     * narrow rail this is the only visible step name. On by default;
+     * `[contentHeader]="false"` opts out.
+     */
+    contentHeader = input(true, { ...(ngDevMode ? { debugName: "contentHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Label for the final-step button (default "Finish"). */
     finishLabel = input('Finish', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
     /** Labels for the Back / Next / Cancel buttons (localizable). */
@@ -3880,6 +3984,7 @@ class StrctWizard {
     /** Furthest step reached — drives the progress bar and rail clickability. */
     maxVisited = signal(0, ...(ngDevMode ? [{ debugName: "maxVisited" }] : /* istanbul ignore next */ []));
     progressPct = computed(() => this.steps().length ? (this.maxVisited() / this.steps().length) * 100 : 0, ...(ngDevMode ? [{ debugName: "progressPct" }] : /* istanbul ignore next */ []));
+    activeStep = computed(() => this.steps()[this.current()] ?? null, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
     isLast = computed(() => this.current() >= this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
     /** Whether the current step permits advancing (its `canAdvance`). */
     canAdvance = computed(() => this.steps()[this.current()]?.canAdvance() ?? true, ...(ngDevMode ? [{ debugName: "canAdvance" }] : /* istanbul ignore next */ []));
@@ -3917,7 +4022,7 @@ class StrctWizard {
             this.finished.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submittingLabel: { classPropertyName: "submittingLabel", publicName: "submittingLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, stepsLabel: { classPropertyName: "stepsLabel", publicName: "stepsLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { properties: { "class.strct-wiz--vertical": "vertical()", "class.strct-wiz--flush": "flush()" }, classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }, { propertyName: "asideDef", first: true, predicate: StrctWizardAside, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, contentHeader: { classPropertyName: "contentHeader", publicName: "contentHeader", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submittingLabel: { classPropertyName: "submittingLabel", publicName: "submittingLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, stepsLabel: { classPropertyName: "stepsLabel", publicName: "stepsLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { properties: { "class.strct-wiz--vertical": "vertical()", "class.strct-wiz--flush": "flush()" }, classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }, { propertyName: "asideDef", first: true, predicate: StrctWizardAside, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="strct-wiz__layout"
       [class.strct-wiz__layout--v]="vertical()"
@@ -3925,11 +4030,13 @@ class StrctWizard {
     >
       @if (vertical()) {
         <nav class="strct-wiz__rail" [attr.aria-label]="stepsLabel()">
-          @if (title()) {
-            <div class="strct-wiz__vtitle">{{ title() }}</div>
-          }
-          <div class="strct-wiz__pbar" aria-hidden="true">
-            <i [style.width.%]="progressPct()"></i>
+          <div class="strct-wiz__railhead">
+            @if (title()) {
+              <div class="strct-wiz__vtitle">{{ title() }}</div>
+            }
+            <div class="strct-wiz__pbar" aria-hidden="true">
+              <i [style.width.%]="progressPct()"></i>
+            </div>
           </div>
           <div class="strct-wiz__pcount">
             {{ maxVisited() }}/{{ steps().length }} {{ progressLabel() }}
@@ -3976,6 +4083,14 @@ class StrctWizard {
       }
 
       <div class="strct-wiz__main">
+        @if (vertical() && contentHeader() && activeStep(); as step) {
+          <div class="strct-wiz__chead">
+            <h2 class="strct-wiz__ctitle">{{ step.label() }}</h2>
+            @if (step.description()) {
+              <p class="strct-wiz__clede">{{ step.description() }}</p>
+            }
+          </div>
+        }
         <div class="strct-wiz__content"><ng-content /></div>
 
         <div class="strct-wiz__foot">
@@ -4015,7 +4130,7 @@ class StrctWizard {
         </aside>
       }
     </div>
-  `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(0,1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__rail{display:flex;flex-direction:column;padding:20px 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:12px}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 16px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 720px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__vtitle,.strct-wiz__pbar,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);padding:15px 24px 0;border-bottom:1px solid var(--b1);overflow:hidden}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-wiz__rail{display:flex;flex-direction:column;padding:0 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__railhead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:auto}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 14px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 980px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__chead{height:auto;padding:14px 18px 11px}.strct-wiz__railhead,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, decorators: [{
             type: Component,
@@ -4027,11 +4142,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     >
       @if (vertical()) {
         <nav class="strct-wiz__rail" [attr.aria-label]="stepsLabel()">
-          @if (title()) {
-            <div class="strct-wiz__vtitle">{{ title() }}</div>
-          }
-          <div class="strct-wiz__pbar" aria-hidden="true">
-            <i [style.width.%]="progressPct()"></i>
+          <div class="strct-wiz__railhead">
+            @if (title()) {
+              <div class="strct-wiz__vtitle">{{ title() }}</div>
+            }
+            <div class="strct-wiz__pbar" aria-hidden="true">
+              <i [style.width.%]="progressPct()"></i>
+            </div>
           </div>
           <div class="strct-wiz__pcount">
             {{ maxVisited() }}/{{ steps().length }} {{ progressLabel() }}
@@ -4078,6 +4195,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       }
 
       <div class="strct-wiz__main">
+        @if (vertical() && contentHeader() && activeStep(); as step) {
+          <div class="strct-wiz__chead">
+            <h2 class="strct-wiz__ctitle">{{ step.label() }}</h2>
+            @if (step.description()) {
+              <p class="strct-wiz__clede">{{ step.description() }}</p>
+            }
+          </div>
+        }
         <div class="strct-wiz__content"><ng-content /></div>
 
         <div class="strct-wiz__foot">
@@ -4121,8 +4246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'strct-wiz',
                         '[class.strct-wiz--vertical]': 'vertical()',
                         '[class.strct-wiz--flush]': 'flush()',
-                    }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(0,1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__rail{display:flex;flex-direction:column;padding:20px 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:12px}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 16px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 720px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__vtitle,.strct-wiz__pbar,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], asideDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWizardAside), { isSignal: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submittingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submittingLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], stepsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
+                    }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);padding:15px 24px 0;border-bottom:1px solid var(--b1);overflow:hidden}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-wiz__rail{display:flex;flex-direction:column;padding:0 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__railhead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:auto}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 14px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 980px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__chead{height:auto;padding:14px 18px 11px}.strct-wiz__railhead,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], asideDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWizardAside), { isSignal: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], contentHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHeader", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submittingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submittingLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], stepsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
 
 /**
  * Separator rule. Horizontal by default; pass `vertical` for an inline rule.
@@ -15005,7 +15130,7 @@ class StrctSplitButton {
         }
       </strct-dropdown>
     </div>
-  `, isInline: true, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 12px}.strct-sbt__main{border-start-start-radius:7px;border-end-start-radius:7px;border-inline-end:0}.strct-sbt__chev{padding:5px 6px;border-start-end-radius:7px;border-end-end-radius:7px;border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:1}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["critical", "disabled"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { 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-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 12px}.strct-sbt__main{border-start-start-radius:7px;border-end-start-radius:7px;border-inline-end:0}.strct-sbt__chev{padding:5px 6px;border-start-end-radius:7px;border-end-end-radius:7px;border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:1}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["selected", "critical", "disabled"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { 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: "21.2.16", ngImport: i0, type: StrctSplitButton, decorators: [{
             type: Component,