@akcelik/strct 5.12.0 → 5.14.0

package/fesm2022/akcelik-strct.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, contentChildren, HostListener, effect, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, ViewContainerRef, Injector, viewChildren, Renderer2, Pipe, afterRenderEffect } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, HostListener, TemplateRef, contentChildren, viewChild, effect, untracked, model, output, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, forwardRef, DestroyRef, contentChild, InjectionToken, ViewContainerRef, Injector, viewChildren, Renderer2, Pipe, afterRenderEffect } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
@@ -1026,122 +1027,788 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             args: [{ selector: '[strctOverlay]' }]
         }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctOverlay", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctOverlayPlacement", required: false }] }], matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctOverlayMatchWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctOverlayGap", required: false }] }] } });
 
-let shellCounter = 0;
-/** Shared layout state between shell parts. */
-class StrctShellService {
-    mobileNavOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileNavOpen" }] : /* istanbul ignore next */ []));
-    /** Id of the vertical nav controlled by the header drawer toggle. */
-    navId = `strct-vnav-${++shellCounter}`;
+/**
+ * Dev-mode diagnostics for combinations a component accepts but cannot honour.
+ *
+ * Every message names what was ignored and what to do instead. Keyed: a
+ * condition warns once per page load, not once per change detection.
+ *
+ * Production cost: none, PROVIDED each call site is guarded INLINE with
+ *   if (typeof ngDevMode !== 'undefined' && ngDevMode) { … }
+ * Production builds define `ngDevMode` as false, and the minifier then drops
+ * the whole block — messages included. A helper function returning that same
+ * expression would NOT be folded across the call, so the check and its
+ * strings would ship; that is why no such helper exists here.
+ */
+const warned = new Set();
+function strctDevWarn(key, message) {
+    if (typeof ngDevMode === 'undefined' || !ngDevMode || warned.has(key))
+        return;
+    warned.add(key);
+    console.warn(message);
+}
+/** Test hook: forget which warnings have fired. Not part of the public API. */
+function resetStrctDevWarnings() {
+    warned.clear();
 }
+
 /**
- * Application frame: a full-viewport grid of header / body / footer rows.
- *   <strct-shell>
- *     <strct-header>…</strct-header>
- *     <div strctShellMain>… sidebar + content …</div>
- *     <strct-footer>…</strct-footer>
- *   </strct-shell>
+ * Click-to-open menu:
+ *   <strct-dropdown align="end">
+ *     <button strct-button strctDropdownTrigger>Actions</button>
+ *     <strct-dropdown-item>Rename</strct-dropdown-item>
+ *     <strct-dropdown-item critical>Delete</strct-dropdown-item>
+ *   </strct-dropdown>
+ *
+ * With `popover`, the panel holds *form controls* instead of menu items: an
+ * inner click no longer closes it (only outside click / Escape do), and the
+ * semantics switch from `role="menu"` to a labeled `role="dialog"` — a panel
+ * of selects is not a menu to a screen reader either:
+ *
+ *   <strct-dropdown popover popoverLabel="Filters">
+ *     <button strct-button strctDropdownTrigger>Filters</button>
+ *     <strct-field label="Severity">…</strct-field>
+ *   </strct-dropdown>
  */
-class StrctShell {
+class StrctDropdown {
+    host = inject(ElementRef);
+    /** Horizontal alignment of the menu. */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     /**
-     * Id of the main region. Given one, the shell renders "Skip to main content"
-     * as its first focusable element — invisible until focused. Null (the
-     * default) renders nothing, so existing shells are unchanged.
+     * Popover mode for panels holding form controls (filter/settings panels):
+     * inner clicks never close the panel — only outside click / Escape do —
+     * and it renders as a labeled `role="dialog"` instead of a menu.
      */
-    skipLinkTarget = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "skipLinkTarget" }] : /* istanbul ignore next */ []));
-    /** The link's text (localisable). */
-    skipLinkLabel = input('Skip to main content', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : /* istanbul ignore next */ []));
-    /** The name of the backdrop that closes the navigation drawer on a phone. */
-    closeNavLabel = input('Close navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeNavLabel" }] : /* istanbul ignore next */ []));
-    /** The drawer's open state lives on the shell, and so does its backdrop. */
-    shell = inject(StrctShellService);
-    doc = inject(DOCUMENT$1);
+    popover = input(false, { ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the popover dialog (localizable). */
+    popoverLabel = input('Filters', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popoverLabel" }] : /* istanbul ignore next */ []));
     /**
-     * Moves focus rather than only the scroll position: an href alone scrolls
-     * without focusing, so the next Tab would resume from the link.
+     * Only with `popover`: the panel's rows are controls in their own right — a
+     * theme switcher, a filter — so they keep a real tab stop instead of the
+     * `tabindex="-1"` a menu's items carry. Without it nothing inside a popover
+     * can be reached from the keyboard at all.
      */
-    skipToMain(event) {
-        const id = this.skipLinkTarget();
-        const target = id ? this.doc.getElementById(id) : null;
-        if (!target)
+    focusable = input(false, { ...(ngDevMode ? { debugName: "focusable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // The static `popover` attribute collides with the native HTML Popover
+        // API: the UA styles [popover] hosts (Canvas background, medium border,
+        // fixed positioning) — a white frame around the trigger in dark themes.
+        // 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() {
+        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;
-        event.preventDefault();
-        if (!target.hasAttribute('tabindex'))
-            target.setAttribute('tabindex', '-1');
-        target.focus();
-        // Optional: not every environment implements it (jsdom does not).
-        target.scrollIntoView?.({ block: 'start' });
+        this.lastFocused = document.activeElement;
+        this.open.set(true);
+        if (!this.popover())
+            this.focusInitialItem();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", inputs: { skipLinkTarget: { classPropertyName: "skipLinkTarget", publicName: "skipLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, closeNavLabel: { classPropertyName: "closeNavLabel", publicName: "closeNavLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
-    @if (skipLinkTarget()) {
-      <!-- The first focusable element on the page, invisible until focused. -->
-      <a
-        class="strct-shell__skip"
-        [attr.href]="'#' + skipLinkTarget()"
-        (click)="skipToMain($event)"
-        >{{ skipLinkLabel() }}</a
-      >
+    close(restoreFocus = false) {
+        this.open.set(false);
+        if (restoreFocus)
+            this.lastFocused?.focus?.();
     }
-    <ng-content select="strct-header" />
-    @if (shell.mobileNavOpen()) {
-      <!-- Outside the drawer, which is transformed and would otherwise be this
-           fixed element's containing block (BUG-53-01). -->
-      <div
-        class="strct-vnav__backdrop"
-        tabindex="-1"
-        role="button"
-        [attr.aria-label]="closeNavLabel()"
-        (click)="shell.mobileNavOpen.set(false)"
-        (keydown.enter)="shell.mobileNavOpen.set(false)"
-        (keydown.space)="shell.mobileNavOpen.set(false)"
-      ></div>
+    /**
+     * 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 target = event.target;
+        if (target?.closest('.strct-dd__itemaction'))
+            return; // the second action is not the item
+        const item = target?.closest('strct-dropdown-item');
+        if (item && item.getAttribute('aria-disabled') !== 'true')
+            this.close(true);
     }
-    <div class="strct-shell__main"><ng-content /></div>
-    <ng-content select="strct-footer" />
-  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [StrctShellService], template: `
-    @if (skipLinkTarget()) {
-      <!-- The first focusable element on the page, invisible until focused. -->
-      <a
-        class="strct-shell__skip"
-        [attr.href]="'#' + skipLinkTarget()"
-        (click)="skipToMain($event)"
-        >{{ skipLinkLabel() }}</a
-      >
+    /** APG menu keyboarding: arrows rove, Home/End jump, Enter/Space activate. */
+    onMenuKeydown(event) {
+        if (this.popover())
+            return;
+        const items = this.navItems();
+        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();
+            const target = event.target;
+            if (target.getAttribute('aria-disabled') !== 'true')
+                target.click();
+        }
+        else if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Delete') {
+            this.onItemActionKey(event, key);
+        }
+        else if (key === 'Tab') {
+            this.close();
+        }
     }
-    <ng-content select="strct-header" />
-    @if (shell.mobileNavOpen()) {
-      <!-- Outside the drawer, which is transformed and would otherwise be this
-           fixed element's containing block (BUG-53-01). -->
-      <div
-        class="strct-vnav__backdrop"
-        tabindex="-1"
-        role="button"
-        [attr.aria-label]="closeNavLabel()"
-        (click)="shell.mobileNavOpen.set(false)"
-        (keydown.enter)="shell.mobileNavOpen.set(false)"
-        (keydown.space)="shell.mobileNavOpen.set(false)"
-      ></div>
+    /**
+     * An item with a trailing action has two targets: the right arrow reaches the
+     * action from its item, the left arrow returns, and Delete on the item
+     * triggers it (the WAI-ARIA pattern for a secondary action). Keys that do not
+     * apply are left alone, so submenus keep their own arrow behaviour.
+     */
+    onItemActionKey(event, key) {
+        const target = event.target;
+        if (key === 'ArrowLeft') {
+            const item = target.closest('strct-dropdown-item');
+            if (!target.classList.contains('strct-dd__itemaction') || !item)
+                return;
+            event.preventDefault();
+            item.focus();
+            return;
+        }
+        const item = target.closest('strct-dropdown-item');
+        const action = item?.querySelector('.strct-dd__itemaction');
+        if (!item || item !== target || !action)
+            return;
+        event.preventDefault();
+        if (key === 'ArrowRight')
+            action.focus();
+        else
+            action.click();
     }
-    <div class="strct-shell__main"><ng-content /></div>
-    <ng-content select="strct-footer" />
-  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
-        }], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], closeNavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeNavLabel", required: false }] }] } });
-/** Top application bar. Holds brand on the left and actions on the right. */
-class StrctHeader {
-    /** Accessible label of the mobile drawer toggle. */
+    enabledItems() {
+        return [
+            ...this.host.nativeElement.querySelectorAll('strct-dropdown-item:not([aria-disabled="true"]), strct-submenu .strct-submenu__trigger'),
+        ];
+    }
+    /** What the arrow keys visit: enabled items, plus disabled ones that carry a
+     *  hint (so the reason can be read). The menu still opens on an enabled one. */
+    navItems() {
+        const host = this.host.nativeElement;
+        const rows = [
+            ...host.querySelectorAll('strct-dropdown-item'),
+            ...host.querySelectorAll('strct-submenu .strct-submenu__trigger'),
+        ].filter((el) => el.getAttribute('aria-disabled') !== 'true' ||
+            el.classList.contains('strct-dd__item--hinted'));
+        // Two queries, so restore DOM order explicitly. (A single comma-separated
+        // selector is DOM-ordered in browsers, but not in every DOM implementation
+        // — jsdom returns it grouped, which scrambles arrow-key order in tests.)
+        return rows.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+    }
+    /** 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)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        if (this.open())
+            this.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
+    <!--
+      The wrapper is intentionally inert: the projected trigger should be a
+      real button (nesting interactives fails axe). Its native click —
+      pointer or Enter/Space — bubbles here; the strctDropdownTrigger
+      directive puts aria-haspopup/aria-expanded on the button itself.
+    -->
+    <div #trigger class="strct-dd__trigger" (click)="toggle()">
+      <ng-content select="[strctDropdownTrigger]" />
+    </div>
+    <!--
+      One panel for both modes (a default ng-content per @if branch would strand
+      the projected content in the inactive branch) — mode picks the semantics.
+    -->
+    @if (open()) {
+      <div
+        class="strct-dd__menu"
+        [class.strct-dd__menu--popover]="popover()"
+        [strctOverlay]="trigger"
+        [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
+        [attr.role]="popover() ? 'dialog' : 'menu'"
+        [attr.aria-label]="popover() ? popoverLabel() : null"
+        [attr.tabindex]="popover() ? -1 : 0"
+        (click)="onInnerActivate($event)"
+        (keydown)="onMenuKeydown($event)"
+      >
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown);min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctOverlay], template: `
+    <!--
+      The wrapper is intentionally inert: the projected trigger should be a
+      real button (nesting interactives fails axe). Its native click —
+      pointer or Enter/Space — bubbles here; the strctDropdownTrigger
+      directive puts aria-haspopup/aria-expanded on the button itself.
+    -->
+    <div #trigger class="strct-dd__trigger" (click)="toggle()">
+      <ng-content select="[strctDropdownTrigger]" />
+    </div>
+    <!--
+      One panel for both modes (a default ng-content per @if branch would strand
+      the projected content in the inactive branch) — mode picks the semantics.
+    -->
+    @if (open()) {
+      <div
+        class="strct-dd__menu"
+        [class.strct-dd__menu--popover]="popover()"
+        [strctOverlay]="trigger"
+        [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
+        [attr.role]="popover() ? 'dialog' : 'menu'"
+        [attr.aria-label]="popover() ? popoverLabel() : null"
+        [attr.tabindex]="popover() ? -1 : 0"
+        (click)="onInnerActivate($event)"
+        (keydown)="onMenuKeydown($event)"
+      >
+        <ng-content />
+      </div>
+    }
+  `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown);min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+/**
+ * Marks (and upgrades) the dropdown's trigger element. The attribute alone is
+ * enough for content projection; importing the directive additionally wires
+ * `aria-haspopup` / `aria-expanded` onto the real button.
+ */
+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: "22.1.4", ngImport: i0, type: StrctDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", 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: "22.1.4", ngImport: i0, type: StrctDropdownTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownTrigger]',
+                    host: {
+                        '[attr.aria-haspopup]': "dd ? (dd.popover() ? 'dialog' : 'menu') : null",
+                        '[attr.aria-expanded]': 'dd ? dd.open() : null',
+                        '(keydown.arrowdown)': 'onArrowDown($event)',
+                    },
+                }]
+        }] });
+let dropdownItemCounter = 0;
+/** A selectable row inside a `<strct-dropdown>`. */
+/**
+ * A second action at the end of a menu item — "delete this saved view" beside
+ * "open it". It stops its own click from reaching the item, so the item is not
+ * activated and the menu stays open, and it stays out of the Tab order: the
+ * right arrow reaches it from its item, the left arrow returns, and Delete on
+ * the item triggers it.
+ */
+class StrctDropdownItemAction {
+    onClick(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownItemAction, isStandalone: true, selector: "[strctDropdownItemAction]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "onClick($event)" }, classAttribute: "strct-dd__itemaction" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemAction]',
+                    host: {
+                        class: 'strct-dd__itemaction',
+                        tabindex: '-1',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/**
+ * A leading icon for a menu row, in a colour of its own:
+ * `<strct-icon strctDropdownItemIcon tone="var(--prod-acc)" name="shield" />`.
+ * The row keeps its text aligned whether or not the icon is there.
+ */
+class StrctDropdownItemIcon {
+    /** A colour token or value — a product's accent, say. */
+    tone = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctDropdownItemIcon, isStandalone: true, selector: "[strctDropdownItemIcon]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "tone() || null" }, classAttribute: "strct-dd__itemlead" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemIcon]',
+                    host: { class: 'strct-dd__itemlead', '[style.color]': 'tone() || null' },
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+/**
+ * The row's label, when the row also carries a description. A screen reader
+ * reads a row in DOM order, and a projected slot can only be declared before
+ * the catch-all one — so marking the label is what keeps "HyperStruct Backup"
+ * ahead of "2 VMs past RPO" in what the row is called. A row without a
+ * description does not need it.
+ */
+class StrctDropdownItemLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownItemLabel, isStandalone: true, selector: "[strctDropdownItemLabel]", host: { classAttribute: "strct-dd__itemlabel" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemLabel]',
+                    host: { class: 'strct-dd__itemlabel' },
+                }]
+        }] });
+/**
+ * A second, quieter line under a row's label: "● 2 VMs past RPO" under
+ * "HyperStruct Backup". It is inside the row, so it is part of what the row
+ * is called — put the label in `[strctDropdownItemLabel]` so it is read
+ * first.
+ */
+class StrctDropdownItemDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownItemDescription, isStandalone: true, selector: "[strctDropdownItemDescription]", host: { classAttribute: "strct-dd__itemdesc" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemDescription]',
+                    host: { class: 'strct-dd__itemdesc' },
+                }]
+        }] });
+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, /* @ts-ignore */
+    ...(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 });
+    /**
+     * A short explanation — typically why a disabled item is unavailable. Shown
+     * as the tooltip and given to assistive technology as the description; never
+     * rendered inline. A disabled item with a hint stays keyboard-reachable so
+     * its reason can be read; activation stays blocked.
+     */
+    hint = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    hintId = `strct-dd-item-${++dropdownItemCounter}-hint`;
+    /** The panel this row belongs to, when it is inside one. */
+    panel = inject(StrctDropdown, { optional: true });
+    /**
+     * A menu's rows are roved with the arrow keys, so they stay out of the tab
+     * order. A `popover [focusable]` is a panel of real controls, and its rows
+     * keep a tab stop of their own.
+     */
+    tabindex = computed(() => {
+        if (this.disabled() && !this.hint())
+            return null;
+        return this.panel?.popover() && this.panel.focusable() ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Without pointer-events:none (see the hinted style), a disabled item
+        // would pass clicks to the consumer's (click). Capture-phase at the target
+        // runs before those listeners, and stopping here also keeps the menu's own
+        // activate-and-close handler from seeing it.
+        const host = inject((ElementRef)).nativeElement;
+        // Dev-only: a description reads before an unmarked label, which is the
+        // one thing this slot must not do.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                if (host.querySelector('.strct-dd__itemdesc') &&
+                    !host.querySelector('.strct-dd__itemlabel')) {
+                    strctDevWarn('dd-item-description-without-label', '[strct] strct-dropdown-item: a [strctDropdownItemDescription] row reads its ' +
+                        'description before its label, because a slot can only be declared before the ' +
+                        'catch-all one. Wrap the label in [strctDropdownItemLabel].');
+                }
+            }
+        });
+        host.addEventListener('click', (event) => {
+            if (!this.disabled())
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }, { capture: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "tabindex()", "attr.title": "hint() || null", "attr.aria-describedby": "hint() ? hintId : null", "class.strct-dd__item--hinted": "!!hint()", "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>
+    }
+    <!-- Every selective slot is declared before the catch-all, or the
+         catch-all would swallow its content; the visual order is CSS's
+         (the label is raw text, which only source order can place). -->
+    <ng-content select="[strctDropdownItemIcon]" />
+    <ng-content select="[strctDropdownItemAction]" />
+    <span class="strct-dd__itemtext">
+      <ng-content select="[strctDropdownItemLabel]" />
+      <ng-content select="[strctDropdownItemDescription]" />
+    </span>
+    <ng-content />
+    @if (hint()) {
+      <!-- hidden: kept out of the item's accessible NAME, still read as its
+           description through aria-describedby. -->
+      <span [id]="hintId" hidden>{{ hint() }}</span>
+    }`, 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__itemaction{order:1;margin-inline-start:auto;flex:none}.strct-dd__itemlead{flex:none;display:inline-flex;align-items:center}.strct-dd__itemlabel{min-width:0;overflow:hidden;text-overflow:ellipsis}.strct-dd__itemtext{display:contents}.strct-dd__item:has(.strct-dd__itemdesc) .strct-dd__itemtext{display:flex;flex-direction:column;row-gap:2px;min-width:0}.strct-dd__itemdesc{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t2)}.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}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, decorators: [{
+            type: Component,
+            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>
+    }
+    <!-- Every selective slot is declared before the catch-all, or the
+         catch-all would swallow its content; the visual order is CSS's
+         (the label is raw text, which only source order can place). -->
+    <ng-content select="[strctDropdownItemIcon]" />
+    <ng-content select="[strctDropdownItemAction]" />
+    <span class="strct-dd__itemtext">
+      <ng-content select="[strctDropdownItemLabel]" />
+      <ng-content select="[strctDropdownItemDescription]" />
+    </span>
+    <ng-content />
+    @if (hint()) {
+      <!-- hidden: kept out of the item's accessible NAME, still read as its
+           description through aria-describedby. -->
+      <span [id]="hintId" hidden>{{ hint() }}</span>
+    }`, host: {
+                        class: 'strct-dd__item',
+                        '[attr.role]': "selected() === null ? 'menuitem' : 'menuitemradio'",
+                        '[attr.aria-checked]': 'selected()',
+                        // A disabled item is skipped — unless it has a hint to be read.
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.title]': 'hint() || null',
+                        '[attr.aria-describedby]': 'hint() ? hintId : null',
+                        '[class.strct-dd__item--hinted]': '!!hint()',
+                        '[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: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__itemaction{order:1;margin-inline-start:auto;flex:none}.strct-dd__itemlead{flex:none;display:inline-flex;align-items:center}.strct-dd__itemlabel{min-width:0;overflow:hidden;text-overflow:ellipsis}.strct-dd__itemtext{display:contents}.strct-dd__item:has(.strct-dd__itemdesc) .strct-dd__itemtext{display:flex;flex-direction:column;row-gap:2px;min-width:0}.strct-dd__itemdesc{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t2)}.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}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+/**
+ * A named group of rows — "Create" above the create actions, where a divider
+ * alone leaves what the group is unsaid. The label is not an item: the arrows
+ * pass over it and it is never activated.
+ */
+class StrctDropdownGroup {
+    /** What the group is — read when a screen reader enters it. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelId = `strct-dd-group-${++dropdownItemCounter}-label`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctDropdownGroup, isStandalone: true, selector: "strct-dropdown-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId" }, classAttribute: "strct-dd__group" }, ngImport: i0, template: `<div class="strct-dd__grouplabel" [id]="labelId" role="presentation">
+      {{ label() }}
+    </div>
+    <ng-content />`, isInline: true, styles: [".strct-dd__group{display:block}.strct-dd__group+.strct-dd__group{margin-top:4px;border-top:1px solid var(--b2);padding-top:4px}.strct-dd__grouplabel{padding:6px 10px 2px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-dropdown-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<div class="strct-dd__grouplabel" [id]="labelId" role="presentation">
+      {{ label() }}
+    </div>
+    <ng-content />`, host: {
+                        class: 'strct-dd__group',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId',
+                    }, styles: [".strct-dd__group{display:block}.strct-dd__group+.strct-dd__group{margin-top:4px;border-top:1px solid var(--b2);padding-top:4px}.strct-dd__grouplabel{padding:6px 10px 2px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+/** Thin separator between groups of menu items. */
+class StrctDropdownDivider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownDivider, isStandalone: true, selector: "strct-dropdown-divider", host: { attributes: { "role": "separator" }, classAttribute: "strct-dd__divider" }, ngImport: i0, template: '', isInline: true, styles: [".strct-dd__divider{display:block;height:1px;margin:4px 6px;background:var(--b2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownDivider, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-dropdown-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: { class: 'strct-dd__divider', role: 'separator' }, styles: [".strct-dd__divider{display:block;height:1px;margin:4px 6px;background:var(--b2)}\n"] }]
+        }] });
+
+let shellCounter = 0;
+/** Shared layout state between shell parts. */
+class StrctShellService {
+    mobileNavOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileNavOpen" }] : /* istanbul ignore next */ []));
+    /** Id of the vertical nav controlled by the header drawer toggle. */
+    navId = `strct-vnav-${++shellCounter}`;
+    /**
+     * The header's drawer toggle, so closing the drawer can hand focus back to
+     * what opened it. The header registers it; nothing else writes it.
+     */
+    drawerToggle = null;
+    /**
+     * Closes the navigation drawer. On a phone the drawer holds the
+     * navigation, so a choice made in it opens a page *behind* it; the shell
+     * calls this on every completed navigation unless told not to.
+     */
+    closeNav() {
+        if (this.mobileNavOpen())
+            this.mobileNavOpen.set(false);
+    }
+}
+/**
+ * Application frame: a full-viewport grid of header / body / footer rows.
+ *   <strct-shell>
+ *     <strct-header>…</strct-header>
+ *     <div strctShellMain>… sidebar + content …</div>
+ *     <strct-footer>…</strct-footer>
+ *   </strct-shell>
+ */
+class StrctShell {
+    /**
+     * Id of the main region. Given one, the shell renders "Skip to main content"
+     * as its first focusable element — invisible until focused. Null (the
+     * default) renders nothing, so existing shells are unchanged.
+     */
+    skipLinkTarget = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkTarget" }] : /* istanbul ignore next */ []));
+    /** The link's text (localisable). */
+    skipLinkLabel = input('Skip to main content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : /* istanbul ignore next */ []));
+    /** The name of the backdrop that closes the navigation drawer on a phone. */
+    closeNavLabel = input('Close navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeNavLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Close the drawer when a navigation completes — the subscription every app
+     * with a router ends up writing. It needs a `Router`; without one nothing
+     * happens. Set it to `false` to keep the drawer open across navigations,
+     * and close it yourself with `StrctShellService.closeNav()`.
+     */
+    closeNavOnNavigate = input(true, { ...(ngDevMode ? { debugName: "closeNavOnNavigate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The drawer's open state lives on the shell, and so does its backdrop. */
+    shell = inject(StrctShellService);
+    doc = inject(DOCUMENT$1);
+    router = inject(Router, { optional: true });
+    constructor() {
+        // An app without the router package still works: the token is optional and
+        // the events stream is simply never there.
+        this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (event instanceof NavigationEnd && this.closeNavOnNavigate())
+                this.shell.closeNav();
+        });
+    }
+    /**
+     * Moves focus rather than only the scroll position: an href alone scrolls
+     * without focusing, so the next Tab would resume from the link.
+     */
+    skipToMain(event) {
+        const id = this.skipLinkTarget();
+        const target = id ? this.doc.getElementById(id) : null;
+        if (!target)
+            return;
+        event.preventDefault();
+        if (!target.hasAttribute('tabindex'))
+            target.setAttribute('tabindex', '-1');
+        target.focus();
+        // Optional: not every environment implements it (jsdom does not).
+        target.scrollIntoView?.({ block: 'start' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", inputs: { skipLinkTarget: { classPropertyName: "skipLinkTarget", publicName: "skipLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, closeNavLabel: { classPropertyName: "closeNavLabel", publicName: "closeNavLabel", isSignal: true, isRequired: false, transformFunction: null }, closeNavOnNavigate: { classPropertyName: "closeNavOnNavigate", publicName: "closeNavOnNavigate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
+    @if (skipLinkTarget()) {
+      <!-- The first focusable element on the page, invisible until focused. -->
+      <a
+        class="strct-shell__skip"
+        [attr.href]="'#' + skipLinkTarget()"
+        (click)="skipToMain($event)"
+        >{{ skipLinkLabel() }}</a
+      >
+    }
+    <ng-content select="strct-header" />
+    @if (shell.mobileNavOpen()) {
+      <!-- Outside the drawer, which is transformed and would otherwise be this
+           fixed element's containing block (BUG-53-01). -->
+      <div
+        class="strct-vnav__backdrop"
+        tabindex="-1"
+        role="button"
+        [attr.aria-label]="closeNavLabel()"
+        (click)="shell.mobileNavOpen.set(false)"
+        (keydown.enter)="shell.mobileNavOpen.set(false)"
+        (keydown.space)="shell.mobileNavOpen.set(false)"
+      ></div>
+    }
+    <div class="strct-shell__main"><ng-content /></div>
+    <ng-content select="strct-footer" />
+  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [StrctShellService], template: `
+    @if (skipLinkTarget()) {
+      <!-- The first focusable element on the page, invisible until focused. -->
+      <a
+        class="strct-shell__skip"
+        [attr.href]="'#' + skipLinkTarget()"
+        (click)="skipToMain($event)"
+        >{{ skipLinkLabel() }}</a
+      >
+    }
+    <ng-content select="strct-header" />
+    @if (shell.mobileNavOpen()) {
+      <!-- Outside the drawer, which is transformed and would otherwise be this
+           fixed element's containing block (BUG-53-01). -->
+      <div
+        class="strct-vnav__backdrop"
+        tabindex="-1"
+        role="button"
+        [attr.aria-label]="closeNavLabel()"
+        (click)="shell.mobileNavOpen.set(false)"
+        (keydown.enter)="shell.mobileNavOpen.set(false)"
+        (keydown.space)="shell.mobileNavOpen.set(false)"
+      ></div>
+    }
+    <div class="strct-shell__main"><ng-content /></div>
+    <ng-content select="strct-footer" />
+  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], closeNavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeNavLabel", required: false }] }], closeNavOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeNavOnNavigate", required: false }] }] } });
+/**
+ * An action in the header that knows whether it may move into the overflow
+ * menu on a phone:
+ *
+ *   <ng-container *strctHeaderAction="{ label: 'Create', icon: 'plus', run: create }">
+ *     <button strct-button variant="flat" iconOnly aria-label="Create">…</button>
+ *   </ng-container>
+ *
+ * Content projected into the header without this directive never moves.
+ */
+class StrctHeaderAction {
+    config = input.required({ ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'strctHeaderAction' });
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeaderAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctHeaderAction, isStandalone: true, selector: "[strctHeaderAction]", inputs: { config: { classPropertyName: "config", publicName: "strctHeaderAction", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeaderAction, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctHeaderAction]' }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctHeaderAction", required: true }] }] } });
+/** Top application bar. Holds brand on the left and actions on the right. */
+class StrctHeader {
+    /** Accessible label of the mobile drawer toggle. */
     drawerToggleAriaLabel = input('Toggle navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "drawerToggleAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * A thin line in a product's colour under the header — a colour token or
+     * any CSS colour. It is drawn inset, so the header keeps its height and
+     * nothing under it moves. Empty leaves today's border alone.
+     */
+    accent = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    /**
+     * Below this width (px) the actions marked `overflow: 'phone'` move into a
+     * "More" menu. A console header carries more icons than a phone has room
+     * for, and an app should not have to draw two copies of each.
+     */
+    overflowBreakpoint = input(600, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowBreakpoint" }] : /* istanbul ignore next */ []));
+    /** The "More" trigger's accessible name (localisable). */
+    overflowLabel = input('More', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowLabel" }] : /* istanbul ignore next */ []));
+    actions = contentChildren(StrctHeaderAction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /** Whether the viewport is below `overflowBreakpoint`. */
+    narrow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    inlineActions = computed(() => this.actions().filter((a) => !this.narrow() || a.config().overflow === 'never'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inlineActions" }] : /* istanbul ignore next */ []));
+    overflowActions = computed(() => this.narrow() ? this.actions().filter((a) => a.config().overflow !== 'never') : [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowActions" }] : /* istanbul ignore next */ []));
+    /** An action that brings its own control makes the panel a dialog, not a menu. */
+    overflowIsPanel = computed(() => this.overflowActions().some((a) => !a.config().run), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowIsPanel" }] : /* istanbul ignore next */ []));
+    overflowPanel = viewChild('overflow', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowPanel" }] : /* istanbul ignore next */ []));
+    /** In panel mode nothing closes on activation, so a command closes it. */
+    runAndClose(run) {
+        run();
+        this.overflowPanel()?.close(true);
+    }
     shell = inject(StrctShellService);
+    hostEl = inject(ElementRef);
+    constructor() {
+        // Dev-only: the shell clips what overflows the header, so a header that
+        // does not fit a phone fails silently — the triggers are simply not
+        // there. Say so, with the two numbers that make it obvious.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                const el = this.hostEl.nativeElement;
+                const over = el.scrollWidth - el.clientWidth;
+                if (over > 1) {
+                    strctDevWarn('header-overflow', `[strct] strct-header: its content is ${el.scrollWidth}px wide in a ` +
+                        `${el.clientWidth}px header, so ${over}px of it is clipped and cannot be ` +
+                        'reached. Mark the triggers that may move with *strctHeaderAction so they ' +
+                        'collect into the header\u2019s "More" menu below overflowBreakpoint.');
+                }
+            }
+        });
+        // The breakpoint has to be read in script, not only in CSS: moving an
+        // action means rendering it somewhere else, which no media query can do.
+        effect((onCleanup) => {
+            const px = this.overflowBreakpoint();
+            if (typeof matchMedia !== 'function')
+                return;
+            const query = matchMedia(`(max-width: ${px}px)`);
+            const update = () => this.narrow.set(query.matches);
+            update();
+            query.addEventListener('change', update);
+            onCleanup(() => query.removeEventListener('change', update));
+        });
+        // The drawer hands focus back here when it closes, so the shell has to
+        // know which element opened it.
+        afterNextRender(() => {
+            this.shell.drawerToggle = this.hostEl.nativeElement.querySelector('.strct-header__drawer-toggle');
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctHeader, isStandalone: true, selector: "strct-header", inputs: { drawerToggleAriaLabel: { classPropertyName: "drawerToggleAriaLabel", publicName: "drawerToggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-header" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeader, isStandalone: true, selector: "strct-header", inputs: { drawerToggleAriaLabel: { classPropertyName: "drawerToggleAriaLabel", publicName: "drawerToggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, overflowBreakpoint: { classPropertyName: "overflowBreakpoint", publicName: "overflowBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-header--accent": "accent()", "style.--strct-header-accent": "accent() || null" }, classAttribute: "strct-header" }, queries: [{ propertyName: "actions", predicate: StrctHeaderAction, isSignal: true }], viewQueries: [{ propertyName: "overflowPanel", first: true, predicate: ["overflow"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       type="button"
       class="strct-header__drawer-toggle"
@@ -1153,11 +1820,74 @@ class StrctHeader {
       <strct-icon name="menu" [size]="18" />
     </button>
     <ng-content />
-  `, isInline: true, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    @if (actions().length) {
+      <span class="strct-header__actions">
+        @for (action of inlineActions(); track action) {
+          <ng-container *ngTemplateOutlet="action.template" />
+        }
+        @if (overflowActions().length) {
+          <!-- A menu may only hold menu items, so a panel that carries a
+               control of its own (a theme switcher, a segmented choice) is a
+               labelled dialog instead — the dropdown's popover mode. A panel
+               of plain commands stays a menu, with its arrow keys. -->
+          <strct-dropdown
+            #overflow
+            align="end"
+            [popover]="overflowIsPanel()"
+            [focusable]="overflowIsPanel()"
+            [popoverLabel]="overflowLabel()"
+          >
+            <button
+              type="button"
+              class="strct-header__more"
+              strctDropdownTrigger
+              [attr.aria-label]="overflowLabel()"
+            >
+              <strct-icon name="dots" [size]="18" />
+            </button>
+            @for (action of overflowActions(); track action) {
+              @if (action.config().run; as run) {
+                @if (overflowIsPanel()) {
+                  <button type="button" class="strct-header__morecmd" (click)="runAndClose(run)">
+                    @if (action.config().icon; as icon) {
+                      <strct-icon [name]="icon" [size]="15" />
+                    }
+                    {{ action.config().label }}
+                  </button>
+                } @else {
+                  <strct-dropdown-item (click)="run()">
+                    @if (action.config().icon; as icon) {
+                      <strct-icon strctDropdownItemIcon [name]="icon" [size]="15" />
+                    }
+                    {{ action.config().label }}
+                  </strct-dropdown-item>
+                }
+              } @else {
+                <div
+                  class="strct-header__moreslot"
+                  role="group"
+                  [attr.aria-label]="action.config().label"
+                >
+                  <ng-container *ngTemplateOutlet="action.template" />
+                </div>
+              }
+            }
+          </strct-dropdown>
+        }
+      </span>
+    }
+  `, isInline: true, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:var(--strct-header-gap, 14px);height:56px;padding:0 var(--strct-header-pad, 18px);background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header--accent{box-shadow:inset 0 -3px 0 var(--strct-header-accent, var(--acc))}.strct-header__actions{display:flex;align-items:center;gap:inherit;min-width:0}.strct-header__more{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;cursor:pointer}.strct-header__more:hover{background:#ffffff1f}.strct-header__moreslot{display:flex;align-items:center;padding:6px 10px}.strct-header__morecmd{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:9px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:start;cursor:pointer}.strct-header__morecmd:hover,.strct-header__morecmd:focus-visible{background:var(--bg-3);outline:none}@media(max-width:600px){.strct-header{gap:var(--strct-header-gap, 4px);padding:0 var(--strct-header-pad, 6px)}}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel", "focusable"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["selected", "critical", "disabled", "hint"] }, { kind: "directive", type: StrctDropdownItemIcon, selector: "[strctDropdownItemIcon]", inputs: ["tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+            args: [{ selector: 'strct-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        StrctIcon,
+                        StrctDropdown,
+                        StrctDropdownTrigger,
+                        StrctDropdownItem,
+                        StrctDropdownItemIcon,
+                    ], template: `
     <button
       type="button"
       class="strct-header__drawer-toggle"
@@ -1169,8 +1899,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       <strct-icon name="menu" [size]="18" />
     </button>
     <ng-content />
-  `, host: { class: 'strct-header' }, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
-        }], propDecorators: { drawerToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerToggleAriaLabel", required: false }] }] } });
+    @if (actions().length) {
+      <span class="strct-header__actions">
+        @for (action of inlineActions(); track action) {
+          <ng-container *ngTemplateOutlet="action.template" />
+        }
+        @if (overflowActions().length) {
+          <!-- A menu may only hold menu items, so a panel that carries a
+               control of its own (a theme switcher, a segmented choice) is a
+               labelled dialog instead — the dropdown's popover mode. A panel
+               of plain commands stays a menu, with its arrow keys. -->
+          <strct-dropdown
+            #overflow
+            align="end"
+            [popover]="overflowIsPanel()"
+            [focusable]="overflowIsPanel()"
+            [popoverLabel]="overflowLabel()"
+          >
+            <button
+              type="button"
+              class="strct-header__more"
+              strctDropdownTrigger
+              [attr.aria-label]="overflowLabel()"
+            >
+              <strct-icon name="dots" [size]="18" />
+            </button>
+            @for (action of overflowActions(); track action) {
+              @if (action.config().run; as run) {
+                @if (overflowIsPanel()) {
+                  <button type="button" class="strct-header__morecmd" (click)="runAndClose(run)">
+                    @if (action.config().icon; as icon) {
+                      <strct-icon [name]="icon" [size]="15" />
+                    }
+                    {{ action.config().label }}
+                  </button>
+                } @else {
+                  <strct-dropdown-item (click)="run()">
+                    @if (action.config().icon; as icon) {
+                      <strct-icon strctDropdownItemIcon [name]="icon" [size]="15" />
+                    }
+                    {{ action.config().label }}
+                  </strct-dropdown-item>
+                }
+              } @else {
+                <div
+                  class="strct-header__moreslot"
+                  role="group"
+                  [attr.aria-label]="action.config().label"
+                >
+                  <ng-container *ngTemplateOutlet="action.template" />
+                </div>
+              }
+            }
+          </strct-dropdown>
+        }
+      </span>
+    }
+  `, host: {
+                        class: 'strct-header',
+                        '[class.strct-header--accent]': 'accent()',
+                        '[style.--strct-header-accent]': 'accent() || null',
+                    }, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:var(--strct-header-gap, 14px);height:56px;padding:0 var(--strct-header-pad, 18px);background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header--accent{box-shadow:inset 0 -3px 0 var(--strct-header-accent, var(--acc))}.strct-header__actions{display:flex;align-items:center;gap:inherit;min-width:0}.strct-header__more{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;cursor:pointer}.strct-header__more:hover{background:#ffffff1f}.strct-header__moreslot{display:flex;align-items:center;padding:6px 10px}.strct-header__morecmd{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:9px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:start;cursor:pointer}.strct-header__morecmd:hover,.strct-header__morecmd:focus-visible{background:var(--bg-3);outline:none}@media(max-width:600px){.strct-header{gap:var(--strct-header-gap, 4px);padding:0 var(--strct-header-pad, 6px)}}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { drawerToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerToggleAriaLabel", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], overflowBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowBreakpoint", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], actions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctHeaderAction), { isSignal: true }] }], overflowPanel: [{ type: i0.ViewChild, args: ['overflow', { isSignal: true }] }] } });
 /** Bottom status bar. */
 class StrctFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1181,40 +1971,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             args: [{ selector: 'strct-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-footer' }, styles: [".strct-footer{display:flex;align-items:center;gap:12px;height:32px;padding:0 16px;background:var(--bg-1);border-top:1px solid var(--b2);font-size:12px;color:var(--t2)}\n"] }]
         }] });
 
+/**
+ * Shared focus-lifecycle helpers for transient overlay surfaces (tooltip,
+ * drawer, menus, popovers …): remember the trigger before opening, move
+ * focus in on open, cycle Tab inside, and hand focus back on close.
+ * Modeled on the modal's local implementation (`modal/modal.ts`).
+ */
+/** Elements considered tabbable inside an overlay, queried in DOM order. */
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+/** Currently focused element, if it is an HTMLElement (remember the trigger before opening). */
+function saveFocusedElement() {
+    const active = document.activeElement;
+    return active instanceof HTMLElement ? active : null;
+}
+/** Focus `el` again if it is still in the document; null-safe. */
+function restoreFocus(el) {
+    if (el?.isConnected)
+        el.focus();
+}
+/**
+ * Focus the first tabbable descendant of `container`.
+ * Returns whether something was focused; with nothing tabbable the container
+ * itself is NOT focused — the caller decides the fallback.
+ */
+function focusFirstIn(container) {
+    const first = container.querySelector(FOCUSABLE_SELECTOR);
+    if (!first)
+        return false;
+    first.focus();
+    return true;
+}
+/**
+ * Tab trap for modal-ish overlays: cycle Tab/Shift+Tab within the
+ * container's tabbable descendants, wrapping at both ends (preventDefault
+ * when it wraps). Wire it to the container's `keydown.tab` /
+ * `keydown.shift.tab` events.
+ */
+function keepTabInside(event, container) {
+    const items = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    if (!items.length) {
+        event.preventDefault();
+        return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = container.ownerDocument.activeElement;
+    if (event.shiftKey && (active === first || !container.contains(active))) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+
 /** Scrollable left sidebar surface. Holds the icon nav and/or a tree. */
 class StrctVerticalNav {
     shell = inject(StrctShellService);
+    host = inject(ElementRef);
+    /**
+     * How wide the drawer may get on a phone — only in drawer mode, so the
+     * width an app sets for its desktop sidebar is untouched. The default
+     * leaves 48px of page to tap the drawer away.
+     */
+    drawerMaxWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerMaxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Draw a close control at the drawer's top. Escape and the backdrop close
+     * it too, but neither is visible, and a touch screen has no Escape.
+     */
+    closeButton = input(false, { ...(ngDevMode ? { debugName: "closeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The close control's accessible name (localisable). */
+    closeLabel = input('Close navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Keep Tab inside the open drawer and move focus into it, the way a dialog
+     * does. It is only ever on in drawer mode: a sidebar that is part of the
+     * page must not trap anything.
+     */
+    trapFocus = input(true, { ...(ngDevMode ? { debugName: "trapFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** True while the drawer is open AND the viewport is in drawer mode. */
+    trapped() {
+        return this.shell.mobileNavOpen() && this.trapFocus() && this.isDrawer();
+    }
+    constructor() {
+        // Opening the drawer without moving focus leaves the keyboard behind the
+        // page it covers; closing it without handing focus back leaves it nowhere.
+        effect(() => {
+            const open = this.shell.mobileNavOpen();
+            untracked(() => {
+                if (!this.isDrawer())
+                    return;
+                if (open) {
+                    const el = this.host.nativeElement;
+                    // After the open class has painted, or the drawer is still
+                    // translated off-screen and focusing it scrolls the page.
+                    requestAnimationFrame(() => {
+                        if (!focusFirstIn(el)) {
+                            el.setAttribute('tabindex', '-1');
+                            el.focus();
+                        }
+                    });
+                }
+                else {
+                    restoreFocus(this.shell.drawerToggle);
+                }
+            });
+        });
+    }
     /** Closes the mobile nav on Escape. */
     onEscape() {
         if (this.shell.mobileNavOpen())
-            this.shell.mobileNavOpen.set(false);
+            this.shell.closeNav();
+    }
+    onTab(event) {
+        if (this.trapped())
+            keepTabInside(event, this.host.nativeElement);
+    }
+    /**
+     * The drawer breakpoint is the media query the styles use; matchMedia is
+     * the only way the component can read it, and a server render has none.
+     */
+    isDrawer() {
+        return typeof matchMedia === 'function' ? matchMedia('(max-width: 768px)').matches : false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctVerticalNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctVerticalNav, isStandalone: true, selector: "strct-vertical-nav", host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "id": "shell.navId", "class.strct-vnav--open": "shell.mobileNavOpen()" }, classAttribute: "strct-vnav" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctVerticalNav, isStandalone: true, selector: "strct-vertical-nav", inputs: { drawerMaxWidth: { classPropertyName: "drawerMaxWidth", publicName: "drawerMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()", "keydown.tab": "onTab($event)", "keydown.shift.tab": "onTab($event)" }, properties: { "id": "shell.navId", "class.strct-vnav--open": "shell.mobileNavOpen()", "style.--strct-vnav-drawer-max": "drawerMaxWidth() || null", "attr.aria-modal": "trapped() ? \"true\" : null", "attr.role": "trapped() ? \"dialog\" : null" }, classAttribute: "strct-vnav" }, ngImport: i0, template: `
     <!-- The backdrop is drawn by strct-shell. Here it was a fixed child of a
          transformed element, so its inset: 0 was the drawer's own box and its
          z-index put it above the drawer's content: the page beside the drawer
          was never dimmed, and every tap on the rail or the menu landed on the
          backdrop and closed the drawer. -->
+    @if (closeButton()) {
+      <!-- Only in drawer mode (CSS): on a wide screen the sidebar is just
+           part of the page and has nothing to close. -->
+      <button
+        type="button"
+        class="strct-vnav__close"
+        [attr.aria-label]="closeLabel()"
+        (click)="shell.closeNav()"
+      >
+        <strct-icon name="close" [size]="16" />
+      </button>
+    }
     <ng-content />
-  `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}.strct-vnav__close{display:none}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease;max-width:var(--strct-vnav-drawer-max, calc(100vw - 48px) )}.strct-vnav__close{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;flex:none;width:34px;height:34px;margin:8px 8px 0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-vnav__close:hover{background:var(--bg-3);color:var(--t1)}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctVerticalNav, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-vertical-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+            args: [{ selector: 'strct-vertical-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
     <!-- The backdrop is drawn by strct-shell. Here it was a fixed child of a
          transformed element, so its inset: 0 was the drawer's own box and its
          z-index put it above the drawer's content: the page beside the drawer
          was never dimmed, and every tap on the rail or the menu landed on the
          backdrop and closed the drawer. -->
+    @if (closeButton()) {
+      <!-- Only in drawer mode (CSS): on a wide screen the sidebar is just
+           part of the page and has nothing to close. -->
+      <button
+        type="button"
+        class="strct-vnav__close"
+        [attr.aria-label]="closeLabel()"
+        (click)="shell.closeNav()"
+      >
+        <strct-icon name="close" [size]="16" />
+      </button>
+    }
     <ng-content />
   `, host: {
                         class: 'strct-vnav',
                         '[id]': 'shell.navId',
                         '[class.strct-vnav--open]': 'shell.mobileNavOpen()',
+                        '[style.--strct-vnav-drawer-max]': 'drawerMaxWidth() || null',
+                        '[attr.aria-modal]': 'trapped() ? "true" : null',
+                        '[attr.role]': 'trapped() ? "dialog" : null',
                         '(document:keydown.escape)': 'onEscape()',
-                    }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}}\n"] }]
-        }] });
+                        '(keydown.tab)': 'onTab($event)',
+                        '(keydown.shift.tab)': 'onTab($event)',
+                    }, styles: [".strct-vnav{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden}.strct-vnav__close{display:none}@media(max-width:768px){.strct-vnav{position:fixed;top:0;inset-inline-start:0;bottom:0;z-index:var(--z-nav);transform:translate(-100%);transition:transform .2s ease;max-width:var(--strct-vnav-drawer-max, calc(100vw - 48px) )}.strct-vnav__close{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;flex:none;width:34px;height:34px;margin:8px 8px 0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-vnav__close:hover{background:var(--bg-3);color:var(--t1)}[dir=rtl] .strct-vnav{transform:translate(100%)}.strct-vnav--open,[dir=rtl] .strct-vnav--open{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { drawerMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMaxWidth", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }] } });
 /** Horizontal strip of icon tabs (e.g. section switcher at the top of a sidebar). */
 class StrctNav {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2199,31 +3135,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             args: [{ selector: 'strct-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-btn-group', role: 'group' }, styles: [".strct-btn-group{display:inline-flex}.strct-btn-group>.strct-btn{border-radius:0}.strct-btn-group>.strct-btn:not(:first-child){margin-inline-start:-1px}.strct-btn-group>.strct-btn:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.strct-btn-group>.strct-btn:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}.strct-btn-group>.strct-btn:hover,.strct-btn-group>.strct-btn:focus-visible{position:relative;z-index:var(--z-base)}\n"] }]
         }] });
 
-/**
- * Dev-mode diagnostics for combinations a component accepts but cannot honour.
- *
- * Every message names what was ignored and what to do instead. Keyed: a
- * condition warns once per page load, not once per change detection.
- *
- * Production cost: none, PROVIDED each call site is guarded INLINE with
- *   if (typeof ngDevMode !== 'undefined' && ngDevMode) { … }
- * Production builds define `ngDevMode` as false, and the minifier then drops
- * the whole block — messages included. A helper function returning that same
- * expression would NOT be folded across the call, so the check and its
- * strings would ship; that is why no such helper exists here.
- */
-const warned = new Set();
-function strctDevWarn(key, message) {
-    if (typeof ngDevMode === 'undefined' || !ngDevMode || warned.has(key))
-        return;
-    warned.add(key);
-    console.warn(message);
-}
-/** Test hook: forget which warnings have fired. Not part of the public API. */
-function resetStrctDevWarnings() {
-    warned.clear();
-}
-
 /**
  * Dev-mode diagnostics for attributes a component does not have.
  *
@@ -2323,6 +3234,9 @@ class StrctBadge {
                 const el = this.hostEl.nativeElement;
                 strctCheckHostInputs(el, 'strct-badge', {
                     status: 'neutral, accent, success, warning, critical',
+                    // A real input since 5.13.0 — a colour of its own, so it takes any
+                    // colour token or value rather than one of a list.
+                    tone: 'a colour token or value, e.g. var(--prod-acc)',
                 });
             }
         });
@@ -2330,10 +3244,25 @@ class StrctBadge {
     /** Visual status color. */
     status = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * A colour of your own — `tone="var(--prod-acc)"` — for a distinction the
+     * five statuses do not carry, such as which product a row belongs to. The
+     * text takes it and the border a 30% wash of it; `solid` fills with it and
+     * writes in `--strct-badge-on` (`--inv` by default). It overrides `status`.
+     *
+     * The same can be set from a stylesheet with `--strct-badge-fg`,
+     * `--strct-badge-border` and `--strct-badge-on`, which is the better route
+     * when a rule already selects the badges (`.product-badge { … }`).
+     *
+     * The colour is yours to pick, so its contrast is yours to check: the
+     * library's own check covers `--acc` and the status tokens.
+     */
+    tone = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     /** Opt-in filled style instead of the default outlined style. */
     solid = input(false, { ...(ngDevMode ? { debugName: "solid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctBadge, isStandalone: true, selector: "strct-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-badge--accent": "status() === 'accent'", "class.strct-badge--success": "status() === 'success'", "class.strct-badge--warning": "status() === 'warning'", "class.strct-badge--warninging": "status() === 'warning'", "class.strct-badge--critical": "status() === 'critical'", "class.strct-badge--solid": "solid()" }, classAttribute: "strct-badge" }, ngImport: i0, template: `<ng-content />`, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctBadge, isStandalone: true, selector: "strct-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-badge--accent": "status() === 'accent'", "class.strct-badge--success": "status() === 'success'", "class.strct-badge--warning": "status() === 'warning'", "class.strct-badge--warninging": "status() === 'warning'", "class.strct-badge--critical": "status() === 'critical'", "class.strct-badge--solid": "solid()", "class.strct-badge--tone": "tone()", "style.--strct-badge-fg": "tone() || null" }, classAttribute: "strct-badge" }, ngImport: i0, template: `<ng-content />`, isInline: true, 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--tone{color:var(--strct-badge-fg, var(--t2));border-color:var( --strct-badge-border, color-mix(in srgb, var(--strct-badge-fg, var(--b3)) 30%, transparent) )}.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)}.strct-badge--solid.strct-badge--tone{background:var(--strct-badge-fg, var(--bg-a));color:var(--strct-badge-on, var(--inv));border-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctBadge, decorators: [{
             type: Component,
@@ -2346,8 +3275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-badge--warninging]': "status() === 'warning'",
                         '[class.strct-badge--critical]': "status() === 'critical'",
                         '[class.strct-badge--solid]': 'solid()',
-                    }, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
+                        '[class.strct-badge--tone]': 'tone()',
+                        '[style.--strct-badge-fg]': 'tone() || null',
+                    }, 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--tone{color:var(--strct-badge-fg, var(--t2));border-color:var( --strct-badge-border, color-mix(in srgb, var(--strct-badge-fg, var(--b3)) 30%, transparent) )}.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)}.strct-badge--solid.strct-badge--tone{background:var(--strct-badge-fg, var(--bg-a));color:var(--strct-badge-on, var(--inv));border-color:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", 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 {
@@ -2831,115 +3762,60 @@ class StrctSpinner {
      * else on screen.
      */
     caption = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSpinner, isStandalone: true, selector: "strct-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class.strct-spinner--captioned": "caption()", "attr.aria-label": "caption() || label()", "class.strct-spinner--sm": "size() === 'sm'", "class.strct-spinner--lg": "size() === 'lg'" }, classAttribute: "strct-spinner" }, ngImport: i0, template: `
-    @if (caption()) {
-      <span class="strct-spinner__ring"></span>
-      <span class="strct-spinner__caption">{{ caption() }}</span>
-    }
-  `, isInline: true, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}.strct-spinner--captioned{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;height:auto;border:0;border-radius:0;animation:none}.strct-spinner__ring{flex:none;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm .strct-spinner__ring{width:14px;height:14px;border-width:2px}.strct-spinner--lg .strct-spinner__ring{width:34px;height:34px;border-width:3px}@media(prefers-reduced-motion:reduce){.strct-spinner__ring{animation-duration:1.6s}}.strct-spinner__caption{font-size:var(--text-sm);color:var(--t3);line-height:1.3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSpinner, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    @if (caption()) {
-      <span class="strct-spinner__ring"></span>
-      <span class="strct-spinner__caption">{{ caption() }}</span>
-    }
-  `, host: {
-                        class: 'strct-spinner',
-                        role: 'progressbar',
-                        '[class.strct-spinner--captioned]': 'caption()',
-                        '[attr.aria-label]': 'caption() || label()',
-                        '[class.strct-spinner--sm]': "size() === 'sm'",
-                        '[class.strct-spinner--lg]': "size() === 'lg'",
-                    }, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}.strct-spinner--captioned{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;height:auto;border:0;border-radius:0;animation:none}.strct-spinner__ring{flex:none;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm .strct-spinner__ring{width:14px;height:14px;border-width:2px}.strct-spinner--lg .strct-spinner__ring{width:34px;height:34px;border-width:3px}@media(prefers-reduced-motion:reduce){.strct-spinner__ring{animation-duration:1.6s}}.strct-spinner__caption{font-size:var(--text-sm);color:var(--t3);line-height:1.3}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }] } });
-
-/**
- * Shimmering loading placeholder.
- *   <strct-skeleton width="60%" height="14px" />
- *   <strct-skeleton circle width="40px" height="40px" />
- */
-class StrctSkeleton {
-    /** Width (CSS length). */
-    width = input('100%', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    /** Height in pixels. */
-    height = input('14px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    /** Circle. */
-    circle = input(false, { ...(ngDevMode ? { debugName: "circle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctSkeleton, isStandalone: true, selector: "strct-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation", "aria-hidden": "true" }, properties: { "class.strct-skel--circle": "circle()", "style.width": "width()", "style.height": "height()" }, classAttribute: "strct-skel" }, ngImport: i0, template: '', isInline: true, styles: [".strct-skel{display:block;border-radius:5px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:400% 100%;animation:strct-skel-shimmer 1.4s ease infinite}.strct-skel--circle{border-radius:50%}@keyframes strct-skel-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.strct-skel{animation:none;background:var(--skeleton-hi, var(--acc18))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSkeleton, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
-                        class: 'strct-skel',
-                        role: 'presentation',
-                        'aria-hidden': 'true',
-                        '[class.strct-skel--circle]': 'circle()',
-                        '[style.width]': 'width()',
-                        '[style.height]': 'height()',
-                    }, styles: [".strct-skel{display:block;border-radius:5px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:400% 100%;animation:strct-skel-shimmer 1.4s ease infinite}.strct-skel--circle{border-radius:50%}@keyframes strct-skel-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.strct-skel{animation:none;background:var(--skeleton-hi, var(--acc18))}}\n"] }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }] } });
-
-/**
- * Shared focus-lifecycle helpers for transient overlay surfaces (tooltip,
- * drawer, menus, popovers …): remember the trigger before opening, move
- * focus in on open, cycle Tab inside, and hand focus back on close.
- * Modeled on the modal's local implementation (`modal/modal.ts`).
- */
-/** Elements considered tabbable inside an overlay, queried in DOM order. */
-const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
-/** Currently focused element, if it is an HTMLElement (remember the trigger before opening). */
-function saveFocusedElement() {
-    const active = document.activeElement;
-    return active instanceof HTMLElement ? active : null;
-}
-/** Focus `el` again if it is still in the document; null-safe. */
-function restoreFocus(el) {
-    if (el?.isConnected)
-        el.focus();
-}
-/**
- * Focus the first tabbable descendant of `container`.
- * Returns whether something was focused; with nothing tabbable the container
- * itself is NOT focused — the caller decides the fallback.
- */
-function focusFirstIn(container) {
-    const first = container.querySelector(FOCUSABLE_SELECTOR);
-    if (!first)
-        return false;
-    first.focus();
-    return true;
-}
-/**
- * Tab trap for modal-ish overlays: cycle Tab/Shift+Tab within the
- * container's tabbable descendants, wrapping at both ends (preventDefault
- * when it wraps). Wire it to the container's `keydown.tab` /
- * `keydown.shift.tab` events.
- */
-function keepTabInside(event, container) {
-    const items = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-    if (!items.length) {
-        event.preventDefault();
-        return;
-    }
-    const first = items[0];
-    const last = items[items.length - 1];
-    const active = container.ownerDocument.activeElement;
-    if (event.shiftKey && (active === first || !container.contains(active))) {
-        event.preventDefault();
-        last.focus();
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSpinner, isStandalone: true, selector: "strct-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class.strct-spinner--captioned": "caption()", "attr.aria-label": "caption() || label()", "class.strct-spinner--sm": "size() === 'sm'", "class.strct-spinner--lg": "size() === 'lg'" }, classAttribute: "strct-spinner" }, ngImport: i0, template: `
+    @if (caption()) {
+      <span class="strct-spinner__ring"></span>
+      <span class="strct-spinner__caption">{{ caption() }}</span>
     }
-    else if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
+  `, isInline: true, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}.strct-spinner--captioned{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;height:auto;border:0;border-radius:0;animation:none}.strct-spinner__ring{flex:none;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm .strct-spinner__ring{width:14px;height:14px;border-width:2px}.strct-spinner--lg .strct-spinner__ring{width:34px;height:34px;border-width:3px}@media(prefers-reduced-motion:reduce){.strct-spinner__ring{animation-duration:1.6s}}.strct-spinner__caption{font-size:var(--text-sm);color:var(--t3);line-height:1.3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (caption()) {
+      <span class="strct-spinner__ring"></span>
+      <span class="strct-spinner__caption">{{ caption() }}</span>
     }
+  `, host: {
+                        class: 'strct-spinner',
+                        role: 'progressbar',
+                        '[class.strct-spinner--captioned]': 'caption()',
+                        '[attr.aria-label]': 'caption() || label()',
+                        '[class.strct-spinner--sm]': "size() === 'sm'",
+                        '[class.strct-spinner--lg]': "size() === 'lg'",
+                    }, styles: [".strct-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm{width:14px;height:14px;border-width:2px}.strct-spinner--lg{width:34px;height:34px;border-width:3px}@keyframes strct-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.strct-spinner{animation-duration:1.6s}}.strct-spinner--captioned{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;height:auto;border:0;border-radius:0;animation:none}.strct-spinner__ring{flex:none;width:22px;height:22px;border:2.5px solid var(--b3);border-top-color:var(--acc);border-radius:50%;animation:strct-spin .7s linear infinite}.strct-spinner--sm .strct-spinner__ring{width:14px;height:14px;border-width:2px}.strct-spinner--lg .strct-spinner__ring{width:34px;height:34px;border-width:3px}@media(prefers-reduced-motion:reduce){.strct-spinner__ring{animation-duration:1.6s}}.strct-spinner__caption{font-size:var(--text-sm);color:var(--t3);line-height:1.3}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }] } });
+
+/**
+ * Shimmering loading placeholder.
+ *   <strct-skeleton width="60%" height="14px" />
+ *   <strct-skeleton circle width="40px" height="40px" />
+ */
+class StrctSkeleton {
+    /** Width (CSS length). */
+    width = input('100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Height in pixels. */
+    height = input('14px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Circle. */
+    circle = input(false, { ...(ngDevMode ? { debugName: "circle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctSkeleton, isStandalone: true, selector: "strct-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation", "aria-hidden": "true" }, properties: { "class.strct-skel--circle": "circle()", "style.width": "width()", "style.height": "height()" }, classAttribute: "strct-skel" }, ngImport: i0, template: '', isInline: true, styles: [".strct-skel{display:block;border-radius:5px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:400% 100%;animation:strct-skel-shimmer 1.4s ease infinite}.strct-skel--circle{border-radius:50%}@keyframes strct-skel-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.strct-skel{animation:none;background:var(--skeleton-hi, var(--acc18))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSkeleton, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
+                        class: 'strct-skel',
+                        role: 'presentation',
+                        'aria-hidden': 'true',
+                        '[class.strct-skel--circle]': 'circle()',
+                        '[style.width]': 'width()',
+                        '[style.height]': 'height()',
+                    }, styles: [".strct-skel{display:block;border-radius:5px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:400% 100%;animation:strct-skel-shimmer 1.4s ease infinite}.strct-skel--circle{border-radius:50%}@keyframes strct-skel-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.strct-skel{animation:none;background:var(--skeleton-hi, var(--acc18))}}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }] } });
 
 /**
  * Floating action button that fans out to reveal actions. Project icon buttons
@@ -5348,637 +6224,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
               >
                 <strct-icon name="close" [size]="14" />
               </button>
-            </div>
-          }
-          <div class="strct-modal__body">
-            <ng-content />
-            @if (lazyContent(); as lazy) {
-              <ng-container [ngTemplateOutlet]="lazy.template" />
-            }
-          </div>
-          @if (!hideFooter() && !chromeless()) {
-            <div class="strct-modal__foot"><ng-content select="[strctModalFooter]" /></div>
-          }
-        </div>
-      </div>
-    }
-  `, host: {
-                        '(document:keydown.escape)': 'onEscape($event)',
-                    }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-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, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}.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 }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", 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"] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctModalContent), { isSignal: true }] }] } });
-
-/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
-class StrctDrawerFooter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDrawerFooter, isStandalone: true, selector: "[strctDrawerFooter]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawerFooter, decorators: [{
-            type: Directive,
-            args: [{ selector: '[strctDrawerFooter]' }]
-        }] });
-/**
- * Slide-out overlay panel anchored to an edge of the viewport — for inspecting
- * or editing a record without losing the underlying table's scroll/selection.
- *
- *   <strct-drawer [(open)]="editing" side="end" title="Virtual machine">
- *     … body …
- *     <ng-container strctDrawerFooter>
- *       <button strct-button (click)="editing.set(false)">Cancel</button>
- *     </ng-container>
- *   </strct-drawer>
- */
-class StrctDrawer {
-    elementRef = inject((ElementRef));
-    doc = inject(DOCUMENT);
-    /** Open state (two-way). */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /** Edge to anchor to. Defaults to `end` (right in LTR). */
-    side = input('end', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    /** Extent along the sliding axis. */
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Header title. */
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Show the close button and allow backdrop/Esc dismissal. */
-    dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Accessible name of the dialog when no `title` is set (localizable). */
-    ariaLabel = input('Panel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Accessible label of the X close button (localizable). */
-    closeLabel = input('Close', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    footerDef = contentChild(StrctDrawerFooter, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "footerDef" }] : /* istanbul ignore next */ []));
-    hasFooter = computed(() => !!this.footerDef(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
-    /** Element that had focus before the drawer opened, restored on close. */
-    previousActive = null;
-    /** Whether this instance currently holds a scroll lock. */
-    locked = false;
-    constructor() {
-        effect(() => {
-            const open = this.open();
-            if (open && !this.locked) {
-                this.locked = true;
-                lockBodyScroll(this.doc);
-                this.previousActive = saveFocusedElement();
-                // Move focus into the panel once it has rendered.
-                setTimeout(() => this.focusInitial());
-            }
-            else if (!open && this.locked) {
-                this.locked = false;
-                unlockBodyScroll(this.doc);
-                restoreFocus(this.previousActive);
-                this.previousActive = null;
-            }
-        });
-        // Release the lock if the drawer is destroyed while still open.
-        inject(DestroyRef).onDestroy(() => {
-            if (this.locked) {
-                this.locked = false;
-                unlockBodyScroll(this.doc);
-            }
-        });
-    }
-    onBackdrop() {
-        if (this.dismissable())
-            this.close();
-    }
-    onEscape(event) {
-        if (!this.open() || !this.dismissable())
-            return;
-        // A host modal/drawer must not also close on the same keypress.
-        event.stopPropagation();
-        this.close();
-    }
-    /** Wrap Tab focus within the panel. */
-    onTab(event) {
-        const panel = this.panel();
-        if (panel)
-            keepTabInside(event, panel);
-    }
-    close() {
-        this.open.set(false);
-    }
-    panel() {
-        return this.elementRef.nativeElement.querySelector('.strct-drawer');
-    }
-    focusInitial() {
-        const panel = this.panel();
-        if (!panel)
-            return;
-        // Nothing tabbable (empty body, dismissable=false) → focus the panel itself.
-        if (!focusFirstIn(panel))
-            panel.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDrawer, isStandalone: true, selector: "strct-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" }, classAttribute: "strct-drawer-host" }, queries: [{ propertyName: "footerDef", first: true, predicate: StrctDrawerFooter, descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (open()) {
-      <!-- Backdrop: pointer-only dismiss target (click-through when not
-           dismissable). Keyboard users dismiss via Escape. -->
-      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-      <div
-        class="strct-drawer__backdrop"
-        [class.strct-drawer__backdrop--bare]="!dismissable()"
-        (click)="onBackdrop()"
-      ></div>
-      <aside
-        class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
-        role="dialog"
-        aria-modal="true"
-        tabindex="-1"
-        [attr.aria-label]="title() || ariaLabel()"
-        (keydown.tab)="onTab($event)"
-        (keydown.shift.tab)="onTab($event)"
-      >
-        @if (title() || dismissable()) {
-          <header class="strct-drawer__head">
-            <span class="strct-drawer__title">{{ title() }}</span>
-            @if (dismissable()) {
-              <button
-                type="button"
-                class="strct-drawer__close"
-                [attr.aria-label]="closeLabel()"
-                (click)="close()"
-              >
-                <strct-icon name="close" [size]="15" />
-              </button>
-            }
-          </header>
-        }
-        <div class="strct-drawer__body"><ng-content /></div>
-        @if (hasFooter()) {
-          <footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
-        }
-      </aside>
-    }
-  `, isInline: true, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--backdrop);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.strct-drawer{position:fixed;z-index:calc(var(--z-overlay) + 1);display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{inset-inline-start:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{inset-inline-end:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}[dir=rtl] .strct-drawer--start{animation-name:strct-drawer-in-end}[dir=rtl] .strct-drawer--end{animation-name:strct-drawer-in-start}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{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-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawer, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-drawer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    @if (open()) {
-      <!-- Backdrop: pointer-only dismiss target (click-through when not
-           dismissable). Keyboard users dismiss via Escape. -->
-      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-      <div
-        class="strct-drawer__backdrop"
-        [class.strct-drawer__backdrop--bare]="!dismissable()"
-        (click)="onBackdrop()"
-      ></div>
-      <aside
-        class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
-        role="dialog"
-        aria-modal="true"
-        tabindex="-1"
-        [attr.aria-label]="title() || ariaLabel()"
-        (keydown.tab)="onTab($event)"
-        (keydown.shift.tab)="onTab($event)"
-      >
-        @if (title() || dismissable()) {
-          <header class="strct-drawer__head">
-            <span class="strct-drawer__title">{{ title() }}</span>
-            @if (dismissable()) {
-              <button
-                type="button"
-                class="strct-drawer__close"
-                [attr.aria-label]="closeLabel()"
-                (click)="close()"
-              >
-                <strct-icon name="close" [size]="15" />
-              </button>
+            </div>
+          }
+          <div class="strct-modal__body">
+            <ng-content />
+            @if (lazyContent(); as lazy) {
+              <ng-container [ngTemplateOutlet]="lazy.template" />
             }
-          </header>
-        }
-        <div class="strct-drawer__body"><ng-content /></div>
-        @if (hasFooter()) {
-          <footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
-        }
-      </aside>
+          </div>
+          @if (!hideFooter() && !chromeless()) {
+            <div class="strct-modal__foot"><ng-content select="[strctModalFooter]" /></div>
+          }
+        </div>
+      </div>
     }
   `, host: {
-                        class: 'strct-drawer-host',
                         '(document:keydown.escape)': 'onEscape($event)',
-                    }, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--backdrop);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.strct-drawer{position:fixed;z-index:calc(var(--z-overlay) + 1);display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{inset-inline-start:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{inset-inline-end:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}[dir=rtl] .strct-drawer--start{animation-name:strct-drawer-in-end}[dir=rtl] .strct-drawer--end{animation-name:strct-drawer-in-start}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{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-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], footerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDrawerFooter), { isSignal: true }] }] } });
+                    }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-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, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}.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 }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", 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"] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctModalContent), { isSignal: true }] }] } });
 
