@ind-ds/core 0.1.0

package/dist/collection/components/atoms/value/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","sourceRoot":"","sources":["../../../../src/components/atoms/value/value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAWzD,MAAM,OAAO,QAAQ;IACnB,2EAA2E;IACnE,KAAK,CAAmB;IAEhC,0EAA0E;IAClE,IAAI,CAAU;IAEtB,8DAA8D;IACtD,SAAS,CAAU;IAE3B,6EAA6E;IACpD,KAAK,GAAe,MAAM,CAAC;IAEpD,uEAAuE;IAC9C,KAAK,GAAe,MAAM,CAAC;IAEpD,+EAA+E;IACtD,IAAI,GAAc,IAAI,CAAC;IAEhD,sEAAsE;IAC9D,KAAK,CAAU;IAEvB,4DAA4D;IACpD,GAAG,CAAU;IAEb,SAAS;QACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QACtD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5E,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,eAAe,CAAC;QACjE,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzE,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,gBACA,GAAG,cAAc,KAAK,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,EAAE,eAC1F,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;YAE7D,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAC3B,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAC9B,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBAC1D,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/D,CACP;YACD,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,SAAS,EAAE,CAAQ;gBAC3D,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;gBAC9D,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,CACxB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,IAChD,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CACzD,CACR,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ValueAlarm = 'none' | 'low-low' | 'low' | 'high' | 'high-high';\nexport type ValueTrend = 'none' | 'up' | 'down' | 'stable';\nexport type ValueSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-value',\n  styleUrl: 'value.css',\n  shadow: true,\n})\nexport class IndValue {\n  /** Raw value to display. Numeric values are formatted with `precision`. */\n  @Prop() value!: number | string;\n\n  /** Engineering unit shown after the number (e.g. \"bar\", \"°C\", \"m³/h\"). */\n  @Prop() unit?: string;\n\n  /** Decimal places when `value` is numeric. Default: as-is. */\n  @Prop() precision?: number;\n\n  /** Active alarm priority. Highlights the readout with the ISA-18.2 color. */\n  @Prop({ reflect: true }) alarm: ValueAlarm = 'none';\n\n  /** Process trend direction. Renders a small arrow next to the unit. */\n  @Prop({ reflect: true }) trend: ValueTrend = 'none';\n\n  /** Readout size — `lg` is appropriate for primary KPIs (uses the 3xl font). */\n  @Prop({ reflect: true }) size: ValueSize = 'md';\n\n  /** Human label shown above the number (e.g. \"Discharge pressure\"). */\n  @Prop() label?: string;\n\n  /** Equipment tag shown above the number (e.g. \"PT-101\"). */\n  @Prop() tag?: string;\n\n  private formatted(): string {\n    if (typeof this.value === 'string') return this.value;\n    if (!Number.isFinite(this.value)) return '--';\n    if (this.precision !== undefined) return this.value.toFixed(this.precision);\n    return String(this.value);\n  }\n\n  render() {\n    const accessibleName = this.label ?? this.tag ?? 'process value';\n    const alarmSuffix = this.alarm !== 'none' ? `, alarm ${this.alarm}` : '';\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`}\n        aria-live={this.alarm === 'high-high' ? 'assertive' : 'polite'}\n      >\n        {(this.tag || this.label) && (\n          <div class=\"header\" part=\"header\">\n            {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          </div>\n        )}\n        <div class=\"readout\" part=\"readout\">\n          <span class=\"number\" part=\"number\">{this.formatted()}</span>\n          {this.unit && <span class=\"unit\" part=\"unit\">{this.unit}</span>}\n          {this.trend !== 'none' && (\n            <span class=\"trend\" part=\"trend\" aria-hidden=\"true\">\n              {this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆'}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/valve/valve.css

