@ind-ds/core 0.1.0

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

@@ -0,0 +1,91 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  font-size: var(--ind-font-size-base, 12px);
+  font-weight: var(--ind-font-weight-medium, 500);
+  line-height: var(--ind-font-line-height-tight, 1.1);
+  /* `light-dark()` makes the label readable even if the LED lands on a surface
+   * whose theme doesn't match the loaded tokens (Storybook autodocs, embedded
+   * widget on a third-party site, etc.). */
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.led {
+  --_size: var(--ind-led-size, 12px);
+  --_bg: var(--ind-state-stopped-bg, #5a6776);
+  --_border: var(--ind-state-stopped-border, #8390a0);
+  --_glow: var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));
+
+  display: inline-block;
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 30% 30%,
+    color-mix(in srgb, var(--_bg) 65%, white),
+    var(--_bg) 70%
+  );
+  border: 1px solid var(--_border);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--_bg) 25%, transparent),
+    0 0 8px var(--_glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.45);
+  transition: background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);
+}
+
+:host([size="sm"]) .led { --_size: 8px; }
+:host([size="md"]) .led { --_size: 12px; }
+:host([size="lg"]) .led { --_size: 18px; }
+
+/* Each state ships hard-coded fallbacks so the component stays visible even
+ * if tokens fail to load (build-order glitch, sandbox without CSS imports).
+ */
+:host([state="running"]) .led {
+  --_bg: var(--ind-state-running-bg, #16a34a);
+  --_border: var(--ind-state-running-border, #4ade80);
+  --_glow: var(--ind-state-running-glow, rgba(34, 197, 94, 0.6));
+}
+:host([state="stopped"]) .led {
+  --_bg: var(--ind-state-stopped-bg, #5a6776);
+  --_border: var(--ind-state-stopped-border, #8390a0);
+  --_glow: var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));
+}
+:host([state="fault"]) .led {
+  --_bg: var(--ind-state-fault-bg, #dc2626);
+  --_border: var(--ind-state-fault-border, #f87171);
+  --_glow: var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7));
+}
+:host([state="warning"]) .led {
+  --_bg: var(--ind-state-warning-bg, #f59e0b);
+  --_border: var(--ind-state-warning-border, #fcd34d);
+  --_glow: var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6));
+}
+:host([state="maintenance"]) .led {
+  --_bg: var(--ind-state-maintenance-bg, #2563eb);
+  --_border: var(--ind-state-maintenance-border, #60a5fa);
+  --_glow: var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6));
+}
+
+:host([blinking]) .led {
+  animation: ind-led-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite;
+}
+:host([blinking][state="fault"]) .led {
+  animation-duration: var(--ind-motion-blink-urgent, 200ms);
+}
+
+@keyframes ind-led-blink {
+  50% { opacity: 0.2; box-shadow: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([blinking]) .led {
+    animation: none;
+    opacity: 1;
+    /* Substitute: a solid outline ring so the alarm condition is still visible without motion. */
+    outline: 2px solid var(--_border);
+    outline-offset: 2px;
+  }
+}

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

@@ -0,0 +1,123 @@
+import { h, Host } from "@stencil/core";
+export class IndLed {
+    /** Process state driving the LED color and ARIA live politeness. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion. */
+    blinking = false;
+    /** Optional visible label rendered next to the LED. Always becomes the accessible name. */
+    label;
+    render() {
+        const accessibleName = this.label ?? `${this.state} indicator`;
+        return (h(Host, { key: 'babe0b6e1a80181397c53ec0234ce3ff8d5741b4', role: "status", "aria-label": accessibleName, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("span", { key: 'd7ca8697299f70715fdbe101d541c3313508e434', class: "led", part: "led", "aria-hidden": "true" }), this.label && h("span", { key: 'f39a9b21eabd4380db866e9bfb2591bcaeac3ce4', class: "label", part: "label" }, this.label)));
+    }
+    static get is() { return "ind-led"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["led.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["led.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LedState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "LedState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/led/led.tsx",
+                            "id": "src/components/atoms/led/led.tsx::LedState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Process state driving the LED color and ARIA live politeness."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LedSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LedSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/led/led.tsx",
+                            "id": "src/components/atoms/led/led.tsx::LedSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "blinking": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "blinking",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional visible label rendered next to the LED. Always becomes the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=led.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"led.js","sourceRoot":"","sources":["../../../../src/components/atoms/led/led.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,MAAM;IACjB,oEAAoE;IAC3C,KAAK,GAAa,SAAS,CAAC;IAErD,mBAAmB;IACM,IAAI,GAAY,IAAI,CAAC;IAE9C,wGAAwG;IAC/E,QAAQ,GAAY,KAAK,CAAC;IAEnD,2FAA2F;IACnF,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,YAAY,CAAC;QAC/D,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,gBACD,cAAc,eACf,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;YAE1D,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,GAAG;YACjD,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type LedState = 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance';\nexport type LedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-led',\n  styleUrl: 'led.css',\n  shadow: true,\n})\nexport class IndLed {\n  /** Process state driving the LED color and ARIA live politeness. */\n  @Prop({ reflect: true }) state: LedState = 'stopped';\n\n  /** Visual size. */\n  @Prop({ reflect: true }) size: LedSize = 'md';\n\n  /** Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion. */\n  @Prop({ reflect: true }) blinking: boolean = false;\n\n  /** Optional visible label rendered next to the LED. Always becomes the accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    const accessibleName = this.label ?? `${this.state} indicator`;\n    return (\n      <Host\n        role=\"status\"\n        aria-label={accessibleName}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <span class=\"led\" part=\"led\" aria-hidden=\"true\" />\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,221 @@
+import { h, Host } from "@stencil/core";
+export class IndProgress {
+    /** Current value (0–`max`). */
+    value = 0;
+    /** Max value. */
+    max = 100;
+    /** Visual variant. Use `warning` / `error` for low / critical fill levels. */
+    variant = 'default';
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered above the bar. */
+    label;
+    /** Show numeric value next to the label. */
+    showValue = false;
+    /** Unit suffix for the displayed value. */
+    unit;
+    /** Indeterminate (animated bar, no value). */
+    indeterminate = false;
+    percent() {
+        if (this.max <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    valueLabel() {
+        if (this.unit === '%' || (this.max === 100 && !this.unit)) {
+            return `${Math.round(this.percent())} %`;
+        }
+        return `${this.value}${this.unit ? ' ' + this.unit : ''} / ${this.max}`;
+    }
+    render() {
+        const pct = this.percent();
+        return (h(Host, { key: '0e74d2952b1fe8b2356927e0e38adbcb72d863c6', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label }, (this.label || this.showValue) && (h("div", { key: '1fbeb6fed63ac3fb1cb830408d6ee851ec9fe989', class: "header", part: "header" }, this.label && h("span", { key: '1a2a0e6bb58c4e69b5b19587906e7c53720587cb', class: "label", part: "label" }, this.label), this.showValue && !this.indeterminate && (h("span", { key: '7fa1c9ce1e0ec68abc1b478cfb373af8266467a3', class: "value", part: "value" }, this.valueLabel())))), h("div", { key: 'e821a5f203432e33199d111ba807eb6106068b14', class: "track", part: "track" }, h("div", { key: '88e1e2728d12adea9220b3cf8f68072e85bdc1dd', class: "fill", part: "fill", style: this.indeterminate ? undefined : { width: `${pct}%` } }))));
+    }
+    static get is() { return "ind-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress.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": "ProgressVariant",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ProgressVariant": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/progress/progress.tsx",
+                            "id": "src/components/atoms/progress/progress.tsx::ProgressVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant. Use `warning` / `error` for low / critical fill levels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProgressSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ProgressSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/progress/progress.tsx",
+                            "id": "src/components/atoms/progress/progress.tsx::ProgressSize"
+                        }
+                    }
+                },
+                "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": "Optional label rendered above the bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show numeric value next to the label."
+                },
+                "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": "Unit suffix for the displayed value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate (animated bar, no value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../src/components/atoms/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,WAAW;IACtB,+BAA+B;IACvB,KAAK,GAAW,CAAC,CAAC;IAC1B,iBAAiB;IACT,GAAG,GAAW,GAAG,CAAC;IAC1B,8EAA8E;IACrD,OAAO,GAAoB,SAAS,CAAC;IAC9D,YAAY;IACa,IAAI,GAAiB,IAAI,CAAC;IACnD,6CAA6C;IACrC,KAAK,CAAU;IACvB,4CAA4C;IACpC,SAAS,GAAY,KAAK,CAAC;IACnC,2CAA2C;IACnC,IAAI,CAAU;IACtB,8CAA8C;IACrB,aAAa,GAAY,KAAK,CAAC;IAEhD,OAAO;QACb,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACnE,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1D,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC;QAC3C,CAAC;QACD,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;IAC1E,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC3B,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,mBAC3C,CAAC,mBACD,IAAI,CAAC,GAAG,gBACX,IAAI,CAAC,KAAK;YAErB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CACjC,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAC9B,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBAClE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CACxC,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,UAAU,EAAE,CAAQ,CAC5D,CACG,CACP;YACD,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,4DACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,GAC5D,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProgressVariant = 'default' | 'success' | 'warning' | 'error';\nexport type ProgressSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-progress',\n  styleUrl: 'progress.css',\n  shadow: true,\n})\nexport class IndProgress {\n  /** Current value (0–`max`). */\n  @Prop() value: number = 0;\n  /** Max value. */\n  @Prop() max: number = 100;\n  /** Visual variant. Use `warning` / `error` for low / critical fill levels. */\n  @Prop({ reflect: true }) variant: ProgressVariant = 'default';\n  /** Size. */\n  @Prop({ reflect: true }) size: ProgressSize = 'md';\n  /** Optional label rendered above the bar. */\n  @Prop() label?: string;\n  /** Show numeric value next to the label. */\n  @Prop() showValue: boolean = false;\n  /** Unit suffix for the displayed value. */\n  @Prop() unit?: string;\n  /** Indeterminate (animated bar, no value). */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\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  private valueLabel(): string {\n    if (this.unit === '%' || (this.max === 100 && !this.unit)) {\n      return `${Math.round(this.percent())} %`;\n    }\n    return `${this.value}${this.unit ? ' ' + this.unit : ''} / ${this.max}`;\n  }\n\n  render() {\n    const pct = this.percent();\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-valuenow={this.indeterminate ? undefined : this.value}\n        aria-valuemin={0}\n        aria-valuemax={this.max}\n        aria-label={this.label}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"header\" part=\"header\">\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n            {this.showValue && !this.indeterminate && (\n              <span class=\"value\" part=\"value\">{this.valueLabel()}</span>\n            )}\n          </div>\n        )}\n        <div class=\"track\" part=\"track\">\n          <div\n            class=\"fill\"\n            part=\"fill\"\n            style={this.indeterminate ? undefined : { width: `${pct}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,100 @@
+:host {
+  display: block;
+  width: var(--ind-size-canvas-robot-width, 320px);
+  height: var(--ind-size-canvas-robot-height, 220px);
+  font-family: var(--ind-font-family-mono);
+}
+
+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);
+}
+
+.envelope {
+  fill: none;
+  stroke: var(--ind-surface-border-subtle);
+  stroke-dasharray: 2 4;
+}
+
+.envelope-inner {
+  stroke-dasharray: 1 3;
+  opacity: 0.6;
+}
+
+.axis {
+  stroke: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  stroke-width: 1;
+}
+
+.axis-label {
+  font-family: var(--ind-font-family-mono);
+  font-size: 9px;
+  fill: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+.link {
+  stroke-width: 5;
+  stroke-linecap: round;
+  transition: stroke 240ms;
+}
+.link-1 { stroke: var(--ind-state-running-bg, #16a34a); }
+.link-2 { stroke: var(--ind-state-running-border, #4ade80); }
+
+.wrist {
+  stroke: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.joint {
+  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  stroke: var(--ind-surface-border-strong);
+  stroke-width: 1;
+}
+
+.joint.base {
+  fill: var(--ind-state-stopped-bg, #5a6776);
+  stroke: var(--ind-state-stopped-border, #8390a0);
+}
+
+.joint.effector {
+  fill: var(--ind-state-warning-bg, #f59e0b);
+  stroke: var(--ind-state-warning-border, #fcd34d);
+}
+
+.readout text {
+  font-size: 9px;
+  fill: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  font-feature-settings: "tnum" 1;
+}
+.readout tspan {
+  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  font-weight: 700;
+}
+
+:host([state="moving"]) .link {
+  stroke-dasharray: 4 2;
+  animation: ind-scara-move 1.2s linear infinite;
+}
+
+:host([state="fault"]) .link,
+:host([state="fault"]) .wrist {
+  stroke: var(--ind-state-fault-bg, #dc2626);
+}
+:host([state="fault"]) .joint {
+  stroke: var(--ind-state-fault-border, #f87171);
+}
+
+@keyframes ind-scara-move {
+  to { stroke-dashoffset: -12; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([state="moving"]) .link {
+    animation: none;
+  }
+}