@ind-ds/core 0.1.0

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

@@ -0,0 +1,138 @@
+import { h, Host } from "@stencil/core";
+/**
+ * 2D top-down SCARA arm view. Pure presentational — pass joint angles and
+ * link lengths, the component computes forward kinematics in SVG space.
+ *
+ *   <ind-scara-canvas .joints=${[30, 45, 0]} state="moving"></ind-scara-canvas>
+ *
+ * - `joints[0]` (J1) — shoulder rotation in degrees, 0 = +X axis
+ * - `joints[1]` (J2) — elbow rotation in degrees, relative to link 1
+ * - `joints[2]` (J3) — wrist (end effector) rotation, drives the small indicator
+ *
+ * Z translation isn't represented — it would require a separate side view.
+ */
+export class IndScaraCanvas {
+    joints = [0, 0, 0];
+    linkLengths = [110, 90];
+    state = 'idle';
+    parseArr(v) {
+        if (Array.isArray(v))
+            return v;
+        if (typeof v === 'string' && v.trim()) {
+            try {
+                const p = JSON.parse(v);
+                return Array.isArray(p) ? p : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    render() {
+        const j = this.parseArr(this.joints);
+        const l = this.parseArr(this.linkLengths);
+        const [j1 = 0, j2 = 0, j3 = 0] = j;
+        const [l1 = 110, l2 = 90] = l;
+        const cx = 160;
+        const cy = 105;
+        const j1r = (j1 * Math.PI) / 180;
+        const j2r = (j2 * Math.PI) / 180;
+        const j3r = (j3 * Math.PI) / 180;
+        // Forward kinematics
+        const ex = cx + l1 * Math.cos(j1r);
+        const ey = cy + l1 * Math.sin(j1r);
+        const eex = ex + l2 * Math.cos(j1r + j2r);
+        const eey = ey + l2 * Math.sin(j1r + j2r);
+        // Wrist indicator (J3)
+        const wlen = 14;
+        const wx = eex + wlen * Math.cos(j1r + j2r + j3r);
+        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)))))));
+    }
+    static get is() { return "ind-scara-canvas"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scara-canvas.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scara-canvas.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "joints": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "joints",
+                "defaultValue": "[0, 0, 0]"
+            },
+            "linkLengths": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link-lengths",
+                "defaultValue": "[110, 90]"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScaraState",
+                    "resolved": "\"fault\" | \"idle\" | \"moving\"",
+                    "references": {
+                        "ScaraState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/scara-canvas/scara-canvas.tsx",
+                            "id": "src/components/atoms/scara-canvas/scara-canvas.tsx::ScaraState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'idle'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=scara-canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scara-canvas.js","sourceRoot":"","sources":["../../../../src/components/atoms/scara-canvas/scara-canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ScaraState = 'idle' | 'moving' | 'fault';\n\n/**\n * 2D top-down SCARA arm view. Pure presentational — pass joint angles and\n * link lengths, the component computes forward kinematics in SVG space.\n *\n *   <ind-scara-canvas .joints=${[30, 45, 0]} state=\"moving\"></ind-scara-canvas>\n *\n * - `joints[0]` (J1) — shoulder rotation in degrees, 0 = +X axis\n * - `joints[1]` (J2) — elbow rotation in degrees, relative to link 1\n * - `joints[2]` (J3) — wrist (end effector) rotation, drives the small indicator\n *\n * Z translation isn't represented — it would require a separate side view.\n */\n@Component({\n  tag: 'ind-scara-canvas',\n  styleUrl: 'scara-canvas.css',\n  shadow: true,\n})\nexport class IndScaraCanvas {\n  @Prop() joints: number[] | string = [0, 0, 0];\n  @Prop() linkLengths: number[] | string = [110, 90];\n  @Prop({ reflect: true }) state: ScaraState = 'idle';\n\n  private parseArr(v: number[] | string): number[] {\n    if (Array.isArray(v)) return v;\n    if (typeof v === 'string' && v.trim()) {\n      try {\n        const p = JSON.parse(v);\n        return Array.isArray(p) ? p : [];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  render() {\n    const j = this.parseArr(this.joints);\n    const l = this.parseArr(this.linkLengths);\n    const [j1 = 0, j2 = 0, j3 = 0] = j;\n    const [l1 = 110, l2 = 90] = l;\n\n    const cx = 160;\n    const cy = 105;\n\n    const j1r = (j1 * Math.PI) / 180;\n    const j2r = (j2 * Math.PI) / 180;\n    const j3r = (j3 * Math.PI) / 180;\n\n    // Forward kinematics\n    const ex = cx + l1 * Math.cos(j1r);\n    const ey = cy + l1 * Math.sin(j1r);\n    const eex = ex + l2 * Math.cos(j1r + j2r);\n    const eey = ey + l2 * Math.sin(j1r + j2r);\n\n    // Wrist indicator (J3)\n    const wlen = 14;\n    const wx = eex + wlen * Math.cos(j1r + j2r + j3r);\n    const wy = eey + wlen * Math.sin(j1r + j2r + j3r);\n\n    const fmt = (n: number) => n.toFixed(1);\n    const fmt0 = (n: number) => n.toFixed(0);\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={`SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°`}\n      >\n        <svg viewBox=\"0 0 320 220\" part=\"svg\">\n          {/* Working envelope */}\n          <circle cx={cx} cy={cy} r={l1 + l2} class=\"envelope envelope-outer\" />\n          <circle cx={cx} cy={cy} r={Math.max(0, l1 - l2)} class=\"envelope envelope-inner\" />\n\n          {/* Reference axes */}\n          <line x1=\"10\" y1={cy} x2=\"22\" y2={cy} class=\"axis\" />\n          <line x1={cx} y1=\"6\" x2={cx} y2=\"18\" class=\"axis\" />\n          <text x=\"24\" y={cy + 3} class=\"axis-label\">X</text>\n          <text x={cx + 4} y=\"14\" class=\"axis-label\">Y</text>\n\n          {/* Links */}\n          <line x1={cx} y1={cy} x2={ex} y2={ey} class=\"link link-1\" />\n          <line x1={ex} y1={ey} x2={eex} y2={eey} class=\"link link-2\" />\n          <line x1={eex} y1={eey} x2={wx} y2={wy} class=\"wrist\" />\n\n          {/* Joints */}\n          <circle cx={cx} cy={cy} r=\"8\" class=\"joint base\" />\n          <circle cx={ex} cy={ey} r=\"6\" class=\"joint elbow\" />\n          <circle cx={eex} cy={eey} r=\"7\" class=\"joint effector\" />\n\n          {/* Readout */}\n          <g class=\"readout\">\n            <text x=\"10\" y=\"198\">J1 <tspan>{fmt(j1)}°</tspan></text>\n            <text x=\"74\" y=\"198\">J2 <tspan>{fmt(j2)}°</tspan></text>\n            <text x=\"138\" y=\"198\">J3 <tspan>{fmt(j3)}°</tspan></text>\n            <text x=\"202\" y=\"198\">X <tspan>{fmt0(eex - cx)}</tspan></text>\n            <text x=\"254\" y=\"198\">Y <tspan>{fmt0(eey - cy)}</tspan></text>\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,88 @@
+:host {
+  display: inline-block;
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_h: var(--ind-size-input-md, 32px);
+}
+
+:host([size="sm"]) { --_h: var(--ind-size-input-sm, 24px); }
+:host([size="md"]) { --_h: var(--ind-size-input-md, 32px); }
+:host([size="lg"]) { --_h: var(--ind-size-input-lg, 40px); }
+
+.wrap {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+  min-width: 160px;
+}
+
+.label {
+  font-size: var(--ind-font-size-sm, 11px);
+  font-weight: var(--ind-font-weight-medium, 500);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.field {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  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-md, 3px);
+  transition:
+    border-color var(--ind-motion-duration-fast, 120ms),
+    box-shadow   var(--ind-motion-duration-fast, 120ms);
+}
+
+.field:focus-within {
+  border-color: var(--ind-surface-focus-ring, #22d3ee);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent);
+}
+
+.native {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: 1;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0 calc(var(--ind-spacing-7, 20px) + 8px) 0 var(--ind-spacing-4, 8px);
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.native::-ms-expand { display: none; }
+
+/* Native option styling: at least give them a dark theme bg when
+ * the OS picker honors it (Chrome/Edge mostly do). */
+.native option {
+  background: var(--ind-surface-panel);
+  color: var(--ind-surface-text-primary);
+}
+
+.caret {
+  position: absolute;
+  right: var(--ind-spacing-4, 8px);
+  font-size: var(--ind-font-size-base, 12px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  pointer-events: none;
+  line-height: 1;
+}
+
+:host([invalid]) .field {
+  border-color: var(--ind-feedback-error-bg, #dc2626);
+}
+:host([invalid]) .field:focus-within {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);
+}
+
+:host([disabled]) {
+  opacity: 0.55;
+  pointer-events: none;
+}

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

@@ -0,0 +1,244 @@
+import { h, Host } from "@stencil/core";
+export class IndSelect {
+    /**
+     * Options. Pass an array via JS property (`.options = [...]`) OR a JSON-stringified
+     * array via the HTML `options` attribute. The native picker handles keyboard nav and
+     * mobile UI without us building a popover.
+     */
+    options = [];
+    value = '';
+    placeholder;
+    label;
+    name;
+    size = 'md';
+    disabled = false;
+    invalid = false;
+    indChange;
+    parseOptions() {
+        if (Array.isArray(this.options))
+            return this.options;
+        if (typeof this.options === 'string' && this.options.trim()) {
+            try {
+                const parsed = JSON.parse(this.options);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    onChange = (e) => {
+        const v = e.target.value;
+        this.value = v;
+        this.indChange.emit(v);
+    };
+    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")))));
+    }
+    static get is() { return "ind-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[] | string",
+                    "resolved": "SelectOption[] | string",
+                    "references": {
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/select/select.tsx",
+                            "id": "src/components/atoms/select/select.tsx::SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options. Pass an array via JS property (`.options = [...]`) OR a JSON-stringified\narray via the HTML `options` attribute. The native picker handles keyboard nav and\nmobile UI without us building a popover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "SelectSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/select/select.tsx",
+                            "id": "src/components/atoms/select/select.tsx::SelectSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/atoms/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-select',\n  styleUrl: 'select.css',\n  shadow: true,\n})\nexport class IndSelect {\n  /**\n   * Options. Pass an array via JS property (`.options = [...]`) OR a JSON-stringified\n   * array via the HTML `options` attribute. The native picker handles keyboard nav and\n   * mobile UI without us building a popover.\n   */\n  @Prop() options: SelectOption[] | string = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder?: string;\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop({ reflect: true }) size: SelectSize = 'md';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  @Event() indChange!: EventEmitter<string>;\n\n  private parseOptions(): SelectOption[] {\n    if (Array.isArray(this.options)) return this.options;\n    if (typeof this.options === 'string' && this.options.trim()) {\n      try {\n        const parsed = JSON.parse(this.options);\n        return Array.isArray(parsed) ? parsed : [];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  private onChange = (e: Event) => {\n    const v = (e.target as HTMLSelectElement).value;\n    this.value = v;\n    this.indChange.emit(v);\n  };\n\n  render() {\n    const opts = this.parseOptions();\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <span class=\"field\" part=\"field\">\n            <select\n              class=\"native\"\n              part=\"native\"\n              disabled={this.disabled}\n              name={this.name}\n              aria-invalid={this.invalid ? 'true' : 'false'}\n              onChange={this.onChange}\n            >\n              {this.placeholder && (\n                <option value=\"\" disabled selected={this.value === ''}>\n                  {this.placeholder}\n                </option>\n              )}\n              {opts.map((o) => (\n                <option value={o.value} disabled={o.disabled} selected={o.value === this.value}>\n                  {o.label}\n                </option>\n              ))}\n            </select>\n            <span class=\"caret\" part=\"caret\" aria-hidden=\"true\">▾</span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/shelf-canvas/shelf-canvas.css

@@ -0,0 +1,67 @@
+:host {
+  display: block;
+  width: var(--ind-size-canvas-shelves-width, 480px);
+  height: var(--ind-size-canvas-shelves-height, 340px);
+  font-family: var(--ind-font-family-sans);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-md, 3px);
+}
+
+.heading {
+  font-family: var(--ind-font-family-sans);
+  font-size: 13px;
+  font-weight: 700;
+  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.outline {
+  fill: color-mix(in srgb, var(--ind-surface-raised) 40%, transparent);
+  stroke: var(--ind-surface-border-strong);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+}
+
+.fill {
+  fill: var(--ind-state-running-bg, #16a34a);
+  transition: y 240ms, height 240ms;
+}
+
+.slot--partial .fill { fill: var(--ind-feedback-warning-bg, #f59e0b); }
+.slot--empty .fill   { fill: var(--ind-feedback-error-bg, #dc2626); }
+
+.slot--missing .outline {
+  fill: transparent;
+  stroke-dasharray: 4 2;
+  stroke: var(--ind-surface-border-subtle);
+}
+
+.label {
+  font-family: var(--ind-font-family-mono);
+  font-size: 11px;
+  font-weight: 600;
+  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  letter-spacing: 0.02em;
+}
+
+.level {
+  font-family: var(--ind-font-family-mono);
+  font-size: 12px;
+  font-weight: 700;
+  fill: #ffffff;
+  paint-order: stroke;
+  stroke: rgba(0, 0, 0, 0.55);
+  stroke-width: 3;
+  letter-spacing: 0.02em;
+}
+
+.slot--missing .level { display: none; }