@ind-ds/core 0.1.0 → 0.2.0

package/dist/cjs/ind-label.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const labelCss = () => `:host{display:inline;font-family:var(--ind-font-family-sans, system-ui, sans-serif);--_color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));--_size:var(--ind-font-size-base, 12px)}:host([size="sm"]){--_size:var(--ind-font-size-sm, 11px)}:host([size="md"]){--_size:var(--ind-font-size-base, 12px)}:host([size="lg"]){--_size:var(--ind-font-size-lg, 14px)}:host([tone="primary"]){--_color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}:host([tone="secondary"]){--_color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}:host([tone="muted"]){--_color:var(--ind-surface-text-muted, #7a8694)}.text{color:var(--_color);font-size:var(--_size);font-weight:var(--ind-font-weight-medium, 500);line-height:var(--ind-font-line-height-tight, 1.1)}:host([uppercase]) .text{text-transform:uppercase;letter-spacing:0.04em;font-size:calc(var(--_size) - 1px)}.req{color:var(--ind-state-fault-bg, #dc2626);margin-left:2px}`;
+
+const IndLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Text emphasis. */
+    tone = 'secondary';
+    /** Size. */
+    size = 'md';
+    /** Uppercase caption styling (tracking + smaller). */
+    uppercase = false;
+    /** Associates the label with a form control id (rendered as <label for>). */
+    htmlFor;
+    /** Optional required marker. */
+    required = false;
+    render() {
+        const Tag = this.htmlFor ? 'label' : 'span';
+        return (index.h(index.Host, { key: '70c084136afee96fb427e9e55be127686525e242' }, index.h(Tag, { key: '293ad078b031893ffdd8d81d6d2cba85f4846401', class: "text", part: "text", htmlFor: this.htmlFor }, index.h("slot", { key: '028850f15325fae1b01ad25ad1d83dc996b989b1' }), this.required && index.h("span", { key: 'ddff4b37e1175286edb7a76d148712cd0828551a', class: "req", part: "required", "aria-hidden": "true" }, "*"))));
+    }
+};
+IndLabel.style = labelCss();
+
+exports.ind_label = IndLabel;
+//# sourceMappingURL=ind-label.entry.cjs.js.map
+
+//# sourceMappingURL=ind-label.cjs.entry.js.map

