npm - @ind-ds/core - Versions diffs - 0.1.1 → 0.2.1 - Mend

@ind-ds/core 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1426) hide show

package/dist/cjs/ind-recipe-selector.cjs.entry.js ADDED Viewed

@@ -0,0 +1,46 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+const recipeSelectorCss = () => `:host{min-width:240px}.row{display:flex;align-items:flex-end;gap:var(--ind-spacing-4, 8px)}.select{flex:1 1 auto}`;
+const IndRecipeSelector = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+        this.indLoad = index.createEvent(this, "indLoad");
+    }
+    /** Control label. */
+    label = 'Recipe';
+    /** Available recipes. */
+    options = [];
+    /** Selected recipe value (two-way). */
+    value;
+    placeholder = 'Select recipe…';
+    disabled = false;
+    loadLabel = 'Load';
+    /** Fires when the selection changes. */
+    indChange;
+    /** Fires when the operator loads the selected recipe. */
+    indLoad;
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    onLoad = () => {
+        if (this.value)
+            this.indLoad.emit(this.value);
+    };
+    render() {
+        return (index.h(index.Host, { key: '61ac596cfd2c70314612f2fe0d74820809619d07' }, index.h("span", { key: 'f24e008646cda3e75eb767712be048486b8bfb98', class: "card-title", part: "label" }, this.label), index.h("div", { key: '9c49c3a8a4a79fb4035d788de2967c46df5035fb', class: "row", part: "row" }, index.h("ind-select", { key: 'f263602837657a924170225007485c4c1d416039', class: "select", part: "select", options: this.options, value: this.value, placeholder: this.placeholder, disabled: this.disabled, label: this.label, size: "md", onIndChange: this.onChange }), index.h("ind-button", { key: '6ec7f8b8b50e3565eaa711c3da1b3d40b811a996', variant: "primary", size: "md", label: this.loadLabel, disabled: this.disabled || !this.value, onIndActivate: this.onLoad }))));
+    }
+};
+IndRecipeSelector.style = cardCss() + recipeSelectorCss();
+exports.ind_recipe_selector = IndRecipeSelector;
+//# sourceMappingURL=ind-recipe-selector.entry.cjs.js.map
+//# sourceMappingURL=ind-recipe-selector.cjs.entry.js.map

