@akcelik/strct 1.3.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "1.3.0",
+  "version": "1.6.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, TemplateRef } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
-import * as _akcelik_strct from '@akcelik/strct';
 import { ControlValueAccessor } from '@angular/forms';
+import * as _akcelik_strct from '@akcelik/strct';
 
 /** Available color palettes. */
 type StrctPalette = 'arctic' | 'ember' | 'sage';
@@ -93,11 +93,213 @@ interface StrctThresholds {
  * storage, VMs …). Object state — running / stopped / maintenance — is layered
  * on with the `badge` input rather than a separate icon per state.
  */
+declare const STRCT_ICON_DEFS: {
+    hexagon: string;
+    chevronRight: string;
+    chevronLeft: string;
+    chevronDoubleRight: string;
+    chevronDown: string;
+    compass: string;
+    close: string;
+    check: string;
+    menu: string;
+    dots: string;
+    ellipsis: string;
+    search: string;
+    calendar: string;
+    eye: string;
+    upload: string;
+    download: string;
+    droplet: string;
+    sortAsc: string;
+    sortDesc: string;
+    sortNone: string;
+    sun: string;
+    moon: string;
+    info: string;
+    warning: string;
+    critical: string;
+    success: string;
+    bell: string;
+    heart: string;
+    layers: string;
+    grid: string;
+    form: string;
+    chart: string;
+    bars: string;
+    sidebar: string;
+    palette: string;
+    gauge: string;
+    copy: string;
+    code: string;
+    book: string;
+    terminal: string;
+    folder: string;
+    template: string;
+    file: string;
+    clipboard: string;
+    tag: string;
+    plus: string;
+    minus: string;
+    pencil: string;
+    trash: string;
+    refresh: string;
+    filter: string;
+    settings: string;
+    user: string;
+    logout: string;
+    undo: string;
+    redo: string;
+    arrowUp: string;
+    arrowDown: string;
+    arrowLeft: string;
+    arrowRight: string;
+    externalLink: string;
+    datacenter: string;
+    rack: string;
+    cluster: string;
+    host: string;
+    vm: string;
+    switch: string;
+    storage: string;
+    network: string;
+    cpu: string;
+    memory: string;
+    disk: string;
+    port: string;
+    power: string;
+    nic: string;
+    hba: string;
+    ethernet: string;
+    resourcePool: string;
+    portGroup: string;
+    pod: string;
+    deployment: string;
+    service: string;
+    node: string;
+    ingress: string;
+    cloud: string;
+    container: string;
+    firewall: string;
+    shield: string;
+    certificate: string;
+    key: string;
+    metrics: string;
+    logs: string;
+    trace: string;
+    universalAccess: string;
+    wheelchair: string;
+    hearing: string;
+    lowVision: string;
+    braille: string;
+    signLanguage: string;
+    siren: string;
+    alarm: string;
+    megaphone: string;
+    flag: string;
+    shieldAlert: string;
+    shieldCheck: string;
+    running: string;
+    stopped: string;
+    paused: string;
+    maintenance: string;
+    sync: string;
+    snapshot: string;
+    lock: string;
+    clock: string;
+    history: string;
+    timer: string;
+    hourglass: string;
+    mail: string;
+    chat: string;
+    help: string;
+    home: string;
+    link: string;
+    globe: string;
+    star: string;
+    pin: string;
+    share: string;
+    archive: string;
+    zoomIn: string;
+    zoomOut: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    listView: string;
+    dragHandle: string;
+    chevronUp: string;
+    chevronDoubleLeft: string;
+    chevronDoubleUp: string;
+    chevronDoubleDown: string;
+    dns: string;
+    vpn: string;
+    api: string;
+    bolt: string;
+    queue: string;
+    users: string;
+    login: string;
+    unlock: string;
+    ban: string;
+    vendorVmware: string;
+    vendorCisco: string;
+    vendorHpe: string;
+    vendorDell: string;
+    vendorKaytus: string;
+    opticalDisc: string;
+    ssd: string;
+    usb: string;
+    sdCard: string;
+    tape: string;
+    gpu: string;
+    psu: string;
+    fan: string;
+    battery: string;
+    ups: string;
+    motherboard: string;
+    sensor: string;
+    thermometer: string;
+    sparkles: string;
+    brain: string;
+    robot: string;
+    neuralNetwork: string;
+    aiChip: string;
+    wand: string;
+    model: string;
+    router: string;
+    loadBalancer: string;
+    wifi: string;
+    bluetooth: string;
+    monitor: string;
+    keyboard: string;
+    printer: string;
+};
+declare const STRCT_ICON_DERIVED_DEFS: {
+    eyeOff: string;
+    bellOff: string;
+    wifiOff: string;
+    cloudOff: string;
+    linkOff: string;
+    unlink: string;
+    webhook: string;
+};
+/**
+ * Every built-in icon name, as a compile-time union — a mistyped name is a
+ * build error instead of a silently empty box:
+ *
+ *   const icon: StrctIconName = 'shieldCheck'; // ✓
+ *   const icon: StrctIconName = 'sheildCheck'; // ✗ compile error
+ */
+type StrctIconName = keyof typeof STRCT_ICON_DEFS | keyof typeof STRCT_ICON_DERIVED_DEFS;
+/**
+ * Icon name → glyph markup. Open (`Record<string, string>`) on purpose so
+ * `registerStrctIcon` can add app-specific names at runtime.
+ */
 declare const STRCT_ICONS: Record<string, string>;