@@ -0,0 +1,101 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+  font-family: var(--ind-font-family-sans);
+  font-size: var(--ind-font-size-base, 12px);
+  /* `light-dark()` makes the fallback adapt to the page's color-scheme so the
+   * caption stays readable even if the atom lands on a surface whose theme
+   * doesn't match the loaded tokens (e.g. Storybook autodocs on white). */
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.symbol {
+  --_w: var(--ind-valve-width, 48px);
+  --_fill:   var(--ind-state-stopped-bg, #5a6776);
+  --_stroke: var(--ind-state-stopped-border, #8390a0);
+
+  width: var(--_w);
+  height: calc(var(--_w) / 2);
+  display: block;
+}
+
+:host([orientation="vertical"]) .symbol {
+  transform: rotate(90deg);
+}
+
+:host([size="sm"]) .symbol { --_w: 32px; }
+:host([size="md"]) .symbol { --_w: 48px; }
+:host([size="lg"]) .symbol { --_w: 72px; }
+
+.left,
+.right {
+  fill: var(--_fill);
+  stroke: var(--_stroke);
+  stroke-width: 1.25;
+  stroke-linejoin: round;
+  transition:
+    fill var(--ind-motion-duration-base, 200ms),
+    stroke var(--ind-motion-duration-base, 200ms);
+}
+
+.stem {
+  stroke: var(--_stroke);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+:host([state="open"]) .symbol {
+  --_fill:   var(--ind-state-running-bg, #16a34a);
+  --_stroke: var(--ind-state-running-border, #4ade80);
+}
+:host([state="closed"]) .symbol {
+  --_fill:   var(--ind-state-stopped-bg, #5a6776);
+  --_stroke: var(--ind-state-stopped-border, #8390a0);
+}
+:host([state="fault"]) .symbol {
+  --_fill:   var(--ind-state-fault-bg, #dc2626);
+  --_stroke: var(--ind-state-fault-border, #f87171);
+}
+:host([state="transit"]) .symbol {
+  --_fill:   var(--ind-state-warning-bg, #f59e0b);
+  --_stroke: var(--ind-state-warning-border, #fcd34d);
+}
+
+/* Transit: marching ants on the perimeter — universally read as
+ * "in motion / transitioning" by control room operators. */
+:host([state="transit"]) .left,
+:host([state="transit"]) .right {
+  stroke-dasharray: 4 2;
+  animation: ind-valve-march var(--ind-motion-blink-slow, 1000ms) linear infinite;
+}
+
+@keyframes ind-valve-march {
+  to { stroke-dashoffset: -6; }
+}
+
+.caption {
+  display: flex;
+  gap: var(--ind-spacing-3, 6px);
+  align-items: baseline;
+  font-size: var(--ind-font-size-sm, 11px);
+}
+
+.tag {
+  font-family: var(--ind-font-family-mono);
+  font-weight: var(--ind-font-weight-semibold, 600);
+}
+
+.label {
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([state="transit"]) .left,
+  :host([state="transit"]) .right {
+    animation: none;
+    stroke-dasharray: 4 2;
+  }
+}

package/dist/collection/components/atoms/valve/valve.js

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+export class IndValve {
+    /** Valve state. `transit` is mid-stroke (transitioning between open and closed). */
+    state = 'closed';
+    /** Render the symbol along the flow direction. */
+    orientation = 'horizontal';
+    /** Visual size. */
+    size = 'md';
+    /** Human label rendered as caption (e.g. "Discharge valve"). */
+    label;
+    /** Equipment tag rendered as caption (e.g. "V-12"). */
+    tag;
+    render() {
+        const name = this.label ?? this.tag ?? 'valve';
+        return (h(Host, { key: 'f0a9a4f7a1401c7ffc091bb10e52d13854e0fd42', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '1ba7a6466df31802d8ca141016670c6c301bc066', class: "symbol", part: "symbol", viewBox: "0 0 32 16", "aria-hidden": "true" }, h("polygon", { key: '89f77217a84e53606ce38e126c8ce87358fafb8b', class: "left", part: "left", points: "2,2 2,14 16,8" }), h("polygon", { key: '12ca5cd5ad1c117c48cc54275fe98509daba3267', class: "right", part: "right", points: "30,2 30,14 16,8" }), h("line", { key: '24510448beca41c7ab421b61c06de63840bddf99', class: "stem", part: "stem", x1: "16", y1: "2", x2: "16", y2: "14" })), (this.tag || this.label) && (h("div", { key: '18b6f7a60c0fdb8b5b7a688d5f6151811a9d587b', class: "caption", part: "caption" }, this.tag && h("span", { key: '7a8eb4c486380e3cb1a92e1ab3bdcbd2689cbd50', class: "tag", part: "tag" }, this.tag), this.label && h("span", { key: '6281ca7b4ae18e455a28b18890d28c58f38c14c1', class: "label", part: "label" }, this.label)))));
+    }
+    static get is() { return "ind-valve"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["valve.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["valve.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValveState",
+                    "resolved": "\"closed\" | \"fault\" | \"open\" | \"transit\"",
+                    "references": {
+                        "ValveState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/valve/valve.tsx",
+                            "id": "src/components/atoms/valve/valve.tsx::ValveState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valve state. `transit` is mid-stroke (transitioning between open and closed)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'closed'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValveOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "ValveOrientation": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/valve/valve.tsx",
+                            "id": "src/components/atoms/valve/valve.tsx::ValveOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the symbol along the flow direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValveSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ValveSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/valve/valve.tsx",
+                            "id": "src/components/atoms/valve/valve.tsx::ValveSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human label rendered as caption (e.g. \"Discharge valve\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag rendered as caption (e.g. \"V-12\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            }
+        };
+    }
+}
+//# sourceMappingURL=valve.js.map

package/dist/collection/components/atoms/valve/valve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valve.js","sourceRoot":"","sources":["../../../../src/components/atoms/valve/valve.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAWzD,MAAM,OAAO,QAAQ;IACnB,oFAAoF;IAC3D,KAAK,GAAe,QAAQ,CAAC;IAEtD,kDAAkD;IACzB,WAAW,GAAqB,YAAY,CAAC;IAEtE,mBAAmB;IACM,IAAI,GAAc,IAAI,CAAC;IAEhD,gEAAgE;IACxD,KAAK,CAAU;IAEvB,uDAAuD;IAC/C,GAAG,CAAU;IAErB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC;QAC/C,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,gBACE,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;YAGrC,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;gBACtE,gEAAS,KAAK,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAE,MAAM,EAAC,eAAe,GAAG;gBAC7D,gEAAS,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,iBAAiB,GAAG;gBAC/D,6DAAS,KAAK,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CACjE;YACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAC3B,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBAChC,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBAC1D,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/D,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ValveState = 'open' | 'closed' | 'transit' | 'fault';\nexport type ValveOrientation = 'horizontal' | 'vertical';\nexport type ValveSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-valve',\n  styleUrl: 'valve.css',\n  shadow: true,\n})\nexport class IndValve {\n  /** Valve state. `transit` is mid-stroke (transitioning between open and closed). */\n  @Prop({ reflect: true }) state: ValveState = 'closed';\n\n  /** Render the symbol along the flow direction. */\n  @Prop({ reflect: true }) orientation: ValveOrientation = 'horizontal';\n\n  /** Visual size. */\n  @Prop({ reflect: true }) size: ValveSize = 'md';\n\n  /** Human label rendered as caption (e.g. \"Discharge valve\"). */\n  @Prop() label?: string;\n\n  /** Equipment tag rendered as caption (e.g. \"V-12\"). */\n  @Prop() tag?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'valve';\n    return (\n      <Host\n        role=\"img\"\n        aria-label={`${name} — ${this.state}`}\n      >\n        {/* ISA-5.1 bowtie symbol. ViewBox is 32×16 so the natural ratio is 2:1. */}\n        <svg class=\"symbol\" part=\"symbol\" viewBox=\"0 0 32 16\" aria-hidden=\"true\">\n          <polygon class=\"left\"  part=\"left\"  points=\"2,2 2,14 16,8\" />\n          <polygon class=\"right\" part=\"right\" points=\"30,2 30,14 16,8\" />\n          <line    class=\"stem\"  part=\"stem\"  x1=\"16\" y1=\"2\" x2=\"16\" y2=\"14\" />\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\" part=\"caption\">\n            {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/fill-row/fill-row.css

@@ -0,0 +1,70 @@
+:host {
+  display: grid;
+  grid-template-columns: max-content minmax(80px, 1.2fr) minmax(160px, 2fr) max-content max-content auto;
+  gap: var(--ind-spacing-4, 8px);
+  align-items: center;
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);
+  background: var(--ind-surface-panel);
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-md, 3px);
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.tag {
+  font-family: var(--ind-font-family-mono);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  letter-spacing: 0.04em;
+  min-width: 32px;
+}
+
+.label {
+  font-size: var(--ind-font-size-base, 12px);
+}
+
+.progress {
+  display: block;
+  width: 100%;
+}
+
+.value {
+  font-family: var(--ind-font-family-mono);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  font-size: var(--ind-font-size-md, 13px);
+  min-width: 52px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.severity {
+  font-size: var(--ind-font-size-md, 13px);
+  width: 16px;
+  text-align: center;
+  color: var(--ind-feedback-warning-bg, #f59e0b);
+  line-height: 1;
+}
+
+:host([variant="error"]) .severity {
+  color: var(--ind-feedback-error-bg, #dc2626);
+}
+
+.actions {
+  display: flex;
+  gap: var(--ind-spacing-2, 4px);
+}
+
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  :host {
+    grid-template-columns: max-content 1fr;
+    grid-template-rows: auto auto auto;
+  }
+  .progress { grid-column: 1 / -1; }
+  .value, .severity, .actions { grid-column: 1 / -1; }
+}

package/dist/collection/components/molecules/fill-row/fill-row.js

@@ -0,0 +1,181 @@
+import { h, Host } from "@stencil/core";
+export class IndFillRow {
+    /** Short ID rendered in mono (e.g. "F1", "TK-101"). */
+    tag;
+    /** Human description. */
+    label;
+    /** Current level. */
+    value = 0;
+    /** Max value. Default 100. */
+    max = 100;
+    /** Unit suffix on the numeric value (default `%`). */
+    unit = '%';
+    /** Drives the progress color and the severity glyph. */
+    variant = 'default';
+    /** Render the severity glyph between the value and the actions. */
+    severity = false;
+    render() {
+        return (h(Host, { key: '58a3405e85cdc048d8efe47d3f4c1c010bc94318' }, this.tag && h("span", { key: 'afe363e1253cbf40db6e9a61001a5654d2b3dfcd', class: "tag", part: "tag" }, this.tag), h("span", { key: '8854993e5011b07756acb62914e3cd8c16e17ea8', class: "label", part: "label" }, this.label), h("ind-progress", { key: '67b5c4f3d210cbf1df3dd3765b9293482e47d040', class: "progress", part: "progress", value: this.value, max: this.max, variant: this.variant, size: "sm" }), h("span", { key: '4bfde6d18d08e3bd8ede25a769b2776a8720a80b', class: "value", part: "value" }, Math.round(this.value), this.unit ? ' ' + this.unit : ''), this.severity && (h("span", { key: 'fd0cf71dd4cae3e5c4404da29e0232e42e6e3642', class: "severity", part: "severity", "aria-hidden": "true" }, "\u26A0")), h("span", { key: '663240206f948685c4235fbb9057450bc0874c0f', class: "actions", part: "actions" }, h("slot", { key: '7c924c36ed5e348bc7262a7c50c0673ce102b8ae' }))));
+    }
+    static get is() { return "ind-fill-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["fill-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["fill-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short ID rendered in mono (e.g. \"F1\", \"TK-101\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human description."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current level."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max value. Default 100."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unit suffix on the numeric value (default `%`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit",
+                "defaultValue": "'%'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FillRowVariant",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "FillRowVariant": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/molecules/fill-row/fill-row.tsx",
+                            "id": "src/components/molecules/fill-row/fill-row.tsx::FillRowVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drives the progress color and the severity glyph."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "severity": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the severity glyph between the value and the actions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=fill-row.js.map

package/dist/collection/components/molecules/fill-row/fill-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-row.js","sourceRoot":"","sources":["../../../../src/components/molecules/fill-row/fill-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,UAAU;IACrB,uDAAuD;IAC/C,GAAG,CAAU;IACrB,yBAAyB;IACjB,KAAK,CAAU;IACvB,qBAAqB;IACb,KAAK,GAAW,CAAC,CAAC;IAC1B,8BAA8B;IACtB,GAAG,GAAW,GAAG,CAAC;IAC1B,sDAAsD;IAC9C,IAAI,GAAW,GAAG,CAAC;IAC3B,wDAAwD;IAC/B,OAAO,GAAmB,SAAS,CAAC;IAC7D,mEAAmE;IAC3D,QAAQ,GAAY,KAAK,CAAC;IAElC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;YAC3D,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YACpD,qEACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAsD,EACpE,IAAI,EAAC,IAAI,GACT;YACF,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;gBAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CACpD;YACN,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,iBAAa,MAAM,aAAS,CACnE;YACD,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBAClC,8DAAQ,CACH,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type FillRowVariant = 'default' | 'success' | 'warning' | 'error';\n\n@Component({\n  tag: 'ind-fill-row',\n  styleUrl: 'fill-row.css',\n  shadow: true,\n})\nexport class IndFillRow {\n  /** Short ID rendered in mono (e.g. \"F1\", \"TK-101\"). */\n  @Prop() tag?: string;\n  /** Human description. */\n  @Prop() label!: string;\n  /** Current level. */\n  @Prop() value: number = 0;\n  /** Max value. Default 100. */\n  @Prop() max: number = 100;\n  /** Unit suffix on the numeric value (default `%`). */\n  @Prop() unit: string = '%';\n  /** Drives the progress color and the severity glyph. */\n  @Prop({ reflect: true }) variant: FillRowVariant = 'default';\n  /** Render the severity glyph between the value and the actions. */\n  @Prop() severity: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n        <span class=\"label\" part=\"label\">{this.label}</span>\n        <ind-progress\n          class=\"progress\"\n          part=\"progress\"\n          value={this.value}\n          max={this.max}\n          variant={this.variant as 'default' | 'success' | 'warning' | 'error'}\n          size=\"sm\"\n        />\n        <span class=\"value\" part=\"value\">\n          {Math.round(this.value)}{this.unit ? ' ' + this.unit : ''}\n        </span>\n        {this.severity && (\n          <span class=\"severity\" part=\"severity\" aria-hidden=\"true\">⚠</span>\n        )}\n        <span class=\"actions\" part=\"actions\">\n          <slot />\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,53 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-3, 6px);
+  padding: var(--ind-spacing-5, 12px);
+  background: var(--ind-surface-panel);
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-md, 3px);
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  min-width: 160px;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.title {
+  font-size: var(--ind-font-size-xs, 10px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+.state-label {
+  font-size: var(--ind-font-size-xl, 16px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  line-height: 1;
+}
+
+.detail {
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+/* Bold colored label per state — matches the dot color so the card
+ * reads at a glance across a 4-up grid. */
+:host([state="running"])     .state-label { color: var(--ind-state-running-bg,     #16a34a); }
+:host([state="fault"])       .state-label { color: var(--ind-state-fault-bg,       #dc2626); }
+:host([state="warning"])     .state-label { color: var(--ind-state-warning-bg,     #f59e0b); }
+:host([state="maintenance"]) .state-label { color: var(--ind-state-maintenance-bg, #2563eb); }
+:host([state="stopped"])     .state-label { color: var(--ind-surface-text-secondary); }
+:host([state="unknown"])     .state-label { color: var(--ind-surface-text-muted); }
+
+/* Fault card glows subtly as a visual cue, even without blinking. */
+:host([state="fault"]) {
+  border-color: var(--ind-state-fault-bg, #dc2626);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);
+}