@ind-ds/core 0.1.0 → 0.2.0

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const counterCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_bg:var(--ind-surface-strong, #5a6776);--_fg:var(--ind-surface-text-inverse, #f4f6f8)}.label{font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);line-height:1;color:var(--_fg);background:var(--_bg);border-radius:var(--ind-radius-full, 9999px);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}:host([size="sm"]) .count{min-width:14px;height:14px;font-size:9px;padding:0 4px}:host([size="lg"]) .count{min-width:22px;height:22px;font-size:var(--ind-font-size-sm, 11px)}.count.is-dot{min-width:8px;width:8px;height:8px;padding:0}:host([variant="success"]){--_bg:var(--ind-feedback-success-bg, #16a34a)}:host([variant="info"]){--_bg:var(--ind-feedback-info-bg, #0891b2)}:host([variant="warning"]){--_bg:var(--ind-feedback-warning-bg, #f59e0b);--_fg:#1a1205}:host([variant="error"]){--_bg:var(--ind-feedback-error-bg, #dc2626)}`;
+
+const IndCounter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Numeric value. */
+    value = 0;
+    /** Clamp the displayed value, rendering e.g. "99+" beyond this. */
+    max;
+    /** Semantic color. */
+    variant = 'neutral';
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered before the count. */
+    label;
+    /** Render as a small circular dot when the value is 0 (no number). */
+    dotWhenZero = false;
+    display() {
+        if (this.max !== undefined && this.value > this.max)
+            return `${this.max}+`;
+        return String(this.value);
+    }
+    render() {
+        const zeroDot = this.dotWhenZero && this.value === 0;
+        return (h(Host, { key: '48026380f78d108475e632677800e9c36ecba2a7', role: "status", "aria-label": `${this.label ? this.label + ': ' : ''}${this.value}` }, this.label && h("span", { key: '7ebaf39bda7222c110cf2006d63abc59f649aa3a', class: "label", part: "label" }, this.label), h("span", { key: 'c3185a7fcfea5f3b4666d9216006b56e27544707', class: { count: true, 'is-dot': zeroDot }, part: "count" }, !zeroDot && this.display())));
+    }
+};
+IndCounter.style = counterCss();
+
+export { IndCounter as ind_counter };
+//# sourceMappingURL=ind-counter.entry.js.map
+
+//# sourceMappingURL=ind-counter.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ind-counter.entry.js","sources":["src/components/atoms/counter/counter.css?tag=ind-counter&encapsulation=shadow","src/components/atoms/counter/counter.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_bg: var(--ind-surface-strong, #5a6776);\n  --_fg: var(--ind-surface-text-inverse, #f4f6f8);\n}\n\n.label {\n  font-size: var(--ind-font-size-base, 12px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  line-height: 1;\n  color: var(--_fg);\n  background: var(--_bg);\n  border-radius: var(--ind-radius-full, 9999px);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n:host([size=\"sm\"]) .count { min-width: 14px; height: 14px; font-size: 9px; padding: 0 4px; }\n:host([size=\"lg\"]) .count { min-width: 22px; height: 22px; font-size: var(--ind-font-size-sm, 11px); }\n\n.count.is-dot {\n  min-width: 8px;\n  width: 8px;\n  height: 8px;\n  padding: 0;\n}\n\n:host([variant=\"success\"]) { --_bg: var(--ind-feedback-success-bg, #16a34a); }\n:host([variant=\"info\"])    { --_bg: var(--ind-feedback-info-bg, #0891b2); }\n:host([variant=\"warning\"]) { --_bg: var(--ind-feedback-warning-bg, #f59e0b); --_fg: #1a1205; }\n:host([variant=\"error\"])   { --_bg: var(--ind-feedback-error-bg, #dc2626); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CounterVariant = 'neutral' | 'success' | 'info' | 'warning' | 'error';\nexport type CounterSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-counter',\n  styleUrl: 'counter.css',\n  shadow: true,\n})\nexport class IndCounter {\n  /** Numeric value. */\n  @Prop() value: number = 0;\n\n  /** Clamp the displayed value, rendering e.g. \"99+\" beyond this. */\n  @Prop() max?: number;\n\n  /** Semantic color. */\n  @Prop({ reflect: true }) variant: CounterVariant = 'neutral';\n\n  /** Size. */\n  @Prop({ reflect: true }) size: CounterSize = 'md';\n\n  /** Optional label rendered before the count. */\n  @Prop() label?: string;\n\n  /** Render as a small circular dot when the value is 0 (no number). */\n  @Prop({ reflect: true }) dotWhenZero: boolean = false;\n\n  private display(): string {\n    if (this.max !== undefined && this.value > this.max) return `${this.max}+`;\n    return String(this.value);\n  }\n\n  render() {\n    const zeroDot = this.dotWhenZero && this.value === 0;\n    return (\n      <Host role=\"status\" aria-label={`${this.label ? this.label + ': ' : ''}${this.value}`}>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n        <span class={{ count: true, 'is-dot': zeroDot }} part=\"count\">\n          {!zeroDot && this.display()}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,mxCAAmxC,CAAC;;MCUjyC,UAAU,GAAA,MAAA;;;;;IAEb,KAAK,GAAW,CAAC;;AAGjB,IAAA,GAAG;;IAGc,OAAO,GAAmB,SAAS;;IAGnC,IAAI,GAAgB,IAAI;;AAGzC,IAAA,KAAK;;IAGY,WAAW,GAAY,KAAK;IAE7C,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,CAAA,EAAG,IAAI,CAAC,GAAG,GAAG;AAC1E,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG3B,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;QACpD,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAClF,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,EAAA,EAC1D,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,CACtB,CACF;;;;;;;"}

