@akcelik/strct 1.3.0 → 1.6.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, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, untracked, TemplateRef, Renderer2 } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, untracked, TemplateRef, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -135,7 +135,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * storage, VMs …). Object state — running / stopped / maintenance — is layered
  * on with the `badge` input rather than a separate icon per state.
  */
-const STRCT_ICONS = {
+// Built-in stroke glyphs. Keys stay inferred so \`StrctIconName\` below is a
+// compile-time union of every name.
+const STRCT_ICON_DEFS = {
     // ── General UI ───────────────────────────────────────────────
     hexagon: '<path d="M8 1.6l5.5 3.2v6.4L8 14.4 2.5 11.2V4.8L8 1.6z"/>',
     chevronRight: '<path d="M6 3.5L10.5 8 6 12.5"/>',
@@ -254,6 +256,7 @@ const STRCT_ICONS = {
     megaphone: '<path d="M3 7.3v1.6l7 3V4.3zM10 5.7 12.5 4.2v7.6L10 10.3M4 9.6l.9 3.1h1.6l-.7-2.9"/>',
     flag: '<path d="M4 13.5V3M4 3.6h7.4L9.8 6.2l1.6 2.6H4"/>',
     shieldAlert: '<path d="M8 2.3l5.2 1.9v3.3c0 3.1-2.3 5.1-5.2 6.4C5.1 12.6 2.8 10.6 2.8 7.5V4.2z"/><path d="M8 5.5v3.1M8 10.6v.2"/>',
+    shieldCheck: '<path d="M8 2.3l5.2 1.9v3.3c0 3.1-2.3 5.1-5.2 6.4C5.1 12.6 2.8 10.6 2.8 7.5V4.2z"/><path d="M5.9 7.9l1.5 1.5 2.8-2.9"/>',
     // ── State / action (also usable as badges via the icon `badge` input) ─
     running: '<path d="M5.5 4l6 4-6 4z"/>',
     stopped: '<rect x="4.5" y="4.5" width="7" height="7" rx="1"/>',
@@ -365,15 +368,26 @@ const STRCT_ICONS = {
     // Printer — paper feed, body, output sheet and an LED.
     printer: '<path d="M5 6.4V3.2h6v3.2"/><rect x="2.8" y="6.4" width="10.4" height="4.8" rx="1"/><path d="M5 9.2h6v3.6H5z"/><circle cx="11" cy="8.4" r=".5" fill="currentColor" stroke="none"/>',
 };
-// Composite "off" variants — re-use base glyph + diagonal slash.
-STRCT_ICONS['eyeOff'] = `${STRCT_ICONS['eye']}<path d="M2.5 2.5l11 11"/>`;
-STRCT_ICONS['bellOff'] = `${STRCT_ICONS['bell']}<path d="M2.6 2.6l10.8 10.8"/>`;
-STRCT_ICONS['wifiOff'] = `${STRCT_ICONS['wifi']}<path d="M2.5 2.5l11 11"/>`;
-STRCT_ICONS['cloudOff'] = `${STRCT_ICONS['cloud']}<path d="M2.5 2.5l11 11"/>`;
-STRCT_ICONS['linkOff'] = `${STRCT_ICONS['link']}<path d="M2.5 2.5l11 11"/>`;
-// Semantic aliases.
-STRCT_ICONS['unlink'] = STRCT_ICONS['linkOff'];
-STRCT_ICONS['webhook'] = STRCT_ICONS['bolt'];
+// Composite "off" variants — re-use base glyph + diagonal slash — and aliases.
+const STRCT_ICON_DERIVED_DEFS = {
+    eyeOff: `${STRCT_ICON_DEFS.eye}<path d="M2.5 2.5l11 11"/>`,
+    bellOff: `${STRCT_ICON_DEFS.bell}<path d="M2.6 2.6l10.8 10.8"/>`,
+    wifiOff: `${STRCT_ICON_DEFS.wifi}<path d="M2.5 2.5l11 11"/>`,
+    cloudOff: `${STRCT_ICON_DEFS.cloud}<path d="M2.5 2.5l11 11"/>`,
+    linkOff: `${STRCT_ICON_DEFS.link}<path d="M2.5 2.5l11 11"/>`,
+    unlink: `${STRCT_ICON_DEFS.link}<path d="M2.5 2.5l11 11"/>`,
+    webhook: STRCT_ICON_DEFS.bolt,
+};
+/**
+ * Icon name → glyph markup. Open (`Record<string, string>`) on purpose so
+ * `registerStrctIcon` can add app-specific names at runtime.
+ */
+const STRCT_ICONS = {
+    ...STRCT_ICON_DEFS,
+    ...STRCT_ICON_DERIVED_DEFS,
+};
+/** All built-in icon names — greppable, iterable (galleries, docs, tests). */
+const STRCT_ICON_NAMES = Object.keys(STRCT_ICONS).sort();
 /** Icon names grouped for galleries / documentation. */
 const STRCT_ICON_GROUPS = [
     {
@@ -514,6 +528,7 @@ const STRCT_ICON_GROUPS = [
             'container',
             'firewall',
             'shield',
+            'shieldCheck',
             'certificate',
             'key',
             'metrics',
@@ -585,9 +600,15 @@ function registerStrctIcon(name, content, options = {}) {
  * glyph with a green status dot (a "running host"). Unknown names render
  * nothing rather than throwing.
  */
+// One warning per unknown name per app run — enough to surface the bug
+// without flooding the console from a list render.
+const warnedUnknownIcons = new Set();
 class StrctIcon {
     sanitizer = inject(DomSanitizer);
-    /** Icon name from the STRCT_ICONS registry. */
+    /**
+     * Icon name. Typed to autocomplete the built-in set while still accepting
+     * any string, since `registerStrctIcon` can add names at runtime.
+     */
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     /** Icon size in pixels. */
     size = input(16, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -599,7 +620,17 @@ class StrctIcon {
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** True when the named icon is a full-SVG (raw) icon registered by the app. */
     isRaw = computed(() => Object.prototype.hasOwnProperty.call(STRCT_RAW_ICONS, this.name()), ...(ngDevMode ? [{ debugName: "isRaw" }] : /* istanbul ignore next */ []));
-    svg = computed(() => this.sanitizer.bypassSecurityTrustHtml(STRCT_ICONS[this.name()] ?? ''), ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
+    svg = computed(() => {
+        const name = this.name();
+        const glyph = STRCT_ICONS[name];
+        if (glyph === undefined && !this.isRaw() && isDevMode() && !warnedUnknownIcons.has(name)) {
+            warnedUnknownIcons.add(name);
+            console.warn(`[strct-icon] Unknown icon name "${name}" — it will render empty. ` +
+                `Built-in names are exported as STRCT_ICON_NAMES (type StrctIconName); ` +
+                `custom icons must be added with registerStrctIcon().`);
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(glyph ?? '');
+    }, ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
     rawSvg = computed(() => this.sanitizer.bypassSecurityTrustHtml(STRCT_RAW_ICONS[this.name()] ?? ''), ...(ngDevMode ? [{ debugName: "rawSvg" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctIcon, isStandalone: true, selector: "strct-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-icon" }, ngImport: i0, template: `@if (isRaw()) {
@@ -1326,6 +1357,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-login' }, styles: [".strct-login{display:flex;align-items:center;justify-content:center;width:100%;min-height:100%;padding:32px}.strct-login__inner{width:100%}.strct-login__card{display:grid;grid-template-columns:1.05fr 1fr;width:100%;overflow:hidden}.strct-login__main{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}.strct-login__aside{position:relative;overflow:hidden;min-height:420px;color:var(--t1);border-inline-end:1px solid var(--b2)}.strct-login__aside:before,.strct-login__aside:after{display:none}.strct-login__aside-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:34px 36px}@media(max-width:720px){.strct-login__card{grid-template-columns:1fr}.strct-login__aside{min-height:220px}.strct-login__main{padding:30px 26px}}\n"] }]
         }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }] } });
 
+/** Marks the breadcrumb row projected above the title. */
+class StrctPageHeaderCrumbs {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctPageHeaderCrumbs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctPageHeaderCrumbs, isStandalone: true, selector: "[strctPageHeaderCrumbs]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctPageHeaderCrumbs, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctPageHeaderCrumbs]' }]
+        }] });
+/** Marks the action buttons aligned to the end of the title row. */
+class StrctPageHeaderActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctPageHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctPageHeaderActions, isStandalone: true, selector: "[strctPageHeaderActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctPageHeaderActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctPageHeaderActions]' }]
+        }] });
+/**
+ * Page header — the top of every console object page: an optional breadcrumb
+ * row, a title + subtitle, and actions aligned to the end. Default content
+ * projects below the title row (status badges, meta strips).
+ *
+ *   <strct-page-header title="hv-02" subtitle="Hypervisor · cluster-01">
+ *     <strct-breadcrumb strctPageHeaderCrumbs>…</strct-breadcrumb>
+ *     <button strct-button strctPageHeaderActions variant="primary">Migrate</button>
+ *   </strct-page-header>
+ */
+class StrctPageHeader {
+    /** Page title (an h1). */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** One-line description under the title. */
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Draw a hairline divider under the header. */
+    divider = input(false, { ...(ngDevMode ? { debugName: "divider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctPageHeader, isStandalone: true, selector: "strct-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-ph--divider": "divider()" }, classAttribute: "strct-ph" }, ngImport: i0, template: `
+    <div class="strct-ph__crumbs"><ng-content select="[strctPageHeaderCrumbs]" /></div>
+    <div class="strct-ph__row">
+      <div class="strct-ph__text">
+        <h1 class="strct-ph__title">{{ title() }}</h1>
+        @if (subtitle()) {
+          <p class="strct-ph__subtitle">{{ subtitle() }}</p>
+        }
+      </div>
+      <div class="strct-ph__actions"><ng-content select="[strctPageHeaderActions]" /></div>
+    </div>
+    <ng-content />
+  `, isInline: true, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctPageHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-page-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="strct-ph__crumbs"><ng-content select="[strctPageHeaderCrumbs]" /></div>
+    <div class="strct-ph__row">
+      <div class="strct-ph__text">
+        <h1 class="strct-ph__title">{{ title() }}</h1>
+        @if (subtitle()) {
+          <p class="strct-ph__subtitle">{{ subtitle() }}</p>
+        }
+      </div>
+      <div class="strct-ph__actions"><ng-content select="[strctPageHeaderActions]" /></div>
+    </div>
+    <ng-content />
+  `, host: {
+                        class: 'strct-ph',
+                        '[class.strct-ph--divider]': 'divider()',
+                    }, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
+
 /**
  * Styles a native `<button>` / `<a>` so it stays fully accessible and form-aware.
  *
@@ -3256,11 +3357,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  *     <strct-dropdown-item>Rename</strct-dropdown-item>
  *     <strct-dropdown-item critical>Delete</strct-dropdown-item>
  *   </strct-dropdown>
+ *
+ * With `popover`, the panel holds *form controls* instead of menu items: an
+ * inner click no longer closes it (only outside click / Escape do), and the
+ * semantics switch from `role="menu"` to a labeled `role="dialog"` — a panel
+ * of selects is not a menu to a screen reader either:
+ *
+ *   <strct-dropdown popover popoverLabel="Filters">
+ *     <button strct-button strctDropdownTrigger>Filters</button>
+ *     <strct-field label="Severity">…</strct-field>
+ *   </strct-dropdown>
  */
 class StrctDropdown {
     host = inject((ElementRef));
     /** Horizontal alignment of the menu. */
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Popover mode for panels holding form controls (filter/settings panels):
+     * inner clicks never close the panel — only outside click / Escape do —
+     * and it renders as a labeled `role="dialog"` instead of a menu.
+     */
+    popover = input(false, { ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the popover dialog (localizable). */
+    popoverLabel = input('Filters', ...(ngDevMode ? [{ debugName: "popoverLabel" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle() {
         this.open.update((v) => !v);
@@ -3268,6 +3387,11 @@ class StrctDropdown {
     close() {
         this.open.set(false);
     }
+    /** Menu items close on activation; popover form controls never do. */
+    onInnerActivate() {
+        if (!this.popover())
+            this.close();
+    }
     onDocClick(event) {
         if (this.open() && !this.host.nativeElement.contains(event.target)) {
             this.close();
@@ -3277,33 +3401,41 @@ class StrctDropdown {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, popoverLabel: { classPropertyName: "popoverLabel", publicName: "popoverLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
     <div
       #trigger
       class="strct-dd__trigger"
       role="button"
       tabindex="0"
+      [attr.aria-haspopup]="popover() ? 'dialog' : 'menu'"
+      [attr.aria-expanded]="open()"
       (click)="toggle()"
       (keydown.enter)="toggle()"
       (keydown.space)="toggle()"
     >
       <ng-content select="[strctDropdownTrigger]" />
     </div>
+    <!--
+      One panel for both modes (a default ng-content per @if branch would strand
+      the projected content in the inactive branch) — mode picks the semantics.
+    -->
     @if (open()) {
       <div
         class="strct-dd__menu"
+        [class.strct-dd__menu--popover]="popover()"
         [strctOverlay]="trigger"
         [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
-        role="menu"
-        tabindex="0"
-        (click)="close()"
-        (keydown.enter)="close()"
-        (keydown.space)="close()"
+        [attr.role]="popover() ? 'dialog' : 'menu'"
+        [attr.aria-label]="popover() ? popoverLabel() : null"
+        [attr.tabindex]="popover() ? -1 : 0"
+        (click)="onInnerActivate()"
+        (keydown.enter)="onInnerActivate()"
+        (keydown.space)="onInnerActivate()"
       >
         <ng-content />
       </div>
     }
-  `, isInline: true, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDropdown, decorators: [{
             type: Component,
@@ -3313,28 +3445,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       class="strct-dd__trigger"
       role="button"
       tabindex="0"
+      [attr.aria-haspopup]="popover() ? 'dialog' : 'menu'"
+      [attr.aria-expanded]="open()"
       (click)="toggle()"
       (keydown.enter)="toggle()"
       (keydown.space)="toggle()"
     >
       <ng-content select="[strctDropdownTrigger]" />
     </div>
+    <!--
+      One panel for both modes (a default ng-content per @if branch would strand
+      the projected content in the inactive branch) — mode picks the semantics.
+    -->
     @if (open()) {
       <div
         class="strct-dd__menu"
+        [class.strct-dd__menu--popover]="popover()"
         [strctOverlay]="trigger"
         [strctOverlayPlacement]="align() === 'end' ? 'bottom-end' : 'bottom-start'"
-        role="menu"
-        tabindex="0"
-        (click)="close()"
-        (keydown.enter)="close()"
-        (keydown.space)="close()"
+        [attr.role]="popover() ? 'dialog' : 'menu'"
+        [attr.aria-label]="popover() ? popoverLabel() : null"
+        [attr.tabindex]="popover() ? -1 : 0"
+        (click)="onInnerActivate()"
+        (keydown.enter)="onInnerActivate()"
+        (keydown.space)="onInnerActivate()"
       >
         <ng-content />
       </div>
     }
-  `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onDocClick: [{
+  `, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
@@ -4139,9 +4279,24 @@ class StrctCommandPalette {
     emptyText = input('No matches for', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     /** Maximum rendered results. */
     maxResults = input(50, ...(ngDevMode ? [{ debugName: "maxResults" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal ranked filtering. Set `false` for a **server-backed** palette:
+     * items render in the order given (you already filtered them) and the query
+     * reaches you through the two-way `query` model. `maxResults` still caps
+     * rendering.
+     */
+    filter = input(true, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a "searching" row while server results are in flight. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Localizable text of the loading row. */
+    loadingText = input('Searching…', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
     /** Emitted when a command is chosen (Enter or click); the palette closes. */
     picked = output();
-    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /**
+     * The typed query (two-way). The palette still owns typing and keyboard
+     * behaviour; consumers observe it to serve results asynchronously.
+     */
+    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     listId = `strct-cmdp-list-${++paletteCounter}`;
     previousActive = null;
@@ -4150,8 +4305,11 @@ class StrctCommandPalette {
     }
     /** Rank: label prefix > word-start > substring; group/keyword matches last. */
     filtered = computed(() => {
-        const q = this.query().trim().toLowerCase();
         const items = this.items();
+        // Server-backed mode: the caller already filtered — render as given.
+        if (!this.filter())
+            return items.slice(0, this.maxResults());
+        const q = this.query().trim().toLowerCase();
         if (!q)
             return items.slice(0, this.maxResults());
         const scored = [];
@@ -4176,6 +4334,12 @@ class StrctCommandPalette {
             .map((s) => s.item);
     }, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
     constructor() {
+        // Async results can shrink under the cursor — keep the active option in range.
+        effect(() => {
+            const len = this.filtered().length;
+            if (this.activeIndex() >= len)
+                this.activeIndex.set(Math.max(0, len - 1));
+        });
         // Focus the input on open; restore focus on close.
         effect(() => {
             if (this.open()) {
@@ -4247,7 +4411,7 @@ class StrctCommandPalette {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCommandPalette, isStandalone: true, selector: "strct-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCommandPalette, isStandalone: true, selector: "strct-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked", query: "queryChange" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss (Escape covers keyboard). -->
       <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -4278,6 +4442,11 @@ class StrctCommandPalette {
             <strct-kbd>Esc</strct-kbd>
           </div>
           <div class="strct-cmdp__list" role="listbox" [id]="listId">
+            @if (loading()) {
+              <div class="strct-cmdp__loading" aria-live="polite">
+                <span class="strct-cmdp__spin" aria-hidden="true"></span>{{ loadingText() }}
+              </div>
+            }
             @for (item of filtered(); track item.id; let i = $index) {
               <button
                 type="button"
@@ -4307,13 +4476,15 @@ class StrctCommandPalette {
                 }
               </button>
             } @empty {
-              <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
+              @if (!loading()) {
+                <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
+              }
             }
           </div>
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCommandPalette, decorators: [{
             type: Component,
@@ -4348,6 +4519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             <strct-kbd>Esc</strct-kbd>
           </div>
           <div class="strct-cmdp__list" role="listbox" [id]="listId">
+            @if (loading()) {
+              <div class="strct-cmdp__loading" aria-live="polite">
+                <span class="strct-cmdp__spin" aria-hidden="true"></span>{{ loadingText() }}
+              </div>
+            }
             @for (item of filtered(); track item.id; let i = $index) {
               <button
                 type="button"
@@ -4377,14 +4553,509 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }
               </button>
             } @empty {
-              <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
+              @if (!loading()) {
+                <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
+              }
             }
           </div>
         </div>
       </div>
     }
-  `, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }] } });
+  `, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
+
+/**
+ * Compact search pill — the pattern from the docs header: a leading search
+ * icon, a label / input and an optional keyboard-hint chip. Two modes:
+ *
+ *  - **input** (default): a real search field. Two-way `value` (also
+ *    CVA-compatible), `(search)` emits on Enter, Escape / the × clears.
+ *
+ *      <strct-searchbox [(value)]="q" (search)="run($event)" />
+ *
+ *  - **`trigger`**: a button that only announces activation — the classic
+ *    "fake search that opens the command palette" header pattern:
+ *
+ *      <strct-searchbox trigger hint="⌘K" (activated)="palette.open.set(true)" />
+ */
+class StrctSearchbox {
+    host = inject(ElementRef);
+    /** Placeholder text (and the trigger mode's label). */
+    placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Keyboard-hint chip (e.g. "⌘K"); hidden while typing. */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Render as an activation button instead of a real input (palette opener). */
+    trigger = input(false, { ...(ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show the × clear button when there is a value. */
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible label; falls back to `placeholder`. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the clear button (localizable). */
+    clearLabel = input('Clear search', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Current text (two-way; also drives the CVA value). */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Enter pressed in input mode — run the search with the current text. */
+    search = output();
+    /** Trigger mode clicked (open your command palette / search surface). */
+    activated = output();
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    onInput(event) {
+        const next = event.target.value;
+        this.value.set(next);
+        this.onChange(next);
+    }
+    /** Clear the text (Escape / the × button). */
+    clear() {
+        if (!this.value())
+            return;
+        this.value.set('');
+        this.onChange('');
+    }
+    /** Focus the input programmatically (e.g. from a global shortcut). */
+    focus() {
+        this.host.nativeElement.querySelector('.strct-sb__input')?.focus();
+    }
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSearchbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSearchbox, isStandalone: true, selector: "strct-searchbox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", activated: "activated" }, host: { classAttribute: "strct-sb-host" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctSearchbox), multi: true },
+        ], ngImport: i0, template: `
+    @if (trigger()) {
+      <button
+        type="button"
+        class="strct-sb strct-sb--trigger"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() || placeholder()"
+        (click)="activated.emit()"
+      >
+        <strct-icon class="strct-sb__icon" name="search" [size]="14" [strokeWidth]="1.6" />
+        <span class="strct-sb__label">{{ placeholder() }}</span>
+        @if (hint()) {
+          <kbd class="strct-sb__kbd">{{ hint() }}</kbd>
+        }
+      </button>
+    } @else {
+      <div class="strct-sb" [class.strct-sb--disabled]="isDisabled()">
+        <strct-icon class="strct-sb__icon" name="search" [size]="14" [strokeWidth]="1.6" />
+        <input
+          #field
+          class="strct-sb__input"
+          type="text"
+          role="searchbox"
+          [attr.aria-label]="ariaLabel() || placeholder()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [value]="value()"
+          (input)="onInput($event)"
+          (keydown.enter)="search.emit(value())"
+          (keydown.escape)="clear()"
+          (focus)="focused.set(true)"
+          (blur)="focused.set(false); onTouched()"
+        />
+        @if (clearable() && value()) {
+          <button
+            type="button"
+            class="strct-sb__clear"
+            [attr.aria-label]="clearLabel()"
+            (click)="clear(); field.focus()"
+          >
+            <strct-icon name="close" [size]="11" [strokeWidth]="1.8" />
+          </button>
+        } @else if (hint() && !focused()) {
+          <kbd class="strct-sb__kbd">{{ hint() }}</kbd>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".strct-sb-host{display:inline-flex;max-width:100%}.strct-sb{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:0;padding:5px 8px 5px 10px;border:1px solid var(--strct-sb-border, var(--b2));border-radius:7px;background:var(--strct-sb-bg, var(--bg-2));color:var(--strct-sb-fg, var(--t2));font-family:var(--font);font-size:var(--strct-sb-font-size, 12.5px);transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-sb--trigger{cursor:pointer;text-align:start}.strct-sb--trigger:hover:not(:disabled){color:var(--strct-sb-fg-hover, var(--t1));background:var(--strct-sb-bg-hover, var(--bg-3))}.strct-sb--trigger:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-sb:focus-within:not(.strct-sb--trigger){border-color:var(--acc50);color:var(--t1)}.strct-sb--disabled,.strct-sb--trigger:disabled{opacity:.55;cursor:not-allowed}.strct-sb__icon{flex-shrink:0;color:var(--strct-sb-muted, var(--t3))}.strct-sb__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sb__input{flex:1;min-width:0;border:0;padding:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;outline:none}.strct-sb__input::placeholder{color:var(--t3)}.strct-sb__kbd{flex-shrink:0;font-family:var(--mono);font-size:10px;line-height:1;padding:3px 5px;border:1px solid var(--strct-sb-kbd-border, var(--b2));border-radius:4px;background:var(--strct-sb-kbd-bg, var(--bg-2));color:var(--strct-sb-kbd-fg, var(--t3))}.strct-sb__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:-2px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-sb__clear:hover{color:var(--t1);background:var(--bg-3)}.strct-sb__clear:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}@media(prefers-reduced-motion:reduce){.strct-sb{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSearchbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-searchbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctSearchbox), multi: true },
+                    ], template: `
+    @if (trigger()) {
+      <button
+        type="button"
+        class="strct-sb strct-sb--trigger"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="ariaLabel() || placeholder()"
+        (click)="activated.emit()"
+      >
+        <strct-icon class="strct-sb__icon" name="search" [size]="14" [strokeWidth]="1.6" />
+        <span class="strct-sb__label">{{ placeholder() }}</span>
+        @if (hint()) {
+          <kbd class="strct-sb__kbd">{{ hint() }}</kbd>
+        }
+      </button>
+    } @else {
+      <div class="strct-sb" [class.strct-sb--disabled]="isDisabled()">
+        <strct-icon class="strct-sb__icon" name="search" [size]="14" [strokeWidth]="1.6" />
+        <input
+          #field
+          class="strct-sb__input"
+          type="text"
+          role="searchbox"
+          [attr.aria-label]="ariaLabel() || placeholder()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [value]="value()"
+          (input)="onInput($event)"
+          (keydown.enter)="search.emit(value())"
+          (keydown.escape)="clear()"
+          (focus)="focused.set(true)"
+          (blur)="focused.set(false); onTouched()"
+        />
+        @if (clearable() && value()) {
+          <button
+            type="button"
+            class="strct-sb__clear"
+            [attr.aria-label]="clearLabel()"
+            (click)="clear(); field.focus()"
+          >
+            <strct-icon name="close" [size]="11" [strokeWidth]="1.8" />
+          </button>
+        } @else if (hint() && !focused()) {
+          <kbd class="strct-sb__kbd">{{ hint() }}</kbd>
+        }
+      </div>
+    }
+  `, host: { class: 'strct-sb-host' }, styles: [".strct-sb-host{display:inline-flex;max-width:100%}.strct-sb{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:0;padding:5px 8px 5px 10px;border:1px solid var(--strct-sb-border, var(--b2));border-radius:7px;background:var(--strct-sb-bg, var(--bg-2));color:var(--strct-sb-fg, var(--t2));font-family:var(--font);font-size:var(--strct-sb-font-size, 12.5px);transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-sb--trigger{cursor:pointer;text-align:start}.strct-sb--trigger:hover:not(:disabled){color:var(--strct-sb-fg-hover, var(--t1));background:var(--strct-sb-bg-hover, var(--bg-3))}.strct-sb--trigger:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-sb:focus-within:not(.strct-sb--trigger){border-color:var(--acc50);color:var(--t1)}.strct-sb--disabled,.strct-sb--trigger:disabled{opacity:.55;cursor:not-allowed}.strct-sb__icon{flex-shrink:0;color:var(--strct-sb-muted, var(--t3))}.strct-sb__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-sb__input{flex:1;min-width:0;border:0;padding:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;outline:none}.strct-sb__input::placeholder{color:var(--t3)}.strct-sb__kbd{flex-shrink:0;font-family:var(--mono);font-size:10px;line-height:1;padding:3px 5px;border:1px solid var(--strct-sb-kbd-border, var(--b2));border-radius:4px;background:var(--strct-sb-kbd-bg, var(--bg-2));color:var(--strct-sb-kbd-fg, var(--t3))}.strct-sb__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:-2px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-sb__clear:hover{color:var(--t1);background:var(--bg-3)}.strct-sb__clear:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}@media(prefers-reduced-motion:reduce){.strct-sb{transition:none}}\n"] }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+
+/**
+ * Click-to-copy chip with built-in feedback: an icon (or icon + label) button
+ * that writes `text` to the clipboard and flips to a ✓ "Copied" state for a
+ * moment. The console workhorse for UUIDs, IPs, serials and snippets:
+ *
+ *   <strct-copy text="172.16.75.100" />
+ *   <strct-copy [text]="host.id" label="Copy ID" />
+ */
+class StrctCopy {
+    destroyRef = inject(DestroyRef);
+    /** The text written to the clipboard. */
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Optional visible label next to the icon (icon-only by default). */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Accessible label; falls back to `copyLabel`. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    copyLabel = input('Copy', ...(ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []));
+    copiedLabel = input('Copied', ...(ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted after a successful copy, with the copied text. */
+    copied = output();
+    done = signal(false, ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
+    timer = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            if (this.timer)
+                clearTimeout(this.timer);
+        });
+    }
+    /** Write `text` to the clipboard and show the ✓ feedback. */
+    copy() {
+        const value = this.text();
+        void navigator.clipboard?.writeText(value).then(() => {
+            this.copied.emit(value);
+            this.done.set(true);
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.timer = setTimeout(() => this.done.set(false), 1600);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCopy, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCopy, isStandalone: true, selector: "strct-copy", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied" }, host: { classAttribute: "strct-copy-host" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="strct-copy"
+      [class.strct-copy--done]="done()"
+      [attr.aria-label]="done() ? copiedLabel() : ariaLabel() || copyLabel()"
+      (click)="copy()"
+    >
+      <strct-icon [name]="done() ? 'check' : 'copy'" [size]="13" [strokeWidth]="1.6" />
+      @if (label()) {
+        <span class="strct-copy__label">{{ done() ? copiedLabel() : label() }}</span>
+      }
+      <span class="strct-copy__sr" aria-live="polite">{{ done() ? copiedLabel() : '' }}</span>
+    </button>
+  `, isInline: true, styles: [".strct-copy-host{display:inline-flex}.strct-copy{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border:0;border-radius:5px;background:transparent;color:var(--t3);font-family:var(--font);font-size:12px;cursor:pointer;transition:color .13s ease,background .13s ease}.strct-copy:hover{color:var(--t1);background:var(--bg-3)}.strct-copy:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-copy--done,.strct-copy--done:hover{color:var(--success)}.strct-copy__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(prefers-reduced-motion:reduce){.strct-copy{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCopy, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-copy', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <button
+      type="button"
+      class="strct-copy"
+      [class.strct-copy--done]="done()"
+      [attr.aria-label]="done() ? copiedLabel() : ariaLabel() || copyLabel()"
+      (click)="copy()"
+    >
+      <strct-icon [name]="done() ? 'check' : 'copy'" [size]="13" [strokeWidth]="1.6" />
+      @if (label()) {
+        <span class="strct-copy__label">{{ done() ? copiedLabel() : label() }}</span>
+      }
+      <span class="strct-copy__sr" aria-live="polite">{{ done() ? copiedLabel() : '' }}</span>
+    </button>
+  `, host: { class: 'strct-copy-host' }, styles: [".strct-copy-host{display:inline-flex}.strct-copy{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border:0;border-radius:5px;background:transparent;color:var(--t3);font-family:var(--font);font-size:12px;cursor:pointer;transition:color .13s ease,background .13s ease}.strct-copy:hover{color:var(--t1);background:var(--bg-3)}.strct-copy:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-copy--done,.strct-copy--done:hover{color:var(--success)}.strct-copy__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(prefers-reduced-motion:reduce){.strct-copy{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }] } });
+
+/**
+ * Copyable mono code / rendered-config block — the component form of the
+ * `<details><pre>` pattern consoles keep hand-rolling. A header row carries an
+ * optional title, a language tag, a copy button and (when `collapsible`) a
+ * chevron; the body is a scrollable, keyboard-focusable `<pre>`.
+ *
+ *   <strct-code [code]="yaml" language="yaml" title="cloud-init" collapsible />
+ */
+class StrctCode {
+    /** The code / rendered config text (copied verbatim). */
+    code = input.required(...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    /** Header title (e.g. a filename). */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Small uppercase language tag (yaml, json, bash …). */
+    language = input('', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** Show the copy button. */
+    copyable = input(true, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Collapse to just the header (the `<details><pre>` pattern, done right). */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Collapsed state (two-way; only meaningful with `collapsible`). */
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Show a line-number gutter (numbers are never copied — `code` is). */
+    lineNumbers = input(false, { ...(ngDevMode ? { debugName: "lineNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Soft-wrap long unbroken text (PEM/CSR blocks, base64, long commands) so a
+     * dialog never scrolls horizontally. Wrapping breaks the gutter's visual
+     * alignment, so `wrap` takes precedence and hides `lineNumbers`.
+     */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Scroll the body past this height (px); null grows freely. */
+    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** Localizable labels for the collapse toggle. */
+    collapseLabel = input('Collapse', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
+    expandLabel = input('Expand', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
+    lineNos = computed(() => {
+        const n = this.code().split('\n').length;
+        return Array.from({ length: n }, (_, i) => i + 1);
+    }, ...(ngDevMode ? [{ debugName: "lineNos" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCode, isStandalone: true, selector: "strct-code", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.strct-code--collapsed": "collapsible() && collapsed()" }, classAttribute: "strct-code" }, ngImport: i0, template: `
+    @if (title() || language() || copyable() || collapsible()) {
+      <div class="strct-code__head">
+        @if (collapsible()) {
+          <button
+            type="button"
+            class="strct-code__toggle"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-label]="
+              (collapsed() ? expandLabel() : collapseLabel()) +
+              ' ' +
+              (title() || language() || 'code')
+            "
+            (click)="collapsed.set(!collapsed())"
+          >
+            <strct-icon
+              name="chevronRight"
+              [size]="12"
+              [strokeWidth]="1.7"
+              [class.strct-code__chev--open]="!collapsed()"
+            />
+          </button>
+        }
+        @if (title()) {
+          <span class="strct-code__title">{{ title() }}</span>
+        }
+        @if (language()) {
+          <span class="strct-code__lang">{{ language() }}</span>
+        }
+        <span class="strct-code__grow"></span>
+        @if (copyable()) {
+          <strct-copy [text]="code()" />
+        }
+      </div>
+    }
+    @if (!collapsible() || !collapsed()) {
+      <div
+        class="strct-code__scroll"
+        [class.strct-code__scroll--wrap]="wrap()"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="title() || language() || 'code'"
+        [style.max-height.px]="maxHeight()"
+      >
+        <pre class="strct-code__pre"><!--
+       -->@if (lineNumbers() && !wrap()) {<!--
+         --><span class="strct-code__gutter" aria-hidden="true">@for (n of lineNos(); track n) {<span class="strct-code__ln">{{ n }}</span>}</span><!--
+       -->}<!--
+       --><code class="strct-code__code">{{ code() }}</code></pre>
+      </div>
+    }
+  `, isInline: true, styles: [".strct-code{display:block;border:1px solid var(--b2);border-radius:9px;background:var(--bg-2);overflow:hidden}.strct-code__head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--b1)}.strct-code--collapsed .strct-code__head{border-bottom:0}.strct-code__toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-3px 0 -3px -4px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-code__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-code__toggle:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-code__toggle strct-icon{transition:transform .15s ease}.strct-code__chev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-code__toggle strct-icon{transition:none}}.strct-code__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-code__lang{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);border:1px solid var(--b2);border-radius:4px;padding:2px 6px}.strct-code__grow{flex:1}.strct-code__scroll{overflow:auto}.strct-code__scroll:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-code__pre{display:flex;margin:0;padding:10px 12px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--t1)}.strct-code__gutter{display:flex;flex-direction:column;flex-shrink:0;margin-inline-end:12px;padding-inline-end:10px;border-inline-end:1px solid var(--b1);color:var(--t3);text-align:end;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.strct-code__code{display:block;white-space:pre}.strct-code__scroll--wrap .strct-code__code{white-space:pre-wrap;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "component", type: StrctCopy, selector: "strct-copy", inputs: ["text", "label", "ariaLabel", "copyLabel", "copiedLabel"], outputs: ["copied"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCode, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-code', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctCopy, StrctIcon], template: `
+    @if (title() || language() || copyable() || collapsible()) {
+      <div class="strct-code__head">
+        @if (collapsible()) {
+          <button
+            type="button"
+            class="strct-code__toggle"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-label]="
+              (collapsed() ? expandLabel() : collapseLabel()) +
+              ' ' +
+              (title() || language() || 'code')
+            "
+            (click)="collapsed.set(!collapsed())"
+          >
+            <strct-icon
+              name="chevronRight"
+              [size]="12"
+              [strokeWidth]="1.7"
+              [class.strct-code__chev--open]="!collapsed()"
+            />
+          </button>
+        }
+        @if (title()) {
+          <span class="strct-code__title">{{ title() }}</span>
+        }
+        @if (language()) {
+          <span class="strct-code__lang">{{ language() }}</span>
+        }
+        <span class="strct-code__grow"></span>
+        @if (copyable()) {
+          <strct-copy [text]="code()" />
+        }
+      </div>
+    }
+    @if (!collapsible() || !collapsed()) {
+      <div
+        class="strct-code__scroll"
+        [class.strct-code__scroll--wrap]="wrap()"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="title() || language() || 'code'"
+        [style.max-height.px]="maxHeight()"
+      >
+        <pre class="strct-code__pre"><!--
+       -->@if (lineNumbers() && !wrap()) {<!--
+         --><span class="strct-code__gutter" aria-hidden="true">@for (n of lineNos(); track n) {<span class="strct-code__ln">{{ n }}</span>}</span><!--
+       -->}<!--
+       --><code class="strct-code__code">{{ code() }}</code></pre>
+      </div>
+    }
+  `, host: {
+                        class: 'strct-code',
+                        '[class.strct-code--collapsed]': 'collapsible() && collapsed()',
+                    }, styles: [".strct-code{display:block;border:1px solid var(--b2);border-radius:9px;background:var(--bg-2);overflow:hidden}.strct-code__head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--b1)}.strct-code--collapsed .strct-code__head{border-bottom:0}.strct-code__toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-3px 0 -3px -4px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-code__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-code__toggle:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-code__toggle strct-icon{transition:transform .15s ease}.strct-code__chev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-code__toggle strct-icon{transition:none}}.strct-code__title{font-size:12.5px;font-weight:600;color:var(--t1)}.strct-code__lang{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);border:1px solid var(--b2);border-radius:4px;padding:2px 6px}.strct-code__grow{flex:1}.strct-code__scroll{overflow:auto}.strct-code__scroll:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-code__pre{display:flex;margin:0;padding:10px 12px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--t1)}.strct-code__gutter{display:flex;flex-direction:column;flex-shrink:0;margin-inline-end:12px;padding-inline-end:10px;border-inline-end:1px solid var(--b1);color:var(--t3);text-align:end;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.strct-code__code{display:block;white-space:pre}.strct-code__scroll--wrap .strct-code__code{white-space:pre-wrap;overflow-wrap:anywhere}\n"] }]
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }] } });
+
+/**
+ * The standard strip above a data grid: a search field, the active filter
+ * chips (each removable), a result count and a clear-all action. The bar owns
+ * no filtering logic — it renders state and announces intent:
+ *
+ *   <strct-filter-bar [(query)]="q" [filters]="chips" [count]="rows.length"
+ *                     (removed)="drop($event)" (cleared)="reset()" />
+ */
+class StrctFilterBar {
+    /** Search text (two-way; forwards to the embedded searchbox). */
+    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** Active filter chips. */
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    /** Result count shown at the end; null hides it. */
+    count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Localizable strings. */
+    placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    countLabel = input('results', ...(ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []));
+    clearLabel = input('Clear filters', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    removeLabel = input('Remove filter', ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /** Enter pressed in the search field. */
+    search = output();
+    /** A chip's × was clicked. */
+    removed = output();
+    /** "Clear filters" was clicked. */
+    cleared = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctFilterBar, isStandalone: true, selector: "strct-filter-bar", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", search: "search", removed: "removed", cleared: "cleared" }, host: { classAttribute: "strct-fb" }, ngImport: i0, template: `
+    <strct-searchbox
+      class="strct-fb__search"
+      [placeholder]="placeholder()"
+      [(value)]="query"
+      (search)="search.emit($event)"
+    />
+    @for (chip of filters(); track chip.id) {
+      <span class="strct-fb__chip">
+        <span class="strct-fb__chip-label">{{ chip.label }}</span>
+        <button
+          type="button"
+          class="strct-fb__chip-x"
+          [attr.aria-label]="removeLabel() + ' ' + chip.label"
+          (click)="removed.emit(chip)"
+        >
+          <strct-icon name="close" [size]="10" [strokeWidth]="1.9" />
+        </button>
+      </span>
+    }
+    @if (filters().length > 1) {
+      <button type="button" class="strct-fb__clear" (click)="cleared.emit()">
+        {{ clearLabel() }}
+      </button>
+    }
+    <ng-content />
+    <span class="strct-fb__grow"></span>
+    @if (count() !== null) {
+      <span class="strct-fb__count" aria-live="polite">{{ count() }} {{ countLabel() }}</span>
+    }
+  `, isInline: true, styles: [".strct-fb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}.strct-fb__search{width:240px;max-width:100%}.strct-fb__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--acc-m);color:var(--acc);font-size:12px;font-weight:500}.strct-fb__chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.strct-fb__chip-x:hover{background:var(--acc30)}.strct-fb__chip-x:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-fb__clear{border:0;padding:3px 6px;border-radius:5px;background:transparent;color:var(--t3);font-family:var(--font);font-size:12px;cursor:pointer}.strct-fb__clear:hover{color:var(--t1);background:var(--bg-3)}.strct-fb__clear:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-fb__grow{flex:1}.strct-fb__count{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-filter-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctSearchbox], template: `
+    <strct-searchbox
+      class="strct-fb__search"
+      [placeholder]="placeholder()"
+      [(value)]="query"
+      (search)="search.emit($event)"
+    />
+    @for (chip of filters(); track chip.id) {
+      <span class="strct-fb__chip">
+        <span class="strct-fb__chip-label">{{ chip.label }}</span>
+        <button
+          type="button"
+          class="strct-fb__chip-x"
+          [attr.aria-label]="removeLabel() + ' ' + chip.label"
+          (click)="removed.emit(chip)"
+        >
+          <strct-icon name="close" [size]="10" [strokeWidth]="1.9" />
+        </button>
+      </span>
+    }
+    @if (filters().length > 1) {
+      <button type="button" class="strct-fb__clear" (click)="cleared.emit()">
+        {{ clearLabel() }}
+      </button>
+    }
+    <ng-content />
+    <span class="strct-fb__grow"></span>
+    @if (count() !== null) {
+      <span class="strct-fb__count" aria-live="polite">{{ count() }} {{ countLabel() }}</span>
+    }
+  `, host: { class: 'strct-fb' }, styles: [".strct-fb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}.strct-fb__search{width:240px;max-width:100%}.strct-fb__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--acc-m);color:var(--acc);font-size:12px;font-weight:500}.strct-fb__chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.strct-fb__chip-x:hover{background:var(--acc30)}.strct-fb__chip-x:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-fb__clear{border:0;padding:3px 6px;border-radius:5px;background:transparent;color:var(--t3);font-family:var(--font);font-size:12px;cursor:pointer}.strct-fb__clear:hover{color:var(--t1);background:var(--bg-3)}.strct-fb__clear:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-fb__grow{flex:1}.strct-fb__count{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}\n"] }]
+        }], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], removed: [{ type: i0.Output, args: ["removed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
 
 /** Tone class suffix per validation status (used by field + cell helper styles). */
 function strctValidationTone(status) {
@@ -12097,5 +12768,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, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, 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, strctValidationIcon, strctValidationTone };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, 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, strctValidationIcon, strctValidationTone };
 //# sourceMappingURL=akcelik-strct.mjs.map