+/** All built-in icon names — greppable, iterable (galleries, docs, tests). */
+declare const STRCT_ICON_NAMES: readonly StrctIconName[];
 /** Icon names grouped for galleries / documentation. */
 declare const STRCT_ICON_GROUPS: {
     label: string;
-    names: string[];
+    names: StrctIconName[];
 }[];
 /**
  * Full-SVG icons that keep their own viewBox and colors (no stroke wrapper).
@@ -123,15 +325,13 @@ declare function registerStrctIcon(name: string, content: string, options?: {
  * green disc ▶ running · amber disc ⏸ paused · grey disc ■ off.
  */
 type StrctIconBadge = 'none' | 'success' | 'warning' | 'critical' | 'running' | 'paused' | 'off' | 'info' | 'maintenance';
-/**
- * Inline stroke icon. `<strct-icon name="host" badge="success" />` renders the host
- * glyph with a green status dot (a "running host"). Unknown names render
- * nothing rather than throwing.
- */
 declare class StrctIcon {
     private readonly sanitizer;
-    /** Icon name from the STRCT_ICONS registry. */
-    readonly name: _angular_core.InputSignal<string>;
+    /**
+     * Icon name. Typed to autocomplete the built-in set while still accepting
+     * any string, since `registerStrctIcon` can add names at runtime.
+     */
+    readonly name: _angular_core.InputSignal<StrctIconName | (string & {})>;
     /** Icon size in pixels. */
     readonly size: _angular_core.InputSignal<number>;
     /** Stroke width for outline icons. */
@@ -319,6 +519,37 @@ declare class StrctLogin {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctLogin, "strct-login", never, { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "split": { "alias": "split"; "required": false; "isSignal": true; }; }, {}, never, ["[strctLoginAside]", "[strctLoginMain]", "*"], true, never>;
 }
 
+/** Marks the breadcrumb row projected above the title. */
+declare class StrctPageHeaderCrumbs {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctPageHeaderCrumbs, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctPageHeaderCrumbs, "[strctPageHeaderCrumbs]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the action buttons aligned to the end of the title row. */
+declare class StrctPageHeaderActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctPageHeaderActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctPageHeaderActions, "[strctPageHeaderActions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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>
+ */
+declare class StrctPageHeader {
+    /** Page title (an h1). */
+    readonly title: _angular_core.InputSignal<string>;
+    /** One-line description under the title. */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Draw a hairline divider under the header. */
+    readonly divider: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctPageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctPageHeader, "strct-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; }, {}, never, ["[strctPageHeaderCrumbs]", "[strctPageHeaderActions]", "*"], true, never>;
+}
+
 /** Button visual variants. */
 type StrctButtonVariant = 'primary' | 'critical' | 'outline' | 'flat' | 'neutral';
 /** Button size variants. */
@@ -957,18 +1188,38 @@ declare class StrctDrawer {
  *     <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>
  */
 declare class StrctDropdown {
     private readonly host;
     /** Horizontal alignment of the menu. */
     readonly align: _angular_core.InputSignal<"end" | "start">;
+    /**
+     * 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.
+     */
+    readonly popover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name of the popover dialog (localizable). */
+    readonly popoverLabel: _angular_core.InputSignal<string>;
     readonly open: _angular_core.WritableSignal<boolean>;
     toggle(): void;
     close(): void;
+    /** Menu items close on activation; popover form controls never do. */
+    protected onInnerActivate(): void;
     protected onDocClick(event: MouseEvent): void;
     protected onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdown, "strct-dropdown", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownTrigger]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdown, "strct-dropdown", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "popover": { "alias": "popover"; "required": false; "isSignal": true; }; "popoverLabel": { "alias": "popoverLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownTrigger]", "*"], true, never>;
 }
 /** A selectable row inside a `<strct-dropdown>`. */
 declare class StrctDropdownItem {
@@ -1230,9 +1481,24 @@ declare class StrctCommandPalette {
     readonly emptyText: _angular_core.InputSignal<string>;
     /** Maximum rendered results. */
     readonly maxResults: _angular_core.InputSignal<number>;
+    /**
+     * 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.
+     */
+    readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a "searching" row while server results are in flight. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Localizable text of the loading row. */
+    readonly loadingText: _angular_core.InputSignal<string>;
     /** Emitted when a command is chosen (Enter or click); the palette closes. */
     readonly picked: _angular_core.OutputEmitterRef<StrctCommandItem>;
-    protected readonly query: _angular_core.WritableSignal<string>;
+    /**
+     * The typed query (two-way). The palette still owns typing and keyboard
+     * behaviour; consumers observe it to serve results asynchronously.
+     */
+    readonly query: _angular_core.ModelSignal<string>;
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
     protected readonly listId: string;
     private previousActive;
@@ -1248,7 +1514,7 @@ declare class StrctCommandPalette {
     protected pick(item: StrctCommandItem): void;
     protected close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCommandPalette, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCommandPalette, "strct-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCommandPalette, "strct-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; "query": "queryChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1260,6 +1526,165 @@ declare class StrctKbd {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctKbd, "strct-kbd", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * 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)" />
+ */
+declare class StrctSearchbox implements ControlValueAccessor {
+    private readonly host;
+    /** Placeholder text (and the trigger mode's label). */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Keyboard-hint chip (e.g. "⌘K"); hidden while typing. */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Render as an activation button instead of a real input (palette opener). */
+    readonly trigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show the × clear button when there is a value. */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label; falls back to `placeholder`. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Accessible label of the clear button (localizable). */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Current text (two-way; also drives the CVA value). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Enter pressed in input mode — run the search with the current text. */
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    /** Trigger mode clicked (open your command palette / search surface). */
+    readonly activated: _angular_core.OutputEmitterRef<void>;
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    protected onTouched: () => void;
+    protected onInput(event: Event): void;
+    /** Clear the text (Escape / the × button). */
+    clear(): void;
+    /** Focus the input programmatically (e.g. from a global shortcut). */
+    focus(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctSearchbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSearchbox, "strct-searchbox", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "activated": "activated"; }, never, never, true, never>;
+}
+
+/**
+ * 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" />
+ */
+declare class StrctCopy {
+    private readonly destroyRef;
+    /** The text written to the clipboard. */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Optional visible label next to the icon (icon-only by default). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Accessible label; falls back to `copyLabel`. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Localizable strings. */
+    readonly copyLabel: _angular_core.InputSignal<string>;
+    readonly copiedLabel: _angular_core.InputSignal<string>;
+    /** Emitted after a successful copy, with the copied text. */
+    readonly copied: _angular_core.OutputEmitterRef<string>;
+    protected readonly done: _angular_core.WritableSignal<boolean>;
+    private timer;
+    constructor();
+    /** Write `text` to the clipboard and show the ✓ feedback. */
+    copy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCopy, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCopy, "strct-copy", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "copyLabel": { "alias": "copyLabel"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; }, { "copied": "copied"; }, never, never, true, never>;
+}
+
+/**
+ * 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 />
+ */
+declare class StrctCode {
+    /** The code / rendered config text (copied verbatim). */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Header title (e.g. a filename). */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Small uppercase language tag (yaml, json, bash …). */
+    readonly language: _angular_core.InputSignal<string>;
+    /** Show the copy button. */
+    readonly copyable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapse to just the header (the `<details><pre>` pattern, done right). */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapsed state (two-way; only meaningful with `collapsible`). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Show a line-number gutter (numbers are never copied — `code` is). */
+    readonly lineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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`.
+     */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Scroll the body past this height (px); null grows freely. */
+    readonly maxHeight: _angular_core.InputSignal<number | null>;
+    /** Localizable labels for the collapse toggle. */
+    readonly collapseLabel: _angular_core.InputSignal<string>;
+    readonly expandLabel: _angular_core.InputSignal<string>;
+    protected readonly lineNos: _angular_core.Signal<number[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCode, "strct-code", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, never, true, never>;
+}
+
+/** One active filter chip in a {@link StrctFilterBar}. */
+interface StrctFilterChip {
+    /** Stable identity, returned with (removed). */
+    id: string;
+    /** Chip text, e.g. "state: running". */
+    label: string;
+    /** Arbitrary payload carried back with (removed). */
+    data?: unknown;
+}
+/**
+ * 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()" />
+ */
+declare class StrctFilterBar {
+    /** Search text (two-way; forwards to the embedded searchbox). */
+    readonly query: _angular_core.ModelSignal<string>;
+    /** Active filter chips. */
+    readonly filters: _angular_core.InputSignal<StrctFilterChip[]>;
+    /** Result count shown at the end; null hides it. */
+    readonly count: _angular_core.InputSignal<number | null>;
+    /** Localizable strings. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly countLabel: _angular_core.InputSignal<string>;
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    readonly removeLabel: _angular_core.InputSignal<string>;
+    /** Enter pressed in the search field. */
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    /** A chip's × was clicked. */
+    readonly removed: _angular_core.OutputEmitterRef<StrctFilterChip>;
+    /** "Clear filters" was clicked. */
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctFilterBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctFilterBar, "strct-filter-bar", never, { "query": { "alias": "query"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "query": "queryChange"; "search": "search"; "removed": "removed"; "cleared": "cleared"; }, never, ["*"], true, never>;
+}
+
 /** Lifecycle of an async (or deferred) validation check. */
 type StrctValidationStatus = 'idle' | 'checking' | 'ok' | 'warning' | 'error';
 /**
@@ -3140,5 +3565,5 @@ declare class StrctEmptyState {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctEmptyState, "strct-empty-state", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-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 type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };
+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 };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };