@ind-ds/core 0.1.1 → 0.2.0

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

@@ -0,0 +1,166 @@
+import { h, Host } from "@stencil/core";
+export class IndEstop {
+    /** Whether the mushroom button is latched (pressed/engaged). */
+    engaged = false;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible caption. Defaults to "EMERGENCY STOP". */
+    label;
+    /** Fires when pressed to engage the stop. */
+    indActivate;
+    /** Fires when reset (twist-release) from an engaged state. */
+    indReset;
+    press = () => {
+        if (this.disabled)
+            return;
+        if (this.engaged) {
+            this.engaged = false;
+            this.indReset.emit();
+        }
+        else {
+            this.engaged = true;
+            this.indActivate.emit();
+        }
+    };
+    render() {
+        const caption = this.label ?? 'EMERGENCY STOP';
+        return (h(Host, { key: '1d89daec6d582afdf9a80afab71bd74fa581b9fb' }, h("button", { key: 'e143f5cdcbf6128f14aa2be18d9e14484dc6848f', type: "button", class: "btn", part: "button", "aria-pressed": this.engaged ? 'true' : 'false', "aria-label": `${caption}${this.engaged ? ' — engaged' : ''}`, disabled: this.disabled, onClick: this.press }, h("span", { key: '4080a0c05c0c0519aace4f85c1855d873bd5e98e', class: "ring", part: "ring" }, h("span", { key: '74ee36092a5d05adceded87b76276b245c191010', class: "mushroom", part: "mushroom" }))), h("span", { key: '1e055f18d1b651c7ebb7a86085976f54ffbf2787', class: "caption", part: "caption" }, caption)));
+    }
+    static get is() { return "ind-estop"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["estop.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["estop.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "engaged": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the mushroom button is latched (pressed/engaged)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "engaged",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EstopSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "EstopSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/estop/estop.tsx",
+                            "id": "src/components/atoms/estop/estop.tsx::EstopSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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": "Visible caption. Defaults to \"EMERGENCY STOP\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indActivate",
+                "name": "indActivate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when pressed to engage the stop."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indReset",
+                "name": "indReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when reset (twist-release) from an engaged state."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=estop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"estop.js","sourceRoot":"","sources":["../../../../src/components/atoms/estop/estop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,QAAQ;IACnB,gEAAgE;IACxB,OAAO,GAAY,KAAK,CAAC;IACjE,gBAAgB;IACS,QAAQ,GAAY,KAAK,CAAC;IACnD,YAAY;IACa,IAAI,GAAc,IAAI,CAAC;IAChD,qDAAqD;IAC7C,KAAK,CAAU;IAEvB,6CAA6C;IACpC,WAAW,CAAsB;IAC1C,8DAA8D;IACrD,QAAQ,CAAsB;IAE/B,KAAK,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,gBAAgB,CAAC;QAC/C,OAAO,CACL,EAAC,IAAI;YACH,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,GAAG,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAC3D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK;gBAEnB,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;oBAC5B,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAG,CACpC,CACA;YACT,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAAE,OAAO,CAAQ,CAChD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type EstopSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-estop',\n  styleUrl: 'estop.css',\n  shadow: true,\n})\nexport class IndEstop {\n  /** Whether the mushroom button is latched (pressed/engaged). */\n  @Prop({ mutable: true, reflect: true }) engaged: boolean = false;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: EstopSize = 'md';\n  /** Visible caption. Defaults to \"EMERGENCY STOP\". */\n  @Prop() label?: string;\n\n  /** Fires when pressed to engage the stop. */\n  @Event() indActivate!: EventEmitter<void>;\n  /** Fires when reset (twist-release) from an engaged state. */\n  @Event() indReset!: EventEmitter<void>;\n\n  private press = () => {\n    if (this.disabled) return;\n    if (this.engaged) {\n      this.engaged = false;\n      this.indReset.emit();\n    } else {\n      this.engaged = true;\n      this.indActivate.emit();\n    }\n  };\n\n  render() {\n    const caption = this.label ?? 'EMERGENCY STOP';\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"btn\"\n          part=\"button\"\n          aria-pressed={this.engaged ? 'true' : 'false'}\n          aria-label={`${caption}${this.engaged ? ' — engaged' : ''}`}\n          disabled={this.disabled}\n          onClick={this.press}\n        >\n          <span class=\"ring\" part=\"ring\">\n            <span class=\"mushroom\" part=\"mushroom\" />\n          </span>\n        </button>\n        <span class=\"caption\" part=\"caption\">{caption}</span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,11 @@
+.hub {
+  fill: var(--_stroke);
+}
+
+:host([state="running"]) .spin {
+  animation: ind-fan-spin 0.9s linear infinite;
+}
+
+@keyframes ind-fan-spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+export class IndFan {
+    /** Process state. `running` spins the blades. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "FN-301"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'fan';
+        return (h(Host, { key: '05348b06294a71319dbf2ac7bcde6357b1f2ddda', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '8cd4aa8242c8aa5581ec910accf1bd6743307cf6', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: '992d9e08891850d4d68580b6c5abc575738b2e14', class: "body", cx: "24", cy: "24", r: "16" }), h("g", { key: '31c5fe5dbbf268482987e8f672853f1fe7d84e02', class: "spin", style: { transformOrigin: '24px 24px' } }, h("path", { key: '0563126793186c4757fbb48c44305a2037392d7c', class: "accent", d: "M24 24 C30 14, 34 18, 24 24 Z" }), h("path", { key: 'cb14c0e5f38f73ec35a2294ba6ebd8f4344645e3', class: "accent", d: "M24 24 C34 30, 30 34, 24 24 Z" }), h("path", { key: '8cc12dc34bd9123cb543fdcb6e78688493dc5bf2', class: "accent", d: "M24 24 C18 34, 14 30, 24 24 Z" }), h("path", { key: '43c40edef2152d78fb88d32044fa78b08d85c44e', class: "accent", d: "M24 24 C14 18, 18 14, 24 24 Z" })), h("circle", { key: '47925754f8e411ac8f4210d4293ee03350391f9a', class: "hub", cx: "24", cy: "24", r: "2.5" })), (this.tag || this.label) && (h("div", { key: '2da1231dc992891380181bcddceb289eeb9de7cc', class: "caption" }, this.tag && h("span", { key: 'c8638a92c2c5fbdc9956cf2055f8663815b49f74', class: "tag" }, this.tag), this.label && h("span", { key: '12766db2ca33e5d180dd23b1962d1bd12f9bcefa', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-fan"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "fan.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "fan.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` spins the blades."
+                },
+                "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. \"FN-301\")."
+                },
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=fan.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fan.js","sourceRoot":"","sources":["../../../../src/components/atoms/fan/fan.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;IACjB,iDAAiD;IACxB,KAAK,GAAmB,SAAS,CAAC;IAC3D,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,qCAAqC;IAC7B,GAAG,CAAU;IACrB,mBAAmB;IACX,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC;QAC7C,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;YACpD,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,0DAAG,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE;oBACrD,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,GAAG;oBACzD,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,GAAG;oBACzD,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,GAAG;oBACzD,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,GAAG,CACvD;gBACJ,+DAAQ,KAAK,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG,CAC1C;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-fan',\n  styleUrls: ['../_equipment/equipment.css', 'fan.css'],\n  shadow: true,\n})\nexport class IndFan {\n  /** Process state. `running` spins the blades. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"FN-301\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'fan';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"24\" cy=\"24\" r=\"16\" />\n          <g class=\"spin\" style={{ transformOrigin: '24px 24px' }}>\n            <path class=\"accent\" d=\"M24 24 C30 14, 34 18, 24 24 Z\" />\n            <path class=\"accent\" d=\"M24 24 C34 30, 30 34, 24 24 Z\" />\n            <path class=\"accent\" d=\"M24 24 C18 34, 14 30, 24 24 Z\" />\n            <path class=\"accent\" d=\"M24 24 C14 18, 18 14, 24 24 Z\" />\n          </g>\n          <circle class=\"hub\" cx=\"24\" cy=\"24\" r=\"2.5\" />\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"]}

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

@@ -0,0 +1,70 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_w: 120px;
+}
+
+:host([size="sm"]) { --_w: 84px; }
+:host([size="md"]) { --_w: 120px; }
+:host([size="lg"]) { --_w: 168px; }
+
+.gauge {
+  width: var(--_w);
+  height: var(--_w);
+  display: block;
+}
+
+.track {
+  fill: none;
+  stroke: var(--ind-surface-border-default, #2a3340);
+  stroke-width: 8;
+  stroke-linecap: round;
+}
+
+.zone {
+  fill: none;
+  stroke-width: 8;
+  stroke-linecap: butt;
+}
+
+.needle {
+  stroke: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  transition: all var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);
+}
+
+.hub {
+  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+}
+
+.readout {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 3px;
+  margin-top: -28%;
+}
+
+.number {
+  font-family: var(--ind-font-family-mono, ui-monospace, monospace);
+  font-size: var(--ind-font-size-xl, 16px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+:host([size="lg"]) .number { font-size: var(--ind-font-size-2xl, 20px); }
+
+.unit { font-size: var(--ind-font-size-xs, 10px); color: var(--ind-surface-text-muted, #7a8694); }
+
+.label {
+  margin-top: var(--ind-spacing-2, 4px);
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .needle { transition: none; }
+}

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

@@ -0,0 +1,237 @@
+import { h, Host } from "@stencil/core";
+export class IndGauge {
+    /** Current value. */
+    value = 0;
+    /** Scale minimum. */
+    min = 0;
+    /** Scale maximum. */
+    max = 100;
+    /** Colored zones along the arc (e.g. green/amber/red bands). Pass as a property. */
+    zones = [];
+    /** Engineering unit. */
+    unit;
+    /** Label / tag rendered under the value. */
+    label;
+    /** Decimal places for the value. */
+    precision;
+    /** Size. */
+    size = 'md';
+    // 270° sweep from 135° (bottom-left) clockwise to 405°/45° (bottom-right).
+    startAngle = 135;
+    sweep = 270;
+    cx = 50;
+    cy = 50;
+    r = 40;
+    valueToAngle(v) {
+        const span = this.max - this.min || 1;
+        const ratio = Math.min(1, Math.max(0, (v - this.min) / span));
+        return this.startAngle + ratio * this.sweep;
+    }
+    polar(angleDeg, radius = this.r) {
+        const a = (angleDeg * Math.PI) / 180;
+        return { x: this.cx + radius * Math.cos(a), y: this.cy + radius * Math.sin(a) };
+    }
+    arc(fromV, toV, radius = this.r) {
+        const a0 = this.valueToAngle(fromV);
+        const a1 = this.valueToAngle(toV);
+        const p0 = this.polar(a0, radius);
+        const p1 = this.polar(a1, radius);
+        const large = a1 - a0 > 180 ? 1 : 0;
+        return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A ${radius} ${radius} 0 ${large} 1 ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;
+    }
+    formatted() {
+        if (!Number.isFinite(this.value))
+            return '--';
+        return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);
+    }
+    render() {
+        const needleAngle = this.valueToAngle(this.value);
+        const tip = this.polar(needleAngle, this.r - 6);
+        const name = this.label ?? 'gauge';
+        return (h(Host, { key: '1dcc7b4a14620e9e67f62b4bb839de1c73c9eb28', role: "meter", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": `${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}` }, h("svg", { key: '835dadb8fe0ffcab0bd4f3dc62d7049a6a9d04dd', class: "gauge", part: "gauge", viewBox: "0 0 100 100", "aria-hidden": "true" }, h("path", { key: '440f32cf9718f31589b1c3320c3e5db538a5aaaf', class: "track", part: "track", d: this.arc(this.min, this.max) }), (this.zones ?? []).map((z) => (h("path", { class: "zone", d: this.arc(z.from, z.to), style: { stroke: z.color } }))), h("line", { key: 'd7d4f7fc4137c2763d3d51f2e33bd4f833e8f349', class: "needle", part: "needle", x1: this.cx, y1: this.cy, x2: tip.x, y2: tip.y }), h("circle", { key: 'f8e497fd70ab2f68f12d867efc41b45e8477ee7e', class: "hub", cx: this.cx, cy: this.cy, r: "3.5" })), h("div", { key: 'e71f4f120c4a8618c54a4287a47e292375a1acad', class: "readout", part: "readout" }, h("span", { key: '7cc72fe3205519521e18eb1cbc9d374101704d2d', class: "number", part: "number" }, this.formatted()), this.unit && h("span", { key: '2309b9b1c009a726af38381e8ad05aa8365f4109', class: "unit", part: "unit" }, this.unit)), this.label && h("span", { key: '2d7c584f453a5006f75d6b5f03af2d1e4a200a59', class: "label", part: "label" }, this.label)));
+    }
+    static get is() { return "ind-gauge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gauge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gauge.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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scale minimum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scale maximum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "zones": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GaugeZone[]",
+                    "resolved": "GaugeZone[]",
+                    "references": {
+                        "GaugeZone": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/gauge/gauge.tsx",
+                            "id": "src/components/atoms/gauge/gauge.tsx::GaugeZone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colored zones along the arc (e.g. green/amber/red bands). Pass as a property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Engineering unit."
+                },
+                "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": "Label / tag rendered under the value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal places for the value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GaugeSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "GaugeSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/gauge/gauge.tsx",
+                            "id": "src/components/atoms/gauge/gauge.tsx::GaugeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gauge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","sourceRoot":"","sources":["../../../../src/components/atoms/gauge/gauge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface GaugeZone {\n  from: number;\n  to: number;\n  /** CSS color or a state keyword resolved to a token. */\n  color: string;\n}\n\nexport type GaugeSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-gauge',\n  styleUrl: 'gauge.css',\n  shadow: true,\n})\nexport class IndGauge {\n  /** Current value. */\n  @Prop() value: number = 0;\n  /** Scale minimum. */\n  @Prop() min: number = 0;\n  /** Scale maximum. */\n  @Prop() max: number = 100;\n  /** Colored zones along the arc (e.g. green/amber/red bands). Pass as a property. */\n  @Prop() zones: GaugeZone[] = [];\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Label / tag rendered under the value. */\n  @Prop() label?: string;\n  /** Decimal places for the value. */\n  @Prop() precision?: number;\n  /** Size. */\n  @Prop({ reflect: true }) size: GaugeSize = 'md';\n\n  // 270° sweep from 135° (bottom-left) clockwise to 405°/45° (bottom-right).\n  private readonly startAngle = 135;\n  private readonly sweep = 270;\n  private readonly cx = 50;\n  private readonly cy = 50;\n  private readonly r = 40;\n\n  private valueToAngle(v: number): number {\n    const span = this.max - this.min || 1;\n    const ratio = Math.min(1, Math.max(0, (v - this.min) / span));\n    return this.startAngle + ratio * this.sweep;\n  }\n\n  private polar(angleDeg: number, radius = this.r): { x: number; y: number } {\n    const a = (angleDeg * Math.PI) / 180;\n    return { x: this.cx + radius * Math.cos(a), y: this.cy + radius * Math.sin(a) };\n  }\n\n  private arc(fromV: number, toV: number, radius = this.r): string {\n    const a0 = this.valueToAngle(fromV);\n    const a1 = this.valueToAngle(toV);\n    const p0 = this.polar(a0, radius);\n    const p1 = this.polar(a1, radius);\n    const large = a1 - a0 > 180 ? 1 : 0;\n    return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A ${radius} ${radius} 0 ${large} 1 ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;\n  }\n\n  private formatted(): string {\n    if (!Number.isFinite(this.value)) return '--';\n    return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);\n  }\n\n  render() {\n    const needleAngle = this.valueToAngle(this.value);\n    const tip = this.polar(needleAngle, this.r - 6);\n    const name = this.label ?? 'gauge';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={this.value}\n        aria-valuemin={this.min}\n        aria-valuemax={this.max}\n        aria-label={`${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}`}\n      >\n        <svg class=\"gauge\" part=\"gauge\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <path class=\"track\" part=\"track\" d={this.arc(this.min, this.max)} />\n          {(this.zones ?? []).map((z) => (\n            <path class=\"zone\" d={this.arc(z.from, z.to)} style={{ stroke: z.color }} />\n          ))}\n          <line class=\"needle\" part=\"needle\" x1={this.cx} y1={this.cy} x2={tip.x} y2={tip.y} />\n          <circle class=\"hub\" cx={this.cx} cy={this.cy} r=\"3.5\" />\n        </svg>\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        </div>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"]}