npm - @ind-ds/core - Versions diffs - 0.1.0 → 0.2.0 - Mend

@ind-ds/core 0.1.0 → 0.2.0

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

Files changed (1405) hide show

package/dist/esm/ind-led_4.entry.js ADDED Viewed

@@ -0,0 +1,145 @@
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-Bls_NlWP.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) {
+        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 (h(Host, { key: 'd843ed36b6c73a35e20903104acdf71540429a7a', role: "status", "aria-label": accessibleName, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("span", { key: '97548c63e15ca29608b5646f51bbcba147114d0c', class: "led", part: "led", "aria-hidden": "true" }), this.label && 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) {
+        registerInstance(this, hostRef);
+        this.indChange = 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 (h(Host, { key: '1f4da9abae27080579e40bdb9ab8644ba65aed21' }, h("span", { key: 'c367ccb30a97cadd8320a9cb84ad2a739873f89a', class: "card-title", part: "label" }, this.label), 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) {
+        registerInstance(this, hostRef);
+        this.indChange = 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 (h(Host, { key: '9fdb192691776ef8692939e70840c679b495b002' }, this.label && h("span", { key: 'f2f1b7541177cae7565a435e3a3effaf1a96a314', class: "group-label", part: "group-label" }, this.label), 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) => (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) {
+        registerInstance(this, hostRef);
+        this.indStart = createEvent(this, "indStart");
+        this.indStop = 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 (h(Host, { key: 'c548fa2649cbe177d1597c84d157625dadf09a5c', role: "group", "aria-label": this.label ?? 'Start stop control' }, h("div", { key: '653531b39e8997e8b353ad87f8f80684ca4d5095', class: "head", part: "head" }, h("ind-led", { key: '9c266b4ce3360f84ca14401e37dc2940986cd665', state: ledState, size: "md", blinking: this.state === 'starting' || this.state === 'stopping' }), this.label && h("span", { key: 'f9efc9efdc8b1c45c3ab4ae72210a3762d4a7e7b', class: "label", part: "label" }, this.label)), h("div", { key: '8aa2c5b3bda5f44d5ffe2b11be7e6bb64717f287', class: "buttons", part: "buttons" }, h("ind-button", { key: '21883367d40e0f6eb6d485cdc3adad5d6b17f6b4', variant: "primary", size: "md", label: this.startLabel, disabled: this.disabled || this.isRunning(), holdToConfirmMs: this.holdToStartMs, onIndActivate: () => this.indStart.emit() }), 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();
+export { IndLed as ind_led, IndModeSelector as ind_mode_selector, IndSelectorSwitch as ind_selector_switch, IndStartStopControl as ind_start_stop_control };
+//# sourceMappingURL=ind-led.ind-mode-selector.ind-selector-switch.ind-start-stop-control.entry.js.map
+//# sourceMappingURL=ind-led_4.entry.js.map

package/dist/esm/ind-led_4.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-led_4.entry.js","mappings":"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","names":["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/esm/ind-linear-gauge_2.entry.js ADDED Viewed

@@ -0,0 +1,97 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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) {
+        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 (h(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) && (h("div", { key: '335a862a12e339cf53aa72640539412d062eaded', class: "header", part: "header" }, this.label && h("span", { key: '5c832f92f30c3cee5ee33e9299f439a150f754e0', class: "label", part: "label" }, this.label), this.showValue && (h("span", { key: '70d5ff9bb45a360cb712f1338832e1f18dd58a50', class: "value", part: "value" }, this.formatted(), this.unit ? ` ${this.unit}` : '')))), 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 (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,
+                } }));
+        }), h("span", { key: '4adaf09d9eb92fd74cda1ae8c965f4c7810d3424', class: "fill", part: "fill", style: this.orientation === 'horizontal' ? { width: `${fill}%` } : { height: `${fill}%` } }), sp !== undefined && (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) {
+        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 (h(Host, { key: '5b40e01733c5399fffc64c2f49e7b82b42978de8', role: "meter", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${name} level ${Math.round(pct)}%` }, h("svg", { key: '76267a5138aa5c3a2e50aec8c8ef104b3fdd1d0e', class: "symbol", viewBox: "0 0 40 60", "aria-hidden": "true" }, h("defs", { key: '59c6bc39e401646fffad6506fc3d39ac34049d0c' }, h("clipPath", { key: 'e85ac49916606e0ba28886d505584f8f582c30ec', id: "tank-clip" }, h("rect", { key: '5f87fb031b4a61dd60827b411341f7095d4f920e', x: "4", y: top, width: "32", height: height, rx: "4" }))), h("rect", { key: '5ad22cabef8a273479a53b3511d7eccf3a20eff0', class: "liquid", x: "4", y: fillY, width: "32", height: fillH, "clip-path": "url(#tank-clip)" }), h("rect", { key: 'c6a32088394a44bef58c5d26d095fe3b710d7f89', class: "body", x: "4", y: top, width: "32", height: height, rx: "4" })), (this.tag || this.label || this.showValue) && (h("div", { key: 'd224c2acf97978df2b506f3242c6f6fa99066d23', class: "caption" }, this.tag && h("span", { key: '43d91f74f836e3870cbbed0f33e05e1225560562', class: "tag" }, this.tag), this.showValue && h("span", { key: 'b0784785618302059f3e54399124e542ad14ffa5', class: "tag" }, Math.round(pct), "%"), this.label && h("span", { key: '84523ec9d4ce39b5ddd0c8cf262092549d51a428', class: "label" }, this.label)))));
+    }
+};
+IndTank.style = equipmentCss() + tankCss();
+export { IndLinearGauge as ind_linear_gauge, IndTank as ind_tank };
+//# sourceMappingURL=ind-linear-gauge.ind-tank.entry.js.map
+//# sourceMappingURL=ind-linear-gauge_2.entry.js.map

package/dist/esm/ind-linear-gauge_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ind-linear-gauge_2.entry.js","mappings":"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","names":[],"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/esm/ind-machine-overview.entry.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+const 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) {
+        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 (h(Host, { key: '281c842746d39b89babab44e4082af21459af697' }, h("div", { key: '268505d67fd22ab2b6e8c318c9cb62b44f1ac713', class: "panel-head" }, h("div", { key: '1ba1ecfc8934171596ea8907bf724b94597908e2', class: "panel-titles" }, h("span", { key: 'c190548d8a484f0b4cda417eb5ac15da1c455c0e', class: "panel-title", part: "heading" }, this.heading), this.machineId && h("span", { key: '9c0cea21d61d6ad76a3318705449fe05422a17d8', class: "panel-subtitle" }, this.machineId)), h("div", { key: 'd83bd064b37f7c33948be3f8e99e6c7629d493dd', class: "panel-actions" }, this.oee !== undefined && (h("span", { key: 'bd88990d43b39d1fe968bddf726cb4be28cf1805', class: "oee", part: "oee" }, "OEE ", this.oee.toFixed(0), "%")), h("ind-status-dot", { key: 'a58bb00ece8b3dec79951cf619b82fda039050b1', state: dot, size: "md" }), h("span", { key: '385aacc80f7094ffc6395e228e4f7cf4f3034011', class: `state state-${this.state}`, part: "state" }, STATE_LABEL[this.state]))), h("div", { key: '0abd7affd719ac98abbb71d4d8d657e9d3b1f618', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, h("slot", { key: '36463bab72f6522f6a17788ca6efc4d770e6abee' }))));
+    }
+};
+IndMachineOverview.style = panelCss() + machineOverviewCss();
+export { IndMachineOverview as ind_machine_overview };
+//# sourceMappingURL=ind-machine-overview.entry.js.map
+//# sourceMappingURL=ind-machine-overview.entry.js.map

package/dist/esm/ind-machine-overview.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-machine-overview.entry.js","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"],"names":[],"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,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAQ,CACnE,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,GAAG,KAAK,SAAS,KACrB,CAAA,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,EACD,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,GAAU,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EAC/C,CAAA,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,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,iBAAA,CAAmB,EAAE,EAAA,EAEzE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

package/dist/esm/ind-maintenance-dashboard.entry.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+const 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) {
+        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 (h(Host, { key: '94b1be945de7b82e8d7570fd2051a4cd7aca547d' }, h("div", { key: '11f25ad6fd9fdcfa1120b1afab257769afe1010c', class: "panel-head" }, h("span", { key: '7bba8884a56d2bd9ff822e487a2414138c96890b', class: "panel-title", part: "heading" }, this.heading)), h("div", { key: '577d1f27c3dd2d4f487d8e3385ebbb3ec8f8ff4b', class: "kpis", part: "kpis" }, h("ind-kpi-card", { key: '583aba5d448f67ec960d6da5247dc752e0642812', label: "MTBF", value: this.mtbf ?? '--', unit: "h", precision: 0 }), h("ind-kpi-card", { key: 'a25a4ab4906015c76f76b4a35984619c7b888633', label: "MTTR", value: this.mttr ?? '--', unit: "h", precision: 1 }), h("ind-kpi-card", { key: 'cbc1e96d120ba23016005b90e13951264d148572', label: "Open WOs", value: this.openWorkOrders }), h("ind-kpi-card", { key: '1ac75c5a7ab66c5a37aefc6a14a65a1a9e0e8dfd', label: "Overdue", value: this.overdue, variant: this.overdue > 0 ? 'bad' : 'neutral' })), h("div", { key: '4cb0f35f5fc27412ea8cfb3491fd8947041a9f3e', class: "panel-list", part: "list" }, this.dueItems.length === 0 ? (h("div", { class: "panel-empty" }, "No scheduled tasks")) : (this.dueItems.map((d, i) => (h("div", { class: `row ${d.overdue ? 'row-overdue' : ''}`, part: "row", key: i }, h("span", { class: "tag", part: "asset" }, d.asset), h("span", { class: "task", part: "task" }, d.task), h("span", { class: "due", part: "due" }, d.due))))))));
+    }
+};
+IndMaintenanceDashboard.style = panelCss() + maintenanceDashboardCss();
+export { IndMaintenanceDashboard as ind_maintenance_dashboard };
+//# sourceMappingURL=ind-maintenance-dashboard.entry.js.map
+//# sourceMappingURL=ind-maintenance-dashboard.entry.js.map

package/dist/esm/ind-maintenance-dashboard.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-maintenance-dashboard.entry.js","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"],"names":[],"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,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CAC1D,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,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,EAC3F,CAAA,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,EAC3F,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,CAAiB,EAC1E,CAAA,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,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EAChC,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EAAA,oBAAA,CAAyB,KAEjD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACrB,CAAA,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,EACpE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,CAAC,CAAC,KAAK,CAAQ,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,CAAC,CAAC,IAAI,CAAQ,EAC9C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,CAAC,CAAC,GAAG,CAAQ,CACvC,CACP,CAAC,CACH,CACG,CACD;;;;;;;"}

package/dist/esm/ind-motor-card.entry.js ADDED Viewed

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

package/dist/esm/ind-motor-card.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-motor-card.entry.js","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"],"names":[],"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,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACtD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAQ,EAClD,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACzD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChC,IAAI,CAAC,KAAK,KAAK,SAAS,KACvB,CAAA,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,KACzB,CAAA,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,KACtB,CAAA,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;;;;;;;"}

package/dist/esm/ind-motor-control-panel.entry.js ADDED Viewed

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+const controlPanelCss = () => `.panel-body>ind-motor-card,.panel-body>ind-pump-card,.panel-body>ind-valve-card,.panel-body>ind-start-stop-control,.panel-body>ind-setpoint-control,.panel-body>ind-speed-control,.panel-body>ind-mode-selector,.panel-body>ind-recipe-selector{border:0;padding:0;background:transparent;min-width:0}`;
+const motorControlPanelCss = () => `:host{min-width:280px}`;
+const IndMotorControlPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indStart = createEvent(this, "indStart");
+        this.indStop = createEvent(this, "indStop");
+        this.indSpeed = createEvent(this, "indSpeed");
+        this.indMode = createEvent(this, "indMode");
+    }
+    heading = 'Motor';
+    tag;
+    state = 'stopped';
+    speed;
+    current;
+    load;
+    /** Speed setpoint (two-way), in percent. */
+    speedSetpoint = 0;
+    mode;
+    indStart;
+    indStop;
+    indSpeed;
+    indMode;
+    runState() {
+        if (this.state === 'running')
+            return 'running';
+        if (this.state === 'fault')
+            return 'fault';
+        return 'stopped';
+    }
+    onSpeed = (e) => {
+        e.stopPropagation();
+        this.speedSetpoint = e.detail;
+        this.indSpeed.emit(e.detail);
+    };
+    onMode = (e) => {
+        e.stopPropagation();
+        this.indMode.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: 'aa9cbabc5c0cfca6f3a40ad007644f9be2bab696' }, h("div", { key: '803290dd446cabe5ee0f359b837b2e967bd8d827', class: "panel-head" }, h("div", { key: '062e906a61e9d4dfee2535b89fa1b83ae077596e', class: "panel-titles" }, h("span", { key: 'f7cd17b073e057d1d19a277510b8f559bc57a856', class: "panel-title", part: "heading" }, this.heading), this.tag && h("span", { key: 'a91e201967ce6167328df4453586141ba212b665', class: "panel-subtitle" }, this.tag))), h("div", { key: '8fccc430ed03534f496cd87e3d636964b517e1b0', class: "panel-body" }, h("ind-motor-card", { key: '997e568d414587072900160088a1a1d85859c649', tag: this.tag, label: this.heading, state: this.state, speed: this.speed, current: this.current, load: this.load }), h("ind-start-stop-control", { key: '05327d42c5e8a9970c8ac845c6721eee1bcea317', label: this.heading, state: this.runState(), onIndStart: () => this.indStart.emit(), onIndStop: () => this.indStop.emit() }), h("ind-speed-control", { key: '46d6380f0e12cc54de1ae28a5f57c446347a8019', label: "Speed setpoint", value: this.speedSetpoint, unit: "%", onIndChange: this.onSpeed }), h("ind-mode-selector", { key: '84ca78cf0ece4142d09867b0ae31ce604c913938', value: this.mode, onIndChange: this.onMode }))));
+    }
+};
+IndMotorControlPanel.style = panelCss() + (controlPanelCss() + motorControlPanelCss());
+export { IndMotorControlPanel as ind_motor_control_panel };
+//# sourceMappingURL=ind-motor-control-panel.entry.js.map
+//# sourceMappingURL=ind-motor-control-panel.entry.js.map