@ind-ds/core 0.1.1 → 0.2.0

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

@@ -0,0 +1,195 @@
+import { h, Host } from "@stencil/core";
+export class IndSilo {
+    /** Process state (drives outline color). */
+    state = 'stopped';
+    /** Fill level, 0–100 %. */
+    level = 0;
+    /** Alarm tint of the contents. */
+    alarm = 'none';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "SL-12"). */
+    tag;
+    /** Human label. */
+    label;
+    /** Show the numeric level under the symbol. */
+    showValue = false;
+    render() {
+        const pct = Math.min(100, Math.max(0, this.level));
+        const top = 4;
+        const height = 52;
+        const fillH = (pct / 100) * height;
+        const fillY = top + height - fillH;
+        const name = this.label ?? this.tag ?? 'silo';
+        return (h(Host, { key: '84c25d836dbf8e6402ea40c60a50c0c879439b5c', role: "meter", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${name} level ${Math.round(pct)}%` }, h("svg", { key: 'eead3013668a32dfc450ec104c952709e064a74b', class: "symbol", viewBox: "0 0 40 60", "aria-hidden": "true" }, h("defs", { key: 'e0eb34c44ea241fa7d2a77c4e78e26dacdf4b810' }, h("clipPath", { key: '5527f52907e0d982dbf9c94d925898e62a19f568', id: "silo-clip" }, h("path", { key: '490fb90afb3953a1367f65e5e9bd367b01f0295f', d: "M6 4 H34 V44 L24 56 H16 L6 44 Z" }))), h("rect", { key: '38ee389346454ef3f034ccb11443659768cb30f3', class: "liquid", x: "0", y: fillY, width: "40", height: fillH, "clip-path": "url(#silo-clip)" }), h("path", { key: '8bf35bd099cef83f9b2710becb9fa7a3f9d442a3', class: "body", d: "M6 4 H34 V44 L24 56 H16 L6 44 Z" })), (this.tag || this.label || this.showValue) && (h("div", { key: '6e040ee15207bf4879a75c562dcc9dd417737499', class: "caption" }, this.tag && h("span", { key: 'f08c6ca00d8b490eb0672aee4151a6ec635601ca', class: "tag" }, this.tag), this.showValue && h("span", { key: 'e696ee93fef364c7a626fb50f3487a394f49ee99', class: "tag" }, Math.round(pct), "%"), this.label && h("span", { key: '76c657068f1cfd939b1efa5e9efa66f944433508', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-silo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "silo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "silo.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 (drives outline color)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill level, 0\u2013100 %."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "0"
+            },
+            "alarm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'low' | 'high'",
+                    "resolved": "\"high\" | \"low\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alarm tint of the contents."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "alarm",
+                "defaultValue": "'none'"
+            },
+            "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. \"SL-12\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the numeric level under the symbol."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=silo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"silo.js","sourceRoot":"","sources":["../../../../src/components/atoms/silo/silo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,OAAO;IAClB,4CAA4C;IACnB,KAAK,GAAmB,SAAS,CAAC;IAC3D,2BAA2B;IACnB,KAAK,GAAW,CAAC,CAAC;IAC1B,kCAAkC;IACT,KAAK,GAA4B,MAAM,CAAC;IACjE,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,oCAAoC;IAC5B,GAAG,CAAU;IACrB,mBAAmB;IACX,KAAK,CAAU;IACvB,+CAA+C;IACvC,SAAS,GAAY,KAAK,CAAC;IAEnC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,MAAM,GAAG,GAAG,CAAC,CAAC;QACd,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;QACnC,MAAM,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC;QAC9C,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,mBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,mBACf,CAAC,mBACD,GAAG,gBACN,GAAG,IAAI,UAAU,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG;YAG/C,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;gBACxD;oBACE,iEAAU,EAAE,EAAC,WAAW;wBACtB,6DAAM,CAAC,EAAC,iCAAiC,GAAG,CACnC,CACN;gBACP,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,KAAK,eAAY,iBAAiB,GAAG;gBAC7F,6DAAM,KAAK,EAAC,MAAM,EAAC,CAAC,EAAC,iCAAiC,GAAG,CACrD;YACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAC7C,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBAC/C,IAAI,CAAC,SAAS,IAAI,6DAAM,KAAK,EAAC,KAAK;oBAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;wBAAS;gBAC7D,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-silo',\n  styleUrls: ['../_equipment/equipment.css', 'silo.css'],\n  shadow: true,\n})\nexport class IndSilo {\n  /** Process state (drives outline color). */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Fill level, 0–100 %. */\n  @Prop() level: number = 0;\n  /** Alarm tint of the contents. */\n  @Prop({ reflect: true }) alarm: 'none' | 'low' | 'high' = 'none';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"SL-12\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n  /** Show the numeric level under the symbol. */\n  @Prop() showValue: boolean = false;\n\n  render() {\n    const pct = Math.min(100, Math.max(0, this.level));\n    const top = 4;\n    const height = 52;\n    const fillH = (pct / 100) * height;\n    const fillY = top + height - fillH;\n    const name = this.label ?? this.tag ?? 'silo';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={Math.round(pct)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={`${name} level ${Math.round(pct)}%`}\n      >\n        {/* Cylindrical body with a conical hopper bottom. */}\n        <svg class=\"symbol\" viewBox=\"0 0 40 60\" aria-hidden=\"true\">\n          <defs>\n            <clipPath id=\"silo-clip\">\n              <path d=\"M6 4 H34 V44 L24 56 H16 L6 44 Z\" />\n            </clipPath>\n          </defs>\n          <rect class=\"liquid\" x=\"0\" y={fillY} width=\"40\" height={fillH} clip-path=\"url(#silo-clip)\" />\n          <path class=\"body\" d=\"M6 4 H34 V44 L24 56 H16 L6 44 Z\" />\n        </svg>\n        {(this.tag || this.label || this.showValue) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.showValue && <span class=\"tag\">{Math.round(pct)}%</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,87 @@
+:host {
+  display: block;
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_track-h: 4px;
+  --_thumb: 14px;
+  --_accent: var(--ind-button-primary-bg, #2563eb);
+}
+
+:host([size="sm"]) { --_track-h: 3px; --_thumb: 11px; }
+:host([size="lg"]) { --_track-h: 6px; --_thumb: 18px; }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--ind-spacing-3, 6px);
+  margin-bottom: var(--ind-spacing-2, 4px);
+  font-size: var(--ind-font-size-base, 12px);
+}
+
+.label { color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }
+
+.value {
+  font-family: var(--ind-font-family-mono, ui-monospace, monospace);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--_thumb);
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+}
+
+.range:disabled { cursor: not-allowed; opacity: 0.5; }
+
+/* WebKit */
+.range::-webkit-slider-runnable-track {
+  height: var(--_track-h);
+  border-radius: var(--ind-radius-full, 9999px);
+  background: linear-gradient(
+    to right,
+    var(--_accent) 0 var(--_pct, 0%),
+    var(--ind-surface-border-default, #2a3340) var(--_pct, 0%) 100%
+  );
+}
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--_thumb);
+  height: var(--_thumb);
+  margin-top: calc((var(--_track-h) - var(--_thumb)) / 2);
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid var(--_accent);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+/* Firefox */
+.range::-moz-range-track {
+  height: var(--_track-h);
+  border-radius: var(--ind-radius-full, 9999px);
+  background: var(--ind-surface-border-default, #2a3340);
+}
+.range::-moz-range-progress {
+  height: var(--_track-h);
+  border-radius: var(--ind-radius-full, 9999px);
+  background: var(--_accent);
+}
+.range::-moz-range-thumb {
+  width: var(--_thumb);
+  height: var(--_thumb);
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid var(--_accent);
+}
+
+.range:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);
+  outline-offset: 4px;
+  border-radius: var(--ind-radius-sm, 2px);
+}

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

@@ -0,0 +1,274 @@
+import { h, Host } from "@stencil/core";
+export class IndSlider {
+    /** Current value. */
+    value = 0;
+    /** Minimum. */
+    min = 0;
+    /** Maximum. */
+    max = 100;
+    /** Step. */
+    step = 1;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible label. */
+    label;
+    /** Unit suffix shown with the value. */
+    unit;
+    /** Show the current value next to the label. */
+    showValue = true;
+    /** Fires on every change while dragging. */
+    indInput;
+    /** Fires on commit (mouse up / keyboard). */
+    indChange;
+    onInput = (e) => {
+        const v = Number(e.target.value);
+        this.value = v;
+        this.indInput.emit(v);
+    };
+    onChange = (e) => {
+        this.indChange.emit(Number(e.target.value));
+    };
+    percent() {
+        const span = this.max - this.min || 1;
+        return ((this.value - this.min) / span) * 100;
+    }
+    render() {
+        return (h(Host, { key: '60ef2f0f415c431fbcddca469fb7cb5e44ecc194' }, (this.label || this.showValue) && (h("div", { key: 'e94c6f2a029460ac19ece73f72663889512f64b2', class: "header", part: "header" }, this.label && h("span", { key: 'e9e7367004d1ca23a594a4d010d4dade6e9f5573', class: "label", part: "label" }, this.label), this.showValue && (h("span", { key: '8848b531da6f87ef75b33be18dfe398cf6ec978a', class: "value", part: "value" }, this.value, this.unit ? ` ${this.unit}` : '')))), h("input", { key: '53cee697d1274af909a66b45633bba1525a28fcf', class: "range", part: "range", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, "aria-label": this.label, style: { '--_pct': `${this.percent()}%` }, onInput: this.onInput, onChange: this.onChange })));
+    }
+    static get is() { return "ind-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "SliderSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/slider/slider.tsx",
+                            "id": "src/components/atoms/slider/slider.tsx::SliderSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unit suffix shown with the value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the current value next to the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indInput",
+                "name": "indInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every change while dragging."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on commit (mouse up / keyboard)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/atoms/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SliderSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-slider',\n  styleUrl: 'slider.css',\n  shadow: true,\n})\nexport class IndSlider {\n  /** Current value. */\n  @Prop({ mutable: true }) value: number = 0;\n  /** Minimum. */\n  @Prop() min: number = 0;\n  /** Maximum. */\n  @Prop() max: number = 100;\n  /** Step. */\n  @Prop() step: number = 1;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: SliderSize = 'md';\n  /** Visible label. */\n  @Prop() label?: string;\n  /** Unit suffix shown with the value. */\n  @Prop() unit?: string;\n  /** Show the current value next to the label. */\n  @Prop() showValue: boolean = true;\n\n  /** Fires on every change while dragging. */\n  @Event() indInput!: EventEmitter<number>;\n  /** Fires on commit (mouse up / keyboard). */\n  @Event() indChange!: EventEmitter<number>;\n\n  private onInput = (e: Event) => {\n    const v = Number((e.target as HTMLInputElement).value);\n    this.value = v;\n    this.indInput.emit(v);\n  };\n  private onChange = (e: Event) => {\n    this.indChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private percent(): number {\n    const span = this.max - this.min || 1;\n    return ((this.value - this.min) / span) * 100;\n  }\n\n  render() {\n    return (\n      <Host>\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 && (\n              <span class=\"value\" part=\"value\">\n                {this.value}{this.unit ? ` ${this.unit}` : ''}\n              </span>\n            )}\n          </div>\n        )}\n        <input\n          class=\"range\"\n          part=\"range\"\n          type=\"range\"\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          value={this.value}\n          disabled={this.disabled}\n          aria-label={this.label}\n          style={{ '--_pct': `${this.percent()}%` }}\n          onInput={this.onInput}\n          onChange={this.onChange}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,37 @@
+:host {
+  display: inline-block;
+  width: var(--ind-sparkline-width, 100px);
+  height: var(--ind-sparkline-height, 28px);
+  --_stroke: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+:host([variant="running"]) { --_stroke: var(--ind-state-running-bg, #16a34a); }
+:host([variant="warning"])  { --_stroke: var(--ind-state-warning-bg, #f59e0b); }
+:host([variant="fault"])    { --_stroke: var(--ind-state-fault-bg, #dc2626); }
+
+.chart {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.line {
+  fill: none;
+  stroke: var(--_stroke);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.fill {
+  fill: color-mix(in srgb, var(--_stroke) 18%, transparent);
+  stroke: none;
+}
+
+.dot {
+  fill: var(--_stroke);
+  stroke: var(--ind-surface-panel, #11161c);
+  stroke-width: 1;
+}