+/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
+class StrctDrawerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDrawerFooter, isStandalone: true, selector: "[strctDrawerFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawerFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctDrawerFooter]' }]
+        }] });
 /**
- * Click-to-open menu:
- *   <strct-dropdown align="end">
- *     <button strct-button strctDropdownTrigger>Actions</button>
- *     <strct-dropdown-item>Rename</strct-dropdown-item>
- *     <strct-dropdown-item critical>Delete</strct-dropdown-item>
- *   </strct-dropdown>
- *
- * With `popover`, the panel holds *form controls* instead of menu items: an
- * inner click no longer closes it (only outside click / Escape do), and the
- * semantics switch from `role="menu"` to a labeled `role="dialog"` — a panel
- * of selects is not a menu to a screen reader either:
+ * Slide-out overlay panel anchored to an edge of the viewport — for inspecting
+ * or editing a record without losing the underlying table's scroll/selection.
  *
- *   <strct-dropdown popover popoverLabel="Filters">
- *     <button strct-button strctDropdownTrigger>Filters</button>
- *     <strct-field label="Severity">…</strct-field>
- *   </strct-dropdown>
+ *   <strct-drawer [(open)]="editing" side="end" title="Virtual machine">
+ *     … body …
+ *     <ng-container strctDrawerFooter>
+ *       <button strct-button (click)="editing.set(false)">Cancel</button>
+ *     </ng-container>
+ *   </strct-drawer>
  */