package/dist/esm/ind-datetime-picker.entry.js

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+
+const datetimePickerCss = () => `: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));--_h:26px}:host([size="sm"]){--_h:22px}:host([size="lg"]){--_h:32px}.wrap{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px)}.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))}.input{height:var(--_h);padding:0 var(--ind-spacing-3, 6px);font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-size:var(--ind-font-size-base, 12px);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-primary, #eef1f5);background:var(--ind-surface-sunken, light-dark(#fff, #000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-sm, 2px);color-scheme:dark light}.input:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:0}.input:disabled{opacity:0.5;cursor:not-allowed}:host([invalid]) .input{border-color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const IndDateTimePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indChange = createEvent(this, "indChange");
+    }
+    /** Picker mode (maps to the native input type). */
+    mode = 'datetime-local';
+    /** Current ISO value. */
+    value = '';
+    /** Min bound (ISO). */
+    min;
+    /** Max bound (ISO). */
+    max;
+    /** Step (seconds for time-based modes). */
+    step;
+    /** Disabled. */
+    disabled = false;
+    /** Invalid state. */
+    invalid = false;
+    /** Size. */
+    size = 'md';
+    /** Visible label. */
+    label;
+    /** Field name (forms). */
+    name;
+    /** Fires on commit. */
+    indChange;
+    onChange = (e) => {
+        const v = e.target.value;
+        this.value = v;
+        this.indChange.emit(v);
+    };
+    render() {
+        return (h(Host, { key: 'adbe5d948799289119a3271a5a13853499194df9' }, h("label", { key: '1ad4d7391ced4d2215f33c0bda1e72922e46aa3c', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'e009a29ae52273e383d099ea48e7a93f1948ac0f', class: "label", part: "label" }, this.label), h("input", { key: '758b22432cdc271ac603533257f04fb619297522', class: "input", part: "input", type: this.mode, value: this.value, min: this.min, max: this.max, step: this.step, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? 'true' : 'false', "aria-label": this.label, onChange: this.onChange }))));
+    }
+};
+IndDateTimePicker.style = datetimePickerCss();
+
+export { IndDateTimePicker as ind_datetime_picker };
+//# sourceMappingURL=ind-datetime-picker.entry.js.map
+
+//# sourceMappingURL=ind-datetime-picker.entry.js.map

package/dist/esm/ind-datetime-picker.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-datetime-picker.entry.js","sources":["src/components/atoms/datetime-picker/datetime-picker.css?tag=ind-datetime-picker&encapsulation=shadow","src/components/atoms/datetime-picker/datetime-picker.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  --_h: 26px;\n}\n\n:host([size=\"sm\"]) { --_h: 22px; }\n:host([size=\"lg\"]) { --_h: 32px; }\n\n.wrap {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\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.input {\n  height: var(--_h);\n  padding: 0 var(--ind-spacing-3, 6px);\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-size: var(--ind-font-size-base, 12px);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  color: var(--ind-surface-text-primary, #eef1f5);\n  background: var(--ind-surface-sunken, light-dark(#fff, #000));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-sm, 2px);\n  color-scheme: dark light;\n}\n\n.input:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: 0;\n}\n\n.input:disabled { opacity: 0.5; cursor: not-allowed; }\n\n:host([invalid]) .input {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type DateTimeMode = 'datetime-local' | 'date' | 'time' | 'month' | 'week';\nexport type DateTimeSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-datetime-picker',\n  styleUrl: 'datetime-picker.css',\n  shadow: true,\n})\nexport class IndDateTimePicker {\n  /** Picker mode (maps to the native input type). */\n  @Prop({ reflect: true }) mode: DateTimeMode = 'datetime-local';\n  /** Current ISO value. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Min bound (ISO). */\n  @Prop() min?: string;\n  /** Max bound (ISO). */\n  @Prop() max?: string;\n  /** Step (seconds for time-based modes). */\n  @Prop() step?: number | string;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Invalid state. */\n  @Prop({ reflect: true }) invalid: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: DateTimeSize = 'md';\n  /** Visible label. */\n  @Prop() label?: string;\n  /** Field name (forms). */\n  @Prop() name?: string;\n\n  /** Fires on commit. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private onChange = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.value = v;\n    this.indChange.emit(v);\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <input\n            class=\"input\"\n            part=\"input\"\n            type={this.mode}\n            value={this.value}\n            min={this.min}\n            max={this.max}\n            step={this.step as unknown as string}\n            name={this.name}\n            disabled={this.disabled}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            aria-label={this.label}\n            onChange={this.onChange}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,ynCAAynC,CAAC;;MCU9oC,iBAAiB,GAAA,MAAA;;;;;;IAEH,IAAI,GAAiB,gBAAgB;;IAErC,KAAK,GAAW,EAAE;;AAEnC,IAAA,GAAG;;AAEH,IAAA,GAAG;;AAEH,IAAA,IAAI;;IAEa,QAAQ,GAAY,KAAK;;IAEzB,OAAO,GAAY,KAAK;;IAExB,IAAI,GAAiB,IAAI;;AAE1C,IAAA,KAAK;;AAEL,IAAA,IAAI;;AAGH,IAAA,SAAS;AAEV,IAAA,QAAQ,GAAG,CAAC,CAAQ,KAAI;AAC9B,QAAA,MAAM,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AAC9C,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACxB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5B,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAyB,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,YAAA,EACjC,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACvB,CACI,CACH;;;;;;;"}

package/dist/esm/ind-device-connection-card.entry.js

@@ -0,0 +1,30 @@
+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 deviceConnectionCardCss = () => `:host{min-width:210px}:host([state="error"]){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)}.endpoint{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary);background:var(--ind-surface-sunken);padding:3px 6px;border-radius:var(--ind-radius-sm, 2px);word-break:break-all}`;
+
+const IndDeviceConnectionCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Device / driver name. */
+    name;
+    /** Protocol (e.g. "Modbus TCP", "EtherNet/IP"). */
+    protocol;
+    /** Endpoint (host:port / URL). */
+    endpoint;
+    /** Connection state — drives the indicator and fault chrome. */
+    state = 'disconnected';
+    /** Round-trip latency in ms. */
+    latency;
+    render() {
+        return (h(Host, { key: 'd4650fd63a64a9dd3bc58fae077ea5a6f1cf71fb', role: "group", "aria-label": `${this.name} connection ${this.state}` }, h("div", { key: '0e4f0b7d8beeb28c51449a56a9bebea4ab0580ca', class: "card-head" }, h("span", { key: 'dec224a80ed7880f33e0c1bb6d2c5c28feeb8435', class: "card-title", part: "name" }, this.name), this.protocol && h("span", { key: '3e446e59f250e22556a8c6476363d6ad37395626', class: "card-tag", part: "protocol" }, this.protocol)), h("ind-connection-indicator", { key: '7c41a2d6f998360827fbf299ff40197d98eb02a9', state: this.state, size: "md" }), this.endpoint && h("code", { key: '26982889839026079a9fda011d3276efd99e26cc', class: "endpoint", part: "endpoint" }, this.endpoint), this.latency !== undefined && (h("div", { key: '8eed12b7cee83a545d01efbc6fb98c24e5241b49', class: "card-detail", part: "latency" }, "Latency ", Math.round(this.latency), " ms"))));
+    }
+};
+IndDeviceConnectionCard.style = cardCss() + deviceConnectionCardCss();
+
+export { IndDeviceConnectionCard as ind_device_connection_card };
+//# sourceMappingURL=ind-device-connection-card.entry.js.map
+
+//# sourceMappingURL=ind-device-connection-card.entry.js.map

package/dist/esm/ind-device-connection-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-device-connection-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-device-connection-card&encapsulation=shadow","src/components/molecules/device-connection-card/device-connection-card.css?tag=ind-device-connection-card&encapsulation=shadow","src/components/molecules/device-connection-card/device-connection-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: 210px;\n}\n\n/* The connection card uses its own state vocabulary, so map error→fault chrome. */\n:host([state=\"error\"]) {\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\n.endpoint {\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  background: var(--ind-surface-sunken);\n  padding: 3px 6px;\n  border-radius: var(--ind-radius-sm, 2px);\n  word-break: break-all;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\n\n/**\n * Connection summary for a field device / driver: protocol, endpoint, live\n * connection state and round-trip latency.\n */\n@Component({\n  tag: 'ind-device-connection-card',\n  styleUrls: ['../_shared/card.css', 'device-connection-card.css'],\n  shadow: true,\n})\nexport class IndDeviceConnectionCard {\n  /** Device / driver name. */\n  @Prop() name!: string;\n  /** Protocol (e.g. \"Modbus TCP\", \"EtherNet/IP\"). */\n  @Prop() protocol?: string;\n  /** Endpoint (host:port / URL). */\n  @Prop() endpoint?: string;\n  /** Connection state — drives the indicator and fault chrome. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n  /** Round-trip latency in ms. */\n  @Prop() latency?: number;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={`${this.name} connection ${this.state}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"name\">{this.name}</span>\n          {this.protocol && <span class=\"card-tag\" part=\"protocol\">{this.protocol}</span>}\n        </div>\n        <ind-connection-indicator state={this.state} size=\"md\" />\n        {this.endpoint && <code class=\"endpoint\" part=\"endpoint\">{this.endpoint}</code>}\n        {this.latency !== undefined && (\n          <div class=\"card-detail\" part=\"latency\">Latency {Math.round(this.latency)} ms</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,uBAAuB,GAAG,MAAM,CAAC,8aAA8a,CAAC;;MCYzc,uBAAuB,GAAA,MAAA;;;;;AAE1B,IAAA,IAAI;;AAEJ,IAAA,QAAQ;;AAER,IAAA,QAAQ;;IAES,KAAK,GAAoB,cAAc;;AAExD,IAAA,OAAO;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,YAAA,EAAe,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACpE,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,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EACtD,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CAC3E,EACN,CAAA,CAAA,0BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACxD,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9E,IAAI,CAAC,OAAO,KAAK,SAAS,KACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,cAAU,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAU,CACpF,CACI;;;;;;;"}

package/dist/esm/ind-device-diagnostics-panel.entry.js

