@ind-ds/core 0.1.0

package/dist/collection/components/molecules/health-card/health-card.js

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_LABEL = {
+    running: 'OK',
+    stopped: 'Stopped',
+    fault: 'Fault',
+    warning: 'Warning',
+    maintenance: 'Maintenance',
+    unknown: '—',
+};
+export class IndHealthCard {
+    /** Subsystem name (e.g. "PLC", "Dispense robot", "Washer"). */
+    heading;
+    /** Process state — drives the dot color and the prominent text color. */
+    state = 'unknown';
+    /** Override the default label (e.g. show "RUN 24 h" instead of "OK"). */
+    stateLabel;
+    /** Optional sub-line for context (timestamp, last error, etc.). */
+    detail;
+    render() {
+        const label = this.stateLabel ?? DEFAULT_LABEL[this.state];
+        const dotState = this.state === 'unknown' ? 'neutral' : this.state;
+        return (h(Host, { key: '2bc1d2152325d8a40fb9399ec6c24b0134bde34a', role: "group", "aria-label": `${this.heading}: ${label}`, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("div", { key: '7268095055dc03a742e97786a22dd4179f6e8ac3', class: "title", part: "title" }, this.heading), h("div", { key: '4069f5782516eb2b28bfafb4b0a59c3fe6133321', class: "status", part: "status" }, h("ind-status-dot", { key: '651976ae059c6b8faafd4bb4de7c1fa08fd6b86b', state: dotState, size: "md" }), h("span", { key: '18925ef8bb2c51789f315a2adf8cacc5a7ad4712', class: "state-label", part: "state-label" }, label)), this.detail && h("div", { key: '7f3c37bca74f5f5fb92633f9c7d85681c78bd677', class: "detail", part: "detail" }, this.detail)));
+    }
+    static get is() { return "ind-health-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["health-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["health-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subsystem name (e.g. \"PLC\", \"Dispense robot\", \"Washer\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HealthState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"unknown\" | \"warning\"",
+                    "references": {
+                        "HealthState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/molecules/health-card/health-card.tsx",
+                            "id": "src/components/molecules/health-card/health-card.tsx::HealthState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Process state \u2014 drives the dot color and the prominent text color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'unknown'"
+            },
+            "stateLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the default label (e.g. show \"RUN 24 h\" instead of \"OK\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state-label"
+            },
+            "detail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional sub-line for context (timestamp, last error, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "detail"
+            }
+        };
+    }
+}
+//# sourceMappingURL=health-card.js.map

