@akcelik/strct 0.2.0 → 0.4.0

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, DestroyRef, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -124,6 +124,9 @@ const STRCT_ICONS = {
     code: '<path d="M5.5 5L2.5 8l3 3M10.5 5l3 3-3 3M9 3.5l-2 9"/>',
     book: '<path d="M3 3.2h6a1.5 1.5 0 0 1 1.5 1.5v8.1H4.5A1.5 1.5 0 0 1 3 11.3z"/><path d="M13 3.2H9.5A1.5 1.5 0 0 0 8 4.7v8.1h5z"/>',
     terminal: '<rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M4.8 6.5L7 8.2 4.8 9.9M8.2 10.2h3"/>',
+    folder: '<path d="M2 4.6a1 1 0 0 1 1-1h3.1l1.3 1.6H13a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>',
+    template: '<path d="M4.3 2.5h4.6l3.1 3.1V13a.5.5 0 0 1-.5.5H4.3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z"/><path d="M8.7 2.6v3.1h3.1"/><path d="M5.8 9h4.2M5.8 11h2.6"/>',
+    tag: '<path d="M2.6 7.7V3.2a.6.6 0 0 1 .6-.6h4.5l5.6 5.6a1 1 0 0 1 0 1.4l-3.5 3.5a1 1 0 0 1-1.4 0z"/><circle cx="5.4" cy="5.4" r=".9" fill="currentColor" stroke="none"/>',
     // ── Datacenter / infrastructure ─────────────────────────────
     datacenter: '<rect x="2.5" y="2.5" width="11" height="11" rx="1"/><path d="M5 5h6M5 7.3h6M5 9.6h3.5"/><circle cx="11" cy="9.7" r=".5" fill="currentColor" stroke="none"/>',
     rack: '<rect x="3.5" y="2" width="9" height="12" rx="1"/><path d="M3.5 5.2h9M3.5 8.4h9M3.5 11.6h9"/><circle cx="5.4" cy="3.6" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="6.8" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="10" r=".4" fill="currentColor" stroke="none"/>',
@@ -144,6 +147,10 @@ const STRCT_ICONS = {
     hba: '<rect x="2.3" y="3.4" width="11.4" height="6.4" rx="1"/><circle cx="5.1" cy="6.6" r="1.2"/><circle cx="8.1" cy="6.6" r="1.2"/><path d="M10.6 5.6h1.6M10.6 7.6h1.6M5 9.8v2.6M11 9.8v2.6"/>',
     // RJ45 ethernet port (switch / server) — keyed jack with contact pins.
     ethernet: '<rect x="2.5" y="4" width="11" height="7.4" rx="1"/><path d="M6 4V2.6h4V4"/><path d="M5.3 7.6v2M7.1 7.6v2M8.9 7.6v2M10.7 7.6v2"/>',
+    // Resource pool — a proportional allocation (pie with two radii).
+    resourcePool: '<circle cx="8" cy="8" r="5.6"/><path d="M8 8V2.4M8 8l4.9 2.7"/>',
+    // Port group — a grouped set of switch ports under a shared rail.
+    portGroup: '<path d="M1.8 4.4h12.4"/><rect x="2.2" y="6.2" width="3.4" height="4" rx=".5"/><rect x="6.3" y="6.2" width="3.4" height="4" rx=".5"/><rect x="10.4" y="6.2" width="3.4" height="4" rx=".5"/><path d="M3.9 10.2v1.6M8 10.2v1.6M12.1 10.2v1.6"/>',
     // ── Accessibility (original glyphs for generic concepts) ─────
     universalAccess: '<circle cx="8" cy="8" r="6"/><circle cx="8" cy="4.9" r=".9" fill="currentColor" stroke="none"/><path d="M4.9 6.3c2 .8 4.2 .8 6.2 0M8 6.4v3.1M6.3 11.9 8 9.4l1.7 2.5"/>',
     wheelchair: '<circle cx="6.5" cy="3.1" r="1.3"/><path d="M6.5 4.5v3.3h3.1l1.7 3.4"/><circle cx="6.7" cy="11.3" r="2.6"/><path d="M9.3 11.3h2.1l-.5 1.6"/>',
@@ -181,7 +188,7 @@ const STRCT_ICON_GROUPS = [
             'hexagon', 'search', 'menu', 'ellipsis', 'dots', 'close', 'check', 'calendar',
             'eye', 'eyeOff', 'upload', 'download', 'sun', 'moon', 'bell', 'heart', 'layers',
             'grid', 'form', 'chart', 'bars', 'gauge', 'palette', 'sidebar', 'compass',
-            'copy', 'code', 'book', 'terminal',
+            'copy', 'code', 'book', 'terminal', 'folder', 'template', 'tag',
         ],
     },
     {
@@ -201,6 +208,7 @@ const STRCT_ICON_GROUPS = [
         names: [
             'datacenter', 'rack', 'cluster', 'host', 'vm', 'switch', 'storage',
             'network', 'cpu', 'memory', 'disk', 'port', 'nic', 'hba', 'ethernet', 'power',
+            'resourcePool', 'portGroup',
         ],
     },
     {
@@ -436,10 +444,16 @@ class StrctOverlay {
         let left;
         if (p === 'right') {
             left = a.right + gap;
+            // Flip to the left of the anchor if it would overflow the right edge.
+            if (left + w > vw - margin && a.left - gap - w > margin)
+                left = a.left - gap - w;
             top = a.top;
         }
         else if (p === 'left') {
             left = a.left - gap - w;
+            // Flip to the right of the anchor if it would overflow the left edge.
+            if (left < margin && a.right + gap + w < vw - margin)
+                left = a.right + gap;
             top = a.top;
         }
         else {
@@ -1117,132 +1131,488 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTab), { isSignal: true }] }] } });
 
 /**
- * Tree node. Two modes:
- *  - **Content:** nest `<strct-tree-node>` children manually.
- *  - **Data:** pass a `[node]` object that recurses over its `children` —
- *    used internally by `<strct-tree [nodes]>`.
- *
- *   <strct-tree-node label="Group" icon="layers" badge="ok" [(expanded)]="open">
- *     <strct-tree-node label="Leaf" icon="vm" [active]="true" />
- *   </strct-tree-node>
+ * Floating menu panel — portaled into `<body>` (so it escapes overflow /
+ * transform clipping), positioned by its real measured size, with full keyboard
+ * navigation and recursive submenus. Usually created by `[strctContextMenu]`,
+ * but can be embedded directly with `submenu`.
  */