@@ -0,0 +1,32 @@
+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 controlPanelCss = () => `.panel-body>ind-motor-card,.panel-body>ind-pump-card,.panel-body>ind-valve-card,.panel-body>ind-start-stop-control,.panel-body>ind-setpoint-control,.panel-body>ind-speed-control,.panel-body>ind-mode-selector,.panel-body>ind-recipe-selector{border:0;padding:0;background:transparent;min-width:0}`;
+
+const deviceDiagnosticsPanelCss = () => `:host{min-width:300px}.panel-body>ind-device-info-card{border:0;padding:0;background:transparent;min-width:0}.metrics{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--ind-spacing-3, 6px)}.metric{display:flex;flex-direction:column;gap:1px;padding:var(--ind-spacing-3, 6px);background:var(--ind-surface-sunken);border-radius:var(--ind-radius-sm, 2px);border-left:2px solid var(--ind-surface-border-strong)}.metric-label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.04em;color:var(--ind-surface-text-muted)}.metric-value{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600)}.metric-ok{border-left-color:var(--ind-state-running-bg, #16a34a)}.metric-warn{border-left-color:var(--ind-state-warning-bg, #f59e0b)}.metric-fault{border-left-color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const IndDeviceDiagnosticsPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    heading = 'Diagnostics';
+    name;
+    vendor;
+    model;
+    firmware;
+    serial;
+    address;
+    state = 'disconnected';
+    /** Diagnostic metrics. */
+    metrics = [];
+    render() {
+        return (h(Host, { key: '87d13057cbdf0ae8cc50951231be0c72a5970236' }, h("div", { key: '399c23ad7dff5cd8bf8430c2dfe3e7b21d13f807', class: "panel-head" }, h("span", { key: '7b05113457a67d943203ea9c4f3a6896d953cfab', class: "panel-title", part: "heading" }, this.heading)), h("div", { key: '5685e0cffe993b39f956d0081fb0c9ff0b7e88f1', class: "panel-body" }, h("ind-device-info-card", { key: 'fdba4747a89414806cee8c781cc90e7e5bebd063', name: this.name, vendor: this.vendor, model: this.model, firmware: this.firmware, serial: this.serial, address: this.address, state: this.state }), this.metrics.length > 0 && (h("div", { key: '16eeeda3f9919ace04e34b118fe31e08ac1e3d94', class: "metrics", part: "metrics" }, this.metrics.map((m, i) => (h("div", { class: `metric metric-${m.status ?? 'ok'}`, part: "metric", key: i }, h("span", { class: "metric-label" }, m.label), h("span", { class: "metric-value" }, m.value, m.unit ? ` ${m.unit}` : '')))))))));
+    }
+};
+IndDeviceDiagnosticsPanel.style = panelCss() + (controlPanelCss() + deviceDiagnosticsPanelCss());
+
+export { IndDeviceDiagnosticsPanel as ind_device_diagnostics_panel };
+//# sourceMappingURL=ind-device-diagnostics-panel.entry.js.map
+
+//# sourceMappingURL=ind-device-diagnostics-panel.entry.js.map

package/dist/esm/ind-device-diagnostics-panel.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-device-diagnostics-panel.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-device-diagnostics-panel&encapsulation=shadow","src/components/organisms/_shared/control-panel.css?tag=ind-device-diagnostics-panel&encapsulation=shadow","src/components/organisms/device-diagnostics-panel/device-diagnostics-panel.css?tag=ind-device-diagnostics-panel&encapsulation=shadow","src/components/organisms/device-diagnostics-panel/device-diagnostics-panel.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","/* Flatten the faceplate / control molecules when embedded in a control panel,\n * so the panel provides the single card chrome. */\n.panel-body > ind-motor-card,\n.panel-body > ind-pump-card,\n.panel-body > ind-valve-card,\n.panel-body > ind-start-stop-control,\n.panel-body > ind-setpoint-control,\n.panel-body > ind-speed-control,\n.panel-body > ind-mode-selector,\n.panel-body > ind-recipe-selector {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n",":host {\n  min-width: 300px;\n}\n\n.panel-body > ind-device-info-card {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n\n.metrics {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.metric {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: var(--ind-spacing-3, 6px);\n  background: var(--ind-surface-sunken);\n  border-radius: var(--ind-radius-sm, 2px);\n  border-left: 2px solid var(--ind-surface-border-strong);\n}\n\n.metric-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-muted);\n}\n\n.metric-value {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.metric-ok { border-left-color: var(--ind-state-running-bg, #16a34a); }\n.metric-warn { border-left-color: var(--ind-state-warning-bg, #f59e0b); }\n.metric-fault { border-left-color: var(--ind-state-fault-bg, #dc2626); }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\n\nexport interface DiagnosticMetric {\n  label: string;\n  value: string | number;\n  unit?: string;\n  status?: 'ok' | 'warn' | 'fault';\n}\n\n/**\n * Device diagnostics panel: nameplate / connection via `<ind-device-info-card>`\n * plus a list of live diagnostic metrics (CPU, memory, temperature, errors).\n */\n@Component({\n  tag: 'ind-device-diagnostics-panel',\n  styleUrls: ['../_shared/panel.css', '../_shared/control-panel.css', 'device-diagnostics-panel.css'],\n  shadow: true,\n})\nexport class IndDeviceDiagnosticsPanel {\n  @Prop() heading: string = 'Diagnostics';\n  @Prop() name!: string;\n  @Prop() vendor?: string;\n  @Prop() model?: string;\n  @Prop() firmware?: string;\n  @Prop() serial?: string;\n  @Prop() address?: string;\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n  /** Diagnostic metrics. */\n  @Prop() metrics: DiagnosticMetric[] = [];\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          <ind-device-info-card\n            name={this.name}\n            vendor={this.vendor}\n            model={this.model}\n            firmware={this.firmware}\n            serial={this.serial}\n            address={this.address}\n            state={this.state}\n          ></ind-device-info-card>\n          {this.metrics.length > 0 && (\n            <div class=\"metrics\" part=\"metrics\">\n              {this.metrics.map((m, i) => (\n                <div class={`metric metric-${m.status ?? 'ok'}`} part=\"metric\" key={i}>\n                  <span class=\"metric-label\">{m.label}</span>\n                  <span class=\"metric-value\">\n                    {m.value}{m.unit ? ` ${m.unit}` : ''}\n                  </span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,eAAe,GAAG,MAAM,CAAC,sSAAsS,CAAC;;ACAtU,MAAM,yBAAyB,GAAG,MAAM,CAAC,24BAA24B,CAAC;;MCmBx6B,yBAAyB,GAAA,MAAA;;;;IAC5B,OAAO,GAAW,aAAa;AAC/B,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,KAAK;AACL,IAAA,QAAQ;AACR,IAAA,MAAM;AACN,IAAA,OAAO;IACU,KAAK,GAAoB,cAAc;;IAExD,OAAO,GAAuB,EAAE;IAExC,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,EACrB,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,CACK,EACvB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACrB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,cAAA,EAAiB,CAAC,CAAC,MAAM,IAAI,IAAI,CAAA,CAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,IAAE,CAAC,CAAC,KAAK,CAAQ,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,EACvB,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,GAAG,CAAA,CAAA,EAAI,CAAC,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE,CAC/B,CACH,CACP,CAAC,CACE,CACP,CACG,CACD;;;;;;;"}

package/dist/esm/ind-device-info-card.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 deviceInfoCardCss = () => `:host{min-width:220px}.card-head{align-items:center}.meta{display:grid;grid-template-columns:auto 1fr;gap:var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);margin:0}.dt{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.dd{margin:0;font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary);text-align:right}`;
+
+const IndDeviceInfoCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Device name (e.g. "Line 2 PLC"). */
+    name;
+    /** Manufacturer. */
+    vendor;
+    /** Model number. */
+    model;
+    /** Firmware / software version. */
+    firmware;
+    /** Serial number. */
+    serial;
+    /** Network address (IP / endpoint). */
+    address;
+    /** Connection state. */
+    state = 'disconnected';
+    rows() {
+        return [
+            { label: 'Vendor', value: this.vendor },
+            { label: 'Model', value: this.model },
+            { label: 'Firmware', value: this.firmware },
+            { label: 'Serial', value: this.serial },
+            { label: 'Address', value: this.address },
+        ].filter((r) => r.value !== undefined && r.value !== '');
+    }
+    render() {
+        return (h(Host, { key: '6096626ff4cca480a4783b9d3cd949775c184887', role: "group", "aria-label": `${this.name} device information` }, h("div", { key: '19399fee7f1391f85a21f737221ef3acfb1ba87e', class: "card-head" }, h("span", { key: '424553a7603eb96e57892b5ac7d80ba000c29f1e', class: "card-title", part: "name" }, this.name), h("ind-connection-indicator", { key: 'ae732aa0de850d5e0b29ffd3c43e7503cc871a1d', state: this.state, size: "sm" })), h("dl", { key: '516b28c08e1cfef117dc5ce314c8372e61b873cd', class: "meta", part: "meta" }, this.rows().map((r) => [
+            h("dt", { class: "dt", part: "dt" }, r.label),
+            h("dd", { class: "dd", part: "dd" }, r.value),
+        ]))));
+    }
+};
+IndDeviceInfoCard.style = cardCss() + deviceInfoCardCss();
+
+export { IndDeviceInfoCard as ind_device_info_card };
+//# sourceMappingURL=ind-device-info-card.entry.js.map
+
+//# sourceMappingURL=ind-device-info-card.entry.js.map

package/dist/esm/ind-device-info-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-device-info-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-device-info-card&encapsulation=shadow","src/components/molecules/device-info-card/device-info-card.css?tag=ind-device-info-card&encapsulation=shadow","src/components/molecules/device-info-card/device-info-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: 220px;\n}\n\n.card-head {\n  align-items: center;\n}\n\n.meta {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);\n  margin: 0;\n}\n\n.dt {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.dd {\n  margin: 0;\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-primary);\n  text-align: right;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\n\n/**\n * Device nameplate card: identity metadata (vendor, model, firmware, serial,\n * address) plus a live connection indicator. For a device detail panel.\n */\n@Component({\n  tag: 'ind-device-info-card',\n  styleUrls: ['../_shared/card.css', 'device-info-card.css'],\n  shadow: true,\n})\nexport class IndDeviceInfoCard {\n  /** Device name (e.g. \"Line 2 PLC\"). */\n  @Prop() name!: string;\n  /** Manufacturer. */\n  @Prop() vendor?: string;\n  /** Model number. */\n  @Prop() model?: string;\n  /** Firmware / software version. */\n  @Prop() firmware?: string;\n  /** Serial number. */\n  @Prop() serial?: string;\n  /** Network address (IP / endpoint). */\n  @Prop() address?: string;\n  /** Connection state. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n  private rows() {\n    return [\n      { label: 'Vendor', value: this.vendor },\n      { label: 'Model', value: this.model },\n      { label: 'Firmware', value: this.firmware },\n      { label: 'Serial', value: this.serial },\n      { label: 'Address', value: this.address },\n    ].filter((r) => r.value !== undefined && r.value !== '');\n  }\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={`${this.name} device information`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"name\">{this.name}</span>\n          <ind-connection-indicator state={this.state} size=\"sm\" />\n        </div>\n        <dl class=\"meta\" part=\"meta\">\n          {this.rows().map((r) => [\n            <dt class=\"dt\" part=\"dt\">{r.label}</dt>,\n            <dd class=\"dd\" part=\"dd\">{r.value}</dd>,\n          ])}\n        </dl>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,iBAAiB,GAAG,MAAM,CAAC,0aAA0a,CAAC;;MCY/b,iBAAiB,GAAA,MAAA;;;;;AAEpB,IAAA,IAAI;;AAEJ,IAAA,MAAM;;AAEN,IAAA,KAAK;;AAEL,IAAA,QAAQ;;AAER,IAAA,MAAM;;AAEN,IAAA,OAAO;;IAEU,KAAK,GAAoB,cAAc;IAExD,IAAI,GAAA;QACV,OAAO;YACL,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;YACvC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YACrC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC3C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;AAC1C,SAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;;IAG1D,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,mBAAA,CAAqB,EAAA,EAC9D,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,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EACvD,CAAA,CAAA,0BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACrD,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EACzB,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;AACtB,YAAA,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAA,EAAE,CAAC,CAAC,KAAK,CAAM;AACvC,YAAA,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAA,EAAE,CAAC,CAAC,KAAK,CAAM;SACxC,CAAC,CACC,CACA;;;;;;;"}

package/dist/esm/ind-dialog.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 dialogCss = () => `:host{display:contents}.dialog{padding:0;border:none;background:transparent;color:inherit;max-width:90vw;max-height:90vh;overflow:visible}.dialog::backdrop{background:rgba(0, 0, 0, 0.55);backdrop-filter:blur(2px)}.content{display:flex;flex-direction:column;background:var(--ind-surface-raised, light-dark(#ffffff, #1a2129));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);max-height:90vh;overflow:hidden}:host([size="sm"]) .content{width:320px}:host([size="md"]) .content{width:480px}:host([size="lg"]) .content{width:720px}.header{display:flex;align-items:center;justify-content:space-between;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px) var(--ind-spacing-6, 16px);border-bottom:1px solid var(--ind-surface-border-subtle)}.heading{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-semibold, 600);margin:0}.close{background:transparent;border:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:var(--ind-radius-sm, 2px)}.close:hover{background:var(--ind-surface-panel)}.close:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:2px}.body{flex:1;overflow:auto;padding:var(--ind-spacing-6, 16px);line-height:var(--ind-font-line-height-normal, 1.4)}.footer{display:flex;justify-content:flex-end;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-6, 16px);border-top:1px solid var(--ind-surface-border-subtle)}.footer.is-empty{display:none}`;
 
@@ -83,7 +83,7 @@ const IndDialog = class {
             this.close();
     };
     render() {
-        return (h(Host, { key: '2fc6c8608a86b696f04a42989f9fa89e90c815ca' }, h("dialog", { key: '2ace88391803eeacc9ab918906db7ff01f96af05', class: "dialog", part: "dialog", "aria-label": this.heading, onClose: this.onNativeClose, onClick: this.onClick }, h("div", { key: '01d6bcd48e243524bf657559407e58ec70995752', class: "content", part: "content" }, this.heading && (h("header", { key: '930017b49c0ea7056eb5ec71efd30090bf5d2ef1', class: "header", part: "header" }, h("h2", { key: 'be329505ab6c8d2ae4b94ea399c1426c9bb2ca23', class: "heading", part: "heading" }, this.heading), h("button", { key: '6943d296514bb4035bc44f292fd9a3be42b96bd7', type: "button", class: "close", part: "close", "aria-label": "Close", onClick: () => this.close() }, "\u00D7"))), h("div", { key: '79277205e3a87957a9f4885a80ff2d88ff250615', class: "body", part: "body" }, h("slot", { key: 'c1bf7607910c5d5dff0bdaa14f9285be09aecbce' })), h("footer", { key: '102f2ea37b063d77f4874c619e134abad87161c9', class: { footer: true, 'is-empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'd6068ca633c113c5a9bf6bd87e793a96928ae95e', name: "footer" }))))));
+        return (h(Host, { key: '87b1b19e34124d336690c96e1eafc5dcdce689aa' }, h("dialog", { key: '98199eb56477658120f7ff9bc421fd388d956207', class: "dialog", part: "dialog", "aria-label": this.heading, onClose: this.onNativeClose, onClick: this.onClick }, h("div", { key: '058705a27904ca8dea5da499afca1ab2d040517a', class: "content", part: "content" }, this.heading && (h("header", { key: '0feedadbfec3051654dd9ce6968917afef5d97fc', class: "header", part: "header" }, h("h2", { key: 'd43f968c6248adafd0383bb2beae39d156c193db', class: "heading", part: "heading" }, this.heading), h("button", { key: '2bbafbf683baeb78cfeeba5f436d3449bc8041c5', type: "button", class: "close", part: "close", "aria-label": "Close", onClick: () => this.close() }, "\u00D7"))), h("div", { key: '71e78c288ebe5a9d5437a8dfb240b08ce4ee7aea', class: "body", part: "body" }, h("slot", { key: '81581e2f10629935fc08c02544144d7c9be00ebd' })), h("footer", { key: '9f3ae5dee0ea4d1c5300a9b0fd35662d1493c159', class: { footer: true, 'is-empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '27c4a6d3e2c914acb40cddf3d57b944643af62a2', name: "footer" }))))));
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/ind-divider.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 dividerCss = () => `:host{display:block;background:var(--ind-surface-border-default, #2a3340);flex-shrink:0}:host([orientation="horizontal"]){width:100%;height:1px}:host([orientation="vertical"]){height:100%;min-height:1em;width:1px}`;
 
@@ -8,7 +8,7 @@ const IndDivider = class {
     }
     orientation = 'horizontal';
     render() {
-        return h(Host, { key: 'eae104b602756afe326c0002f84d926134075e44', role: "separator", "aria-orientation": this.orientation });
+        return h(Host, { key: '177e60e429d2cf5cfd3faa97d34e3c605c1c898e', role: "separator", "aria-orientation": this.orientation });
     }
 };
 IndDivider.style = dividerCss();

package/dist/esm/ind-ds.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-D2yNiL0d.js';
-export { s as setNonce } from './index-D2yNiL0d.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Bls_NlWP.js';
+export { s as setNonce } from './index-Bls_NlWP.js';
 
 /*
  Stencil Client Patch Browser v4.43.5 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ind-app-header",[[769,"ind-app-header",{"brand":[1],"subBrand":[1,"sub-brand"],"machineId":[1,"machine-id"],"mqttState":[1,"mqtt-state"],"mqttLabel":[1,"mqtt-label"],"version":[1],"docsUrl":[1,"docs-url"],"hideChangeMachine":[4,"hide-change-machine"],"hideDisconnect":[4,"hide-disconnect"]}]]],["ind-fill-row",[[769,"ind-fill-row",{"tag":[1],"label":[1],"value":[2],"max":[2],"unit":[1],"variant":[513],"severity":[4]}]]],["ind-health-card",[[513,"ind-health-card",{"heading":[1],"state":[513],"stateLabel":[1,"state-label"],"detail":[1]}]]],["ind-status-bar",[[769,"ind-status-bar",{"state":[513],"message":[1]}]]],["ind-alarm",[[513,"ind-alarm",{"priority":[513],"acknowledged":[516],"label":[1],"timestamp":[1]}]]],["ind-button",[[769,"ind-button",{"variant":[513],"size":[513],"disabled":[516],"label":[1],"holdToConfirmMs":[2,"hold-to-confirm-ms"],"progress":[32]}]]],["ind-checkbox",[[513,"ind-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"size":[513],"label":[1],"name":[1],"value":[1]},null,{"indeterminate":[{"syncIndeterminate":0}]}]]],["ind-dialog",[[769,"ind-dialog",{"open":[1540],"heading":[1],"size":[513],"closeOnBackdrop":[4,"close-on-backdrop"],"hasFooter":[32],"show":[64],"close":[64]},null,{"open":[{"onOpenChange":0}]}]]],["ind-divider",[[513,"ind-divider",{"orientation":[513]}]]],["ind-input",[[769,"ind-input",{"type":[513],"size":[513],"value":[1025],"placeholder":[1],"disabled":[516],"readonly":[516],"invalid":[516],"label":[1],"name":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"autocomplete":[1],"mode":[1,"inputmode"],"hasFocus":[32],"setFocus":[64]}]]],["ind-led",[[513,"ind-led",{"state":[513],"size":[513],"blinking":[516],"label":[1]}]]],["ind-mqtt-monitor",[[513,"ind-mqtt-monitor",{"log":[1],"filterValue":[1025,"filter-value"],"paused":[1028],"rows":[2]},null,{"log":[{"onLogChange":0}]}]]],["ind-nav-item",[[769,"ind-nav-item",{"active":[516],"disabled":[516],"label":[1],"href":[1],"badge":[8]}]]],["ind-scara-canvas",[[513,"ind-scara-canvas",{"joints":[1],"linkLengths":[1,"link-lengths"],"state":[513]}]]],["ind-select",[[513,"ind-select",{"options":[1],"value":[1025],"placeholder":[1],"label":[1],"name":[1],"size":[513],"disabled":[516],"invalid":[516]}]]],["ind-shelf-canvas",[[513,"ind-shelf-canvas",{"slots":[1],"rows":[2],"cols":[2],"heading":[1]}]]],["ind-sidebar-nav",[[257,"ind-sidebar-nav"]]],["ind-textarea",[[513,"ind-textarea",{"value":[1025],"placeholder":[1],"label":[1],"name":[1],"rows":[2],"size":[513],"variant":[513],"disabled":[516],"readonly":[516],"invalid":[516],"autoScroll":[4,"auto-scroll"]},null,{"value":[{"onValueChange":0}]}]]],["ind-toolbar-action",[[769,"ind-toolbar-action",{"counter":[8]}]]],["ind-value",[[513,"ind-value",{"value":[8],"unit":[1],"precision":[2],"alarm":[513],"trend":[513],"size":[513],"label":[1],"tag":[1]}]]],["ind-valve",[[513,"ind-valve",{"state":[513],"orientation":[513],"size":[513],"label":[1],"tag":[1]}]]],["ind-progress",[[513,"ind-progress",{"value":[2],"max":[2],"variant":[513],"size":[513],"label":[1],"showValue":[4,"show-value"],"unit":[1],"indeterminate":[516]}]]],["ind-status-dot",[[513,"ind-status-dot",{"state":[513],"size":[513],"blinking":[516],"label":[1]}]]]], options);
+  return bootstrapLazy(JSON.parse("[[\"ind-motor-control-panel\",[[513,\"ind-motor-control-panel\",{\"heading\":[1],\"tag\":[1],\"state\":[513],\"speed\":[2],\"current\":[2],\"load\":[2],\"speedSetpoint\":[1026,\"speed-setpoint\"],\"mode\":[1]}]]],[\"ind-pump-control-panel\",[[513,\"ind-pump-control-panel\",{\"heading\":[1],\"tag\":[1],\"state\":[513],\"flow\":[2],\"pressure\":[2],\"mode\":[1]}]]],[\"ind-valve-control-panel\",[[513,\"ind-valve-control-panel\",{\"heading\":[1],\"tag\":[1],\"state\":[513],\"position\":[2],\"modulating\":[4],\"positionSetpoint\":[1026,\"position-setpoint\"]}]]],[\"ind-process-control-panel\",[[769,\"ind-process-control-panel\",{\"heading\":[1],\"tag\":[1],\"state\":[513],\"mode\":[1],\"setpoint\":[1026],\"pv\":[2],\"min\":[2],\"max\":[2],\"step\":[2],\"precision\":[2],\"unit\":[1]}]]],[\"ind-batch-control-panel\",[[513,\"ind-batch-control-panel\",{\"heading\":[1],\"batchId\":[1,\"batch-id\"],\"phase\":[1],\"state\":[513],\"progress\":[2],\"parameters\":[16]}]]],[\"ind-recipe-management-panel\",[[513,\"ind-recipe-management-panel\",{\"heading\":[1],\"recipes\":[16],\"value\":[1025],\"parameters\":[16],\"editable\":[4]}]]],[\"ind-firmware-update-panel\",[[513,\"ind-firmware-update-panel\",{\"heading\":[1],\"device\":[1],\"currentVersion\":[1,\"current-version\"],\"targetVersion\":[1,\"target-version\"],\"state\":[513],\"progress\":[2]}]]],[\"ind-tank-level-card\",[[513,\"ind-tank-level-card\",{\"tag\":[1],\"label\":[1],\"state\":[513],\"level\":[2],\"alarm\":[513],\"capacity\":[2],\"unit\":[1]}]]],[\"ind-workstation-monitor\",[[513,\"ind-workstation-monitor\",{\"heading\":[1],\"station\":[1],\"operator\":[1],\"job\":[1],\"state\":[513],\"produced\":[2],\"rejected\":[2],\"target\":[2]}]]],[\"ind-alarm-panel\",[[513,\"ind-alarm-panel\",{\"heading\":[1],\"alarms\":[16],\"hideAcknowledged\":[4,\"hide-acknowledged\"]}]]],[\"ind-asset-overview\",[[513,\"ind-asset-overview\",{\"heading\":[1],\"assets\":[16]}]]],[\"ind-device-diagnostics-panel\",[[513,\"ind-device-diagnostics-panel\",{\"heading\":[1],\"name\":[1],\"vendor\":[1],\"model\":[1],\"firmware\":[1],\"serial\":[1],\"address\":[1],\"state\":[513],\"metrics\":[16]}]]],[\"ind-energy-card\",[[513,\"ind-energy-card\",{\"label\":[1],\"value\":[2],\"unit\":[1],\"precision\":[2],\"points\":[16],\"trend\":[1],\"total\":[2],\"totalUnit\":[1,\"total-unit\"]}]]],[\"ind-event-journal\",[[513,\"ind-event-journal\",{\"heading\":[1],\"events\":[16],\"filter\":[1025]}]]],[\"ind-historian-viewer\",[[513,\"ind-historian-viewer\",{\"heading\":[1],\"tag\":[1],\"unit\":[1],\"precision\":[2],\"samples\":[16]}]]],[\"ind-network-status-card\",[[513,\"ind-network-status-card\",{\"label\":[1],\"level\":[2],\"address\":[1],\"rxKbps\":[2,\"rx-kbps\"],\"txKbps\":[2,\"tx-kbps\"],\"state\":[513]}]]],[\"ind-tag-card\",[[513,\"ind-tag-card\",{\"tag\":[1],\"label\":[1],\"value\":[8],\"unit\":[1],\"precision\":[2],\"alarm\":[513],\"trend\":[1],\"state\":[513]}]]],[\"ind-trend-widget\",[[513,\"ind-trend-widget\",{\"label\":[1],\"tag\":[1],\"value\":[2],\"unit\":[1],\"precision\":[2],\"points\":[16],\"min\":[2],\"max\":[2],\"variant\":[1]}]]],[\"ind-alarm-summary\",[[513,\"ind-alarm-summary\",{\"heading\":[1],\"highHigh\":[2,\"high-high\"],\"high\":[2],\"low\":[2],\"lowLow\":[2,\"low-low\"],\"unacknowledged\":[2]}]]],[\"ind-app-header\",[[769,\"ind-app-header\",{\"brand\":[1],\"subBrand\":[1,\"sub-brand\"],\"machineId\":[1,\"machine-id\"],\"mqttState\":[1,\"mqtt-state\"],\"mqttLabel\":[1,\"mqtt-label\"],\"version\":[1],\"docsUrl\":[1,\"docs-url\"],\"hideChangeMachine\":[4,\"hide-change-machine\"],\"hideDisconnect\":[4,\"hide-disconnect\"]}]]],[\"ind-device-connection-card\",[[513,\"ind-device-connection-card\",{\"name\":[1],\"protocol\":[1],\"endpoint\":[1],\"state\":[513],\"latency\":[2]}]]],[\"ind-equipment-status-card\",[[769,\"ind-equipment-status-card\",{\"heading\":[1],\"tag\":[1],\"state\":[513],\"stateLabel\":[1,\"state-label\"],\"detail\":[1]}]]],[\"ind-fill-row\",[[769,\"ind-fill-row\",{\"tag\":[1],\"label\":[1],\"value\":[2],\"max\":[2],\"unit\":[1],\"variant\":[513],\"severity\":[4]}]]],[\"ind-health-card\",[[513,\"ind-health-card\",{\"heading\":[1],\"state\":[513],\"stateLabel\":[1,\"state-label\"],\"detail\":[1]}]]],[\"ind-machine-overview\",[[769,\"ind-machine-overview\",{\"heading\":[1],\"machineId\":[1,\"machine-id\"],\"state\":[513],\"oee\":[2],\"columns\":[2]}]]],[\"ind-maintenance-dashboard\",[[513,\"ind-maintenance-dashboard\",{\"heading\":[1],\"mtbf\":[2],\"mttr\":[2],\"openWorkOrders\":[2,\"open-work-orders\"],\"overdue\":[2],\"dueItems\":[16]}]]],[\"ind-mqtt-tag-binding\",[[513,\"ind-mqtt-tag-binding\",{\"label\":[1],\"topic\":[1],\"value\":[8],\"unit\":[1],\"qos\":[2],\"retained\":[4],\"state\":[513]}]]],[\"ind-oee-dashboard\",[[513,\"ind-oee-dashboard\",{\"heading\":[1],\"availability\":[2],\"performance\":[2],\"quality\":[2],\"oee\":[2],\"subtitle\":[1]}]]],[\"ind-opcua-tag-binding\",[[513,\"ind-opcua-tag-binding\",{\"label\":[1],\"nodeId\":[1,\"node-id\"],\"value\":[8],\"unit\":[1],\"quality\":[513],\"state\":[513]}]]],[\"ind-production-cell\",[[769,\"ind-production-cell\",{\"heading\":[1],\"cellId\":[1,\"cell-id\"],\"state\":[513],\"columns\":[2]}]]],[\"ind-production-line-overview\",[[513,\"ind-production-line-overview\",{\"heading\":[1],\"stations\":[16]}]]],[\"ind-status-bar\",[[769,\"ind-status-bar\",{\"state\":[513],\"message\":[1]}]]],[\"ind-temperature-control\",[[513,\"ind-temperature-control\",{\"label\":[1],\"tag\":[1],\"value\":[1026],\"pv\":[2],\"min\":[2],\"max\":[2],\"step\":[2],\"precision\":[2],\"unit\":[1],\"disabled\":[4],\"mode\":[513]}]]],[\"ind-trend-viewer\",[[513,\"ind-trend-viewer\",{\"heading\":[1],\"series\":[16]}]]],[\"ind-alarm\",[[513,\"ind-alarm\",{\"priority\":[513],\"acknowledged\":[516],\"label\":[1],\"timestamp\":[1]}]]],[\"ind-alarm-count\",[[513,\"ind-alarm-count\",{\"highHigh\":[2,\"high-high\"],\"high\":[2],\"low\":[2],\"lowLow\":[2,\"low-low\"],\"hideZero\":[516,\"hide-zero\"],\"size\":[513]}]]],[\"ind-audit-row\",[[513,\"ind-audit-row\",{\"time\":[1],\"user\":[1],\"action\":[1],\"detail\":[1]}]]],[\"ind-badge\",[[769,\"ind-badge\",{\"variant\":[513],\"size\":[513],\"outline\":[516]}]]],[\"ind-breadcrumb-item\",[[769,\"ind-breadcrumb-item\",{\"href\":[1],\"current\":[516],\"last\":[516]}]]],[\"ind-canvas-layer\",[[769,\"ind-canvas-layer\",{\"x\":[2],\"y\":[2],\"rotation\":[2],\"scale\":[2],\"z\":[2],\"anchor\":[513]}]]],[\"ind-checkbox\",[[513,\"ind-checkbox\",{\"checked\":[1540],\"indeterminate\":[516],\"disabled\":[516],\"size\":[513],\"label\":[1],\"name\":[1],\"value\":[1]},null,{\"indeterminate\":[{\"syncIndeterminate\":0}]}]]],[\"ind-command-center\",[[769,\"ind-command-center\",{\"heading\":[1],\"columns\":[2]}]]],[\"ind-compressor\",[[513,\"ind-compressor\",{\"state\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-context-toolbar\",[[769,\"ind-context-toolbar\",{\"heading\":[1],\"subtitle\":[1]}]]],[\"ind-conveyor\",[[513,\"ind-conveyor\",{\"state\":[513],\"direction\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-cooler\",[[513,\"ind-cooler\",{\"state\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-counter\",[[513,\"ind-counter\",{\"value\":[2],\"max\":[2],\"variant\":[513],\"size\":[513],\"label\":[1],\"dotWhenZero\":[516,\"dot-when-zero\"]}]]],[\"ind-datetime-picker\",[[513,\"ind-datetime-picker\",{\"mode\":[513],\"value\":[1025],\"min\":[1],\"max\":[1],\"step\":[8],\"disabled\":[516],\"invalid\":[516],\"size\":[513],\"label\":[1],\"name\":[1]}]]],[\"ind-dialog\",[[769,\"ind-dialog\",{\"open\":[1540],\"heading\":[1],\"size\":[513],\"closeOnBackdrop\":[4,\"close-on-backdrop\"],\"hasFooter\":[32],\"show\":[64],\"close\":[64]},null,{\"open\":[{\"onOpenChange\":0}]}]]],[\"ind-divider\",[[513,\"ind-divider\",{\"orientation\":[513]}]]],[\"ind-energy-dashboard\",[[769,\"ind-energy-dashboard\",{\"heading\":[1],\"totalLabel\":[1,\"total-label\"],\"totalValue\":[2,\"total-value\"],\"totalUnit\":[1,\"total-unit\"],\"columns\":[2]}]]],[\"ind-equipment-dashboard\",[[769,\"ind-equipment-dashboard\",{\"heading\":[1],\"columns\":[2]}]]],[\"ind-estop\",[[513,\"ind-estop\",{\"engaged\":[1540],\"disabled\":[516],\"size\":[513],\"label\":[1]}]]],[\"ind-fan\",[[513,\"ind-fan\",{\"state\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-heartbeat\",[[513,\"ind-heartbeat\",{\"alive\":[516],\"interval\":[2],\"size\":[513],\"label\":[1]}]]],[\"ind-heater\",[[513,\"ind-heater\",{\"state\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-icon\",[[769,\"ind-icon\",{\"name\":[513],\"size\":[513],\"label\":[1]}]]],[\"ind-label\",[[769,\"ind-label\",{\"tone\":[513],\"size\":[513],\"uppercase\":[516],\"htmlFor\":[1,\"html-for\"],\"required\":[516]}]]],[\"ind-mqtt-monitor\",[[513,\"ind-mqtt-monitor\",{\"log\":[1],\"filterValue\":[1025,\"filter-value\"],\"paused\":[1028],\"rows\":[2]},null,{\"log\":[{\"onLogChange\":0}]}]]],[\"ind-nav-item\",[[769,\"ind-nav-item\",{\"active\":[516],\"disabled\":[516],\"label\":[1],\"href\":[1],\"badge\":[8]}]]],[\"ind-pipe\",[[513,\"ind-pipe\",{\"orientation\":[513],\"flow\":[513],\"tone\":[513],\"thickness\":[2],\"length\":[2],\"label\":[1]}]]],[\"ind-process-symbol\",[[513,\"ind-process-symbol\",{\"shape\":[513],\"state\":[513],\"tag\":[1],\"label\":[1],\"size\":[513]}]]],[\"ind-production-dashboard\",[[769,\"ind-production-dashboard\",{\"heading\":[1],\"subtitle\":[1],\"columns\":[2]}]]],[\"ind-progress-ring\",[[513,\"ind-progress-ring\",{\"value\":[2],\"max\":[2],\"variant\":[513],\"size\":[513],\"indeterminate\":[516],\"showValue\":[4,\"show-value\"],\"unit\":[1],\"label\":[1]}]]],[\"ind-scara-canvas\",[[513,\"ind-scara-canvas\",{\"joints\":[1],\"linkLengths\":[1,\"link-lengths\"],\"state\":[513]}]]],[\"ind-shelf-canvas\",[[513,\"ind-shelf-canvas\",{\"slots\":[1],\"rows\":[2],\"cols\":[2],\"heading\":[1]}]]],[\"ind-sidebar-group\",[[769,\"ind-sidebar-group\",{\"label\":[1],\"collapsed\":[1540],\"badge\":[8]}]]],[\"ind-sidebar-nav\",[[257,\"ind-sidebar-nav\"]]],[\"ind-silo\",[[513,\"ind-silo\",{\"state\":[513],\"level\":[2],\"alarm\":[513],\"size\":[513],\"tag\":[1],\"label\":[1],\"showValue\":[4,\"show-value\"]}]]],[\"ind-tab\",[[769,\"ind-tab\",{\"selected\":[516],\"disabled\":[516],\"tabId\":[1,\"tab-id\"]}]]],[\"ind-tag-name\",[[769,\"ind-tag-name\",{\"tag\":[1],\"size\":[513],\"boxed\":[516]}]]],[\"ind-textarea\",[[513,\"ind-textarea\",{\"value\":[1025],\"placeholder\":[1],\"label\":[1],\"name\":[1],\"rows\":[2],\"size\":[513],\"variant\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"autoScroll\":[4,\"auto-scroll\"]},null,{\"value\":[{\"onValueChange\":0}]}]]],[\"ind-timestamp\",[[513,\"ind-timestamp\",{\"value\":[8],\"format\":[513],\"locale\":[1],\"seconds\":[4]}]]],[\"ind-toggle\",[[513,\"ind-toggle\",{\"checked\":[1540],\"disabled\":[516],\"size\":[513],\"label\":[1],\"textOn\":[1,\"text-on\"],\"textOff\":[1,\"text-off\"]}]]],[\"ind-toolbar-action\",[[769,\"ind-toolbar-action\",{\"counter\":[8]}]]],[\"ind-tree-node\",[[769,\"ind-tree-node\",{\"level\":[2],\"expanded\":[1540],\"leaf\":[516],\"selected\":[516],\"label\":[1]}]]],[\"ind-unit-label\",[[769,\"ind-unit-label\",{\"unit\":[1],\"size\":[513]}]]],[\"ind-xy-point\",[[513,\"ind-xy-point\",{\"x\":[2],\"y\":[2],\"xMin\":[2,\"x-min\"],\"xMax\":[2,\"x-max\"],\"yMin\":[2,\"y-min\"],\"yMax\":[2,\"y-max\"],\"trail\":[16],\"variant\":[513],\"label\":[1]}]]],[\"ind-motor-card\",[[513,\"ind-motor-card\",{\"tag\":[1],\"label\":[1],\"state\":[513],\"speed\":[2],\"current\":[2],\"load\":[2]}]]],[\"ind-pump-card\",[[513,\"ind-pump-card\",{\"tag\":[1],\"label\":[1],\"state\":[513],\"flow\":[2],\"flowUnit\":[1,\"flow-unit\"],\"pressure\":[2],\"pressureUnit\":[1,\"pressure-unit\"]}]]],[\"ind-recipe-selector\",[[513,\"ind-recipe-selector\",{\"label\":[1],\"options\":[16],\"value\":[1025],\"placeholder\":[1],\"disabled\":[4],\"loadLabel\":[1,\"load-label\"]}]]],[\"ind-valve-card\",[[513,\"ind-valve-card\",{\"tag\":[1],\"label\":[1],\"state\":[513],\"position\":[2]}]]],[\"ind-alarm-row\",[[513,\"ind-alarm-row\",{\"priority\":[513],\"tag\":[1],\"message\":[1],\"time\":[1],\"acknowledged\":[516]}]]],[\"ind-device-info-card\",[[513,\"ind-device-info-card\",{\"name\":[1],\"vendor\":[1],\"model\":[1],\"firmware\":[1],\"serial\":[1],\"address\":[1],\"state\":[513]}]]],[\"ind-event-row\",[[513,\"ind-event-row\",{\"time\":[1],\"severity\":[513],\"source\":[1],\"message\":[1]}]]],[\"ind-setpoint-control\",[[513,\"ind-setpoint-control\",{\"label\":[1],\"tag\":[1],\"value\":[1026],\"pv\":[2],\"min\":[2],\"max\":[2],\"step\":[2],\"precision\":[2],\"unit\":[1],\"disabled\":[4]}]]],[\"ind-alarm-badge-group\",[[513,\"ind-alarm-badge-group\",{\"highHigh\":[2,\"high-high\"],\"high\":[2],\"low\":[2],\"lowLow\":[2,\"low-low\"],\"hideZero\":[4,\"hide-zero\"],\"showTotal\":[4,\"show-total\"]}]]],[\"ind-gauge\",[[513,\"ind-gauge\",{\"value\":[2],\"min\":[2],\"max\":[2],\"zones\":[16],\"unit\":[1],\"label\":[1],\"precision\":[2],\"size\":[513]}]]],[\"ind-historical-value-row\",[[513,\"ind-historical-value-row\",{\"time\":[1],\"value\":[8],\"unit\":[1],\"precision\":[2],\"quality\":[513]}]]],[\"ind-kpi-card\",[[513,\"ind-kpi-card\",{\"label\":[1],\"value\":[8],\"unit\":[1],\"precision\":[2],\"delta\":[1],\"trend\":[1],\"variant\":[513]}]]],[\"ind-signal-quality\",[[513,\"ind-signal-quality\",{\"level\":[2],\"bars\":[2],\"size\":[513],\"label\":[1]}]]],[\"ind-linear-gauge_2\",[[513,\"ind-linear-gauge\",{\"value\":[2],\"min\":[2],\"max\":[2],\"setpoint\":[2],\"zones\":[16],\"orientation\":[513],\"unit\":[1],\"label\":[1],\"precision\":[2],\"size\":[513],\"showValue\":[4,\"show-value\"]}],[513,\"ind-tank\",{\"state\":[513],\"level\":[2],\"alarm\":[513],\"size\":[513],\"tag\":[1],\"label\":[1],\"showValue\":[4,\"show-value\"]}]]],[\"ind-motor\",[[513,\"ind-motor\",{\"state\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-pump\",[[513,\"ind-pump\",{\"state\":[513],\"size\":[513],\"tag\":[1],\"label\":[1]}]]],[\"ind-select\",[[513,\"ind-select\",{\"options\":[1],\"value\":[1025],\"placeholder\":[1],\"label\":[1],\"name\":[1],\"size\":[513],\"disabled\":[516],\"invalid\":[516]}]]],[\"ind-valve\",[[513,\"ind-valve\",{\"state\":[513],\"orientation\":[513],\"size\":[513],\"label\":[1],\"tag\":[1]}]]],[\"ind-command-group\",[[769,\"ind-command-group\",{\"label\":[1],\"orientation\":[513],\"attached\":[516]}]]],[\"ind-setpoint\",[[513,\"ind-setpoint\",{\"value\":[1026],\"pv\":[2],\"min\":[2],\"max\":[2],\"step\":[2],\"precision\":[2],\"unit\":[1],\"label\":[1],\"disabled\":[516],\"size\":[513]}]]],[\"ind-sparkline\",[[513,\"ind-sparkline\",{\"points\":[16],\"min\":[2],\"max\":[2],\"variant\":[513],\"area\":[516],\"marker\":[516],\"label\":[1]}]]],[\"ind-batch-parameter-row_2\",[[513,\"ind-batch-parameter-row\",{\"label\":[1],\"value\":[1032],\"unit\":[1],\"type\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"placeholder\":[1],\"disabled\":[4],\"target\":[1],\"invalid\":[516]}],[769,\"ind-input\",{\"type\":[513],\"size\":[513],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[1],\"name\":[1],\"min\":[8],\"max\":[8],\"step\":[8],\"pattern\":[1],\"autocomplete\":[1],\"mode\":[1,\"inputmode\"],\"hasFocus\":[32],\"setFocus\":[64]}]]],[\"ind-progress\",[[513,\"ind-progress\",{\"value\":[2],\"max\":[2],\"variant\":[513],\"size\":[513],\"label\":[1],\"showValue\":[4,\"show-value\"],\"unit\":[1],\"indeterminate\":[516]}]]],[\"ind-connection-indicator\",[[513,\"ind-connection-indicator\",{\"state\":[513],\"size\":[513],\"label\":[1]}]]],[\"ind-knob_3\",[[513,\"ind-speed-control\",{\"label\":[1],\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"unit\":[1],\"disabled\":[4],\"variant\":[1]}],[513,\"ind-knob\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"disabled\":[516],\"size\":[513],\"label\":[1],\"unit\":[1],\"showValue\":[4,\"show-value\"],\"dragging\":[32]}],[513,\"ind-slider\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"disabled\":[516],\"size\":[513],\"label\":[1],\"unit\":[1],\"showValue\":[4,\"show-value\"]}]]],[\"ind-button\",[[769,\"ind-button\",{\"variant\":[513],\"size\":[513],\"disabled\":[516],\"label\":[1],\"holdToConfirmMs\":[2,\"hold-to-confirm-ms\"],\"progress\":[32]}]]],[\"ind-value\",[[513,\"ind-value\",{\"value\":[8],\"unit\":[1],\"precision\":[2],\"alarm\":[513],\"trend\":[513],\"size\":[513],\"label\":[1],\"tag\":[1]}]]],[\"ind-status-dot\",[[513,\"ind-status-dot\",{\"state\":[513],\"size\":[513],\"blinking\":[516],\"label\":[1]}]]],[\"ind-led_4\",[[513,\"ind-start-stop-control\",{\"label\":[1],\"state\":[513],\"disabled\":[4],\"holdToStartMs\":[2,\"hold-to-start-ms\"],\"startLabel\":[1,\"start-label\"],\"stopLabel\":[1,\"stop-label\"]}],[513,\"ind-mode-selector\",{\"label\":[1],\"positions\":[16],\"value\":[1025],\"disabled\":[4]}],[513,\"ind-led\",{\"state\":[513],\"size\":[513],\"blinking\":[516],\"label\":[1]}],[513,\"ind-selector-switch\",{\"positions\":[16],\"value\":[1537],\"disabled\":[516],\"label\":[1]}]]]]"), options);
 });
 //# sourceMappingURL=ind-ds.js.map
 

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

@@ -0,0 +1,38 @@
+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 energyCardCss = () => `:host{min-width:180px}.arrow.trend-up{color:var(--ind-state-fault-bg, #dc2626)}.arrow.trend-down{color:var(--ind-state-running-bg, #16a34a)}.arrow.trend-flat{color:var(--ind-surface-text-muted)}.spark{width:100%;height:36px}`;
+
+const IndEnergyCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Metric name (e.g. "Active power", "Energy today"). */
+    label;
+    /** Instantaneous value. */
+    value;
+    /** Unit (default kW). */
+    unit = 'kW';
+    /** Decimal places. */
+    precision = 1;
+    /** Recent samples for the sparkline. */
+    points = [];
+    /** Trend arrow. */
+    trend = 'none';
+    /** Cumulative value for the period (e.g. kWh today). */
+    total;
+    /** Cumulative unit (default kWh). */
+    totalUnit = 'kWh';
+    render() {
+        const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';
+        const valueTrend = this.trend === 'flat' ? 'stable' : this.trend === 'none' ? 'none' : this.trend;
+        return (h(Host, { key: '6a1e87d1ba637c85937d672a72e6b04eb2c53bd1', role: "group", "aria-label": `${this.label}: ${this.value.toFixed(this.precision)} ${this.unit}` }, h("div", { key: 'a9b7c35217f479e2fecd7c4b3055bee9c31dc792', class: "card-head" }, h("span", { key: '97d732992573a11bebce1c7eb71637c1c0d4e8ec', class: "card-title", part: "label" }, this.label), arrow && h("span", { key: 'ddfa5633ce99e620fff7f3014c56b854d7609d5e', class: `arrow trend-${this.trend}`, part: "arrow", "aria-hidden": "true" }, arrow)), h("ind-value", { key: 'c9a36ee2223c248354bc03f1ca5713b293906acd', part: "value", value: this.value, unit: this.unit, precision: this.precision, trend: valueTrend, size: "lg" }), this.points.length > 1 && (h("ind-sparkline", { key: 'acb497f4a84df274fc77f07ebd2ae92f511ec41b', class: "spark", part: "spark", points: this.points, variant: "default", area: true })), this.total !== undefined && (h("div", { key: '66afecfb971972446303c9cacb79b5ec7aaa191d', class: "card-detail", part: "total" }, this.total.toLocaleString(), " ", this.totalUnit, " this period"))));
+    }
+};
+IndEnergyCard.style = cardCss() + energyCardCss();
+
+export { IndEnergyCard as ind_energy_card };
+//# sourceMappingURL=ind-energy-card.entry.js.map
+
+//# sourceMappingURL=ind-energy-card.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ind-energy-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-energy-card&encapsulation=shadow","src/components/molecules/energy-card/energy-card.css?tag=ind-energy-card&encapsulation=shadow","src/components/molecules/energy-card/energy-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: 180px;\n}\n\n.arrow.trend-up   { color: var(--ind-state-fault-bg, #dc2626); }\n.arrow.trend-down { color: var(--ind-state-running-bg, #16a34a); }\n.arrow.trend-flat { color: var(--ind-surface-text-muted); }\n\n.spark {\n  width: 100%;\n  height: 36px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EnergyTrend = 'none' | 'up' | 'down' | 'flat';\n\n/**\n * Energy / power KPI card: a headline reading plus an `<ind-sparkline>` for the\n * recent profile and an optional cumulative figure for the period.\n */\n@Component({\n  tag: 'ind-energy-card',\n  styleUrls: ['../_shared/card.css', 'energy-card.css'],\n  shadow: true,\n})\nexport class IndEnergyCard {\n  /** Metric name (e.g. \"Active power\", \"Energy today\"). */\n  @Prop() label!: string;\n  /** Instantaneous value. */\n  @Prop() value!: number;\n  /** Unit (default kW). */\n  @Prop() unit: string = 'kW';\n  /** Decimal places. */\n  @Prop() precision: number = 1;\n  /** Recent samples for the sparkline. */\n  @Prop() points: number[] = [];\n  /** Trend arrow. */\n  @Prop() trend: EnergyTrend = 'none';\n  /** Cumulative value for the period (e.g. kWh today). */\n  @Prop() total?: number;\n  /** Cumulative unit (default kWh). */\n  @Prop() totalUnit: string = 'kWh';\n\n  render() {\n    const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';\n    const valueTrend = this.trend === 'flat' ? 'stable' : this.trend === 'none' ? 'none' : this.trend;\n    return (\n      <Host role=\"group\" aria-label={`${this.label}: ${this.value.toFixed(this.precision)} ${this.unit}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{this.label}</span>\n          {arrow && <span class={`arrow trend-${this.trend}`} part=\"arrow\" aria-hidden=\"true\">{arrow}</span>}\n        </div>\n        <ind-value\n          part=\"value\"\n          value={this.value}\n          unit={this.unit}\n          precision={this.precision}\n          trend={valueTrend as 'none' | 'up' | 'down' | 'stable'}\n          size=\"lg\"\n        />\n        {this.points.length > 1 && (\n          <ind-sparkline class=\"spark\" part=\"spark\" points={this.points} variant=\"default\" area />\n        )}\n        {this.total !== undefined && (\n          <div class=\"card-detail\" part=\"total\">\n            {this.total.toLocaleString()} {this.totalUnit} this period\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,aAAa,GAAG,MAAM,CAAC,gOAAgO,CAAC;;MCajP,aAAa,GAAA,MAAA;;;;;AAEhB,IAAA,KAAK;;AAEL,IAAA,KAAK;;IAEL,IAAI,GAAW,IAAI;;IAEnB,SAAS,GAAW,CAAC;;IAErB,MAAM,GAAa,EAAE;;IAErB,KAAK,GAAgB,MAAM;;AAE3B,IAAA,KAAK;;IAEL,SAAS,GAAW,KAAK;IAEjC,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AACxG,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,KAAK;QACjG,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAA,EAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAChG,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,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,KAAK,CAAA,CAAE,EAAE,IAAI,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAA,EAAE,KAAK,CAAQ,CAC9F,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,UAA+C,EACtD,IAAI,EAAC,IAAI,EAAA,CACT,EACD,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,SAAG,CACzF,EACA,IAAI,CAAC,KAAK,KAAK,SAAS,KACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAA,EAClC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,OAAG,IAAI,CAAC,SAAS,iBACzC,CACP,CACI;;;;;;;"}

package/dist/esm/ind-energy-dashboard.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 energyDashboardCss = () => `:host{min-width:480px}.total{margin-left:auto;display:flex;align-items:baseline;gap:var(--ind-spacing-2, 4px)}.total-label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted);margin-right:var(--ind-spacing-2, 4px)}.total-value{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-xl, 16px);font-weight:var(--ind-font-weight-bold, 700)}.total-unit{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}`;
+
+const IndEnergyDashboard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    heading = 'Energy';
+    /** Headline total label (e.g. "Site total"). */
+    totalLabel;
+    /** Headline total value. */
+    totalValue;
+    /** Headline total unit. */
+    totalUnit = 'kW';
+    /** Number of grid columns. */
+    columns = 3;
+    render() {
+        return (h(Host, { key: 'f12552c4b162b357e4a381a6bdd2cde2e414706f' }, h("div", { key: '361d328f8b2d8bf3e3a0236f29c77b9bceb37885', class: "panel-head" }, h("span", { key: '3310ec4ced60dbde07d62a187ca7676dffa1c478', class: "panel-title", part: "heading" }, this.heading), this.totalValue !== undefined && (h("div", { key: '73df821d7349a80ac2abe9efda65dd823b7d8fc9', class: "total", part: "total" }, this.totalLabel && h("span", { key: '84ee94d7cdf6773e41070b8f949159724837b212', class: "total-label" }, this.totalLabel), h("span", { key: '34fb429b84bde4bbb443f4d54b02db4a67421be1', class: "total-value" }, this.totalValue.toLocaleString()), h("span", { key: '9e473401e54beb65c714bf440b8b6577d650068d', class: "total-unit" }, this.totalUnit)))), h("div", { key: 'e5e5a8d673bdc23d79f59c684d7e08cb00ddb5bb', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, h("slot", { key: '4ad364dceb9c131ed639c833ec0ce7b36c754e3b' }))));
+    }
+};
+IndEnergyDashboard.style = panelCss() + energyDashboardCss();
+
+export { IndEnergyDashboard as ind_energy_dashboard };
+//# sourceMappingURL=ind-energy-dashboard.entry.js.map
+
+//# sourceMappingURL=ind-energy-dashboard.entry.js.map

package/dist/esm/ind-energy-dashboard.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-energy-dashboard.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-energy-dashboard&encapsulation=shadow","src/components/organisms/energy-dashboard/energy-dashboard.css?tag=ind-energy-dashboard&encapsulation=shadow","src/components/organisms/energy-dashboard/energy-dashboard.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: 480px;\n}\n\n.total {\n  margin-left: auto;\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-2, 4px);\n}\n\n.total-label {\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);\n  margin-right: var(--ind-spacing-2, 4px);\n}\n\n.total-value {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-xl, 16px);\n  font-weight: var(--ind-font-weight-bold, 700);\n}\n\n.total-unit {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Energy dashboard. A headline total in the header and a grid of slotted\n * `<ind-energy-card>` / KPI molecules below.\n */\n@Component({\n  tag: 'ind-energy-dashboard',\n  styleUrls: ['../_shared/panel.css', 'energy-dashboard.css'],\n  shadow: true,\n})\nexport class IndEnergyDashboard {\n  @Prop() heading: string = 'Energy';\n  /** Headline total label (e.g. \"Site total\"). */\n  @Prop() totalLabel?: string;\n  /** Headline total value. */\n  @Prop() totalValue?: number;\n  /** Headline total unit. */\n  @Prop() totalUnit: string = 'kW';\n  /** Number of grid columns. */\n  @Prop() columns: number = 3;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n          {this.totalValue !== undefined && (\n            <div class=\"total\" part=\"total\">\n              {this.totalLabel && <span class=\"total-label\">{this.totalLabel}</span>}\n              <span class=\"total-value\">{this.totalValue.toLocaleString()}</span>\n              <span class=\"total-unit\">{this.totalUnit}</span>\n            </div>\n          )}\n        </div>\n        <div\n          class=\"panel-grid\"\n          part=\"grid\"\n          style={{ gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,kBAAkB,GAAG,MAAM,CAAC,mgBAAmgB,CAAC;;MCWzhB,kBAAkB,GAAA,MAAA;;;;IACrB,OAAO,GAAW,QAAQ;;AAE1B,IAAA,UAAU;;AAEV,IAAA,UAAU;;IAEV,SAAS,GAAW,IAAI;;IAExB,OAAO,GAAW,CAAC;IAE3B,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,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,EAC7D,IAAI,CAAC,UAAU,KAAK,SAAS,KAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC5B,IAAI,CAAC,UAAU,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,UAAU,CAAQ,EACtE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAQ,EACnE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,SAAS,CAAQ,CAC5C,CACP,CACG,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,iBAAA,CAAmB,EAAE,EAAA,EAEzE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

package/dist/esm/ind-equipment-dashboard.entry.js

@@ -0,0 +1,23 @@
+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 equipmentDashboardCss = () => `:host{min-width:480px}`;
+
+const IndEquipmentDashboard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    heading = 'Equipment';
+    /** Number of grid columns. */
+    columns = 3;
+    render() {
+        return (h(Host, { key: '1b21d41333ef6d4d58235b334a50e90a8aebb415' }, h("div", { key: '56bc5ea686d16eb409529169e475ae1939d60338', class: "panel-head" }, h("span", { key: '15da308f985628e770bea272c7c7ad96c318c528', class: "panel-title", part: "heading" }, this.heading), h("div", { key: '6c437965be2951afff07b65c45553e1157a9941b', class: "panel-actions" }, h("slot", { key: '91a65bf2ca09d8e05e489c0cb4af658da90b4bdb', name: "actions" }))), h("div", { key: '9d6e55b809e3c68e5ab7097c4264a4ad8febee0b', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, h("slot", { key: 'c9102cb92c046cd4697bfc33b397b78d0db8740f' }))));
+    }
+};
+IndEquipmentDashboard.style = panelCss() + equipmentDashboardCss();
+
+export { IndEquipmentDashboard as ind_equipment_dashboard };
+//# sourceMappingURL=ind-equipment-dashboard.entry.js.map
+
+//# sourceMappingURL=ind-equipment-dashboard.entry.js.map

package/dist/esm/ind-equipment-dashboard.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-equipment-dashboard.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-equipment-dashboard&encapsulation=shadow","src/components/organisms/equipment-dashboard/equipment-dashboard.css?tag=ind-equipment-dashboard&encapsulation=shadow","src/components/organisms/equipment-dashboard/equipment-dashboard.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: 480px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Responsive grid host for equipment faceplate molecules (motor/pump/valve/\n * tank cards). Slot the cards in; the dashboard supplies the heading and the\n * column layout.\n */\n@Component({\n  tag: 'ind-equipment-dashboard',\n  styleUrls: ['../_shared/panel.css', 'equipment-dashboard.css'],\n  shadow: true,\n})\nexport class IndEquipmentDashboard {\n  @Prop() heading: string = 'Equipment';\n  /** Number of grid columns. */\n  @Prop() columns: number = 3;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n          <div class=\"panel-actions\"><slot name=\"actions\" /></div>\n        </div>\n        <div\n          class=\"panel-grid\"\n          part=\"grid\"\n          style={{ gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,qBAAqB,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCY/C,qBAAqB,GAAA,MAAA;;;;IACxB,OAAO,GAAW,WAAW;;IAE7B,OAAO,GAAW,CAAC;IAE3B,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,EAC9D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAAM,CACpD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,iBAAA,CAAmB,EAAE,EAAA,EAEzE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}