@ind-ds/core 0.1.1 → 0.2.1

package/dist/collection/components/atoms/process-symbol/process-symbol.js

@@ -0,0 +1,163 @@
+import { h, Host } from "@stencil/core";
+export class IndProcessSymbol {
+    /** ISA-5.1 instrument balloon shape. */
+    shape = 'circle';
+    /** Status coloring. */
+    state = 'normal';
+    /** Tag text rendered inside (e.g. "PT 101"). */
+    tag;
+    /** Caption rendered below the symbol. */
+    label;
+    /** Size. */
+    size = 'md';
+    shapeEl() {
+        switch (this.shape) {
+            case 'square':
+                return h("rect", { class: "outline", part: "outline", x: "4", y: "4", width: "40", height: "40", rx: "2" });
+            case 'diamond':
+                return h("polygon", { class: "outline", part: "outline", points: "24,3 45,24 24,45 3,24" });
+            case 'hexagon':
+                return h("polygon", { class: "outline", part: "outline", points: "14,6 34,6 45,24 34,42 14,42 3,24" });
+            case 'circle':
+            default:
+                return h("circle", { class: "outline", part: "outline", cx: "24", cy: "24", r: "20" });
+        }
+    }
+    render() {
+        const name = this.label ?? this.tag ?? 'instrument';
+        return (h(Host, { key: '24aef7364a542acddb8cb29fbf404faf7aa8972e', role: "img", "aria-label": `${name}${this.state !== 'normal' ? ' — ' + this.state : ''}` }, h("svg", { key: 'c5c4936c45d0d0ace90a5b86a593ae3f97c9f599', class: "symbol", part: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, this.shapeEl(), this.tag && (h("text", { key: '987ede87e53bd367f7af62f7903eef1c8661330a', class: "tag", x: "24", y: "24", "text-anchor": "middle", "dominant-baseline": "central" }, this.tag))), this.label && h("span", { key: '0ba6f143afefa065bf938fcc79cbf2faef393e51', class: "label", part: "label" }, this.label)));
+    }
+    static get is() { return "ind-process-symbol"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["process-symbol.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["process-symbol.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProcessSymbolShape",
+                    "resolved": "\"circle\" | \"diamond\" | \"hexagon\" | \"square\"",
+                    "references": {
+                        "ProcessSymbolShape": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/process-symbol/process-symbol.tsx",
+                            "id": "src/components/atoms/process-symbol/process-symbol.tsx::ProcessSymbolShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ISA-5.1 instrument balloon shape."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'circle'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProcessSymbolState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"normal\" | \"running\" | \"warning\"",
+                    "references": {
+                        "ProcessSymbolState": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/process-symbol/process-symbol.tsx",
+                            "id": "src/components/atoms/process-symbol/process-symbol.tsx::ProcessSymbolState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status coloring."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'normal'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag text rendered inside (e.g. \"PT 101\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption rendered below the symbol."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProcessSymbolSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ProcessSymbolSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/process-symbol/process-symbol.tsx",
+                            "id": "src/components/atoms/process-symbol/process-symbol.tsx::ProcessSymbolSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=process-symbol.js.map

package/dist/collection/components/atoms/process-symbol/process-symbol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-symbol.js","sourceRoot":"","sources":["../../../../src/components/atoms/process-symbol/process-symbol.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAWzD,MAAM,OAAO,gBAAgB;IAC3B,wCAAwC;IACf,KAAK,GAAuB,QAAQ,CAAC;IAC9D,uBAAuB;IACE,KAAK,GAAuB,QAAQ,CAAC;IAC9D,gDAAgD;IACxC,GAAG,CAAU;IACrB,yCAAyC;IACjC,KAAK,CAAU;IACvB,YAAY;IACa,IAAI,GAAsB,IAAI,CAAC;IAEhD,OAAO;QACb,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,QAAQ;gBACX,OAAO,YAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG,CAAC;YAC3F,KAAK,SAAS;gBACZ,OAAO,eAAS,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,uBAAuB,GAAG,CAAC;YACnF,KAAK,SAAS;gBACZ,OAAO,eAAS,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,kCAAkC,GAAG,CAAC;YAC9F,KAAK,QAAQ,CAAC;YACd;gBACE,OAAO,cAAQ,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,CAAC;QAC5E,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,YAAY,CAAC;QACpD,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;YACxF,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;gBACrE,IAAI,CAAC,OAAO,EAAE;gBACd,IAAI,CAAC,GAAG,IAAI,CACX,6DAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,iBAAa,QAAQ,uBAAmB,SAAS,IAAE,IAAI,CAAC,GAAG,CAAQ,CACnG,CACG;YACL,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProcessSymbolShape = 'circle' | 'square' | 'diamond' | 'hexagon';\nexport type ProcessSymbolState = 'normal' | 'running' | 'fault' | 'warning' | 'maintenance';\nexport type ProcessSymbolSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-process-symbol',\n  styleUrl: 'process-symbol.css',\n  shadow: true,\n})\nexport class IndProcessSymbol {\n  /** ISA-5.1 instrument balloon shape. */\n  @Prop({ reflect: true }) shape: ProcessSymbolShape = 'circle';\n  /** Status coloring. */\n  @Prop({ reflect: true }) state: ProcessSymbolState = 'normal';\n  /** Tag text rendered inside (e.g. \"PT 101\"). */\n  @Prop() tag?: string;\n  /** Caption rendered below the symbol. */\n  @Prop() label?: string;\n  /** Size. */\n  @Prop({ reflect: true }) size: ProcessSymbolSize = 'md';\n\n  private shapeEl() {\n    switch (this.shape) {\n      case 'square':\n        return <rect class=\"outline\" part=\"outline\" x=\"4\" y=\"4\" width=\"40\" height=\"40\" rx=\"2\" />;\n      case 'diamond':\n        return <polygon class=\"outline\" part=\"outline\" points=\"24,3 45,24 24,45 3,24\" />;\n      case 'hexagon':\n        return <polygon class=\"outline\" part=\"outline\" points=\"14,6 34,6 45,24 34,42 14,42 3,24\" />;\n      case 'circle':\n      default:\n        return <circle class=\"outline\" part=\"outline\" cx=\"24\" cy=\"24\" r=\"20\" />;\n    }\n  }\n\n  render() {\n    const name = this.label ?? this.tag ?? 'instrument';\n    return (\n      <Host role=\"img\" aria-label={`${name}${this.state !== 'normal' ? ' — ' + this.state : ''}`}>\n        <svg class=\"symbol\" part=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          {this.shapeEl()}\n          {this.tag && (\n            <text class=\"tag\" x=\"24\" y=\"24\" text-anchor=\"middle\" dominant-baseline=\"central\">{this.tag}</text>\n          )}\n        </svg>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,69 +0,0 @@
-:host {
-  display: block;
-  font-family: var(--ind-font-family-sans);
-  font-size: var(--ind-font-size-sm, 11px);
-  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
-  --_h: 8px;
-  --_fill: var(--ind-button-primary-bg, #2563eb);
-}
-
-:host([size="sm"]) { --_h: 4px; }
-:host([size="md"]) { --_h: 8px; }
-:host([size="lg"]) { --_h: 12px; }
-
-:host([variant="success"]) { --_fill: var(--ind-feedback-success-bg, #16a34a); }
-:host([variant="warning"]) { --_fill: var(--ind-feedback-warning-bg, #f59e0b); }
-:host([variant="error"])   { --_fill: var(--ind-feedback-error-bg, #dc2626); }
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: var(--ind-spacing-3, 6px);
-  margin-bottom: var(--ind-spacing-2, 4px);
-}
-
-.label {
-  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
-}
-
-.value {
-  font-family: var(--ind-font-family-mono);
-  font-weight: var(--ind-font-weight-semibold, 600);
-  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
-}
-
-.track {
-  position: relative;
-  width: 100%;
-  height: var(--_h);
-  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
-  border: 1px solid var(--ind-surface-border-default, #2a3340);
-  border-radius: var(--ind-radius-sm, 2px);
-  overflow: hidden;
-}
-
-.fill {
-  display: block;
-  height: 100%;
-  background: var(--_fill);
-  transition: width var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);
-}
-
-:host([indeterminate]) .fill {
-  width: 30%;
-  animation: ind-progress-march 1.4s ease-in-out infinite;
-}
-
-@keyframes ind-progress-march {
-  0%   { margin-left: -30%; }
-  100% { margin-left: 100%; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host([indeterminate]) .fill {
-    animation: none;
-    width: 100%;
-    opacity: 0.5;
-  }
-}

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

@@ -29,7 +29,7 @@ export class IndProgress {
     }
     render() {
         const pct = this.percent();
-        return (h(Host, { key: '0e74d2952b1fe8b2356927e0e38adbcb72d863c6', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label }, (this.label || this.showValue) && (h("div", { key: '1fbeb6fed63ac3fb1cb830408d6ee851ec9fe989', class: "header", part: "header" }, this.label && h("span", { key: '1a2a0e6bb58c4e69b5b19587906e7c53720587cb', class: "label", part: "label" }, this.label), this.showValue && !this.indeterminate && (h("span", { key: '7fa1c9ce1e0ec68abc1b478cfb373af8266467a3', class: "value", part: "value" }, this.valueLabel())))), h("div", { key: 'e821a5f203432e33199d111ba807eb6106068b14', class: "track", part: "track" }, h("div", { key: '88e1e2728d12adea9220b3cf8f68072e85bdc1dd', class: "fill", part: "fill", style: this.indeterminate ? undefined : { width: `${pct}%` } }))));
+        return (h(Host, { key: '97a35a339db17e295b11d1fe68f0024a44a5dc26', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label }, (this.label || this.showValue) && (h("div", { key: 'bfc9bc977d571e39c01c1342e6aa3c1897284f48', class: "header", part: "header" }, this.label && h("span", { key: '276b5bee53c566109d62946546320e85e61ea5f2', class: "label", part: "label" }, this.label), this.showValue && !this.indeterminate && (h("span", { key: 'dcbe59da993f2f88989e352dcf3aaeb3f6d1e286', class: "value", part: "value" }, this.valueLabel())))), h("div", { key: '3ace595c028a654ae027d44a96b738bf923bfcbf', class: "track", part: "track" }, h("div", { key: 'db526a2dc6a655090cf338f405415f61912cc4c2', class: "fill", part: "fill", style: this.indeterminate ? undefined : { width: `${pct}%` } }))));
     }
     static get is() { return "ind-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/progress-ring/progress-ring.js

@@ -0,0 +1,220 @@
+import { h, Host } from "@stencil/core";
+export class IndProgressRing {
+    /** Current value (0–`max`). */
+    value = 0;
+    /** Max value. */
+    max = 100;
+    /** Color intent. */
+    variant = 'default';
+    /** Size. */
+    size = 'md';
+    /** Indeterminate spinner (no value). */
+    indeterminate = false;
+    /** Show the percentage in the center. */
+    showValue = false;
+    /** Optional unit/suffix when showing the value (defaults to %). */
+    unit;
+    /** Accessible label. */
+    label;
+    r = 16;
+    cx = 20;
+    percent() {
+        if (this.max <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    render() {
+        const circumference = 2 * Math.PI * this.r;
+        const pct = this.percent();
+        const offset = circumference * (1 - pct / 100);
+        const centerText = this.unit ? `${Math.round(pct)}${this.unit}` : `${Math.round(pct)}%`;
+        return (h(Host, { key: 'e117120c3cc822479f06ba401cb850d23d2de8ca', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.label }, h("svg", { key: 'a695b3827b8bf196340793940581fbd09c63d81f', class: "ring", part: "ring", viewBox: "0 0 40 40", "aria-hidden": "true" }, h("circle", { key: 'f6441867ee9f600ffd975d552f7e39a4c96ae841', class: "track", part: "track", cx: this.cx, cy: this.cx, r: this.r }), h("circle", { key: '1768950bd68071f2e0a2080d7be4891db0f177ce', class: "bar", part: "bar", cx: this.cx, cy: this.cx, r: this.r, "stroke-dasharray": circumference, "stroke-dashoffset": this.indeterminate ? circumference * 0.7 : offset, transform: `rotate(-90 ${this.cx} ${this.cx})` })), this.showValue && !this.indeterminate && (h("span", { key: '9b39b1e3056fe2e203cdd62fbafe0e0213c932a3', class: "value", part: "value" }, centerText))));
+    }
+    static get is() { return "ind-progress-ring"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress-ring.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress-ring.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (0\u2013`max`)."
+                },
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProgressRingVariant",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ProgressRingVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/progress-ring/progress-ring.tsx",
+                            "id": "src/components/atoms/progress-ring/progress-ring.tsx::ProgressRingVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color intent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProgressRingSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ProgressRingSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/progress-ring/progress-ring.tsx",
+                            "id": "src/components/atoms/progress-ring/progress-ring.tsx::ProgressRingSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate spinner (no value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the percentage in the center."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional unit/suffix when showing the value (defaults to %)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=progress-ring.js.map

package/dist/collection/components/atoms/progress-ring/progress-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-ring.js","sourceRoot":"","sources":["../../../../src/components/atoms/progress-ring/progress-ring.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProgressRingVariant = 'default' | 'success' | 'warning' | 'error';\nexport type ProgressRingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-progress-ring',\n  styleUrl: 'progress-ring.css',\n  shadow: true,\n})\nexport class IndProgressRing {\n  /** Current value (0–`max`). */\n  @Prop() value: number = 0;\n  /** Max value. */\n  @Prop() max: number = 100;\n  /** Color intent. */\n  @Prop({ reflect: true }) variant: ProgressRingVariant = 'default';\n  /** Size. */\n  @Prop({ reflect: true }) size: ProgressRingSize = 'md';\n  /** Indeterminate spinner (no value). */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  /** Show the percentage in the center. */\n  @Prop() showValue: boolean = false;\n  /** Optional unit/suffix when showing the value (defaults to %). */\n  @Prop() unit?: string;\n  /** Accessible label. */\n  @Prop() label?: string;\n\n  private readonly r = 16;\n  private readonly cx = 20;\n\n  private percent(): number {\n    if (this.max <= 0) return 0;\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100));\n  }\n\n  render() {\n    const circumference = 2 * Math.PI * this.r;\n    const pct = this.percent();\n    const offset = circumference * (1 - pct / 100);\n    const centerText = this.unit ? `${Math.round(pct)}${this.unit}` : `${Math.round(pct)}%`;\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-valuenow={this.indeterminate ? undefined : Math.round(pct)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={this.label}\n      >\n        <svg class=\"ring\" part=\"ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n          <circle class=\"track\" part=\"track\" cx={this.cx} cy={this.cx} r={this.r} />\n          <circle\n            class=\"bar\"\n            part=\"bar\"\n            cx={this.cx}\n            cy={this.cx}\n            r={this.r}\n            stroke-dasharray={circumference}\n            stroke-dashoffset={this.indeterminate ? circumference * 0.7 : offset}\n            transform={`rotate(-90 ${this.cx} ${this.cx})`}\n          />\n        </svg>\n        {this.showValue && !this.indeterminate && (\n          <span class=\"value\" part=\"value\">{centerText}</span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+export class IndPump {
+    /** Process state. `running` animates the impeller. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "P-101"). */
+    tag;
+    /** Human label (e.g. "Feed pump"). */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'pump';
+        return (h(Host, { key: 'c94d1f1822da5bb07293f43541481de5f3cc52dd', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '183f70a7dd2677df2f364ba67578f780422fbf69', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: 'e81a8a03649e3a8e17327f6d27992613393e381d', class: "body", cx: "22", cy: "24", r: "14" }), h("polygon", { key: '55f3562be5b500dfb5dcf49833fa2d537d05555f', class: "accent", points: "22,24 38,16 38,32" }), h("g", { key: 'f8db2b0032ba389cbad360c4a5b60ac286f1cddb', class: "spin", style: { transformOrigin: '22px 24px' } }, h("line", { key: 'ca98c47805ecd193cd74ebc7704b7056ad6dd7b1', class: "stroke", x1: "22", y1: "14", x2: "22", y2: "34" }), h("line", { key: '4b0cdfa1d2ddd30328f16fb97a12c87b9f900a49', class: "stroke", x1: "12", y1: "24", x2: "32", y2: "24" }))), (this.tag || this.label) && (h("div", { key: '6eae6c4f9de61beaadc795f265901fd60ce52700', class: "caption" }, this.tag && h("span", { key: 'd0d7b89021ccac34de8a5c7494e0ba93b2d97389', class: "tag" }, this.tag), this.label && h("span", { key: '3e594c3bae463c699a91f05f5cb00d01ad278c88', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-pump"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "pump.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "pump.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "EquipmentState": {
+                            "location": "import",
+                            "path": "../_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentState",
+                            "referenceLocation": "EquipmentState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Process state. `running` animates the impeller."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "EquipmentSize": {
+                            "location": "import",
+                            "path": "../_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentSize",
+                            "referenceLocation": "EquipmentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag (e.g. \"P-101\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human label (e.g. \"Feed pump\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pump.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pump.js","sourceRoot":"","sources":["../../../../src/components/atoms/pump/pump.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,OAAO;IAClB,sDAAsD;IAC7B,KAAK,GAAmB,SAAS,CAAC;IAC3D,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,oCAAoC;IAC5B,GAAG,CAAU;IACrB,sCAAsC;IAC9B,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC;QAC9C,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;YAEpD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;gBACxD,+DAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG;gBAC9C,gEAAS,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,mBAAmB,GAAG;gBACrD,0DAAG,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE;oBACrD,6DAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;oBACvD,6DAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CACrD,CACA;YACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAC3B,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBAC/C,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-pump',\n  styleUrls: ['../_equipment/equipment.css', 'pump.css'],\n  shadow: true,\n})\nexport class IndPump {\n  /** Process state. `running` animates the impeller. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"P-101\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Feed pump\"). */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'pump';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        {/* ISA centrifugal pump: circle body + triangular discharge. */}\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"22\" cy=\"24\" r=\"14\" />\n          <polygon class=\"accent\" points=\"22,24 38,16 38,32\" />\n          <g class=\"spin\" style={{ transformOrigin: '22px 24px' }}>\n            <line class=\"stroke\" x1=\"22\" y1=\"14\" x2=\"22\" y2=\"34\" />\n            <line class=\"stroke\" x1=\"12\" y1=\"24\" x2=\"32\" y2=\"24\" />\n          </g>\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}