@ind-ds/core 0.1.1 → 0.2.0

package/dist/collection/components/atoms/linear-gauge/linear-gauge.js

@@ -0,0 +1,299 @@
+import { h, Host } from "@stencil/core";
+export class IndLinearGauge {
+    /** Current value. */
+    value = 0;
+    /** Scale minimum. */
+    min = 0;
+    /** Scale maximum. */
+    max = 100;
+    /** Optional setpoint marker. */
+    setpoint;
+    /** Colored zones along the scale. Pass as a property. */
+    zones = [];
+    /** Orientation. */
+    orientation = 'horizontal';
+    /** Engineering unit. */
+    unit;
+    /** Label. */
+    label;
+    /** Decimal places. */
+    precision;
+    /** Size. */
+    size = 'md';
+    /** Show the numeric value. */
+    showValue = true;
+    pct(v) {
+        const span = this.max - this.min || 1;
+        return Math.min(100, Math.max(0, ((v - this.min) / span) * 100));
+    }
+    formatted() {
+        if (!Number.isFinite(this.value))
+            return '--';
+        return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);
+    }
+    render() {
+        const fill = this.pct(this.value);
+        const sp = this.setpoint !== undefined ? this.pct(this.setpoint) : undefined;
+        const name = this.label ?? 'gauge';
+        return (h(Host, { key: '770d04a3b389c71fb4e926d4d93ca10db49655ea', role: "meter", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": `${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}` }, (this.label || this.showValue) && (h("div", { key: '335a862a12e339cf53aa72640539412d062eaded', class: "header", part: "header" }, this.label && h("span", { key: '5c832f92f30c3cee5ee33e9299f439a150f754e0', class: "label", part: "label" }, this.label), this.showValue && (h("span", { key: '70d5ff9bb45a360cb712f1338832e1f18dd58a50', class: "value", part: "value" }, this.formatted(), this.unit ? ` ${this.unit}` : '')))), h("div", { key: '7bedcf13339fca602e924d8b43a19a90a718569e', class: "track", part: "track" }, (this.zones ?? []).map((z) => {
+            const a = this.pct(z.from);
+            const b = this.pct(z.to);
+            return (h("span", { class: "zone", style: {
+                    background: z.color,
+                    insetInlineStart: this.orientation === 'horizontal' ? `${a}%` : undefined,
+                    inlineSize: this.orientation === 'horizontal' ? `${b - a}%` : undefined,
+                    insetBlockEnd: this.orientation === 'vertical' ? `${a}%` : undefined,
+                    blockSize: this.orientation === 'vertical' ? `${b - a}%` : undefined,
+                } }));
+        }), h("span", { key: '4adaf09d9eb92fd74cda1ae8c965f4c7810d3424', class: "fill", part: "fill", style: this.orientation === 'horizontal' ? { width: `${fill}%` } : { height: `${fill}%` } }), sp !== undefined && (h("span", { key: '0b1aa729c5fef352902d6843f8103c0ae3689ac7', class: "setpoint", part: "setpoint", style: this.orientation === 'horizontal' ? { left: `${sp}%` } : { bottom: `${sp}%` } })))));
+    }
+    static get is() { return "ind-linear-gauge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["linear-gauge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["linear-gauge.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."
+                },
+                "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": "Scale 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": "Scale maximum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "setpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional setpoint marker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "setpoint"
+            },
+            "zones": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinearGaugeZone[]",
+                    "resolved": "LinearGaugeZone[]",
+                    "references": {
+                        "LinearGaugeZone": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/linear-gauge/linear-gauge.tsx",
+                            "id": "src/components/atoms/linear-gauge/linear-gauge.tsx::LinearGaugeZone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colored zones along the scale. Pass as a property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinearGaugeOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "LinearGaugeOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/linear-gauge/linear-gauge.tsx",
+                            "id": "src/components/atoms/linear-gauge/linear-gauge.tsx::LinearGaugeOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal places."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinearGaugeSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LinearGaugeSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/linear-gauge/linear-gauge.tsx",
+                            "id": "src/components/atoms/linear-gauge/linear-gauge.tsx::LinearGaugeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the numeric value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=linear-gauge.js.map

package/dist/collection/components/atoms/linear-gauge/linear-gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-gauge.js","sourceRoot":"","sources":["../../../../src/components/atoms/linear-gauge/linear-gauge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface LinearGaugeZone {\n  from: number;\n  to: number;\n  color: string;\n}\n\nexport type LinearGaugeOrientation = 'horizontal' | 'vertical';\nexport type LinearGaugeSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-linear-gauge',\n  styleUrl: 'linear-gauge.css',\n  shadow: true,\n})\nexport class IndLinearGauge {\n  /** Current value. */\n  @Prop() value: number = 0;\n  /** Scale minimum. */\n  @Prop() min: number = 0;\n  /** Scale maximum. */\n  @Prop() max: number = 100;\n  /** Optional setpoint marker. */\n  @Prop() setpoint?: number;\n  /** Colored zones along the scale. Pass as a property. */\n  @Prop() zones: LinearGaugeZone[] = [];\n  /** Orientation. */\n  @Prop({ reflect: true }) orientation: LinearGaugeOrientation = 'horizontal';\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Label. */\n  @Prop() label?: string;\n  /** Decimal places. */\n  @Prop() precision?: number;\n  /** Size. */\n  @Prop({ reflect: true }) size: LinearGaugeSize = 'md';\n  /** Show the numeric value. */\n  @Prop() showValue: boolean = true;\n\n  private pct(v: number): number {\n    const span = this.max - this.min || 1;\n    return Math.min(100, Math.max(0, ((v - this.min) / span) * 100));\n  }\n\n  private formatted(): string {\n    if (!Number.isFinite(this.value)) return '--';\n    return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);\n  }\n\n  render() {\n    const fill = this.pct(this.value);\n    const sp = this.setpoint !== undefined ? this.pct(this.setpoint) : undefined;\n    const name = this.label ?? 'gauge';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={this.value}\n        aria-valuemin={this.min}\n        aria-valuemax={this.max}\n        aria-label={`${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}`}\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 && (\n              <span class=\"value\" part=\"value\">{this.formatted()}{this.unit ? ` ${this.unit}` : ''}</span>\n            )}\n          </div>\n        )}\n        <div class=\"track\" part=\"track\">\n          {(this.zones ?? []).map((z) => {\n            const a = this.pct(z.from);\n            const b = this.pct(z.to);\n            return (\n              <span\n                class=\"zone\"\n                style={{\n                  background: z.color,\n                  insetInlineStart: this.orientation === 'horizontal' ? `${a}%` : undefined,\n                  inlineSize: this.orientation === 'horizontal' ? `${b - a}%` : undefined,\n                  insetBlockEnd: this.orientation === 'vertical' ? `${a}%` : undefined,\n                  blockSize: this.orientation === 'vertical' ? `${b - a}%` : undefined,\n                }}\n              />\n            );\n          })}\n          <span class=\"fill\" part=\"fill\" style={this.orientation === 'horizontal' ? { width: `${fill}%` } : { height: `${fill}%` }} />\n          {sp !== undefined && (\n            <span\n              class=\"setpoint\"\n              part=\"setpoint\"\n              style={this.orientation === 'horizontal' ? { left: `${sp}%` } : { bottom: `${sp}%` }}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,24 @@
+.glyph {
+  fill: var(--_stroke);
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  font-weight: var(--ind-font-weight-bold, 700);
+  font-size: 14px;
+}
+
+.run-ring {
+  fill: none;
+  stroke: var(--_accent);
+  stroke-width: 2;
+  stroke-dasharray: 6 6;
+  opacity: 0;
+  transform-origin: 22px 24px;
+}
+
+:host([state="running"]) .run-ring {
+  opacity: 1;
+  animation: ind-motor-spin 3s linear infinite;
+}
+
+@keyframes ind-motor-spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+export class IndMotor {
+    /** Process state. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "M-201"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'motor';
+        return (h(Host, { key: '1ee3962dd285d6202145155fde4296009c759444', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '07b47dd2b80f9d32ec4a54f82208cbf2fe1b6646', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: 'cf5b7ab9ab0e379c73f88708aae2388e344b29f1', class: "body", cx: "22", cy: "24", r: "14" }), h("line", { key: 'bc02e341f6aa878c14b2de8abb022ca1d0cbdb15', class: "stroke", x1: "36", y1: "24", x2: "44", y2: "24" }), h("text", { key: '5d9165f5bfe7054ceda5807868198d03aed36829', class: "glyph", x: "22", y: "24", "text-anchor": "middle", "dominant-baseline": "central" }, "M"), h("circle", { key: 'cade6157f921fbf0d4281ba80e8991ebcb261c1e', class: "run-ring", cx: "22", cy: "24", r: "14" })), (this.tag || this.label) && (h("div", { key: '91d7a976ce7a5404243345155502e4f25a6d7990', class: "caption" }, this.tag && h("span", { key: 'fc438469150d3430dda1c7eaa4d12c045c2fa184', class: "tag" }, this.tag), this.label && h("span", { key: '5980fecb73e38cc38bb266178a97937b0ad0abec', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-motor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "motor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "motor.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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "EquipmentSize": {
+                            "location": "import",
+                            "path": "../_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentSize",
+                            "referenceLocation": "EquipmentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag (e.g. \"M-201\")."
+                },
+                "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"
+            }
+        };
+    }
+}
+//# sourceMappingURL=motor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motor.js","sourceRoot":"","sources":["../../../../src/components/atoms/motor/motor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,QAAQ;IACnB,qBAAqB;IACI,KAAK,GAAmB,SAAS,CAAC;IAC3D,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,oCAAoC;IAC5B,GAAG,CAAU;IACrB,mBAAmB;IACX,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC;QAC/C,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;YAEpD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;gBACxD,+DAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG;gBAC9C,6DAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;gBACvD,6DAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,iBAAa,QAAQ,uBAAmB,SAAS,QAAS;gBAC3F,+DAAQ,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,CAC9C;YACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAC3B,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBAC/C,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-motor',\n  styleUrls: ['../_equipment/equipment.css', 'motor.css'],\n  shadow: true,\n})\nexport class IndMotor {\n  /** Process state. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"M-201\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'motor';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        {/* ISA motor: circle with shaft and \"M\". */}\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"22\" cy=\"24\" r=\"14\" />\n          <line class=\"stroke\" x1=\"36\" y1=\"24\" x2=\"44\" y2=\"24\" />\n          <text class=\"glyph\" x=\"22\" y=\"24\" text-anchor=\"middle\" dominant-baseline=\"central\">M</text>\n          <circle class=\"run-ring\" cx=\"22\" cy=\"24\" r=\"14\" />\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,57 @@
+:host {
+  display: inline-block;
+  --_thickness: 8px;
+  --_fluid: var(--ind-surface-border-strong, #5a6776);
+}
+
+:host([orientation="horizontal"]) { width: 64px; height: var(--_thickness); }
+:host([orientation="vertical"])   { width: var(--_thickness); height: 64px; }
+
+:host([tone="running"]) { --_fluid: var(--ind-state-running-bg, #16a34a); }
+:host([tone="fault"])   { --_fluid: var(--ind-state-fault-bg, #dc2626); }
+:host([tone="warning"]) { --_fluid: var(--ind-state-warning-bg, #f59e0b); }
+
+.pipe {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--ind-surface-raised, #1b222c);
+  border: 1px solid var(--ind-surface-border-strong, #5a6776);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.flow {
+  position: absolute;
+  inset: 0;
+  background: var(--_fluid);
+  opacity: 0.85;
+}
+
+/* Dashed overlay conveys flow motion. */
+:host([flow="forward"]) .flow,
+:host([flow="reverse"]) .flow {
+  background-image: repeating-linear-gradient(
+    var(--_angle, 90deg),
+    color-mix(in srgb, #fff 28%, transparent) 0 4px,
+    transparent 4px 10px
+  );
+  background-color: var(--_fluid);
+  background-size: 14px 14px;
+}
+
+:host([orientation="horizontal"]) .flow { --_angle: 90deg; }
+:host([orientation="vertical"]) .flow   { --_angle: 0deg; }
+
+:host([flow="forward"][orientation="horizontal"]) .flow { animation: ind-pipe-x 0.7s linear infinite; }
+:host([flow="reverse"][orientation="horizontal"]) .flow { animation: ind-pipe-x 0.7s linear infinite reverse; }
+:host([flow="forward"][orientation="vertical"]) .flow   { animation: ind-pipe-y 0.7s linear infinite; }
+:host([flow="reverse"][orientation="vertical"]) .flow   { animation: ind-pipe-y 0.7s linear infinite reverse; }
+
+@keyframes ind-pipe-x { to { background-position: 14px 0; } }
+@keyframes ind-pipe-y { to { background-position: 0 14px; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .flow { animation: none !important; }
+}