-class StrctDropdown {
-    host = inject(ElementRef);
-    /** Horizontal alignment of the menu. */
-    align = input('start', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    /**
-     * Popover mode for panels holding form controls (filter/settings panels):
-     * inner clicks never close the panel — only outside click / Escape do —
-     * and it renders as a labeled `role="dialog"` instead of a menu.
-     */
-    popover = input(false, { ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Accessible name of the popover dialog (localizable). */
-    popoverLabel = input('Filters', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "popoverLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * Only with `popover`: the panel's rows are controls in their own right — a
-     * theme switcher, a filter — so they keep a real tab stop instead of the
-     * `tabindex="-1"` a menu's items carry. Without it nothing inside a popover
-     * can be reached from the keyboard at all.
-     */
-    focusable = input(false, { ...(ngDevMode ? { debugName: "focusable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    open = signal(false, /* @ts-ignore */
+class StrctDrawer {
+    elementRef = inject((ElementRef));
+    doc = inject(DOCUMENT);
+    /** Open state (two-way). */
+    open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Edge to anchor to. Defaults to `end` (right in LTR). */
+    side = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Extent along the sliding axis. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Header title. */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Show the close button and allow backdrop/Esc dismissal. */
+    dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the dialog when no `title` is set (localizable). */
+    ariaLabel = input('Panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the X close button (localizable). */
+    closeLabel = input('Close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    footerDef = contentChild(StrctDrawerFooter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerDef" }] : /* istanbul ignore next */ []));
+    hasFooter = computed(() => !!this.footerDef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    /** Element that had focus before the drawer opened, restored on close. */
+    previousActive = null;
+    /** Whether this instance currently holds a scroll lock. */
+    locked = false;
     constructor() {
-        // The static `popover` attribute collides with the native HTML Popover
-        // API: the UA styles [popover] hosts (Canvas background, medium border,
-        // fixed positioning) — a white frame around the trigger in dark themes.
-        // 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() {
-        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(restoreFocus = false) {
-        this.open.set(false);
-        if (restoreFocus)
-            this.lastFocused?.focus?.();
-    }
-    /**
-     * 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 target = event.target;
-        if (target?.closest('.strct-dd__itemaction'))
-            return; // the second action is not the item
-        const item = target?.closest('strct-dropdown-item');
-        if (item && item.getAttribute('aria-disabled') !== 'true')
-            this.close(true);
+        effect(() => {
+            const open = this.open();
+            if (open && !this.locked) {
+                this.locked = true;
+                lockBodyScroll(this.doc);
+                this.previousActive = saveFocusedElement();
+                // Move focus into the panel once it has rendered.
+                setTimeout(() => this.focusInitial());
+            }
+            else if (!open && this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
+                restoreFocus(this.previousActive);
+                this.previousActive = null;
+            }
+        });
+        // Release the lock if the drawer is destroyed while still open.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
+            }
+        });
     }
-    /** APG menu keyboarding: arrows rove, Home/End jump, Enter/Space activate. */
-    onMenuKeydown(event) {
-        if (this.popover())
-            return;
-        const items = this.navItems();
-        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();
-            const target = event.target;
-            if (target.getAttribute('aria-disabled') !== 'true')
-                target.click();
-        }
-        else if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Delete') {
-            this.onItemActionKey(event, key);
-        }
-        else if (key === 'Tab') {
+    onBackdrop() {
+        if (this.dismissable())
             this.close();
-        }
     }
-    /**
-     * An item with a trailing action has two targets: the right arrow reaches the
-     * action from its item, the left arrow returns, and Delete on the item
-     * triggers it (the WAI-ARIA pattern for a secondary action). Keys that do not
-     * apply are left alone, so submenus keep their own arrow behaviour.
-     */
-    onItemActionKey(event, key) {
-        const target = event.target;
-        if (key === 'ArrowLeft') {
-            const item = target.closest('strct-dropdown-item');
-            if (!target.classList.contains('strct-dd__itemaction') || !item)
-                return;
-            event.preventDefault();
-            item.focus();
-            return;
-        }
-        const item = target.closest('strct-dropdown-item');
-        const action = item?.querySelector('.strct-dd__itemaction');
-        if (!item || item !== target || !action)
+    onEscape(event) {
+        if (!this.open() || !this.dismissable())
             return;
-        event.preventDefault();
-        if (key === 'ArrowRight')
-            action.focus();
-        else
-            action.click();
-    }
-    enabledItems() {
-        return [
-            ...this.host.nativeElement.querySelectorAll('strct-dropdown-item:not([aria-disabled="true"]), strct-submenu .strct-submenu__trigger'),
-        ];
-    }
-    /** What the arrow keys visit: enabled items, plus disabled ones that carry a
-     *  hint (so the reason can be read). The menu still opens on an enabled one. */
-    navItems() {
-        const host = this.host.nativeElement;
-        const rows = [
-            ...host.querySelectorAll('strct-dropdown-item'),
-            ...host.querySelectorAll('strct-submenu .strct-submenu__trigger'),
-        ].filter((el) => el.getAttribute('aria-disabled') !== 'true' ||
-            el.classList.contains('strct-dd__item--hinted'));
-        // Two queries, so restore DOM order explicitly. (A single comma-separated
-        // selector is DOM-ordered in browsers, but not in every DOM implementation
-        // — jsdom returns it grouped, which scrambles arrow-key order in tests.)
-        return rows.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+        // A host modal/drawer must not also close on the same keypress.
+        event.stopPropagation();
+        this.close();
     }
-    /** 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();
-        });
+    /** Wrap Tab focus within the panel. */
+    onTab(event) {
+        const panel = this.panel();
+        if (panel)
+            keepTabInside(event, panel);
     }
-    onDocClick(event) {
-        if (this.open() && !this.host.nativeElement.contains(event.target)) {
-            this.close();
-        }
+    close() {
+        this.open.set(false);
     }
-    onEscape() {
-        if (this.open())
-            this.close(true);
+    panel() {
+        return this.elementRef.nativeElement.querySelector('.strct-drawer');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
-    <!--
-      The wrapper is intentionally inert: the projected trigger should be a
-      real button (nesting interactives fails axe). Its native click —
-      pointer or Enter/Space — bubbles here; the strctDropdownTrigger
-      directive puts aria-haspopup/aria-expanded on the button itself.
-    -->
-    <div #trigger class="strct-dd__trigger" (click)="toggle()">
-      <ng-content select="[strctDropdownTrigger]" />
-    </div>
-    <!--
-      One panel for both modes (a default ng-content per @if branch would strand
-      the projected content in the inactive branch) — mode picks the semantics.
-    -->
+    focusInitial() {
+        const panel = this.panel();
+        if (!panel)
+            return;
+        // Nothing tabbable (empty body, dismissable=false) → focus the panel itself.
+        if (!focusFirstIn(panel))
+            panel.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDrawer, isStandalone: true, selector: "strct-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" }, classAttribute: "strct-drawer-host" }, queries: [{ propertyName: "footerDef", first: true, predicate: StrctDrawerFooter, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
+      <!-- Backdrop: pointer-only dismiss target (click-through when not
+           dismissable). Keyboard users dismiss via Escape. -->
+      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
       <div
-        class="strct-dd__menu"
-        [class.strct-dd__menu--popover]="popover()"
-        [strctOverlay]="trigger"
-        [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
-        [attr.role]="popover() ? 'dialog' : 'menu'"
-        [attr.aria-label]="popover() ? popoverLabel() : null"
-        [attr.tabindex]="popover() ? -1 : 0"
-        (click)="onInnerActivate($event)"
-        (keydown)="onMenuKeydown($event)"
+        class="strct-drawer__backdrop"
+        [class.strct-drawer__backdrop--bare]="!dismissable()"
+        (click)="onBackdrop()"
+      ></div>
+      <aside
+        class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        [attr.aria-label]="title() || ariaLabel()"
+        (keydown.tab)="onTab($event)"
+        (keydown.shift.tab)="onTab($event)"
       >
-        <ng-content />
-      </div>
+        @if (title() || dismissable()) {
+          <header class="strct-drawer__head">
+            <span class="strct-drawer__title">{{ title() }}</span>
+            @if (dismissable()) {
+              <button
+                type="button"
+                class="strct-drawer__close"
+                [attr.aria-label]="closeLabel()"
+                (click)="close()"
+              >
+                <strct-icon name="close" [size]="15" />
+              </button>
+            }
+          </header>
+        }
+        <div class="strct-drawer__body"><ng-content /></div>
+        @if (hasFooter()) {
+          <footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
+        }
+      </aside>
     }
-  `, isInline: true, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown);min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--backdrop);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.strct-drawer{position:fixed;z-index:calc(var(--z-overlay) + 1);display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{inset-inline-start:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{inset-inline-end:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}[dir=rtl] .strct-drawer--start{animation-name:strct-drawer-in-end}[dir=rtl] .strct-drawer--end{animation-name:strct-drawer-in-start}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{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-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctOverlay], template: `
-    <!--
-      The wrapper is intentionally inert: the projected trigger should be a
-      real button (nesting interactives fails axe). Its native click —
-      pointer or Enter/Space — bubbles here; the strctDropdownTrigger
-      directive puts aria-haspopup/aria-expanded on the button itself.
-    -->
-    <div #trigger class="strct-dd__trigger" (click)="toggle()">
-      <ng-content select="[strctDropdownTrigger]" />
-    </div>
-    <!--
-      One panel for both modes (a default ng-content per @if branch would strand
-      the projected content in the inactive branch) — mode picks the semantics.
-    -->
+            args: [{ selector: 'strct-drawer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
     @if (open()) {
+      <!-- Backdrop: pointer-only dismiss target (click-through when not
+           dismissable). Keyboard users dismiss via Escape. -->
+      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
       <div
-        class="strct-dd__menu"
-        [class.strct-dd__menu--popover]="popover()"
-        [strctOverlay]="trigger"
-        [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
-        [attr.role]="popover() ? 'dialog' : 'menu'"
-        [attr.aria-label]="popover() ? popoverLabel() : null"
-        [attr.tabindex]="popover() ? -1 : 0"
-        (click)="onInnerActivate($event)"
-        (keydown)="onMenuKeydown($event)"
-      >
-        <ng-content />
-      </div>
-    }
-  `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown);min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], onDocClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-/**
- * Marks (and upgrades) the dropdown's trigger element. The attribute alone is
- * enough for content projection; importing the directive additionally wires
- * `aria-haspopup` / `aria-expanded` onto the real button.
- */
-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: "22.1.4", ngImport: i0, type: StrctDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", 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: "22.1.4", ngImport: i0, type: StrctDropdownTrigger, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[strctDropdownTrigger]',
-                    host: {
-                        '[attr.aria-haspopup]': "dd ? (dd.popover() ? 'dialog' : 'menu') : null",
-                        '[attr.aria-expanded]': 'dd ? dd.open() : null',
-                        '(keydown.arrowdown)': 'onArrowDown($event)',
-                    },
-                }]
-        }] });
-let dropdownItemCounter = 0;
-/** A selectable row inside a `<strct-dropdown>`. */
-/**
- * A second action at the end of a menu item — "delete this saved view" beside
- * "open it". It stops its own click from reaching the item, so the item is not
- * activated and the menu stays open, and it stays out of the Tab order: the
- * right arrow reaches it from its item, the left arrow returns, and Delete on
- * the item triggers it.
- */
-class StrctDropdownItemAction {
-    onClick(event) {
-        event.stopPropagation();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownItemAction, isStandalone: true, selector: "[strctDropdownItemAction]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "onClick($event)" }, classAttribute: "strct-dd__itemaction" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemAction, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[strctDropdownItemAction]',
-                    host: {
-                        class: 'strct-dd__itemaction',
-                        tabindex: '-1',
-                        '(click)': 'onClick($event)',
-                    },
-                }]
-        }] });
-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, /* @ts-ignore */
-    ...(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 });
-    /**
-     * A short explanation — typically why a disabled item is unavailable. Shown
-     * as the tooltip and given to assistive technology as the description; never
-     * rendered inline. A disabled item with a hint stays keyboard-reachable so
-     * its reason can be read; activation stays blocked.
-     */
-    hint = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    hintId = `strct-dd-item-${++dropdownItemCounter}-hint`;
-    /** The panel this row belongs to, when it is inside one. */
-    panel = inject(StrctDropdown, { optional: true });
-    /**
-     * A menu's rows are roved with the arrow keys, so they stay out of the tab
-     * order. A `popover [focusable]` is a panel of real controls, and its rows
-     * keep a tab stop of their own.
-     */
-    tabindex = computed(() => {
-        if (this.disabled() && !this.hint())
-            return null;
-        return this.panel?.popover() && this.panel.focusable() ? 0 : -1;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Without pointer-events:none (see the hinted style), a disabled item
-        // would pass clicks to the consumer's (click). Capture-phase at the target
-        // runs before those listeners, and stopping here also keeps the menu's own
-        // activate-and-close handler from seeing it.
-        const host = inject((ElementRef)).nativeElement;
-        host.addEventListener('click', (event) => {
-            if (!this.disabled())
-                return;
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }, { capture: true });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "tabindex()", "attr.title": "hint() || null", "attr.aria-describedby": "hint() ? hintId : null", "class.strct-dd__item--hinted": "!!hint()", "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" />
+        class="strct-drawer__backdrop"
+        [class.strct-drawer__backdrop--bare]="!dismissable()"
+        (click)="onBackdrop()"
+      ></div>
+      <aside
+        class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        [attr.aria-label]="title() || ariaLabel()"
+        (keydown.tab)="onTab($event)"
+        (keydown.shift.tab)="onTab($event)"
+      >
+        @if (title() || dismissable()) {
+          <header class="strct-drawer__head">
+            <span class="strct-drawer__title">{{ title() }}</span>
+            @if (dismissable()) {
+              <button
+                type="button"
+                class="strct-drawer__close"
+                [attr.aria-label]="closeLabel()"
+                (click)="close()"
+              >
+                <strct-icon name="close" [size]="15" />
+              </button>
+            }
+          </header>
         }
-      </span>
-    }
-    <!-- Declared before the catch-all so its selector wins; CSS order and an
-         auto margin put it at the item's end. -->
-    <ng-content select="[strctDropdownItemAction]" />
-    <ng-content />
-    @if (hint()) {
-      <!-- hidden: kept out of the item's accessible NAME, still read as its
-           description through aria-describedby. -->
-      <span [id]="hintId" hidden>{{ hint() }}</span>
-    }`, 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__itemaction{order:1;margin-inline-start:auto;flex: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}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, decorators: [{
-            type: Component,
-            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" />
+        <div class="strct-drawer__body"><ng-content /></div>
+        @if (hasFooter()) {
+          <footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
         }
-      </span>
+      </aside>
     }
-    <!-- Declared before the catch-all so its selector wins; CSS order and an
-         auto margin put it at the item's end. -->
-    <ng-content select="[strctDropdownItemAction]" />
-    <ng-content />
-    @if (hint()) {
-      <!-- hidden: kept out of the item's accessible NAME, still read as its
-           description through aria-describedby. -->
-      <span [id]="hintId" hidden>{{ hint() }}</span>
-    }`, host: {
-                        class: 'strct-dd__item',
-                        '[attr.role]': "selected() === null ? 'menuitem' : 'menuitemradio'",
-                        '[attr.aria-checked]': 'selected()',
-                        // A disabled item is skipped — unless it has a hint to be read.
-                        '[attr.tabindex]': 'tabindex()',
-                        '[attr.title]': 'hint() || null',
-                        '[attr.aria-describedby]': 'hint() ? hintId : null',
-                        '[class.strct-dd__item--hinted]': '!!hint()',
-                        '[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: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__itemaction{order:1;margin-inline-start:auto;flex: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}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"] }]
-        }], ctorParameters: () => [], 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
-/** Thin separator between groups of menu items. */
-class StrctDropdownDivider {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownDivider, isStandalone: true, selector: "strct-dropdown-divider", host: { attributes: { "role": "separator" }, classAttribute: "strct-dd__divider" }, ngImport: i0, template: '', isInline: true, styles: [".strct-dd__divider{display:block;height:1px;margin:4px 6px;background:var(--b2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownDivider, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-dropdown-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: { class: 'strct-dd__divider', role: 'separator' }, styles: [".strct-dd__divider{display:block;height:1px;margin:4px 6px;background:var(--b2)}\n"] }]
-        }] });
+  `, host: {
+                        class: 'strct-drawer-host',
+                        '(document:keydown.escape)': 'onEscape($event)',
+                    }, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--backdrop);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.strct-drawer{position:fixed;z-index:calc(var(--z-overlay) + 1);display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{inset-inline-start:0;border-inline-end:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{inset-inline-end:0;border-inline-start:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}[dir=rtl] .strct-drawer--start{animation-name:strct-drawer-in-end}[dir=rtl] .strct-drawer--end{animation-name:strct-drawer-in-start}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{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-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.strct-drawer__backdrop,.strct-drawer{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], footerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDrawerFooter), { isSignal: true }] }] } });
 
 /**
  * Right-click (context) menu. Wraps a trigger area and shows a menu at the
@@ -7108,14 +7569,102 @@ class StrctSectionMenu {
         next.set(sec.label, !open);
         this.overrides.set(next);
     }
-    pick(item) {
+    /** Enabled entry with a router destination → renders as `<a routerLink>`. */
+    isRouted(item) {
+        return item.routerLink != null && !item.disabled;
+    }
+    /**
+     * Active state of a router-link entry: an explicit `activeId` is
+     * authoritative; without one the router's own active state drives it — the
+     * rail's contract.
+     */
+    isActive(item, routerActive) {
+        const id = this.activeId();
+        return id !== null ? item.id === id : routerActive;
+    }
+    pick(item, event) {
         if (item.disabled)
             return;
+        // A modified or non-primary click on a link belongs to the browser (a new
+        // tab, a copied address) — never to us: no activeId change, no (select).
+        if (event &&
+            (item.routerLink != null || item.href) &&
+            (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+            return;
+        }
         this.activeId.set(item.id);
         this.select.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSectionMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSectionMenu, isStandalone: true, selector: "strct-section-menu", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange", select: "select" }, host: { classAttribute: "strct-sm-host" }, ngImport: i0, template: `
+    <!-- What every entry holds, whatever element carries it. -->
+    <ng-template #rowContent let-item>
+      @if (showIcons() && item.icon) {
+        <strct-icon
+          class="strct-sm__item-icon"
+          [name]="item.icon"
+          [size]="16"
+          [strokeWidth]="1.4"
+        />
+      }
+      <span class="strct-sm__item-label">{{ item.label }}</span>
+      @if (item.trailingIcon) {
+        <strct-icon
+          class="strct-sm__trailing"
+          [name]="item.trailingIcon"
+          [size]="14"
+          [strokeWidth]="1.5"
+        />
+      }
+      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+        <span class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}">
+          {{ item.badge }}
+        </span>
+      } @else if (item.dot) {
+        <span class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"></span>
+      }
+    </ng-template>
+
+    <!-- A router link, a plain link, or a button (the default). A page with an
+         address of its own has to be openable in a new tab, as the rail
+         beside this menu already is. -->
+    <ng-template #row let-item>
+      @if (isRouted(item)) {
+        <a
+          class="strct-sm__item"
+          [routerLink]="item.routerLink"
+          routerLinkActive
+          #rla="routerLinkActive"
+          [class.strct-sm__item--active]="isActive(item, rla.isActive)"
+          [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else if (item.href && !item.disabled) {
+        <a
+          class="strct-sm__item"
+          [href]="item.href"
+          [class.strct-sm__item--active]="item.id === activeId()"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="strct-sm__item"
+          [class.strct-sm__item--active]="item.id === activeId()"
+          [disabled]="item.disabled"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          (click)="pick(item)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </button>
+      }
+    </ng-template>
+
     <nav class="strct-sm" [attr.aria-label]="ariaLabel()">
       @for (sec of sections(); track sec.label) {
         <div class="strct-sm__section" [class.strct-sm__section--collapsible]="collapsible()">
@@ -7146,54 +7695,86 @@ class StrctSectionMenu {
           @if (isOpen(sec)) {
             <div class="strct-sm__items" role="group">
               @for (item of sec.items; track item.id) {
-                <button
-                  type="button"
-                  class="strct-sm__item"
-                  [class.strct-sm__item--active]="item.id === activeId()"
-                  [disabled]="item.disabled"
-                  [attr.aria-current]="item.id === activeId() ? 'page' : null"
-                  (click)="pick(item)"
-                >
-                  @if (showIcons() && item.icon) {
-                    <strct-icon
-                      class="strct-sm__item-icon"
-                      [name]="item.icon"
-                      [size]="16"
-                      [strokeWidth]="1.4"
-                    />
-                  }
-                  <span class="strct-sm__item-label">{{ item.label }}</span>
-                  @if (item.trailingIcon) {
-                    <strct-icon
-                      class="strct-sm__trailing"
-                      [name]="item.trailingIcon"
-                      [size]="14"
-                      [strokeWidth]="1.5"
-                    />
-                  }
-                  @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
-                    <span
-                      class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}"
-                    >
-                      {{ item.badge }}
-                    </span>
-                  } @else if (item.dot) {
-                    <span
-                      class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"
-                    ></span>
-                  }
-                </button>
+                <ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
               }
             </div>
           }
         </div>
       }
     </nav>
-  `, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;text-decoration:none;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSectionMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-section-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+            args: [{ selector: 'strct-section-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, StrctIcon], template: `
+    <!-- What every entry holds, whatever element carries it. -->
+    <ng-template #rowContent let-item>
+      @if (showIcons() && item.icon) {
+        <strct-icon
+          class="strct-sm__item-icon"
+          [name]="item.icon"
+          [size]="16"
+          [strokeWidth]="1.4"
+        />
+      }
+      <span class="strct-sm__item-label">{{ item.label }}</span>
+      @if (item.trailingIcon) {
+        <strct-icon
+          class="strct-sm__trailing"
+          [name]="item.trailingIcon"
+          [size]="14"
+          [strokeWidth]="1.5"
+        />
+      }
+      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+        <span class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}">
+          {{ item.badge }}
+        </span>
+      } @else if (item.dot) {
+        <span class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"></span>
+      }
+    </ng-template>
+
+    <!-- A router link, a plain link, or a button (the default). A page with an
+         address of its own has to be openable in a new tab, as the rail
+         beside this menu already is. -->
+    <ng-template #row let-item>
+      @if (isRouted(item)) {
+        <a
+          class="strct-sm__item"
+          [routerLink]="item.routerLink"
+          routerLinkActive
+          #rla="routerLinkActive"
+          [class.strct-sm__item--active]="isActive(item, rla.isActive)"
+          [attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else if (item.href && !item.disabled) {
+        <a
+          class="strct-sm__item"
+          [href]="item.href"
+          [class.strct-sm__item--active]="item.id === activeId()"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          (click)="pick(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="strct-sm__item"
+          [class.strct-sm__item--active]="item.id === activeId()"
+          [disabled]="item.disabled"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          (click)="pick(item)"
+        >
+          <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
+        </button>
+      }
+    </ng-template>
+
     <nav class="strct-sm" [attr.aria-label]="ariaLabel()">
       @for (sec of sections(); track sec.label) {
         <div class="strct-sm__section" [class.strct-sm__section--collapsible]="collapsible()">
@@ -7224,50 +7805,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           @if (isOpen(sec)) {
             <div class="strct-sm__items" role="group">
               @for (item of sec.items; track item.id) {
-                <button
-                  type="button"
-                  class="strct-sm__item"
-                  [class.strct-sm__item--active]="item.id === activeId()"
-                  [disabled]="item.disabled"
-                  [attr.aria-current]="item.id === activeId() ? 'page' : null"
-                  (click)="pick(item)"
-                >
-                  @if (showIcons() && item.icon) {
-                    <strct-icon
-                      class="strct-sm__item-icon"
-                      [name]="item.icon"
-                      [size]="16"
-                      [strokeWidth]="1.4"
-                    />
-                  }
-                  <span class="strct-sm__item-label">{{ item.label }}</span>
-                  @if (item.trailingIcon) {
-                    <strct-icon
-                      class="strct-sm__trailing"
-                      [name]="item.trailingIcon"
-                      [size]="14"
-                      [strokeWidth]="1.5"
-                    />
-                  }
-                  @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
-                    <span
-                      class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}"
-                    >
-                      {{ item.badge }}
-                    </span>
-                  } @else if (item.dot) {
-                    <span
-                      class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"
-                    ></span>
-                  }
-                </button>
+                <ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
               }
             </div>
           }
         </div>
       }
     </nav>
-  `, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"] }]
+  `, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;text-decoration:none;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"] }]
         }], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 /**
@@ -7324,6 +7869,12 @@ class StrctCommandPalette {
      * rendering.
      */
     filter = input(true, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The order the sections are drawn in — the product you are in first, say.
+     * Sections not named here follow, in the order their first result arrives.
+     */
+    sectionOrder = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionOrder" }] : /* istanbul ignore next */ []));
     /** Show a "searching" row while server results are in flight. */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Localizable text of the loading row. */
@@ -7344,19 +7895,39 @@ class StrctCommandPalette {
     optionId(i) {
         return `${this.listId}-opt-${i}`;
     }
+    /**
+     * The results in their drawn order, chunked into sections. The flat index
+     * each row carries is the one the keyboard and `aria-activedescendant`
+     * use, so what the arrows do and what the eye sees stay the same list.
+     */
+    sections = computed(() => {
+        const out = [];
+        this.filtered().forEach((item, index) => {
+            const label = item.section ?? '';
+            const last = out[out.length - 1];
+            if (last && last.label === label)
+                last.rows.push({ item, index });
+            else
+                out.push({ label, id: `${this.listId}-sec-${out.length}`, rows: [{ item, index }] });
+        });
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     /** Rank: label prefix > word-start > substring; group/keyword matches last. */
     filtered = computed(() => {
         const items = this.items();
         // Server-backed mode: the caller already filtered — render as given.
         if (!this.filter())
-            return items.slice(0, this.maxResults());
+            return this.bySection(items.slice(0, this.maxResults()));
         const q = this.query().trim().toLowerCase();
         if (!q)
-            return items.slice(0, this.maxResults());
+            return this.bySection(items.slice(0, this.maxResults()));
         const scored = [];
         for (const item of items) {
             const label = item.label.toLowerCase();
-            const hay = [item.group ?? '', ...(item.keywords ?? [])].join(' ').toLowerCase();
+            const hay = [item.group ?? '', item.section ?? '', ...(item.keywords ?? [])]
+                .join(' ')
+                .toLowerCase();
             let score = -1;
             if (label.startsWith(q))
                 score = 0;
@@ -7369,12 +7940,30 @@ class StrctCommandPalette {
             if (score >= 0)
                 scored.push({ item, score });
         }
-        return scored
+        return this.bySection(scored
             .sort((a, b) => a.score - b.score)
             .slice(0, this.maxResults())
-            .map((s) => s.item);
+            .map((s) => s.item));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    /**
+     * Keeps each section's results together, in `sectionOrder` where it is
+     * given and otherwise in the order the sections first appear. The sort is
+     * stable, so how well a result matched still orders it inside its section.
+     */
+    bySection(list) {
+        const rank = new Map();
+        this.sectionOrder().forEach((name, i) => rank.set(name, i));
+        let next = rank.size;
+        for (const item of list) {
+            const key = item.section ?? '';
+            if (!rank.has(key))
+                rank.set(key, next++);
+        }
+        if (rank.size < 2)
+            return list;
+        return [...list].sort((a, b) => rank.get(a.section ?? '') - rank.get(b.section ?? ''));
+    }
     constructor() {
         // Async results can shrink under the cursor — keep the active option in range.
         effect(() => {
@@ -7453,7 +8042,7 @@ class StrctCommandPalette {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCommandPalette, isStandalone: true, selector: "strct-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked", query: "queryChange" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCommandPalette, isStandalone: true, selector: "strct-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, sectionOrder: { classPropertyName: "sectionOrder", publicName: "sectionOrder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked", query: "queryChange" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss (Escape covers keyboard). -->
       <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -7489,34 +8078,61 @@ class StrctCommandPalette {
                 <span class="strct-cmdp__spin" aria-hidden="true"></span>{{ loadingText() }}
               </div>
             }
-            @for (item of filtered(); track item.id; let i = $index) {
-              <button
-                type="button"
-                class="strct-cmdp__item"
-                role="option"
-                [id]="optionId(i)"
-                [attr.aria-selected]="i === activeIndex()"
-                [class.is-active]="i === activeIndex()"
-                tabindex="-1"
-                (click)="pick(item)"
-                (mousemove)="activeIndex.set(i)"
+            <!-- A section is a group with a heading, not an option: the
+                 heading is never active and never picked, and the arrows
+                 move through every option across every section. -->
+            @for (section of sections(); track section.id) {
+              <div
+                class="strct-cmdp__sec"
+                role="group"
+                [attr.aria-labelledby]="section.label ? section.id : null"
               >
-                @if (item.icon) {
-                  <strct-icon
-                    class="strct-cmdp__icon"
-                    [name]="item.icon"
-                    [size]="16"
-                    [strokeWidth]="1.4"
-                  />
+                @if (section.label) {
+                  <div class="strct-cmdp__section" [id]="section.id">{{ section.label }}</div>
                 }
-                <span class="strct-cmdp__label">{{ item.label }}</span>
-                @if (item.hint) {
-                  <strct-kbd>{{ item.hint }}</strct-kbd>
-                }
-                @if (item.group) {
-                  <span class="strct-cmdp__group">{{ item.group }}</span>
+                @for (row of section.rows; track row.item.id) {
+                  <button
+                    type="button"
+                    class="strct-cmdp__item"
+                    role="option"
+                    [id]="optionId(row.index)"
+                    [attr.aria-selected]="row.index === activeIndex()"
+                    [class.is-active]="row.index === activeIndex()"
+                    tabindex="-1"
+                    (click)="pick(row.item)"
+                    (mousemove)="activeIndex.set(row.index)"
+                  >
+                    @if (row.item.icon) {
+                      <strct-icon
+                        class="strct-cmdp__icon"
+                        [name]="row.item.icon"
+                        [size]="16"
+                        [strokeWidth]="1.4"
+                      />
+                    }
+                    <span class="strct-cmdp__text">
+                      <span class="strct-cmdp__label">{{ row.item.label }}</span>
+                      @if (row.item.description) {
+                        <span class="strct-cmdp__desc">{{ row.item.description }}</span>
+                      }
+                    </span>
+                    @if (row.item.hint) {
+                      <strct-kbd>{{ row.item.hint }}</strct-kbd>
+                    }
+                    @if (row.item.badge; as badge) {
+                      <strct-badge
+                        class="strct-cmdp__badge"
+                        [status]="badge.status ?? 'neutral'"
+                        [tone]="badge.tone ?? ''"
+                        >{{ badge.label }}</strct-badge
+                      >
+                    }
+                    @if (row.item.group) {
+                      <span class="strct-cmdp__group">{{ row.item.group }}</span>
+                    }
+                  </button>
                 }
-              </button>
+              </div>
             } @empty {
               @if (!loading()) {
                 <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
@@ -7526,11 +8142,11 @@ class StrctCommandPalette {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex:0 20 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.strct-cmdp__desc{font-size:var(--text-sm);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__badge{flex:none}.strct-cmdp__section{padding:8px 12px 4px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }, { kind: "component", type: StrctBadge, selector: "strct-badge", inputs: ["status", "tone", "solid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCommandPalette, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctKbd], host: { '(document:keydown)': 'onGlobalKey($event)' }, template: `
+            args: [{ selector: 'strct-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctKbd, StrctBadge], host: { '(document:keydown)': 'onGlobalKey($event)' }, template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss (Escape covers keyboard). -->
       <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -7566,34 +8182,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 <span class="strct-cmdp__spin" aria-hidden="true"></span>{{ loadingText() }}
               </div>
             }
-            @for (item of filtered(); track item.id; let i = $index) {
-              <button
-                type="button"
-                class="strct-cmdp__item"
-                role="option"
-                [id]="optionId(i)"
-                [attr.aria-selected]="i === activeIndex()"
-                [class.is-active]="i === activeIndex()"
-                tabindex="-1"
-                (click)="pick(item)"
-                (mousemove)="activeIndex.set(i)"
+            <!-- A section is a group with a heading, not an option: the
+                 heading is never active and never picked, and the arrows
+                 move through every option across every section. -->
+            @for (section of sections(); track section.id) {
+              <div
+                class="strct-cmdp__sec"
+                role="group"
+                [attr.aria-labelledby]="section.label ? section.id : null"
               >
-                @if (item.icon) {
-                  <strct-icon
-                    class="strct-cmdp__icon"
-                    [name]="item.icon"
-                    [size]="16"
-                    [strokeWidth]="1.4"
-                  />
-                }
-                <span class="strct-cmdp__label">{{ item.label }}</span>
-                @if (item.hint) {
-                  <strct-kbd>{{ item.hint }}</strct-kbd>
+                @if (section.label) {
+                  <div class="strct-cmdp__section" [id]="section.id">{{ section.label }}</div>
                 }
-                @if (item.group) {
-                  <span class="strct-cmdp__group">{{ item.group }}</span>
+                @for (row of section.rows; track row.item.id) {
+                  <button
+                    type="button"
+                    class="strct-cmdp__item"
+                    role="option"
+                    [id]="optionId(row.index)"
+                    [attr.aria-selected]="row.index === activeIndex()"
+                    [class.is-active]="row.index === activeIndex()"
+                    tabindex="-1"
+                    (click)="pick(row.item)"
+                    (mousemove)="activeIndex.set(row.index)"
+                  >
+                    @if (row.item.icon) {
+                      <strct-icon
+                        class="strct-cmdp__icon"
+                        [name]="row.item.icon"
+                        [size]="16"
+                        [strokeWidth]="1.4"
+                      />
+                    }
+                    <span class="strct-cmdp__text">
+                      <span class="strct-cmdp__label">{{ row.item.label }}</span>
+                      @if (row.item.description) {
+                        <span class="strct-cmdp__desc">{{ row.item.description }}</span>
+                      }
+                    </span>
+                    @if (row.item.hint) {
+                      <strct-kbd>{{ row.item.hint }}</strct-kbd>
+                    }
+                    @if (row.item.badge; as badge) {
+                      <strct-badge
+                        class="strct-cmdp__badge"
+                        [status]="badge.status ?? 'neutral'"
+                        [tone]="badge.tone ?? ''"
+                        >{{ badge.label }}</strct-badge
+                      >
+                    }
+                    @if (row.item.group) {
+                      <span class="strct-cmdp__group">{{ row.item.group }}</span>
+                    }
+                  </button>
                 }
-              </button>
+              </div>
             } @empty {
               @if (!loading()) {
                 <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
@@ -7603,8 +8246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </div>
       </div>
     }
-  `, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
+  `, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex:0 20 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.strct-cmdp__desc{font-size:var(--text-sm);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__badge{flex:none}.strct-cmdp__section{padding:8px 12px 4px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], sectionOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOrder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
 
 /**
  * Compact search pill — the pattern from the docs header: a leading search
@@ -29449,5 +30092,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_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, 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_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map