package/dist/cjs/ind-label.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-label.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,s7BAAs7B,CAAC;;MCUl8B,QAAQ,GAAA,MAAA;;;;;IAEM,IAAI,GAAc,WAAW;;IAE7B,IAAI,GAAc,IAAI;;IAEtB,SAAS,GAAY,KAAK;;AAE3C,IAAA,OAAO;;IAEU,QAAQ,GAAY,KAAK;IAElD,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAQ,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,MAAM;AAChD,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EACP,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,UAAU,EAAA,aAAA,EAAa,MAAM,QAAS,CAC3E,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/label/label.css?tag=ind-label&encapsulation=shadow","src/components/atoms/label/label.tsx"],"sourcesContent":[":host {\n  display: inline;\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  --_color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  --_size: var(--ind-font-size-base, 12px);\n}\n\n:host([size=\"sm\"]) { --_size: var(--ind-font-size-sm, 11px); }\n:host([size=\"md\"]) { --_size: var(--ind-font-size-base, 12px); }\n:host([size=\"lg\"]) { --_size: var(--ind-font-size-lg, 14px); }\n\n:host([tone=\"primary\"])   { --_color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5)); }\n:host([tone=\"secondary\"]) { --_color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }\n:host([tone=\"muted\"])     { --_color: var(--ind-surface-text-muted, #7a8694); }\n\n.text {\n  color: var(--_color);\n  font-size: var(--_size);\n  font-weight: var(--ind-font-weight-medium, 500);\n  line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n:host([uppercase]) .text {\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  font-size: calc(var(--_size) - 1px);\n}\n\n.req { color: var(--ind-state-fault-bg, #dc2626); margin-left: 2px; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type LabelTone = 'primary' | 'secondary' | 'muted';\nexport type LabelSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-label',\n  styleUrl: 'label.css',\n  shadow: true,\n})\nexport class IndLabel {\n  /** Text emphasis. */\n  @Prop({ reflect: true }) tone: LabelTone = 'secondary';\n  /** Size. */\n  @Prop({ reflect: true }) size: LabelSize = 'md';\n  /** Uppercase caption styling (tracking + smaller). */\n  @Prop({ reflect: true }) uppercase: boolean = false;\n  /** Associates the label with a form control id (rendered as <label for>). */\n  @Prop() htmlFor?: string;\n  /** Optional required marker. */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  render() {\n    const Tag: any = this.htmlFor ? 'label' : 'span';\n    return (\n      <Host>\n        <Tag class=\"text\" part=\"text\" htmlFor={this.htmlFor}>\n          <slot />\n          {this.required && <span class=\"req\" part=\"required\" aria-hidden=\"true\">*</span>}\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-led_4.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const ledCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-base, 12px);font-weight:var(--ind-font-weight-medium, 500);line-height:var(--ind-font-line-height-tight, 1.1);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.led{--_size:var(--ind-led-size, 12px);--_bg:var(--ind-state-stopped-bg, #5a6776);--_border:var(--ind-state-stopped-border, #8390a0);--_glow:var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));display:inline-block;width:var(--_size);height:var(--_size);border-radius:50%;background:radial-gradient(     circle at 30% 30%,     color-mix(in srgb, var(--_bg) 65%, white),     var(--_bg) 70%   );border:1px solid var(--_border);box-shadow:0 0 0 1px color-mix(in srgb, var(--_bg) 25%, transparent),     0 0 8px var(--_glow),     inset 0 1px 2px rgba(0, 0, 0, 0.45);transition:background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([size="sm"]) .led{--_size:8px}:host([size="md"]) .led{--_size:12px}:host([size="lg"]) .led{--_size:18px}:host([state="running"]) .led{--_bg:var(--ind-state-running-bg, #16a34a);--_border:var(--ind-state-running-border, #4ade80);--_glow:var(--ind-state-running-glow, rgba(34, 197, 94, 0.6))}:host([state="stopped"]) .led{--_bg:var(--ind-state-stopped-bg, #5a6776);--_border:var(--ind-state-stopped-border, #8390a0);--_glow:var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35))}:host([state="fault"]) .led{--_bg:var(--ind-state-fault-bg, #dc2626);--_border:var(--ind-state-fault-border, #f87171);--_glow:var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7))}:host([state="warning"]) .led{--_bg:var(--ind-state-warning-bg, #f59e0b);--_border:var(--ind-state-warning-border, #fcd34d);--_glow:var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6))}:host([state="maintenance"]) .led{--_bg:var(--ind-state-maintenance-bg, #2563eb);--_border:var(--ind-state-maintenance-border, #60a5fa);--_glow:var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6))}:host([blinking]) .led{animation:ind-led-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite}:host([blinking][state="fault"]) .led{animation-duration:var(--ind-motion-blink-urgent, 200ms)}@keyframes ind-led-blink{50%{opacity:0.2;box-shadow:none}}@media (prefers-reduced-motion: reduce){:host([blinking]) .led{animation:none;opacity:1;outline:2px solid var(--_border);outline-offset:2px}}`;
+
+const IndLed = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Process state driving the LED color and ARIA live politeness. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion. */
+    blinking = false;
+    /** Optional visible label rendered next to the LED. Always becomes the accessible name. */
+    label;
+    render() {
+        const accessibleName = this.label ?? `${this.state} indicator`;
+        return (index.h(index.Host, { key: 'd843ed36b6c73a35e20903104acdf71540429a7a', role: "status", "aria-label": accessibleName, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, index.h("span", { key: '97548c63e15ca29608b5646f51bbcba147114d0c', class: "led", part: "led", "aria-hidden": "true" }), this.label && index.h("span", { key: '0224cf04e55d1ccb388fc9c4f8796881bc0bf884', class: "label", part: "label" }, this.label)));
+    }
+};
+IndLed.style = ledCss();
+
+const cardCss$1 = () => `: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 modeSelectorCss = () => `:host{min-width:180px;align-items:flex-start}`;
+
+const DEFAULT_POSITIONS = [
+    { value: 'off', label: 'Off' },
+    { value: 'manual', label: 'Manual' },
+    { value: 'auto', label: 'Auto' },
+];
+const IndModeSelector = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    /** Control label. */
+    label = 'Mode';
+    /** Selectable positions. */
+    positions = DEFAULT_POSITIONS;
+    /** Current mode value (two-way). */
+    value;
+    disabled = false;
+    /** Fires with the selected mode value. */
+    indChange;
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    render() {
+        return (index.h(index.Host, { key: '1f4da9abae27080579e40bdb9ab8644ba65aed21' }, index.h("span", { key: 'c367ccb30a97cadd8320a9cb84ad2a739873f89a', class: "card-title", part: "label" }, this.label), index.h("ind-selector-switch", { key: 'baf57e95fad4f6914e60b9d764aa80f373cca201', part: "switch", positions: this.positions, value: this.value, disabled: this.disabled, label: this.label, onIndChange: this.onChange })));
+    }
+};
+IndModeSelector.style = cardCss$1() + modeSelectorCss();
+
+const selectorSwitchCss = () => `:host{display:inline-flex;flex-direction:column;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))}.group-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))}.switch{display:inline-flex;padding:2px;background:var(--ind-surface-sunken, light-dark(#fff, #000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px)}.switch:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:2px}.pos{appearance:none;border:none;background:none;cursor:pointer;padding:var(--ind-spacing-2, 4px) var(--ind-spacing-4, 8px);font-family:inherit;font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:0.03em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));border-radius:var(--ind-radius-sm, 2px);transition:background-color var(--ind-motion-duration-fast, 120ms) ease}.pos:hover:not(:disabled){color:var(--ind-surface-text-primary, #eef1f5)}.pos.is-active{background:var(--ind-state-running-bg, #16a34a);color:var(--ind-state-running-fg, #fff)}:host([disabled]){opacity:0.5}.pos:disabled{cursor:not-allowed}`;
+
+const IndSelectorSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    /** Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property. */
+    positions = [];
+    /** Selected position value. */
+    value;
+    /** Disabled. */
+    disabled = false;
+    /** Group label. */
+    label;
+    /** Fires when a position is selected. */
+    indChange;
+    select(value) {
+        if (this.disabled || value === this.value)
+            return;
+        this.value = value;
+        this.indChange.emit(value);
+    }
+    onKey = (e) => {
+        const pos = this.positions ?? [];
+        if (pos.length === 0)
+            return;
+        const idx = pos.findIndex((p) => p.value === this.value);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.select(pos[Math.min(pos.length - 1, idx + 1)]?.value ?? pos[0].value);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.select(pos[Math.max(0, idx - 1)]?.value ?? pos[0].value);
+        }
+    };
+    render() {
+        const positions = this.positions ?? [];
+        return (index.h(index.Host, { key: '9fdb192691776ef8692939e70840c679b495b002' }, this.label && index.h("span", { key: 'f2f1b7541177cae7565a435e3a3effaf1a96a314', class: "group-label", part: "group-label" }, this.label), index.h("div", { key: 'b197eca164ed807d22aaab23bb3686d59641137e', class: "switch", part: "switch", role: "radiogroup", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? undefined : '0', onKeyDown: this.onKey }, positions.map((p) => (index.h("button", { type: "button", class: { pos: true, 'is-active': p.value === this.value }, part: "position", role: "radio", "aria-checked": p.value === this.value ? 'true' : 'false', disabled: this.disabled, tabindex: "-1", onClick: () => this.select(p.value) }, p.label))))));
+    }
+};
+IndSelectorSwitch.style = selectorSwitchCss();
+
+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 startStopControlCss = () => `:host{min-width:180px;gap:var(--ind-spacing-4, 8px)}.head{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.label{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-medium, 500)}.buttons{display:flex;gap:var(--ind-spacing-4, 8px)}.buttons ind-button{flex:1 1 0}`;
+
+const IndStartStopControl = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indStart = index.createEvent(this, "indStart");
+        this.indStop = index.createEvent(this, "indStop");
+    }
+    /** Equipment label. */
+    label;
+    /** Current run state — drives the LED and disables the redundant button. */
+    state = 'stopped';
+    /** Disable both commands. */
+    disabled = false;
+    /** Require a press-and-hold (ms) on Start to avoid accidental starts. */
+    holdToStartMs;
+    startLabel = 'Start';
+    stopLabel = 'Stop';
+    /** Fires when Start is activated. */
+    indStart;
+    /** Fires when Stop is activated. */
+    indStop;
+    isRunning() {
+        return this.state === 'running' || this.state === 'starting';
+    }
+    render() {
+        const ledState = this.state === 'fault'
+            ? 'fault'
+            : this.state === 'running'
+                ? 'running'
+                : this.state === 'starting' || this.state === 'stopping'
+                    ? 'warning'
+                    : 'stopped';
+        return (index.h(index.Host, { key: 'c548fa2649cbe177d1597c84d157625dadf09a5c', role: "group", "aria-label": this.label ?? 'Start stop control' }, index.h("div", { key: '653531b39e8997e8b353ad87f8f80684ca4d5095', class: "head", part: "head" }, index.h("ind-led", { key: '9c266b4ce3360f84ca14401e37dc2940986cd665', state: ledState, size: "md", blinking: this.state === 'starting' || this.state === 'stopping' }), this.label && index.h("span", { key: 'f9efc9efdc8b1c45c3ab4ae72210a3762d4a7e7b', class: "label", part: "label" }, this.label)), index.h("div", { key: '8aa2c5b3bda5f44d5ffe2b11be7e6bb64717f287', class: "buttons", part: "buttons" }, index.h("ind-button", { key: '21883367d40e0f6eb6d485cdc3adad5d6b17f6b4', variant: "primary", size: "md", label: this.startLabel, disabled: this.disabled || this.isRunning(), holdToConfirmMs: this.holdToStartMs, onIndActivate: () => this.indStart.emit() }), index.h("ind-button", { key: 'b53ddfd89c91d7b7c3e0cc5ae307318f70b2ffef', variant: "danger", size: "md", label: this.stopLabel, disabled: this.disabled || this.state === 'stopped', onIndActivate: () => this.indStop.emit() }))));
+    }
+};
+IndStartStopControl.style = cardCss() + startStopControlCss();
+
+exports.ind_led = IndLed;
+exports.ind_mode_selector = IndModeSelector;
+exports.ind_selector_switch = IndSelectorSwitch;
+exports.ind_start_stop_control = IndStartStopControl;
+//# sourceMappingURL=ind-led.ind-mode-selector.ind-selector-switch.ind-start-stop-control.entry.cjs.js.map
+
+//# sourceMappingURL=ind-led_4.cjs.entry.js.map

