@ind-ds/core 0.1.1 → 0.2.0

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.css

@@ -0,0 +1,7 @@
+:host([state="running"]) .spin {
+  animation: ind-pump-spin 1.6s linear infinite;
+}
+
+@keyframes ind-pump-spin {
+  to { transform: rotate(360deg); }
+}

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"]}

package/dist/collection/components/atoms/scara-canvas/scara-canvas.js

@@ -50,7 +50,7 @@ export class IndScaraCanvas {
         const wy = eey + wlen * Math.sin(j1r + j2r + j3r);
         const fmt = (n) => n.toFixed(1);
         const fmt0 = (n) => n.toFixed(0);
-        return (h(Host, { key: '0634f9fc9b197f66bf334c43c38e85c19066d090', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, h("svg", { key: 'c16607c36459cfad670b9ab913d46c23daf99883', viewBox: "0 0 320 220", part: "svg" }, h("circle", { key: '4fc539c4f5a658ffbb4a2a9594a864e04cd6e9fe', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), h("circle", { key: 'b493720a1f306e75dedf48dbd1ccb53850248230', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), h("line", { key: 'e28c6dc2ac8e73bac4381bba4dfb4cdb983097c7', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), h("line", { key: '5f460ffa1860dd1484100e972d043fd9a1491621', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), h("text", { key: 'f4cb4f52a3279f7924aea8d8e642a91be18c38a5', x: "24", y: cy + 3, class: "axis-label" }, "X"), h("text", { key: 'd3d18e860674380af133295b763c52bc0adf591b', x: cx + 4, y: "14", class: "axis-label" }, "Y"), h("line", { key: 'cfad2277909207ee8a0f99fc73cc823db20f4f8e', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), h("line", { key: '2ea11a2363123b2f6876179a2519dc38e9882126', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), h("line", { key: 'ad0a714279eea710da7e72a2141aab8165576c34', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), h("circle", { key: '89f2b18ca37ed7b0e67b0dee6ed28e0702cafa54', cx: cx, cy: cy, r: "8", class: "joint base" }), h("circle", { key: '44129fff9afa9becab60e20ab86933e4a111f854', cx: ex, cy: ey, r: "6", class: "joint elbow" }), h("circle", { key: 'bfa99f679b71e28f58c244267e5876c73c9cd6aa', cx: eex, cy: eey, r: "7", class: "joint effector" }), h("g", { key: '3753b9117625a70389a12c518330660d943a237f', class: "readout" }, h("text", { key: '420f362c46c764ea86fbf12128727600a1454e51', x: "10", y: "198" }, "J1 ", h("tspan", { key: '4f1afe52d964043034d93d02eb27b4fc4e7b7f3c' }, fmt(j1), "\u00B0")), h("text", { key: '185d3d66158b63322153d59a97d79792e5105957', x: "74", y: "198" }, "J2 ", h("tspan", { key: '9c6802f9ee9b2bb8ae3154880e2b7b1ffaf21167' }, fmt(j2), "\u00B0")), h("text", { key: 'b6d0a5aa47c925997cc7efa0c1cadd067f184243', x: "138", y: "198" }, "J3 ", h("tspan", { key: '5c06a24d477670deeceb6f80e3fb707b39b1b1e3' }, fmt(j3), "\u00B0")), h("text", { key: '99c96bf07d28555af967c4cb22a2856c1bdb46fb', x: "202", y: "198" }, "X ", h("tspan", { key: '4097b0a431bed9c608f5a43994ad213bfdd56663' }, fmt0(eex - cx))), h("text", { key: '56ccbac660ea805f260977c0e64fdf424f1d40fe', x: "254", y: "198" }, "Y ", h("tspan", { key: 'd4cfa6e17fc0da8494f8f526e7d5f27cf233dc22' }, fmt0(eey - cy)))))));
+        return (h(Host, { key: 'e220c57195ecb3c211223a9c678ad6a832c584cd', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, h("svg", { key: '7a04466cdcedb3e90bb45d0e86ee1d846f16d2fe', viewBox: "0 0 320 220", part: "svg" }, h("circle", { key: '9f1c589063eae5f24c60017e12b45afe5f44a714', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), h("circle", { key: 'a6228d89177c0dca40aaf37e85a08e59a04a2488', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), h("line", { key: '21e8c9bbf7cf19afa8dd88f909c94e1b458c928d', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), h("line", { key: 'bd2a5eca21b2e7fc73828a601870c730cc153bbd', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), h("text", { key: 'dab2bdb3cd08468e10220174102d9d198658b26b', x: "24", y: cy + 3, class: "axis-label" }, "X"), h("text", { key: '66581ab90a79151eeb64522a5525de10e151d0ad', x: cx + 4, y: "14", class: "axis-label" }, "Y"), h("line", { key: '0f8c1214d584f7c9e062927af7ca0425242e6e2b', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), h("line", { key: 'e19107929c6f87d3b3e47042f017a73193714b30', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), h("line", { key: 'a4cb08318e5c5df59494f6b38477307477313378', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), h("circle", { key: '25f7d34a6cc339b46a59437809bce8b7e5b4015b', cx: cx, cy: cy, r: "8", class: "joint base" }), h("circle", { key: '0fd90ea8c7b17654d927be0627ad2a0bcdb54c93', cx: ex, cy: ey, r: "6", class: "joint elbow" }), h("circle", { key: '528398188bef093e0d931bb23877022fd94900cf', cx: eex, cy: eey, r: "7", class: "joint effector" }), h("g", { key: '3fafeb02e9001d091436addbe37c53cfa5281df5', class: "readout" }, h("text", { key: '3d5c879baea3c1ef177fbd53153d846eb1158411', x: "10", y: "198" }, "J1 ", h("tspan", { key: 'df726f043b2a33357c2525c68a6f23861def214d' }, fmt(j1), "\u00B0")), h("text", { key: '68565b08ced6589ecd0a2d84cd738535ebe9fc63', x: "74", y: "198" }, "J2 ", h("tspan", { key: '65a013c07a5f9412b603557e39409d34ba5b4812' }, fmt(j2), "\u00B0")), h("text", { key: '88712594e3a0ac5e8e506ce467192d0bbcbf4a7f', x: "138", y: "198" }, "J3 ", h("tspan", { key: '31f1c81c381841747057257d6e4ee1af9d213dd8' }, fmt(j3), "\u00B0")), h("text", { key: '42d91dc495775b5bf29cc455e6d6404c72e2839f', x: "202", y: "198" }, "X ", h("tspan", { key: '00d7e9336de136e9ec0dd21ec85fd2a7a9b3ebf9' }, fmt0(eex - cx))), h("text", { key: '8ba2b283b6cd83942747e5df2c93d51b4dcb85bd', x: "254", y: "198" }, "Y ", h("tspan", { key: '767695ce2b72564dec42536bc618835070d4b1a7' }, fmt0(eey - cy)))))));
     }
     static get is() { return "ind-scara-canvas"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class IndSelect {
     };
     render() {
         const opts = this.parseOptions();
-        return (h(Host, { key: '283d3e72b726d0b04958b452629df4e579907f05' }, h("label", { key: 'dcbfc48d00c096cd6b709e4eb16b687cd07dd350', class: "wrap", part: "wrap" }, this.label && h("span", { key: '011fa524c21bfc749cedc70f6ec810ca90a73be2', class: "label", part: "label" }, this.label), h("span", { key: '8fc35e3db2cbf2bd9cb780d8e1e1ee395c022d1a', class: "field", part: "field" }, h("select", { key: 'a8944a8a82162e4f1b36e9384145dd4e0399afaf', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (h("option", { key: '8da45f0c3d932005210e61a216f7f9dfa9581767', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), h("span", { key: 'ca2db8e41ee4fe3a8ef1a51458189face0450541', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
+        return (h(Host, { key: 'b13f8d8cba0dcd5a588b0bbfc6cc776d7d793755' }, h("label", { key: '4de3dcf49f2545cebdf6e54e8b902d2bac7edb08', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'ed9e56dc5a8fbf6ed04c6f404c5b040124e9b45a', class: "label", part: "label" }, this.label), h("span", { key: 'f142c37fc9eda28a25416688f9e26126741eb067', class: "field", part: "field" }, h("select", { key: '0637c1a84e23da489c038a69d03677c715826a02', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (h("option", { key: '7d708bcabecc6295b6b2fe05080399612c7b0041', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), h("span", { key: 'a74a19b4fa9dd5593ae61e502340ad2839d188c9', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
     }
     static get is() { return "ind-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/selector-switch/selector-switch.css

@@ -0,0 +1,53 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+}
+
+.group-label {
+  font-size: var(--ind-font-size-xs, 10px);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.switch {
+  display: inline-flex;
+  padding: 2px;
+  background: var(--ind-surface-sunken, light-dark(#fff, #000));
+  border: 1px solid var(--ind-surface-border-default, #2a3340);
+  border-radius: var(--ind-radius-md, 3px);
+}
+
+.switch:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);
+  outline-offset: 2px;
+}
+
+.pos {
+  appearance: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: var(--ind-spacing-2, 4px) var(--ind-spacing-4, 8px);
+  font-family: inherit;
+  font-size: var(--ind-font-size-sm, 11px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  border-radius: var(--ind-radius-sm, 2px);
+  transition: background-color var(--ind-motion-duration-fast, 120ms) ease;
+}
+
+.pos:hover:not(:disabled) { color: var(--ind-surface-text-primary, #eef1f5); }
+
+.pos.is-active {
+  background: var(--ind-state-running-bg, #16a34a);
+  color: var(--ind-state-running-fg, #fff);
+}
+
+:host([disabled]) { opacity: 0.5; }
+.pos:disabled { cursor: not-allowed; }

package/dist/collection/components/atoms/selector-switch/selector-switch.js

@@ -0,0 +1,154 @@
+import { h, Host } from "@stencil/core";
+export class IndSelectorSwitch {
+    /** Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property. */
+    positions = [];
+    /** Selected position value. */
+    value;
+    /** Disabled. */
+    disabled = false;
+    /** Group label. */
+    label;
+    /** Fires when a position is selected. */
+    indChange;
+    select(value) {
+        if (this.disabled || value === this.value)
+            return;
+        this.value = value;
+        this.indChange.emit(value);
+    }
+    onKey = (e) => {
+        const pos = this.positions ?? [];
+        if (pos.length === 0)
+            return;
+        const idx = pos.findIndex((p) => p.value === this.value);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.select(pos[Math.min(pos.length - 1, idx + 1)]?.value ?? pos[0].value);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.select(pos[Math.max(0, idx - 1)]?.value ?? pos[0].value);
+        }
+    };
+    render() {
+        const positions = this.positions ?? [];
+        return (h(Host, { key: '9fdb192691776ef8692939e70840c679b495b002' }, this.label && h("span", { key: 'f2f1b7541177cae7565a435e3a3effaf1a96a314', class: "group-label", part: "group-label" }, this.label), h("div", { key: 'b197eca164ed807d22aaab23bb3686d59641137e', class: "switch", part: "switch", role: "radiogroup", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? undefined : '0', onKeyDown: this.onKey }, positions.map((p) => (h("button", { type: "button", class: { pos: true, 'is-active': p.value === this.value }, part: "position", role: "radio", "aria-checked": p.value === this.value ? 'true' : 'false', disabled: this.disabled, tabindex: "-1", onClick: () => this.select(p.value) }, p.label))))));
+    }
+    static get is() { return "ind-selector-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["selector-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["selector-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "positions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectorPosition[]",
+                    "resolved": "SelectorPosition[]",
+                    "references": {
+                        "SelectorPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/selector-switch/selector-switch.tsx",
+                            "id": "src/components/atoms/selector-switch/selector-switch.tsx::SelectorPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected position value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "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"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Group label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a position is selected."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=selector-switch.js.map

package/dist/collection/components/atoms/selector-switch/selector-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-switch.js","sourceRoot":"","sources":["../../../../src/components/atoms/selector-switch/selector-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface SelectorPosition {\n  value: string;\n  label: string;\n}\n\n@Component({\n  tag: 'ind-selector-switch',\n  styleUrl: 'selector-switch.css',\n  shadow: true,\n})\nexport class IndSelectorSwitch {\n  /** Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property. */\n  @Prop() positions: SelectorPosition[] = [];\n  /** Selected position value. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Group label. */\n  @Prop() label?: string;\n\n  /** Fires when a position is selected. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private select(value: string) {\n    if (this.disabled || value === this.value) return;\n    this.value = value;\n    this.indChange.emit(value);\n  }\n\n  private onKey = (e: KeyboardEvent) => {\n    const pos = this.positions ?? [];\n    if (pos.length === 0) return;\n    const idx = pos.findIndex((p) => p.value === this.value);\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.select(pos[Math.min(pos.length - 1, idx + 1)]?.value ?? pos[0].value);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.select(pos[Math.max(0, idx - 1)]?.value ?? pos[0].value);\n    }\n  };\n\n  render() {\n    const positions = this.positions ?? [];\n    return (\n      <Host>\n        {this.label && <span class=\"group-label\" part=\"group-label\">{this.label}</span>}\n        <div\n          class=\"switch\"\n          part=\"switch\"\n          role=\"radiogroup\"\n          aria-label={this.label}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? undefined : '0'}\n          onKeyDown={this.onKey}\n        >\n          {positions.map((p) => (\n            <button\n              type=\"button\"\n              class={{ pos: true, 'is-active': p.value === this.value }}\n              part=\"position\"\n              role=\"radio\"\n              aria-checked={p.value === this.value ? 'true' : 'false'}\n              disabled={this.disabled}\n              tabindex=\"-1\"\n              onClick={() => this.select(p.value)}\n            >\n              {p.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}