@ind-ds/core 0.1.1 → 0.2.1

package/dist/esm/ind-select.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.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}`;
 
@@ -42,7 +42,7 @@ const IndSelect = class {
     };
     render() {
         const opts = this.parseOptions();
-        return (h(Host, { key: '283d3e72b726d0b04958b452629df4e579907f05' }, h("label", { key: 'dcbfc48d00c096cd6b709e4eb16b687cd07dd350', class: "wrap", part: "wrap" }, this.label && h("span", { key: '011fa524c21bfc749cedc70f6ec810ca90a73be2', class: "label", part: "label" }, this.label), h("span", { key: '8fc35e3db2cbf2bd9cb780d8e1e1ee395c022d1a', class: "field", part: "field" }, 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 && (h("option", { key: '8da45f0c3d932005210e61a216f7f9dfa9581767', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), h("span", { key: 'ca2db8e41ee4fe3a8ef1a51458189face0450541', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
+        return (h(Host, { key: 'b13f8d8cba0dcd5a588b0bbfc6cc776d7d793755' }, h("label", { key: '4de3dcf49f2545cebdf6e54e8b902d2bac7edb08', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'ed9e56dc5a8fbf6ed04c6f404c5b040124e9b45a', class: "label", part: "label" }, this.label), h("span", { key: 'f142c37fc9eda28a25416688f9e26126741eb067', class: "field", part: "field" }, 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 && (h("option", { key: '7d708bcabecc6295b6b2fe05080399612c7b0041', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), h("span", { key: 'a74a19b4fa9dd5593ae61e502340ad2839d188c9', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
     }
 };
 IndSelect.style = selectCss();

package/dist/esm/ind-setpoint-control.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.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) {
+        registerInstance(this, hostRef);
+        this.indChange = 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 (h(Host, { key: 'a6091cd6497dc1d0abd32698d292749786a7525c' }, h("div", { key: '831770826b79f2ca972316ec765a98b285ea091b', class: "card-head" }, h("span", { key: '0b054a8d1416af350b64aa32782297a98018db73', class: "card-title", part: "label" }, this.label), this.tag && h("span", { key: 'dcea211c1f57ff5293cb529a661fa6d802c7db7c', class: "card-tag", part: "tag" }, this.tag)), 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();
+
+export { IndSetpointControl as ind_setpoint_control };
+//# sourceMappingURL=ind-setpoint-control.entry.js.map
+
+//# sourceMappingURL=ind-setpoint-control.entry.js.map

package/dist/esm/ind-setpoint-control.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-setpoint-control.entry.js","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"],"names":[],"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,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,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,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACN,CAAA,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;;;;;;;"}

package/dist/esm/ind-setpoint.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.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) {
+        registerInstance(this, hostRef);
+        this.indChange = 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 (h(Host, { key: '90dbc3544fa3a36e52626e760363d7a1bf64f663' }, h("div", { key: 'a6f9487645e538fb3e1b0050ca7fc1c64dea2bba', class: "frame", part: "frame" }, this.label && h("span", { key: '8b472a3bbf2ac515acbbfafd44e865e3bf2e33e6', class: "label", part: "label" }, this.label), h("div", { key: '0285513162167abd658c0b242956010d2d75412f', class: "rows", part: "rows" }, this.pv !== undefined && (h("div", { key: '79bb1113712193aecc37c25b6e08995613414b50', class: "pv", part: "pv" }, h("span", { key: '259bdb3eaa9a6bc2c79f7fbae03d5f1079cf2243', class: "pv-tag" }, "PV"), h("span", { key: '0c62932c79b53f3b2fc87c495d38f36eadd95e17', class: "pv-num" }, this.fmt(this.pv)), this.unit && h("span", { key: '3e2b7dc1bbcf7acfc36c13e0c2a4464be2a195ce', class: "pv-unit" }, this.unit))), h("div", { key: 'ad9a17611f3565a3ad897de63c0455a3bb515d7c', class: "sp", part: "sp" }, h("span", { key: 'a40a504817aaa555b4800c04bdb824541debbf1d', class: "sp-tag" }, "SP"), 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"), 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 && h("span", { key: '7513b054f25b05f9ca5b59ad2f706edb18377b6d', class: "sp-unit" }, this.unit), 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();
+
+export { IndSetpoint as ind_setpoint };
+//# sourceMappingURL=ind-setpoint.entry.js.map
+
+//# sourceMappingURL=ind-setpoint.entry.js.map

package/dist/esm/ind-setpoint.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-setpoint.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/ind-shelf-canvas.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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}`;
 
