@ind-ds/core 0.1.1 → 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"ind-tag-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-tag-card&encapsulation=shadow","src/components/molecules/tag-card/tag-card.css?tag=ind-tag-card&encapsulation=shadow","src/components/molecules/tag-card/tag-card.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: 150px;\n}\n\n.card-head {\n  align-items: center;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TagCardState =\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'neutral';\nexport type TagCardAlarm = 'none' | 'low-low' | 'low' | 'high' | 'high-high';\nexport type TagCardTrend = 'none' | 'up' | 'down' | 'stable';\n\n/**\n * Compact card for a single process tag: identifier + live value + status dot.\n * The atom of any tag wall / faceplate grid.\n */\n@Component({\n  tag: 'ind-tag-card',\n  styleUrls: ['../_shared/card.css', 'tag-card.css'],\n  shadow: true,\n})\nexport class IndTagCard {\n  /** Process tag (e.g. \"PT-101\"). */\n  @Prop() tag!: string;\n  /** Human description (e.g. \"Discharge pressure\"). */\n  @Prop() label?: string;\n  /** Current value. */\n  @Prop() value!: number | string;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Decimal places when numeric. */\n  @Prop() precision?: number;\n  /** Active alarm priority — tints the readout. */\n  @Prop({ reflect: true }) alarm: TagCardAlarm = 'none';\n  /** Process trend direction. */\n  @Prop() trend: TagCardTrend = 'none';\n  /** Equipment / comms status shown by the dot. */\n  @Prop({ reflect: true }) state: TagCardState = 'running';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"card-head\">\n          <span class=\"card-tag\" part=\"tag\">{this.tag}</span>\n          <ind-status-dot state={this.state} size=\"sm\" />\n        </div>\n        <ind-value\n          part=\"value\"\n          value={this.value}\n          unit={this.unit}\n          precision={this.precision}\n          alarm={this.alarm}\n          trend={this.trend}\n          label={this.label}\n          size=\"lg\"\n        />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,UAAU,GAAG,MAAM,CAAC,oDAAoD,CAAC;;MCqBlE,UAAU,GAAA,MAAA;;;;;AAEb,IAAA,GAAG;;AAEH,IAAA,KAAK;;AAEL,IAAA,KAAK;;AAEL,IAAA,IAAI;;AAEJ,IAAA,SAAS;;IAEQ,KAAK,GAAiB,MAAM;;IAE7C,KAAK,GAAiB,MAAM;;IAEX,KAAK,GAAiB,SAAS;IAExD,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,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EACnD,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CAC3C,EACN,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,IAAI,EAAA,CACT,CACG;;;;;;;"}

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

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const tagNameCss = () => `:host{display:inline-flex;--_size:var(--ind-font-size-base, 12px)}:host([size="sm"]){--_size:var(--ind-font-size-sm, 11px)}:host([size="md"]){--_size:var(--ind-font-size-base, 12px)}:host([size="lg"]){--_size:var(--ind-font-size-lg, 14px)}.tag{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-size:var(--_size);font-weight:var(--ind-font-weight-semibold, 600);letter-spacing:0.01em;color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);white-space:nowrap}:host([boxed]) .tag{padding:1px var(--ind-spacing-3, 6px);border:1px solid var(--ind-surface-border-strong, #5a6776);border-radius:var(--ind-radius-sm, 2px);background:var(--ind-surface-sunken, light-dark(#fff, #000))}`;
+
+const IndTagName = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Equipment / instrument tag, e.g. "PT-101". Falls back to the slot. */
+    tag;
+    /** Size. */
+    size = 'md';
+    /** Render in a boxed style (outlined chip). */
+    boxed = false;
+    render() {
+        return (h(Host, { key: 'c2427b778ac295c0a097b9391daad1360b4b46d4' }, h("span", { key: '0aa09696c274c2b9136c85afd48203983db04853', class: "tag", part: "tag" }, this.tag ?? h("slot", { key: '46131f7f0b24d62cae551125c0b2733a92764569' }))));
+    }
+};
+IndTagName.style = tagNameCss();
+
+export { IndTagName as ind_tag_name };
+//# sourceMappingURL=ind-tag-name.entry.js.map
+
+//# sourceMappingURL=ind-tag-name.entry.js.map

package/dist/esm/ind-tag-name.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-tag-name.entry.js","sources":["src/components/atoms/tag-name/tag-name.css?tag=ind-tag-name&encapsulation=shadow","src/components/atoms/tag-name/tag-name.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  --_size: var(--ind-font-size-base, 12px);\n}\n\n:host([size=\"sm\"]) { --_size: var(--ind-font-size-sm, 11px); }\n:host([size=\"md\"]) { --_size: var(--ind-font-size-base, 12px); }\n:host([size=\"lg\"]) { --_size: var(--ind-font-size-lg, 14px); }\n\n.tag {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-size: var(--_size);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  letter-spacing: 0.01em;\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  white-space: nowrap;\n}\n\n:host([boxed]) .tag {\n  padding: 1px var(--ind-spacing-3, 6px);\n  border: 1px solid var(--ind-surface-border-strong, #5a6776);\n  border-radius: var(--ind-radius-sm, 2px);\n  background: var(--ind-surface-sunken, light-dark(#fff, #000));\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TagNameSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-tag-name',\n  styleUrl: 'tag-name.css',\n  shadow: true,\n})\nexport class IndTagName {\n  /** Equipment / instrument tag, e.g. \"PT-101\". Falls back to the slot. */\n  @Prop() tag?: string;\n  /** Size. */\n  @Prop({ reflect: true }) size: TagNameSize = 'md';\n  /** Render in a boxed style (outlined chip). */\n  @Prop({ reflect: true }) boxed: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"tag\" part=\"tag\">\n          {this.tag ?? <slot />}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,owBAAowB,CAAC;;MCSlxB,UAAU,GAAA,MAAA;;;;;AAEb,IAAA,GAAG;;IAEc,IAAI,GAAgB,IAAI;;IAExB,KAAK,GAAY,KAAK;IAE/C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EACzB,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CAChB,CACF;;;;;;;"}

package/dist/esm/ind-tank-level-card.entry.js

@@ -0,0 +1,39 @@
+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 equipmentCardCss = () => `.body{display:flex;align-items:center;gap:var(--ind-spacing-5, 12px)}.symbol{flex:0 0 auto}.metrics{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);margin-left:auto;align-items:flex-end;text-align:right}`;
+
+const tankLevelCardCss = () => `:host{min-width:210px}ind-linear-gauge{width:100%}`;
+
+const IndTankLevelCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Equipment tag (e.g. "T-204"). */
+    tag;
+    /** Human label (e.g. "Buffer tank"). */
+    label;
+    /** Equipment state (drives fault chrome and tank outline). */
+    state = 'running';
+    /** Current level 0–100 %. */
+    level = 0;
+    /** Alarm tint of the liquid. */
+    alarm = 'none';
+    /** Engineering capacity for the secondary readout (e.g. 5000). */
+    capacity;
+    /** Capacity unit (e.g. "L"). */
+    unit = 'L';
+    render() {
+        const pct = Math.min(100, Math.max(0, this.level));
+        const name = this.label ?? this.tag ?? 'Tank';
+        const valueAlarm = this.alarm === 'high' ? 'high' : this.alarm === 'low' ? 'low' : 'none';
+        return (h(Host, { key: '5d6a6f6b6548d7ba5addfdc1db0d823ca95b4ad4', role: "group", "aria-label": `${name} level ${Math.round(pct)} percent` }, h("div", { key: 'a7a312f8303325cf679702176dc905a715551a8b', class: "card-head" }, h("span", { key: '2f063cf5494e5bed48e2e01ea4821030cdf974ca', class: "card-title", part: "label" }, name), this.tag && h("span", { key: 'b41273e27e1ef980837ec53f6e678d52d3d850ea', class: "card-tag", part: "tag" }, this.tag)), h("div", { key: '0add427bf608da5e11895e0f34b422a1fd0bcffd', class: "body", part: "body" }, h("ind-tank", { key: 'b20d9ff05ba43b9bdbb692420b27bae809ed62ef', class: "symbol", state: this.state, level: pct, alarm: this.alarm, size: "md" }), h("div", { key: 'a593e704843bf704266732312424f1c27b835532', class: "metrics", part: "metrics" }, h("ind-value", { key: '91abab48fbc9e642e597a56ceb3720c4b8a9ecc9', value: pct, unit: "%", precision: 0, alarm: valueAlarm, label: "Level", size: "lg" }), this.capacity !== undefined && (h("ind-value", { key: 'f0cbf620bcd7e840a1f89e3b5c91ee6c3b2aa456', value: (this.capacity * pct) / 100, unit: this.unit, precision: 0, label: "Volume", size: "sm" })))), h("ind-linear-gauge", { key: '6962c05beb268f96fdbb9608f33e42882bd0aff7', part: "gauge", value: pct, min: 0, max: 100, orientation: "horizontal", unit: "%", size: "sm" })));
+    }
+};
+IndTankLevelCard.style = cardCss() + (equipmentCardCss() + tankLevelCardCss());
+
+export { IndTankLevelCard as ind_tank_level_card };
+//# sourceMappingURL=ind-tank-level-card.entry.js.map
+
+//# sourceMappingURL=ind-tank-level-card.entry.js.map