package/dist/cjs/ind-led_4.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-led_4.cjs.entry.js","mappings":"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","names":["h","Host","cardCss"],"sources":["src/components/atoms/led/led.css?tag=ind-led&encapsulation=shadow","src/components/atoms/led/led.tsx","src/components/molecules/_shared/card.css?tag=ind-mode-selector&encapsulation=shadow","src/components/molecules/mode-selector/mode-selector.css?tag=ind-mode-selector&encapsulation=shadow","src/components/molecules/mode-selector/mode-selector.tsx","src/components/atoms/selector-switch/selector-switch.css?tag=ind-selector-switch&encapsulation=shadow","src/components/atoms/selector-switch/selector-switch.tsx","src/components/molecules/_shared/card.css?tag=ind-start-stop-control&encapsulation=shadow","src/components/molecules/start-stop-control/start-stop-control.css?tag=ind-start-stop-control&encapsulation=shadow","src/components/molecules/start-stop-control/start-stop-control.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-base, 12px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  line-height: var(--ind-font-line-height-tight, 1.1);\n  /* `light-dark()` makes the label readable even if the LED lands on a surface\n   * whose theme doesn't match the loaded tokens (Storybook autodocs, embedded\n   * widget on a third-party site, etc.). */\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.led {\n  --_size: var(--ind-led-size, 12px);\n  --_bg: var(--ind-state-stopped-bg, #5a6776);\n  --_border: var(--ind-state-stopped-border, #8390a0);\n  --_glow: var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));\n\n  display: inline-block;\n  width: var(--_size);\n  height: var(--_size);\n  border-radius: 50%;\n  background: radial-gradient(\n    circle at 30% 30%,\n    color-mix(in srgb, var(--_bg) 65%, white),\n    var(--_bg) 70%\n  );\n  border: 1px solid var(--_border);\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--_bg) 25%, transparent),\n    0 0 8px var(--_glow),\n    inset 0 1px 2px rgba(0, 0, 0, 0.45);\n  transition: background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n:host([size=\"sm\"]) .led { --_size: 8px; }\n:host([size=\"md\"]) .led { --_size: 12px; }\n:host([size=\"lg\"]) .led { --_size: 18px; }\n\n/* Each state ships hard-coded fallbacks so the component stays visible even\n * if tokens fail to load (build-order glitch, sandbox without CSS imports).\n */\n:host([state=\"running\"]) .led {\n  --_bg: var(--ind-state-running-bg, #16a34a);\n  --_border: var(--ind-state-running-border, #4ade80);\n  --_glow: var(--ind-state-running-glow, rgba(34, 197, 94, 0.6));\n}\n:host([state=\"stopped\"]) .led {\n  --_bg: var(--ind-state-stopped-bg, #5a6776);\n  --_border: var(--ind-state-stopped-border, #8390a0);\n  --_glow: var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));\n}\n:host([state=\"fault\"]) .led {\n  --_bg: var(--ind-state-fault-bg, #dc2626);\n  --_border: var(--ind-state-fault-border, #f87171);\n  --_glow: var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7));\n}\n:host([state=\"warning\"]) .led {\n  --_bg: var(--ind-state-warning-bg, #f59e0b);\n  --_border: var(--ind-state-warning-border, #fcd34d);\n  --_glow: var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6));\n}\n:host([state=\"maintenance\"]) .led {\n  --_bg: var(--ind-state-maintenance-bg, #2563eb);\n  --_border: var(--ind-state-maintenance-border, #60a5fa);\n  --_glow: var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6));\n}\n\n:host([blinking]) .led {\n  animation: ind-led-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite;\n}\n:host([blinking][state=\"fault\"]) .led {\n  animation-duration: var(--ind-motion-blink-urgent, 200ms);\n}\n\n@keyframes ind-led-blink {\n  50% { opacity: 0.2; box-shadow: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([blinking]) .led {\n    animation: none;\n    opacity: 1;\n    /* Substitute: a solid outline ring so the alarm condition is still visible without motion. */\n    outline: 2px solid var(--_border);\n    outline-offset: 2px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type LedState = 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance';\nexport type LedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-led',\n  styleUrl: 'led.css',\n  shadow: true,\n})\nexport class IndLed {\n  /** Process state driving the LED color and ARIA live politeness. */\n  @Prop({ reflect: true }) state: LedState = 'stopped';\n\n  /** Visual size. */\n  @Prop({ reflect: true }) size: LedSize = 'md';\n\n  /** Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion. */\n  @Prop({ reflect: true }) blinking: boolean = false;\n\n  /** Optional visible label rendered next to the LED. Always becomes the accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    const accessibleName = this.label ?? `${this.state} indicator`;\n    return (\n      <Host\n        role=\"status\"\n        aria-label={accessibleName}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <span class=\"led\" part=\"led\" aria-hidden=\"true\" />\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n","/* 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  align-items: flex-start;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { SelectorPosition } from '../../atoms/selector-switch/selector-switch';\n\nconst DEFAULT_POSITIONS: SelectorPosition[] = [\n  { value: 'off', label: 'Off' },\n  { value: 'manual', label: 'Manual' },\n  { value: 'auto', label: 'Auto' },\n];\n\n/**\n * Operating-mode selector (Off / Manual / Auto by default). A labelled wrapper\n * around `<ind-selector-switch>` that re-emits the chosen mode.\n */\n@Component({\n  tag: 'ind-mode-selector',\n  styleUrls: ['../_shared/card.css', 'mode-selector.css'],\n  shadow: true,\n})\nexport class IndModeSelector {\n  /** Control label. */\n  @Prop() label: string = 'Mode';\n  /** Selectable positions. */\n  @Prop() positions: SelectorPosition[] = DEFAULT_POSITIONS;\n  /** Current mode value (two-way). */\n  @Prop({ mutable: true }) value?: string;\n  @Prop() disabled: boolean = false;\n\n  /** Fires with the selected mode value. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private onChange = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indChange.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <span class=\"card-title\" part=\"label\">{this.label}</span>\n        <ind-selector-switch\n          part=\"switch\"\n          positions={this.positions}\n          value={this.value}\n          disabled={this.disabled}\n          label={this.label}\n          onIndChange={this.onChange}\n        />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-flex;\n  flex-direction: column;\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}\n\n.group-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.switch {\n  display: inline-flex;\n  padding: 2px;\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-md, 3px);\n}\n\n.switch:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: 2px;\n}\n\n.pos {\n  appearance: none;\n  border: none;\n  background: none;\n  cursor: pointer;\n  padding: var(--ind-spacing-2, 4px) var(--ind-spacing-4, 8px);\n  font-family: inherit;\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  border-radius: var(--ind-radius-sm, 2px);\n  transition: background-color var(--ind-motion-duration-fast, 120ms) ease;\n}\n\n.pos:hover:not(:disabled) { color: var(--ind-surface-text-primary, #eef1f5); }\n\n.pos.is-active {\n  background: var(--ind-state-running-bg, #16a34a);\n  color: var(--ind-state-running-fg, #fff);\n}\n\n:host([disabled]) { opacity: 0.5; }\n.pos:disabled { cursor: not-allowed; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface SelectorPosition {\n  value: string;\n  label: string;\n}\n\n@Component({\n  tag: 'ind-selector-switch',\n  styleUrl: 'selector-switch.css',\n  shadow: true,\n})\nexport class IndSelectorSwitch {\n  /** Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property. */\n  @Prop() positions: SelectorPosition[] = [];\n  /** Selected position value. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Group label. */\n  @Prop() label?: string;\n\n  /** Fires when a position is selected. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private select(value: string) {\n    if (this.disabled || value === this.value) return;\n    this.value = value;\n    this.indChange.emit(value);\n  }\n\n  private onKey = (e: KeyboardEvent) => {\n    const pos = this.positions ?? [];\n    if (pos.length === 0) return;\n    const idx = pos.findIndex((p) => p.value === this.value);\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.select(pos[Math.min(pos.length - 1, idx + 1)]?.value ?? pos[0].value);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.select(pos[Math.max(0, idx - 1)]?.value ?? pos[0].value);\n    }\n  };\n\n  render() {\n    const positions = this.positions ?? [];\n    return (\n      <Host>\n        {this.label && <span class=\"group-label\" part=\"group-label\">{this.label}</span>}\n        <div\n          class=\"switch\"\n          part=\"switch\"\n          role=\"radiogroup\"\n          aria-label={this.label}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? undefined : '0'}\n          onKeyDown={this.onKey}\n        >\n          {positions.map((p) => (\n            <button\n              type=\"button\"\n              class={{ pos: true, 'is-active': p.value === this.value }}\n              part=\"position\"\n              role=\"radio\"\n              aria-checked={p.value === this.value ? 'true' : 'false'}\n              disabled={this.disabled}\n              tabindex=\"-1\"\n              onClick={() => this.select(p.value)}\n            >\n              {p.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","/* 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  gap: var(--ind-spacing-4, 8px);\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.label {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-medium, 500);\n}\n\n.buttons {\n  display: flex;\n  gap: var(--ind-spacing-4, 8px);\n}\n\n.buttons ind-button {\n  flex: 1 1 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type RunState = 'running' | 'stopped' | 'fault' | 'starting' | 'stopping';\n\n/**\n * Start / stop command pair with a running LED. Emits discrete `indStart` /\n * `indStop` events; the parent owns the command logic and reflects state back.\n */\n@Component({\n  tag: 'ind-start-stop-control',\n  styleUrls: ['../_shared/card.css', 'start-stop-control.css'],\n  shadow: true,\n})\nexport class IndStartStopControl {\n  /** Equipment label. */\n  @Prop() label?: string;\n  /** Current run state — drives the LED and disables the redundant button. */\n  @Prop({ reflect: true }) state: RunState = 'stopped';\n  /** Disable both commands. */\n  @Prop() disabled: boolean = false;\n  /** Require a press-and-hold (ms) on Start to avoid accidental starts. */\n  @Prop() holdToStartMs?: number;\n  @Prop() startLabel: string = 'Start';\n  @Prop() stopLabel: string = 'Stop';\n\n  /** Fires when Start is activated. */\n  @Event() indStart!: EventEmitter<void>;\n  /** Fires when Stop is activated. */\n  @Event() indStop!: EventEmitter<void>;\n\n  private isRunning() {\n    return this.state === 'running' || this.state === 'starting';\n  }\n\n  render() {\n    const ledState =\n      this.state === 'fault'\n        ? 'fault'\n        : this.state === 'running'\n          ? 'running'\n          : this.state === 'starting' || this.state === 'stopping'\n            ? 'warning'\n            : 'stopped';\n    return (\n      <Host role=\"group\" aria-label={this.label ?? 'Start stop control'}>\n        <div class=\"head\" part=\"head\">\n          <ind-led state={ledState} size=\"md\" blinking={this.state === 'starting' || this.state === 'stopping'} />\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n        </div>\n        <div class=\"buttons\" part=\"buttons\">\n          <ind-button\n            variant=\"primary\"\n            size=\"md\"\n            label={this.startLabel}\n            disabled={this.disabled || this.isRunning()}\n            holdToConfirmMs={this.holdToStartMs}\n            onIndActivate={() => this.indStart.emit()}\n          />\n          <ind-button\n            variant=\"danger\"\n            size=\"md\"\n            label={this.stopLabel}\n            disabled={this.disabled || this.state === 'stopped'}\n            onIndActivate={() => this.indStop.emit()}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-linear-gauge_2.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const linearGaugeCss = () => `: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));--_thick:10px;--_len:160px}:host([size="sm"]){--_thick:6px}:host([size="lg"]){--_thick:14px}.header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ind-spacing-3, 6px);margin-bottom:var(--ind-spacing-2, 4px);font-size:var(--ind-font-size-base, 12px)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.value{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.track{position:relative;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);overflow:hidden}:host([orientation="horizontal"]) .track{width:var(--_len);height:var(--_thick)}:host([orientation="vertical"]) .track{width:var(--_thick);height:var(--_len)}.zone{position:absolute;opacity:0.4}:host([orientation="horizontal"]) .zone{top:0;bottom:0}:host([orientation="vertical"]) .zone{left:0;right:0}.fill{position:absolute;background:var(--ind-button-primary-bg, #2563eb);transition:width var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),               height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([orientation="horizontal"]) .fill{left:0;top:0;bottom:0}:host([orientation="vertical"]) .fill{bottom:0;left:0;right:0}.setpoint{position:absolute;background:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}:host([orientation="horizontal"]) .setpoint{top:-2px;bottom:-2px;width:2px;transform:translateX(-1px)}:host([orientation="vertical"]) .setpoint{left:-2px;right:-2px;height:2px;transform:translateY(1px)}@media (prefers-reduced-motion: reduce){.fill{transition:none}}`;
+
+const IndLinearGauge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Current value. */
+    value = 0;
+    /** Scale minimum. */
+    min = 0;
+    /** Scale maximum. */
+    max = 100;
+    /** Optional setpoint marker. */
+    setpoint;
+    /** Colored zones along the scale. Pass as a property. */
+    zones = [];
+    /** Orientation. */
+    orientation = 'horizontal';
+    /** Engineering unit. */
+    unit;
+    /** Label. */
+    label;
+    /** Decimal places. */
+    precision;
+    /** Size. */
+    size = 'md';
+    /** Show the numeric value. */
+    showValue = true;
+    pct(v) {
+        const span = this.max - this.min || 1;
+        return Math.min(100, Math.max(0, ((v - this.min) / span) * 100));
+    }
+    formatted() {
+        if (!Number.isFinite(this.value))
+            return '--';
+        return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);
+    }
+    render() {
+        const fill = this.pct(this.value);
+        const sp = this.setpoint !== undefined ? this.pct(this.setpoint) : undefined;
+        const name = this.label ?? 'gauge';
+        return (index.h(index.Host, { key: '770d04a3b389c71fb4e926d4d93ca10db49655ea', role: "meter", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": `${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}` }, (this.label || this.showValue) && (index.h("div", { key: '335a862a12e339cf53aa72640539412d062eaded', class: "header", part: "header" }, this.label && index.h("span", { key: '5c832f92f30c3cee5ee33e9299f439a150f754e0', class: "label", part: "label" }, this.label), this.showValue && (index.h("span", { key: '70d5ff9bb45a360cb712f1338832e1f18dd58a50', class: "value", part: "value" }, this.formatted(), this.unit ? ` ${this.unit}` : '')))), index.h("div", { key: '7bedcf13339fca602e924d8b43a19a90a718569e', class: "track", part: "track" }, (this.zones ?? []).map((z) => {
+            const a = this.pct(z.from);
+            const b = this.pct(z.to);
+            return (index.h("span", { class: "zone", style: {
+                    background: z.color,
+                    insetInlineStart: this.orientation === 'horizontal' ? `${a}%` : undefined,
+                    inlineSize: this.orientation === 'horizontal' ? `${b - a}%` : undefined,
+                    insetBlockEnd: this.orientation === 'vertical' ? `${a}%` : undefined,
+                    blockSize: this.orientation === 'vertical' ? `${b - a}%` : undefined,
+                } }));
+        }), index.h("span", { key: '4adaf09d9eb92fd74cda1ae8c965f4c7810d3424', class: "fill", part: "fill", style: this.orientation === 'horizontal' ? { width: `${fill}%` } : { height: `${fill}%` } }), sp !== undefined && (index.h("span", { key: '0b1aa729c5fef352902d6843f8103c0ae3689ac7', class: "setpoint", part: "setpoint", style: this.orientation === 'horizontal' ? { left: `${sp}%` } : { bottom: `${sp}%` } })))));
+    }
+};
+IndLinearGauge.style = linearGaugeCss();
+
+const equipmentCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:48px;--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="md"]){--_w:48px}:host([size="lg"]){--_w:72px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80);--_fill:var(--ind-state-running-bg, #16a34a);--_accent:var(--ind-state-running-bg, #16a34a)}:host([state="stopped"]){--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171);--_fill:var(--ind-state-fault-bg, #dc2626);--_accent:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-warning-bg, #f59e0b);--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa);--_fill:var(--ind-state-maintenance-bg, #2563eb);--_accent:var(--ind-state-maintenance-bg, #2563eb)}.symbol{display:block;width:var(--_w);height:auto;overflow:visible}.body{fill:color-mix(in srgb, var(--_fill) 22%, transparent);stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.accent{fill:var(--_accent);stroke:none}.stroke{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.tag{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px)}@media (prefers-reduced-motion: reduce){.spin,.pulse{animation:none !important}}`;
+
+const tankCss = () => `.liquid{fill:var(--ind-state-maintenance-bg, #2563eb);transition:y var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),               height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([alarm="high"]) .liquid{fill:var(--ind-state-fault-bg, #dc2626)}:host([alarm="low"]) .liquid{fill:var(--ind-state-warning-bg, #f59e0b)}.body{fill:none}`;
+
+const IndTank = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Process state (drives outline color). */
+    state = 'stopped';
+    /** Fill level, 0–100 %. */
+    level = 0;
+    /** Alarm tint of the liquid (overrides state-derived fill color). */
+    alarm = 'none';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "T-204"). */
+    tag;
+    /** Human label. */
+    label;
+    /** Show the numeric level under the symbol. */
+    showValue = false;
+    render() {
+        const pct = Math.min(100, Math.max(0, this.level));
+        // Body spans y 4..56 (height 52); liquid fills from the bottom up.
+        const top = 4;
+        const height = 52;
+        const fillH = (pct / 100) * height;
+        const fillY = top + height - fillH;
+        const name = this.label ?? this.tag ?? 'tank';
+        return (index.h(index.Host, { key: '5b40e01733c5399fffc64c2f49e7b82b42978de8', role: "meter", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${name} level ${Math.round(pct)}%` }, index.h("svg", { key: '76267a5138aa5c3a2e50aec8c8ef104b3fdd1d0e', class: "symbol", viewBox: "0 0 40 60", "aria-hidden": "true" }, index.h("defs", { key: '59c6bc39e401646fffad6506fc3d39ac34049d0c' }, index.h("clipPath", { key: 'e85ac49916606e0ba28886d505584f8f582c30ec', id: "tank-clip" }, index.h("rect", { key: '5f87fb031b4a61dd60827b411341f7095d4f920e', x: "4", y: top, width: "32", height: height, rx: "4" }))), index.h("rect", { key: '5ad22cabef8a273479a53b3511d7eccf3a20eff0', class: "liquid", x: "4", y: fillY, width: "32", height: fillH, "clip-path": "url(#tank-clip)" }), index.h("rect", { key: 'c6a32088394a44bef58c5d26d095fe3b710d7f89', class: "body", x: "4", y: top, width: "32", height: height, rx: "4" })), (this.tag || this.label || this.showValue) && (index.h("div", { key: 'd224c2acf97978df2b506f3242c6f6fa99066d23', class: "caption" }, this.tag && index.h("span", { key: '43d91f74f836e3870cbbed0f33e05e1225560562', class: "tag" }, this.tag), this.showValue && index.h("span", { key: 'b0784785618302059f3e54399124e542ad14ffa5', class: "tag" }, Math.round(pct), "%"), this.label && index.h("span", { key: '84523ec9d4ce39b5ddd0c8cf262092549d51a428', class: "label" }, this.label)))));
+    }
+};
+IndTank.style = equipmentCss() + tankCss();
+
+exports.ind_linear_gauge = IndLinearGauge;
+exports.ind_tank = IndTank;
+//# sourceMappingURL=ind-linear-gauge.ind-tank.entry.cjs.js.map
+
+//# sourceMappingURL=ind-linear-gauge_2.cjs.entry.js.map

package/dist/cjs/ind-linear-gauge_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-linear-gauge_2.cjs.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,w6DAAw6D,CAAC;;MCgB17D,cAAc,GAAA,MAAA;;;;;IAEjB,KAAK,GAAW,CAAC;;IAEjB,GAAG,GAAW,CAAC;;IAEf,GAAG,GAAW,GAAG;;AAEjB,IAAA,QAAQ;;IAER,KAAK,GAAsB,EAAE;;IAEZ,WAAW,GAA2B,YAAY;;AAEnE,IAAA,IAAI;;AAEJ,IAAA,KAAK;;AAEL,IAAA,SAAS;;IAEQ,IAAI,GAAoB,IAAI;;IAE7C,SAAS,GAAY,IAAI;AAEzB,IAAA,GAAG,CAAC,CAAS,EAAA;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;QACrC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC;;IAG1D,SAAS,GAAA;QACf,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;QAC7C,OAAO,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG/F,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QACjC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,SAAS;AAC5E,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO;QAClC,QACEA,OAAA,CAACC,UAAI,qDACH,IAAI,EAAC,OAAO,EAAA,eAAA,EACG,IAAI,CAAC,KAAK,EAAA,eAAA,EACV,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,EAAA,YAAA,EACX,GAAG,IAAI,CAAA,EAAA,EAAK,IAAI,CAAC,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA,CAAE,EAAA,EAE5E,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,MAC5BD,kEAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9B,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EAClE,IAAI,CAAC,SAAS,KACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE,CAAQ,CAC7F,CACG,CACP,EACDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC5B,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,KAAI;YAC5B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACxB,QACEA,OAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE;oBACL,UAAU,EAAE,CAAC,CAAC,KAAK;AACnB,oBAAA,gBAAgB,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,GAAG,CAAC,CAAA,CAAA,CAAG,GAAG,SAAS;AACzE,oBAAA,UAAU,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,CAAA,EAAG,CAAC,GAAG,CAAC,GAAG,GAAG,SAAS;AACvE,oBAAA,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,GAAG,CAAC,CAAA,CAAA,CAAG,GAAG,SAAS;AACpE,oBAAA,SAAS,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,CAAA,EAAG,CAAC,GAAG,CAAC,GAAG,GAAG,SAAS;iBACrE,EAAA,CACD;SAEL,CAAC,EACFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,EAAE,EAAA,CAAI,EAC3H,EAAE,KAAK,SAAS,KACfA,mEACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,EAAE,CAAA,EAAG,EAAE,CAAA,CAAA,CAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA,EAAG,EAAE,CAAA,CAAA,CAAG,EAAE,GACpF,CACH,CACG,CACD;;;;;AChGb,MAAM,YAAY,GAAG,MAAM,CAAC,ypEAAypE,CAAC;;ACAtrE,MAAM,OAAO,GAAG,MAAM,CAAC,oZAAoZ,CAAC;;MCQ/Z,OAAO,GAAA,MAAA;;;;;IAEO,KAAK,GAAmB,SAAS;;IAElD,KAAK,GAAW,CAAC;;IAEA,KAAK,GAA4B,MAAM;;IAEvC,IAAI,GAAkB,IAAI;;AAE3C,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEL,SAAS,GAAY,KAAK;IAElC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;QAElD,MAAM,GAAG,GAAG,CAAC;QACb,MAAM,MAAM,GAAG,EAAE;QACjB,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,MAAM;AAClC,QAAA,MAAM,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM;AAC7C,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,eAAA,EACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,eAAA,EACf,CAAC,EAAA,eAAA,EACD,GAAG,EAAA,YAAA,EACN,GAAG,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAA,EAE/CD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,EAAE,EAAC,WAAW,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAC,GAAG,EAAA,CAAG,CAC/C,CACN,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,KAAK,EAAA,WAAA,EAAY,iBAAiB,EAAA,CAAG,EAC7FA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAC,GAAG,EAAA,CAAG,CACjE,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,MACxCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC/C,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAS,GAAA,CAAA,EAC7D,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/linear-gauge/linear-gauge.css?tag=ind-linear-gauge&encapsulation=shadow","src/components/atoms/linear-gauge/linear-gauge.tsx","src/components/atoms/_equipment/equipment.css?tag=ind-tank&encapsulation=shadow","src/components/atoms/tank/tank.css?tag=ind-tank&encapsulation=shadow","src/components/atoms/tank/tank.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  --_thick: 10px;\n  --_len: 160px;\n}\n\n:host([size=\"sm\"]) { --_thick: 6px; }\n:host([size=\"lg\"]) { --_thick: 14px; }\n\n.header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: var(--ind-spacing-3, 6px);\n  margin-bottom: var(--ind-spacing-2, 4px);\n  font-size: var(--ind-font-size-base, 12px);\n}\n\n.label { color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }\n\n.value {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.track {\n  position: relative;\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  overflow: hidden;\n}\n\n:host([orientation=\"horizontal\"]) .track { width: var(--_len); height: var(--_thick); }\n:host([orientation=\"vertical\"]) .track { width: var(--_thick); height: var(--_len); }\n\n.zone {\n  position: absolute;\n  opacity: 0.4;\n}\n:host([orientation=\"horizontal\"]) .zone { top: 0; bottom: 0; }\n:host([orientation=\"vertical\"]) .zone { left: 0; right: 0; }\n\n.fill {\n  position: absolute;\n  background: var(--ind-button-primary-bg, #2563eb);\n  transition: width var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),\n              height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n:host([orientation=\"horizontal\"]) .fill { left: 0; top: 0; bottom: 0; }\n:host([orientation=\"vertical\"]) .fill { bottom: 0; left: 0; right: 0; }\n\n.setpoint {\n  position: absolute;\n  background: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n}\n:host([orientation=\"horizontal\"]) .setpoint { top: -2px; bottom: -2px; width: 2px; transform: translateX(-1px); }\n:host([orientation=\"vertical\"]) .setpoint { left: -2px; right: -2px; height: 2px; transform: translateY(1px); }\n\n@media (prefers-reduced-motion: reduce) {\n  .fill { transition: none; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface LinearGaugeZone {\n  from: number;\n  to: number;\n  color: string;\n}\n\nexport type LinearGaugeOrientation = 'horizontal' | 'vertical';\nexport type LinearGaugeSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-linear-gauge',\n  styleUrl: 'linear-gauge.css',\n  shadow: true,\n})\nexport class IndLinearGauge {\n  /** Current value. */\n  @Prop() value: number = 0;\n  /** Scale minimum. */\n  @Prop() min: number = 0;\n  /** Scale maximum. */\n  @Prop() max: number = 100;\n  /** Optional setpoint marker. */\n  @Prop() setpoint?: number;\n  /** Colored zones along the scale. Pass as a property. */\n  @Prop() zones: LinearGaugeZone[] = [];\n  /** Orientation. */\n  @Prop({ reflect: true }) orientation: LinearGaugeOrientation = 'horizontal';\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Label. */\n  @Prop() label?: string;\n  /** Decimal places. */\n  @Prop() precision?: number;\n  /** Size. */\n  @Prop({ reflect: true }) size: LinearGaugeSize = 'md';\n  /** Show the numeric value. */\n  @Prop() showValue: boolean = true;\n\n  private pct(v: number): number {\n    const span = this.max - this.min || 1;\n    return Math.min(100, Math.max(0, ((v - this.min) / span) * 100));\n  }\n\n  private formatted(): string {\n    if (!Number.isFinite(this.value)) return '--';\n    return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);\n  }\n\n  render() {\n    const fill = this.pct(this.value);\n    const sp = this.setpoint !== undefined ? this.pct(this.setpoint) : undefined;\n    const name = this.label ?? 'gauge';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={this.value}\n        aria-valuemin={this.min}\n        aria-valuemax={this.max}\n        aria-label={`${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}`}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"header\" part=\"header\">\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n            {this.showValue && (\n              <span class=\"value\" part=\"value\">{this.formatted()}{this.unit ? ` ${this.unit}` : ''}</span>\n            )}\n          </div>\n        )}\n        <div class=\"track\" part=\"track\">\n          {(this.zones ?? []).map((z) => {\n            const a = this.pct(z.from);\n            const b = this.pct(z.to);\n            return (\n              <span\n                class=\"zone\"\n                style={{\n                  background: z.color,\n                  insetInlineStart: this.orientation === 'horizontal' ? `${a}%` : undefined,\n                  inlineSize: this.orientation === 'horizontal' ? `${b - a}%` : undefined,\n                  insetBlockEnd: this.orientation === 'vertical' ? `${a}%` : undefined,\n                  blockSize: this.orientation === 'vertical' ? `${b - a}%` : undefined,\n                }}\n              />\n            );\n          })}\n          <span class=\"fill\" part=\"fill\" style={this.orientation === 'horizontal' ? { width: `${fill}%` } : { height: `${fill}%` }} />\n          {sp !== undefined && (\n            <span\n              class=\"setpoint\"\n              part=\"setpoint\"\n              style={this.orientation === 'horizontal' ? { left: `${sp}%` } : { bottom: `${sp}%` }}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","/* Shared base styles for ind-ds process-equipment symbols.\n * Referenced via styleUrls alongside each component's own CSS. */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_w: 48px;\n  --_stroke: var(--ind-state-stopped-border, #8390a0);\n  --_fill: var(--ind-state-stopped-bg, #5a6776);\n  --_accent: var(--ind-state-stopped-bg, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"md\"]) { --_w: 48px; }\n:host([size=\"lg\"]) { --_w: 72px; }\n\n:host([state=\"running\"])     { --_stroke: var(--ind-state-running-border, #4ade80); --_fill: var(--ind-state-running-bg, #16a34a); --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"stopped\"])     { --_stroke: var(--ind-state-stopped-border, #8390a0); --_fill: var(--ind-state-stopped-bg, #5a6776); --_accent: var(--ind-state-stopped-bg, #5a6776); }\n:host([state=\"fault\"])       { --_stroke: var(--ind-state-fault-border, #f87171); --_fill: var(--ind-state-fault-bg, #dc2626); --_accent: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"])     { --_stroke: var(--ind-state-warning-border, #fcd34d); --_fill: var(--ind-state-warning-bg, #f59e0b); --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); --_fill: var(--ind-state-maintenance-bg, #2563eb); --_accent: var(--ind-state-maintenance-bg, #2563eb); }\n\n.symbol {\n  display: block;\n  width: var(--_w);\n  height: auto;\n  overflow: visible;\n}\n\n.body {\n  fill: color-mix(in srgb, var(--_fill) 22%, transparent);\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  vector-effect: non-scaling-stroke;\n}\n\n.accent {\n  fill: var(--_accent);\n  stroke: none;\n}\n\n.stroke {\n  fill: none;\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  vector-effect: non-scaling-stroke;\n}\n\n.caption {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  font-size: var(--ind-font-size-xs, 10px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .spin, .pulse { animation: none !important; }\n}\n",".liquid {\n  fill: var(--ind-state-maintenance-bg, #2563eb);\n  transition: y var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease),\n              height var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n:host([alarm=\"high\"]) .liquid { fill: var(--ind-state-fault-bg, #dc2626); }\n:host([alarm=\"low\"]) .liquid  { fill: var(--ind-state-warning-bg, #f59e0b); }\n\n.body {\n  fill: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-tank',\n  styleUrls: ['../_equipment/equipment.css', 'tank.css'],\n  shadow: true,\n})\nexport class IndTank {\n  /** Process state (drives outline color). */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Fill level, 0–100 %. */\n  @Prop() level: number = 0;\n  /** Alarm tint of the liquid (overrides state-derived fill color). */\n  @Prop({ reflect: true }) alarm: 'none' | 'low' | 'high' = 'none';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"T-204\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n  /** Show the numeric level under the symbol. */\n  @Prop() showValue: boolean = false;\n\n  render() {\n    const pct = Math.min(100, Math.max(0, this.level));\n    // Body spans y 4..56 (height 52); liquid fills from the bottom up.\n    const top = 4;\n    const height = 52;\n    const fillH = (pct / 100) * height;\n    const fillY = top + height - fillH;\n    const name = this.label ?? this.tag ?? 'tank';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={Math.round(pct)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={`${name} level ${Math.round(pct)}%`}\n      >\n        <svg class=\"symbol\" viewBox=\"0 0 40 60\" aria-hidden=\"true\">\n          <defs>\n            <clipPath id=\"tank-clip\">\n              <rect x=\"4\" y={top} width=\"32\" height={height} rx=\"4\" />\n            </clipPath>\n          </defs>\n          <rect class=\"liquid\" x=\"4\" y={fillY} width=\"32\" height={fillH} clip-path=\"url(#tank-clip)\" />\n          <rect class=\"body\" x=\"4\" y={top} width=\"32\" height={height} rx=\"4\" />\n        </svg>\n        {(this.tag || this.label || this.showValue) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.showValue && <span class=\"tag\">{Math.round(pct)}%</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-machine-overview.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.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 machineOverviewCss = () => `:host{min-width:480px}.oee{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary);margin-right:var(--ind-spacing-3, 6px)}.state{font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-semibold, 600)}.state-running{color:var(--ind-state-running-bg, #16a34a)}.state-fault{color:var(--ind-state-fault-bg, #dc2626)}.state-warning{color:var(--ind-state-warning-bg, #f59e0b)}.state-maintenance{color:var(--ind-state-maintenance-bg, #2563eb)}.state-stopped{color:var(--ind-surface-text-secondary)}.state-unknown{color:var(--ind-surface-text-muted)}`;
+
+const STATE_LABEL = {
+    running: 'Running',
+    stopped: 'Stopped',
+    fault: 'Fault',
+    warning: 'Warning',
+    maintenance: 'Maintenance',
+    unknown: '—',
+};
+const IndMachineOverview = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading;
+    /** Machine identifier. */
+    machineId;
+    state = 'unknown';
+    /** OEE headline percentage. */
+    oee;
+    /** Grid columns for the body. */
+    columns = 3;
+    render() {
+        const dot = this.state === 'unknown' ? 'neutral' : this.state;
+        return (index.h(index.Host, { key: '281c842746d39b89babab44e4082af21459af697' }, index.h("div", { key: '268505d67fd22ab2b6e8c318c9cb62b44f1ac713', class: "panel-head" }, index.h("div", { key: '1ba1ecfc8934171596ea8907bf724b94597908e2', class: "panel-titles" }, index.h("span", { key: 'c190548d8a484f0b4cda417eb5ac15da1c455c0e', class: "panel-title", part: "heading" }, this.heading), this.machineId && index.h("span", { key: '9c0cea21d61d6ad76a3318705449fe05422a17d8', class: "panel-subtitle" }, this.machineId)), index.h("div", { key: 'd83bd064b37f7c33948be3f8e99e6c7629d493dd', class: "panel-actions" }, this.oee !== undefined && (index.h("span", { key: 'bd88990d43b39d1fe968bddf726cb4be28cf1805', class: "oee", part: "oee" }, "OEE ", this.oee.toFixed(0), "%")), index.h("ind-status-dot", { key: 'a58bb00ece8b3dec79951cf619b82fda039050b1', state: dot, size: "md" }), index.h("span", { key: '385aacc80f7094ffc6395e228e4f7cf4f3034011', class: `state state-${this.state}`, part: "state" }, STATE_LABEL[this.state]))), index.h("div", { key: '0abd7affd719ac98abbb71d4d8d657e9d3b1f618', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, index.h("slot", { key: '36463bab72f6522f6a17788ca6efc4d770e6abee' }))));
+    }
+};
+IndMachineOverview.style = panelCss() + machineOverviewCss();
+
+exports.ind_machine_overview = IndMachineOverview;
+//# sourceMappingURL=ind-machine-overview.entry.cjs.js.map
+
+//# sourceMappingURL=ind-machine-overview.cjs.entry.js.map

package/dist/cjs/ind-machine-overview.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-machine-overview.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,kBAAkB,GAAG,MAAM,CAAC,gnBAAgnB,CAAC;;ACGnpB,MAAM,WAAW,GAAuC;AACtD,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,GAAG;CACb;MAWY,kBAAkB,GAAA,MAAA;;;;AACrB,IAAA,OAAO;;AAEP,IAAA,SAAS;IACQ,KAAK,GAAuB,SAAS;;AAEtD,IAAA,GAAG;;IAEH,OAAO,GAAW,CAAC;IAE3B,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK;QAC7D,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAQ,CACnE,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,GAAG,KAAK,SAAS,KACrBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,UAAM,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAS,CAC/D,EACDA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,GAAU,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EAC/CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,KAAK,CAAA,CAAE,EAAE,IAAI,EAAC,OAAO,EAAA,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAQ,CACnF,CACF,EACNA,OAAA,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,EAEzEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-machine-overview&encapsulation=shadow","src/components/organisms/machine-overview/machine-overview.css?tag=ind-machine-overview&encapsulation=shadow","src/components/organisms/machine-overview/machine-overview.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.oee {\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  margin-right: var(--ind-spacing-3, 6px);\n}\n\n.state {\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.state-running { color: var(--ind-state-running-bg, #16a34a); }\n.state-fault { color: var(--ind-state-fault-bg, #dc2626); }\n.state-warning { color: var(--ind-state-warning-bg, #f59e0b); }\n.state-maintenance { color: var(--ind-state-maintenance-bg, #2563eb); }\n.state-stopped { color: var(--ind-surface-text-secondary); }\n.state-unknown { color: var(--ind-surface-text-muted); }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentCardState } from '../../molecules/equipment-status-card/equipment-status-card';\n\nconst STATE_LABEL: Record<EquipmentCardState, string> = {\n  running: 'Running',\n  stopped: 'Stopped',\n  fault: 'Fault',\n  warning: 'Warning',\n  maintenance: 'Maintenance',\n  unknown: '—',\n};\n\n/**\n * Machine overview header + content area. Shows machine identity and state in\n * the header; slot equipment / KPI molecules into the grid body.\n */\n@Component({\n  tag: 'ind-machine-overview',\n  styleUrls: ['../_shared/panel.css', 'machine-overview.css'],\n  shadow: true,\n})\nexport class IndMachineOverview {\n  @Prop() heading!: string;\n  /** Machine identifier. */\n  @Prop() machineId?: string;\n  @Prop({ reflect: true }) state: EquipmentCardState = 'unknown';\n  /** OEE headline percentage. */\n  @Prop() oee?: number;\n  /** Grid columns for the body. */\n  @Prop() columns: number = 3;\n\n  render() {\n    const dot = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.machineId && <span class=\"panel-subtitle\">{this.machineId}</span>}\n          </div>\n          <div class=\"panel-actions\">\n            {this.oee !== undefined && (\n              <span class=\"oee\" part=\"oee\">OEE {this.oee.toFixed(0)}%</span>\n            )}\n            <ind-status-dot state={dot as any} size=\"md\" />\n            <span class={`state state-${this.state}`} part=\"state\">{STATE_LABEL[this.state]}</span>\n          </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"],"version":3}

package/dist/cjs/ind-maintenance-dashboard.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.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 maintenanceDashboardCss = () => `:host{min-width:460px}.kpis{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle)}.kpis ind-kpi-card{border:0;padding:0;background:transparent;min-width:0}.panel-list{max-height:280px}.row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);font-size:var(--ind-font-size-base, 12px)}.tag{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-secondary)}.due{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted);white-space:nowrap}.row-overdue .due{color:var(--ind-state-fault-bg, #dc2626);font-weight:var(--ind-font-weight-semibold, 600)}`;
+
+const IndMaintenanceDashboard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Maintenance';
+    /** Mean time between failures (hours). */
+    mtbf;
+    /** Mean time to repair (hours). */
+    mttr;
+    /** Open work orders. */
+    openWorkOrders = 0;
+    /** Overdue work orders. */
+    overdue = 0;
+    /** Upcoming / overdue tasks. */
+    dueItems = [];
+    render() {
+        return (index.h(index.Host, { key: '94b1be945de7b82e8d7570fd2051a4cd7aca547d' }, index.h("div", { key: '11f25ad6fd9fdcfa1120b1afab257769afe1010c', class: "panel-head" }, index.h("span", { key: '7bba8884a56d2bd9ff822e487a2414138c96890b', class: "panel-title", part: "heading" }, this.heading)), index.h("div", { key: '577d1f27c3dd2d4f487d8e3385ebbb3ec8f8ff4b', class: "kpis", part: "kpis" }, index.h("ind-kpi-card", { key: '583aba5d448f67ec960d6da5247dc752e0642812', label: "MTBF", value: this.mtbf ?? '--', unit: "h", precision: 0 }), index.h("ind-kpi-card", { key: 'a25a4ab4906015c76f76b4a35984619c7b888633', label: "MTTR", value: this.mttr ?? '--', unit: "h", precision: 1 }), index.h("ind-kpi-card", { key: 'cbc1e96d120ba23016005b90e13951264d148572', label: "Open WOs", value: this.openWorkOrders }), index.h("ind-kpi-card", { key: '1ac75c5a7ab66c5a37aefc6a14a65a1a9e0e8dfd', label: "Overdue", value: this.overdue, variant: this.overdue > 0 ? 'bad' : 'neutral' })), index.h("div", { key: '4cb0f35f5fc27412ea8cfb3491fd8947041a9f3e', class: "panel-list", part: "list" }, this.dueItems.length === 0 ? (index.h("div", { class: "panel-empty" }, "No scheduled tasks")) : (this.dueItems.map((d, i) => (index.h("div", { class: `row ${d.overdue ? 'row-overdue' : ''}`, part: "row", key: i }, index.h("span", { class: "tag", part: "asset" }, d.asset), index.h("span", { class: "task", part: "task" }, d.task), index.h("span", { class: "due", part: "due" }, d.due))))))));
+    }
+};
+IndMaintenanceDashboard.style = panelCss() + maintenanceDashboardCss();
+
+exports.ind_maintenance_dashboard = IndMaintenanceDashboard;
+//# sourceMappingURL=ind-maintenance-dashboard.entry.cjs.js.map
+
+//# sourceMappingURL=ind-maintenance-dashboard.cjs.entry.js.map

package/dist/cjs/ind-maintenance-dashboard.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-maintenance-dashboard.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,uBAAuB,GAAG,MAAM,CAAC,q2BAAq2B,CAAC;;MCkBh4B,uBAAuB,GAAA,MAAA;;;;IAC1B,OAAO,GAAW,aAAa;;AAE/B,IAAA,IAAI;;AAEJ,IAAA,IAAI;;IAEJ,cAAc,GAAW,CAAC;;IAE1B,OAAO,GAAW,CAAC;;IAEnB,QAAQ,GAAyB,EAAE;IAE3C,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CAC1D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3BA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAA,CAAiB,EAC3FA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAA,CAAiB,EAC3FA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,CAAiB,EAC1EA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK,GAAG,SAAS,EAAA,CAAiB,CAC7G,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EAChC,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IACzBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EAAA,oBAAA,CAAyB,KAEjD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACrBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,IAAA,EAAO,CAAC,CAAC,OAAO,GAAG,aAAa,GAAG,EAAE,CAAA,CAAE,EAAE,IAAI,EAAC,KAAK,EAAC,GAAG,EAAE,CAAC,EAAA,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,CAAC,CAAC,KAAK,CAAQ,EAC/CA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,CAAC,CAAC,IAAI,CAAQ,EAC9CA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,CAAC,CAAC,GAAG,CAAQ,CACvC,CACP,CAAC,CACH,CACG,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-maintenance-dashboard&encapsulation=shadow","src/components/organisms/maintenance-dashboard/maintenance-dashboard.css?tag=ind-maintenance-dashboard&encapsulation=shadow","src/components/organisms/maintenance-dashboard/maintenance-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: 460px;\n}\n\n.kpis {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n}\n\n.kpis ind-kpi-card {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n\n.panel-list {\n  max-height: 280px;\n}\n\n.row {\n  display: grid;\n  grid-template-columns: 96px 1fr auto;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  font-size: var(--ind-font-size-base, 12px);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  color: var(--ind-surface-text-secondary);\n}\n\n.due {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted);\n  white-space: nowrap;\n}\n\n.row-overdue .due {\n  color: var(--ind-state-fault-bg, #dc2626);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface MaintenanceDueItem {\n  asset: string;\n  task: string;\n  due: string;\n  overdue?: boolean;\n}\n\n/**\n * Maintenance KPIs (MTBF / MTTR / open & overdue work orders) plus an upcoming\n * / overdue task list.\n */\n@Component({\n  tag: 'ind-maintenance-dashboard',\n  styleUrls: ['../_shared/panel.css', 'maintenance-dashboard.css'],\n  shadow: true,\n})\nexport class IndMaintenanceDashboard {\n  @Prop() heading: string = 'Maintenance';\n  /** Mean time between failures (hours). */\n  @Prop() mtbf?: number;\n  /** Mean time to repair (hours). */\n  @Prop() mttr?: number;\n  /** Open work orders. */\n  @Prop() openWorkOrders: number = 0;\n  /** Overdue work orders. */\n  @Prop() overdue: number = 0;\n  /** Upcoming / overdue tasks. */\n  @Prop() dueItems: MaintenanceDueItem[] = [];\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=\"kpis\" part=\"kpis\">\n          <ind-kpi-card label=\"MTBF\" value={this.mtbf ?? '--'} unit=\"h\" precision={0}></ind-kpi-card>\n          <ind-kpi-card label=\"MTTR\" value={this.mttr ?? '--'} unit=\"h\" precision={1}></ind-kpi-card>\n          <ind-kpi-card label=\"Open WOs\" value={this.openWorkOrders}></ind-kpi-card>\n          <ind-kpi-card label=\"Overdue\" value={this.overdue} variant={this.overdue > 0 ? 'bad' : 'neutral'}></ind-kpi-card>\n        </div>\n        <div class=\"panel-list\" part=\"list\">\n          {this.dueItems.length === 0 ? (\n            <div class=\"panel-empty\">No scheduled tasks</div>\n          ) : (\n            this.dueItems.map((d, i) => (\n              <div class={`row ${d.overdue ? 'row-overdue' : ''}`} part=\"row\" key={i}>\n                <span class=\"tag\" part=\"asset\">{d.asset}</span>\n                <span class=\"task\" part=\"task\">{d.task}</span>\n                <span class=\"due\" part=\"due\">{d.due}</span>\n              </div>\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-motor-card.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+
+const equipmentCardCss = () => `.body{display:flex;align-items:center;gap:var(--ind-spacing-5, 12px)}.symbol{flex:0 0 auto}.metrics{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);margin-left:auto;align-items:flex-end;text-align:right}`;
+
+const motorCardCss = () => `:host{min-width:200px}`;
+
+const IndMotorCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Equipment tag (e.g. "M-204"). */
+    tag;
+    /** Human label (e.g. "Agitator motor"). */
+    label;
+    /** Process state — `running` animates the symbol, drives fault chrome. */
+    state = 'stopped';
+    /** Speed in rpm. */
+    speed;
+    /** Motor current in amps. */
+    current;
+    /** Load in percent. */
+    load;
+    render() {
+        const name = this.label ?? this.tag ?? 'Motor';
+        return (index.h(index.Host, { key: '71d47740db2ceab165ac349e77aa05332d6307b2', role: "group", "aria-label": `${name} — ${this.state}` }, index.h("div", { key: '8fae992272f6041a487d589a98377721715cbf7e', class: "card-head" }, index.h("span", { key: '8e60fb2c1764646b247bf6639330e905768e97fc', class: "card-title", part: "label" }, name), this.tag && index.h("span", { key: '093e30f926336401c6c2bee0fd076cd1b1670591', class: "card-tag", part: "tag" }, this.tag)), index.h("div", { key: '9630066ab4fcc87b12cc3b7d765bc5cd9a993fd1', class: "body", part: "body" }, index.h("ind-motor", { key: '45deb69064fea96890646b2b3c153cb6c1f46143', class: "symbol", state: this.state, size: "md" }), index.h("div", { key: '038f877e3d154bb7a6150b97c015a9843666c2fc', class: "metrics", part: "metrics" }, this.speed !== undefined && (index.h("ind-value", { key: '202763a0f2f38f3338868867699e11a0863ad73b', value: this.speed, unit: "rpm", precision: 0, label: "Speed", size: "md" })), this.current !== undefined && (index.h("ind-value", { key: '69c9c6c769b16768dcf75b70e509736fb2c41f26', value: this.current, unit: "A", precision: 1, label: "Current", size: "sm" })), this.load !== undefined && (index.h("ind-value", { key: '1b8eda905a846b08d85d92c79c866eb43a8413e0', value: this.load, unit: "%", precision: 0, label: "Load", size: "sm" }))))));
+    }
+};
+IndMotorCard.style = cardCss() + (equipmentCardCss() + motorCardCss());
+
+exports.ind_motor_card = IndMotorCard;
+//# sourceMappingURL=ind-motor-card.entry.cjs.js.map
+
+//# sourceMappingURL=ind-motor-card.cjs.entry.js.map

package/dist/cjs/ind-motor-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-motor-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,4NAA4N,CAAC;;ACA7P,MAAM,YAAY,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCYtC,YAAY,GAAA,MAAA;;;;;AAEf,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEY,KAAK,GAAmB,SAAS;;AAElD,IAAA,KAAK;;AAEL,IAAA,OAAO;;AAEP,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO;AAC9C,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACtDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAQ,EAClD,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3BA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACzDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChC,IAAI,CAAC,KAAK,KAAK,SAAS,KACvBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAClF,EACA,IAAI,CAAC,OAAO,KAAK,SAAS,KACzBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,CACpF,EACA,IAAI,CAAC,IAAI,KAAK,SAAS,KACtBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9E,CACG,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/card.css?tag=ind-motor-card&encapsulation=shadow","src/components/molecules/_shared/equipment-card.css?tag=ind-motor-card&encapsulation=shadow","src/components/molecules/motor-card/motor-card.css?tag=ind-motor-card&encapsulation=shadow","src/components/molecules/motor-card/motor-card.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  box-sizing: border-box;\n  min-width: 160px;\n}\n\n.card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n","/* Shared layout for the equipment faceplate cards (motor, pump, valve, tank).\n * Loaded after card.css and before each component's own sheet. */\n.body {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-5, 12px);\n}\n\n.symbol {\n  flex: 0 0 auto;\n}\n\n.metrics {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  margin-left: auto;\n  align-items: flex-end;\n  text-align: right;\n}\n",":host {\n  min-width: 200px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState } from '../../atoms/_equipment/types';\n\n/**\n * Motor faceplate: animated `<ind-motor>` symbol plus speed / current / load\n * readouts. Drop into an equipment overview grid.\n */\n@Component({\n  tag: 'ind-motor-card',\n  styleUrls: ['../_shared/card.css', '../_shared/equipment-card.css', 'motor-card.css'],\n  shadow: true,\n})\nexport class IndMotorCard {\n  /** Equipment tag (e.g. \"M-204\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Agitator motor\"). */\n  @Prop() label?: string;\n  /** Process state — `running` animates the symbol, drives fault chrome. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Speed in rpm. */\n  @Prop() speed?: number;\n  /** Motor current in amps. */\n  @Prop() current?: number;\n  /** Load in percent. */\n  @Prop() load?: number;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'Motor';\n    return (\n      <Host role=\"group\" aria-label={`${name} — ${this.state}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{name}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <ind-motor class=\"symbol\" state={this.state} size=\"md\" />\n          <div class=\"metrics\" part=\"metrics\">\n            {this.speed !== undefined && (\n              <ind-value value={this.speed} unit=\"rpm\" precision={0} label=\"Speed\" size=\"md\" />\n            )}\n            {this.current !== undefined && (\n              <ind-value value={this.current} unit=\"A\" precision={1} label=\"Current\" size=\"sm\" />\n            )}\n            {this.load !== undefined && (\n              <ind-value value={this.load} unit=\"%\" precision={0} label=\"Load\" size=\"sm\" />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}