@@ -46,7 +46,7 @@ const IndShelfCanvas = class {
         const gridH = H - padTop - padBottom;
         const cellW = gridW / this.cols;
         const cellH = gridH / this.rows;
-        return (h(Host, { key: 'e368cf70181cf224e4076b937a1e12a53e95e58f', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, h("svg", { key: 'e5fa8c4d7bed40cddbd4c6a691aa49a9c29007a5', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (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 (h(Host, { key: 'c50aafdae929f6c548b744ea7bed202403478616', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, h("svg", { key: 'cead1ebbee9dc4bf985a3a3ec28c946cc9a0c29c', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (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/esm/ind-sidebar-group.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.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) {
+        registerInstance(this, hostRef);
+        this.indToggle = 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 (h(Host, { key: 'c428e8258ddee64bc19253a3ab41594e61dd7263' }, h("button", { key: '4366d2cb991f04a9be194d382fb09bebf0dd6401', type: "button", class: "header", part: "header", "aria-expanded": this.collapsed ? 'false' : 'true', onClick: this.toggle }, h("span", { key: '9de90b716e33138b5fec712ff512007d0dd0e576', class: "chevron", part: "chevron", "aria-hidden": "true" }, "\u25BE"), h("span", { key: '45a405517d376fe13b787a87abf8e726b93d99bf', class: "label", part: "label" }, this.label), showBadge && h("span", { key: '808fac09e356816232630b27ab5e57ab07d8a84d', class: "badge", part: "badge" }, this.badge)), h("div", { key: '135bb64aa0f5ea5996827164e7fdf98ea3c770c2', class: "items", part: "items", hidden: this.collapsed }, h("slot", { key: '1c48aa5cb904a6a331fc14089b958c7453a74c48' }))));
+    }
+};
+IndSidebarGroup.style = sidebarGroupCss();
+
+export { IndSidebarGroup as ind_sidebar_group };
+//# sourceMappingURL=ind-sidebar-group.entry.js.map
+
+//# sourceMappingURL=ind-sidebar-group.entry.js.map

package/dist/esm/ind-sidebar-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-sidebar-group.entry.js","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"],"names":[],"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,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,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,EAEpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,QAAA,CAAS,EAChE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,SAAS,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC3D,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

package/dist/esm/ind-sidebar-nav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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}`;
 
@@ -7,7 +7,7 @@ const IndSidebarNav = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '3ffd6c6d8afe2ed104b24ad1435d7a1d163c5071', role: "navigation" }, h("div", { key: '2a56d85274fca7043d8e5624a93cb99c8767fc74', class: "brand", part: "brand" }, h("slot", { key: 'd185e1c6570b33648700dd922e671f023b3d34fc', name: "brand" })), h("div", { key: '31aaa48b8e08549a3a4990cbe4ae74507b0a8ccb', class: "items", part: "items" }, h("slot", { key: '4ddb250ed915874ea6114588ab336e662526383f' })), h("div", { key: 'd666ea3f666be22246d6f2e2464a85b741b4bfed', class: "footer", part: "footer" }, h("slot", { key: 'fff6600b601ec97d47f2a79b983d0a7ef261db33', name: "footer" }))));
+        return (h(Host, { key: '9d04eb64c4d78199a2675d8f8908783ee03c592d', role: "navigation" }, h("div", { key: 'a4cda235f70f218c1b0074997f51484599ee1cec', class: "brand", part: "brand" }, h("slot", { key: 'ed5d43d3e799902dba9f0e725186c80ea80d9ff1', name: "brand" })), h("div", { key: '21178ccce78cf2f294d0eb93c38417db8f5a749d', class: "items", part: "items" }, h("slot", { key: '5902adf3f49022bd38fddf31edf43c458c5e7b8f' })), h("div", { key: '0789a9c4b2705f258108a77ecd1d898a5104ce85', class: "footer", part: "footer" }, h("slot", { key: '87c03fb3608b92aa1130017d79eb2fd556de5ca4', name: "footer" }))));
     }
 };
 IndSidebarNav.style = sidebarNavCss();

package/dist/esm/ind-signal-quality.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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) {
+        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 (h(Host, { key: '75fa0e52409f72555ea603490469c418281b036b', role: "meter", "aria-valuenow": filled, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": this.label ?? `Signal quality ${quality}`, "data-quality": quality }, h("span", { key: '77a5333955c1cf070ba879cb593e7ff937b34b35', class: "bars", part: "bars", "aria-hidden": "true" }, Array.from({ length: total }).map((_, i) => (h("span", { class: { bar: true, 'is-on': i < filled }, style: { height: `${30 + (i / total) * 70}%` } })))), this.label && h("span", { key: '962c02cf5381b2bf22e9163ed2f7bb7fe12ca67a', class: "label", part: "label" }, this.label)));
+    }
+};
+IndSignalQuality.style = signalQualityCss();
+
+export { IndSignalQuality as ind_signal_quality };
+//# sourceMappingURL=ind-signal-quality.entry.js.map
+
+//# sourceMappingURL=ind-signal-quality.entry.js.map

package/dist/esm/ind-signal-quality.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-signal-quality.entry.js","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"],"names":[],"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,QACE,EAAC,IAAI,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,EAErB,CAAA,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,MACtC,CAAA,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,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D;;;;;;;"}

package/dist/esm/ind-silo.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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) {
+        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 (h(Host, { key: '84c25d836dbf8e6402ea40c60a50c0c879439b5c', role: "meter", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${name} level ${Math.round(pct)}%` }, h("svg", { key: 'eead3013668a32dfc450ec104c952709e064a74b', class: "symbol", viewBox: "0 0 40 60", "aria-hidden": "true" }, h("defs", { key: 'e0eb34c44ea241fa7d2a77c4e78e26dacdf4b810' }, h("clipPath", { key: '5527f52907e0d982dbf9c94d925898e62a19f568', id: "silo-clip" }, h("path", { key: '490fb90afb3953a1367f65e5e9bd367b01f0295f', d: "M6 4 H34 V44 L24 56 H16 L6 44 Z" }))), h("rect", { key: '38ee389346454ef3f034ccb11443659768cb30f3', class: "liquid", x: "0", y: fillY, width: "40", height: fillH, "clip-path": "url(#silo-clip)" }), h("path", { key: '8bf35bd099cef83f9b2710becb9fa7a3f9d442a3', class: "body", d: "M6 4 H34 V44 L24 56 H16 L6 44 Z" })), (this.tag || this.label || this.showValue) && (h("div", { key: '6e040ee15207bf4879a75c562dcc9dd417737499', class: "caption" }, this.tag && h("span", { key: 'f08c6ca00d8b490eb0672aee4151a6ec635601ca', class: "tag" }, this.tag), this.showValue && h("span", { key: 'e696ee93fef364c7a626fb50f3487a394f49ee99', class: "tag" }, Math.round(pct), "%"), this.label && h("span", { key: '76c657068f1cfd939b1efa5e9efa66f944433508', class: "label" }, this.label)))));
+    }
+};
+IndSilo.style = equipmentCss() + siloCss();
+
+export { IndSilo as ind_silo };
+//# sourceMappingURL=ind-silo.entry.js.map
+
+//# sourceMappingURL=ind-silo.entry.js.map

package/dist/esm/ind-silo.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-silo.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ypEAAypE,CAAC;;ACAtrE,MAAM,OAAO,GAAG,MAAM,CAAC,gZAAgZ,CAAC;;MCQ3Z,OAAO,GAAA,MAAA;;;;;IAEO,KAAK,GAAmB,SAAS;;IAElD,KAAK,GAAW,CAAC;;IAEA,KAAK,GAA4B,MAAM;;IAEvC,IAAI,GAAkB,IAAI;;AAE3C,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEL,SAAS,GAAY,KAAK;IAElC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,GAAG,GAAG,CAAC;QACb,MAAM,MAAM,GAAG,EAAE;QACjB,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,MAAM;AAClC,QAAA,MAAM,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM;AAC7C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,eAAA,EACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,eAAA,EACf,CAAC,EAAA,eAAA,EACD,GAAG,EAAA,YAAA,EACN,CAAA,EAAG,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA,CAAA,CAAG,EAAA,EAG/C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,EAAE,EAAC,WAAW,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,iCAAiC,EAAA,CAAG,CACnC,CACN,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,KAAK,EAAA,WAAA,EAAY,iBAAiB,EAAA,CAAG,EAC7F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,CAAC,EAAC,iCAAiC,GAAG,CACrD,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,MACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC/C,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAS,GAAA,CAAA,EAC7D,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI;;;;;;;"}

package/dist/esm/ind-sparkline.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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) {
+        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 (h(Host, { key: '1375d90762013de4768f40391fc9e228ba3a3c7b', role: "img", "aria-label": name }, h("svg", { key: '2f857e3abe826e653e4a895fece8f4611b439d26', class: "chart", part: "chart", viewBox: `0 0 ${this.w} ${this.hh}`, preserveAspectRatio: "none", "aria-hidden": "true" }, this.area && area && h("path", { key: 'adaed13e2d763577023f7203cffa31f1081174fe', class: "fill", part: "fill", d: area }), line && h("path", { key: 'f5a4ea869dcc82ba4634cf44e3c21376500221b0', class: "line", part: "line", d: line }), this.marker && last && h("circle", { key: '79e602b6f952e5b9abd55dcf1ac6d946177acdb4', class: "dot", part: "dot", cx: last.x, cy: last.y, r: "2" }))));
+    }
+};
+IndSparkline.style = sparklineCss();
+
+export { IndSparkline as ind_sparkline };
+//# sourceMappingURL=ind-sparkline.entry.js.map
+
+//# sourceMappingURL=ind-sparkline.entry.js.map

package/dist/esm/ind-sparkline.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-sparkline.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/ind-status-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
 
 const statusBarCss = () => `:host{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border-top:1px solid var(--ind-surface-border-default);font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));min-height:24px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.message{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spacer{flex:1}.end{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px)}::slotted(*){font-size:var(--ind-font-size-sm, 11px)}`;
 
@@ -9,7 +9,7 @@ const IndStatusBar = class {
     state = 'neutral';
     message;
     render() {
-        return (h(Host, { key: 'ea26634fed8ac15e259de910eb7bcd4e5ce3d094', role: "status", "aria-live": "polite" }, h("ind-status-dot", { key: 'a9305e75e5b0e35c5cccf526020ed00177d729e4', state: this.state, size: "sm" }), this.message && h("span", { key: '816506e0c34aaf66249bcca19fa0741841a1dae5', class: "message", part: "message" }, this.message), h("span", { key: '15edfed427f793ad354d7b71e256149323ab59b4', class: "spacer" }), h("span", { key: 'abd85f3229fbc9ad3e6257400a87bab0e9743dae', class: "end", part: "end" }, h("slot", { key: 'bc0a1f8844f91d9158ec4f265ae12cc27b443740' }))));
+        return (h(Host, { key: '0e24fa0f2693d5756328492c64d61278f52ba1aa', role: "status", "aria-live": "polite" }, h("ind-status-dot", { key: 'b3c8d0f81d67fc1c0968a5400e3e2b1ffea6e050', state: this.state, size: "sm" }), this.message && h("span", { key: 'd6c47a4b16ed872430df471f9980c4dde551a963', class: "message", part: "message" }, this.message), h("span", { key: '833ee65843c75d0df1b95ecbf29390d848147bc6', class: "spacer" }), h("span", { key: '71d6fb61744466c96639fe8e5c6b922c891d5b8d', class: "end", part: "end" }, h("slot", { key: '188dec4734c910b1da01047f0a4ccb530f267640' }))));
     }
 };
 IndStatusBar.style = statusBarCss();

package/dist/esm/ind-status-dot.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
 
 const statusDotCss = () => `:host{display:inline-block;--_size:8px;--_bg:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));--_glow:transparent;width:var(--_size);height:var(--_size);border-radius:50%;background:var(--_bg);box-shadow:0 0 6px var(--_glow);flex-shrink:0;vertical-align:middle}:host([size="sm"]){--_size:6px}:host([size="md"]){--_size:8px}:host([size="lg"]){--_size:12px}:host([state="running"]){--_bg:var(--ind-state-running-bg, #16a34a);--_glow:var(--ind-state-running-glow, rgba(34, 197, 94, 0.6))}:host([state="stopped"]){--_bg:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_bg:var(--ind-state-fault-bg, #dc2626);--_glow:var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7))}:host([state="warning"]){--_bg:var(--ind-state-warning-bg, #f59e0b);--_glow:var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6))}:host([state="maintenance"]){--_bg:var(--ind-state-maintenance-bg, #2563eb);--_glow:var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6))}:host([state="success"]){--_bg:var(--ind-feedback-success-bg, #16a34a);--_glow:rgba(34, 197, 94, 0.5)}:host([state="info"]){--_bg:var(--ind-feedback-info-bg, #0891b2);--_glow:rgba(8, 145, 178, 0.5)}:host([state="error"]){--_bg:var(--ind-feedback-error-bg, #dc2626);--_glow:rgba(220, 38, 38, 0.6)}:host([state="neutral"]){--_bg:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([blinking]){animation:ind-status-dot-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite}@keyframes ind-status-dot-blink{50%{opacity:0.3;box-shadow:none}}@media (prefers-reduced-motion: reduce){:host([blinking]){animation:none;outline:2px solid currentColor;outline-offset:2px}}`;
 

package/dist/esm/ind-tab.entry.js

@@ -0,0 +1,38 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+
+const tabCss = () => `:host{display:inline-flex}.tab{appearance:none;display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-base, 12px);font-weight:var(--ind-font-weight-medium, 500);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));transition:color var(--ind-motion-duration-fast, 120ms) ease, border-color var(--ind-motion-duration-fast, 120ms) ease}.tab:hover:not(:disabled){color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}.tab:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:-2px}:host([selected]) .tab{color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));border-bottom-color:var(--ind-button-primary-bg, #2563eb);font-weight:var(--ind-font-weight-semibold, 600)}:host([disabled]) .tab{opacity:0.5;cursor:not-allowed}.icon:empty,.badge:empty{display:none}.icon,.badge{display:inline-flex;align-items:center}`;
+
+const IndTab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indSelect = createEvent(this, "indSelect");
+    }
+    /** Selected state. */
+    selected = false;
+    /** Disabled. */
+    disabled = false;
+    /** Stable id for the tab (emitted on select). */
+    tabId;
+    /** Fires when the tab is activated. */
+    indSelect;
+    activate = () => {
+        if (this.disabled || this.selected)
+            return;
+        this.indSelect.emit(this.tabId);
+    };
+    onKey = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.activate();
+        }
+    };
+    render() {
+        return (h(Host, { key: '80610acb7a454a8e50b01f284942f0a55650bdd6' }, h("button", { key: 'cad17b0d0a9850486b77e8012042a91dd3615276', type: "button", class: "tab", part: "tab", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, tabindex: this.selected ? '0' : '-1', onClick: this.activate, onKeyDown: this.onKey }, h("span", { key: '3c8531773262e8da453771366b8c242e4f5dc1b8', class: "icon", part: "icon" }, h("slot", { key: '10ed053ba7659569b45211b827503ca23e63e33a', name: "icon" })), h("span", { key: 'd658c67c3f874bcfd01f746c4df379a9f41aa7b1', class: "label", part: "label" }, h("slot", { key: '0b0bcdaf87c92e1252556500448726680adc4718' })), h("span", { key: '6bfa8167f56ddda8c18bd1c0d23ad06a0eb29a49', class: "badge", part: "badge" }, h("slot", { key: '345cb8f4b94885d62f4f14476f6b2bf3303f06ef', name: "badge" })))));
+    }
+};
+IndTab.style = tabCss();
+
+export { IndTab as ind_tab };
+//# sourceMappingURL=ind-tab.entry.js.map
+
+//# sourceMappingURL=ind-tab.entry.js.map