package/dist/collection/components/molecules/health-card/health-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"health-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/health-card/health-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,aAAa,GAAgC;IACjD,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,GAAG;CACb,CAAC;AAOF,MAAM,OAAO,aAAa;IACxB,+DAA+D;IACvD,OAAO,CAAU;IACzB,yEAAyE;IAChD,KAAK,GAAgB,SAAS,CAAC;IACxD,yEAAyE;IACjE,UAAU,CAAU;IAC5B,mEAAmE;IAC3D,MAAM,CAAU;IAExB,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACnE,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,gBACA,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,eAC5B,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;YAE1D,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,CAAO;YACpD,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAC/B,uEAAgB,KAAK,EAAE,QAAmF,EAAE,IAAI,EAAC,IAAI,GAAG;gBACxH,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,IAAE,KAAK,CAAQ,CACvD;YACL,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,CAChE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HealthState =\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'unknown';\n\nconst DEFAULT_LABEL: Record<HealthState, string> = {\n  running: 'OK',\n  stopped: 'Stopped',\n  fault: 'Fault',\n  warning: 'Warning',\n  maintenance: 'Maintenance',\n  unknown: '—',\n};\n\n@Component({\n  tag: 'ind-health-card',\n  styleUrl: 'health-card.css',\n  shadow: true,\n})\nexport class IndHealthCard {\n  /** Subsystem name (e.g. \"PLC\", \"Dispense robot\", \"Washer\"). */\n  @Prop() heading!: string;\n  /** Process state — drives the dot color and the prominent text color. */\n  @Prop({ reflect: true }) state: HealthState = 'unknown';\n  /** Override the default label (e.g. show \"RUN 24 h\" instead of \"OK\"). */\n  @Prop() stateLabel?: string;\n  /** Optional sub-line for context (timestamp, last error, etc.). */\n  @Prop() detail?: string;\n\n  render() {\n    const label = this.stateLabel ?? DEFAULT_LABEL[this.state];\n    const dotState = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${this.heading}: ${label}`}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <div class=\"title\" part=\"title\">{this.heading}</div>\n        <div class=\"status\" part=\"status\">\n          <ind-status-dot state={dotState as 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance' | 'neutral'} size=\"md\" />\n          <span class=\"state-label\" part=\"state-label\">{label}</span>\n        </div>\n        {this.detail && <div class=\"detail\" part=\"detail\">{this.detail}</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/nav-item/nav-item.css

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+  font-family: var(--ind-font-family-sans);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  width: 100%;
+  height: var(--ind-nav-item-height, 38px);
+  padding: 0 var(--ind-spacing-5, 12px);
+  background: transparent;
+  border: none;
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  font: inherit;
+  font-size: var(--ind-font-size-base, 12px);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  transition:
+    background-color var(--ind-motion-duration-fast, 120ms),
+    color            var(--ind-motion-duration-fast, 120ms);
+}
+
+.indicator {
+  width: 10px;
+  font-size: 9px;
+  color: var(--ind-feedback-info-bg, #0891b2);
+  opacity: 0;
+  transition: opacity var(--ind-motion-duration-fast, 120ms);
+  text-align: center;
+}
+
+.content {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  font-size: var(--ind-font-size-xs, 10px);
+  font-family: var(--ind-font-family-mono);
+  font-weight: var(--ind-font-weight-bold, 700);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  padding: 1px var(--ind-spacing-2, 4px);
+  min-width: 16px;
+  text-align: center;
+  border-radius: var(--ind-radius-sm, 2px);
+  background: var(--ind-feedback-error-bg, #dc2626);
+  color: var(--ind-feedback-error-fg, #ffffff);
+  line-height: 1.2;
+}
+
+.item:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--ind-surface-raised);
+  color: var(--ind-surface-text-primary);
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);
+  outline-offset: -2px;
+}
+
+:host([active]) .item {
+  background: var(--ind-surface-raised);
+  color: var(--ind-surface-text-primary);
+  font-weight: var(--ind-font-weight-semibold, 600);
+}
+
+:host([active]) .indicator {
+  opacity: 1;
+}
+
+:host([disabled]) {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/dist/collection/components/molecules/nav-item/nav-item.js

@@ -0,0 +1,165 @@
+import { h, Host } from "@stencil/core";
+export class IndNavItem {
+    /** Current page indicator — gets the ▶ prefix and active styling. */
+    active = false;
+    disabled = false;
+    /** Label text. Falls back to slotted content. */
+    label;
+    /** Optional href. When set, renders as `<a>` so middle-click / right-click open in new tab. */
+    href;
+    /** Optional badge — alarm count, unread messages, etc. */
+    badge;
+    /** Fires on click (or Enter / Space). Use this to drive client-side routers. */
+    indSelect;
+    onClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (!this.href)
+            e.preventDefault();
+        this.indSelect.emit();
+    };
+    render() {
+        const ariaCurrent = this.active ? 'page' : undefined;
+        const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;
+        const inner = [
+            h("span", { key: 'ad9e90d0aab88711ff9e5f5db2cd988a76520c3c', class: "indicator", part: "indicator", "aria-hidden": "true" }, "\u25B6"),
+            h("span", { key: '33fa94a1e111cfc992dbd20ec1c8cfc9a30b18c5', class: "content", part: "content" }, h("slot", { key: 'bfc5072816f07d0fc276d67621efa09d4ce421f4' }, this.label)),
+            showBadge ? h("span", { class: "badge", part: "badge" }, this.badge) : null,
+        ];
+        return (h(Host, { key: '895afdd6a1a347adadb7213e4b42ece2d3e32c65' }, this.href ? (h("a", { class: "item", part: "item", href: this.href, "aria-current": ariaCurrent, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "item", part: "item", disabled: this.disabled, "aria-current": ariaCurrent, onClick: this.onClick }, inner))));
+    }
+    static get is() { return "ind-nav-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nav-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nav-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page indicator \u2014 gets the \u25B6 prefix and active styling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text. Falls back to slotted content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional href. When set, renders as `<a>` so middle-click / right-click open in new tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "badge": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional badge \u2014 alarm count, unread messages, etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indSelect",
+                "name": "indSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on click (or Enter / Space). Use this to drive client-side routers."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=nav-item.js.map

package/dist/collection/components/molecules/nav-item/nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../src/components/molecules/nav-item/nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,UAAU;IACrB,qEAAqE;IAC5C,MAAM,GAAY,KAAK,CAAC;IACxB,QAAQ,GAAY,KAAK,CAAC;IACnD,iDAAiD;IACzC,KAAK,CAAU;IACvB,+FAA+F;IACvF,IAAI,CAAU;IACtB,0DAA0D;IAClD,KAAK,CAAmB;IAEhC,gFAAgF;IACvE,SAAS,CAAsB;IAEhC,OAAO,GAAG,CAAC,CAAa,EAAE,EAAE;QAClC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QACrD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC;QAEvF,MAAM,KAAK,GAAG;YACZ,6DAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,aAAS;YACpE,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAO;YACrE,SAAS,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI;SACxE,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,SACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,WAAW,mBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,KAAK,CACJ,CACL,CAAC,CAAC,CAAC,CACF,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,KAAK,CACC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ind-nav-item',\n  styleUrl: 'nav-item.css',\n  shadow: true,\n})\nexport class IndNavItem {\n  /** Current page indicator — gets the ▶ prefix and active styling. */\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Label text. Falls back to slotted content. */\n  @Prop() label?: string;\n  /** Optional href. When set, renders as `<a>` so middle-click / right-click open in new tab. */\n  @Prop() href?: string;\n  /** Optional badge — alarm count, unread messages, etc. */\n  @Prop() badge?: string | number;\n\n  /** Fires on click (or Enter / Space). Use this to drive client-side routers. */\n  @Event() indSelect!: EventEmitter<void>;\n\n  private onClick = (e: MouseEvent) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) e.preventDefault();\n    this.indSelect.emit();\n  };\n\n  render() {\n    const ariaCurrent = this.active ? 'page' : undefined;\n    const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;\n\n    const inner = [\n      <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">▶</span>,\n      <span class=\"content\" part=\"content\"><slot>{this.label}</slot></span>,\n      showBadge ? <span class=\"badge\" part=\"badge\">{this.badge}</span> : null,\n    ];\n\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            class=\"item\"\n            part=\"item\"\n            href={this.href}\n            aria-current={ariaCurrent}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.onClick}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button\n            type=\"button\"\n            class=\"item\"\n            part=\"item\"\n            disabled={this.disabled}\n            aria-current={ariaCurrent}\n            onClick={this.onClick}\n          >\n            {inner}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/toolbar-action/toolbar-action.css

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);
+  background: var(--ind-surface-panel);
+  border-bottom: 1px solid var(--ind-surface-border-default);
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  flex-wrap: wrap;
+}
+
+.filter ::slotted(*) {
+  min-width: 200px;
+}
+
+.flags {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+}
+
+.spacer { flex: 1; }
+
+.counter {
+  font-family: var(--ind-font-family-mono);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  font-size: var(--ind-font-size-sm, 11px);
+  white-space: nowrap;
+}
+
+.actions {
+  display: flex;
+  gap: var(--ind-spacing-3, 6px);
+}

