@ind-ds/core 0.1.1 → 0.2.0

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

@@ -0,0 +1,58 @@
+: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: 10px;
+  --_color: var(--ind-state-running-bg, #16a34a);
+  --_period: 1000ms;
+}
+
+:host([size="sm"]) { --_size: 8px; }
+:host([size="lg"]) { --_size: 14px; }
+
+:host(:not([alive])) { --_color: var(--ind-state-fault-bg, #dc2626); }
+
+.pulse {
+  position: relative;
+  display: inline-flex;
+  width: var(--_size);
+  height: var(--_size);
+  flex: none;
+}
+
+.core {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: 50%;
+  background: var(--_color);
+}
+
+.ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--_color);
+  opacity: 0;
+}
+
+:host([alive]) .ring {
+  animation: ind-heartbeat var(--_period) ease-out infinite;
+}
+
+@keyframes ind-heartbeat {
+  0%   { transform: scale(1);   opacity: 0.6; }
+  70%  { transform: scale(2.6); opacity: 0; }
+  100% { transform: scale(2.6); opacity: 0; }
+}
+
+.label { color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }
+
+@media (prefers-reduced-motion: reduce) {
+  .ring { animation: none !important; }
+}

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

@@ -0,0 +1,116 @@
+import { h, Host } from "@stencil/core";
+export class IndHeartbeat {
+    /** Whether the monitored source is alive. When false the pulse stops. */
+    alive = true;
+    /** Beat interval in milliseconds (drives the pulse animation period). */
+    interval = 1000;
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered next to the pulse. */
+    label;
+    render() {
+        return (h(Host, { key: '57635f480aa687475404cc5078e5f2ad1bef3522', role: "status", "aria-live": "polite", "aria-label": this.label ?? (this.alive ? 'Heartbeat active' : 'Heartbeat lost'), style: { '--_period': `${Math.max(200, this.interval)}ms` } }, h("span", { key: 'c1a84671caebe2949acb923a666cd9f2318e95a7', class: "pulse", part: "pulse", "aria-hidden": "true" }, h("span", { key: '720ef97105a86565d5aced3d77ada332b6c1ded2', class: "core", part: "core" }), h("span", { key: 'f865735ce0515440a8b1148dbe9a506bbc891cc9', class: "ring", part: "ring" })), this.label && h("span", { key: 'b15159d02b971495987871841848d27c9f21e94c', class: "label", part: "label" }, this.label)));
+    }
+    static get is() { return "ind-heartbeat"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["heartbeat.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["heartbeat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the monitored source is alive. When false the pulse stops."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "alive",
+                "defaultValue": "true"
+            },
+            "interval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Beat interval in milliseconds (drives the pulse animation period)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interval",
+                "defaultValue": "1000"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeartbeatSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "HeartbeatSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/heartbeat/heartbeat.tsx",
+                            "id": "src/components/atoms/heartbeat/heartbeat.tsx::HeartbeatSize"
+                        }
+                    }
+                },
+                "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 pulse."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=heartbeat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heartbeat.js","sourceRoot":"","sources":["../../../../src/components/atoms/heartbeat/heartbeat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,YAAY;IACvB,yEAAyE;IAChD,KAAK,GAAY,IAAI,CAAC;IAE/C,yEAAyE;IACjE,QAAQ,GAAW,IAAI,CAAC;IAEhC,YAAY;IACa,IAAI,GAAkB,IAAI,CAAC;IAEpD,iDAAiD;IACzC,KAAK,CAAU;IAEvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,eACH,QAAQ,gBACN,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAC9E,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAE3D,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM;gBACjD,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG;gBACjC,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG,CAC5B;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 HeartbeatSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-heartbeat',\n  styleUrl: 'heartbeat.css',\n  shadow: true,\n})\nexport class IndHeartbeat {\n  /** Whether the monitored source is alive. When false the pulse stops. */\n  @Prop({ reflect: true }) alive: boolean = true;\n\n  /** Beat interval in milliseconds (drives the pulse animation period). */\n  @Prop() interval: number = 1000;\n\n  /** Size. */\n  @Prop({ reflect: true }) size: HeartbeatSize = 'md';\n\n  /** Optional label rendered next to the pulse. */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={this.label ?? (this.alive ? 'Heartbeat active' : 'Heartbeat lost')}\n        style={{ '--_period': `${Math.max(200, this.interval)}ms` }}\n      >\n        <span class=\"pulse\" part=\"pulse\" aria-hidden=\"true\">\n          <span class=\"core\" part=\"core\" />\n          <span class=\"ring\" part=\"ring\" />\n        </span>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+.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-warning-border, #fcd34d);
+  --_fill: var(--ind-state-fault-bg, #dc2626);
+}
+:host([state="running"]) .coil {
+  stroke: var(--ind-state-fault-bg, #ef4444);
+  animation: ind-heater-glow 1.4s ease-in-out infinite;
+}
+
+@keyframes ind-heater-glow {
+  50% { stroke: var(--ind-state-warning-bg, #f59e0b); }
+}

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

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+export class IndHeater {
+    /** Process state. `running` glows the element. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "EH-601"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'heater';
+        return (h(Host, { key: 'd89d4fd8c92b5d580e9a042645f044ad1a1ee292', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '03cd61a0fdcd116f4efa913301a1f16797f3b755', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: '1eb5b9ac742fbc70a137f46a98b036cc74b1a820', class: "body", cx: "24", cy: "24", r: "16" }), h("path", { key: '4e5f078661433f278f0ec6ec7ba9648021b9c237', class: "coil", d: "M14 18 q5 -6 10 0 t10 0 M14 24 q5 -6 10 0 t10 0 M14 30 q5 -6 10 0 t10 0" })), (this.tag || this.label) && (h("div", { key: '9cb689e0d55fe6744948e0c9c3f9d456d6aed084', class: "caption" }, this.tag && h("span", { key: '31ff37c274b8c107ce29982c21c2200bf93d6257', class: "tag" }, this.tag), this.label && h("span", { key: '4fd695b74a6bf03a43a0dd6ee90bb6a167556cc0', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-heater"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "heater.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "heater.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` glows the element."
+                },
+                "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. \"EH-601\")."
+                },
+                "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=heater.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heater.js","sourceRoot":"","sources":["../../../../src/components/atoms/heater/heater.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;IACpB,kDAAkD;IACzB,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,6DAAM,KAAK,EAAC,MAAM,EAAC,CAAC,EAAC,yEAAyE,GAAG,CAC7F;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-heater',\n  styleUrls: ['../_equipment/equipment.css', 'heater.css'],\n  shadow: true,\n})\nexport class IndHeater {\n  /** Process state. `running` glows the element. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"EH-601\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'heater';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        {/* Heating element: circle with a resistive serpentine. */}\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"24\" cy=\"24\" r=\"16\" />\n          <path class=\"coil\" d=\"M14 18 q5 -6 10 0 t10 0 M14 24 q5 -6 10 0 t10 0 M14 30 q5 -6 10 0 t10 0\" />\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/icon/icon.css

@@ -0,0 +1,30 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  --_size: 16px;
+}
+
+:host([size="sm"]) { --_size: 12px; }
+:host([size="md"]) { --_size: 16px; }
+:host([size="lg"]) { --_size: 24px; }
+
+.icon {
+  width: var(--_size);
+  height: var(--_size);
+  display: block;
+}
+
+.icon path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+::slotted(svg) {
+  width: var(--_size);
+  height: var(--_size);
+}

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

@@ -0,0 +1,119 @@
+import { h, Host } from "@stencil/core";
+const PATHS = {
+    alarm: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',
+    bell: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',
+    gear: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 12l-1.5-1 1-3 1.8.3a6.9 6.9 0 0 1 1.5-1.5L6.5 4l3-1L11 4.5a7 7 0 0 1 2 0L14.5 3l3 1-.3 1.8a7 7 0 0 1 1.5 1.5l1.8-.3 1 3-1.5 1a7 7 0 0 1 0 2l1.5 1-1 3-1.8-.3a7 7 0 0 1-1.5 1.5l.3 1.8-3 1-1.5-1.5a7 7 0 0 1-2 0L9.5 21l-3-1 .3-1.8A6.9 6.9 0 0 1 5.3 16.7L3.5 17l-1-3 1.5-1a7 7 0 0 1 0-2z',
+    home: 'M3 11l9-8 9 8M5 10v10h5v-6h4v6h5V10',
+    'chevron-right': 'M9 5l7 7-7 7',
+    'chevron-down': 'M5 9l7 7 7-7',
+    check: 'M4 12l5 5 11-11',
+    close: 'M5 5l14 14M19 5L5 19',
+    warning: 'M12 3l10 18H2L12 3zM12 9v5M12 17.5v.5',
+    info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v6M12 7.5v.5',
+    power: 'M12 3v9M7 6a8 8 0 1 0 10 0',
+    refresh: 'M4 12a8 8 0 0 1 14-5l2 2M20 12a8 8 0 0 1-14 5l-2-2M18 3v4h-4M6 21v-4h4',
+    play: 'M7 4l13 8-13 8z',
+    pause: 'M8 4v16M16 4v16',
+    stop: 'M5 5h14v14H5z',
+    wrench: 'M21 5a4 4 0 0 1-5 5L7 19l-3-3 9-9a4 4 0 0 1 5-5l-3 3 1 1 3-3z',
+};
+export class IndIcon {
+    /** Built-in icon name. Omit and use the default slot to pass a custom SVG. */
+    name;
+    /** Size. */
+    size = 'md';
+    /** Accessible label. When omitted the icon is decorative (aria-hidden). */
+    label;
+    render() {
+        const decorative = !this.label;
+        const d = this.name ? PATHS[this.name] : undefined;
+        return (h(Host, { key: '09bb726a67eb425c8bd200ac5371da86bab85b63', role: decorative ? 'presentation' : 'img', "aria-label": this.label, "aria-hidden": decorative ? 'true' : undefined }, d ? (h("svg", { class: "icon", part: "icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: d }))) : (h("slot", null))));
+    }
+    static get is() { return "ind-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"alarm\" | \"bell\" | \"check\" | \"chevron-down\" | \"chevron-right\" | \"close\" | \"gear\" | \"home\" | \"info\" | \"pause\" | \"play\" | \"power\" | \"refresh\" | \"stop\" | \"warning\" | \"wrench\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/icon/icon.tsx",
+                            "id": "src/components/atoms/icon/icon.tsx::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Built-in icon name. Omit and use the default slot to pass a custom SVG."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "IconSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/icon/icon.tsx",
+                            "id": "src/components/atoms/icon/icon.tsx::IconSize"
+                        }
+                    }
+                },
+                "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": "Accessible label. When omitted the icon is decorative (aria-hidden)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAsBzD,MAAM,KAAK,GAA6B;IACtC,KAAK,EAAE,yEAAyE;IAChF,IAAI,EAAE,yEAAyE;IAC/E,IAAI,EAAE,iUAAiU;IACvU,IAAI,EAAE,qCAAqC;IAC3C,eAAe,EAAE,cAAc;IAC/B,cAAc,EAAE,cAAc;IAC9B,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,uCAAuC;IAChD,IAAI,EAAE,yDAAyD;IAC/D,KAAK,EAAE,4BAA4B;IACnC,OAAO,EAAE,wEAAwE;IACjF,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,+DAA+D;CACxE,CAAC;AAOF,MAAM,OAAO,OAAO;IAClB,8EAA8E;IACrD,IAAI,CAAY;IACzC,YAAY;IACa,IAAI,GAAa,IAAI,CAAC;IAC/C,2EAA2E;IACnE,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACnD,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,gBAAc,IAAI,CAAC,KAAK,iBAAe,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAClH,CAAC,CAAC,CAAC,CAAC,CACH,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;YAClE,YAAM,CAAC,EAAE,CAAC,GAAI,CACV,CACP,CAAC,CAAC,CAAC,CACF,eAAQ,CACT,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type IconName =\n  | 'alarm'\n  | 'bell'\n  | 'gear'\n  | 'home'\n  | 'chevron-right'\n  | 'chevron-down'\n  | 'check'\n  | 'close'\n  | 'warning'\n  | 'info'\n  | 'power'\n  | 'refresh'\n  | 'play'\n  | 'pause'\n  | 'stop'\n  | 'wrench';\n\nexport type IconSize = 'sm' | 'md' | 'lg';\n\nconst PATHS: Record<IconName, string> = {\n  alarm: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',\n  bell: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',\n  gear: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 12l-1.5-1 1-3 1.8.3a6.9 6.9 0 0 1 1.5-1.5L6.5 4l3-1L11 4.5a7 7 0 0 1 2 0L14.5 3l3 1-.3 1.8a7 7 0 0 1 1.5 1.5l1.8-.3 1 3-1.5 1a7 7 0 0 1 0 2l1.5 1-1 3-1.8-.3a7 7 0 0 1-1.5 1.5l.3 1.8-3 1-1.5-1.5a7 7 0 0 1-2 0L9.5 21l-3-1 .3-1.8A6.9 6.9 0 0 1 5.3 16.7L3.5 17l-1-3 1.5-1a7 7 0 0 1 0-2z',\n  home: 'M3 11l9-8 9 8M5 10v10h5v-6h4v6h5V10',\n  'chevron-right': 'M9 5l7 7-7 7',\n  'chevron-down': 'M5 9l7 7 7-7',\n  check: 'M4 12l5 5 11-11',\n  close: 'M5 5l14 14M19 5L5 19',\n  warning: 'M12 3l10 18H2L12 3zM12 9v5M12 17.5v.5',\n  info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v6M12 7.5v.5',\n  power: 'M12 3v9M7 6a8 8 0 1 0 10 0',\n  refresh: 'M4 12a8 8 0 0 1 14-5l2 2M20 12a8 8 0 0 1-14 5l-2-2M18 3v4h-4M6 21v-4h4',\n  play: 'M7 4l13 8-13 8z',\n  pause: 'M8 4v16M16 4v16',\n  stop: 'M5 5h14v14H5z',\n  wrench: 'M21 5a4 4 0 0 1-5 5L7 19l-3-3 9-9a4 4 0 0 1 5-5l-3 3 1 1 3-3z',\n};\n\n@Component({\n  tag: 'ind-icon',\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class IndIcon {\n  /** Built-in icon name. Omit and use the default slot to pass a custom SVG. */\n  @Prop({ reflect: true }) name?: IconName;\n  /** Size. */\n  @Prop({ reflect: true }) size: IconSize = 'md';\n  /** Accessible label. When omitted the icon is decorative (aria-hidden). */\n  @Prop() label?: string;\n\n  render() {\n    const decorative = !this.label;\n    const d = this.name ? PATHS[this.name] : undefined;\n    return (\n      <Host role={decorative ? 'presentation' : 'img'} aria-label={this.label} aria-hidden={decorative ? 'true' : undefined}>\n        {d ? (\n          <svg class=\"icon\" part=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d={d} />\n          </svg>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -36,7 +36,7 @@ export class IndInput {
         this.indChange.emit(v);
     };
     render() {
-        return (h(Host, { key: 'bb19139e219e04af88a8d60ef7189b1fe75cb9fa' }, h("label", { key: '95047b762b29dddf02e1236c4febb7bd175a5375', class: "wrap", part: "wrap" }, this.label && h("span", { key: '3dfe06b89e8022fc4dc74e29d73edd4684ca7305', class: "label", part: "label" }, this.label), h("span", { key: '4714f42749f9018c7a472c85d4ce59537ac60b1f', class: { field: true, 'is-focus': this.hasFocus }, part: "field" }, h("slot", { key: '97e0af1ba3eec75684483fa1fb76d08eec886075', name: "prefix" }), h("input", { key: '3764cd35fb827430a05af94b3fd2164d1f812cfa', part: "input", class: "input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, pattern: this.pattern, autocomplete: this.autocomplete, inputMode: this.mode, "aria-invalid": this.invalid ? 'true' : 'false', onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false), onInput: this.onInput, onChange: this.onChange }), h("slot", { key: '1fefcb0e2fa6efd3385aef0bbf8b228578915c3a', name: "suffix" })))));
+        return (h(Host, { key: 'dcf35aa853a7a2add80577d244296620bb261803' }, h("label", { key: '348fb0868b752944e27ff1154f975a044e09419b', class: "wrap", part: "wrap" }, this.label && h("span", { key: '1d84bbb1ce396de514050b47e84187067be64217', class: "label", part: "label" }, this.label), h("span", { key: '774e1b7bc60d21ddb8288806687246652d4e3c68', class: { field: true, 'is-focus': this.hasFocus }, part: "field" }, h("slot", { key: '59316cc9345755e9257c8c0111dbb7708a523ca9', name: "prefix" }), h("input", { key: '58fd74afcef00c48c587029c5c4d68c1bb9bc999', part: "input", class: "input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, pattern: this.pattern, autocomplete: this.autocomplete, inputMode: this.mode, "aria-invalid": this.invalid ? 'true' : 'false', onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false), onInput: this.onInput, onChange: this.onChange }), h("slot", { key: 'a2e65d9d230e5ceed0a5732ab17892c3b239535f', name: "suffix" })))));
     }
     static get is() { return "ind-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,71 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  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));
+  --_size: 44px;
+}
+
+:host([size="sm"]) { --_size: 32px; }
+:host([size="lg"]) { --_size: 64px; }
+
+.knob {
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 35%, #3a434f, #1b222c 75%);
+  border: 1px solid var(--ind-surface-border-strong, #5a6776);
+  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5);
+  cursor: ns-resize;
+  touch-action: none;
+  position: relative;
+}
+
+:host([disabled]) .knob { cursor: not-allowed; opacity: 0.5; }
+
+.knob:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);
+  outline-offset: 3px;
+}
+
+.dial {
+  position: absolute;
+  inset: 0;
+  transition: transform var(--ind-motion-duration-fast, 120ms) ease;
+}
+
+.pointer {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  width: 2px;
+  height: 32%;
+  transform: translateX(-50%);
+  background: var(--ind-button-primary-bg, #60a5fa);
+  border-radius: 1px;
+}
+
+.caption {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: var(--ind-font-line-height-tight, 1.1);
+}
+
+.label {
+  font-size: var(--ind-font-size-xs, 10px);
+  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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dial { transition: none; }
+}