package/dist/esm/ind-tab.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-tab.entry.js","sources":["src/components/atoms/tab/tab.css?tag=ind-tab&encapsulation=shadow","src/components/atoms/tab/tab.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.tab {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border: none;\n  border-bottom: 2px solid transparent;\n  background: none;\n  cursor: pointer;\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-base, 12px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  transition: color var(--ind-motion-duration-fast, 120ms) ease, border-color var(--ind-motion-duration-fast, 120ms) ease;\n}\n\n.tab:hover:not(:disabled) { color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5)); }\n\n.tab:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: -2px;\n}\n\n:host([selected]) .tab {\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  border-bottom-color: var(--ind-button-primary-bg, #2563eb);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n:host([disabled]) .tab { opacity: 0.5; cursor: not-allowed; }\n\n.icon:empty, .badge:empty { display: none; }\n\n.icon, .badge { display: inline-flex; align-items: center; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ind-tab',\n  styleUrl: 'tab.css',\n  shadow: true,\n})\nexport class IndTab {\n  /** Selected state. */\n  @Prop({ reflect: true }) selected: boolean = false;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Stable id for the tab (emitted on select). */\n  @Prop() tabId?: string;\n\n  /** Fires when the tab is activated. */\n  @Event() indSelect!: EventEmitter<string | undefined>;\n\n  private activate = () => {\n    if (this.disabled || this.selected) return;\n    this.indSelect.emit(this.tabId);\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.activate();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"tab\"\n          part=\"tab\"\n          role=\"tab\"\n          aria-selected={this.selected ? 'true' : 'false'}\n          disabled={this.disabled}\n          tabindex={this.selected ? '0' : '-1'}\n          onClick={this.activate}\n          onKeyDown={this.onKey}\n        >\n          <span class=\"icon\" part=\"icon\"><slot name=\"icon\" /></span>\n          <span class=\"label\" part=\"label\"><slot /></span>\n          <span class=\"badge\" part=\"badge\"><slot name=\"badge\" /></span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,ymCAAymC,CAAC;;MCOnnC,MAAM,GAAA,MAAA;;;;;;IAEQ,QAAQ,GAAY,KAAK;;IAEzB,QAAQ,GAAY,KAAK;;AAE1C,IAAA,KAAK;;AAGJ,IAAA,SAAS;IAEV,QAAQ,GAAG,MAAK;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,KAAC;AAEO,IAAA,KAAK,GAAG,CAAC,CAAgB,KAAI;AACnC,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE;YAClB,IAAI,CAAC,QAAQ,EAAE;;AAEnB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,EACpC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,KAAK,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAAO,EAC1D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CAAO,EAChD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAAO,CACtD,CACJ;;;;;;;"}

package/dist/esm/ind-tag-card.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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 tagCardCss = () => `:host{min-width:150px}.card-head{align-items:center}`;
+
+const IndTagCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Process tag (e.g. "PT-101"). */
+    tag;
+    /** Human description (e.g. "Discharge pressure"). */
+    label;
+    /** Current value. */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Decimal places when numeric. */
+    precision;
+    /** Active alarm priority — tints the readout. */
+    alarm = 'none';
+    /** Process trend direction. */
+    trend = 'none';
+    /** Equipment / comms status shown by the dot. */
+    state = 'running';
+    render() {
+        return (h(Host, { key: '402b61b88c41d1772252a520b304a53da94e6d91' }, h("div", { key: '44625ebbb4b356ff06652e4ac862eb2069deeeba', class: "card-head" }, h("span", { key: 'b40c723b0912b4a84736d6cfb90c3cc728fd5aab', class: "card-tag", part: "tag" }, this.tag), h("ind-status-dot", { key: '334452a4e73b1f5178ea8b5a3505cfee0490ca41', state: this.state, size: "sm" })), h("ind-value", { key: 'f18e7d774139fe46291bea42334a0cdabf1cd253', part: "value", value: this.value, unit: this.unit, precision: this.precision, alarm: this.alarm, trend: this.trend, label: this.label, size: "lg" })));
+    }
+};
+IndTagCard.style = cardCss() + tagCardCss();
+
+export { IndTagCard as ind_tag_card };
+//# sourceMappingURL=ind-tag-card.entry.js.map
+
+//# sourceMappingURL=ind-tag-card.entry.js.map