package/dist/collection/components/molecules/toolbar-action/toolbar-action.js

@@ -0,0 +1,45 @@
+import { h, Host } from "@stencil/core";
+export class IndToolbarAction {
+    /** Counter rendered before the actions (e.g. "1 248 messages"). */
+    counter;
+    render() {
+        const hasCounter = this.counter !== undefined && this.counter !== '' && this.counter !== null;
+        return (h(Host, { key: '335b711876377ee50cfeaac4635c2794d5c038eb' }, h("span", { key: '69cf5e6ca388c2bef9004cddd515db9c1d34f2f9', class: "filter", part: "filter" }, h("slot", { key: '6a5d72136095b2531214ea2e28a39a795e8b7e2d', name: "filter" })), h("span", { key: '614f12f7432752c3deef9cca8174a503d7048878', class: "flags", part: "flags" }, h("slot", { key: 'db14ea5398c70574cb0b690db2e0578aafa6a545', name: "flags" })), h("span", { key: '07ff837c88d3228666b7bcd36ae52f9efa5b081d', class: "spacer" }), hasCounter && h("span", { key: 'ee9220383a9a4c9c471f4945da3c28f67dada3ee', class: "counter", part: "counter" }, this.counter), h("span", { key: '53bc247add97382c56d4447b30c9b73e663fbe96', class: "actions", part: "actions" }, h("slot", { key: 'da6c78e96a87a412f44d620356268ef1a746fc99', name: "actions" }))));
+    }
+    static get is() { return "ind-toolbar-action"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toolbar-action.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toolbar-action.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "counter": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Counter rendered before the actions (e.g. \"1 248 messages\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter"
+            }
+        };
+    }
+}
+//# sourceMappingURL=toolbar-action.js.map