package/dist/esm/ind-tank-level-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-tank-level-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-tank-level-card&encapsulation=shadow","src/components/molecules/_shared/equipment-card.css?tag=ind-tank-level-card&encapsulation=shadow","src/components/molecules/tank-level-card/tank-level-card.css?tag=ind-tank-level-card&encapsulation=shadow","src/components/molecules/tank-level-card/tank-level-card.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","/* Shared layout for the equipment faceplate cards (motor, pump, valve, tank).\n * Loaded after card.css and before each component's own sheet. */\n.body {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-5, 12px);\n}\n\n.symbol {\n  flex: 0 0 auto;\n}\n\n.metrics {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  margin-left: auto;\n  align-items: flex-end;\n  text-align: right;\n}\n",":host {\n  min-width: 210px;\n}\n\nind-linear-gauge {\n  width: 100%;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState } from '../../atoms/_equipment/types';\n\nexport type TankAlarm = 'none' | 'low' | 'high';\n\n/**\n * Tank level faceplate: `<ind-tank>` symbol with a level readout and a\n * `<ind-linear-gauge>` showing the fill against low/high alarm bands.\n */\n@Component({\n  tag: 'ind-tank-level-card',\n  styleUrls: ['../_shared/card.css', '../_shared/equipment-card.css', 'tank-level-card.css'],\n  shadow: true,\n})\nexport class IndTankLevelCard {\n  /** Equipment tag (e.g. \"T-204\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Buffer tank\"). */\n  @Prop() label?: string;\n  /** Equipment state (drives fault chrome and tank outline). */\n  @Prop({ reflect: true }) state: EquipmentState = 'running';\n  /** Current level 0–100 %. */\n  @Prop() level: number = 0;\n  /** Alarm tint of the liquid. */\n  @Prop({ reflect: true }) alarm: TankAlarm = 'none';\n  /** Engineering capacity for the secondary readout (e.g. 5000). */\n  @Prop() capacity?: number;\n  /** Capacity unit (e.g. \"L\"). */\n  @Prop() unit: string = 'L';\n\n  render() {\n    const pct = Math.min(100, Math.max(0, this.level));\n    const name = this.label ?? this.tag ?? 'Tank';\n    const valueAlarm = this.alarm === 'high' ? 'high' : this.alarm === 'low' ? 'low' : 'none';\n    return (\n      <Host role=\"group\" aria-label={`${name} level ${Math.round(pct)} percent`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{name}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <ind-tank class=\"symbol\" state={this.state} level={pct} alarm={this.alarm} size=\"md\" />\n          <div class=\"metrics\" part=\"metrics\">\n            <ind-value value={pct} unit=\"%\" precision={0} alarm={valueAlarm} label=\"Level\" size=\"lg\" />\n            {this.capacity !== undefined && (\n              <ind-value\n                value={(this.capacity * pct) / 100}\n                unit={this.unit}\n                precision={0}\n                label=\"Volume\"\n                size=\"sm\"\n              />\n            )}\n          </div>\n        </div>\n        <ind-linear-gauge\n          part=\"gauge\"\n          value={pct}\n          min={0}\n          max={100}\n          orientation=\"horizontal\"\n          unit=\"%\"\n          size=\"sm\"\n        />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+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 temperatureControlCss = () => `:host{min-width:210px}.mode{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px);font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-medium, 500);color:var(--ind-surface-text-muted)}.mode-heating{color:var(--ind-state-fault-bg, #dc2626)}.mode-cooling{color:var(--ind-color-palette-cyan-300, #22d3ee)}`;
+
+const IndTemperatureControl = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indChange = createEvent(this, "indChange");
+    }
+    /** Loop label (e.g. "Reactor jacket"). */
+    label;
+    /** Loop tag (e.g. "TIC-301"). */
+    tag;
+    /** Target temperature (two-way). */
+    value = 20;
+    /** Live process temperature. */
+    pv;
+    min = 0;
+    max = 200;
+    step = 0.5;
+    precision = 1;
+    /** Temperature unit (default °C). */
+    unit = '°C';
+    disabled = false;
+    /** Current thermal action — drives the indicator. */
+    mode = 'idle';
+    /** Committed setpoint. */
+    indChange;
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    render() {
+        const modeLabel = this.mode === 'heating' ? 'Heating' : this.mode === 'cooling' ? 'Cooling' : 'Idle';
+        const glyph = this.mode === 'heating' ? '🔥' : this.mode === 'cooling' ? '❄' : '○';
+        return (h(Host, { key: '0e8701bc6e89c38f88a4f9b7de7c20e5daeff9c2' }, h("div", { key: '023aefad2dbebe2d6f79974010416c6aacd35abb', class: "card-head" }, h("span", { key: '262f3a73e2e0a53b3fd6c1587aaa8e051e06b28c', class: "card-title", part: "label" }, this.label), this.tag && h("span", { key: '0c9a041e54488b1efa69fc56a8b18c95ec2796b2', class: "card-tag", part: "tag" }, this.tag)), h("div", { key: '1b82accfe0f72b351c570ce6ad1a1752cbb1abac', class: `mode mode-${this.mode}`, part: "mode" }, h("span", { key: '3e87998079be0552869ce9d4b716e061dc08cca0', class: "glyph", "aria-hidden": "true" }, glyph), h("span", { key: '1840ecae368882e89cef466bce4fa5193f50e857' }, modeLabel)), h("ind-setpoint", { key: '7a7b98088e7928cbef79f10ff3b47d31b78b4bb6', 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 })));
+    }
+};
+IndTemperatureControl.style = cardCss() + temperatureControlCss();
+
+export { IndTemperatureControl as ind_temperature_control };
+//# sourceMappingURL=ind-temperature-control.entry.js.map
+
+//# sourceMappingURL=ind-temperature-control.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ind-temperature-control.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-temperature-control&encapsulation=shadow","src/components/molecules/temperature-control/temperature-control.css?tag=ind-temperature-control&encapsulation=shadow","src/components/molecules/temperature-control/temperature-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: 210px;\n}\n\n.mode {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  color: var(--ind-surface-text-muted);\n}\n\n.mode-heating { color: var(--ind-state-fault-bg, #dc2626); }\n.mode-cooling { color: var(--ind-color-palette-cyan-300, #22d3ee); }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ThermalMode = 'idle' | 'heating' | 'cooling';\n\n/**\n * Temperature loop faceplate: setpoint vs process value plus a heating/cooling\n * indicator. Re-emits the committed setpoint.\n */\n@Component({\n  tag: 'ind-temperature-control',\n  styleUrls: ['../_shared/card.css', 'temperature-control.css'],\n  shadow: true,\n})\nexport class IndTemperatureControl {\n  /** Loop label (e.g. \"Reactor jacket\"). */\n  @Prop() label!: string;\n  /** Loop tag (e.g. \"TIC-301\"). */\n  @Prop() tag?: string;\n  /** Target temperature (two-way). */\n  @Prop({ mutable: true }) value: number = 20;\n  /** Live process temperature. */\n  @Prop() pv?: number;\n  @Prop() min: number = 0;\n  @Prop() max: number = 200;\n  @Prop() step: number = 0.5;\n  @Prop() precision: number = 1;\n  /** Temperature unit (default °C). */\n  @Prop() unit: string = '°C';\n  @Prop() disabled: boolean = false;\n  /** Current thermal action — drives the indicator. */\n  @Prop({ reflect: true }) mode: ThermalMode = 'idle';\n\n  /** Committed setpoint. */\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    const modeLabel = this.mode === 'heating' ? 'Heating' : this.mode === 'cooling' ? 'Cooling' : 'Idle';\n    const glyph = this.mode === 'heating' ? '🔥' : this.mode === 'cooling' ? '❄' : '○';\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        <div class={`mode mode-${this.mode}`} part=\"mode\">\n          <span class=\"glyph\" aria-hidden=\"true\">{glyph}</span>\n          <span>{modeLabel}</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,qBAAqB,GAAG,MAAM,CAAC,kVAAkV,CAAC;;MCa3W,qBAAqB,GAAA,MAAA;;;;;;AAExB,IAAA,KAAK;;AAEL,IAAA,GAAG;;IAEc,KAAK,GAAW,EAAE;;AAEnC,IAAA,EAAE;IACF,GAAG,GAAW,CAAC;IACf,GAAG,GAAW,GAAG;IACjB,IAAI,GAAW,GAAG;IAClB,SAAS,GAAW,CAAC;;IAErB,IAAI,GAAW,IAAI;IACnB,QAAQ,GAAY,KAAK;;IAER,IAAI,GAAgB,MAAM;;AAG1C,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;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM;QACpG,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG;QAClF,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,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,iBAAa,MAAM,EAAA,EAAE,KAAK,CAAQ,EACrD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,SAAS,CAAQ,CACpB,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-textarea.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bls_NlWP.js';
 
 const textareaCss = () => `:host{display:inline-block;width:100%;font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}.wrap{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px)}.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}.textarea{width:100%;box-sizing:border-box;padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);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);font-family:inherit;font-size:var(--ind-font-size-base, 12px);line-height:var(--ind-font-line-height-normal, 1.4);color:inherit;resize:vertical;outline:none;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);transition:border-color var(--ind-motion-duration-fast, 120ms),     box-shadow   var(--ind-motion-duration-fast, 120ms)}.textarea:focus{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)}.textarea::placeholder{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));opacity:1}:host([variant="mono"]) .textarea{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);line-height:var(--ind-font-line-height-tight, 1.4);background:var(--ind-color-palette-neutral-0, #000000);color:var(--ind-color-palette-neutral-800, #d0d7e0);border-color:var(--ind-surface-border-strong, #5a6776)}:host([invalid]) .textarea{border-color:var(--ind-feedback-error-bg, #dc2626)}:host([invalid]) .textarea:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent)}:host([readonly]) .textarea{cursor:default}:host([disabled]){opacity:0.55;pointer-events:none}`;
 
@@ -48,7 +48,7 @@ const IndTextarea = class {
         this.indChange.emit(e.target.value);
     };
     render() {
-        return (h(Host, { key: 'a4ca904c7a9ca65900e0ccc696aab66429bdde71' }, h("label", { key: '57f1880efe8a30a2bd5e1253c81f058360519c9f', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'aa0367d91235eca6d69fd520617ea831b1ac71fc', class: "label", part: "label" }, this.label), h("textarea", { key: '2248ea771f4ac6f8ae9fb0cc12ea4ed038e7ab24', part: "textarea", class: "textarea", placeholder: this.placeholder, rows: this.rows, disabled: this.disabled, readonly: this.readonly, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onInput: this.onInput, onChange: this.onChange }, this.value))));
+        return (h(Host, { key: '57426919f6763e39da55fc5bf1366a5c9ce24436' }, h("label", { key: 'c0cc807246cd070846c50ad4124297fb1bd2d95d', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'e3a2d9a38526b6cee6f5b07e228dba59daf5d212', class: "label", part: "label" }, this.label), h("textarea", { key: '8b0f6fa3c2b4457db390bf44b06c81e089724da2', part: "textarea", class: "textarea", placeholder: this.placeholder, rows: this.rows, disabled: this.disabled, readonly: this.readonly, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onInput: this.onInput, onChange: this.onChange }, this.value))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const timestampCss = () => `:host{display:inline}.ts{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-size:var(--ind-font-size-sm, 11px);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));white-space:nowrap}:host([format="relative"]) .ts{font-family:var(--ind-font-family-sans, system-ui, sans-serif)}`;
+
+const IndTimestamp = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** ISO string or epoch milliseconds. Defaults to now when omitted. */
+    value;
+    /** Display format. */
+    format = 'datetime';
+    /** BCP-47 locale for formatting. */
+    locale;
+    /** Show seconds for time/datetime formats. */
+    seconds = true;
+    date() {
+        if (this.value === undefined)
+            return new Date();
+        return new Date(this.value);
+    }
+    relative(d) {
+        const diff = d.getTime() - Date.now();
+        const abs = Math.abs(diff);
+        const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });
+        const units = [
+            ['day', 86400000],
+            ['hour', 3600000],
+            ['minute', 60000],
+            ['second', 1000],
+        ];
+        for (const [unit, ms] of units) {
+            if (abs >= ms || unit === 'second') {
+                return rtf.format(Math.round(diff / ms), unit);
+            }
+        }
+        return rtf.format(0, 'second');
+    }
+    formatted(d) {
+        if (Number.isNaN(d.getTime()))
+            return '--';
+        const sec = this.seconds ? { second: '2-digit' } : {};
+        switch (this.format) {
+            case 'iso':
+                return d.toISOString();
+            case 'date':
+                return d.toLocaleDateString(this.locale);
+            case 'time':
+                return d.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit', ...sec });
+            case 'relative':
+                return this.relative(d);
+            case 'datetime':
+            default:
+                return d.toLocaleString(this.locale, {
+                    year: 'numeric', month: '2-digit', day: '2-digit',
+                    hour: '2-digit', minute: '2-digit', ...sec,
+                });
+        }
+    }
+    render() {
+        const d = this.date();
+        const text = this.formatted(d);
+        const iso = Number.isNaN(d.getTime()) ? undefined : d.toISOString();
+        return (h(Host, { key: '46b6ebf2b8408a8b533293ef5a40c5c9380d6b91' }, h("time", { key: '6bc3d7c3e5286927d44594c5eccc7bd03209f83a', class: "ts", part: "time", dateTime: iso }, text)));
+    }
+};
+IndTimestamp.style = timestampCss();
+
+export { IndTimestamp as ind_timestamp };
+//# sourceMappingURL=ind-timestamp.entry.js.map
+
+//# sourceMappingURL=ind-timestamp.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ind-timestamp.entry.js","sources":["src/components/atoms/timestamp/timestamp.css?tag=ind-timestamp&encapsulation=shadow","src/components/atoms/timestamp/timestamp.tsx"],"sourcesContent":[":host {\n  display: inline;\n}\n\n.ts {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-size: var(--ind-font-size-sm, 11px);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  white-space: nowrap;\n}\n\n:host([format=\"relative\"]) .ts {\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TimestampFormat = 'datetime' | 'date' | 'time' | 'relative' | 'iso';\n\n@Component({\n  tag: 'ind-timestamp',\n  styleUrl: 'timestamp.css',\n  shadow: true,\n})\nexport class IndTimestamp {\n  /** ISO string or epoch milliseconds. Defaults to now when omitted. */\n  @Prop() value?: string | number;\n  /** Display format. */\n  @Prop({ reflect: true }) format: TimestampFormat = 'datetime';\n  /** BCP-47 locale for formatting. */\n  @Prop() locale?: string;\n  /** Show seconds for time/datetime formats. */\n  @Prop() seconds: boolean = true;\n\n  private date(): Date {\n    if (this.value === undefined) return new Date();\n    return new Date(this.value);\n  }\n\n  private relative(d: Date): string {\n    const diff = d.getTime() - Date.now();\n    const abs = Math.abs(diff);\n    const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });\n    const units: [Intl.RelativeTimeFormatUnit, number][] = [\n      ['day', 86400000],\n      ['hour', 3600000],\n      ['minute', 60000],\n      ['second', 1000],\n    ];\n    for (const [unit, ms] of units) {\n      if (abs >= ms || unit === 'second') {\n        return rtf.format(Math.round(diff / ms), unit);\n      }\n    }\n    return rtf.format(0, 'second');\n  }\n\n  private formatted(d: Date): string {\n    if (Number.isNaN(d.getTime())) return '--';\n    const sec = this.seconds ? { second: '2-digit' as const } : {};\n    switch (this.format) {\n      case 'iso':\n        return d.toISOString();\n      case 'date':\n        return d.toLocaleDateString(this.locale);\n      case 'time':\n        return d.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit', ...sec });\n      case 'relative':\n        return this.relative(d);\n      case 'datetime':\n      default:\n        return d.toLocaleString(this.locale, {\n          year: 'numeric', month: '2-digit', day: '2-digit',\n          hour: '2-digit', minute: '2-digit', ...sec,\n        });\n    }\n  }\n\n  render() {\n    const d = this.date();\n    const text = this.formatted(d);\n    const iso = Number.isNaN(d.getTime()) ? undefined : d.toISOString();\n    return (\n      <Host>\n        <time class=\"ts\" part=\"time\" dateTime={iso}>{text}</time>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+
+const toggleCss = () => `:host{display:inline-flex;--_w:36px;--_h:18px;--_pad:2px}:host([size="sm"]){--_w:28px;--_h:14px}:host([size="lg"]){--_w:46px;--_h:24px}.control{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:0;margin:0;border:none;background:none;cursor:pointer;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))}.control:disabled{cursor:not-allowed;opacity:0.5}.track{position:relative;display:inline-flex;align-items:center;width:var(--_w);height:var(--_h);background:var(--ind-state-stopped-bg, #5a6776);border:1px solid var(--ind-surface-border-strong, #5a6776);border-radius:var(--ind-radius-full, 9999px);transition:background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}.thumb{position:absolute;top:50%;left:var(--_pad);transform:translateY(-50%);width:calc(var(--_h) - var(--_pad) * 2);height:calc(var(--_h) - var(--_pad) * 2);background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);transition:left var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}.text{flex:1;text-align:center;font-size:8px;font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;color:var(--ind-surface-text-inverse, #f4f6f8);padding:0 4px}:host([checked]) .track{background:var(--ind-state-running-bg, #16a34a);border-color:var(--ind-state-running-border, #4ade80)}:host([checked]) .thumb{left:calc(100% - var(--_h) + var(--_pad))}.control:focus-visible .track{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:2px}@media (prefers-reduced-motion: reduce){.thumb,.track{transition:none}}`;
+
+const IndToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indChange = createEvent(this, "indChange");
+    }
+    /** On/off state. */
+    checked = false;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible label. Also the accessible name. */
+    label;
+    /** Text shown for the on state (in-track). */
+    textOn;
+    /** Text shown for the off state (in-track). */
+    textOff;
+    /** Fires when the state changes. */
+    indChange;
+    toggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.indChange.emit(this.checked);
+    };
+    onKey = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'e6963c1c5825f77432a6ee86a5331c73c038dc2d' }, h("button", { key: 'd6fc26eba0b9c4afb63a5ff4aaf3acfcd35478dc', type: "button", class: "control", part: "control", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-label": this.label, disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKey }, h("span", { key: '926f8adf483f6f336665e5fc56a655de039bd960', class: "track", part: "track" }, (this.textOn || this.textOff) && (h("span", { key: '6c176290532cff821d8f0eaac895528e8db3766a', class: "text", part: "text", "aria-hidden": "true" }, this.checked ? this.textOn : this.textOff)), h("span", { key: '6c87d49ca15e9f0000edd6c74291d691efd38c8f', class: "thumb", part: "thumb" })), this.label && h("span", { key: 'a0caa6d714b57d701187bf669291b9989a4b5f5d', class: "label", part: "label" }, this.label))));
+    }
+};
+IndToggle.style = toggleCss();
+
+export { IndToggle as ind_toggle };
+//# sourceMappingURL=ind-toggle.entry.js.map
+
+//# sourceMappingURL=ind-toggle.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ind-toggle.entry.js","sources":["src/components/atoms/toggle/toggle.css?tag=ind-toggle&encapsulation=shadow","src/components/atoms/toggle/toggle.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  --_w: 36px;\n  --_h: 18px;\n  --_pad: 2px;\n}\n\n:host([size=\"sm\"]) { --_w: 28px; --_h: 14px; }\n:host([size=\"lg\"]) { --_w: 46px; --_h: 24px; }\n\n.control {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: 0;\n  margin: 0;\n  border: none;\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  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n}\n\n.control:disabled { cursor: not-allowed; opacity: 0.5; }\n\n.track {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--_w);\n  height: var(--_h);\n  background: var(--ind-state-stopped-bg, #5a6776);\n  border: 1px solid var(--ind-surface-border-strong, #5a6776);\n  border-radius: var(--ind-radius-full, 9999px);\n  transition: background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--_pad);\n  transform: translateY(-50%);\n  width: calc(var(--_h) - var(--_pad) * 2);\n  height: calc(var(--_h) - var(--_pad) * 2);\n  background: #fff;\n  border-radius: 50%;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  transition: left var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n.text {\n  flex: 1;\n  text-align: center;\n  font-size: 8px;\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  color: var(--ind-surface-text-inverse, #f4f6f8);\n  padding: 0 4px;\n}\n\n:host([checked]) .track {\n  background: var(--ind-state-running-bg, #16a34a);\n  border-color: var(--ind-state-running-border, #4ade80);\n}\n\n:host([checked]) .thumb {\n  left: calc(100% - var(--_h) + var(--_pad));\n}\n\n.control:focus-visible .track {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb, .track { transition: none; }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-toggle',\n  styleUrl: 'toggle.css',\n  shadow: true,\n})\nexport class IndToggle {\n  /** On/off state. */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: ToggleSize = 'md';\n  /** Visible label. Also the accessible name. */\n  @Prop() label?: string;\n  /** Text shown for the on state (in-track). */\n  @Prop() textOn?: string;\n  /** Text shown for the off state (in-track). */\n  @Prop() textOff?: string;\n\n  /** Fires when the state changes. */\n  @Event() indChange!: EventEmitter<boolean>;\n\n  private toggle = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.indChange.emit(this.checked);\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"control\"\n          part=\"control\"\n          role=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-label={this.label}\n          disabled={this.disabled}\n          onClick={this.toggle}\n          onKeyDown={this.onKey}\n        >\n          <span class=\"track\" part=\"track\">\n            {(this.textOn || this.textOff) && (\n              <span class=\"text\" part=\"text\" aria-hidden=\"true\">\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            )}\n            <span class=\"thumb\" part=\"thumb\" />\n          </span>\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,6rDAA6rD,CAAC;;MCS1sD,SAAS,GAAA,MAAA;;;;;;IAEoB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAe,IAAI;;AAExC,IAAA,KAAK;;AAEL,IAAA,MAAM;;AAEN,IAAA,OAAO;;AAGN,IAAA,SAAS;IAEV,MAAM,GAAG,MAAK;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACnC,KAAC;AAEO,IAAA,KAAK,GAAG,CAAC,CAAgB,KAAI;AACnC,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE;;AAEjB,KAAC;IAED,MAAM,GAAA;QACJ,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,SAAS,EACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,KAAK,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,MAC3B,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,IAC9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAG,CAC9B,EACN,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC5D,CACJ;;;;;;;"}