-class StrctTreeNode {
-    /** Data-driven node; when set, label/icon/children come from it. */
-    node = input(null, ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    badge = input('none', ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
-    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    /** Content-mode click. */
-    activated = output();
-    /** Data-mode click — carries the activated node (bubbles to the tree). */
-    nodeActivated = output();
-    childNodes = contentChildren(StrctTreeNode, ...(ngDevMode ? [{ debugName: "childNodes" }] : /* istanbul ignore next */ []));
-    /** Data-mode expansion (seeded from node.expanded on first toggle). */
-    dataExpanded = signal(null, ...(ngDevMode ? [{ debugName: "dataExpanded" }] : /* istanbul ignore next */ []));
-    displayLabel = computed(() => this.node()?.label ?? this.label(), ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
-    displayIcon = computed(() => this.node()?.icon ?? this.icon(), ...(ngDevMode ? [{ debugName: "displayIcon" }] : /* istanbul ignore next */ []));
-    displayBadge = computed(() => this.node()?.badge ?? this.badge(), ...(ngDevMode ? [{ debugName: "displayBadge" }] : /* istanbul ignore next */ []));
-    displayActive = computed(() => this.node()?.active ?? this.active(), ...(ngDevMode ? [{ debugName: "displayActive" }] : /* istanbul ignore next */ []));
-    hasChildren = computed(() => {
-        const n = this.node();
-        return n ? (n.children?.length ?? 0) > 0 : this.childNodes().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
-    isOpen = computed(() => {
-        if (this.node())
-            return this.dataExpanded() ?? this.node().expanded ?? false;
-        return this.expanded();
-    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    toggle() {
-        if (this.node()) {
-            this.dataExpanded.set(!this.isOpen());
+class StrctMenuPanel {
+    host = inject(ElementRef);
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    x = input(0, ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+    y = input(0, ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+    submenu = input(false, { ...(ngDevMode ? { debugName: "submenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    select = output();
+    close = output();
+    /** ArrowLeft inside a submenu — asks the parent to close it. */
+    back = output();
+    posX = signal(0, ...(ngDevMode ? [{ debugName: "posX" }] : /* istanbul ignore next */ []));
+    posY = signal(0, ...(ngDevMode ? [{ debugName: "posY" }] : /* istanbul ignore next */ []));
+    flipLeft = signal(false, ...(ngDevMode ? [{ debugName: "flipLeft" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    openSubIndex = signal(null, ...(ngDevMode ? [{ debugName: "openSubIndex" }] : /* istanbul ignore next */ []));
+    navIndices = computed(() => this.items()
+        .map((it, i) => (it.divider ? -1 : i))
+        .filter((i) => i >= 0), ...(ngDevMode ? [{ debugName: "navIndices" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.posX.set(this.x());
+        this.posY.set(this.y());
+        afterNextRender(() => {
+            this.activeIndex.set(this.navIndices()[0] ?? 0);
+            if (!this.submenu())
+                this.clampToViewport();
+            this.focusItem(this.activeIndex());
+        });
+    }
+    clampToViewport() {
+        const host = this.host.nativeElement;
+        const w = host.offsetWidth;
+        const h = host.offsetHeight;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const m = 6;
+        let nx = this.x();
+        let ny = this.y();
+        if (nx + w > vw - m)
+            nx = Math.max(m, Math.min(this.x() - w, vw - w - m));
+        if (ny + h > vh - m)
+            ny = Math.max(m, vh - h - m);
+        this.posX.set(nx);
+        this.posY.set(ny);
+        // Submenus of a panel near the right edge open to the left.
+        this.flipLeft.set(nx + w > vw - 220);
+    }
+    focusItem(i) {
+        this.activeIndex.set(i);
+        this.host.nativeElement
+            .querySelector(`.strct-menu__item[data-idx="${i}"]`)
+            ?.focus();
+    }
+    move(dir) {
+        const nav = this.navIndices();
+        if (!nav.length)
+            return;
+        const pos = nav.indexOf(this.activeIndex());
+        const next = nav[(pos + dir + nav.length) % nav.length];
+        this.openSubIndex.set(null);
+        this.focusItem(next);
+    }
+    onHover(i) {
+        this.activeIndex.set(i);
+        const it = this.items()[i];
+        this.openSubIndex.set(it?.children?.length ? i : null);
+    }
+    onLeave(i) {
+        if (this.openSubIndex() === i)
+            this.openSubIndex.set(null);
+    }
+    onItemClick(item, i, event) {
+        event.stopPropagation();
+        if (item.disabled)
+            return;
+        if (item.children?.length) {
+            this.openSubIndex.set(this.openSubIndex() === i ? null : i);
+            this.focusItem(i);
         }
         else {
-            this.expanded.update((v) => !v);
+            this.select.emit(item);
         }
     }
-    onActivate() {
-        const n = this.node();
-        if (n)
-            this.nodeActivated.emit(n);
-        else
-            this.activated.emit();
+    closeSub() {
+        this.openSubIndex.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTreeNode, isStandalone: true, selector: "strct-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", activated: "activated", nodeActivated: "nodeActivated" }, host: { classAttribute: "strct-tnode" }, queries: [{ propertyName: "childNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="strct-tnode__row"
-      [class.strct-tnode__row--active]="displayActive()"
-      role="treeitem"
-      [attr.aria-expanded]="hasChildren() ? isOpen() : null"
-      (click)="onActivate()"
-    >
-      @if (hasChildren()) {
-        <span
-          class="strct-tnode__chevron"
-          [class.strct-tnode__chevron--open]="isOpen()"
-          (click)="$event.stopPropagation(); toggle()"
-        >
-          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-        </span>
-      } @else {
-        <span class="strct-tnode__spacer"></span>
-      }
-      @if (displayIcon()) {
-        <strct-icon
-          class="strct-tnode__icon"
-          [name]="displayIcon()!"
-          [size]="14"
-          [strokeWidth]="1.3"
-          [badge]="displayBadge()"
-        />
-      }
-      <span class="strct-tnode__label">{{ displayLabel() }}</span>
-      <ng-content select="[strctTreeTrailing]" />
-    </div>
-    @if (hasChildren() && isOpen()) {
-      <div class="strct-tnode__children" role="group">
-        @if (node()) {
-          @for (child of node()!.children ?? []; track $index) {
-            <strct-tree-node [node]="child" (nodeActivated)="nodeActivated.emit($event)" />
-          }
-        } @else {
-          <ng-content />
+    onKeydown(event) {
+        const key = event.key;
+        const item = this.items()[this.activeIndex()];
+        switch (key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusItem(this.navIndices()[0] ?? 0);
+                break;
+            case 'End':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusItem(this.navIndices().at(-1) ?? 0);
+                break;
+            case 'ArrowRight':
+                if (item?.children?.length) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.openSubIndex.set(this.activeIndex());
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.openSubIndex() != null)
+                    this.closeSub();
+                else if (this.submenu())
+                    this.back.emit();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                event.stopPropagation();
+                if (item && !item.disabled) {
+                    if (item.children?.length)
+                        this.openSubIndex.set(this.activeIndex());
+                    else
+                        this.select.emit(item);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.close.emit();
+                break;
         }
-      </div>
     }
-  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded"], outputs: ["expandedChange", "activated", "nodeActivated"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <div
-      class="strct-tnode__row"
-      [class.strct-tnode__row--active]="displayActive()"
-      role="treeitem"
-      [attr.aria-expanded]="hasChildren() ? isOpen() : null"
-      (click)="onActivate()"
-    >
-      @if (hasChildren()) {
-        <span
-          class="strct-tnode__chevron"
-          [class.strct-tnode__chevron--open]="isOpen()"
-          (click)="$event.stopPropagation(); toggle()"
-        >
-          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-        </span>
-      } @else {
-        <span class="strct-tnode__spacer"></span>
-      }
-      @if (displayIcon()) {
-        <strct-icon
-          class="strct-tnode__icon"
-          [name]="displayIcon()!"
-          [size]="14"
-          [strokeWidth]="1.3"
-          [badge]="displayBadge()"
-        />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctMenuPanel, isStandalone: true, selector: "strct-menu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", close: "close", back: "back" }, host: { properties: { "style.position": "submenu() ? null : 'fixed'", "style.left.px": "submenu() ? null : posX()", "style.top.px": "submenu() ? null : posY()", "style.zIndex": "submenu() ? null : 1100" }, classAttribute: "strct-menu-host" }, ngImport: i0, template: `
+    <div class="strct-menu" role="menu" tabindex="-1" (keydown)="onKeydown($event)">
+      @for (item of items(); track $index; let i = $index) {
+        @if (item.divider) {
+          <div class="strct-menu__sep" role="separator"></div>
+        } @else {
+          <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
+            <button
+              type="button"
+              class="strct-menu__item"
+              [attr.data-idx]="i"
+              [class.strct-menu__item--danger]="item.danger"
+              [class.strct-menu__item--active]="i === activeIndex()"
+              [disabled]="item.disabled"
+              role="menuitem"
+              [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
+              [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
+              [attr.tabindex]="i === activeIndex() ? 0 : -1"
+              (click)="onItemClick(item, i, $event)"
+            >
+              @if (item.icon) {
+                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
+              } @else {
+                <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
+              }
+              <span class="strct-menu__label">{{ item.label }}</span>
+              @if (item.children?.length) {
+                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+              }
+            </button>
+            @if (openSubIndex() === i && item.children?.length) {
+              <strct-menu-panel
+                submenu
+                class="strct-menu__subpanel"
+                [class.strct-menu__subpanel--flip]="flipLeft()"
+                [items]="item.children!"
+                [data]="data()"
+                (select)="select.emit($event)"
+                (close)="close.emit()"
+                (back)="closeSub(); focusItem(i)"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenuPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-menu-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <div class="strct-menu" role="menu" tabindex="-1" (keydown)="onKeydown($event)">
+      @for (item of items(); track $index; let i = $index) {
+        @if (item.divider) {
+          <div class="strct-menu__sep" role="separator"></div>
+        } @else {
+          <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
+            <button
+              type="button"
+              class="strct-menu__item"
+              [attr.data-idx]="i"
+              [class.strct-menu__item--danger]="item.danger"
+              [class.strct-menu__item--active]="i === activeIndex()"
+              [disabled]="item.disabled"
+              role="menuitem"
+              [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
+              [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
+              [attr.tabindex]="i === activeIndex() ? 0 : -1"
+              (click)="onItemClick(item, i, $event)"
+            >
+              @if (item.icon) {
+                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
+              } @else {
+                <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
+              }
+              <span class="strct-menu__label">{{ item.label }}</span>
+              @if (item.children?.length) {
+                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+              }
+            </button>
+            @if (openSubIndex() === i && item.children?.length) {
+              <strct-menu-panel
+                submenu
+                class="strct-menu__subpanel"
+                [class.strct-menu__subpanel--flip]="flipLeft()"
+                [items]="item.children!"
+                [data]="data()"
+                (select)="select.emit($event)"
+                (close)="close.emit()"
+                (back)="closeSub(); focusItem(i)"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+  `, host: {
+                        class: 'strct-menu-host',
+                        '[style.position]': "submenu() ? null : 'fixed'",
+                        '[style.left.px]': 'submenu() ? null : posX()',
+                        '[style.top.px]': 'submenu() ? null : posY()',
+                        '[style.zIndex]': 'submenu() ? null : 1100',
+                    }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], close: [{ type: i0.Output, args: ["close"] }], back: [{ type: i0.Output, args: ["back"] }] } });
+/**
+ * Right-click (context) menu driven by a data array. Attach to any trigger; the
+ * menu portals into `<body>` and runs each item's `action` on selection.
+ *   <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
+ *        (menuSelect)="onPick($event)">…</div>
+ */
+class StrctContextMenuTrigger {
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    zone = inject(NgZone);
+    doc = inject(DOCUMENT$1);
+    items = input.required({ ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), alias: 'strctContextMenu' });
+    data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'strctContextMenuData' });
+    menuSelect = output();
+    ref = null;
+    onClose = () => this.zone.run(() => this.closeMenu());
+    onContextMenu(event) {
+        if (!this.items()?.length)
+            return;
+        event.preventDefault();
+        this.openAt(event.clientX, event.clientY);
+    }
+    openAt(x, y) {
+        this.closeMenu();
+        const ref = createComponent(StrctMenuPanel, { environmentInjector: this.envInjector });
+        ref.setInput('items', this.items());
+        ref.setInput('data', this.data());
+        ref.setInput('x', x);
+        ref.setInput('y', y);
+        ref.instance.select.subscribe((item) => {
+            item.action?.(this.data());
+            this.menuSelect.emit(item);
+            this.closeMenu();
+        });
+        ref.instance.close.subscribe(() => this.closeMenu());
+        this.appRef.attachView(ref.hostView);
+        this.doc.body.appendChild(ref.location.nativeElement);
+        this.ref = ref;
+        // Defer global listeners so the opening right-click doesn't immediately close.
+        setTimeout(() => {
+            this.zone.runOutsideAngular(() => {
+                this.doc.addEventListener('mousedown', this.onOutside, true);
+                window.addEventListener('scroll', this.onClose, true);
+                window.addEventListener('resize', this.onClose);
+            });
+        });
+    }
+    onOutside = (event) => {
+        if (this.ref && !this.ref.location.nativeElement.contains(event.target)) {
+            this.onClose();
+        }
+    };
+    closeMenu() {
+        if (!this.ref)
+            return;
+        this.doc.removeEventListener('mousedown', this.onOutside, true);
+        window.removeEventListener('scroll', this.onClose, true);
+        window.removeEventListener('resize', this.onClose);
+        this.appRef.detachView(this.ref.hostView);
+        this.ref.destroy();
+        this.ref = null;
+    }
+    ngOnDestroy() {
+        this.closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: StrctContextMenuTrigger, isStandalone: true, selector: "[strctContextMenu]", inputs: { items: { classPropertyName: "items", publicName: "strctContextMenu", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "strctContextMenuData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuSelect: "menuSelect" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctContextMenu]' }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctContextMenu", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctContextMenuData", required: false }] }], menuSelect: [{ type: i0.Output, args: ["menuSelect"] }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
+/**
+ * Tree node. Two modes:
+ *  - **Content:** nest `<strct-tree-node>` children manually.
+ *  - **Data:** pass a `[node]` object that recurses over its `children` —
+ *    used internally by `<strct-tree [nodes]>`.
+ *
+ *   <strct-tree-node label="Group" icon="layers" badge="ok" [(expanded)]="open">
+ *     <strct-tree-node label="Leaf" icon="vm" [active]="true" />
+ *   </strct-tree-node>
+ */
+class StrctTreeNode {
+    /** Data-driven node; when set, label/icon/children come from it. */
+    node = input(null, ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    badge = input('none', ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Per-node menu resolver (data mode); bubbles down the recursion. */
+    nodeMenu = input(null, ...(ngDevMode ? [{ debugName: "nodeMenu" }] : /* istanbul ignore next */ []));
+    /** Content-mode click. */
+    activated = output();
+    /** Data-mode click — carries the activated node (bubbles to the tree). */
+    nodeActivated = output();
+    /** Data-mode right-click menu selection (bubbles to the tree). */
+    nodeMenuSelect = output();
+    /** Right-click menu items for this node ([] when no resolver / not data mode). */
+    menuItems = computed(() => {
+        const fn = this.nodeMenu();
+        const n = this.node();
+        return fn && n ? fn(n) : [];
+    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    childNodes = contentChildren(StrctTreeNode, ...(ngDevMode ? [{ debugName: "childNodes" }] : /* istanbul ignore next */ []));
+    /** Data-mode expansion (seeded from node.expanded on first toggle). */
+    dataExpanded = signal(null, ...(ngDevMode ? [{ debugName: "dataExpanded" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => this.node()?.label ?? this.label(), ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    displayIcon = computed(() => this.node()?.icon ?? this.icon(), ...(ngDevMode ? [{ debugName: "displayIcon" }] : /* istanbul ignore next */ []));
+    displayBadge = computed(() => this.node()?.badge ?? this.badge(), ...(ngDevMode ? [{ debugName: "displayBadge" }] : /* istanbul ignore next */ []));
+    displayActive = computed(() => this.node()?.active ?? this.active(), ...(ngDevMode ? [{ debugName: "displayActive" }] : /* istanbul ignore next */ []));
+    hasChildren = computed(() => {
+        const n = this.node();
+        return n ? (n.children?.length ?? 0) > 0 : this.childNodes().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => {
+        if (this.node())
+            return this.dataExpanded() ?? this.node().expanded ?? false;
+        return this.expanded();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.node()) {
+            this.dataExpanded.set(!this.isOpen());
+        }
+        else {
+            this.expanded.update((v) => !v);
+        }
+    }
+    onActivate() {
+        const n = this.node();
+        if (n)
+            this.nodeActivated.emit(n);
+        else
+            this.activated.emit();
+    }
+    onMenuSelect(item) {
+        const n = this.node();
+        if (n)
+            this.nodeMenuSelect.emit({ node: n, item });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTreeNode, isStandalone: true, selector: "strct-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, nodeMenu: { classPropertyName: "nodeMenu", publicName: "nodeMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", activated: "activated", nodeActivated: "nodeActivated", nodeMenuSelect: "nodeMenuSelect" }, host: { classAttribute: "strct-tnode" }, queries: [{ propertyName: "childNodes", predicate: StrctTreeNode, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="strct-tnode__row"
+      [class.strct-tnode__row--active]="displayActive()"
+      role="treeitem"
+      [attr.aria-expanded]="hasChildren() ? isOpen() : null"
+      [strctContextMenu]="menuItems()"
+      [strctContextMenuData]="node()"
+      (menuSelect)="onMenuSelect($event)"
+      (click)="onActivate()"
+    >
+      @if (hasChildren()) {
+        <span
+          class="strct-tnode__chevron"
+          [class.strct-tnode__chevron--open]="isOpen()"
+          (click)="$event.stopPropagation(); toggle()"
+        >
+          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+        </span>
+      } @else {
+        <span class="strct-tnode__spacer"></span>
+      }
+      @if (displayIcon()) {
+        <strct-icon
+          class="strct-tnode__icon"
+          [name]="displayIcon()!"
+          [size]="14"
+          [strokeWidth]="1.3"
+          [badge]="displayBadge()"
+        />
+      }
+      <span class="strct-tnode__label">{{ displayLabel() }}</span>
+      <ng-content select="[strctTreeTrailing]" />
+    </div>
+    @if (hasChildren() && isOpen()) {
+      <div class="strct-tnode__children" role="group">
+        @if (node()) {
+          @for (child of node()!.children ?? []; track $index) {
+            <strct-tree-node
+              [node]="child"
+              [nodeMenu]="nodeMenu()"
+              (nodeActivated)="nodeActivated.emit($event)"
+              (nodeMenuSelect)="nodeMenuSelect.emit($event)"
+            />
+          }
+        } @else {
+          <ng-content />
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctContextMenuTrigger], template: `
+    <div
+      class="strct-tnode__row"
+      [class.strct-tnode__row--active]="displayActive()"
+      role="treeitem"
+      [attr.aria-expanded]="hasChildren() ? isOpen() : null"
+      [strctContextMenu]="menuItems()"
+      [strctContextMenuData]="node()"
+      (menuSelect)="onMenuSelect($event)"
+      (click)="onActivate()"
+    >
+      @if (hasChildren()) {
+        <span
+          class="strct-tnode__chevron"
+          [class.strct-tnode__chevron--open]="isOpen()"
+          (click)="$event.stopPropagation(); toggle()"
+        >
+          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
+        </span>
+      } @else {
+        <span class="strct-tnode__spacer"></span>
+      }
+      @if (displayIcon()) {
+        <strct-icon
+          class="strct-tnode__icon"
+          [name]="displayIcon()!"
+          [size]="14"
+          [strokeWidth]="1.3"
+          [badge]="displayBadge()"
+        />
       }
       <span class="strct-tnode__label">{{ displayLabel() }}</span>
       <ng-content select="[strctTreeTrailing]" />
@@ -1251,7 +1621,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       <div class="strct-tnode__children" role="group">
         @if (node()) {
           @for (child of node()!.children ?? []; track $index) {
-            <strct-tree-node [node]="child" (nodeActivated)="nodeActivated.emit($event)" />
+            <strct-tree-node
+              [node]="child"
+              [nodeMenu]="nodeMenu()"
+              (nodeActivated)="nodeActivated.emit($event)"
+              (nodeMenuSelect)="nodeMenuSelect.emit($event)"
+            />
           }
         } @else {
           <ng-content />
@@ -1259,7 +1634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       </div>
     }
   `, host: { class: 'strct-tnode' }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"] }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], activated: [{ type: i0.Output, args: ["activated"] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }] } });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }] } });
 /**
  * Root container for a tree. Either project `<strct-tree-node>` children, or
  * pass `[nodes]` for a fully data-driven, self-recursing tree:
@@ -1268,33 +1643,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class StrctTree {
     /** Data-driven node list; when set, projected content is ignored. */
     nodes = input(null, ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Per-node right-click menu resolver. */
+    nodeMenu = input(null, ...(ngDevMode ? [{ debugName: "nodeMenu" }] : /* istanbul ignore next */ []));
     /** Emitted when any data-driven node is clicked. */
     nodeActivated = output();
+    /** Emitted when a data-driven node's right-click menu item is chosen. */
+    nodeMenuSelect = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActivated: "nodeActivated" }, host: { attributes: { "role": "tree" }, classAttribute: "strct-tree" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctTree, isStandalone: true, selector: "strct-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeMenu: { classPropertyName: "nodeMenu", publicName: "nodeMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActivated: "nodeActivated", nodeMenuSelect: "nodeMenuSelect" }, host: { attributes: { "role": "tree" }, classAttribute: "strct-tree" }, ngImport: i0, template: `
     @if (nodes(); as ns) {
       @for (n of ns; track $index) {
-        <strct-tree-node [node]="n" (nodeActivated)="nodeActivated.emit($event)" />
+        <strct-tree-node
+          [node]="n"
+          [nodeMenu]="nodeMenu()"
+          (nodeActivated)="nodeActivated.emit($event)"
+          (nodeMenuSelect)="nodeMenuSelect.emit($event)"
+        />
       }
     } @else {
       <ng-content />
     }
-  `, isInline: true, styles: [".strct-tree{display:block}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded"], outputs: ["expandedChange", "activated", "nodeActivated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tree{display:block}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTree, decorators: [{
             type: Component,
             args: [{ selector: 'strct-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctTreeNode], template: `
     @if (nodes(); as ns) {
       @for (n of ns; track $index) {
-        <strct-tree-node [node]="n" (nodeActivated)="nodeActivated.emit($event)" />
+        <strct-tree-node
+          [node]="n"
+          [nodeMenu]="nodeMenu()"
+          (nodeActivated)="nodeActivated.emit($event)"
+          (nodeMenuSelect)="nodeMenuSelect.emit($event)"
+        />
       }
     } @else {
       <ng-content />
     }
   `, host: { class: 'strct-tree', role: 'tree' }, styles: [".strct-tree{display:block}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }] } });
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }] } });
 
 let modalCounter = 0;
+// Body scroll-lock shared across any number of simultaneously open modals.
+let scrollLockCount = 0;
+let savedBodyOverflow = '';
+function lockBodyScroll(doc) {
+    if (scrollLockCount === 0) {
+        savedBodyOverflow = doc.body.style.overflow;
+        doc.body.style.overflow = 'hidden';
+    }
+    scrollLockCount++;
+}
+function unlockBodyScroll(doc) {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0)
+        doc.body.style.overflow = savedBodyOverflow;
+}
 /**
  * Overlay dialog with two-way `open`:
  *   <strct-modal [(open)]="show" title="Confirm">
@@ -1317,16 +1721,32 @@ class StrctModal {
     titleId = `strct-modal-${++modalCounter}`;
     /** Element that had focus before the dialog opened, restored on close. */
     previousActive = null;
+    /** Whether this instance currently holds a scroll lock. */
+    locked = false;
     constructor() {
         effect(() => {
-            if (this.open()) {
+            const open = this.open();
+            if (open && !this.locked) {
+                this.locked = true;
+                lockBodyScroll(this.doc);
                 this.previousActive = this.doc.activeElement;
                 // Move focus into the dialog once it has rendered.
                 setTimeout(() => this.focusInitial());
             }
-            else if (this.previousActive) {
-                this.previousActive.focus?.();
-                this.previousActive = null;
+            else if (!open && this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
+                if (this.previousActive) {
+                    this.previousActive.focus?.();
+                    this.previousActive = null;
+                }
+            }
+        });
+        // Release the lock if the modal is destroyed while still open.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
             }
         });
     }
@@ -1611,414 +2031,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         (click)="close()"
         (contextmenu)="$event.preventDefault(); close()"
       >
-        <ng-content select="[strctContextMenuItems]" />
-      </div>
-    }
-  `, host: { class: 'strct-ctx' }, styles: [".strct-ctx{display:block}.strct-ctx__menu{position:fixed;z-index:1100;min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-ctx-in .1s ease}@keyframes strct-ctx-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
-        }], propDecorators: { onDocClick: [{
-                type: HostListener,
-                args: ['document:click']
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-/**
- * A nested fly-out inside a `strct-context-menu` or `strct-dropdown`. Reuse
- * `strct-dropdown-item` for the nested entries.
- *   <strct-submenu label="Power">
- *     <strct-dropdown-item>Power on</strct-dropdown-item>
- *     <strct-dropdown-item>Power off</strct-dropdown-item>
- *   </strct-submenu>
- */
-class StrctSubmenu {
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Optional leading icon; when omitted the icon column is still reserved so
-     *  the label stays aligned with sibling items that do have icons. */
-    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSubmenu, isStandalone: true, selector: "strct-submenu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-submenu-host" }, ngImport: i0, template: `
-    <div class="strct-submenu" (mouseenter)="open.set(true)" (mouseleave)="open.set(false)">
-      <div
-        class="strct-submenu__trigger"
-        role="menuitem"
-        aria-haspopup="menu"
-        [attr.aria-expanded]="open()"
-        (click)="$event.stopPropagation()"
-      >
-        @if (icon()) {
-          <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
-        } @else {
-          <span class="strct-submenu__icon-spacer" aria-hidden="true"></span>
-        }
-        <span class="strct-submenu__label">{{ label() }}<ng-content select="[strctSubmenuLabel]" /></span>
-        <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
-      </div>
-      @if (open()) {
-        <div class="strct-submenu__panel" role="menu"><ng-content /></div>
-      }
-    </div>
-  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'strct-submenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <div class="strct-submenu" (mouseenter)="open.set(true)" (mouseleave)="open.set(false)">
-      <div
-        class="strct-submenu__trigger"
-        role="menuitem"
-        aria-haspopup="menu"
-        [attr.aria-expanded]="open()"
-        (click)="$event.stopPropagation()"
-      >
-        @if (icon()) {
-          <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
-        } @else {
-          <span class="strct-submenu__icon-spacer" aria-hidden="true"></span>
-        }
-        <span class="strct-submenu__label">{{ label() }}<ng-content select="[strctSubmenuLabel]" /></span>
-        <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
-      </div>
-      @if (open()) {
-        <div class="strct-submenu__panel" role="menu"><ng-content /></div>
-      }
-    </div>
-  `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
-
-/**
- * Floating menu panel — portaled into `<body>` (so it escapes overflow /
- * transform clipping), positioned by its real measured size, with full keyboard
- * navigation and recursive submenus. Usually created by `[strctContextMenu]`,
- * but can be embedded directly with `submenu`.
- */
-class StrctMenuPanel {
-    host = inject(ElementRef);
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    x = input(0, ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
-    y = input(0, ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
-    submenu = input(false, { ...(ngDevMode ? { debugName: "submenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    select = output();
-    close = output();
-    /** ArrowLeft inside a submenu — asks the parent to close it. */
-    back = output();
-    posX = signal(0, ...(ngDevMode ? [{ debugName: "posX" }] : /* istanbul ignore next */ []));
-    posY = signal(0, ...(ngDevMode ? [{ debugName: "posY" }] : /* istanbul ignore next */ []));
-    flipLeft = signal(false, ...(ngDevMode ? [{ debugName: "flipLeft" }] : /* istanbul ignore next */ []));
-    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    openSubIndex = signal(null, ...(ngDevMode ? [{ debugName: "openSubIndex" }] : /* istanbul ignore next */ []));
-    navIndices = computed(() => this.items()
-        .map((it, i) => (it.divider ? -1 : i))
-        .filter((i) => i >= 0), ...(ngDevMode ? [{ debugName: "navIndices" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.posX.set(this.x());
-        this.posY.set(this.y());
-        afterNextRender(() => {
-            this.activeIndex.set(this.navIndices()[0] ?? 0);
-            if (!this.submenu())
-                this.clampToViewport();
-            this.focusItem(this.activeIndex());
-        });
-    }
-    clampToViewport() {
-        const host = this.host.nativeElement;
-        const w = host.offsetWidth;
-        const h = host.offsetHeight;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const m = 6;
-        let nx = this.x();
-        let ny = this.y();
-        if (nx + w > vw - m)
-            nx = Math.max(m, Math.min(this.x() - w, vw - w - m));
-        if (ny + h > vh - m)
-            ny = Math.max(m, vh - h - m);
-        this.posX.set(nx);
-        this.posY.set(ny);
-        // Submenus of a panel near the right edge open to the left.
-        this.flipLeft.set(nx + w > vw - 220);
-    }
-    focusItem(i) {
-        this.activeIndex.set(i);
-        this.host.nativeElement
-            .querySelector(`.strct-menu__item[data-idx="${i}"]`)
-            ?.focus();
-    }
-    move(dir) {
-        const nav = this.navIndices();
-        if (!nav.length)
-            return;
-        const pos = nav.indexOf(this.activeIndex());
-        const next = nav[(pos + dir + nav.length) % nav.length];
-        this.openSubIndex.set(null);
-        this.focusItem(next);
-    }
-    onHover(i) {
-        this.activeIndex.set(i);
-        const it = this.items()[i];
-        this.openSubIndex.set(it?.children?.length ? i : null);
-    }
-    onLeave(i) {
-        if (this.openSubIndex() === i)
-            this.openSubIndex.set(null);
-    }
-    onItemClick(item, i, event) {
-        event.stopPropagation();
-        if (item.disabled)
-            return;
-        if (item.children?.length) {
-            this.openSubIndex.set(this.openSubIndex() === i ? null : i);
-            this.focusItem(i);
-        }
-        else {
-            this.select.emit(item);
-        }
-    }
-    closeSub() {
-        this.openSubIndex.set(null);
-    }
-    onKeydown(event) {
-        const key = event.key;
-        const item = this.items()[this.activeIndex()];
-        switch (key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                event.stopPropagation();
-                this.move(1);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                event.stopPropagation();
-                this.move(-1);
-                break;
-            case 'Home':
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusItem(this.navIndices()[0] ?? 0);
-                break;
-            case 'End':
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusItem(this.navIndices().at(-1) ?? 0);
-                break;
-            case 'ArrowRight':
-                if (item?.children?.length) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.openSubIndex.set(this.activeIndex());
-                }
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.openSubIndex() != null)
-                    this.closeSub();
-                else if (this.submenu())
-                    this.back.emit();
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                event.stopPropagation();
-                if (item && !item.disabled) {
-                    if (item.children?.length)
-                        this.openSubIndex.set(this.activeIndex());
-                    else
-                        this.select.emit(item);
-                }
-                break;
-            case 'Escape':
-                event.preventDefault();
-                event.stopPropagation();
-                this.close.emit();
-                break;
+        <ng-content select="[strctContextMenuItems]" />
+      </div>
+    }
+  `, host: { class: 'strct-ctx' }, styles: [".strct-ctx{display:block}.strct-ctx__menu{position:fixed;z-index:1100;min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-ctx-in .1s ease}@keyframes strct-ctx-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
+        }], propDecorators: { onDocClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * A nested fly-out inside a `strct-context-menu` or `strct-dropdown`. Opens on
+ * hover, click/tap, or the keyboard (Enter / Space / →), and flips to the left
+ * near the right edge of the viewport. Reuse `strct-dropdown-item` for entries.
+ *   <strct-submenu label="Power">
+ *     <strct-dropdown-item>Power on</strct-dropdown-item>
+ *     <strct-dropdown-item>Power off</strct-dropdown-item>
+ *   </strct-submenu>
+ */
+class StrctSubmenu {
+    host = inject(ElementRef);
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional leading icon; when omitted the icon column is still reserved so
+     *  the label stays aligned with sibling items that do have icons. */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Open to the left when the fly-out would overflow the right edge. */
+    flip = signal(false, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
+    setOpen(value) {
+        if (value) {
+            const rect = this.host.nativeElement.getBoundingClientRect();
+            this.flip.set(rect.right + 190 > window.innerWidth);
         }
+        this.open.set(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctMenuPanel, isStandalone: true, selector: "strct-menu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", close: "close", back: "back" }, host: { properties: { "style.position": "submenu() ? null : 'fixed'", "style.left.px": "submenu() ? null : posX()", "style.top.px": "submenu() ? null : posY()", "style.zIndex": "submenu() ? null : 1100" }, classAttribute: "strct-menu-host" }, ngImport: i0, template: `
-    <div class="strct-menu" role="menu" tabindex="-1" (keydown)="onKeydown($event)">
-      @for (item of items(); track $index; let i = $index) {
-        @if (item.divider) {
-          <div class="strct-menu__sep" role="separator"></div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSubmenu, isStandalone: true, selector: "strct-submenu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-submenu-host" }, ngImport: i0, template: `
+    <div class="strct-submenu" (mouseenter)="setOpen(true)" (mouseleave)="open.set(false)">
+      <div
+        class="strct-submenu__trigger"
+        role="menuitem"
+        tabindex="0"
+        aria-haspopup="menu"
+        [attr.aria-expanded]="open()"
+        (click)="$event.stopPropagation(); setOpen(!open())"
+        (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.space)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowright)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowleft)="$event.stopPropagation(); open.set(false)"
+        (keydown.escape)="$event.stopPropagation(); open.set(false)"
+      >
+        @if (icon()) {
+          <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
         } @else {
-          <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
-            <button
-              type="button"
-              class="strct-menu__item"
-              [attr.data-idx]="i"
-              [class.strct-menu__item--danger]="item.danger"
-              [class.strct-menu__item--active]="i === activeIndex()"
-              [disabled]="item.disabled"
-              role="menuitem"
-              [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
-              [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
-              [attr.tabindex]="i === activeIndex() ? 0 : -1"
-              (click)="onItemClick(item, i, $event)"
-            >
-              @if (item.icon) {
-                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
-              } @else {
-                <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
-              }
-              <span class="strct-menu__label">{{ item.label }}</span>
-              @if (item.children?.length) {
-                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
-              }
-            </button>
-            @if (openSubIndex() === i && item.children?.length) {
-              <strct-menu-panel
-                submenu
-                class="strct-menu__subpanel"
-                [class.strct-menu__subpanel--flip]="flipLeft()"
-                [items]="item.children!"
-                [data]="data()"
-                (select)="select.emit($event)"
-                (close)="close.emit()"
-                (back)="closeSub(); focusItem(i)"
-              />
-            }
-          </div>
+          <span class="strct-submenu__icon-spacer" aria-hidden="true"></span>
         }
+        <span class="strct-submenu__label">{{ label() }}<ng-content select="[strctSubmenuLabel]" /></span>
+        <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+      </div>
+      @if (open()) {
+        <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
+          <ng-content />
+        </div>
       }
     </div>
-  `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMenuPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-menu-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <div class="strct-menu" role="menu" tabindex="-1" (keydown)="onKeydown($event)">
-      @for (item of items(); track $index; let i = $index) {
-        @if (item.divider) {
-          <div class="strct-menu__sep" role="separator"></div>
+            args: [{ selector: 'strct-submenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <div class="strct-submenu" (mouseenter)="setOpen(true)" (mouseleave)="open.set(false)">
+      <div
+        class="strct-submenu__trigger"
+        role="menuitem"
+        tabindex="0"
+        aria-haspopup="menu"
+        [attr.aria-expanded]="open()"
+        (click)="$event.stopPropagation(); setOpen(!open())"
+        (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.space)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowright)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowleft)="$event.stopPropagation(); open.set(false)"
+        (keydown.escape)="$event.stopPropagation(); open.set(false)"
+      >
+        @if (icon()) {
+          <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
         } @else {
-          <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
-            <button
-              type="button"
-              class="strct-menu__item"
-              [attr.data-idx]="i"
-              [class.strct-menu__item--danger]="item.danger"
-              [class.strct-menu__item--active]="i === activeIndex()"
-              [disabled]="item.disabled"
-              role="menuitem"
-              [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
-              [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
-              [attr.tabindex]="i === activeIndex() ? 0 : -1"
-              (click)="onItemClick(item, i, $event)"
-            >
-              @if (item.icon) {
-                <strct-icon class="strct-menu__icon" [name]="item.icon" [size]="14" [strokeWidth]="1.3" />
-              } @else {
-                <span class="strct-menu__icon-spacer" aria-hidden="true"></span>
-              }
-              <span class="strct-menu__label">{{ item.label }}</span>
-              @if (item.children?.length) {
-                <strct-icon class="strct-menu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
-              }
-            </button>
-            @if (openSubIndex() === i && item.children?.length) {
-              <strct-menu-panel
-                submenu
-                class="strct-menu__subpanel"
-                [class.strct-menu__subpanel--flip]="flipLeft()"
-                [items]="item.children!"
-                [data]="data()"
-                (select)="select.emit($event)"
-                (close)="close.emit()"
-                (back)="closeSub(); focusItem(i)"
-              />
-            }
-          </div>
+          <span class="strct-submenu__icon-spacer" aria-hidden="true"></span>
         }
+        <span class="strct-submenu__label">{{ label() }}<ng-content select="[strctSubmenuLabel]" /></span>
+        <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
+      </div>
+      @if (open()) {
+        <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
+          <ng-content />
+        </div>
       }
     </div>
-  `, host: {
-                        class: 'strct-menu-host',
-                        '[style.position]': "submenu() ? null : 'fixed'",
-                        '[style.left.px]': 'submenu() ? null : posX()',
-                        '[style.top.px]': 'submenu() ? null : posY()',
-                        '[style.zIndex]': 'submenu() ? null : 1100',
-                    }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:left}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--danger{color:var(--crt)}.strct-menu__item--danger:hover:not(:disabled),.strct-menu__item--danger.strct-menu__item--active:not(:disabled){background:var(--crt-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--danger .strct-menu__icon{color:var(--crt)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;left:100%;margin-left:2px;z-index:1}.strct-menu__subpanel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], close: [{ type: i0.Output, args: ["close"] }], back: [{ type: i0.Output, args: ["back"] }] } });
-/**
- * Right-click (context) menu driven by a data array. Attach to any trigger; the
- * menu portals into `<body>` and runs each item's `action` on selection.
- *   <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
- *        (menuSelect)="onPick($event)">…</div>
- */
-class StrctContextMenuTrigger {
-    appRef = inject(ApplicationRef);
-    envInjector = inject(EnvironmentInjector);
-    zone = inject(NgZone);
-    doc = inject(DOCUMENT$1);
-    items = input.required({ ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), alias: 'strctContextMenu' });
-    data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'strctContextMenuData' });
-    menuSelect = output();
-    ref = null;
-    onClose = () => this.zone.run(() => this.closeMenu());
-    onContextMenu(event) {
-        if (!this.items()?.length)
-            return;
-        event.preventDefault();
-        this.openAt(event.clientX, event.clientY);
-    }
-    openAt(x, y) {
-        this.closeMenu();
-        const ref = createComponent(StrctMenuPanel, { environmentInjector: this.envInjector });
-        ref.setInput('items', this.items());
-        ref.setInput('data', this.data());
-        ref.setInput('x', x);
-        ref.setInput('y', y);
-        ref.instance.select.subscribe((item) => {
-            item.action?.(this.data());
-            this.menuSelect.emit(item);
-            this.closeMenu();
-        });
-        ref.instance.close.subscribe(() => this.closeMenu());
-        this.appRef.attachView(ref.hostView);
-        this.doc.body.appendChild(ref.location.nativeElement);
-        this.ref = ref;
-        // Defer global listeners so the opening right-click doesn't immediately close.
-        setTimeout(() => {
-            this.zone.runOutsideAngular(() => {
-                this.doc.addEventListener('mousedown', this.onOutside, true);
-                window.addEventListener('scroll', this.onClose, true);
-                window.addEventListener('resize', this.onClose);
-            });
-        });
-    }
-    onOutside = (event) => {
-        if (this.ref && !this.ref.location.nativeElement.contains(event.target)) {
-            this.onClose();
-        }
-    };
-    closeMenu() {
-        if (!this.ref)
-            return;
-        this.doc.removeEventListener('mousedown', this.onOutside, true);
-        window.removeEventListener('scroll', this.onClose, true);
-        window.removeEventListener('resize', this.onClose);
-        this.appRef.detachView(this.ref.hostView);
-        this.ref.destroy();
-        this.ref = null;
-    }
-    ngOnDestroy() {
-        this.closeMenu();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: StrctContextMenuTrigger, isStandalone: true, selector: "[strctContextMenu]", inputs: { items: { classPropertyName: "items", publicName: "strctContextMenu", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "strctContextMenuData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuSelect: "menuSelect" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctContextMenuTrigger, decorators: [{
-            type: Directive,
-            args: [{ selector: '[strctContextMenu]' }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctContextMenu", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "strctContextMenuData", required: false }] }], menuSelect: [{ type: i0.Output, args: ["menuSelect"] }], onContextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
-            }] } });
+  `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /** A single wizard step. `label` names it in the step header. */
 class StrctStep {
@@ -2329,6 +2446,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-pg', role: 'navigation', 'aria-label': 'Pagination' }, styles: [".strct-pg{display:inline-flex;align-items:center;gap:4px}.strct-pg__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-family:var(--font);font-size:13px;cursor:pointer;color:var(--t1);background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-pg__btn:hover{background:var(--bg-3)}.strct-pg__btn--active{color:var(--acc);border-color:var(--acc30);background:var(--acc-m)}.strct-pg__btn:disabled{color:var(--t4);cursor:not-allowed;background:transparent}.strct-pg__nav{color:var(--t2)}.strct-pg__dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:30px;color:var(--t3)}\n"] }]
         }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
+let fieldCounter = 0;
+/**
+ * Form-field wrapper: a label (with optional required marker), the projected
+ * control, and a hint or error message. It auto-links the control via
+ * `aria-describedby` and sets `aria-invalid` when an error is present.
+ *
+ *   <strct-field label="Email" required hint="We never share it." [error]="emailError()">
+ *     <input strctInput type="email" [(ngModel)]="email" />
+ *   </strct-field>
+ */
+class StrctField {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message (string or first-of array); falsy clears the error state. */
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    n = ++fieldCounter;
+    hintId = `strct-field-hint-${this.n}`;
+    errorId = `strct-field-err-${this.n}`;
+    controlId = signal('', ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => {
+        const e = this.error();
+        return (Array.isArray(e) ? e[0] : e) ?? '';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.link());
+        // Keep aria in sync as the error / hint change.
+        effect(() => {
+            this.errorText();
+            this.hint();
+            this.applyAria();
+        });
+    }
+    control() {
+        return this.host.nativeElement.querySelector('input, select, textarea, [strctInput], [strctField]');
+    }
+    link() {
+        const el = this.control();
+        if (!el)
+            return;
+        if (!el.id)
+            el.id = `strct-field-ctrl-${this.n}`;
+        this.controlId.set(el.id);
+        this.applyAria();
+    }
+    applyAria() {
+        const el = this.control();
+        if (!el)
+            return;
+        const describedBy = this.errorText() ? this.errorId : this.hint() ? this.hintId : '';
+        if (describedBy)
+            el.setAttribute('aria-describedby', describedBy);
+        else
+            el.removeAttribute('aria-describedby');
+        if (this.errorText())
+            el.setAttribute('aria-invalid', 'true');
+        else
+            el.removeAttribute('aria-invalid');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctField, isStandalone: true, selector: "strct-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field--invalid": "!!errorText()" }, classAttribute: "strct-field" }, ngImport: i0, template: `
+    @if (label()) {
+      <label class="strct-field__label" [attr.for]="controlId() || null">
+        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="strct-field__control"><ng-content /></div>
+    @if (errorText()) {
+      <div class="strct-field__msg strct-field__msg--error" [id]="errorId" role="alert">
+        {{ errorText() }}
+      </div>
+    } @else if (hint()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
+    }
+  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (label()) {
+      <label class="strct-field__label" [attr.for]="controlId() || null">
+        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="strct-field__control"><ng-content /></div>
+    @if (errorText()) {
+      <div class="strct-field__msg strct-field__msg--error" [id]="errorId" role="alert">
+        {{ errorText() }}
+      </div>
+    } @else if (hint()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
+    }
+  `, host: {
+                        class: 'strct-field',
+                        '[class.strct-field--invalid]': '!!errorText()',
+                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
 /**
  * Applies the shared `.strct-control` look to a native input / textarea / select.
  *   <input strctInput placeholder="Name" />
@@ -3774,7 +3990,7 @@ class StrctCombobox {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-cbx{position:relative;display:inline-block;width:100%;max-width:280px}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }, { 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: "21.2.16", ngImport: i0, type: StrctCombobox, decorators: [{
             type: Component,
@@ -3828,7 +4044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }
       </div>
     }
-  `, host: { class: 'strct-cbx' }, styles: [".strct-cbx{position:relative;display:inline-block;width:100%;max-width:280px}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
+  `, host: { class: 'strct-cbx' }, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-right:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -5930,5 +6146,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
 //# sourceMappingURL=akcelik-strct.mjs.map