@akcelik/strct 1.2.1 → 1.5.0

package/fesm2022/akcelik-strct.mjs

@@ -1326,6 +1326,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.
  *
@@ -4386,6 +4456,491 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, 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"] }] } });
 
+/**
+ * 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 });
+    /** 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 }, 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"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="title() || language() || 'code'"
+        [style.max-height.px]="maxHeight()"
+      >
+        <pre class="strct-code__pre"><!--
+       -->@if (lineNumbers()) {<!--
+         --><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}\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"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="title() || language() || 'code'"
+        [style.max-height.px]="maxHeight()"
+      >
+        <pre class="strct-code__pre"><!--
+       -->@if (lineNumbers()) {<!--
+         --><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}\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 }] }], 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) {
     return status;
@@ -9138,6 +9693,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-spark' }, styles: [".strct-spark{display:inline-block;line-height:0}.strct-spark__line{stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-spark__area{opacity:.14}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
+/** Resolve a color role to its CSS value. */
+function colorOf(role) {
+    return role.startsWith('chart-') ? `var(--${role})` : COLOR$1[role];
+}
 const COLOR$1 = {
     accent: 'var(--acc)',
     success: 'var(--success)',
@@ -9644,7 +10203,7 @@ class StrctChart {
                 }
                 const curve = x.curve ?? this.curve();
                 return {
-                    color: COLOR$1[x.status ?? this.status()],
+                    color: colorOf(x.color ?? x.status ?? this.status()),
                     label: x.label ?? '',
                     area: false,
                     dash: x.dash ? (typeof x.dash === 'string' ? x.dash : '5 4') : null,
@@ -9670,7 +10229,7 @@ class StrctChart {
                 ? bandPath(x.upper.map((v, i) => ptOf(v, i)), x.lower.map((v, i) => ptOf(v, i)), curve)
                 : '';
             return {
-                color: COLOR$1[x.status ?? this.status()],
+                color: colorOf(x.color ?? x.status ?? this.status()),
                 label: x.label ?? '',
                 area,
                 dash: x.dash ? (typeof x.dash === 'string' ? x.dash : '5 4') : null,
@@ -12093,5 +12652,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_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