package/dist/esm/ind-toolbar-action.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 toolbarActionCss = () => `:host{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border-bottom: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-wrap:wrap}.filter ::slotted(*){min-width:200px}.flags{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px)}.spacer{flex:1}.counter{font-family:var(--ind-font-family-mono);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-sm, 11px);white-space:nowrap}.actions{display:flex;gap:var(--ind-spacing-3, 6px)}`;
 
@@ -10,7 +10,7 @@ const IndToolbarAction = class {
     counter;
     render() {
         const hasCounter = this.counter !== undefined && this.counter !== '' && this.counter !== null;
-        return (h(Host, { key: '335b711876377ee50cfeaac4635c2794d5c038eb' }, h("span", { key: '69cf5e6ca388c2bef9004cddd515db9c1d34f2f9', class: "filter", part: "filter" }, h("slot", { key: '6a5d72136095b2531214ea2e28a39a795e8b7e2d', name: "filter" })), h("span", { key: '614f12f7432752c3deef9cca8174a503d7048878', class: "flags", part: "flags" }, h("slot", { key: 'db14ea5398c70574cb0b690db2e0578aafa6a545', name: "flags" })), h("span", { key: '07ff837c88d3228666b7bcd36ae52f9efa5b081d', class: "spacer" }), hasCounter && h("span", { key: 'ee9220383a9a4c9c471f4945da3c28f67dada3ee', class: "counter", part: "counter" }, this.counter), h("span", { key: '53bc247add97382c56d4447b30c9b73e663fbe96', class: "actions", part: "actions" }, h("slot", { key: 'da6c78e96a87a412f44d620356268ef1a746fc99', name: "actions" }))));
+        return (h(Host, { key: '81aa8e4cad409b96e588cf4691bef6ebd66ce043' }, h("span", { key: '3fc77803b13475a052d44eb78349532f225c89a6', class: "filter", part: "filter" }, h("slot", { key: '52b82a86e26d0cceddd855e99c10451847c31b6b', name: "filter" })), h("span", { key: 'ee63d41fc03f48290c8af4b9fecf2b3f3bd69037', class: "flags", part: "flags" }, h("slot", { key: '8e9b7de789964881f0b563d52dac4df81aec34b1', name: "flags" })), h("span", { key: '8a326615b88b093098174cb4ed4cd862975c6223', class: "spacer" }), hasCounter && h("span", { key: '287d17705a342b6d0051de2231fd21f8c75d83ac', class: "counter", part: "counter" }, this.counter), h("span", { key: 'cbeae4f7b493ed26aa3c1e3c0d85fd3184bb00aa', class: "actions", part: "actions" }, h("slot", { key: 'b6725f26e0fae0dc46d0cf34de3dbf894922777c', name: "actions" }))));
     }
 };
 IndToolbarAction.style = toolbarActionCss();

