@ind-ds/core 0.1.1 → 0.2.0

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

@@ -0,0 +1,190 @@
+import { h, Host } from "@stencil/core";
+export class IndToggle {
+    /** On/off state. */
+    checked = false;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible label. Also the accessible name. */
+    label;
+    /** Text shown for the on state (in-track). */
+    textOn;
+    /** Text shown for the off state (in-track). */
+    textOff;
+    /** Fires when the state changes. */
+    indChange;
+    toggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.indChange.emit(this.checked);
+    };
+    onKey = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'e6963c1c5825f77432a6ee86a5331c73c038dc2d' }, h("button", { key: 'd6fc26eba0b9c4afb63a5ff4aaf3acfcd35478dc', type: "button", class: "control", part: "control", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-label": this.label, disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKey }, h("span", { key: '926f8adf483f6f336665e5fc56a655de039bd960', class: "track", part: "track" }, (this.textOn || this.textOff) && (h("span", { key: '6c176290532cff821d8f0eaac895528e8db3766a', class: "text", part: "text", "aria-hidden": "true" }, this.checked ? this.textOn : this.textOff)), h("span", { key: '6c87d49ca15e9f0000edd6c74291d691efd38c8f', class: "thumb", part: "thumb" })), this.label && h("span", { key: 'a0caa6d714b57d701187bf669291b9989a4b5f5d', class: "label", part: "label" }, this.label))));
+    }
+    static get is() { return "ind-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "On/off state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "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": "ToggleSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ToggleSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/toggle/toggle.tsx",
+                            "id": "src/components/atoms/toggle/toggle.tsx::ToggleSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label. Also the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "textOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown for the on state (in-track)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-on"
+            },
+            "textOff": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown for the off state (in-track)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-off"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/atoms/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,SAAS;IACpB,oBAAoB;IACoB,OAAO,GAAY,KAAK,CAAC;IACjE,gBAAgB;IACS,QAAQ,GAAY,KAAK,CAAC;IACnD,YAAY;IACa,IAAI,GAAe,IAAI,CAAC;IACjD,+CAA+C;IACvC,KAAK,CAAU;IACvB,8CAA8C;IACtC,MAAM,CAAU;IACxB,+CAA+C;IACvC,OAAO,CAAU;IAEzB,oCAAoC;IAC3B,SAAS,CAAyB;IAEnC,MAAM,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,CAAC;IAEM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;QACnC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,KAAK;gBAErB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;oBAC7B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAChC,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,IAC9C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrC,CACR;oBACD,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAG,CAC9B;gBACN,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC5D,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-toggle',\n  styleUrl: 'toggle.css',\n  shadow: true,\n})\nexport class IndToggle {\n  /** On/off state. */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: ToggleSize = 'md';\n  /** Visible label. Also the accessible name. */\n  @Prop() label?: string;\n  /** Text shown for the on state (in-track). */\n  @Prop() textOn?: string;\n  /** Text shown for the off state (in-track). */\n  @Prop() textOff?: string;\n\n  /** Fires when the state changes. */\n  @Event() indChange!: EventEmitter<boolean>;\n\n  private toggle = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.indChange.emit(this.checked);\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"control\"\n          part=\"control\"\n          role=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-label={this.label}\n          disabled={this.disabled}\n          onClick={this.toggle}\n          onKeyDown={this.onKey}\n        >\n          <span class=\"track\" part=\"track\">\n            {(this.textOn || this.textOff) && (\n              <span class=\"text\" part=\"text\" aria-hidden=\"true\">\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            )}\n            <span class=\"thumb\" part=\"thumb\" />\n          </span>\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/tree-node/tree-node.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  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));
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+  padding: 2px var(--ind-spacing-3, 6px);
+  cursor: pointer;
+  border-radius: var(--ind-radius-sm, 2px);
+  user-select: none;
+}
+
+.row:hover { background: var(--ind-surface-raised, #1b222c); }
+
+.row:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);
+  outline-offset: -2px;
+}
+
+:host([selected]) .row {
+  background: color-mix(in srgb, var(--ind-button-primary-bg, #2563eb) 28%, transparent);
+}
+
+.indent { width: var(--_indent, 0); flex: none; }
+
+.twisty {
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--ind-surface-text-muted, #7a8694);
+  flex: none;
+}
+.twisty.is-leaf { cursor: default; }
+
+.twisty svg {
+  width: 12px;
+  height: 12px;
+  transition: transform var(--ind-motion-duration-fast, 120ms) ease;
+}
+.twisty svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+:host([expanded]) .twisty svg { transform: rotate(90deg); }
+
+.icon { display: inline-flex; align-items: center; }
+.icon:empty { display: none; }
+
+.label { white-space: nowrap; }
+
+.children { display: block; }
+
+@media (prefers-reduced-motion: reduce) {
+  .twisty svg { transition: none; }
+}

package/dist/collection/components/atoms/tree-node/tree-node.js

@@ -0,0 +1,193 @@
+import { h, Host } from "@stencil/core";
+export class IndTreeNode {
+    /** Nesting depth (0 = root) — drives the indent. */
+    level = 0;
+    /** Expanded state (ignored for leaf nodes). */
+    expanded = false;
+    /** Leaf node — no twisty, not expandable. */
+    leaf = false;
+    /** Selected state. */
+    selected = false;
+    /** Visible text. Use the default slot for richer content. */
+    label;
+    /** Fires when the row is selected. */
+    indSelect;
+    /** Fires when the twisty toggles expansion. */
+    indToggle;
+    toggle = (e) => {
+        e.stopPropagation();
+        if (this.leaf)
+            return;
+        this.expanded = !this.expanded;
+        this.indToggle.emit(this.expanded);
+    };
+    select = () => {
+        this.indSelect.emit();
+    };
+    onKey = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.select();
+        }
+        else if (e.key === 'ArrowRight' && !this.leaf && !this.expanded) {
+            this.expanded = true;
+            this.indToggle.emit(true);
+        }
+        else if (e.key === 'ArrowLeft' && !this.leaf && this.expanded) {
+            this.expanded = false;
+            this.indToggle.emit(false);
+        }
+    };
+    render() {
+        return (h(Host, { key: '412fc1efe18db56c9cc0a2fc8ba9564bf9c4d7bb' }, h("div", { key: '05392b3770fd8add45281948656850dfe792a5d1', class: "row", part: "row", role: "treeitem", "aria-expanded": this.leaf ? undefined : this.expanded ? 'true' : 'false', "aria-selected": this.selected ? 'true' : 'false', tabindex: "0", style: { '--_indent': `${this.level * 16}px` }, onClick: this.select, onKeyDown: this.onKey }, h("span", { key: '63eec9a57c75ad32154ef4b70a7bcff647e4a2de', class: "indent", "aria-hidden": "true" }), this.leaf ? (h("span", { class: "twisty is-leaf", part: "twisty", "aria-hidden": "true" })) : (h("button", { type: "button", class: "twisty", part: "twisty", "aria-label": this.expanded ? 'Collapse' : 'Expand', onClick: this.toggle }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M9 5l7 7-7 7" })))), h("span", { key: 'd5c26f9bd8a479fb0dc261a0e2e0f147d978245f', class: "icon", part: "icon" }, h("slot", { key: '9978ea0bc931f6611e95cde6d36328cd0418e4dc', name: "icon" })), h("span", { key: 'd6d89358b351f02fa968ffc83e4a1ed60ae6f467', class: "label", part: "label" }, this.label, h("slot", { key: '58e1550e39cde11164b6266c0e298e89b6eac826' }))), !this.leaf && this.expanded && (h("div", { key: 'c8e965f709868143d6f7a54a663e73cb41c4c498', class: "children", part: "children", role: "group" }, h("slot", { key: 'f4555d55f582041bc74f7b26975123803d9aca2f', name: "children" })))));
+    }
+    static get is() { return "ind-tree-node"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree-node.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree-node.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nesting depth (0 = root) \u2014 drives the indent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "0"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expanded state (ignored for leaf nodes)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "leaf": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Leaf node \u2014 no twisty, not expandable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "leaf",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible text. Use the default slot for richer content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indSelect",
+                "name": "indSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the row is selected."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indToggle",
+                "name": "indToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the twisty toggles expansion."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=tree-node.js.map

package/dist/collection/components/atoms/tree-node/tree-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.js","sourceRoot":"","sources":["../../../../src/components/atoms/tree-node/tree-node.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ind-tree-node',\n  styleUrl: 'tree-node.css',\n  shadow: true,\n})\nexport class IndTreeNode {\n  /** Nesting depth (0 = root) — drives the indent. */\n  @Prop() level: number = 0;\n  /** Expanded state (ignored for leaf nodes). */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n  /** Leaf node — no twisty, not expandable. */\n  @Prop({ reflect: true }) leaf: boolean = false;\n  /** Selected state. */\n  @Prop({ reflect: true }) selected: boolean = false;\n  /** Visible text. Use the default slot for richer content. */\n  @Prop() label?: string;\n\n  /** Fires when the row is selected. */\n  @Event() indSelect!: EventEmitter<void>;\n  /** Fires when the twisty toggles expansion. */\n  @Event() indToggle!: EventEmitter<boolean>;\n\n  private toggle = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.leaf) return;\n    this.expanded = !this.expanded;\n    this.indToggle.emit(this.expanded);\n  };\n\n  private select = () => {\n    this.indSelect.emit();\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); }\n    else if (e.key === 'ArrowRight' && !this.leaf && !this.expanded) { this.expanded = true; this.indToggle.emit(true); }\n    else if (e.key === 'ArrowLeft' && !this.leaf && this.expanded) { this.expanded = false; this.indToggle.emit(false); }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"row\"\n          part=\"row\"\n          role=\"treeitem\"\n          aria-expanded={this.leaf ? undefined : this.expanded ? 'true' : 'false'}\n          aria-selected={this.selected ? 'true' : 'false'}\n          tabindex=\"0\"\n          style={{ '--_indent': `${this.level * 16}px` }}\n          onClick={this.select}\n          onKeyDown={this.onKey}\n        >\n          <span class=\"indent\" aria-hidden=\"true\" />\n          {this.leaf ? (\n            <span class=\"twisty is-leaf\" part=\"twisty\" aria-hidden=\"true\" />\n          ) : (\n            <button type=\"button\" class=\"twisty\" part=\"twisty\" aria-label={this.expanded ? 'Collapse' : 'Expand'} onClick={this.toggle}>\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 5l7 7-7 7\" /></svg>\n            </button>\n          )}\n          <span class=\"icon\" part=\"icon\"><slot name=\"icon\" /></span>\n          <span class=\"label\" part=\"label\">{this.label}<slot /></span>\n        </div>\n        {!this.leaf && this.expanded && (\n          <div class=\"children\" part=\"children\" role=\"group\">\n            <slot name=\"children\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/unit-label/unit-label.css

@@ -0,0 +1,16 @@
+:host {
+  display: inline;
+  --_size: var(--ind-font-size-sm, 11px);
+}
+
+:host([size="sm"]) { --_size: var(--ind-font-size-xs, 10px); }
+:host([size="md"]) { --_size: var(--ind-font-size-sm, 11px); }
+:host([size="lg"]) { --_size: var(--ind-font-size-base, 12px); }
+
+.unit {
+  font-family: var(--ind-font-family-sans, system-ui, sans-serif);
+  font-size: var(--_size);
+  font-weight: var(--ind-font-weight-regular, 400);
+  color: var(--ind-surface-text-muted, #7a8694);
+  white-space: nowrap;
+}

package/dist/collection/components/atoms/unit-label/unit-label.js

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+export class IndUnitLabel {
+    /** Engineering unit text, e.g. "bar", "°C", "m³/h". Falls back to the slot. */
+    unit;
+    /** Size. */
+    size = 'md';
+    render() {
+        return (h(Host, { key: 'a9e238538522e256db732662118527fdc2673283' }, h("span", { key: 'd5398ae306ff94e2f9ccfd608e9f28f03b749be7', class: "unit", part: "unit" }, this.unit ?? h("slot", { key: '6791682a0b3ab6e537a7ad4dd321a5d279a3e38d' }))));
+    }
+    static get is() { return "ind-unit-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["unit-label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["unit-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Engineering unit text, e.g. \"bar\", \"\u00B0C\", \"m\u00B3/h\". Falls back to the slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UnitLabelSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "UnitLabelSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/unit-label/unit-label.tsx",
+                            "id": "src/components/atoms/unit-label/unit-label.tsx::UnitLabelSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=unit-label.js.map

package/dist/collection/components/atoms/unit-label/unit-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-label.js","sourceRoot":"","sources":["../../../../src/components/atoms/unit-label/unit-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,YAAY;IACvB,+EAA+E;IACvE,IAAI,CAAU;IACtB,YAAY;IACa,IAAI,GAAkB,IAAI,CAAC;IAEpD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAC3B,IAAI,CAAC,IAAI,IAAI,8DAAQ,CACjB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type UnitLabelSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-unit-label',\n  styleUrl: 'unit-label.css',\n  shadow: true,\n})\nexport class IndUnitLabel {\n  /** Engineering unit text, e.g. \"bar\", \"°C\", \"m³/h\". Falls back to the slot. */\n  @Prop() unit?: string;\n  /** Size. */\n  @Prop({ reflect: true }) size: UnitLabelSize = 'md';\n\n  render() {\n    return (\n      <Host>\n        <span class=\"unit\" part=\"unit\">\n          {this.unit ?? <slot />}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -28,7 +28,7 @@ export class IndValue {
     render() {
         const accessibleName = this.label ?? this.tag ?? 'process value';
         const alarmSuffix = this.alarm !== 'none' ? `, alarm ${this.alarm}` : '';
-        return (h(Host, { key: 'cda5c03f956f161e618626d2aef0aac40409281a', role: "group", "aria-label": `${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`, "aria-live": this.alarm === 'high-high' ? 'assertive' : 'polite' }, (this.tag || this.label) && (h("div", { key: '8fe9dfd6fb733e6ba0e7e607efc5d023736cca9e', class: "header", part: "header" }, this.tag && h("span", { key: 'adec308000bce2cee378504fffedf8662a091c8c', class: "tag", part: "tag" }, this.tag), this.label && h("span", { key: '4de4405dfbb798ca1781ade6fd7e1419089226ca', class: "label", part: "label" }, this.label))), h("div", { key: 'b7f9e66b333a6d7e3341585af4bba571dae65bf6', class: "readout", part: "readout" }, h("span", { key: 'c6a942f2a64187cf9acd75b112d262928556d84b', class: "number", part: "number" }, this.formatted()), this.unit && h("span", { key: '39714e17d50497d59afe6e81eca9b51cf2182332', class: "unit", part: "unit" }, this.unit), this.trend !== 'none' && (h("span", { key: '1e4f671cc86bf24617f26e3db4eb3709160291b3', class: "trend", part: "trend", "aria-hidden": "true" }, this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆')))));
+        return (h(Host, { key: '0438f53ccfd76d02f30a9d3d2df93ee422f5daa6', role: "group", "aria-label": `${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`, "aria-live": this.alarm === 'high-high' ? 'assertive' : 'polite' }, (this.tag || this.label) && (h("div", { key: '02d0e59899fe4a5e9261efbe11f998411992e79a', class: "header", part: "header" }, this.tag && h("span", { key: '673d7544ac10b9136023e126079e1966a5bfb3e7', class: "tag", part: "tag" }, this.tag), this.label && h("span", { key: '9092698fca1a1790de4a52fa741bde462289436f', class: "label", part: "label" }, this.label))), h("div", { key: '2387e1e924c1ee41cc38daf28de39466bfd65592', class: "readout", part: "readout" }, h("span", { key: '31748fea6210035a2a03fa588b873b1f3b1483d6', class: "number", part: "number" }, this.formatted()), this.unit && h("span", { key: 'c21057af583f90f4ba8e59d2964564f6484d58b1', class: "unit", part: "unit" }, this.unit), this.trend !== 'none' && (h("span", { key: 'cf485adac4029ace34c24bc5e1712287f2063300', class: "trend", part: "trend", "aria-hidden": "true" }, this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆')))));
     }
     static get is() { return "ind-value"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class IndValve {
     tag;
     render() {
         const name = this.label ?? this.tag ?? 'valve';
-        return (h(Host, { key: 'f0a9a4f7a1401c7ffc091bb10e52d13854e0fd42', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '1ba7a6466df31802d8ca141016670c6c301bc066', class: "symbol", part: "symbol", viewBox: "0 0 32 16", "aria-hidden": "true" }, h("polygon", { key: '89f77217a84e53606ce38e126c8ce87358fafb8b', class: "left", part: "left", points: "2,2 2,14 16,8" }), h("polygon", { key: '12ca5cd5ad1c117c48cc54275fe98509daba3267', class: "right", part: "right", points: "30,2 30,14 16,8" }), h("line", { key: '24510448beca41c7ab421b61c06de63840bddf99', class: "stem", part: "stem", x1: "16", y1: "2", x2: "16", y2: "14" })), (this.tag || this.label) && (h("div", { key: '18b6f7a60c0fdb8b5b7a688d5f6151811a9d587b', class: "caption", part: "caption" }, this.tag && h("span", { key: '7a8eb4c486380e3cb1a92e1ab3bdcbd2689cbd50', class: "tag", part: "tag" }, this.tag), this.label && h("span", { key: '6281ca7b4ae18e455a28b18890d28c58f38c14c1', class: "label", part: "label" }, this.label)))));
+        return (h(Host, { key: 'bd9ae874884967a2162437241683e5789e2ff14d', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '361db0923f6fdffb590957a3124e53e2f723a8c9', class: "symbol", part: "symbol", viewBox: "0 0 32 16", "aria-hidden": "true" }, h("polygon", { key: 'e32860333e95d358c2c95c79cc4beed6905e8561', class: "left", part: "left", points: "2,2 2,14 16,8" }), h("polygon", { key: '21f199edc91aa74af291a42141c688aa3b6879c0', class: "right", part: "right", points: "30,2 30,14 16,8" }), h("line", { key: '8210963f465b87635e26636c2473560e85d8e71f', class: "stem", part: "stem", x1: "16", y1: "2", x2: "16", y2: "14" })), (this.tag || this.label) && (h("div", { key: '9de1eb5632281114cacda7ed616a30ffee3bd0f7', class: "caption", part: "caption" }, this.tag && h("span", { key: '892735f7a70a476cbf65a55264ee27c57591b7fd', class: "tag", part: "tag" }, this.tag), this.label && h("span", { key: '78a09b9f107c1b4907e376bb4407a710236b78e0', class: "label", part: "label" }, this.label)))));
     }
     static get is() { return "ind-valve"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/xy-point/xy-point.css

@@ -0,0 +1,49 @@
+:host {
+  display: inline-block;
+  width: var(--ind-xy-size, 120px);
+  height: var(--ind-xy-size, 120px);
+  --_accent: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+}
+
+:host([variant="running"]) { --_accent: var(--ind-state-running-bg, #16a34a); }
+:host([variant="warning"])  { --_accent: var(--ind-state-warning-bg, #f59e0b); }
+:host([variant="fault"])    { --_accent: var(--ind-state-fault-bg, #dc2626); }
+
+.plot {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.field {
+  fill: var(--ind-surface-sunken, light-dark(#fff, #000));
+  stroke: var(--ind-surface-border-default, #2a3340);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.axis {
+  stroke: var(--ind-surface-border-subtle, #2a3340);
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.trail {
+  fill: none;
+  stroke: color-mix(in srgb, var(--_accent) 50%, transparent);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.point {
+  fill: var(--_accent);
+  stroke: var(--ind-surface-panel, #11161c);
+  stroke-width: 1.5;
+  transition: cx var(--ind-motion-duration-base, 200ms) ease, cy var(--ind-motion-duration-base, 200ms) ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .point { transition: none; }
+}