@ind-ds/core 0.1.1 → 0.2.0

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

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_btn: 22px;
+  --_num-w: 64px;
+}
+
+:host([size="sm"]) { --_btn: 18px; --_num-w: 52px; }
+:host([size="lg"]) { --_btn: 28px; --_num-w: 80px; }
+
+.frame {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+  padding: var(--ind-spacing-3, 6px);
+  background: var(--ind-surface-raised, #1b222c);
+  border: 1px solid var(--ind-surface-border-default, #2a3340);
+  border-radius: var(--ind-radius-md, 3px);
+}
+
+.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));
+}
+
+.rows { display: flex; flex-direction: column; gap: var(--ind-spacing-2, 4px); }
+
+.pv, .sp { display: inline-flex; align-items: center; gap: var(--ind-spacing-2, 4px); }
+
+.pv-tag, .sp-tag {
+  font-size: 9px;
+  font-weight: var(--ind-font-weight-bold, 700);
+  width: 16px;
+  color: var(--ind-surface-text-muted, #7a8694);
+}
+
+.pv-num {
+  font-family: var(--ind-font-family-mono, ui-monospace, monospace);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.pv-unit, .sp-unit {
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-surface-text-muted, #7a8694);
+}
+
+.step {
+  width: var(--_btn);
+  height: var(--_btn);
+  flex: none;
+  border: 1px solid var(--ind-surface-border-strong, #5a6776);
+  background: var(--ind-surface-panel, #11161c);
+  color: var(--ind-surface-text-primary, #eef1f5);
+  border-radius: var(--ind-radius-sm, 2px);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.step:hover:not(:disabled) { background: var(--ind-surface-strong, #5a6776); }
+.step:disabled { opacity: 0.5; cursor: not-allowed; }
+.step:focus-visible { outline: 2px solid var(--ind-surface-focus-ring, #67e8f9); outline-offset: 1px; }
+
+.num {
+  width: var(--_num-w);
+  text-align: right;
+  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);
+  background: var(--ind-surface-sunken, light-dark(#fff, #000));
+  color: var(--ind-surface-text-primary, #eef1f5);
+  border: 1px solid var(--ind-surface-border-default, #2a3340);
+  border-radius: var(--ind-radius-sm, 2px);
+  padding: 2px 4px;
+}
+.num:focus-visible { outline: 2px solid var(--ind-surface-focus-ring, #67e8f9); outline-offset: 0; }

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

@@ -0,0 +1,287 @@
+import { h, Host } from "@stencil/core";
+export class IndSetpoint {
+    /** Target setpoint value (editable). */
+    value = 0;
+    /** Live process value, shown for comparison when provided. */
+    pv;
+    /** Minimum. */
+    min;
+    /** Maximum. */
+    max;
+    /** Step for the +/- buttons and keyboard. */
+    step = 1;
+    /** Decimal places to display. */
+    precision;
+    /** Engineering unit. */
+    unit;
+    /** Label / tag. */
+    label;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Fires when the setpoint is committed. */
+    indChange;
+    clamp(v) {
+        if (this.min !== undefined)
+            v = Math.max(this.min, v);
+        if (this.max !== undefined)
+            v = Math.min(this.max, v);
+        return v;
+    }
+    commit(v) {
+        const next = this.clamp(v);
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.indChange.emit(next);
+    }
+    fmt(v) {
+        if (v === undefined || !Number.isFinite(v))
+            return '--';
+        return this.precision !== undefined ? v.toFixed(this.precision) : String(v);
+    }
+    onInput = (e) => {
+        const v = Number(e.target.value);
+        if (Number.isFinite(v))
+            this.commit(v);
+    };
+    render() {
+        return (h(Host, { key: '90dbc3544fa3a36e52626e760363d7a1bf64f663' }, h("div", { key: 'a6f9487645e538fb3e1b0050ca7fc1c64dea2bba', class: "frame", part: "frame" }, this.label && h("span", { key: '8b472a3bbf2ac515acbbfafd44e865e3bf2e33e6', class: "label", part: "label" }, this.label), h("div", { key: '0285513162167abd658c0b242956010d2d75412f', class: "rows", part: "rows" }, this.pv !== undefined && (h("div", { key: '79bb1113712193aecc37c25b6e08995613414b50', class: "pv", part: "pv" }, h("span", { key: '259bdb3eaa9a6bc2c79f7fbae03d5f1079cf2243', class: "pv-tag" }, "PV"), h("span", { key: '0c62932c79b53f3b2fc87c495d38f36eadd95e17', class: "pv-num" }, this.fmt(this.pv)), this.unit && h("span", { key: '3e2b7dc1bbcf7acfc36c13e0c2a4464be2a195ce', class: "pv-unit" }, this.unit))), h("div", { key: 'ad9a17611f3565a3ad897de63c0455a3bb515d7c', class: "sp", part: "sp" }, h("span", { key: 'a40a504817aaa555b4800c04bdb824541debbf1d', class: "sp-tag" }, "SP"), h("button", { key: 'bf43b9280bedc5bae8cc912f1a35f12ea2fb37c9', type: "button", class: "step", part: "dec", "aria-label": "Decrease setpoint", disabled: this.disabled, onClick: () => this.commit(this.value - this.step) }, "\u2212"), h("input", { key: 'ca92f232c463c733bd2cf4daa4ee3c61e5b9c2c7', class: "num", part: "input", type: "number", value: this.fmt(this.value), min: this.min, max: this.max, step: this.step, disabled: this.disabled, "aria-label": `${this.label ?? 'Setpoint'} value`, onChange: this.onInput }), this.unit && h("span", { key: '7513b054f25b05f9ca5b59ad2f706edb18377b6d', class: "sp-unit" }, this.unit), h("button", { key: '2143880d86bb2141974567d3f502fccd6e00785a', type: "button", class: "step", part: "inc", "aria-label": "Increase setpoint", disabled: this.disabled, onClick: () => this.commit(this.value + this.step) }, "+"))))));
+    }
+    static get is() { return "ind-setpoint"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["setpoint.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["setpoint.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Target setpoint value (editable)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "pv": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Live process value, shown for comparison when provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pv"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step for the +/- buttons and keyboard."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal places to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Engineering unit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label / tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "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": "SetpointSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "SetpointSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/setpoint/setpoint.tsx",
+                            "id": "src/components/atoms/setpoint/setpoint.tsx::SetpointSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the setpoint is committed."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=setpoint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setpoint.js","sourceRoot":"","sources":["../../../../src/components/atoms/setpoint/setpoint.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SetpointSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-setpoint',\n  styleUrl: 'setpoint.css',\n  shadow: true,\n})\nexport class IndSetpoint {\n  /** Target setpoint value (editable). */\n  @Prop({ mutable: true }) value: number = 0;\n  /** Live process value, shown for comparison when provided. */\n  @Prop() pv?: number;\n  /** Minimum. */\n  @Prop() min?: number;\n  /** Maximum. */\n  @Prop() max?: number;\n  /** Step for the +/- buttons and keyboard. */\n  @Prop() step: number = 1;\n  /** Decimal places to display. */\n  @Prop() precision?: number;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Label / tag. */\n  @Prop() label?: string;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: SetpointSize = 'md';\n\n  /** Fires when the setpoint is committed. */\n  @Event() indChange!: EventEmitter<number>;\n\n  private clamp(v: number): number {\n    if (this.min !== undefined) v = Math.max(this.min, v);\n    if (this.max !== undefined) v = Math.min(this.max, v);\n    return v;\n  }\n\n  private commit(v: number) {\n    const next = this.clamp(v);\n    if (next === this.value) return;\n    this.value = next;\n    this.indChange.emit(next);\n  }\n\n  private fmt(v?: number): string {\n    if (v === undefined || !Number.isFinite(v)) return '--';\n    return this.precision !== undefined ? v.toFixed(this.precision) : String(v);\n  }\n\n  private onInput = (e: Event) => {\n    const v = Number((e.target as HTMLInputElement).value);\n    if (Number.isFinite(v)) this.commit(v);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"frame\" part=\"frame\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <div class=\"rows\" part=\"rows\">\n            {this.pv !== undefined && (\n              <div class=\"pv\" part=\"pv\">\n                <span class=\"pv-tag\">PV</span>\n                <span class=\"pv-num\">{this.fmt(this.pv)}</span>\n                {this.unit && <span class=\"pv-unit\">{this.unit}</span>}\n              </div>\n            )}\n            <div class=\"sp\" part=\"sp\">\n              <span class=\"sp-tag\">SP</span>\n              <button\n                type=\"button\"\n                class=\"step\"\n                part=\"dec\"\n                aria-label=\"Decrease setpoint\"\n                disabled={this.disabled}\n                onClick={() => this.commit(this.value - this.step)}\n              >\n                −\n              </button>\n              <input\n                class=\"num\"\n                part=\"input\"\n                type=\"number\"\n                value={this.fmt(this.value)}\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                disabled={this.disabled}\n                aria-label={`${this.label ?? 'Setpoint'} value`}\n                onChange={this.onInput}\n              />\n              {this.unit && <span class=\"sp-unit\">{this.unit}</span>}\n              <button\n                type=\"button\"\n                class=\"step\"\n                part=\"inc\"\n                aria-label=\"Increase setpoint\"\n                disabled={this.disabled}\n                onClick={() => this.commit(this.value + this.step)}\n              >\n                +\n              </button>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -48,7 +48,7 @@ export class IndShelfCanvas {
         const gridH = H - padTop - padBottom;
         const cellW = gridW / this.cols;
         const cellH = gridH / this.rows;
-        return (h(Host, { key: 'e368cf70181cf224e4076b937a1e12a53e95e58f', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, h("svg", { key: 'e5fa8c4d7bed40cddbd4c6a691aa49a9c29007a5', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (h("text", { key: 'ec0c820367a330cc570b2c44c6d63c11fbed7f3b', x: W / 2, y: "22", class: "heading", "text-anchor": "middle" }, this.heading)), slots.slice(0, this.rows * this.cols).map((s) => {
+        return (h(Host, { key: 'c50aafdae929f6c548b744ea7bed202403478616', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, h("svg", { key: 'cead1ebbee9dc4bf985a3a3ec28c946cc9a0c29c', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (h("text", { key: '7d83c3c7f7ed080825aa08271eba2f2862ca3c15', x: W / 2, y: "22", class: "heading", "text-anchor": "middle" }, this.heading)), slots.slice(0, this.rows * this.cols).map((s) => {
             const i = slots.indexOf(s);
             const col = i % this.cols;
             const row = Math.floor(i / this.cols);

package/dist/collection/components/atoms/signal-quality/signal-quality.css

@@ -0,0 +1,41 @@
+: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);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_h: 16px;
+  --_w: 4px;
+  --_on: var(--ind-state-running-bg, #16a34a);
+}
+
+:host([size="sm"]) { --_h: 12px; --_w: 3px; }
+:host([size="lg"]) { --_h: 22px; --_w: 5px; }
+
+:host([data-quality="poor"]) { --_on: var(--ind-state-fault-bg, #dc2626); }
+:host([data-quality="fair"]) { --_on: var(--ind-state-warning-bg, #f59e0b); }
+:host([data-quality="good"]) { --_on: var(--ind-state-running-bg, #16a34a); }
+:host([data-quality="none"]) { --_on: var(--ind-surface-border-strong, #5a6776); }
+
+.bars {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: var(--_h);
+}
+
+.bar {
+  width: var(--_w);
+  background: var(--ind-surface-border-default, #2a3340);
+  border-radius: 1px;
+  align-self: flex-end;
+}
+
+.bar.is-on {
+  background: var(--_on);
+}
+
+.label {
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}

package/dist/collection/components/atoms/signal-quality/signal-quality.js

@@ -0,0 +1,129 @@
+import { h, Host } from "@stencil/core";
+export class IndSignalQuality {
+    /** Number of filled bars. */
+    level = 0;
+    /** Total bars. */
+    bars = 4;
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered next to the bars. */
+    label;
+    quality() {
+        if (this.level <= 0)
+            return 'none';
+        const ratio = this.level / this.bars;
+        if (ratio <= 0.34)
+            return 'poor';
+        if (ratio <= 0.67)
+            return 'fair';
+        return 'good';
+    }
+    render() {
+        const total = Math.max(1, this.bars);
+        const filled = Math.max(0, Math.min(total, this.level));
+        const quality = this.quality();
+        return (h(Host, { key: '75fa0e52409f72555ea603490469c418281b036b', role: "meter", "aria-valuenow": filled, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": this.label ?? `Signal quality ${quality}`, "data-quality": quality }, h("span", { key: '77a5333955c1cf070ba879cb593e7ff937b34b35', class: "bars", part: "bars", "aria-hidden": "true" }, Array.from({ length: total }).map((_, i) => (h("span", { class: { bar: true, 'is-on': i < filled }, style: { height: `${30 + (i / total) * 70}%` } })))), this.label && h("span", { key: '962c02cf5381b2bf22e9163ed2f7bb7fe12ca67a', class: "label", part: "label" }, this.label)));
+    }
+    static get is() { return "ind-signal-quality"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["signal-quality.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["signal-quality.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of filled bars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "0"
+            },
+            "bars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total bars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bars",
+                "defaultValue": "4"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SignalQualitySize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "SignalQualitySize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/signal-quality/signal-quality.tsx",
+                            "id": "src/components/atoms/signal-quality/signal-quality.tsx::SignalQualitySize"
+                        }
+                    }
+                },
+                "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 next to the bars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=signal-quality.js.map

package/dist/collection/components/atoms/signal-quality/signal-quality.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal-quality.js","sourceRoot":"","sources":["../../../../src/components/atoms/signal-quality/signal-quality.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,gBAAgB;IAC3B,6BAA6B;IACrB,KAAK,GAAW,CAAC,CAAC;IAE1B,kBAAkB;IACV,IAAI,GAAW,CAAC,CAAC;IAEzB,YAAY;IACa,IAAI,GAAsB,IAAI,CAAC;IAExD,gDAAgD;IACxC,KAAK,CAAU;IAEf,OAAO;QACb,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;YAAE,OAAO,MAAM,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QACjC,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QACjC,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC/B,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,mBACG,MAAM,mBACN,CAAC,mBACD,KAAK,gBACR,IAAI,CAAC,KAAK,IAAI,kBAAkB,OAAO,EAAE,kBACvC,OAAO;YAErB,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,IAC9C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3C,YAAM,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,GAAI,CACpG,CAAC,CACG;YACN,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 SignalQualitySize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-signal-quality',\n  styleUrl: 'signal-quality.css',\n  shadow: true,\n})\nexport class IndSignalQuality {\n  /** Number of filled bars. */\n  @Prop() level: number = 0;\n\n  /** Total bars. */\n  @Prop() bars: number = 4;\n\n  /** Size. */\n  @Prop({ reflect: true }) size: SignalQualitySize = 'md';\n\n  /** Optional label rendered next to the bars. */\n  @Prop() label?: string;\n\n  private quality(): 'none' | 'poor' | 'fair' | 'good' {\n    if (this.level <= 0) return 'none';\n    const ratio = this.level / this.bars;\n    if (ratio <= 0.34) return 'poor';\n    if (ratio <= 0.67) return 'fair';\n    return 'good';\n  }\n\n  render() {\n    const total = Math.max(1, this.bars);\n    const filled = Math.max(0, Math.min(total, this.level));\n    const quality = this.quality();\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={filled}\n        aria-valuemin={0}\n        aria-valuemax={total}\n        aria-label={this.label ?? `Signal quality ${quality}`}\n        data-quality={quality}\n      >\n        <span class=\"bars\" part=\"bars\" aria-hidden=\"true\">\n          {Array.from({ length: total }).map((_, i) => (\n            <span class={{ bar: true, 'is-on': i < filled }} style={{ height: `${30 + (i / total) * 70}%` }} />\n          ))}\n        </span>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+.liquid {
+  fill: var(--ind-state-stopped-bg, #a8722e);
+  transition: y var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),
+              height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);
+}
+
+:host([alarm="high"]) .liquid { fill: var(--ind-state-fault-bg, #dc2626); }
+:host([alarm="low"]) .liquid  { fill: var(--ind-state-warning-bg, #f59e0b); }
+
+.body {
+  fill: none;
+}