package/dist/esm/ind-tree-node.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+
+const treeNodeCss = () => `:host{display:block;font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}.row{display:flex;align-items:center;gap:var(--ind-spacing-2, 4px);padding:2px var(--ind-spacing-3, 6px);cursor:pointer;border-radius:var(--ind-radius-sm, 2px);user-select:none}.row:hover{background:var(--ind-surface-raised, #1b222c)}.row:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:-2px}:host([selected]) .row{background:color-mix(in srgb, var(--ind-button-primary-bg, #2563eb) 28%, transparent)}.indent{width:var(--_indent, 0);flex:none}.twisty{appearance:none;border:none;background:none;padding:0;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ind-surface-text-muted, #7a8694);flex:none}.twisty.is-leaf{cursor:default}.twisty svg{width:12px;height:12px;transition:transform var(--ind-motion-duration-fast, 120ms) ease}.twisty svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host([expanded]) .twisty svg{transform:rotate(90deg)}.icon{display:inline-flex;align-items:center}.icon:empty{display:none}.label{white-space:nowrap}.children{display:block}@media (prefers-reduced-motion: reduce){.twisty svg{transition:none}}`;
+
+const IndTreeNode = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indSelect = createEvent(this, "indSelect");
+        this.indToggle = createEvent(this, "indToggle");
+    }
+    /** Nesting depth (0 = root) — drives the indent. */
+    level = 0;
+    /** Expanded state (ignored for leaf nodes). */
+    expanded = false;
+    /** Leaf node — no twisty, not expandable. */
+    leaf = false;
+    /** Selected state. */
+    selected = false;
+    /** Visible text. Use the default slot for richer content. */
+    label;
+    /** Fires when the row is selected. */
+    indSelect;
+    /** Fires when the twisty toggles expansion. */
+    indToggle;
+    toggle = (e) => {
+        e.stopPropagation();
+        if (this.leaf)
+            return;
+        this.expanded = !this.expanded;
+        this.indToggle.emit(this.expanded);
+    };
+    select = () => {
+        this.indSelect.emit();
+    };
+    onKey = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.select();
+        }
+        else if (e.key === 'ArrowRight' && !this.leaf && !this.expanded) {
+            this.expanded = true;
+            this.indToggle.emit(true);
+        }
+        else if (e.key === 'ArrowLeft' && !this.leaf && this.expanded) {
+            this.expanded = false;
+            this.indToggle.emit(false);
+        }
+    };
+    render() {
+        return (h(Host, { key: '412fc1efe18db56c9cc0a2fc8ba9564bf9c4d7bb' }, h("div", { key: '05392b3770fd8add45281948656850dfe792a5d1', class: "row", part: "row", role: "treeitem", "aria-expanded": this.leaf ? undefined : this.expanded ? 'true' : 'false', "aria-selected": this.selected ? 'true' : 'false', tabindex: "0", style: { '--_indent': `${this.level * 16}px` }, onClick: this.select, onKeyDown: this.onKey }, h("span", { key: '63eec9a57c75ad32154ef4b70a7bcff647e4a2de', class: "indent", "aria-hidden": "true" }), this.leaf ? (h("span", { class: "twisty is-leaf", part: "twisty", "aria-hidden": "true" })) : (h("button", { type: "button", class: "twisty", part: "twisty", "aria-label": this.expanded ? 'Collapse' : 'Expand', onClick: this.toggle }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M9 5l7 7-7 7" })))), h("span", { key: 'd5c26f9bd8a479fb0dc261a0e2e0f147d978245f', class: "icon", part: "icon" }, h("slot", { key: '9978ea0bc931f6611e95cde6d36328cd0418e4dc', name: "icon" })), h("span", { key: 'd6d89358b351f02fa968ffc83e4a1ed60ae6f467', class: "label", part: "label" }, this.label, h("slot", { key: '58e1550e39cde11164b6266c0e298e89b6eac826' }))), !this.leaf && this.expanded && (h("div", { key: 'c8e965f709868143d6f7a54a663e73cb41c4c498', class: "children", part: "children", role: "group" }, h("slot", { key: 'f4555d55f582041bc74f7b26975123803d9aca2f', name: "children" })))));
+    }
+};
+IndTreeNode.style = treeNodeCss();
+
+export { IndTreeNode as ind_tree_node };
+//# sourceMappingURL=ind-tree-node.entry.js.map
+
+//# sourceMappingURL=ind-tree-node.entry.js.map

package/dist/esm/ind-tree-node.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-tree-node.entry.js","sources":["src/components/atoms/tree-node/tree-node.css?tag=ind-tree-node&encapsulation=shadow","src/components/atoms/tree-node/tree-node.tsx"],"sourcesContent":[":host {\n  display: block;\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}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  padding: 2px var(--ind-spacing-3, 6px);\n  cursor: pointer;\n  border-radius: var(--ind-radius-sm, 2px);\n  user-select: none;\n}\n\n.row:hover { background: var(--ind-surface-raised, #1b222c); }\n\n.row:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: -2px;\n}\n\n:host([selected]) .row {\n  background: color-mix(in srgb, var(--ind-button-primary-bg, #2563eb) 28%, transparent);\n}\n\n.indent { width: var(--_indent, 0); flex: none; }\n\n.twisty {\n  appearance: none;\n  border: none;\n  background: none;\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: var(--ind-surface-text-muted, #7a8694);\n  flex: none;\n}\n.twisty.is-leaf { cursor: default; }\n\n.twisty svg {\n  width: 12px;\n  height: 12px;\n  transition: transform var(--ind-motion-duration-fast, 120ms) ease;\n}\n.twisty svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\n:host([expanded]) .twisty svg { transform: rotate(90deg); }\n\n.icon { display: inline-flex; align-items: center; }\n.icon:empty { display: none; }\n\n.label { white-space: nowrap; }\n\n.children { display: block; }\n\n@media (prefers-reduced-motion: reduce) {\n  .twisty svg { transition: none; }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ind-tree-node',\n  styleUrl: 'tree-node.css',\n  shadow: true,\n})\nexport class IndTreeNode {\n  /** Nesting depth (0 = root) — drives the indent. */\n  @Prop() level: number = 0;\n  /** Expanded state (ignored for leaf nodes). */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n  /** Leaf node — no twisty, not expandable. */\n  @Prop({ reflect: true }) leaf: boolean = false;\n  /** Selected state. */\n  @Prop({ reflect: true }) selected: boolean = false;\n  /** Visible text. Use the default slot for richer content. */\n  @Prop() label?: string;\n\n  /** Fires when the row is selected. */\n  @Event() indSelect!: EventEmitter<void>;\n  /** Fires when the twisty toggles expansion. */\n  @Event() indToggle!: EventEmitter<boolean>;\n\n  private toggle = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.leaf) return;\n    this.expanded = !this.expanded;\n    this.indToggle.emit(this.expanded);\n  };\n\n  private select = () => {\n    this.indSelect.emit();\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); }\n    else if (e.key === 'ArrowRight' && !this.leaf && !this.expanded) { this.expanded = true; this.indToggle.emit(true); }\n    else if (e.key === 'ArrowLeft' && !this.leaf && this.expanded) { this.expanded = false; this.indToggle.emit(false); }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"row\"\n          part=\"row\"\n          role=\"treeitem\"\n          aria-expanded={this.leaf ? undefined : this.expanded ? 'true' : 'false'}\n          aria-selected={this.selected ? 'true' : 'false'}\n          tabindex=\"0\"\n          style={{ '--_indent': `${this.level * 16}px` }}\n          onClick={this.select}\n          onKeyDown={this.onKey}\n        >\n          <span class=\"indent\" aria-hidden=\"true\" />\n          {this.leaf ? (\n            <span class=\"twisty is-leaf\" part=\"twisty\" aria-hidden=\"true\" />\n          ) : (\n            <button type=\"button\" class=\"twisty\" part=\"twisty\" aria-label={this.expanded ? 'Collapse' : 'Expand'} onClick={this.toggle}>\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 5l7 7-7 7\" /></svg>\n            </button>\n          )}\n          <span class=\"icon\" part=\"icon\"><slot name=\"icon\" /></span>\n          <span class=\"label\" part=\"label\">{this.label}<slot /></span>\n        </div>\n        {!this.leaf && this.expanded && (\n          <div class=\"children\" part=\"children\" role=\"group\">\n            <slot name=\"children\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ind-trend-viewer.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const panelCss = () => `:host{display:flex;flex-direction:column;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));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const trendViewerCss = () => `:host{min-width:360px}.series{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px)}.series-head{display:flex;align-items:baseline;gap:var(--ind-spacing-3, 6px);font-size:var(--ind-font-size-sm, 11px)}.series-label{color:var(--ind-surface-text-secondary)}.series-value{margin-left:auto;font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);color:var(--ind-surface-text-primary)}.legend{width:10px;height:10px;border-radius:2px;flex:0 0 auto;background:var(--ind-surface-text-muted)}.legend-running{background:var(--ind-state-running-bg, #16a34a)}.legend-warning{background:var(--ind-state-warning-bg, #f59e0b)}.legend-fault{background:var(--ind-state-fault-bg, #dc2626)}.legend-default{background:var(--ind-color-palette-cyan-300, #22d3ee)}.series-spark{width:100%;height:40px}`;
+
+const IndTrendViewer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    heading = 'Trends';
+    /** Series to plot. */
+    series = [];
+    last(s) {
+        if (!s.points.length)
+            return '--';
+        const v = s.points[s.points.length - 1];
+        return s.precision !== undefined ? v.toFixed(s.precision) : String(v);
+    }
+    render() {
+        return (h(Host, { key: '41e4221a264008e8405251a8701cc16576758fe7' }, h("div", { key: '9c0684d404e77dbb2de77d1873b933f58a420e85', class: "panel-head" }, h("span", { key: '596e6de04ef55e07038c9d7c78cbf258767c7699', class: "panel-title", part: "heading" }, this.heading)), h("div", { key: 'fd80bafe1fbe0a0f7bccc713a6ec0a13b5eb53b3', class: "panel-body" }, this.series.length === 0 ? (h("div", { class: "panel-empty" }, "No series")) : (this.series.map((s, i) => (h("div", { class: "series", part: "series", key: i }, h("div", { class: "series-head" }, h("span", { class: `legend legend-${s.variant ?? 'default'}`, "aria-hidden": "true" }), h("span", { class: "series-label" }, s.label), h("span", { class: "series-value" }, this.last(s), s.unit ? ` ${s.unit}` : '')), h("ind-sparkline", { class: "series-spark", points: s.points, variant: s.variant ?? 'default', area: true }))))))));
+    }
+};
+IndTrendViewer.style = panelCss() + trendViewerCss();
+
+export { IndTrendViewer as ind_trend_viewer };
+//# sourceMappingURL=ind-trend-viewer.entry.js.map
+
+//# sourceMappingURL=ind-trend-viewer.entry.js.map

package/dist/esm/ind-trend-viewer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-trend-viewer.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-trend-viewer&encapsulation=shadow","src/components/organisms/trend-viewer/trend-viewer.css?tag=ind-trend-viewer&encapsulation=shadow","src/components/organisms/trend-viewer/trend-viewer.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\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  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-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);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: 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-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 360px;\n}\n\n.series {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n}\n\n.series-head {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-3, 6px);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.series-label {\n  color: var(--ind-surface-text-secondary);\n}\n\n.series-value {\n  margin-left: auto;\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  color: var(--ind-surface-text-primary);\n}\n\n.legend {\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n  flex: 0 0 auto;\n  background: var(--ind-surface-text-muted);\n}\n\n.legend-running { background: var(--ind-state-running-bg, #16a34a); }\n.legend-warning { background: var(--ind-state-warning-bg, #f59e0b); }\n.legend-fault { background: var(--ind-state-fault-bg, #dc2626); }\n.legend-default { background: var(--ind-color-palette-cyan-300, #22d3ee); }\n\n.series-spark {\n  width: 100%;\n  height: 40px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TrendVariant } from '../../molecules/trend-widget/trend-widget';\n\nexport interface TrendSeries {\n  label: string;\n  points: number[];\n  unit?: string;\n  variant?: TrendVariant;\n  precision?: number;\n}\n\n/**\n * Multi-series trend viewer. Stacks one labelled `<ind-sparkline>` per series\n * with the current value, for comparing several tags without a full charting\n * library.\n */\n@Component({\n  tag: 'ind-trend-viewer',\n  styleUrls: ['../_shared/panel.css', 'trend-viewer.css'],\n  shadow: true,\n})\nexport class IndTrendViewer {\n  @Prop() heading: string = 'Trends';\n  /** Series to plot. */\n  @Prop() series: TrendSeries[] = [];\n\n  private last(s: TrendSeries): string {\n    if (!s.points.length) return '--';\n    const v = s.points[s.points.length - 1];\n    return s.precision !== undefined ? v.toFixed(s.precision) : String(v);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n        </div>\n        <div class=\"panel-body\">\n          {this.series.length === 0 ? (\n            <div class=\"panel-empty\">No series</div>\n          ) : (\n            this.series.map((s, i) => (\n              <div class=\"series\" part=\"series\" key={i}>\n                <div class=\"series-head\">\n                  <span class={`legend legend-${s.variant ?? 'default'}`} aria-hidden=\"true\"></span>\n                  <span class=\"series-label\">{s.label}</span>\n                  <span class=\"series-value\">\n                    {this.last(s)}{s.unit ? ` ${s.unit}` : ''}\n                  </span>\n                </div>\n                <ind-sparkline class=\"series-spark\" points={s.points} variant={s.variant ?? 'default'} area></ind-sparkline>\n              </div>\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,cAAc,GAAG,MAAM,CAAC,uzBAAuzB,CAAC;;MCqBz0B,cAAc,GAAA,MAAA;;;;IACjB,OAAO,GAAW,QAAQ;;IAE1B,MAAM,GAAkB,EAAE;AAE1B,IAAA,IAAI,CAAC,CAAc,EAAA;AACzB,QAAA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;AACjC,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACvC,OAAO,CAAC,CAAC,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;;IAGvE,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CAC1D,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IACvB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EAAA,WAAA,CAAgB,KAExC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACnB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,CAAA,cAAA,EAAiB,CAAC,CAAC,OAAO,IAAI,SAAS,CAAA,CAAE,EAAA,aAAA,EAAc,MAAM,EAAA,CAAQ,EAClF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,IAAE,CAAC,CAAC,KAAK,CAAQ,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,EACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAA,CAAA,EAAI,CAAC,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE,CACpC,CACH,EACN,CAAA,CAAA,eAAA,EAAA,EAAe,KAAK,EAAC,cAAc,EAAC,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,SAAS,EAAE,IAAI,EAAA,IAAA,EAAA,CAAiB,CACxG,CACP,CAAC,CACH,CACG,CACD;;;;;;;"}

package/dist/esm/ind-trend-widget.entry.js

@@ -0,0 +1,46 @@
+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 trendWidgetCss = () => `:host{min-width:200px}.spark{width:100%;height:44px}.bounds{display:flex;justify-content:space-between;font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted)}`;
+
+const IndTrendWidget = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Series label (e.g. "Discharge pressure"). */
+    label;
+    /** Process tag. */
+    tag;
+    /** Current value (defaults to the last point). */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Decimal places. */
+    precision = 1;
+    /** Recent samples. */
+    points = [];
+    /** Sparkline lower bound (auto if omitted). */
+    min;
+    /** Sparkline upper bound (auto if omitted). */
+    max;
+    /** Sparkline color variant. */
+    variant = 'default';
+    current() {
+        if (this.value !== undefined)
+            return this.value;
+        return this.points.length ? this.points[this.points.length - 1] : undefined;
+    }
+    render() {
+        const cur = this.current();
+        const lo = this.min ?? (this.points.length ? Math.min(...this.points) : undefined);
+        const hi = this.max ?? (this.points.length ? Math.max(...this.points) : undefined);
+        return (h(Host, { key: 'eb9a651961a5989007c7c746f435552249f64938', role: "group", "aria-label": this.label }, h("div", { key: 'e4e3160f886ed6d0419f49c722d4e47cb6fc2a5a', class: "card-head" }, h("span", { key: 'cb6534bfb01a54e30c5d4ab46b9c11de6f6f633d', class: "card-title", part: "label" }, this.label), this.tag && h("span", { key: '1e9f94807667aab363d7b7ee49b60e0fefd55f7b', class: "card-tag", part: "tag" }, this.tag)), cur !== undefined && (h("ind-value", { key: '4e1ee4fd15d6dc61ded72b81f5393ea5a996f234', part: "value", value: cur, unit: this.unit, precision: this.precision, size: "lg" })), this.points.length > 1 && (h("ind-sparkline", { key: 'eee4f130adbb659f75ab6c1a004f770bf5ff92ad', class: "spark", part: "spark", points: this.points, min: this.min, max: this.max, variant: this.variant, area: true })), lo !== undefined && hi !== undefined && (h("div", { key: 'bb09835b6ee49b2aa80a05867222cf7893bfbf89', class: "bounds", part: "bounds" }, h("span", { key: 'd9e5ec2921d758508439e573eae0bd07a3c5bc30' }, "min ", lo.toFixed(this.precision)), h("span", { key: '8e889674c72bc88d2915c15209534bfe92ed10c9' }, "max ", hi.toFixed(this.precision))))));
+    }
+};
+IndTrendWidget.style = cardCss() + trendWidgetCss();
+
+export { IndTrendWidget as ind_trend_widget };
+//# sourceMappingURL=ind-trend-widget.entry.js.map
+
+//# sourceMappingURL=ind-trend-widget.entry.js.map

package/dist/esm/ind-trend-widget.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-trend-widget.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-trend-widget&encapsulation=shadow","src/components/molecules/trend-widget/trend-widget.css?tag=ind-trend-widget&encapsulation=shadow","src/components/molecules/trend-widget/trend-widget.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\n.spark {\n  width: 100%;\n  height: 44px;\n}\n\n.bounds {\n  display: flex;\n  justify-content: space-between;\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-muted);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TrendVariant = 'default' | 'running' | 'warning' | 'fault';\n\n/**\n * Compact trend widget: current value, an `<ind-sparkline>` of the recent\n * window, and min/max bounds. For dense dashboards where a full trend chart is\n * too heavy.\n */\n@Component({\n  tag: 'ind-trend-widget',\n  styleUrls: ['../_shared/card.css', 'trend-widget.css'],\n  shadow: true,\n})\nexport class IndTrendWidget {\n  /** Series label (e.g. \"Discharge pressure\"). */\n  @Prop() label!: string;\n  /** Process tag. */\n  @Prop() tag?: string;\n  /** Current value (defaults to the last point). */\n  @Prop() value?: number;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Decimal places. */\n  @Prop() precision: number = 1;\n  /** Recent samples. */\n  @Prop() points: number[] = [];\n  /** Sparkline lower bound (auto if omitted). */\n  @Prop() min?: number;\n  /** Sparkline upper bound (auto if omitted). */\n  @Prop() max?: number;\n  /** Sparkline color variant. */\n  @Prop() variant: TrendVariant = 'default';\n\n  private current(): number | undefined {\n    if (this.value !== undefined) return this.value;\n    return this.points.length ? this.points[this.points.length - 1] : undefined;\n  }\n\n  render() {\n    const cur = this.current();\n    const lo = this.min ?? (this.points.length ? Math.min(...this.points) : undefined);\n    const hi = this.max ?? (this.points.length ? Math.max(...this.points) : undefined);\n    return (\n      <Host role=\"group\" aria-label={this.label}>\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        {cur !== undefined && (\n          <ind-value part=\"value\" value={cur} unit={this.unit} precision={this.precision} size=\"lg\" />\n        )}\n        {this.points.length > 1 && (\n          <ind-sparkline\n            class=\"spark\"\n            part=\"spark\"\n            points={this.points}\n            min={this.min}\n            max={this.max}\n            variant={this.variant}\n            area\n          />\n        )}\n        {lo !== undefined && hi !== undefined && (\n          <div class=\"bounds\" part=\"bounds\">\n            <span>min {lo.toFixed(this.precision)}</span>\n            <span>max {hi.toFixed(this.precision)}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}