@ind-ds/core 0.1.0 → 0.2.0

package/dist/collection/components/atoms/connection-indicator/connection-indicator.css

@@ -0,0 +1,42 @@
+: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));
+  --_size: 9px;
+  --_color: var(--ind-state-stopped-bg, #5a6776);
+}
+
+:host([size="sm"]) { --_size: 7px; font-size: var(--ind-font-size-sm, 11px); }
+:host([size="lg"]) { --_size: 12px; font-size: var(--ind-font-size-lg, 14px); }
+
+:host([state="connected"])    { --_color: var(--ind-state-running-bg, #16a34a); }
+:host([state="connecting"])   { --_color: var(--ind-state-warning-bg, #f59e0b); }
+:host([state="disconnected"]) { --_color: var(--ind-state-stopped-bg, #5a6776); }
+:host([state="error"])        { --_color: var(--ind-state-fault-bg, #dc2626); }
+
+.dot {
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: 50%;
+  background: var(--_color);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--_color) 60%, transparent);
+  flex: none;
+}
+
+:host([state="connecting"]) .dot,
+:host([state="error"]) .dot {
+  animation: ind-conn-pulse 1s ease-in-out infinite;
+}
+
+.label { color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }
+
+@keyframes ind-conn-pulse {
+  50% { opacity: 0.3; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot { animation: none !important; }
+}

package/dist/collection/components/atoms/connection-indicator/connection-indicator.js

@@ -0,0 +1,107 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_LABELS = {
+    connected: 'Connected',
+    connecting: 'Connecting…',
+    disconnected: 'Disconnected',
+    error: 'Connection error',
+};
+export class IndConnectionIndicator {
+    /** Connection state. */
+    state = 'disconnected';
+    /** Size. */
+    size = 'md';
+    /** Override the default text label. Pass an empty string to hide it. */
+    label;
+    render() {
+        const text = this.label ?? DEFAULT_LABELS[this.state];
+        return (h(Host, { key: '42395a93e3301c22b4ac46b10cd0f8c7fa6031c9', role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite', "aria-label": text || DEFAULT_LABELS[this.state] }, h("span", { key: 'de1b02ffe2b894be2920116d7bae1d8509fde2df', class: "dot", part: "dot", "aria-hidden": "true" }), text && h("span", { key: '7a081baef8e54a60e1440b74e7de597f1a818a62', class: "label", part: "label" }, text)));
+    }
+    static get is() { return "ind-connection-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["connection-indicator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["connection-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConnectionState",
+                    "resolved": "\"connected\" | \"connecting\" | \"disconnected\" | \"error\"",
+                    "references": {
+                        "ConnectionState": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/connection-indicator/connection-indicator.tsx",
+                            "id": "src/components/atoms/connection-indicator/connection-indicator.tsx::ConnectionState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Connection state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'disconnected'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConnectionSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ConnectionSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/connection-indicator/connection-indicator.tsx",
+                            "id": "src/components/atoms/connection-indicator/connection-indicator.tsx::ConnectionSize"
+                        }
+                    }
+                },
+                "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": "Override the default text label. Pass an empty string to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=connection-indicator.js.map

package/dist/collection/components/atoms/connection-indicator/connection-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-indicator.js","sourceRoot":"","sources":["../../../../src/components/atoms/connection-indicator/connection-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD,MAAM,cAAc,GAAoC;IACtD,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAOF,MAAM,OAAO,sBAAsB;IACjC,wBAAwB;IACC,KAAK,GAAoB,cAAc,CAAC;IAEjE,YAAY;IACa,IAAI,GAAmB,IAAI,CAAC;IAErD,wEAAwE;IAChE,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtD,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,eACF,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,gBAC9C,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;YAE9C,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,GAAG;YACjD,IAAI,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAQ,CAClD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';\nexport type ConnectionSize = 'sm' | 'md' | 'lg';\n\nconst DEFAULT_LABELS: Record<ConnectionState, string> = {\n  connected: 'Connected',\n  connecting: 'Connecting…',\n  disconnected: 'Disconnected',\n  error: 'Connection error',\n};\n\n@Component({\n  tag: 'ind-connection-indicator',\n  styleUrl: 'connection-indicator.css',\n  shadow: true,\n})\nexport class IndConnectionIndicator {\n  /** Connection state. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n  /** Size. */\n  @Prop({ reflect: true }) size: ConnectionSize = 'md';\n\n  /** Override the default text label. Pass an empty string to hide it. */\n  @Prop() label?: string;\n\n  render() {\n    const text = this.label ?? DEFAULT_LABELS[this.state];\n    return (\n      <Host\n        role=\"status\"\n        aria-live={this.state === 'error' ? 'assertive' : 'polite'}\n        aria-label={text || DEFAULT_LABELS[this.state]}\n      >\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        {text && <span class=\"label\" part=\"label\">{text}</span>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,18 @@
+.belt {
+  fill: none;
+  stroke: var(--_accent);
+  stroke-width: 2;
+  stroke-dasharray: 5 4;
+  vector-effect: non-scaling-stroke;
+}
+
+:host([state="running"]) .belt {
+  animation: ind-conveyor-move 0.6s linear infinite;
+}
+:host([state="running"][direction="reverse"]) .belt {
+  animation-direction: reverse;
+}
+
+@keyframes ind-conveyor-move {
+  to { stroke-dashoffset: -9; }
+}

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

@@ -0,0 +1,152 @@
+import { h, Host } from "@stencil/core";
+export class IndConveyor {
+    /** Process state. `running` animates the belt. */
+    state = 'stopped';
+    /** Belt travel direction. */
+    direction = 'forward';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "CV-501"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'conveyor';
+        return (h(Host, { key: '119483cfd3b46fa20abfa53f062e0948d243b189', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: 'cdcd920ef9905aeb912b5c7588b1f2c30c4ccc3e', class: "symbol", viewBox: "0 0 64 28", "aria-hidden": "true" }, h("circle", { key: '7bdbeceaf95f8d8600d2e8aa71afa9df8bf9add0', class: "body", cx: "12", cy: "14", r: "9" }), h("circle", { key: 'cbc83e2420905a33381f5b90401944c926c201f6', class: "body", cx: "52", cy: "14", r: "9" }), h("line", { key: 'fd62d7978b9ff8292bfeab3986f80941ea9bc3a2', class: "stroke", x1: "12", y1: "5", x2: "52", y2: "5" }), h("line", { key: '3993536a33ab62c99178248b1a1acf9c2854ddd7', class: "stroke", x1: "12", y1: "23", x2: "52", y2: "23" }), h("line", { key: '79d19a316213f1fd72c6a5e3da140ef8e8e2db95', class: "belt", x1: "12", y1: "14", x2: "52", y2: "14" })), (this.tag || this.label) && (h("div", { key: 'e5a1ad87d4d83a8a170d63bb8598c899c03a7978', class: "caption" }, this.tag && h("span", { key: 'c49c170dbc541096d764df90ca0e483431fc6813', class: "tag" }, this.tag), this.label && h("span", { key: '560b91cd85f821b47ffe8747f98b52897950843c', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-conveyor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "conveyor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "conveyor.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. `running` animates the belt."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConveyorDirection",
+                    "resolved": "\"forward\" | \"reverse\"",
+                    "references": {
+                        "ConveyorDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/conveyor/conveyor.tsx",
+                            "id": "src/components/atoms/conveyor/conveyor.tsx::ConveyorDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Belt travel direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'forward'"
+            },
+            "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. \"CV-501\")."
+                },
+                "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=conveyor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conveyor.js","sourceRoot":"","sources":["../../../../src/components/atoms/conveyor/conveyor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,WAAW;IACtB,kDAAkD;IACzB,KAAK,GAAmB,SAAS,CAAC;IAC3D,6BAA6B;IACJ,SAAS,GAAsB,SAAS,CAAC;IAClE,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,qCAAqC;IAC7B,GAAG,CAAU;IACrB,mBAAmB;IACX,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC;QAClD,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;YACpD,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,GAAG,GAAG;gBAC7C,+DAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;gBAC7C,6DAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;gBACrD,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,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CACjD;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\nexport type ConveyorDirection = 'forward' | 'reverse';\n\n@Component({\n  tag: 'ind-conveyor',\n  styleUrls: ['../_equipment/equipment.css', 'conveyor.css'],\n  shadow: true,\n})\nexport class IndConveyor {\n  /** Process state. `running` animates the belt. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Belt travel direction. */\n  @Prop({ reflect: true }) direction: ConveyorDirection = 'forward';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"CV-501\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'conveyor';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        <svg class=\"symbol\" viewBox=\"0 0 64 28\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"12\" cy=\"14\" r=\"9\" />\n          <circle class=\"body\" cx=\"52\" cy=\"14\" r=\"9\" />\n          <line class=\"stroke\" x1=\"12\" y1=\"5\" x2=\"52\" y2=\"5\" />\n          <line class=\"stroke\" x1=\"12\" y1=\"23\" x2=\"52\" y2=\"23\" />\n          <line class=\"belt\" x1=\"12\" y1=\"14\" x2=\"52\" y2=\"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/cooler/cooler.css

@@ -0,0 +1,15 @@
+.coil {
+  fill: none;
+  stroke: var(--_stroke);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+:host([state="running"]) {
+  --_stroke: var(--ind-state-maintenance-border, #60a5fa);
+  --_fill: var(--ind-state-maintenance-bg, #2563eb);
+}
+:host([state="running"]) .coil {
+  stroke: var(--ind-state-maintenance-border, #93c5fd);
+}

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

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+export class IndCooler {
+    /** Process state. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "CL-701"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'cooler';
+        return (h(Host, { key: 'e498b99ea5768deb7147352d066b8f0650d4a176', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: 'c0acab84becce756d8281cf4ba0bef88c4aab776', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: '83ed34a7c484bc3c40e4c0fc35540644506c2d14', class: "body", cx: "24", cy: "24", r: "16" }), h("g", { key: 'ff62a6c27629d9e42c497365410125ac700d4005', class: "flake" }, h("line", { key: '56870b9cc154793ee7ba0e702dfccea779a165c1', class: "coil", x1: "24", y1: "12", x2: "24", y2: "36" }), h("line", { key: '61f78a1ec7382a07662e27d32a7f4e8497d73136', class: "coil", x1: "13.6", y1: "18", x2: "34.4", y2: "30" }), h("line", { key: 'e5b632f4239a6697dc3887b72ac473a4e3a8325d', class: "coil", x1: "13.6", y1: "30", x2: "34.4", y2: "18" }))), (this.tag || this.label) && (h("div", { key: '9b40254100d0e346dfb23d5eb8746bd1071c7dba', class: "caption" }, this.tag && h("span", { key: 'bf78571570a9cb4d2a994ed0ddc9a3d26eb87b77', class: "tag" }, this.tag), this.label && h("span", { key: '6849888c1495f4170c4622556cfc166c7b6db259', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-cooler"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "cooler.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "cooler.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. \"CL-701\")."
+                },
+                "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=cooler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cooler.js","sourceRoot":"","sources":["../../../../src/components/atoms/cooler/cooler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;IACpB,qBAAqB;IACI,KAAK,GAAmB,SAAS,CAAC;IAC3D,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,qCAAqC;IAC7B,GAAG,CAAU;IACrB,mBAAmB;IACX,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ,CAAC;QAChD,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,0DAAG,KAAK,EAAC,OAAO;oBACd,6DAAM,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;oBACrD,6DAAM,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,GAAG;oBACzD,6DAAM,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,GAAG,CACvD,CACA;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-cooler',\n  styleUrls: ['../_equipment/equipment.css', 'cooler.css'],\n  shadow: true,\n})\nexport class IndCooler {\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. \"CL-701\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'cooler';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        {/* Cooler: circle with a snowflake. */}\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"24\" cy=\"24\" r=\"16\" />\n          <g class=\"flake\">\n            <line class=\"coil\" x1=\"24\" y1=\"12\" x2=\"24\" y2=\"36\" />\n            <line class=\"coil\" x1=\"13.6\" y1=\"18\" x2=\"34.4\" y2=\"30\" />\n            <line class=\"coil\" x1=\"13.6\" y1=\"30\" x2=\"34.4\" y2=\"18\" />\n          </g>\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/counter/counter.css

@@ -0,0 +1,45 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_bg: var(--ind-surface-strong, #5a6776);
+  --_fg: var(--ind-surface-text-inverse, #f4f6f8);
+}
+
+.label {
+  font-size: var(--ind-font-size-base, 12px);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: var(--ind-font-size-xs, 10px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  line-height: 1;
+  color: var(--_fg);
+  background: var(--_bg);
+  border-radius: var(--ind-radius-full, 9999px);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+:host([size="sm"]) .count { min-width: 14px; height: 14px; font-size: 9px; padding: 0 4px; }
+:host([size="lg"]) .count { min-width: 22px; height: 22px; font-size: var(--ind-font-size-sm, 11px); }
+
+.count.is-dot {
+  min-width: 8px;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+}
+
+:host([variant="success"]) { --_bg: var(--ind-feedback-success-bg, #16a34a); }
+:host([variant="info"])    { --_bg: var(--ind-feedback-info-bg, #0891b2); }
+:host([variant="warning"]) { --_bg: var(--ind-feedback-warning-bg, #f59e0b); --_fg: #1a1205; }
+:host([variant="error"])   { --_bg: var(--ind-feedback-error-bg, #dc2626); }