package/dist/cjs/ind-recipe-selector.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-recipe-selector.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,iBAAiB,GAAG,MAAM,CAAC,iHAAiH,CAAC;;MCatI,iBAAiB,GAAA,MAAA;;;;;;;IAEpB,KAAK,GAAW,QAAQ;;IAExB,OAAO,GAAmB,EAAE;;AAEX,IAAA,KAAK;IACtB,WAAW,GAAW,gBAAgB;IACtC,QAAQ,GAAY,KAAK;IACzB,SAAS,GAAW,MAAM;;AAGzB,IAAA,SAAS;;AAET,IAAA,OAAO;AAER,IAAA,QAAQ,GAAG,CAAC,CAAsB,KAAI;QAC5C,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC/B,KAAC;IAEO,MAAM,GAAG,MAAK;QACpB,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAC/C,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACzDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EACzBA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAA,CAC1B,EACFA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EACtC,aAAa,EAAE,IAAI,CAAC,MAAM,EAAA,CAC1B,CACE,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/card.css?tag=ind-recipe-selector&encapsulation=shadow","src/components/molecules/recipe-selector/recipe-selector.css?tag=ind-recipe-selector&encapsulation=shadow","src/components/molecules/recipe-selector/recipe-selector.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-5, 12px);\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.card-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n font-size: var(--ind-font-size-xs, 10px);\n font-weight: var(--ind-font-weight-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n border-color: var(--ind-state-fault-bg, #dc2626);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n",":host {\n min-width: 240px;\n}\n\n.row {\n display: flex;\n align-items: flex-end;\n gap: var(--ind-spacing-4, 8px);\n}\n\n.select {\n flex: 1 1 auto;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { SelectOption } from '../../atoms/select/select';\n\n/**\n * Recipe / program picker: an `<ind-select>` plus a Load command. Emits\n * `indChange` as the selection changes and `indLoad` when the operator\n * commits the recipe to the controller.\n */\n@Component({\n tag: 'ind-recipe-selector',\n styleUrls: ['../_shared/card.css', 'recipe-selector.css'],\n shadow: true,\n})\nexport class IndRecipeSelector {\n /** Control label. */\n @Prop() label: string = 'Recipe';\n /** Available recipes. */\n @Prop() options: SelectOption[] = [];\n /** Selected recipe value (two-way). */\n @Prop({ mutable: true }) value?: string;\n @Prop() placeholder: string = 'Select recipe…';\n @Prop() disabled: boolean = false;\n @Prop() loadLabel: string = 'Load';\n\n /** Fires when the selection changes. */\n @Event() indChange!: EventEmitter<string>;\n /** Fires when the operator loads the selected recipe. */\n @Event() indLoad!: EventEmitter<string>;\n\n private onChange = (e: CustomEvent<string>) => {\n e.stopPropagation();\n this.value = e.detail;\n this.indChange.emit(e.detail);\n };\n\n private onLoad = () => {\n if (this.value) this.indLoad.emit(this.value);\n };\n\n render() {\n return (\n <Host>\n <span class=\"card-title\" part=\"label\">{this.label}</span>\n <div class=\"row\" part=\"row\">\n <ind-select\n class=\"select\"\n part=\"select\"\n options={this.options}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n label={this.label}\n size=\"md\"\n onIndChange={this.onChange}\n />\n <ind-button\n variant=\"primary\"\n size=\"md\"\n label={this.loadLabel}\n disabled={this.disabled || !this.value}\n onIndActivate={this.onLoad}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ind-scara-canvas.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 const scaraCanvasCss = () => `:host{display:block;width:var(--ind-size-canvas-robot-width, 320px);height:var(--ind-size-canvas-robot-height, 220px);font-family:var(--ind-font-family-mono)}svg{display:block;width:100%;height:100%;background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px)}.envelope{fill:none;stroke:var(--ind-surface-border-subtle);stroke-dasharray:2 4}.envelope-inner{stroke-dasharray:1 3;opacity:0.6}.axis{stroke:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));stroke-width:1}.axis-label{font-family:var(--ind-font-family-mono);font-size:9px;fill:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.link{stroke-width:5;stroke-linecap:round;transition:stroke 240ms}.link-1{stroke:var(--ind-state-running-bg, #16a34a)}.link-2{stroke:var(--ind-state-running-border, #4ade80)}.wrist{stroke:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));stroke-width:2;stroke-linecap:round}.joint{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));stroke:var(--ind-surface-border-strong);stroke-width:1}.joint.base{fill:var(--ind-state-stopped-bg, #5a6776);stroke:var(--ind-state-stopped-border, #8390a0)}.joint.effector{fill:var(--ind-state-warning-bg, #f59e0b);stroke:var(--ind-state-warning-border, #fcd34d)}.readout text{font-size:9px;fill:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));font-feature-settings:"tnum" 1}.readout tspan{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-weight:700}:host([state="moving"]) .link{stroke-dasharray:4 2;animation:ind-scara-move 1.2s linear infinite}:host([state="fault"]) .link,:host([state="fault"]) .wrist{stroke:var(--ind-state-fault-bg, #dc2626)}:host([state="fault"]) .joint{stroke:var(--ind-state-fault-border, #f87171)}@keyframes ind-scara-move{to{stroke-dashoffset:-12}}@media (prefers-reduced-motion: reduce){:host([state="moving"]) .link{animation:none}}`;
@@ -46,7 +46,7 @@ const IndScaraCanvas = class {
         const wy = eey + wlen * Math.sin(j1r + j2r + j3r);
         const fmt = (n) => n.toFixed(1);
         const fmt0 = (n) => n.toFixed(0);
-        return (index.h(index.Host, { key: '0634f9fc9b197f66bf334c43c38e85c19066d090', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, index.h("svg", { key: 'c16607c36459cfad670b9ab913d46c23daf99883', viewBox: "0 0 320 220", part: "svg" }, index.h("circle", { key: '4fc539c4f5a658ffbb4a2a9594a864e04cd6e9fe', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), index.h("circle", { key: 'b493720a1f306e75dedf48dbd1ccb53850248230', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), index.h("line", { key: 'e28c6dc2ac8e73bac4381bba4dfb4cdb983097c7', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), index.h("line", { key: '5f460ffa1860dd1484100e972d043fd9a1491621', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), index.h("text", { key: 'f4cb4f52a3279f7924aea8d8e642a91be18c38a5', x: "24", y: cy + 3, class: "axis-label" }, "X"), index.h("text", { key: 'd3d18e860674380af133295b763c52bc0adf591b', x: cx + 4, y: "14", class: "axis-label" }, "Y"), index.h("line", { key: 'cfad2277909207ee8a0f99fc73cc823db20f4f8e', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), index.h("line", { key: '2ea11a2363123b2f6876179a2519dc38e9882126', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), index.h("line", { key: 'ad0a714279eea710da7e72a2141aab8165576c34', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), index.h("circle", { key: '89f2b18ca37ed7b0e67b0dee6ed28e0702cafa54', cx: cx, cy: cy, r: "8", class: "joint base" }), index.h("circle", { key: '44129fff9afa9becab60e20ab86933e4a111f854', cx: ex, cy: ey, r: "6", class: "joint elbow" }), index.h("circle", { key: 'bfa99f679b71e28f58c244267e5876c73c9cd6aa', cx: eex, cy: eey, r: "7", class: "joint effector" }), index.h("g", { key: '3753b9117625a70389a12c518330660d943a237f', class: "readout" }, index.h("text", { key: '420f362c46c764ea86fbf12128727600a1454e51', x: "10", y: "198" }, "J1 ", index.h("tspan", { key: '4f1afe52d964043034d93d02eb27b4fc4e7b7f3c' }, fmt(j1), "\u00B0")), index.h("text", { key: '185d3d66158b63322153d59a97d79792e5105957', x: "74", y: "198" }, "J2 ", index.h("tspan", { key: '9c6802f9ee9b2bb8ae3154880e2b7b1ffaf21167' }, fmt(j2), "\u00B0")), index.h("text", { key: 'b6d0a5aa47c925997cc7efa0c1cadd067f184243', x: "138", y: "198" }, "J3 ", index.h("tspan", { key: '5c06a24d477670deeceb6f80e3fb707b39b1b1e3' }, fmt(j3), "\u00B0")), index.h("text", { key: '99c96bf07d28555af967c4cb22a2856c1bdb46fb', x: "202", y: "198" }, "X ", index.h("tspan", { key: '4097b0a431bed9c608f5a43994ad213bfdd56663' }, fmt0(eex - cx))), index.h("text", { key: '56ccbac660ea805f260977c0e64fdf424f1d40fe', x: "254", y: "198" }, "Y ", index.h("tspan", { key: 'd4cfa6e17fc0da8494f8f526e7d5f27cf233dc22' }, fmt0(eey - cy)))))));
+        return (index.h(index.Host, { key: 'e220c57195ecb3c211223a9c678ad6a832c584cd', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, index.h("svg", { key: '7a04466cdcedb3e90bb45d0e86ee1d846f16d2fe', viewBox: "0 0 320 220", part: "svg" }, index.h("circle", { key: '9f1c589063eae5f24c60017e12b45afe5f44a714', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), index.h("circle", { key: 'a6228d89177c0dca40aaf37e85a08e59a04a2488', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), index.h("line", { key: '21e8c9bbf7cf19afa8dd88f909c94e1b458c928d', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), index.h("line", { key: 'bd2a5eca21b2e7fc73828a601870c730cc153bbd', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), index.h("text", { key: 'dab2bdb3cd08468e10220174102d9d198658b26b', x: "24", y: cy + 3, class: "axis-label" }, "X"), index.h("text", { key: '66581ab90a79151eeb64522a5525de10e151d0ad', x: cx + 4, y: "14", class: "axis-label" }, "Y"), index.h("line", { key: '0f8c1214d584f7c9e062927af7ca0425242e6e2b', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), index.h("line", { key: 'e19107929c6f87d3b3e47042f017a73193714b30', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), index.h("line", { key: 'a4cb08318e5c5df59494f6b38477307477313378', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), index.h("circle", { key: '25f7d34a6cc339b46a59437809bce8b7e5b4015b', cx: cx, cy: cy, r: "8", class: "joint base" }), index.h("circle", { key: '0fd90ea8c7b17654d927be0627ad2a0bcdb54c93', cx: ex, cy: ey, r: "6", class: "joint elbow" }), index.h("circle", { key: '528398188bef093e0d931bb23877022fd94900cf', cx: eex, cy: eey, r: "7", class: "joint effector" }), index.h("g", { key: '3fafeb02e9001d091436addbe37c53cfa5281df5', class: "readout" }, index.h("text", { key: '3d5c879baea3c1ef177fbd53153d846eb1158411', x: "10", y: "198" }, "J1 ", index.h("tspan", { key: 'df726f043b2a33357c2525c68a6f23861def214d' }, fmt(j1), "\u00B0")), index.h("text", { key: '68565b08ced6589ecd0a2d84cd738535ebe9fc63', x: "74", y: "198" }, "J2 ", index.h("tspan", { key: '65a013c07a5f9412b603557e39409d34ba5b4812' }, fmt(j2), "\u00B0")), index.h("text", { key: '88712594e3a0ac5e8e506ce467192d0bbcbf4a7f', x: "138", y: "198" }, "J3 ", index.h("tspan", { key: '31f1c81c381841747057257d6e4ee1af9d213dd8' }, fmt(j3), "\u00B0")), index.h("text", { key: '42d91dc495775b5bf29cc455e6d6404c72e2839f', x: "202", y: "198" }, "X ", index.h("tspan", { key: '00d7e9336de136e9ec0dd21ec85fd2a7a9b3ebf9' }, fmt0(eex - cx))), index.h("text", { key: '8ba2b283b6cd83942747e5df2c93d51b4dcb85bd', x: "254", y: "198" }, "Y ", index.h("tspan", { key: '767695ce2b72564dec42536bc618835070d4b1a7' }, fmt0(eey - cy)))))));
     }
 };
 IndScaraCanvas.style = scaraCanvasCss();

package/dist/cjs/ind-select.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 const selectCss = () => `:host{display:inline-block;font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:var(--ind-size-input-md, 32px)}:host([size="sm"]){--_h:var(--ind-size-input-sm, 24px)}:host([size="md"]){--_h:var(--ind-size-input-md, 32px)}:host([size="lg"]){--_h:var(--ind-size-input-lg, 40px)}.wrap{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);min-width:160px}.label{font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-medium, 500);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));letter-spacing:0.04em;text-transform:uppercase}.field{position:relative;display:inline-flex;align-items:center;height:var(--_h);background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);transition:border-color var(--ind-motion-duration-fast, 120ms),     box-shadow   var(--ind-motion-duration-fast, 120ms)}.field:focus-within{border-color:var(--ind-surface-focus-ring, #22d3ee);box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent)}.native{appearance:none;-webkit-appearance:none;flex:1;height:100%;background:transparent;border:none;outline:none;padding:0 calc(var(--ind-spacing-7, 20px) + 8px) 0 var(--ind-spacing-4, 8px);font:inherit;color:inherit;cursor:pointer;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.native::-ms-expand{display:none}.native option{background:var(--ind-surface-panel);color:var(--ind-surface-text-primary)}.caret{position:absolute;right:var(--ind-spacing-4, 8px);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));pointer-events:none;line-height:1}:host([invalid]) .field{border-color:var(--ind-feedback-error-bg, #dc2626)}:host([invalid]) .field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent)}:host([disabled]){opacity:0.55;pointer-events:none}`;
@@ -44,7 +44,7 @@ const IndSelect = class {
     };
     render() {
         const opts = this.parseOptions();
-        return (index.h(index.Host, { key: '283d3e72b726d0b04958b452629df4e579907f05' }, index.h("label", { key: 'dcbfc48d00c096cd6b709e4eb16b687cd07dd350', class: "wrap", part: "wrap" }, this.label && index.h("span", { key: '011fa524c21bfc749cedc70f6ec810ca90a73be2', class: "label", part: "label" }, this.label), index.h("span", { key: '8fc35e3db2cbf2bd9cb780d8e1e1ee395c022d1a', class: "field", part: "field" }, index.h("select", { key: 'a8944a8a82162e4f1b36e9384145dd4e0399afaf', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (index.h("option", { key: '8da45f0c3d932005210e61a216f7f9dfa9581767', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (index.h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), index.h("span", { key: 'ca2db8e41ee4fe3a8ef1a51458189face0450541', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
+        return (index.h(index.Host, { key: 'b13f8d8cba0dcd5a588b0bbfc6cc776d7d793755' }, index.h("label", { key: '4de3dcf49f2545cebdf6e54e8b902d2bac7edb08', class: "wrap", part: "wrap" }, this.label && index.h("span", { key: 'ed9e56dc5a8fbf6ed04c6f404c5b040124e9b45a', class: "label", part: "label" }, this.label), index.h("span", { key: 'f142c37fc9eda28a25416688f9e26126741eb067', class: "field", part: "field" }, index.h("select", { key: '0637c1a84e23da489c038a69d03677c715826a02', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (index.h("option", { key: '7d708bcabecc6295b6b2fe05080399612c7b0041', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (index.h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), index.h("span", { key: 'a74a19b4fa9dd5593ae61e502340ad2839d188c9', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
     }
 };
 IndSelect.style = selectCss();

package/dist/cjs/ind-setpoint-control.cjs.entry.js ADDED Viewed

@@ -0,0 +1,45 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+const setpointControlCss = () => `:host{min-width:200px}`;
+const IndSetpointControl = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    /** Control name (e.g. "Discharge pressure SP"). */
+    label;
+    /** Tag of the loop (e.g. "PIC-101"). */
+    tag;
+    /** Target setpoint (two-way). */
+    value = 0;
+    /** Live process value for comparison. */
+    pv;
+    min = 0;
+    max = 100;
+    step = 1;
+    precision = 1;
+    /** Engineering unit. */
+    unit;
+    disabled = false;
+    /** Fires with the new setpoint when the operator commits a change. */
+    indChange;
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    render() {
+        return (index.h(index.Host, { key: 'a6091cd6497dc1d0abd32698d292749786a7525c' }, index.h("div", { key: '831770826b79f2ca972316ec765a98b285ea091b', class: "card-head" }, index.h("span", { key: '0b054a8d1416af350b64aa32782297a98018db73', class: "card-title", part: "label" }, this.label), this.tag && index.h("span", { key: 'dcea211c1f57ff5293cb529a661fa6d802c7db7c', class: "card-tag", part: "tag" }, this.tag)), index.h("ind-setpoint", { key: '43d80a38384b59031190feeec6dfbe9d52ff1d12', part: "setpoint", value: this.value, pv: this.pv, min: this.min, max: this.max, step: this.step, precision: this.precision, unit: this.unit, disabled: this.disabled, size: "md", onIndChange: this.onChange })));
+    }
+};
+IndSetpointControl.style = cardCss() + setpointControlCss();
+exports.ind_setpoint_control = IndSetpointControl;
+//# sourceMappingURL=ind-setpoint-control.entry.cjs.js.map
+//# sourceMappingURL=ind-setpoint-control.cjs.entry.js.map

package/dist/cjs/ind-setpoint-control.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-setpoint-control.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,kBAAkB,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCW5C,kBAAkB,GAAA,MAAA;;;;;;AAErB,IAAA,KAAK;;AAEL,IAAA,GAAG;;IAEc,KAAK,GAAW,CAAC;;AAElC,IAAA,EAAE;IACF,GAAG,GAAW,CAAC;IACf,GAAG,GAAW,GAAG;IACjB,IAAI,GAAW,CAAC;IAChB,SAAS,GAAW,CAAC;;AAErB,IAAA,IAAI;IACJ,QAAQ,GAAY,KAAK;;AAGxB,IAAA,SAAS;AAEV,IAAA,QAAQ,GAAG,CAAC,CAAsB,KAAI;QAC5C,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC/B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACNA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAA,CAC1B,CACG;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/card.css?tag=ind-setpoint-control&encapsulation=shadow","src/components/molecules/setpoint-control/setpoint-control.css?tag=ind-setpoint-control&encapsulation=shadow","src/components/molecules/setpoint-control/setpoint-control.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-5, 12px);\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.card-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n font-size: var(--ind-font-size-xs, 10px);\n font-weight: var(--ind-font-weight-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n border-color: var(--ind-state-fault-bg, #dc2626);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n",":host {\n min-width: 200px;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n/**\n * Labelled setpoint faceplate. Wraps `<ind-setpoint>` (SP vs PV) with a title\n * and re-emits the committed value so a parent can write it to the controller.\n */\n@Component({\n tag: 'ind-setpoint-control',\n styleUrls: ['../_shared/card.css', 'setpoint-control.css'],\n shadow: true,\n})\nexport class IndSetpointControl {\n /** Control name (e.g. \"Discharge pressure SP\"). */\n @Prop() label!: string;\n /** Tag of the loop (e.g. \"PIC-101\"). */\n @Prop() tag?: string;\n /** Target setpoint (two-way). */\n @Prop({ mutable: true }) value: number = 0;\n /** Live process value for comparison. */\n @Prop() pv?: number;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n @Prop() precision: number = 1;\n /** Engineering unit. */\n @Prop() unit?: string;\n @Prop() disabled: boolean = false;\n\n /** Fires with the new setpoint when the operator commits a change. */\n @Event() indChange!: EventEmitter<number>;\n\n private onChange = (e: CustomEvent<number>) => {\n e.stopPropagation();\n this.value = e.detail;\n this.indChange.emit(e.detail);\n };\n\n render() {\n return (\n <Host>\n <div class=\"card-head\">\n <span class=\"card-title\" part=\"label\">{this.label}</span>\n {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n </div>\n <ind-setpoint\n part=\"setpoint\"\n value={this.value}\n pv={this.pv}\n min={this.min}\n max={this.max}\n step={this.step}\n precision={this.precision}\n unit={this.unit}\n disabled={this.disabled}\n size=\"md\"\n onIndChange={this.onChange}\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ind-setpoint.cjs.entry.js ADDED Viewed

@@ -0,0 +1,67 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const setpointCss = () => `:host{display:inline-block;font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_btn:22px;--_num-w:64px}:host([size="sm"]){--_btn:18px;--_num-w:52px}:host([size="lg"]){--_btn:28px;--_num-w:80px}.frame{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);padding:var(--ind-spacing-3, 6px);background:var(--ind-surface-raised, #1b222c);border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px)}.label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.04em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.rows{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px)}.pv,.sp{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px)}.pv-tag,.sp-tag{font-size:9px;font-weight:var(--ind-font-weight-bold, 700);width:16px;color:var(--ind-surface-text-muted, #7a8694)}.pv-num{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.pv-unit,.sp-unit{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted, #7a8694)}.step{width:var(--_btn);height:var(--_btn);flex:none;border:1px solid var(--ind-surface-border-strong, #5a6776);background:var(--ind-surface-panel, #11161c);color:var(--ind-surface-text-primary, #eef1f5);border-radius:var(--ind-radius-sm, 2px);font-size:14px;line-height:1;cursor:pointer}.step:hover:not(:disabled){background:var(--ind-surface-strong, #5a6776)}.step:disabled{opacity:0.5;cursor:not-allowed}.step:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:1px}.num{width:var(--_num-w);text-align:right;font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);background:var(--ind-surface-sunken, light-dark(#fff, #000));color:var(--ind-surface-text-primary, #eef1f5);border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-sm, 2px);padding:2px 4px}.num:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:0}`;
+const IndSetpoint = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    /** Target setpoint value (editable). */
+    value = 0;
+    /** Live process value, shown for comparison when provided. */
+    pv;
+    /** Minimum. */
+    min;
+    /** Maximum. */
+    max;
+    /** Step for the +/- buttons and keyboard. */
+    step = 1;
+    /** Decimal places to display. */
+    precision;
+    /** Engineering unit. */
+    unit;
+    /** Label / tag. */
+    label;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Fires when the setpoint is committed. */
+    indChange;
+    clamp(v) {
+        if (this.min !== undefined)
+            v = Math.max(this.min, v);
+        if (this.max !== undefined)
+            v = Math.min(this.max, v);
+        return v;
+    }
+    commit(v) {
+        const next = this.clamp(v);
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.indChange.emit(next);
+    }
+    fmt(v) {
+        if (v === undefined || !Number.isFinite(v))
+            return '--';
+        return this.precision !== undefined ? v.toFixed(this.precision) : String(v);
+    }
+    onInput = (e) => {
+        const v = Number(e.target.value);
+        if (Number.isFinite(v))
+            this.commit(v);
+    };
+    render() {
+        return (index.h(index.Host, { key: '90dbc3544fa3a36e52626e760363d7a1bf64f663' }, index.h("div", { key: 'a6f9487645e538fb3e1b0050ca7fc1c64dea2bba', class: "frame", part: "frame" }, this.label && index.h("span", { key: '8b472a3bbf2ac515acbbfafd44e865e3bf2e33e6', class: "label", part: "label" }, this.label), index.h("div", { key: '0285513162167abd658c0b242956010d2d75412f', class: "rows", part: "rows" }, this.pv !== undefined && (index.h("div", { key: '79bb1113712193aecc37c25b6e08995613414b50', class: "pv", part: "pv" }, index.h("span", { key: '259bdb3eaa9a6bc2c79f7fbae03d5f1079cf2243', class: "pv-tag" }, "PV"), index.h("span", { key: '0c62932c79b53f3b2fc87c495d38f36eadd95e17', class: "pv-num" }, this.fmt(this.pv)), this.unit && index.h("span", { key: '3e2b7dc1bbcf7acfc36c13e0c2a4464be2a195ce', class: "pv-unit" }, this.unit))), index.h("div", { key: 'ad9a17611f3565a3ad897de63c0455a3bb515d7c', class: "sp", part: "sp" }, index.h("span", { key: 'a40a504817aaa555b4800c04bdb824541debbf1d', class: "sp-tag" }, "SP"), index.h("button", { key: 'bf43b9280bedc5bae8cc912f1a35f12ea2fb37c9', type: "button", class: "step", part: "dec", "aria-label": "Decrease setpoint", disabled: this.disabled, onClick: () => this.commit(this.value - this.step) }, "\u2212"), index.h("input", { key: 'ca92f232c463c733bd2cf4daa4ee3c61e5b9c2c7', class: "num", part: "input", type: "number", value: this.fmt(this.value), min: this.min, max: this.max, step: this.step, disabled: this.disabled, "aria-label": `${this.label ?? 'Setpoint'} value`, onChange: this.onInput }), this.unit && index.h("span", { key: '7513b054f25b05f9ca5b59ad2f706edb18377b6d', class: "sp-unit" }, this.unit), index.h("button", { key: '2143880d86bb2141974567d3f502fccd6e00785a', type: "button", class: "step", part: "inc", "aria-label": "Increase setpoint", disabled: this.disabled, onClick: () => this.commit(this.value + this.step) }, "+"))))));
+    }
+};
+IndSetpoint.style = setpointCss();
+exports.ind_setpoint = IndSetpoint;
+//# sourceMappingURL=ind-setpoint.entry.cjs.js.map
+//# sourceMappingURL=ind-setpoint.cjs.entry.js.map

package/dist/cjs/ind-setpoint.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-setpoint.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,sxEAAsxE,CAAC;;MCSryE,WAAW,GAAA,MAAA;;;;;;IAEG,KAAK,GAAW,CAAC;;AAElC,IAAA,EAAE;;AAEF,IAAA,GAAG;;AAEH,IAAA,GAAG;;IAEH,IAAI,GAAW,CAAC;;AAEhB,IAAA,SAAS;;AAET,IAAA,IAAI;;AAEJ,IAAA,KAAK;;IAEY,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAiB,IAAI;;AAGzC,IAAA,SAAS;AAEV,IAAA,KAAK,CAAC,CAAS,EAAA;AACrB,QAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AACrD,QAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AACrD,QAAA,OAAO,CAAC;;AAGF,IAAA,MAAM,CAAC,CAAS,EAAA;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1B,QAAA,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGnB,IAAA,GAAG,CAAC,CAAU,EAAA;QACpB,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAE,YAAA,OAAO,IAAI;QACvD,OAAO,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;;AAGrE,IAAA,OAAO,GAAG,CAAC,CAAQ,KAAI;QAC7B,MAAM,CAAC,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;AACtD,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAE,YAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACxC,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC5B,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1B,IAAI,CAAC,EAAE,KAAK,SAAS,KACpBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,EAAA,IAAA,CAAU,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAQ,EAC9C,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CAClD,CACP,EACDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,EAAA,IAAA,CAAU,EAC9BA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,KAAK,EAAA,YAAA,EACC,mBAAmB,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,EAAA,EAAA,QAAA,CAG3C,EACTA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,CAAA,EAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CAAA,MAAA,CAAQ,EAC/C,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAA,CACtB,EACD,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EACtDA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,KAAK,EAAA,YAAA,EACC,mBAAmB,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,EAAA,EAAA,GAAA,CAG3C,CACL,CACF,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/setpoint/setpoint.css?tag=ind-setpoint&encapsulation=shadow","src/components/atoms/setpoint/setpoint.tsx"],"sourcesContent":[":host {\n display: inline-block;\n font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n --_btn: 22px;\n --_num-w: 64px;\n}\n\n:host([size=\"sm\"]) { --_btn: 18px; --_num-w: 52px; }\n:host([size=\"lg\"]) { --_btn: 28px; --_num-w: 80px; }\n\n.frame {\n display: inline-flex;\n flex-direction: column;\n gap: var(--ind-spacing-2, 4px);\n padding: var(--ind-spacing-3, 6px);\n background: var(--ind-surface-raised, #1b222c);\n border: 1px solid var(--ind-surface-border-default, #2a3340);\n border-radius: var(--ind-radius-md, 3px);\n}\n\n.label {\n font-size: var(--ind-font-size-xs, 10px);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.rows { display: flex; flex-direction: column; gap: var(--ind-spacing-2, 4px); }\n\n.pv, .sp { display: inline-flex; align-items: center; gap: var(--ind-spacing-2, 4px); }\n\n.pv-tag, .sp-tag {\n font-size: 9px;\n font-weight: var(--ind-font-weight-bold, 700);\n width: 16px;\n color: var(--ind-surface-text-muted, #7a8694);\n}\n\n.pv-num {\n font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.pv-unit, .sp-unit {\n font-size: var(--ind-font-size-xs, 10px);\n color: var(--ind-surface-text-muted, #7a8694);\n}\n\n.step {\n width: var(--_btn);\n height: var(--_btn);\n flex: none;\n border: 1px solid var(--ind-surface-border-strong, #5a6776);\n background: var(--ind-surface-panel, #11161c);\n color: var(--ind-surface-text-primary, #eef1f5);\n border-radius: var(--ind-radius-sm, 2px);\n font-size: 14px;\n line-height: 1;\n cursor: pointer;\n}\n.step:hover:not(:disabled) { background: var(--ind-surface-strong, #5a6776); }\n.step:disabled { opacity: 0.5; cursor: not-allowed; }\n.step:focus-visible { outline: 2px solid var(--ind-surface-focus-ring, #67e8f9); outline-offset: 1px; }\n\n.num {\n width: var(--_num-w);\n text-align: right;\n font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n font-weight: var(--ind-font-weight-semibold, 600);\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n background: var(--ind-surface-sunken, light-dark(#fff, #000));\n color: var(--ind-surface-text-primary, #eef1f5);\n border: 1px solid var(--ind-surface-border-default, #2a3340);\n border-radius: var(--ind-radius-sm, 2px);\n padding: 2px 4px;\n}\n.num:focus-visible { outline: 2px solid var(--ind-surface-focus-ring, #67e8f9); outline-offset: 0; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SetpointSize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'ind-setpoint',\n styleUrl: 'setpoint.css',\n shadow: true,\n})\nexport class IndSetpoint {\n /** Target setpoint value (editable). */\n @Prop({ mutable: true }) value: number = 0;\n /** Live process value, shown for comparison when provided. */\n @Prop() pv?: number;\n /** Minimum. */\n @Prop() min?: number;\n /** Maximum. */\n @Prop() max?: number;\n /** Step for the +/- buttons and keyboard. */\n @Prop() step: number = 1;\n /** Decimal places to display. */\n @Prop() precision?: number;\n /** Engineering unit. */\n @Prop() unit?: string;\n /** Label / tag. */\n @Prop() label?: string;\n /** Disabled. */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Size. */\n @Prop({ reflect: true }) size: SetpointSize = 'md';\n\n /** Fires when the setpoint is committed. */\n @Event() indChange!: EventEmitter<number>;\n\n private clamp(v: number): number {\n if (this.min !== undefined) v = Math.max(this.min, v);\n if (this.max !== undefined) v = Math.min(this.max, v);\n return v;\n }\n\n private commit(v: number) {\n const next = this.clamp(v);\n if (next === this.value) return;\n this.value = next;\n this.indChange.emit(next);\n }\n\n private fmt(v?: number): string {\n if (v === undefined || !Number.isFinite(v)) return '--';\n return this.precision !== undefined ? v.toFixed(this.precision) : String(v);\n }\n\n private onInput = (e: Event) => {\n const v = Number((e.target as HTMLInputElement).value);\n if (Number.isFinite(v)) this.commit(v);\n };\n\n render() {\n return (\n <Host>\n <div class=\"frame\" part=\"frame\">\n {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n <div class=\"rows\" part=\"rows\">\n {this.pv !== undefined && (\n <div class=\"pv\" part=\"pv\">\n <span class=\"pv-tag\">PV</span>\n <span class=\"pv-num\">{this.fmt(this.pv)}</span>\n {this.unit && <span class=\"pv-unit\">{this.unit}</span>}\n </div>\n )}\n <div class=\"sp\" part=\"sp\">\n <span class=\"sp-tag\">SP</span>\n <button\n type=\"button\"\n class=\"step\"\n part=\"dec\"\n aria-label=\"Decrease setpoint\"\n disabled={this.disabled}\n onClick={() => this.commit(this.value - this.step)}\n >\n −\n </button>\n <input\n class=\"num\"\n part=\"input\"\n type=\"number\"\n value={this.fmt(this.value)}\n min={this.min}\n max={this.max}\n step={this.step}\n disabled={this.disabled}\n aria-label={`${this.label ?? 'Setpoint'} value`}\n onChange={this.onInput}\n />\n {this.unit && <span class=\"sp-unit\">{this.unit}</span>}\n <button\n type=\"button\"\n class=\"step\"\n part=\"inc\"\n aria-label=\"Increase setpoint\"\n disabled={this.disabled}\n onClick={() => this.commit(this.value + this.step)}\n >\n +\n </button>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ind-shelf-canvas.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 const shelfCanvasCss = () => `:host{display:block;width:var(--ind-size-canvas-shelves-width, 480px);height:var(--ind-size-canvas-shelves-height, 340px);font-family:var(--ind-font-family-sans);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}svg{display:block;width:100%;height:100%;background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px)}.heading{font-family:var(--ind-font-family-sans);font-size:13px;font-weight:700;fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));text-transform:uppercase;letter-spacing:0.05em}.outline{fill:color-mix(in srgb, var(--ind-surface-raised) 40%, transparent);stroke:var(--ind-surface-border-strong);stroke-width:1.5;stroke-linejoin:round}.fill{fill:var(--ind-state-running-bg, #16a34a);transition:y 240ms, height 240ms}.slot--partial .fill{fill:var(--ind-feedback-warning-bg, #f59e0b)}.slot--empty .fill{fill:var(--ind-feedback-error-bg, #dc2626)}.slot--missing .outline{fill:transparent;stroke-dasharray:4 2;stroke:var(--ind-surface-border-subtle)}.label{font-family:var(--ind-font-family-mono);font-size:11px;font-weight:600;fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));letter-spacing:0.02em}.level{font-family:var(--ind-font-family-mono);font-size:12px;font-weight:700;fill:#ffffff;paint-order:stroke;stroke:rgba(0, 0, 0, 0.55);stroke-width:3;letter-spacing:0.02em}.slot--missing .level{display:none}`;
@@ -48,7 +48,7 @@ const IndShelfCanvas = class {
         const gridH = H - padTop - padBottom;
         const cellW = gridW / this.cols;
         const cellH = gridH / this.rows;
-        return (index.h(index.Host, { key: 'e368cf70181cf224e4076b937a1e12a53e95e58f', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, index.h("svg", { key: 'e5fa8c4d7bed40cddbd4c6a691aa49a9c29007a5', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (index.h("text", { key: 'ec0c820367a330cc570b2c44c6d63c11fbed7f3b', x: W / 2, y: "22", class: "heading", "text-anchor": "middle" }, this.heading)), slots.slice(0, this.rows * this.cols).map((s) => {
+        return (index.h(index.Host, { key: 'c50aafdae929f6c548b744ea7bed202403478616', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, index.h("svg", { key: 'cead1ebbee9dc4bf985a3a3ec28c946cc9a0c29c', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (index.h("text", { key: '7d83c3c7f7ed080825aa08271eba2f2862ca3c15', x: W / 2, y: "22", class: "heading", "text-anchor": "middle" }, this.heading)), slots.slice(0, this.rows * this.cols).map((s) => {
             const i = slots.indexOf(s);
             const col = i % this.cols;
             const row = Math.floor(i / this.cols);

package/dist/cjs/ind-sidebar-group.cjs.entry.js ADDED Viewed

@@ -0,0 +1,34 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const sidebarGroupCss = () => `:host{display:block;font-family:var(--ind-font-family-sans)}.header{display:flex;align-items:center;gap:var(--ind-spacing-2, 4px);width:100%;padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);background:transparent;border:0;cursor:pointer;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;text-align:left}.header:hover{color:var(--ind-surface-text-primary)}.header:focus-visible{outline:2px solid var(--ind-surface-focus-ring);outline-offset:-2px}.chevron{transition:transform var(--ind-motion-duration-fast, 120ms) var(--ind-motion-easing-standard, ease);font-size:0.9em}:host([collapsed]) .chevron{transform:rotate(-90deg)}.label{flex:1 1 auto}.badge{font-family:var(--ind-font-family-mono);background:var(--ind-surface-raised);border-radius:var(--ind-radius-full, 9999px);padding:1px 6px;font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-primary)}.items{display:flex;flex-direction:column}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}`;
+const IndSidebarGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indToggle = index.createEvent(this, "indToggle");
+    }
+    /** Section title. */
+    label;
+    /** Collapsed state (two-way). */
+    collapsed = false;
+    /** Optional count badge (e.g. active alarms in the section). */
+    badge;
+    /** Fires with the new collapsed state on toggle. */
+    indToggle;
+    toggle = () => {
+        this.collapsed = !this.collapsed;
+        this.indToggle.emit(this.collapsed);
+    };
+    render() {
+        const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;
+        return (index.h(index.Host, { key: 'c428e8258ddee64bc19253a3ab41594e61dd7263' }, index.h("button", { key: '4366d2cb991f04a9be194d382fb09bebf0dd6401', type: "button", class: "header", part: "header", "aria-expanded": this.collapsed ? 'false' : 'true', onClick: this.toggle }, index.h("span", { key: '9de90b716e33138b5fec712ff512007d0dd0e576', class: "chevron", part: "chevron", "aria-hidden": "true" }, "\u25BE"), index.h("span", { key: '45a405517d376fe13b787a87abf8e726b93d99bf', class: "label", part: "label" }, this.label), showBadge && index.h("span", { key: '808fac09e356816232630b27ab5e57ab07d8a84d', class: "badge", part: "badge" }, this.badge)), index.h("div", { key: '135bb64aa0f5ea5996827164e7fdf98ea3c770c2', class: "items", part: "items", hidden: this.collapsed }, index.h("slot", { key: '1c48aa5cb904a6a331fc14089b958c7453a74c48' }))));
+    }
+};
+IndSidebarGroup.style = sidebarGroupCss();
+exports.ind_sidebar_group = IndSidebarGroup;
+//# sourceMappingURL=ind-sidebar-group.entry.cjs.js.map
+//# sourceMappingURL=ind-sidebar-group.cjs.entry.js.map

package/dist/cjs/ind-sidebar-group.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-sidebar-group.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,knCAAknC,CAAC;;MCYroC,eAAe,GAAA,MAAA;;;;;;AAElB,IAAA,KAAK;;IAE2B,SAAS,GAAY,KAAK;;AAE1D,IAAA,KAAK;;AAGJ,IAAA,SAAS;IAEV,MAAM,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;AACtF,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,EAChD,OAAO,EAAE,IAAI,CAAC,MAAM,EAAA,EAEpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,QAAA,CAAS,EAChEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,SAAS,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC3D,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAA,EACpDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/sidebar-group/sidebar-group.css?tag=ind-sidebar-group&encapsulation=shadow","src/components/molecules/sidebar-group/sidebar-group.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--ind-font-family-sans);\n}\n\n.header {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-2, 4px);\n width: 100%;\n padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);\n background: transparent;\n border: 0;\n cursor: pointer;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n font-size: var(--ind-font-size-xs, 10px);\n font-weight: var(--ind-font-weight-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n text-align: left;\n}\n\n.header:hover {\n color: var(--ind-surface-text-primary);\n}\n\n.header:focus-visible {\n outline: 2px solid var(--ind-surface-focus-ring);\n outline-offset: -2px;\n}\n\n.chevron {\n transition: transform var(--ind-motion-duration-fast, 120ms) var(--ind-motion-easing-standard, ease);\n font-size: 0.9em;\n}\n\n:host([collapsed]) .chevron {\n transform: rotate(-90deg);\n}\n\n.label {\n flex: 1 1 auto;\n}\n\n.badge {\n font-family: var(--ind-font-family-mono);\n background: var(--ind-surface-raised);\n border-radius: var(--ind-radius-full, 9999px);\n padding: 1px 6px;\n font-size: var(--ind-font-size-xs, 10px);\n color: var(--ind-surface-text-primary);\n}\n\n.items {\n display: flex;\n flex-direction: column;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chevron { transition: none; }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n/**\n * Collapsible heading for a section of the navigation sidebar. Slot\n * `<ind-nav-item>`s into the default slot; the group provides the section\n * title and an expand/collapse affordance.\n */\n@Component({\n tag: 'ind-sidebar-group',\n styleUrl: 'sidebar-group.css',\n shadow: true,\n})\nexport class IndSidebarGroup {\n /** Section title. */\n @Prop() label!: string;\n /** Collapsed state (two-way). */\n @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n /** Optional count badge (e.g. active alarms in the section). */\n @Prop() badge?: string | number;\n\n /** Fires with the new collapsed state on toggle. */\n @Event() indToggle!: EventEmitter<boolean>;\n\n private toggle = () => {\n this.collapsed = !this.collapsed;\n this.indToggle.emit(this.collapsed);\n };\n\n render() {\n const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;\n return (\n <Host>\n <button\n type=\"button\"\n class=\"header\"\n part=\"header\"\n aria-expanded={this.collapsed ? 'false' : 'true'}\n onClick={this.toggle}\n >\n <span class=\"chevron\" part=\"chevron\" aria-hidden=\"true\">▾</span>\n <span class=\"label\" part=\"label\">{this.label}</span>\n {showBadge && <span class=\"badge\" part=\"badge\">{this.badge}</span>}\n </button>\n <div class=\"items\" part=\"items\" hidden={this.collapsed}>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ind-sidebar-nav.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 const sidebarNavCss = () => `:host{display:flex;flex-direction:column;width:var(--ind-size-sidebar-width, 178px);height:100%;background:var(--ind-surface-panel);border-right:1px solid var(--ind-surface-border-default);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));flex-shrink:0;box-sizing:border-box}.brand{padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px)}.brand:has(>:nth-child(1):empty),.brand:not(:has(*)){display:none}.items{flex:1;overflow-y:auto;padding:var(--ind-spacing-2, 4px) 0;scrollbar-width:thin;scrollbar-color:var(--ind-surface-border-strong) transparent}.items::-webkit-scrollbar{width:8px}.items::-webkit-scrollbar-thumb{background:var(--ind-surface-border-strong);border-radius:4px}.items::-webkit-scrollbar-track{background:transparent}.footer{padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-top:1px solid var(--ind-surface-border-subtle);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.footer:not(:has(*)){display:none}`;
@@ -9,7 +9,7 @@ const IndSidebarNav = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3ffd6c6d8afe2ed104b24ad1435d7a1d163c5071', role: "navigation" }, index.h("div", { key: '2a56d85274fca7043d8e5624a93cb99c8767fc74', class: "brand", part: "brand" }, index.h("slot", { key: 'd185e1c6570b33648700dd922e671f023b3d34fc', name: "brand" })), index.h("div", { key: '31aaa48b8e08549a3a4990cbe4ae74507b0a8ccb', class: "items", part: "items" }, index.h("slot", { key: '4ddb250ed915874ea6114588ab336e662526383f' })), index.h("div", { key: 'd666ea3f666be22246d6f2e2464a85b741b4bfed', class: "footer", part: "footer" }, index.h("slot", { key: 'fff6600b601ec97d47f2a79b983d0a7ef261db33', name: "footer" }))));
+        return (index.h(index.Host, { key: '9d04eb64c4d78199a2675d8f8908783ee03c592d', role: "navigation" }, index.h("div", { key: 'a4cda235f70f218c1b0074997f51484599ee1cec', class: "brand", part: "brand" }, index.h("slot", { key: 'ed5d43d3e799902dba9f0e725186c80ea80d9ff1', name: "brand" })), index.h("div", { key: '21178ccce78cf2f294d0eb93c38417db8f5a749d', class: "items", part: "items" }, index.h("slot", { key: '5902adf3f49022bd38fddf31edf43c458c5e7b8f' })), index.h("div", { key: '0789a9c4b2705f258108a77ecd1d898a5104ce85', class: "footer", part: "footer" }, index.h("slot", { key: '87c03fb3608b92aa1130017d79eb2fd556de5ca4', name: "footer" }))));
     }
 };
 IndSidebarNav.style = sidebarNavCss();

package/dist/cjs/ind-signal-quality.cjs.entry.js ADDED Viewed

@@ -0,0 +1,41 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const signalQualityCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:16px;--_w:4px;--_on:var(--ind-state-running-bg, #16a34a)}:host([size="sm"]){--_h:12px;--_w:3px}:host([size="lg"]){--_h:22px;--_w:5px}:host([data-quality="poor"]){--_on:var(--ind-state-fault-bg, #dc2626)}:host([data-quality="fair"]){--_on:var(--ind-state-warning-bg, #f59e0b)}:host([data-quality="good"]){--_on:var(--ind-state-running-bg, #16a34a)}:host([data-quality="none"]){--_on:var(--ind-surface-border-strong, #5a6776)}.bars{display:inline-flex;align-items:flex-end;gap:2px;height:var(--_h)}.bar{width:var(--_w);background:var(--ind-surface-border-default, #2a3340);border-radius:1px;align-self:flex-end}.bar.is-on{background:var(--_on)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}`;
+const IndSignalQuality = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Number of filled bars. */
+    level = 0;
+    /** Total bars. */
+    bars = 4;
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered next to the bars. */
+    label;
+    quality() {
+        if (this.level <= 0)
+            return 'none';
+        const ratio = this.level / this.bars;
+        if (ratio <= 0.34)
+            return 'poor';
+        if (ratio <= 0.67)
+            return 'fair';
+        return 'good';
+    }
+    render() {
+        const total = Math.max(1, this.bars);
+        const filled = Math.max(0, Math.min(total, this.level));
+        const quality = this.quality();
+        return (index.h(index.Host, { key: '75fa0e52409f72555ea603490469c418281b036b', role: "meter", "aria-valuenow": filled, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": this.label ?? `Signal quality ${quality}`, "data-quality": quality }, index.h("span", { key: '77a5333955c1cf070ba879cb593e7ff937b34b35', class: "bars", part: "bars", "aria-hidden": "true" }, Array.from({ length: total }).map((_, i) => (index.h("span", { class: { bar: true, 'is-on': i < filled }, style: { height: `${30 + (i / total) * 70}%` } })))), this.label && index.h("span", { key: '962c02cf5381b2bf22e9163ed2f7bb7fe12ca67a', class: "label", part: "label" }, this.label)));
+    }
+};
+IndSignalQuality.style = signalQualityCss();
+exports.ind_signal_quality = IndSignalQuality;
+//# sourceMappingURL=ind-signal-quality.entry.cjs.js.map
+//# sourceMappingURL=ind-signal-quality.cjs.entry.js.map

package/dist/cjs/ind-signal-quality.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-signal-quality.cjs.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,48BAA48B,CAAC;;MCSh+B,gBAAgB,GAAA,MAAA;;;;;IAEnB,KAAK,GAAW,CAAC;;IAGjB,IAAI,GAAW,CAAC;;IAGC,IAAI,GAAsB,IAAI;;AAG/C,IAAA,KAAK;IAEL,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;AAAE,YAAA,OAAO,MAAM;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI;QACpC,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,MAAM;QAChC,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,MAAM;AAChC,QAAA,OAAO,MAAM;;IAGf,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC;AACpC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AACvD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,eAAA,EACG,MAAM,EAAA,eAAA,EACN,CAAC,mBACD,KAAK,EAAA,YAAA,EACR,IAAI,CAAC,KAAK,IAAI,CAAA,eAAA,EAAkB,OAAO,EAAE,EAAA,cAAA,EACvC,OAAO,EAAA,EAErBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,EAAA,EAC9C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACtCA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE,GAAG,EAAE,EAAA,CAAI,CACpG,CAAC,CACG,EACN,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/signal-quality/signal-quality.css?tag=ind-signal-quality&encapsulation=shadow","src/components/atoms/signal-quality/signal-quality.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n font-size: var(--ind-font-size-base, 12px);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n --_h: 16px;\n --_w: 4px;\n --_on: var(--ind-state-running-bg, #16a34a);\n}\n\n:host([size=\"sm\"]) { --_h: 12px; --_w: 3px; }\n:host([size=\"lg\"]) { --_h: 22px; --_w: 5px; }\n\n:host([data-quality=\"poor\"]) { --_on: var(--ind-state-fault-bg, #dc2626); }\n:host([data-quality=\"fair\"]) { --_on: var(--ind-state-warning-bg, #f59e0b); }\n:host([data-quality=\"good\"]) { --_on: var(--ind-state-running-bg, #16a34a); }\n:host([data-quality=\"none\"]) { --_on: var(--ind-surface-border-strong, #5a6776); }\n\n.bars {\n display: inline-flex;\n align-items: flex-end;\n gap: 2px;\n height: var(--_h);\n}\n\n.bar {\n width: var(--_w);\n background: var(--ind-surface-border-default, #2a3340);\n border-radius: 1px;\n align-self: flex-end;\n}\n\n.bar.is-on {\n background: var(--_on);\n}\n\n.label {\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SignalQualitySize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'ind-signal-quality',\n styleUrl: 'signal-quality.css',\n shadow: true,\n})\nexport class IndSignalQuality {\n /** Number of filled bars. */\n @Prop() level: number = 0;\n\n /** Total bars. */\n @Prop() bars: number = 4;\n\n /** Size. */\n @Prop({ reflect: true }) size: SignalQualitySize = 'md';\n\n /** Optional label rendered next to the bars. */\n @Prop() label?: string;\n\n private quality(): 'none' | 'poor' | 'fair' | 'good' {\n if (this.level <= 0) return 'none';\n const ratio = this.level / this.bars;\n if (ratio <= 0.34) return 'poor';\n if (ratio <= 0.67) return 'fair';\n return 'good';\n }\n\n render() {\n const total = Math.max(1, this.bars);\n const filled = Math.max(0, Math.min(total, this.level));\n const quality = this.quality();\n return (\n <Host\n role=\"meter\"\n aria-valuenow={filled}\n aria-valuemin={0}\n aria-valuemax={total}\n aria-label={this.label ?? `Signal quality ${quality}`}\n data-quality={quality}\n >\n <span class=\"bars\" part=\"bars\" aria-hidden=\"true\">\n {Array.from({ length: total }).map((_, i) => (\n <span class={{ bar: true, 'is-on': i < filled }} style={{ height: `${30 + (i / total) * 70}%` }} />\n ))}\n </span>\n {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ind-silo.cjs.entry.js ADDED Viewed

@@ -0,0 +1,42 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const equipmentCss = () => `: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);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:48px;--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="md"]){--_w:48px}:host([size="lg"]){--_w:72px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80);--_fill:var(--ind-state-running-bg, #16a34a);--_accent:var(--ind-state-running-bg, #16a34a)}:host([state="stopped"]){--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171);--_fill:var(--ind-state-fault-bg, #dc2626);--_accent:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-warning-bg, #f59e0b);--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa);--_fill:var(--ind-state-maintenance-bg, #2563eb);--_accent:var(--ind-state-maintenance-bg, #2563eb)}.symbol{display:block;width:var(--_w);height:auto;overflow:visible}.body{fill:color-mix(in srgb, var(--_fill) 22%, transparent);stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.accent{fill:var(--_accent);stroke:none}.stroke{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.tag{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)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px)}@media (prefers-reduced-motion: reduce){.spin,.pulse{animation:none !important}}`;
+const siloCss = () => `.liquid{fill:var(--ind-state-stopped-bg, #a8722e);transition:y var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),               height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([alarm="high"]) .liquid{fill:var(--ind-state-fault-bg, #dc2626)}:host([alarm="low"]) .liquid{fill:var(--ind-state-warning-bg, #f59e0b)}.body{fill:none}`;
+const IndSilo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Process state (drives outline color). */
+    state = 'stopped';
+    /** Fill level, 0–100 %. */
+    level = 0;
+    /** Alarm tint of the contents. */
+    alarm = 'none';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "SL-12"). */
+    tag;
+    /** Human label. */
+    label;
+    /** Show the numeric level under the symbol. */
+    showValue = false;
+    render() {
+        const pct = Math.min(100, Math.max(0, this.level));
+        const top = 4;
+        const height = 52;
+        const fillH = (pct / 100) * height;
+        const fillY = top + height - fillH;
+        const name = this.label ?? this.tag ?? 'silo';
+        return (index.h(index.Host, { key: '84c25d836dbf8e6402ea40c60a50c0c879439b5c', role: "meter", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${name} level ${Math.round(pct)}%` }, index.h("svg", { key: 'eead3013668a32dfc450ec104c952709e064a74b', class: "symbol", viewBox: "0 0 40 60", "aria-hidden": "true" }, index.h("defs", { key: 'e0eb34c44ea241fa7d2a77c4e78e26dacdf4b810' }, index.h("clipPath", { key: '5527f52907e0d982dbf9c94d925898e62a19f568', id: "silo-clip" }, index.h("path", { key: '490fb90afb3953a1367f65e5e9bd367b01f0295f', d: "M6 4 H34 V44 L24 56 H16 L6 44 Z" }))), index.h("rect", { key: '38ee389346454ef3f034ccb11443659768cb30f3', class: "liquid", x: "0", y: fillY, width: "40", height: fillH, "clip-path": "url(#silo-clip)" }), index.h("path", { key: '8bf35bd099cef83f9b2710becb9fa7a3f9d442a3', class: "body", d: "M6 4 H34 V44 L24 56 H16 L6 44 Z" })), (this.tag || this.label || this.showValue) && (index.h("div", { key: '6e040ee15207bf4879a75c562dcc9dd417737499', class: "caption" }, this.tag && index.h("span", { key: 'f08c6ca00d8b490eb0672aee4151a6ec635601ca', class: "tag" }, this.tag), this.showValue && index.h("span", { key: 'e696ee93fef364c7a626fb50f3487a394f49ee99', class: "tag" }, Math.round(pct), "%"), this.label && index.h("span", { key: '76c657068f1cfd939b1efa5e9efa66f944433508', class: "label" }, this.label)))));
+    }
+};
+IndSilo.style = equipmentCss() + siloCss();
+exports.ind_silo = IndSilo;
+//# sourceMappingURL=ind-silo.entry.cjs.js.map
+//# sourceMappingURL=ind-silo.cjs.entry.js.map

package/dist/cjs/ind-silo.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-silo.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/_equipment/equipment.css?tag=ind-silo&encapsulation=shadow","src/components/atoms/silo/silo.css?tag=ind-silo&encapsulation=shadow","src/components/atoms/silo/silo.tsx"],"sourcesContent":["/* Shared base styles for ind-ds process-equipment symbols.\n * Referenced via styleUrls alongside each component's own CSS. */\n:host {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: var(--ind-spacing-2, 4px);\n font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n --_w: 48px;\n --_stroke: var(--ind-state-stopped-border, #8390a0);\n --_fill: var(--ind-state-stopped-bg, #5a6776);\n --_accent: var(--ind-state-stopped-bg, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"md\"]) { --_w: 48px; }\n:host([size=\"lg\"]) { --_w: 72px; }\n\n:host([state=\"running\"]) { --_stroke: var(--ind-state-running-border, #4ade80); --_fill: var(--ind-state-running-bg, #16a34a); --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"stopped\"]) { --_stroke: var(--ind-state-stopped-border, #8390a0); --_fill: var(--ind-state-stopped-bg, #5a6776); --_accent: var(--ind-state-stopped-bg, #5a6776); }\n:host([state=\"fault\"]) { --_stroke: var(--ind-state-fault-border, #f87171); --_fill: var(--ind-state-fault-bg, #dc2626); --_accent: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"]) { --_stroke: var(--ind-state-warning-border, #fcd34d); --_fill: var(--ind-state-warning-bg, #f59e0b); --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); --_fill: var(--ind-state-maintenance-bg, #2563eb); --_accent: var(--ind-state-maintenance-bg, #2563eb); }\n\n.symbol {\n display: block;\n width: var(--_w);\n height: auto;\n overflow: visible;\n}\n\n.body {\n fill: color-mix(in srgb, var(--_fill) 22%, transparent);\n stroke: var(--_stroke);\n stroke-width: 1.5;\n vector-effect: non-scaling-stroke;\n}\n\n.accent {\n fill: var(--_accent);\n stroke: none;\n}\n\n.stroke {\n fill: none;\n stroke: var(--_stroke);\n stroke-width: 1.5;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n}\n\n.caption {\n display: flex;\n flex-direction: column;\n align-items: center;\n line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.tag {\n font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n font-weight: var(--ind-font-weight-semibold, 600);\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n font-size: var(--ind-font-size-xs, 10px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .spin, .pulse { animation: none !important; }\n}\n",".liquid {\n fill: var(--ind-state-stopped-bg, #a8722e);\n transition: y var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),\n height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n:host([alarm=\"high\"]) .liquid { fill: var(--ind-state-fault-bg, #dc2626); }\n:host([alarm=\"low\"]) .liquid { fill: var(--ind-state-warning-bg, #f59e0b); }\n\n.body {\n fill: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n tag: 'ind-silo',\n styleUrls: ['../_equipment/equipment.css', 'silo.css'],\n shadow: true,\n})\nexport class IndSilo {\n /** Process state (drives outline color). */\n @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n /** Fill level, 0–100 %. */\n @Prop() level: number = 0;\n /** Alarm tint of the contents. */\n @Prop({ reflect: true }) alarm: 'none' | 'low' | 'high' = 'none';\n /** Visual size. */\n @Prop({ reflect: true }) size: EquipmentSize = 'md';\n /** Equipment tag (e.g. \"SL-12\"). */\n @Prop() tag?: string;\n /** Human label. */\n @Prop() label?: string;\n /** Show the numeric level under the symbol. */\n @Prop() showValue: boolean = false;\n\n render() {\n const pct = Math.min(100, Math.max(0, this.level));\n const top = 4;\n const height = 52;\n const fillH = (pct / 100) * height;\n const fillY = top + height - fillH;\n const name = this.label ?? this.tag ?? 'silo';\n return (\n <Host\n role=\"meter\"\n aria-valuenow={Math.round(pct)}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`${name} level ${Math.round(pct)}%`}\n >\n {/* Cylindrical body with a conical hopper bottom. */}\n <svg class=\"symbol\" viewBox=\"0 0 40 60\" aria-hidden=\"true\">\n <defs>\n <clipPath id=\"silo-clip\">\n <path d=\"M6 4 H34 V44 L24 56 H16 L6 44 Z\" />\n </clipPath>\n </defs>\n <rect class=\"liquid\" x=\"0\" y={fillY} width=\"40\" height={fillH} clip-path=\"url(#silo-clip)\" />\n <path class=\"body\" d=\"M6 4 H34 V44 L24 56 H16 L6 44 Z\" />\n </svg>\n {(this.tag || this.label || this.showValue) && (\n <div class=\"caption\">\n {this.tag && <span class=\"tag\">{this.tag}</span>}\n {this.showValue && <span class=\"tag\">{Math.round(pct)}%</span>}\n {this.label && <span class=\"label\">{this.label}</span>}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ind-sparkline.cjs.entry.js ADDED Viewed

@@ -0,0 +1,58 @@
+'use strict';
+var index = require('./index-BLwLw5-d.js');
+const sparklineCss = () => `:host{display:inline-block;width:var(--ind-sparkline-width, 100px);height:var(--ind-sparkline-height, 28px);--_stroke:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}:host([variant="running"]){--_stroke:var(--ind-state-running-bg, #16a34a)}:host([variant="warning"]){--_stroke:var(--ind-state-warning-bg, #f59e0b)}:host([variant="fault"]){--_stroke:var(--ind-state-fault-bg, #dc2626)}.chart{display:block;width:100%;height:100%;overflow:visible}.line{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.fill{fill:color-mix(in srgb, var(--_stroke) 18%, transparent);stroke:none}.dot{fill:var(--_stroke);stroke:var(--ind-surface-panel, #11161c);stroke-width:1}`;
+const IndSparkline = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Series of numeric samples, oldest → newest. Pass as a property. */
+    points = [];
+    /** Lower bound. Defaults to the min of `points`. */
+    min;
+    /** Upper bound. Defaults to the max of `points`. */
+    max;
+    /** Color intent. */
+    variant = 'default';
+    /** Fill the area under the line. */
+    area = false;
+    /** Highlight the most recent sample with a dot. */
+    marker = true;
+    /** Accessible label. */
+    label;
+    /** SVG coordinate width. CSS controls the rendered size. */
+    w = 100;
+    hh = 28;
+    path() {
+        const pts = this.points ?? [];
+        if (pts.length === 0)
+            return { line: '', area: '' };
+        const lo = this.min ?? Math.min(...pts);
+        const hi = this.max ?? Math.max(...pts);
+        const span = hi - lo || 1;
+        const stepX = pts.length > 1 ? this.w / (pts.length - 1) : 0;
+        const pad = 2;
+        const usable = this.hh - pad * 2;
+        const coords = pts.map((v, i) => {
+            const x = i * stepX;
+            const y = pad + usable - ((v - lo) / span) * usable;
+            return { x, y };
+        });
+        const line = coords.map((c, i) => `${i === 0 ? 'M' : 'L'}${c.x.toFixed(1)},${c.y.toFixed(1)}`).join(' ');
+        const area = `${line} L${this.w},${this.hh} L0,${this.hh} Z`;
+        return { line, area, last: coords[coords.length - 1] };
+    }
+    render() {
+        const { line, area, last } = this.path();
+        const name = this.label ?? 'trend';
+        return (index.h(index.Host, { key: '1375d90762013de4768f40391fc9e228ba3a3c7b', role: "img", "aria-label": name }, index.h("svg", { key: '2f857e3abe826e653e4a895fece8f4611b439d26', class: "chart", part: "chart", viewBox: `0 0 ${this.w} ${this.hh}`, preserveAspectRatio: "none", "aria-hidden": "true" }, this.area && area && index.h("path", { key: 'adaed13e2d763577023f7203cffa31f1081174fe', class: "fill", part: "fill", d: area }), line && index.h("path", { key: 'f5a4ea869dcc82ba4634cf44e3c21376500221b0', class: "line", part: "line", d: line }), this.marker && last && index.h("circle", { key: '79e602b6f952e5b9abd55dcf1ac6d946177acdb4', class: "dot", part: "dot", cx: last.x, cy: last.y, r: "2" }))));
+    }
+};
+IndSparkline.style = sparklineCss();
+exports.ind_sparkline = IndSparkline;
+//# sourceMappingURL=ind-sparkline.entry.cjs.js.map
+//# sourceMappingURL=ind-sparkline.cjs.entry.js.map

package/dist/cjs/ind-sparkline.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-sparkline.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/sparkline/sparkline.css?tag=ind-sparkline&encapsulation=shadow","src/components/atoms/sparkline/sparkline.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: var(--ind-sparkline-width, 100px);\n height: var(--ind-sparkline-height, 28px);\n --_stroke: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n:host([variant=\"running\"]) { --_stroke: var(--ind-state-running-bg, #16a34a); }\n:host([variant=\"warning\"]) { --_stroke: var(--ind-state-warning-bg, #f59e0b); }\n:host([variant=\"fault\"]) { --_stroke: var(--ind-state-fault-bg, #dc2626); }\n\n.chart {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n.line {\n fill: none;\n stroke: var(--_stroke);\n stroke-width: 1.5;\n stroke-linejoin: round;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n}\n\n.fill {\n fill: color-mix(in srgb, var(--_stroke) 18%, transparent);\n stroke: none;\n}\n\n.dot {\n fill: var(--_stroke);\n stroke: var(--ind-surface-panel, #11161c);\n stroke-width: 1;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SparklineVariant = 'default' | 'running' | 'warning' | 'fault';\n\n@Component({\n tag: 'ind-sparkline',\n styleUrl: 'sparkline.css',\n shadow: true,\n})\nexport class IndSparkline {\n /** Series of numeric samples, oldest → newest. Pass as a property. */\n @Prop() points: number[] = [];\n\n /** Lower bound. Defaults to the min of `points`. */\n @Prop() min?: number;\n\n /** Upper bound. Defaults to the max of `points`. */\n @Prop() max?: number;\n\n /** Color intent. */\n @Prop({ reflect: true }) variant: SparklineVariant = 'default';\n\n /** Fill the area under the line. */\n @Prop({ reflect: true }) area: boolean = false;\n\n /** Highlight the most recent sample with a dot. */\n @Prop({ reflect: true }) marker: boolean = true;\n\n /** Accessible label. */\n @Prop() label?: string;\n\n /** SVG coordinate width. CSS controls the rendered size. */\n private readonly w = 100;\n private readonly hh = 28;\n\n private path(): { line: string; area: string; last?: { x: number; y: number } } {\n const pts = this.points ?? [];\n if (pts.length === 0) return { line: '', area: '' };\n const lo = this.min ?? Math.min(...pts);\n const hi = this.max ?? Math.max(...pts);\n const span = hi - lo || 1;\n const stepX = pts.length > 1 ? this.w / (pts.length - 1) : 0;\n const pad = 2;\n const usable = this.hh - pad * 2;\n const coords = pts.map((v, i) => {\n const x = i * stepX;\n const y = pad + usable - ((v - lo) / span) * usable;\n return { x, y };\n });\n const line = coords.map((c, i) => `${i === 0 ? 'M' : 'L'}${c.x.toFixed(1)},${c.y.toFixed(1)}`).join(' ');\n const area = `${line} L${this.w},${this.hh} L0,${this.hh} Z`;\n return { line, area, last: coords[coords.length - 1] };\n }\n\n render() {\n const { line, area, last } = this.path();\n const name = this.label ?? 'trend';\n return (\n <Host role=\"img\" aria-label={name}>\n <svg class=\"chart\" part=\"chart\" viewBox={`0 0 ${this.w} ${this.hh}`} preserveAspectRatio=\"none\" aria-hidden=\"true\">\n {this.area && area && <path class=\"fill\" part=\"fill\" d={area} />}\n {line && <path class=\"line\" part=\"line\" d={line} />}\n {this.marker && last && <circle class=\"dot\" part=\"dot\" cx={last.x} cy={last.y} r=\"2\" />}\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}