package/dist/collection/components/molecules/toolbar-action/toolbar-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-action.js","sourceRoot":"","sources":["../../../../src/components/molecules/toolbar-action/toolbar-action.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;IAC3B,mEAAmE;IAC3D,OAAO,CAAmB;IAElC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;QAC9F,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAAC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAO;YAChE,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAAC,6DAAM,IAAI,EAAC,OAAO,GAAG,CAAO;YAC7D,6DAAM,KAAK,EAAC,QAAQ,GAAG;YACtB,UAAU,IAAI,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;YACzE,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBAAC,6DAAM,IAAI,EAAC,SAAS,GAAG,CAAO,CAC9D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ind-toolbar-action',\n  styleUrl: 'toolbar-action.css',\n  shadow: true,\n})\nexport class IndToolbarAction {\n  /** Counter rendered before the actions (e.g. \"1 248 messages\"). */\n  @Prop() counter?: string | number;\n\n  render() {\n    const hasCounter = this.counter !== undefined && this.counter !== '' && this.counter !== null;\n    return (\n      <Host>\n        <span class=\"filter\" part=\"filter\"><slot name=\"filter\" /></span>\n        <span class=\"flags\" part=\"flags\"><slot name=\"flags\" /></span>\n        <span class=\"spacer\" />\n        {hasCounter && <span class=\"counter\" part=\"counter\">{this.counter}</span>}\n        <span class=\"actions\" part=\"actions\"><slot name=\"actions\" /></span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/app-header/app-header.css

@@ -0,0 +1,127 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-6, 16px);
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-6, 16px);
+  background: var(--ind-surface-panel);
+  border-bottom: 1px solid var(--ind-surface-border-default);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  font-family: var(--ind-font-family-sans);
+  min-height: 56px;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+.brand-logo {
+  font-size: 26px;
+  line-height: 1;
+  color: var(--ind-button-primary-bg);
+}
+
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+}
+
+.brand-name {
+  font-size: var(--ind-font-size-lg, 14px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.brand-sub {
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.machine {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+  padding-left: var(--ind-spacing-5, 12px);
+  border-left: 1px solid var(--ind-surface-border-subtle);
+}
+
+.machine-label {
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.machine-id {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-md, 13px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+}
+
+.mqtt {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+.mqtt-label {
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.spacer { flex: 1; }
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+  font-size: var(--ind-font-size-sm, 11px);
+}
+
+.version {
+  font-family: var(--ind-font-family-mono);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+.docs {
+  color: var(--ind-feedback-info-bg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.docs:hover { text-decoration-thickness: 2px; }
+
+.actions {
+  display: flex;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+.action {
+  height: var(--ind-size-button-sm, 26px);
+  padding: 0 var(--ind-spacing-4, 8px);
+  background: var(--ind-button-default-bg);
+  color: var(--ind-button-default-fg);
+  border: 1px solid var(--ind-button-default-border);
+  border-radius: var(--ind-radius-md, 3px);
+  font-family: inherit;
+  font-size: var(--ind-font-size-sm, 11px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  cursor: pointer;
+  transition: background var(--ind-motion-duration-fast, 120ms);
+}
+.action:hover { background: var(--ind-button-default-bg-hover); }
+
+.action--danger {
+  background: transparent;
+  color: var(--ind-feedback-error-bg);
+  border-color: var(--ind-feedback-error-border);
+}
+.action--danger:hover {
+  background: var(--ind-feedback-error-bg);
+  color: var(--ind-feedback-error-fg);
+}