@ind-ds/core 0.1.0

package/dist/collection/components/organisms/status-bar/status-bar.css

@@ -0,0 +1,34 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  padding: var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);
+  background: var(--ind-surface-panel);
+  border-top: 1px solid var(--ind-surface-border-default);
+  font-family: var(--ind-font-family-sans);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  min-height: 24px;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.message {
+  flex: 0 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+::slotted(*) {
+  font-size: var(--ind-font-size-sm, 11px);
+}

package/dist/collection/components/organisms/status-bar/status-bar.js

@@ -0,0 +1,76 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Global footer bar: status dot + message on the left, slotted content on the right.
+ *
+ * Sized to be unobtrusive (~24 px). Drop additional `<span>` / `<ind-button size="sm">`
+ * children for right-aligned context (timestamps, server identifiers, action buttons).
+ */
+export class IndStatusBar {
+    state = 'neutral';
+    message;
+    render() {
+        return (h(Host, { key: 'ea26634fed8ac15e259de910eb7bcd4e5ce3d094', role: "status", "aria-live": "polite" }, h("ind-status-dot", { key: 'a9305e75e5b0e35c5cccf526020ed00177d729e4', state: this.state, size: "sm" }), this.message && h("span", { key: '816506e0c34aaf66249bcca19fa0741841a1dae5', class: "message", part: "message" }, this.message), h("span", { key: '15edfed427f793ad354d7b71e256149323ab59b4', class: "spacer" }), h("span", { key: 'abd85f3229fbc9ad3e6257400a87bab0e9743dae', class: "end", part: "end" }, h("slot", { key: 'bc0a1f8844f91d9158ec4f265ae12cc27b443740' }))));
+    }
+    static get is() { return "ind-status-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["status-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["status-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusBarState",
+                    "resolved": "\"error\" | \"fault\" | \"info\" | \"maintenance\" | \"neutral\" | \"running\" | \"stopped\" | \"success\" | \"warning\"",
+                    "references": {
+                        "StatusBarState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/organisms/status-bar/status-bar.tsx",
+                            "id": "src/components/organisms/status-bar/status-bar.tsx::StatusBarState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'neutral'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            }
+        };
+    }
+}
+//# sourceMappingURL=status-bar.js.map

package/dist/collection/components/organisms/status-bar/status-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/organisms/status-bar/status-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;GAKG;AAMH,MAAM,OAAO,YAAY;IACE,KAAK,GAAmB,SAAS,CAAC;IACnD,OAAO,CAAU;IAEzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ;YACpC,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;YAC9C,IAAI,CAAC,OAAO,IAAI,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;YAC3E,6DAAM,KAAK,EAAC,QAAQ,GAAG;YACvB,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK;gBAAC,8DAAQ,CAAO,CACvC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type StatusBarState =\n  | 'neutral' | 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance' | 'success' | 'info' | 'error';\n\n/**\n * Global footer bar: status dot + message on the left, slotted content on the right.\n *\n * Sized to be unobtrusive (~24 px). Drop additional `<span>` / `<ind-button size=\"sm\">`\n * children for right-aligned context (timestamps, server identifiers, action buttons).\n */\n@Component({\n  tag: 'ind-status-bar',\n  styleUrl: 'status-bar.css',\n  shadow: true,\n})\nexport class IndStatusBar {\n  @Prop({ reflect: true }) state: StatusBarState = 'neutral';\n  @Prop() message?: string;\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\">\n        <ind-status-dot state={this.state} size=\"sm\" />\n        {this.message && <span class=\"message\" part=\"message\">{this.message}</span>}\n        <span class=\"spacer\" />\n        <span class=\"end\" part=\"end\"><slot /></span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n\n// Atoms\nexport type { LedState, LedSize } from './components/atoms/led/led';\nexport type { ValueAlarm, ValueTrend, ValueSize } from './components/atoms/value/value';\nexport type { AlarmPriority } from './components/atoms/alarm/alarm';\nexport type { ValveState, ValveOrientation, ValveSize } from './components/atoms/valve/valve';\nexport type { ButtonVariant, ButtonSize } from './components/atoms/button/button';\nexport type { InputType, InputSize, InputMode } from './components/atoms/input/input';\nexport type { CheckboxSize } from './components/atoms/checkbox/checkbox';\nexport type { DividerOrientation } from './components/atoms/divider/divider';\nexport type { StatusDotState, StatusDotSize } from './components/atoms/status-dot/status-dot';\nexport type { ProgressVariant, ProgressSize } from './components/atoms/progress/progress';\nexport type { SelectOption, SelectSize } from './components/atoms/select/select';\nexport type { TextareaSize, TextareaVariant } from './components/atoms/textarea/textarea';\nexport type { DialogSize } from './components/atoms/dialog/dialog';\nexport type { ScaraState } from './components/atoms/scara-canvas/scara-canvas';\nexport type { ShelfSlot, ShelfSlotState } from './components/atoms/shelf-canvas/shelf-canvas';\n\n// Molecules\nexport type { HealthState } from './components/molecules/health-card/health-card';\nexport type { FillRowVariant } from './components/molecules/fill-row/fill-row';\n\n// Organisms\nexport type { AppHeaderConnectionState } from './components/organisms/app-header/app-header';\nexport type { StatusBarState } from './components/organisms/status-bar/status-bar';\n"]}

package/dist/components/ind-alarm.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndAlarm extends Components.IndAlarm, HTMLElement {}
+export const IndAlarm: {
+    prototype: IndAlarm;
+    new (): IndAlarm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-alarm.js

@@ -0,0 +1,2 @@
+import{p as a,t as i,H as o,h as e,a as r}from"./index.js";const t=()=>`:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);border:1px solid;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);max-width:100%}.badge{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-bold, 700);font-size:var(--ind-font-size-sm, 11px);letter-spacing:0.04em;padding:1px var(--ind-spacing-2, 4px);border-radius:var(--ind-radius-sm, 2px);background:rgba(0, 0, 0, 0.25);white-space:nowrap}.label{flex:1;font-weight:var(--ind-font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timestamp{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);opacity:0.85;white-space:nowrap}:host([priority="high-high"]){background:var(--ind-alarm-high-high-bg, #dc2626);color:var(--ind-alarm-high-high-fg, #ffffff);border-color:var(--ind-alarm-high-high-border, #f87171)}:host([priority="high"]){background:var(--ind-alarm-high-bg, #f59e0b);color:var(--ind-alarm-high-fg, #000000);border-color:var(--ind-alarm-high-border, #fcd34d)}:host([priority="low"]){background:var(--ind-alarm-low-bg, #0891b2);color:var(--ind-alarm-low-fg, #ffffff);border-color:var(--ind-alarm-low-border, #22d3ee)}:host([priority="low-low"]){background:var(--ind-alarm-low-low-bg, #7c3aed);color:var(--ind-alarm-low-low-fg, #ffffff);border-color:var(--ind-alarm-low-low-border, #a78bfa)}:host(:not([acknowledged])){animation:ind-alarm-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite}:host([priority="high-high"]:not([acknowledged])){animation-duration:var(--ind-motion-blink-urgent, 200ms)}:host([priority="low"]:not([acknowledged])),:host([priority="low-low"]:not([acknowledged])){animation-duration:var(--ind-motion-blink-slow, 1000ms)}:host([acknowledged]) .label{opacity:0.75}:host([acknowledged]) .badge{opacity:0.85}@keyframes ind-alarm-blink{50%{filter:brightness(0.6)}}@media (prefers-reduced-motion: reduce){:host(:not([acknowledged])){animation:none;outline:3px solid currentColor;outline-offset:2px}}`;const n={"high-high":"HH",high:"H",low:"L","low-low":"LL"};const d=a(class a extends o{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow()}priority="high";acknowledged=false;label;timestamp;render(){const a=n[this.priority];return e(r,{key:"4aa256413a1b908acbe8dda509a7524fbd3c50df",role:"alert","aria-live":this.priority==="high-high"&&!this.acknowledged?"assertive":"polite","aria-atomic":"true"},e("span",{key:"19ee856cc6f4ee90f0db296fae69547c8bfa9c0f",class:"badge",part:"badge","aria-label":`priority ${a}`},a),e("span",{key:"54e66ef997a6ed665e4f0d59f87532368103d686",class:"label",part:"label"},this.label),this.timestamp&&e("time",{key:"954956c17cce6c16df50710c6eb12fad827e8c45",class:"timestamp",part:"timestamp",dateTime:this.timestamp},this.timestamp))}static get style(){return t()}},[513,"ind-alarm",{priority:[513],acknowledged:[516],label:[1],timestamp:[1]}]);function l(){if(typeof customElements==="undefined"){return}const a=["ind-alarm"];a.forEach((a=>{switch(a){case"ind-alarm":if(!customElements.get(i(a))){customElements.define(i(a),d)}break}}))}l();const s=d;const f=l;export{s as IndAlarm,f as defineCustomElement};
+//# sourceMappingURL=ind-alarm.js.map

package/dist/components/ind-alarm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alarmCss","PRIORITY_LABEL","high","low","IndAlarm","__stencil_proxyCustomElement","HTMLElement","priority","acknowledged","label","timestamp","render","prio","this","h","Host","key","role","class","part","dateTime"],"sources":["src/components/atoms/alarm/alarm.css?tag=ind-alarm&encapsulation=shadow","src/components/atoms/alarm/alarm.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-base, 12px);\n  border: 1px solid;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  max-width: 100%;\n}\n\n.badge {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-bold, 700);\n  font-size: var(--ind-font-size-sm, 11px);\n  letter-spacing: 0.04em;\n  padding: 1px var(--ind-spacing-2, 4px);\n  border-radius: var(--ind-radius-sm, 2px);\n  background: rgba(0, 0, 0, 0.25);\n  white-space: nowrap;\n}\n\n.label {\n  flex: 1;\n  font-weight: var(--ind-font-weight-medium, 500);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.timestamp {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  opacity: 0.85;\n  white-space: nowrap;\n}\n\n:host([priority=\"high-high\"]) {\n  background: var(--ind-alarm-high-high-bg, #dc2626);\n  color: var(--ind-alarm-high-high-fg, #ffffff);\n  border-color: var(--ind-alarm-high-high-border, #f87171);\n}\n:host([priority=\"high\"]) {\n  background: var(--ind-alarm-high-bg, #f59e0b);\n  color: var(--ind-alarm-high-fg, #000000);\n  border-color: var(--ind-alarm-high-border, #fcd34d);\n}\n:host([priority=\"low\"]) {\n  background: var(--ind-alarm-low-bg, #0891b2);\n  color: var(--ind-alarm-low-fg, #ffffff);\n  border-color: var(--ind-alarm-low-border, #22d3ee);\n}\n:host([priority=\"low-low\"]) {\n  background: var(--ind-alarm-low-low-bg, #7c3aed);\n  color: var(--ind-alarm-low-low-fg, #ffffff);\n  border-color: var(--ind-alarm-low-low-border, #a78bfa);\n}\n\n/* Unacknowledged → blink at the priority-appropriate rate. */\n:host(:not([acknowledged])) {\n  animation: ind-alarm-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite;\n}\n:host([priority=\"high-high\"]:not([acknowledged])) {\n  animation-duration: var(--ind-motion-blink-urgent, 200ms);\n}\n:host([priority=\"low\"]:not([acknowledged])),\n:host([priority=\"low-low\"]:not([acknowledged])) {\n  animation-duration: var(--ind-motion-blink-slow, 1000ms);\n}\n\n/* Acknowledged → muted, no animation (ISA-18.2 convention). */\n:host([acknowledged]) .label { opacity: 0.75; }\n:host([acknowledged]) .badge { opacity: 0.85; }\n\n@keyframes ind-alarm-blink {\n  50% { filter: brightness(0.6); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(:not([acknowledged])) {\n    animation: none;\n    outline: 3px solid currentColor;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type AlarmPriority = 'high-high' | 'high' | 'low' | 'low-low';\n\nconst PRIORITY_LABEL: Record<AlarmPriority, string> = {\n  'high-high': 'HH',\n  'high': 'H',\n  'low': 'L',\n  'low-low': 'LL',\n};\n\n@Component({\n  tag: 'ind-alarm',\n  styleUrl: 'alarm.css',\n  shadow: true,\n})\nexport class IndAlarm {\n  /** ISA-18.2 alarm priority. */\n  @Prop({ reflect: true }) priority: AlarmPriority = 'high';\n\n  /** When false, the chip blinks (per ISA-18.2 unack convention). */\n  @Prop({ reflect: true }) acknowledged: boolean = false;\n\n  /** Required human description of the alarm. */\n  @Prop() label!: string;\n\n  /** Optional ISO-8601 timestamp. Rendered with `<time>`. */\n  @Prop() timestamp?: string;\n\n  render() {\n    const prio = PRIORITY_LABEL[this.priority];\n    return (\n      <Host\n        role=\"alert\"\n        aria-live={\n          this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite'\n        }\n        aria-atomic=\"true\"\n      >\n        <span class=\"badge\" part=\"badge\" aria-label={`priority ${prio}`}>{prio}</span>\n        <span class=\"label\" part=\"label\">{this.label}</span>\n        {this.timestamp && (\n          <time class=\"timestamp\" part=\"timestamp\" dateTime={this.timestamp}>\n            {this.timestamp}\n          </time>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAW,IAAM,kpECIvB,MAAMC,EAAgD,CACpD,YAAa,KACbC,KAAQ,IACRC,IAAO,IACP,UAAW,M,MAQAC,EAAQC,EAAA,MAAAD,UAAAE,E,iFAEMC,SAA0B,OAG1BC,aAAwB,MAGzCC,MAGAC,UAER,MAAAC,GACE,MAAMC,EAAOX,EAAeY,KAAKN,UACjC,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,QAAO,YAEVJ,KAAKN,WAAa,cAAgBM,KAAKL,aAAe,YAAc,SAAQ,cAElE,QAEZM,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,QAAO,aAAa,YAAYP,KAASA,GAClEE,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SAASN,KAAKJ,OACtCI,KAAKH,WACJI,EAAA,QAAAE,IAAA,2CAAME,MAAM,YAAYC,KAAK,YAAYC,SAAUP,KAAKH,WACrDG,KAAKH,W","ignoreList":[]}

package/dist/components/ind-app-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndAppHeader extends Components.IndAppHeader, HTMLElement {}
+export const IndAppHeader: {
+    prototype: IndAppHeader;
+    new (): IndAppHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-app-header.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,c as n,h as t,a as i,t as d}from"./index.js";import{d as s}from"./p-D-FsSjAC.js";const r=()=>`:host{display:flex;align-items:center;gap:var(--ind-spacing-6, 16px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-6, 16px);background:var(--ind-surface-panel);border-bottom:1px solid var(--ind-surface-border-default);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-sans);min-height:56px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.brand{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.brand-logo{font-size:26px;line-height:1;color:var(--ind-button-primary-bg)}.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-name{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-bold, 700);letter-spacing:0.05em;text-transform:uppercase}.brand-sub{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));text-transform:uppercase;letter-spacing:0.08em}.machine{display:flex;flex-direction:column;line-height:1.1;padding-left:var(--ind-spacing-5, 12px);border-left:1px solid var(--ind-surface-border-subtle)}.machine-label{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));text-transform:uppercase;letter-spacing:0.08em}.machine-id{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600)}.mqtt{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.mqtt-label{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.spacer{flex:1}.meta{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);font-size:var(--ind-font-size-sm, 11px)}.version{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.docs{color:var(--ind-feedback-info-bg);text-decoration:underline;text-underline-offset:2px}.docs:hover{text-decoration-thickness:2px}.actions{display:flex;gap:var(--ind-spacing-3, 6px)}.action{height:var(--ind-size-button-sm, 26px);padding:0 var(--ind-spacing-4, 8px);background:var(--ind-button-default-bg);color:var(--ind-button-default-fg);border:1px solid var(--ind-button-default-border);border-radius:var(--ind-radius-md, 3px);font-family:inherit;font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-semibold, 600);cursor:pointer;transition:background var(--ind-motion-duration-fast, 120ms)}.action:hover{background:var(--ind-button-default-bg-hover)}.action--danger{background:transparent;color:var(--ind-feedback-error-bg);border-color:var(--ind-feedback-error-border)}.action--danger:hover{background:var(--ind-feedback-error-bg);color:var(--ind-feedback-error-fg)}`;const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.indChangeMachine=n(this,"indChangeMachine");this.indDisconnect=n(this,"indDisconnect")}brand;subBrand;machineId;mqttState="neutral";mqttLabel;version;docsUrl;hideChangeMachine=false;hideDisconnect=false;indChangeMachine;indDisconnect;render(){return t(i,{key:"c65d79c697786cf1e17f3d13a1f5475da46e66ac",role:"banner"},t("div",{key:"4c17ab40581251748f4bfbdceb8553d736b9288b",class:"brand",part:"brand"},t("slot",{key:"2e4a11be914770ce6cf3b2e2a4cf7e92fbd95702",name:"logo"},t("span",{key:"ff2a98d37c5153a9169b188a2e77d24f49a505e5",class:"brand-logo","aria-hidden":"true"},"⬢")),t("div",{key:"a679a938ab050aa8e2c326a88e905563134fbbc5",class:"brand-text"},t("span",{key:"19b941fba9c4d7dbbda39242f3c6afb543c5ef6a",class:"brand-name"},this.brand),this.subBrand&&t("span",{key:"d77217db67b0384df179638cbf98ae38697a7071",class:"brand-sub"},this.subBrand))),this.machineId&&t("div",{key:"1e40da6c490185efe7423b1b82d5a5e56cd4cb9a",class:"machine",part:"machine"},t("span",{key:"5ca76acc4d270e8f6adc12d0077f1371e136aded",class:"machine-label"},"Machine"),t("span",{key:"a10840b72441bb7adabd0f152332bfa9e081eff5",class:"machine-id"},this.machineId)),t("div",{key:"5cfbdeb0e191cdbfa679fd0a1e205c4544065b10",class:"mqtt",part:"mqtt"},t("ind-status-dot",{key:"b80758c2a80a27b362651cd1251c92d3b510212e",state:this.mqttState,size:"md"}),this.mqttLabel&&t("span",{key:"a443524b51f9950e068bc815bc4e89f52bc9c296",class:"mqtt-label"},this.mqttLabel)),t("span",{key:"84028540ba07e5f4b400e9694a2c102c0ffcb618",class:"spacer"}),t("div",{key:"42e07d1726547c318367423708e9fd7078a771ed",class:"meta",part:"meta"},this.version&&t("span",{key:"9fc02e0f44f50126554fa70e127bf5e1819b09ee",class:"version"},this.version),this.docsUrl&&t("a",{key:"3839f6149b334591551124f4bb5eb296d0f4a296",class:"docs",href:this.docsUrl,target:"_blank",rel:"noopener noreferrer"},"Documentation")),t("div",{key:"4265851f62d3f66518a9e07b32933974a301376b",class:"actions",part:"actions"},t("slot",{key:"dffb5909cf929b3c04e47d598e746a6caf8d55f5",name:"actions"},!this.hideChangeMachine&&t("button",{key:"824c0c0b5419753e50d8ba002dee057ba2ec2b46",type:"button",class:"action",onClick:()=>this.indChangeMachine.emit()},"Change machine"),!this.hideDisconnect&&t("button",{key:"5269a1bed2754ca7f7bfd83f0f431cae2d4c1bf5",type:"button",class:"action action--danger",onClick:()=>this.indDisconnect.emit()},"Disconnect"))))}static get style(){return r()}},[769,"ind-app-header",{brand:[1],subBrand:[1,"sub-brand"],machineId:[1,"machine-id"],mqttState:[1,"mqtt-state"],mqttLabel:[1,"mqtt-label"],version:[1],docsUrl:[1,"docs-url"],hideChangeMachine:[4,"hide-change-machine"],hideDisconnect:[4,"hide-disconnect"]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ind-app-header","ind-status-dot"];e.forEach((e=>{switch(e){case"ind-app-header":if(!customElements.get(d(e))){customElements.define(d(e),c)}break;case"ind-status-dot":if(!customElements.get(d(e))){s()}break}}))}o();const f=c;const b=o;export{f as IndAppHeader,b as defineCustomElement};
+//# sourceMappingURL=ind-app-header.js.map

package/dist/components/ind-app-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["appHeaderCss","IndAppHeader","__stencil_proxyCustomElement","HTMLElement","brand","subBrand","machineId","mqttState","mqttLabel","version","docsUrl","hideChangeMachine","hideDisconnect","indChangeMachine","indDisconnect","render","h","Host","key","role","class","part","name","this","state","size","href","target","rel","type","onClick","emit"],"sources":["src/components/organisms/app-header/app-header.css?tag=ind-app-header&encapsulation=shadow","src/components/organisms/app-header/app-header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-6, 16px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-6, 16px);\n  background: var(--ind-surface-panel);\n  border-bottom: 1px solid var(--ind-surface-border-default);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-family: var(--ind-font-family-sans);\n  min-height: 56px;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.brand {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.brand-logo {\n  font-size: 26px;\n  line-height: 1;\n  color: var(--ind-button-primary-bg);\n}\n\n.brand-text {\n  display: flex;\n  flex-direction: column;\n  line-height: 1.1;\n}\n\n.brand-name {\n  font-size: var(--ind-font-size-lg, 14px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n\n.brand-sub {\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n\n.machine {\n  display: flex;\n  flex-direction: column;\n  line-height: 1.1;\n  padding-left: var(--ind-spacing-5, 12px);\n  border-left: 1px solid var(--ind-surface-border-subtle);\n}\n\n.machine-label {\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n\n.machine-id {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.mqtt {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.mqtt-label {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.spacer { flex: 1; }\n\n.meta {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.version {\n  font-family: var(--ind-font-family-mono);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.docs {\n  color: var(--ind-feedback-info-bg);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.docs:hover { text-decoration-thickness: 2px; }\n\n.actions {\n  display: flex;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.action {\n  height: var(--ind-size-button-sm, 26px);\n  padding: 0 var(--ind-spacing-4, 8px);\n  background: var(--ind-button-default-bg);\n  color: var(--ind-button-default-fg);\n  border: 1px solid var(--ind-button-default-border);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: inherit;\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  cursor: pointer;\n  transition: background var(--ind-motion-duration-fast, 120ms);\n}\n.action:hover { background: var(--ind-button-default-bg-hover); }\n\n.action--danger {\n  background: transparent;\n  color: var(--ind-feedback-error-bg);\n  border-color: var(--ind-feedback-error-border);\n}\n.action--danger:hover {\n  background: var(--ind-feedback-error-bg);\n  color: var(--ind-feedback-error-fg);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type AppHeaderConnectionState =\n  | 'running' | 'fault' | 'warning' | 'maintenance' | 'stopped' | 'neutral';\n\n@Component({\n  tag: 'ind-app-header',\n  styleUrl: 'app-header.css',\n  shadow: true,\n})\nexport class IndAppHeader {\n  /** Brand name (uppercase by convention). */\n  @Prop() brand!: string;\n  /** Sub-brand line (e.g. \"Maintenance Console\"). */\n  @Prop() subBrand?: string;\n  /** Machine identifier shown next to the brand. */\n  @Prop() machineId?: string;\n  /** Broker / realtime connection state — drives the dot. */\n  @Prop() mqttState: AppHeaderConnectionState = 'neutral';\n  /** Label rendered next to the dot (e.g. \"Connected\"). */\n  @Prop() mqttLabel?: string;\n  /** App version (e.g. \"v1.4.2\"). */\n  @Prop() version?: string;\n  /** Documentation URL. */\n  @Prop() docsUrl?: string;\n  /** Hide the built-in \"Change machine\" button. */\n  @Prop() hideChangeMachine: boolean = false;\n  /** Hide the built-in \"Disconnect\" button. */\n  @Prop() hideDisconnect: boolean = false;\n\n  @Event() indChangeMachine!: EventEmitter<void>;\n  @Event() indDisconnect!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host role=\"banner\">\n        <div class=\"brand\" part=\"brand\">\n          <slot name=\"logo\">\n            <span class=\"brand-logo\" aria-hidden=\"true\">⬢</span>\n          </slot>\n          <div class=\"brand-text\">\n            <span class=\"brand-name\">{this.brand}</span>\n            {this.subBrand && <span class=\"brand-sub\">{this.subBrand}</span>}\n          </div>\n        </div>\n\n        {this.machineId && (\n          <div class=\"machine\" part=\"machine\">\n            <span class=\"machine-label\">Machine</span>\n            <span class=\"machine-id\">{this.machineId}</span>\n          </div>\n        )}\n\n        <div class=\"mqtt\" part=\"mqtt\">\n          <ind-status-dot state={this.mqttState} size=\"md\" />\n          {this.mqttLabel && <span class=\"mqtt-label\">{this.mqttLabel}</span>}\n        </div>\n\n        <span class=\"spacer\" />\n\n        <div class=\"meta\" part=\"meta\">\n          {this.version && <span class=\"version\">{this.version}</span>}\n          {this.docsUrl && (\n            <a class=\"docs\" href={this.docsUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n              Documentation\n            </a>\n          )}\n        </div>\n\n        <div class=\"actions\" part=\"actions\">\n          <slot name=\"actions\">\n            {!this.hideChangeMachine && (\n              <button\n                type=\"button\"\n                class=\"action\"\n                onClick={() => this.indChangeMachine.emit()}\n              >Change machine</button>\n            )}\n            {!this.hideDisconnect && (\n              <button\n                type=\"button\"\n                class=\"action action--danger\"\n                onClick={() => this.indDisconnect.emit()}\n              >Disconnect</button>\n            )}\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAe,IAAM,+pF,MCUdC,EAAYC,EAAA,MAAAD,UAAAE,E,6KAEfC,MAEAC,SAEAC,UAEAC,UAAsC,UAEtCC,UAEAC,QAEAC,QAEAC,kBAA6B,MAE7BC,eAA0B,MAEzBC,iBACAC,cAET,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,UACTH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,QAAQC,KAAK,SACtBL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,QACTN,EAAA,QAAAE,IAAA,2CAAME,MAAM,aAAY,cAAa,QAAM,MAE7CJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,cAAcG,KAAKnB,OAC9BmB,KAAKlB,UAAYW,EAAA,QAAAE,IAAA,2CAAME,MAAM,aAAaG,KAAKlB,YAInDkB,KAAKjB,WACJU,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UAAUC,KAAK,WACxBL,EAAA,QAAAE,IAAA,2CAAME,MAAM,iBAAe,WAC3BJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,cAAcG,KAAKjB,YAInCU,EAAA,OAAAE,IAAA,2CAAKE,MAAM,OAAOC,KAAK,QACrBL,EAAA,kBAAAE,IAAA,2CAAgBM,MAAOD,KAAKhB,UAAWkB,KAAK,OAC3CF,KAAKf,WAAaQ,EAAA,QAAAE,IAAA,2CAAME,MAAM,cAAcG,KAAKf,YAGpDQ,EAAA,QAAAE,IAAA,2CAAME,MAAM,WAEZJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,OAAOC,KAAK,QACpBE,KAAKd,SAAWO,EAAA,QAAAE,IAAA,2CAAME,MAAM,WAAWG,KAAKd,SAC5Cc,KAAKb,SACJM,EAAA,KAAAE,IAAA,2CAAGE,MAAM,OAAOM,KAAMH,KAAKb,QAASiB,OAAO,SAASC,IAAI,uBAAqB,kBAMjFZ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UAAUC,KAAK,WACxBL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YACPC,KAAKZ,mBACLK,EAAA,UAAAE,IAAA,2CACEW,KAAK,SACLT,MAAM,SACNU,QAAS,IAAMP,KAAKV,iBAAiBkB,QAAM,mBAG7CR,KAAKX,gBACLI,EAAA,UAAAE,IAAA,2CACEW,KAAK,SACLT,MAAM,wBACNU,QAAS,IAAMP,KAAKT,cAAciB,QAAM,gB","ignoreList":[]}

package/dist/components/ind-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndButton extends Components.IndButton, HTMLElement {}
+export const IndButton: {
+    prototype: IndButton;
+    new (): IndButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-button.js

@@ -0,0 +1,2 @@
+import{p as t,H as n,c as i,h as e,a,t as r}from"./index.js";const o=()=>`:host{display:inline-block;font-family:var(--ind-font-family-sans)}.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-6, 16px);font-family:inherit;font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1;letter-spacing:0.01em;background:var(--_bg, var(--ind-button-default-bg, #1a2129));color:var(--_fg, var(--ind-button-default-fg, #eef1f5));border:1px solid var(--_border, var(--ind-button-default-border, #3d4856));border-radius:var(--ind-radius-md, 3px);cursor:pointer;user-select:none;touch-action:manipulation;transition:background-color var(--ind-motion-duration-fast, 120ms),     border-color var(--ind-motion-duration-fast, 120ms)}.btn:hover:not(:disabled){background:var(--_bg-hover, var(--ind-button-default-bg-hover, #2a3340))}.btn:active:not(:disabled),.btn.is-holding:not(:disabled){background:var(--_bg-active, var(--ind-button-default-bg-active, #3d4856))}.btn:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:2px}.btn:disabled{opacity:0.5;cursor:not-allowed}:host([variant="primary"]) .btn{--_bg:var(--ind-button-primary-bg, #2563eb);--_bg-hover:var(--ind-button-primary-bg-hover, #60a5fa);--_bg-active:var(--ind-button-primary-bg-active, #60a5fa);--_fg:var(--ind-button-primary-fg, #ffffff);--_border:var(--ind-button-primary-border, #60a5fa)}:host([variant="danger"]) .btn{--_bg:var(--ind-button-danger-bg, #dc2626);--_bg-hover:var(--ind-button-danger-bg-hover, #f87171);--_bg-active:var(--ind-button-danger-bg-active, #f87171);--_fg:var(--ind-button-danger-fg, #ffffff);--_border:var(--ind-button-danger-border, #f87171)}:host([variant="ghost"]) .btn{--_bg:transparent;--_bg-hover:var(--ind-button-ghost-bg-hover, #1a2129);--_bg-active:var(--ind-button-ghost-bg-active, #2a3340)}:host([size="sm"]) .btn{font-size:var(--ind-font-size-sm, 11px);padding:var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px)}:host([size="lg"]) .btn{font-size:var(--ind-font-size-lg, 14px);padding:var(--ind-spacing-5, 12px) var(--ind-spacing-7, 20px)}.content{position:relative;z-index:1}.hold-progress{position:absolute;inset:0;background:currentColor;opacity:0.18;transform-origin:left center;transform:scaleX(0);transition:transform 60ms linear;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;const s=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.indActivate=i(this,"indActivate")}variant="default";size="md";disabled=false;label;holdToConfirmMs=0;indActivate;progress=0;holdStart=0;rafHandle=null;startHold=t=>{if(this.disabled)return;t.preventDefault();if(this.holdToConfirmMs<=0){this.indActivate.emit();return}this.holdStart=performance.now();this.progress=0;this.tick()};tick=()=>{const t=performance.now()-this.holdStart;this.progress=Math.min(1,t/this.holdToConfirmMs);if(this.progress>=1){this.cancelHold();this.indActivate.emit();return}this.rafHandle=requestAnimationFrame(this.tick)};cancelHold=()=>{if(this.rafHandle!==null){cancelAnimationFrame(this.rafHandle);this.rafHandle=null}this.progress=0};onKeyDown=t=>{if(t.key===" "||t.key==="Enter"){t.preventDefault();this.startHold(t)}};disconnectedCallback(){this.cancelHold()}render(){const t=this.progress>0&&this.progress<1;return e(a,{key:"bbafede18f13eac5486d9cae0c2bd727375e7762"},e("button",{key:"82bf34d3c9943e33edd5c8863be6457d3c201ece",type:"button",class:{btn:true,"is-holding":t},part:"btn",disabled:this.disabled,"aria-label":this.label,"aria-describedby":this.holdToConfirmMs>0?"hold-hint":undefined,onPointerDown:this.startHold,onPointerUp:this.cancelHold,onPointerLeave:this.cancelHold,onPointerCancel:this.cancelHold,onKeyDown:this.onKeyDown,onKeyUp:this.cancelHold},e("span",{key:"75252fda5e1229f6c335df277b0c09a18d0b621d",class:"content",part:"content"},e("slot",{key:"f9a158deadf76da0cf1e13680c1b1dd444273387"},this.label)),this.holdToConfirmMs>0&&e("span",{key:"7ba778902c08b3d8fe6b1c6a963c4ab645369110",class:"hold-progress",part:"hold-progress",style:{transform:`scaleX(${this.progress})`},"aria-hidden":"true"})),this.holdToConfirmMs>0&&e("span",{key:"9c2f72de9486bfed4855c5dc81dbf54161c97842",id:"hold-hint",class:"sr-only"},"Hold to confirm (",this.holdToConfirmMs," ms)"))}static get style(){return o()}},[769,"ind-button",{variant:[513],size:[513],disabled:[516],label:[1],holdToConfirmMs:[2,"hold-to-confirm-ms"],progress:[32]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ind-button"];t.forEach((t=>{switch(t){case"ind-button":if(!customElements.get(r(t))){customElements.define(r(t),s)}break}}))}d();const b=s;const c=d;export{b as IndButton,c as defineCustomElement};
+//# sourceMappingURL=ind-button.js.map

package/dist/components/ind-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","IndButton","__stencil_proxyCustomElement","HTMLElement","variant","size","disabled","label","holdToConfirmMs","indActivate","progress","holdStart","rafHandle","startHold","e","this","preventDefault","emit","performance","now","tick","elapsed","Math","min","cancelHold","requestAnimationFrame","cancelAnimationFrame","onKeyDown","key","disconnectedCallback","render","isHolding","h","Host","type","class","btn","part","undefined","onPointerDown","onPointerUp","onPointerLeave","onPointerCancel","onKeyUp","style","transform","id"],"sources":["src/components/atoms/button/button.css?tag=ind-button&encapsulation=shadow","src/components/atoms/button/button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(--ind-font-family-sans);\n}\n\n.btn {\n  position: relative;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-6, 16px);\n\n  font-family: inherit;\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1;\n  letter-spacing: 0.01em;\n\n  background: var(--_bg, var(--ind-button-default-bg, #1a2129));\n  color: var(--_fg, var(--ind-button-default-fg, #eef1f5));\n  border: 1px solid var(--_border, var(--ind-button-default-border, #3d4856));\n  border-radius: var(--ind-radius-md, 3px);\n\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n  transition:\n    background-color var(--ind-motion-duration-fast, 120ms),\n    border-color var(--ind-motion-duration-fast, 120ms);\n}\n\n.btn:hover:not(:disabled) {\n  background: var(--_bg-hover, var(--ind-button-default-bg-hover, #2a3340));\n}\n\n.btn:active:not(:disabled),\n.btn.is-holding:not(:disabled) {\n  background: var(--_bg-active, var(--ind-button-default-bg-active, #3d4856));\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([variant=\"primary\"]) .btn {\n  --_bg:        var(--ind-button-primary-bg, #2563eb);\n  --_bg-hover:  var(--ind-button-primary-bg-hover, #60a5fa);\n  --_bg-active: var(--ind-button-primary-bg-active, #60a5fa);\n  --_fg:        var(--ind-button-primary-fg, #ffffff);\n  --_border:    var(--ind-button-primary-border, #60a5fa);\n}\n\n:host([variant=\"danger\"]) .btn {\n  --_bg:        var(--ind-button-danger-bg, #dc2626);\n  --_bg-hover:  var(--ind-button-danger-bg-hover, #f87171);\n  --_bg-active: var(--ind-button-danger-bg-active, #f87171);\n  --_fg:        var(--ind-button-danger-fg, #ffffff);\n  --_border:    var(--ind-button-danger-border, #f87171);\n}\n\n:host([variant=\"ghost\"]) .btn {\n  --_bg:        transparent;\n  --_bg-hover:  var(--ind-button-ghost-bg-hover, #1a2129);\n  --_bg-active: var(--ind-button-ghost-bg-active, #2a3340);\n}\n\n:host([size=\"sm\"]) .btn {\n  font-size: var(--ind-font-size-sm, 11px);\n  padding: var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);\n}\n:host([size=\"lg\"]) .btn {\n  font-size: var(--ind-font-size-lg, 14px);\n  padding: var(--ind-spacing-5, 12px) var(--ind-spacing-7, 20px);\n}\n\n.content {\n  position: relative;\n  z-index: 1;\n}\n\n.hold-progress {\n  position: absolute;\n  inset: 0;\n  background: currentColor;\n  opacity: 0.18;\n  transform-origin: left center;\n  transform: scaleX(0);\n  transition: transform 60ms linear;\n  pointer-events: none;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type ButtonVariant = 'default' | 'primary' | 'danger' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class IndButton {\n  /** Visual variant. `danger` should be paired with `holdToConfirmMs` for critical actions. */\n  @Prop({ reflect: true }) variant: ButtonVariant = 'default';\n\n  /** Size. */\n  @Prop({ reflect: true }) size: ButtonSize = 'md';\n\n  /** Disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Optional accessible label (falls back to slotted text). */\n  @Prop() label?: string;\n\n  /**\n   * If > 0, the button must be held this many milliseconds before activating.\n   * Use for critical actions (Stop, Trip, Reset) to prevent accidental clicks —\n   * standard NAMUR / safety-instrumented operating practice.\n   */\n  @Prop() holdToConfirmMs: number = 0;\n\n  /** Fired on click (or after hold completes if `holdToConfirmMs > 0`). */\n  @Event() indActivate!: EventEmitter<void>;\n\n  @State() private progress: number = 0;\n\n  private holdStart = 0;\n  private rafHandle: number | null = null;\n\n  private startHold = (e: Event) => {\n    if (this.disabled) return;\n    e.preventDefault();\n    if (this.holdToConfirmMs <= 0) {\n      this.indActivate.emit();\n      return;\n    }\n    this.holdStart = performance.now();\n    this.progress = 0;\n    this.tick();\n  };\n\n  private tick = () => {\n    const elapsed = performance.now() - this.holdStart;\n    this.progress = Math.min(1, elapsed / this.holdToConfirmMs);\n    if (this.progress >= 1) {\n      this.cancelHold();\n      this.indActivate.emit();\n      return;\n    }\n    this.rafHandle = requestAnimationFrame(this.tick);\n  };\n\n  private cancelHold = () => {\n    if (this.rafHandle !== null) {\n      cancelAnimationFrame(this.rafHandle);\n      this.rafHandle = null;\n    }\n    this.progress = 0;\n  };\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.startHold(e);\n    }\n  };\n\n  disconnectedCallback() {\n    this.cancelHold();\n  }\n\n  render() {\n    const isHolding = this.progress > 0 && this.progress < 1;\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={{ btn: true, 'is-holding': isHolding }}\n          part=\"btn\"\n          disabled={this.disabled}\n          aria-label={this.label}\n          aria-describedby={this.holdToConfirmMs > 0 ? 'hold-hint' : undefined}\n          onPointerDown={this.startHold}\n          onPointerUp={this.cancelHold}\n          onPointerLeave={this.cancelHold}\n          onPointerCancel={this.cancelHold}\n          onKeyDown={this.onKeyDown}\n          onKeyUp={this.cancelHold}\n        >\n          <span class=\"content\" part=\"content\">\n            <slot>{this.label}</slot>\n          </span>\n          {this.holdToConfirmMs > 0 && (\n            <span\n              class=\"hold-progress\"\n              part=\"hold-progress\"\n              style={{ transform: `scaleX(${this.progress})` }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </button>\n        {this.holdToConfirmMs > 0 && (\n          <span id=\"hold-hint\" class=\"sr-only\">\n            Hold to confirm ({this.holdToConfirmMs} ms)\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAY,IAAM,y9E,MCkBXC,EAASC,EAAA,MAAAD,UAAAE,E,wHAEKC,QAAyB,UAGzBC,KAAmB,KAGnBC,SAAoB,MAGrCC,MAOAC,gBAA0B,EAGzBC,YAEQC,SAAmB,EAE5BC,UAAY,EACZC,UAA2B,KAE3BC,UAAaC,IACnB,GAAIC,KAAKT,SAAU,OACnBQ,EAAEE,iBACF,GAAID,KAAKP,iBAAmB,EAAG,CAC7BO,KAAKN,YAAYQ,OACjB,M,CAEFF,KAAKJ,UAAYO,YAAYC,MAC7BJ,KAAKL,SAAW,EAChBK,KAAKK,MAAM,EAGLA,KAAO,KACb,MAAMC,EAAUH,YAAYC,MAAQJ,KAAKJ,UACzCI,KAAKL,SAAWY,KAAKC,IAAI,EAAGF,EAAUN,KAAKP,iBAC3C,GAAIO,KAAKL,UAAY,EAAG,CACtBK,KAAKS,aACLT,KAAKN,YAAYQ,OACjB,M,CAEFF,KAAKH,UAAYa,sBAAsBV,KAAKK,KAAK,EAG3CI,WAAa,KACnB,GAAIT,KAAKH,YAAc,KAAM,CAC3Bc,qBAAqBX,KAAKH,WAC1BG,KAAKH,UAAY,I,CAEnBG,KAAKL,SAAW,CAAC,EAGXiB,UAAab,IACnB,GAAIA,EAAEc,MAAQ,KAAOd,EAAEc,MAAQ,QAAS,CACtCd,EAAEE,iBACFD,KAAKF,UAAUC,E,GAInB,oBAAAe,GACEd,KAAKS,Y,CAGP,MAAAM,GACE,MAAMC,EAAYhB,KAAKL,SAAW,GAAKK,KAAKL,SAAW,EACvD,OACEsB,EAACC,EAAI,CAAAL,IAAA,4CACHI,EAAA,UAAAJ,IAAA,2CACEM,KAAK,SACLC,MAAO,CAAEC,IAAK,KAAM,aAAcL,GAClCM,KAAK,MACL/B,SAAUS,KAAKT,SAAQ,aACXS,KAAKR,MAAK,mBACJQ,KAAKP,gBAAkB,EAAI,YAAc8B,UAC3DC,cAAexB,KAAKF,UACpB2B,YAAazB,KAAKS,WAClBiB,eAAgB1B,KAAKS,WACrBkB,gBAAiB3B,KAAKS,WACtBG,UAAWZ,KAAKY,UAChBgB,QAAS5B,KAAKS,YAEdQ,EAAA,QAAAJ,IAAA,2CAAMO,MAAM,UAAUE,KAAK,WACzBL,EAAA,QAAAJ,IAAA,4CAAOb,KAAKR,QAEbQ,KAAKP,gBAAkB,GACtBwB,EAAA,QAAAJ,IAAA,2CACEO,MAAM,gBACNE,KAAK,gBACLO,MAAO,CAAEC,UAAW,UAAU9B,KAAKL,aAAa,cACpC,UAIjBK,KAAKP,gBAAkB,GACtBwB,EAAA,QAAAJ,IAAA,2CAAMkB,GAAG,YAAYX,MAAM,WAAS,oBAChBpB,KAAKP,gBAAe,Q","ignoreList":[]}

package/dist/components/ind-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndCheckbox extends Components.IndCheckbox, HTMLElement {}
+export const IndCheckbox: {
+    prototype: IndCheckbox;
+    new (): IndCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-checkbox.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,c as t,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{display:inline-flex;font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_size:16px}:host([size="sm"]){--_size:12px}:host([size="md"]){--_size:16px}:host([size="lg"]){--_size:20px}.wrap{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);cursor:pointer;user-select:none}.box{position:relative;display:inline-block;width:var(--_size);height:var(--_size);flex-shrink:0}.native{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.mark{position:relative;display:block;width:100%;height:100%;background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-sm, 2px);transition:background var(--ind-motion-duration-fast, 120ms),     border-color var(--ind-motion-duration-fast, 120ms)}.mark::after{content:"";position:absolute;inset:0;display:block;background-position:center;background-repeat:no-repeat;background-size:70%;opacity:0;transition:opacity var(--ind-motion-duration-fast, 120ms)}:host([checked]) .mark,:host([indeterminate]) .mark{background:var(--ind-button-primary-bg, #2563eb);border-color:var(--ind-button-primary-border, #60a5fa)}:host([checked]) .mark::after{opacity:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/></svg>")}:host([indeterminate]) .mark::after{opacity:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M3 8h10'/></svg>")}.native:focus-visible+.mark{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:2px}:host([disabled]){opacity:0.5}:host([disabled]) .wrap{cursor:not-allowed}.label{line-height:1.2}`;const o=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.indChange=t(this,"indChange")}get host(){return this}checked=false;indeterminate=false;disabled=false;size="md";label;name;value;indChange;componentDidLoad(){this.syncIndeterminate()}syncIndeterminate(){const e=this.host.shadowRoot?.querySelector("input");if(e)e.indeterminate=this.indeterminate}onChange=e=>{const a=e.target.checked;this.checked=a;this.indChange.emit(a)};render(){const e=this.indeterminate?"mixed":this.checked?"true":"false";return i(s,{key:"d4b48a80703ea584c4db306d26fcaebd990f9d87"},i("label",{key:"d101498325e34b2d4ce87189aaf82930f81fd831",class:"wrap",part:"wrap"},i("span",{key:"8363b37e0c6a9a082dbab4e0bb26b09506cb4b00",class:"box",part:"box"},i("input",{key:"2c2a0d2e10c70a97aa2c983941f14bd3c6bc30dd",type:"checkbox",class:"native",part:"native",checked:this.checked,disabled:this.disabled,name:this.name,value:this.value,"aria-checked":e,onChange:this.onChange}),i("span",{key:"41f5ba40d9c2e27e899366e9de111d3aa4a3817c",class:"mark",part:"mark","aria-hidden":"true"})),this.label&&i("span",{key:"c9955a662691ac94a2be379edc332f550f09b53e",class:"label",part:"label"},this.label)))}static get watchers(){return{indeterminate:[{syncIndeterminate:0}]}}static get style(){return r()}},[513,"ind-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],size:[513],label:[1],name:[1],value:[1]},undefined,{indeterminate:[{syncIndeterminate:0}]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ind-checkbox"];e.forEach((e=>{switch(e){case"ind-checkbox":if(!customElements.get(n(e))){customElements.define(n(e),o)}break}}))}d();const c=o;const l=d;export{c as IndCheckbox,l as defineCustomElement};
+//# sourceMappingURL=ind-checkbox.js.map

package/dist/components/ind-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","IndCheckbox","__stencil_proxyCustomElement","HTMLElement","checked","indeterminate","disabled","size","label","name","value","indChange","componentDidLoad","this","syncIndeterminate","input","host","shadowRoot","querySelector","onChange","e","next","target","emit","render","ariaChecked","h","Host","key","class","part","type"],"sources":["src/components/atoms/checkbox/checkbox.css?tag=ind-checkbox&encapsulation=shadow","src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-base, 12px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_size: 16px;\n}\n\n:host([size=\"sm\"]) { --_size: 12px; }\n:host([size=\"md\"]) { --_size: 16px; }\n:host([size=\"lg\"]) { --_size: 20px; }\n\n.wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  cursor: pointer;\n  user-select: none;\n}\n\n.box {\n  position: relative;\n  display: inline-block;\n  width: var(--_size);\n  height: var(--_size);\n  flex-shrink: 0;\n}\n\n.native {\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.mark {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-sm, 2px);\n  transition:\n    background var(--ind-motion-duration-fast, 120ms),\n    border-color var(--ind-motion-duration-fast, 120ms);\n}\n\n.mark::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  display: block;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 70%;\n  opacity: 0;\n  transition: opacity var(--ind-motion-duration-fast, 120ms);\n}\n\n:host([checked]) .mark,\n:host([indeterminate]) .mark {\n  background: var(--ind-button-primary-bg, #2563eb);\n  border-color: var(--ind-button-primary-border, #60a5fa);\n}\n\n:host([checked]) .mark::after {\n  opacity: 1;\n  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/></svg>\");\n}\n\n:host([indeterminate]) .mark::after {\n  opacity: 1;\n  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M3 8h10'/></svg>\");\n}\n\n.native:focus-visible + .mark {\n  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);\n  outline-offset: 2px;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n}\n\n.label {\n  line-height: 1.2;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class IndCheckbox {\n  @Element() host!: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) size: CheckboxSize = 'md';\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop() value?: string;\n\n  @Event() indChange!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.syncIndeterminate();\n  }\n\n  @Watch('indeterminate')\n  syncIndeterminate() {\n    const input = this.host.shadowRoot?.querySelector('input');\n    if (input) input.indeterminate = this.indeterminate;\n  }\n\n  private onChange = (e: Event) => {\n    const next = (e.target as HTMLInputElement).checked;\n    this.checked = next;\n    this.indChange.emit(next);\n  };\n\n  render() {\n    const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          <span class=\"box\" part=\"box\">\n            <input\n              type=\"checkbox\"\n              class=\"native\"\n              part=\"native\"\n              checked={this.checked}\n              disabled={this.disabled}\n              name={this.name}\n              value={this.value}\n              aria-checked={ariaChecked}\n              onChange={this.onChange}\n            />\n            <span class=\"mark\" part=\"mark\" aria-hidden=\"true\" />\n          </span>\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAc,IAAM,68D,MCkBbC,EAAWC,EAAA,MAAAD,UAAAE,E,2IAGkBC,QAAmB,MAClCC,cAAyB,MACzBC,SAAoB,MACpBC,KAAqB,KACtCC,MACAC,KACAC,MAECC,UAET,gBAAAC,GACEC,KAAKC,mB,CAIP,iBAAAA,GACE,MAAMC,EAAQF,KAAKG,KAAKC,YAAYC,cAAc,SAClD,GAAIH,EAAOA,EAAMV,cAAgBQ,KAAKR,a,CAGhCc,SAAYC,IAClB,MAAMC,EAAQD,EAAEE,OAA4BlB,QAC5CS,KAAKT,QAAUiB,EACfR,KAAKF,UAAUY,KAAKF,EAAK,EAG3B,MAAAG,GACE,MAAMC,EAAcZ,KAAKR,cAAgB,QAAUQ,KAAKT,QAAU,OAAS,QAC3E,OACEsB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CAAOC,MAAM,OAAOC,KAAK,QACvBJ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,MAAMC,KAAK,OACrBJ,EAAA,SAAAE,IAAA,2CACEG,KAAK,WACLF,MAAM,SACNC,KAAK,SACL1B,QAASS,KAAKT,QACdE,SAAUO,KAAKP,SACfG,KAAMI,KAAKJ,KACXC,MAAOG,KAAKH,MAAK,eACHe,EACdN,SAAUN,KAAKM,WAEjBO,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOC,KAAK,OAAM,cAAa,UAE5CjB,KAAKL,OAASkB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SAASjB,KAAKL,Q","ignoreList":[]}

package/dist/components/ind-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndDialog extends Components.IndDialog, HTMLElement {}
+export const IndDialog: {
+    prototype: IndDialog;
+    new (): IndDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-dialog.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as a,h as i,a as n,t as s}from"./index.js";const o=()=>`:host{display:contents}.dialog{padding:0;border:none;background:transparent;color:inherit;max-width:90vw;max-height:90vh;overflow:visible}.dialog::backdrop{background:rgba(0, 0, 0, 0.55);backdrop-filter:blur(2px)}.content{display:flex;flex-direction:column;background:var(--ind-surface-raised, light-dark(#ffffff, #1a2129));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);max-height:90vh;overflow:hidden}:host([size="sm"]) .content{width:320px}:host([size="md"]) .content{width:480px}:host([size="lg"]) .content{width:720px}.header{display:flex;align-items:center;justify-content:space-between;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px) var(--ind-spacing-6, 16px);border-bottom:1px solid var(--ind-surface-border-subtle)}.heading{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-semibold, 600);margin:0}.close{background:transparent;border:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:var(--ind-radius-sm, 2px)}.close:hover{background:var(--ind-surface-panel)}.close:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:2px}.body{flex:1;overflow:auto;padding:var(--ind-spacing-6, 16px);line-height:var(--ind-font-line-height-normal, 1.4)}.footer{display:flex;justify-content:flex-end;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-6, 16px);border-top:1px solid var(--ind-surface-border-subtle)}.footer.is-empty{display:none}`;const r=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.indOpen=a(this,"indOpen");this.indClose=a(this,"indClose")}get host(){return this}open=false;heading;size="md";closeOnBackdrop=true;hasFooter=false;indOpen;indClose;componentDidLoad(){this.syncOpen();this.watchFooter()}onOpenChange(){this.syncOpen()}syncOpen(){const e=this.host.shadowRoot?.querySelector("dialog");if(!e)return;if(this.open&&!e.open){e.showModal();this.indOpen.emit()}else if(!this.open&&e.open){e.close()}}watchFooter(){const e=this.host.shadowRoot?.querySelector('slot[name="footer"]');if(!e)return;const t=()=>{this.hasFooter=e.assignedNodes({flatten:true}).some((e=>{if(e.nodeType===Node.ELEMENT_NODE)return true;return e.nodeType===Node.TEXT_NODE&&(e.textContent??"").trim().length>0}))};t();e.addEventListener("slotchange",t)}async show(){this.open=true}async close(){this.open=false}onNativeClose=()=>{if(this.open){this.open=false;this.indClose.emit()}};onClick=e=>{if(!this.closeOnBackdrop)return;const t=e.currentTarget;if(e.target!==t)return;const a=t.getBoundingClientRect();const i=e.clientX>=a.left&&e.clientX<=a.right&&e.clientY>=a.top&&e.clientY<=a.bottom;if(!i)this.close()};render(){return i(n,{key:"2fc6c8608a86b696f04a42989f9fa89e90c815ca"},i("dialog",{key:"2ace88391803eeacc9ab918906db7ff01f96af05",class:"dialog",part:"dialog","aria-label":this.heading,onClose:this.onNativeClose,onClick:this.onClick},i("div",{key:"01d6bcd48e243524bf657559407e58ec70995752",class:"content",part:"content"},this.heading&&i("header",{key:"930017b49c0ea7056eb5ec71efd30090bf5d2ef1",class:"header",part:"header"},i("h2",{key:"be329505ab6c8d2ae4b94ea399c1426c9bb2ca23",class:"heading",part:"heading"},this.heading),i("button",{key:"6943d296514bb4035bc44f292fd9a3be42b96bd7",type:"button",class:"close",part:"close","aria-label":"Close",onClick:()=>this.close()},"×")),i("div",{key:"79277205e3a87957a9f4885a80ff2d88ff250615",class:"body",part:"body"},i("slot",{key:"c1bf7607910c5d5dff0bdaa14f9285be09aecbce"})),i("footer",{key:"102f2ea37b063d77f4874c619e134abad87161c9",class:{footer:true,"is-empty":!this.hasFooter},part:"footer"},i("slot",{key:"d6068ca633c113c5a9bf6bd87e793a96928ae95e",name:"footer"})))))}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return o()}},[769,"ind-dialog",{open:[1540],heading:[1],size:[513],closeOnBackdrop:[4,"close-on-backdrop"],hasFooter:[32],show:[64],close:[64]},undefined,{open:[{onOpenChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ind-dialog"];e.forEach((e=>{switch(e){case"ind-dialog":if(!customElements.get(s(e))){customElements.define(s(e),r)}break}}))}d();const c=r;const f=d;export{c as IndDialog,f as defineCustomElement};
+//# sourceMappingURL=ind-dialog.js.map

package/dist/components/ind-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dialogCss","IndDialog","__stencil_proxyCustomElement","HTMLElement","open","heading","size","closeOnBackdrop","hasFooter","indOpen","indClose","componentDidLoad","this","syncOpen","watchFooter","onOpenChange","dlg","host","shadowRoot","querySelector","showModal","emit","close","slot","update","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","length","addEventListener","show","onNativeClose","onClick","e","currentTarget","target","r","getBoundingClientRect","inside","clientX","left","right","clientY","top","bottom","render","h","Host","key","class","part","onClose","type","footer","name"],"sources":["src/components/atoms/dialog/dialog.css?tag=ind-dialog&encapsulation=shadow","src/components/atoms/dialog/dialog.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.dialog {\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  max-width: 90vw;\n  max-height: 90vh;\n  overflow: visible;\n}\n\n.dialog::backdrop {\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(2px);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-raised, light-dark(#ffffff, #1a2129));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-md, 3px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-base, 12px);\n  max-height: 90vh;\n  overflow: hidden;\n}\n\n:host([size=\"sm\"]) .content { width: 320px; }\n:host([size=\"md\"]) .content { width: 480px; }\n:host([size=\"lg\"]) .content { width: 720px; }\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px) var(--ind-spacing-6, 16px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n}\n\n.heading {\n  font-size: var(--ind-font-size-lg, 14px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  margin: 0;\n}\n\n.close {\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-size: 20px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 2px 8px;\n  border-radius: var(--ind-radius-sm, 2px);\n}\n.close:hover { background: var(--ind-surface-panel); }\n.close:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);\n  outline-offset: 2px;\n}\n\n.body {\n  flex: 1;\n  overflow: auto;\n  padding: var(--ind-spacing-6, 16px);\n  line-height: var(--ind-font-line-height-normal, 1.4);\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-6, 16px);\n  border-top: 1px solid var(--ind-surface-border-subtle);\n}\n\n.footer.is-empty {\n  display: none;\n}\n","import {\n  Component,\n  Prop,\n  Method,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class IndDialog {\n  @Element() host!: HTMLElement;\n\n  /** Open state. Two-way reflectable. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Heading rendered in the header bar. Becomes the accessible name. */\n  @Prop() heading?: string;\n  /** Size of the dialog content. */\n  @Prop({ reflect: true }) size: DialogSize = 'md';\n  /** Close when the operator clicks outside the dialog content. */\n  @Prop() closeOnBackdrop: boolean = true;\n\n  @State() private hasFooter: boolean = false;\n\n  @Event() indOpen!: EventEmitter<void>;\n  /** Fires when the dialog closes — for any reason (ESC, backdrop, close button, .close()). */\n  @Event() indClose!: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.syncOpen();\n    this.watchFooter();\n  }\n\n  @Watch('open')\n  onOpenChange() {\n    this.syncOpen();\n  }\n\n  private syncOpen() {\n    const dlg = this.host.shadowRoot?.querySelector('dialog');\n    if (!dlg) return;\n    if (this.open && !dlg.open) {\n      dlg.showModal();\n      this.indOpen.emit();\n    } else if (!this.open && dlg.open) {\n      dlg.close();\n    }\n  }\n\n  private watchFooter() {\n    const slot = this.host.shadowRoot?.querySelector('slot[name=\"footer\"]') as HTMLSlotElement | null;\n    if (!slot) return;\n    const update = () => {\n      this.hasFooter = slot.assignedNodes({ flatten: true }).some((n) => {\n        if (n.nodeType === Node.ELEMENT_NODE) return true;\n        return n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim().length > 0;\n      });\n    };\n    update();\n    slot.addEventListener('slotchange', update);\n  }\n\n  /** Programmatically open. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private onNativeClose = () => {\n    if (this.open) {\n      this.open = false;\n      this.indClose.emit();\n    }\n  };\n\n  private onClick = (e: MouseEvent) => {\n    if (!this.closeOnBackdrop) return;\n    // The native <dialog> covers the whole viewport when open via showModal(),\n    // but its bounding box is the content. Clicks outside that box are on the backdrop.\n    const dlg = e.currentTarget as HTMLDialogElement;\n    if (e.target !== dlg) return; // ignore clicks bubbling from inside .content\n    const r = dlg.getBoundingClientRect();\n    const inside =\n      e.clientX >= r.left && e.clientX <= r.right &&\n      e.clientY >= r.top  && e.clientY <= r.bottom;\n    if (!inside) this.close();\n  };\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          class=\"dialog\"\n          part=\"dialog\"\n          aria-label={this.heading}\n          onClose={this.onNativeClose}\n          onClick={this.onClick}\n        >\n          <div class=\"content\" part=\"content\">\n            {this.heading && (\n              <header class=\"header\" part=\"header\">\n                <h2 class=\"heading\" part=\"heading\">{this.heading}</h2>\n                <button\n                  type=\"button\"\n                  class=\"close\"\n                  part=\"close\"\n                  aria-label=\"Close\"\n                  onClick={() => this.close()}\n                >×</button>\n              </header>\n            )}\n            <div class=\"body\" part=\"body\">\n              <slot />\n            </div>\n            <footer class={{ footer: true, 'is-empty': !this.hasFooter }} part=\"footer\">\n              <slot name=\"footer\" />\n            </footer>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,4pD,MCoBXC,EAASC,EAAA,MAAAD,UAAAE,E,wKAIoBC,KAAgB,MAEhDC,QAEiBC,KAAmB,KAEpCC,gBAA2B,KAElBC,UAAqB,MAE7BC,QAEAC,SAET,gBAAAC,GACEC,KAAKC,WACLD,KAAKE,a,CAIP,YAAAC,GACEH,KAAKC,U,CAGC,QAAAA,GACN,MAAMG,EAAMJ,KAAKK,KAAKC,YAAYC,cAAc,UAChD,IAAKH,EAAK,OACV,GAAIJ,KAAKR,OAASY,EAAIZ,KAAM,CAC1BY,EAAII,YACJR,KAAKH,QAAQY,M,MACR,IAAKT,KAAKR,MAAQY,EAAIZ,KAAM,CACjCY,EAAIM,O,EAIA,WAAAR,GACN,MAAMS,EAAOX,KAAKK,KAAKC,YAAYC,cAAc,uBACjD,IAAKI,EAAM,OACX,MAAMC,EAAS,KACbZ,KAAKJ,UAAYe,EAAKE,cAAc,CAAEC,QAAS,OAAQC,MAAMC,IAC3D,GAAIA,EAAEC,WAAaC,KAAKC,aAAc,OAAO,KAC7C,OAAOH,EAAEC,WAAaC,KAAKE,YAAcJ,EAAEK,aAAe,IAAIC,OAAOC,OAAS,CAAC,GAC/E,EAEJX,IACAD,EAAKa,iBAAiB,aAAcZ,E,CAKtC,UAAMa,GACJzB,KAAKR,KAAO,I,CAKd,WAAMkB,GACJV,KAAKR,KAAO,K,CAGNkC,cAAgB,KACtB,GAAI1B,KAAKR,KAAM,CACbQ,KAAKR,KAAO,MACZQ,KAAKF,SAASW,M,GAIVkB,QAAWC,IACjB,IAAK5B,KAAKL,gBAAiB,OAG3B,MAAMS,EAAMwB,EAAEC,cACd,GAAID,EAAEE,SAAW1B,EAAK,OACtB,MAAM2B,EAAI3B,EAAI4B,wBACd,MAAMC,EACJL,EAAEM,SAAWH,EAAEI,MAAQP,EAAEM,SAAWH,EAAEK,OACtCR,EAAES,SAAWN,EAAEO,KAAQV,EAAES,SAAWN,EAAEQ,OACxC,IAAKN,EAAQjC,KAAKU,OAAO,EAG3B,MAAA8B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,MAAM,SACNC,KAAK,SAAQ,aACD7C,KAAKP,QACjBqD,QAAS9C,KAAK0B,cACdC,QAAS3B,KAAK2B,SAEdc,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,KAAK,WACvB7C,KAAKP,SACJgD,EAAA,UAAAE,IAAA,2CAAQC,MAAM,SAASC,KAAK,UAC1BJ,EAAA,MAAAE,IAAA,2CAAIC,MAAM,UAAUC,KAAK,WAAW7C,KAAKP,SACzCgD,EAAA,UAAAE,IAAA,2CACEI,KAAK,SACLH,MAAM,QACNC,KAAK,QAAO,aACD,QACXlB,QAAS,IAAM3B,KAAKU,SAAO,MAIjC+B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAOC,KAAK,QACrBJ,EAAA,QAAAE,IAAA,8CAEFF,EAAA,UAAAE,IAAA,2CAAQC,MAAO,CAAEI,OAAQ,KAAM,YAAahD,KAAKJ,WAAaiD,KAAK,UACjEJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,c","ignoreList":[]}

package/dist/components/ind-divider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndDivider extends Components.IndDivider, HTMLElement {}
+export const IndDivider: {
+    prototype: IndDivider;
+    new (): IndDivider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-divider.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as i,t as n,a as o}from"./index.js";const r=()=>`:host{display:block;background:var(--ind-surface-border-default, #2a3340);flex-shrink:0}:host([orientation="horizontal"]){width:100%;height:1px}:host([orientation="vertical"]){height:100%;min-height:1em;width:1px}`;const s=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}orientation="horizontal";render(){return i(o,{key:"eae104b602756afe326c0002f84d926134075e44",role:"separator","aria-orientation":this.orientation})}static get style(){return r()}},[513,"ind-divider",{orientation:[513]}]);function a(){if(typeof customElements==="undefined"){return}const t=["ind-divider"];t.forEach((t=>{switch(t){case"ind-divider":if(!customElements.get(n(t))){customElements.define(n(t),s)}break}}))}a();const d=s;const c=a;export{d as IndDivider,c as defineCustomElement};
+//# sourceMappingURL=ind-divider.js.map

package/dist/components/ind-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dividerCss","IndDivider","__stencil_proxyCustomElement","HTMLElement","orientation","render","h","Host","key","role","this"],"sources":["src/components/atoms/divider/divider.css?tag=ind-divider&encapsulation=shadow","src/components/atoms/divider/divider.tsx"],"sourcesContent":[":host {\n  display: block;\n  background: var(--ind-surface-border-default, #2a3340);\n  flex-shrink: 0;\n}\n\n:host([orientation=\"horizontal\"]) {\n  width: 100%;\n  height: 1px;\n}\n\n:host([orientation=\"vertical\"]) {\n  height: 100%;\n  min-height: 1em;\n  width: 1px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\n@Component({\n  tag: 'ind-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class IndDivider {\n  @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\n\n  render() {\n    return <Host role=\"separator\" aria-orientation={this.orientation} />;\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAa,IAAM,wN,MCSZC,EAAUC,EAAA,MAAAD,UAAAE,E,iFACIC,YAAkC,aAE3D,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAAW,mBAAmBC,KAAKN,a","ignoreList":[]}

package/dist/components/ind-fill-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndFillRow extends Components.IndFillRow, HTMLElement {}
+export const IndFillRow: {
+    prototype: IndFillRow;
+    new (): IndFillRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-fill-row.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as t,a as i,t as s}from"./index.js";import{d as n}from"./p-acsAzrRn.js";const r=()=>`:host{display:grid;grid-template-columns:max-content minmax(80px, 1.2fr) minmax(160px, 2fr) max-content max-content auto;gap:var(--ind-spacing-4, 8px);align-items:center;padding:var(--ind-spacing-3, 6px) 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)}.tag{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));letter-spacing:0.04em;min-width:32px}.label{font-size:var(--ind-font-size-base, 12px)}.progress{display:block;width:100%}.value{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);font-size:var(--ind-font-size-md, 13px);min-width:52px;text-align:right;white-space:nowrap}.severity{font-size:var(--ind-font-size-md, 13px);width:16px;text-align:center;color:var(--ind-feedback-warning-bg, #f59e0b);line-height:1}:host([variant="error"]) .severity{color:var(--ind-feedback-error-bg, #dc2626)}.actions{display:flex;gap:var(--ind-spacing-2, 4px)}::slotted(*){flex-shrink:0}@media (max-width: 640px){:host{grid-template-columns:max-content 1fr;grid-template-rows:auto auto auto}.progress{grid-column:1 / -1}.value,.severity,.actions{grid-column:1 / -1}}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}tag;label;value=0;max=100;unit="%";variant="default";severity=false;render(){return t(i,{key:"58a3405e85cdc048d8efe47d3f4c1c010bc94318"},this.tag&&t("span",{key:"afe363e1253cbf40db6e9a61001a5654d2b3dfcd",class:"tag",part:"tag"},this.tag),t("span",{key:"8854993e5011b07756acb62914e3cd8c16e17ea8",class:"label",part:"label"},this.label),t("ind-progress",{key:"67b5c4f3d210cbf1df3dd3765b9293482e47d040",class:"progress",part:"progress",value:this.value,max:this.max,variant:this.variant,size:"sm"}),t("span",{key:"4bfde6d18d08e3bd8ede25a769b2776a8720a80b",class:"value",part:"value"},Math.round(this.value),this.unit?" "+this.unit:""),this.severity&&t("span",{key:"fd0cf71dd4cae3e5c4404da29e0232e42e6e3642",class:"severity",part:"severity","aria-hidden":"true"},"⚠"),t("span",{key:"663240206f948685c4235fbb9057450bc0874c0f",class:"actions",part:"actions"},t("slot",{key:"7c924c36ed5e348bc7262a7c50c0673ce102b8ae"})))}static get style(){return r()}},[769,"ind-fill-row",{tag:[1],label:[1],value:[2],max:[2],unit:[1],variant:[513],severity:[4]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ind-fill-row","ind-progress"];e.forEach((e=>{switch(e){case"ind-fill-row":if(!customElements.get(s(e))){customElements.define(s(e),d)}break;case"ind-progress":if(!customElements.get(s(e))){n()}break}}))}o();const c=d;const l=o;export{c as IndFillRow,l as defineCustomElement};
+//# sourceMappingURL=ind-fill-row.js.map

package/dist/components/ind-fill-row.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fillRowCss","IndFillRow","__stencil_proxyCustomElement","HTMLElement","tag","label","value","max","unit","variant","severity","render","h","Host","key","this","class","part","size","Math","round"],"sources":["src/components/molecules/fill-row/fill-row.css?tag=ind-fill-row&encapsulation=shadow","src/components/molecules/fill-row/fill-row.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: max-content minmax(80px, 1.2fr) minmax(160px, 2fr) max-content max-content auto;\n  gap: var(--ind-spacing-4, 8px);\n  align-items: center;\n  padding: var(--ind-spacing-3, 6px) 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}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  letter-spacing: 0.04em;\n  min-width: 32px;\n}\n\n.label {\n  font-size: var(--ind-font-size-base, 12px);\n}\n\n.progress {\n  display: block;\n  width: 100%;\n}\n\n.value {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-size: var(--ind-font-size-md, 13px);\n  min-width: 52px;\n  text-align: right;\n  white-space: nowrap;\n}\n\n.severity {\n  font-size: var(--ind-font-size-md, 13px);\n  width: 16px;\n  text-align: center;\n  color: var(--ind-feedback-warning-bg, #f59e0b);\n  line-height: 1;\n}\n\n:host([variant=\"error\"]) .severity {\n  color: var(--ind-feedback-error-bg, #dc2626);\n}\n\n.actions {\n  display: flex;\n  gap: var(--ind-spacing-2, 4px);\n}\n\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n@media (max-width: 640px) {\n  :host {\n    grid-template-columns: max-content 1fr;\n    grid-template-rows: auto auto auto;\n  }\n  .progress { grid-column: 1 / -1; }\n  .value, .severity, .actions { grid-column: 1 / -1; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type FillRowVariant = 'default' | 'success' | 'warning' | 'error';\n\n@Component({\n  tag: 'ind-fill-row',\n  styleUrl: 'fill-row.css',\n  shadow: true,\n})\nexport class IndFillRow {\n  /** Short ID rendered in mono (e.g. \"F1\", \"TK-101\"). */\n  @Prop() tag?: string;\n  /** Human description. */\n  @Prop() label!: string;\n  /** Current level. */\n  @Prop() value: number = 0;\n  /** Max value. Default 100. */\n  @Prop() max: number = 100;\n  /** Unit suffix on the numeric value (default `%`). */\n  @Prop() unit: string = '%';\n  /** Drives the progress color and the severity glyph. */\n  @Prop({ reflect: true }) variant: FillRowVariant = 'default';\n  /** Render the severity glyph between the value and the actions. */\n  @Prop() severity: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n        <span class=\"label\" part=\"label\">{this.label}</span>\n        <ind-progress\n          class=\"progress\"\n          part=\"progress\"\n          value={this.value}\n          max={this.max}\n          variant={this.variant as 'default' | 'success' | 'warning' | 'error'}\n          size=\"sm\"\n        />\n        <span class=\"value\" part=\"value\">\n          {Math.round(this.value)}{this.unit ? ' ' + this.unit : ''}\n        </span>\n        {this.severity && (\n          <span class=\"severity\" part=\"severity\" aria-hidden=\"true\">⚠</span>\n        )}\n        <span class=\"actions\" part=\"actions\">\n          <slot />\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAa,IAAM,i/C,MCSZC,EAAUC,EAAA,MAAAD,UAAAE,E,iFAEbC,IAEAC,MAEAC,MAAgB,EAEhBC,IAAc,IAEdC,KAAe,IAEEC,QAA0B,UAE3CC,SAAoB,MAE5B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFC,KAAKX,KAAOQ,EAAA,QAAAE,IAAA,2CAAME,MAAM,MAAMC,KAAK,OAAOF,KAAKX,KAChDQ,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SAASF,KAAKV,OACvCO,EAAA,gBAAAE,IAAA,2CACEE,MAAM,WACNC,KAAK,WACLX,MAAOS,KAAKT,MACZC,IAAKQ,KAAKR,IACVE,QAASM,KAAKN,QACdS,KAAK,OAEPN,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBE,KAAKC,MAAML,KAAKT,OAAQS,KAAKP,KAAO,IAAMO,KAAKP,KAAO,IAExDO,KAAKL,UACJE,EAAA,QAAAE,IAAA,2CAAME,MAAM,WAAWC,KAAK,WAAU,cAAa,QAAM,KAE3DL,EAAA,QAAAE,IAAA,2CAAME,MAAM,UAAUC,KAAK,WACzBL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ind-health-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndHealthCard extends Components.IndHealthCard, HTMLElement {}
+export const IndHealthCard: {
+    prototype: IndHealthCard;
+    new (): IndHealthCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-health-card.js

@@ -0,0 +1,2 @@
+import{p as t,H as a,h as e,a as s,t as n}from"./index.js";import{d as i}from"./p-D-FsSjAC.js";const r=()=>`: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));min-width:160px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.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))}.status{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.state-label{font-size:var(--ind-font-size-xl, 16px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1}.detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="running"]) .state-label{color:var(--ind-state-running-bg,     #16a34a)}:host([state="fault"]) .state-label{color:var(--ind-state-fault-bg,       #dc2626)}:host([state="warning"]) .state-label{color:var(--ind-state-warning-bg,     #f59e0b)}:host([state="maintenance"]) .state-label{color:var(--ind-state-maintenance-bg, #2563eb)}:host([state="stopped"]) .state-label{color:var(--ind-surface-text-secondary)}:host([state="unknown"]) .state-label{color:var(--ind-surface-text-muted)}: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)}`;const d={running:"OK",stopped:"Stopped",fault:"Fault",warning:"Warning",maintenance:"Maintenance",unknown:"—"};const o=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}heading;state="unknown";stateLabel;detail;render(){const t=this.stateLabel??d[this.state];const a=this.state==="unknown"?"neutral":this.state;return e(s,{key:"2bc1d2152325d8a40fb9399ec6c24b0134bde34a",role:"group","aria-label":`${this.heading}: ${t}`,"aria-live":this.state==="fault"?"assertive":"polite"},e("div",{key:"7268095055dc03a742e97786a22dd4179f6e8ac3",class:"title",part:"title"},this.heading),e("div",{key:"4069f5782516eb2b28bfafb4b0a59c3fe6133321",class:"status",part:"status"},e("ind-status-dot",{key:"651976ae059c6b8faafd4bb4de7c1fa08fd6b86b",state:a,size:"md"}),e("span",{key:"18925ef8bb2c51789f315a2adf8cacc5a7ad4712",class:"state-label",part:"state-label"},t)),this.detail&&e("div",{key:"7f3c37bca74f5f5fb92633f9c7d85681c78bd677",class:"detail",part:"detail"},this.detail))}static get style(){return r()}},[513,"ind-health-card",{heading:[1],state:[513],stateLabel:[1,"state-label"],detail:[1]}]);function l(){if(typeof customElements==="undefined"){return}const t=["ind-health-card","ind-status-dot"];t.forEach((t=>{switch(t){case"ind-health-card":if(!customElements.get(n(t))){customElements.define(n(t),o)}break;case"ind-status-dot":if(!customElements.get(n(t))){i()}break}}))}l();const c=o;const f=l;export{c as IndHealthCard,f as defineCustomElement};
+//# sourceMappingURL=ind-health-card.js.map

package/dist/components/ind-health-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["healthCardCss","DEFAULT_LABEL","running","stopped","fault","warning","maintenance","unknown","IndHealthCard","__stencil_proxyCustomElement","HTMLElement","heading","state","stateLabel","detail","render","label","this","dotState","h","Host","key","role","class","part","size"],"sources":["src/components/molecules/health-card/health-card.css?tag=ind-health-card&encapsulation=shadow","src/components/molecules/health-card/health-card.tsx"],"sourcesContent":[":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  min-width: 160px;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.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.status {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.state-label {\n  font-size: var(--ind-font-size-xl, 16px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1;\n}\n\n.detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Bold colored label per state — matches the dot color so the card\n * reads at a glance across a 4-up grid. */\n:host([state=\"running\"])     .state-label { color: var(--ind-state-running-bg,     #16a34a); }\n:host([state=\"fault\"])       .state-label { color: var(--ind-state-fault-bg,       #dc2626); }\n:host([state=\"warning\"])     .state-label { color: var(--ind-state-warning-bg,     #f59e0b); }\n:host([state=\"maintenance\"]) .state-label { color: var(--ind-state-maintenance-bg, #2563eb); }\n:host([state=\"stopped\"])     .state-label { color: var(--ind-surface-text-secondary); }\n:host([state=\"unknown\"])     .state-label { color: var(--ind-surface-text-muted); }\n\n/* Fault card glows subtly as a visual cue, even without blinking. */\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","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HealthState =\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'unknown';\n\nconst DEFAULT_LABEL: Record<HealthState, string> = {\n  running: 'OK',\n  stopped: 'Stopped',\n  fault: 'Fault',\n  warning: 'Warning',\n  maintenance: 'Maintenance',\n  unknown: '—',\n};\n\n@Component({\n  tag: 'ind-health-card',\n  styleUrl: 'health-card.css',\n  shadow: true,\n})\nexport class IndHealthCard {\n  /** Subsystem name (e.g. \"PLC\", \"Dispense robot\", \"Washer\"). */\n  @Prop() heading!: string;\n  /** Process state — drives the dot color and the prominent text color. */\n  @Prop({ reflect: true }) state: HealthState = 'unknown';\n  /** Override the default label (e.g. show \"RUN 24 h\" instead of \"OK\"). */\n  @Prop() stateLabel?: string;\n  /** Optional sub-line for context (timestamp, last error, etc.). */\n  @Prop() detail?: string;\n\n  render() {\n    const label = this.stateLabel ?? DEFAULT_LABEL[this.state];\n    const dotState = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${this.heading}: ${label}`}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <div class=\"title\" part=\"title\">{this.heading}</div>\n        <div class=\"status\" part=\"status\">\n          <ind-status-dot state={dotState as 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance' | 'neutral'} size=\"md\" />\n          <span class=\"state-label\" part=\"state-label\">{label}</span>\n        </div>\n        {this.detail && <div class=\"detail\" part=\"detail\">{this.detail}</div>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAgB,IAAM,ujDCU5B,MAAMC,EAA6C,CACjDC,QAAS,KACTC,QAAS,UACTC,MAAO,QACPC,QAAS,UACTC,YAAa,cACbC,QAAS,K,MAQEC,EAAaC,EAAA,MAAAD,UAAAE,E,iFAEhBC,QAEiBC,MAAqB,UAEtCC,WAEAC,OAER,MAAAC,GACE,MAAMC,EAAQC,KAAKJ,YAAcZ,EAAcgB,KAAKL,OACpD,MAAMM,EAAWD,KAAKL,QAAU,UAAY,UAAYK,KAAKL,MAC7D,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,QAAO,aACA,GAAGL,KAAKN,YAAYK,IAAO,YAC5BC,KAAKL,QAAU,QAAU,YAAc,UAElDO,EAAA,OAAAE,IAAA,2CAAKE,MAAM,QAAQC,KAAK,SAASP,KAAKN,SACtCQ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SAASC,KAAK,UACvBL,EAAA,kBAAAE,IAAA,2CAAgBT,MAAOM,EAAqFO,KAAK,OACjHN,EAAA,QAAAE,IAAA,2CAAME,MAAM,cAAcC,KAAK,eAAeR,IAE/CC,KAAKH,QAAUK,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SAASC,KAAK,UAAUP,KAAKH,Q","ignoreList":[]}

package/dist/components/ind-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndInput extends Components.IndInput, HTMLElement {}
+export const IndInput: {
+    prototype: IndInput;
+    new (): IndInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-input.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as a,h as i,a as n,t as s}from"./index.js";const r=()=>`:host{display:inline-block;font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:var(--ind-size-input-md, 32px)}:host([size="sm"]){--_h:var(--ind-size-input-sm, 24px)}:host([size="md"]){--_h:var(--ind-size-input-md, 32px)}:host([size="lg"]){--_h:var(--ind-size-input-lg, 40px)}.wrap{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);min-width:160px;max-width:100%}.label{font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-medium, 500);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));letter-spacing:0.04em;text-transform:uppercase}.field{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);height:var(--_h);padding:0 var(--ind-spacing-4, 8px);background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);transition:border-color var(--ind-motion-duration-fast, 120ms),     box-shadow   var(--ind-motion-duration-fast, 120ms)}.field.is-focus{border-color:var(--ind-surface-focus-ring, #22d3ee);box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent)}.input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;padding:0;font:inherit;color:inherit;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.input::placeholder{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));opacity:1}:host([type="number"]) .input{font-family:var(--ind-font-family-mono);font-variant-numeric:tabular-nums}:host([invalid]) .field{border-color:var(--ind-feedback-error-bg, #dc2626)}:host([invalid]) .field.is-focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent)}:host([disabled]){opacity:0.55;pointer-events:none}:host([readonly]) .field{background:var(--ind-surface-panel, light-dark(#f4f6f9, #11161c))}::slotted([slot="prefix"]),::slotted([slot="suffix"]){color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));font-size:var(--ind-font-size-sm, 11px);font-family:var(--ind-font-family-mono);white-space:nowrap}`;const o=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.indInput=a(this,"indInput");this.indChange=a(this,"indChange")}get host(){return this}type="text";size="md";value="";placeholder;disabled=false;readonly=false;invalid=false;label;name;min;max;step;pattern;autocomplete;mode;hasFocus=false;indInput;indChange;async setFocus(){this.host.shadowRoot?.querySelector("input")?.focus()}onInput=e=>{const t=e.target.value;this.value=t;this.indInput.emit(t)};onChange=e=>{const t=e.target.value;this.indChange.emit(t)};render(){return i(n,{key:"bb19139e219e04af88a8d60ef7189b1fe75cb9fa"},i("label",{key:"95047b762b29dddf02e1236c4febb7bd175a5375",class:"wrap",part:"wrap"},this.label&&i("span",{key:"3dfe06b89e8022fc4dc74e29d73edd4684ca7305",class:"label",part:"label"},this.label),i("span",{key:"4714f42749f9018c7a472c85d4ce59537ac60b1f",class:{field:true,"is-focus":this.hasFocus},part:"field"},i("slot",{key:"97e0af1ba3eec75684483fa1fb76d08eec886075",name:"prefix"}),i("input",{key:"3764cd35fb827430a05af94b3fd2164d1f812cfa",part:"input",class:"input",type:this.type,value:this.value,placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,name:this.name,min:this.min,max:this.max,step:this.step,pattern:this.pattern,autocomplete:this.autocomplete,inputMode:this.mode,"aria-invalid":this.invalid?"true":"false",onFocus:()=>this.hasFocus=true,onBlur:()=>this.hasFocus=false,onInput:this.onInput,onChange:this.onChange}),i("slot",{key:"1fefcb0e2fa6efd3385aef0bbf8b228578915c3a",name:"suffix"}))))}static get style(){return r()}},[769,"ind-input",{type:[513],size:[513],value:[1025],placeholder:[1],disabled:[516],readonly:[516],invalid:[516],label:[1],name:[1],min:[8],max:[8],step:[8],pattern:[1],autocomplete:[1],mode:[1,"inputmode"],hasFocus:[32],setFocus:[64]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ind-input"];e.forEach((e=>{switch(e){case"ind-input":if(!customElements.get(s(e))){customElements.define(s(e),o)}break}}))}d();const l=o;const f=d;export{l as IndInput,f as defineCustomElement};
+//# sourceMappingURL=ind-input.js.map

package/dist/components/ind-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","IndInput","__stencil_proxyCustomElement","HTMLElement","type","size","value","placeholder","disabled","readonly","invalid","label","name","min","max","step","pattern","autocomplete","mode","hasFocus","indInput","indChange","setFocus","this","host","shadowRoot","querySelector","focus","onInput","e","v","target","emit","onChange","render","h","Host","key","class","part","field","inputMode","onFocus","onBlur"],"sources":["src/components/atoms/input/input.css?tag=ind-input&encapsulation=shadow","src/components/atoms/input/input.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_h: var(--ind-size-input-md, 32px);\n}\n\n:host([size=\"sm\"]) { --_h: var(--ind-size-input-sm, 24px); }\n:host([size=\"md\"]) { --_h: var(--ind-size-input-md, 32px); }\n:host([size=\"lg\"]) { --_h: var(--ind-size-input-lg, 40px); }\n\n.wrap {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  min-width: 160px;\n  max-width: 100%;\n}\n\n.label {\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.field {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  height: var(--_h);\n  padding: 0 var(--ind-spacing-4, 8px);\n  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-md, 3px);\n  transition:\n    border-color var(--ind-motion-duration-fast, 120ms),\n    box-shadow   var(--ind-motion-duration-fast, 120ms);\n}\n\n.field.is-focus {\n  border-color: var(--ind-surface-focus-ring, #22d3ee);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent);\n}\n\n.input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.input::placeholder {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  opacity: 1;\n}\n\n:host([type=\"number\"]) .input {\n  font-family: var(--ind-font-family-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n:host([invalid]) .field {\n  border-color: var(--ind-feedback-error-bg, #dc2626);\n}\n:host([invalid]) .field.is-focus {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);\n}\n\n:host([disabled]) {\n  opacity: 0.55;\n  pointer-events: none;\n}\n\n:host([readonly]) .field {\n  background: var(--ind-surface-panel, light-dark(#f4f6f9, #11161c));\n}\n\n::slotted([slot=\"prefix\"]),\n::slotted([slot=\"suffix\"]) {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  font-size: var(--ind-font-size-sm, 11px);\n  font-family: var(--ind-font-family-mono);\n  white-space: nowrap;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type InputType = 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url';\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'url' | 'email' | 'search' | 'none';\n\n@Component({\n  tag: 'ind-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class IndInput {\n  @Element() host!: HTMLElement;\n\n  @Prop({ reflect: true }) type: InputType = 'text';\n  @Prop({ reflect: true }) size: InputSize = 'md';\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder?: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop() min?: number | string;\n  @Prop() max?: number | string;\n  @Prop() step?: number | string;\n  @Prop() pattern?: string;\n  @Prop() autocomplete?: string;\n  /** Maps to the native `inputmode` attribute — named `mode` to avoid clashing with `HTMLElement.inputMode`. */\n  @Prop({ attribute: 'inputmode' }) mode?: InputMode;\n\n  @State() private hasFocus = false;\n\n  /** Fires on every keystroke. */\n  @Event() indInput!: EventEmitter<string>;\n  /** Fires on change (blur or Enter). */\n  @Event() indChange!: EventEmitter<string>;\n\n  /** Programmatically focus the underlying input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.host.shadowRoot?.querySelector('input')?.focus();\n  }\n\n  private onInput = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.value = v;\n    this.indInput.emit(v);\n  };\n\n  private onChange = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.indChange.emit(v);\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <span class={{ field: true, 'is-focus': this.hasFocus }} part=\"field\">\n            <slot name=\"prefix\" />\n            <input\n              part=\"input\"\n              class=\"input\"\n              type={this.type}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              name={this.name}\n              min={this.min as unknown as string}\n              max={this.max as unknown as string}\n              step={this.step as unknown as string}\n              pattern={this.pattern}\n              autocomplete={this.autocomplete as unknown as 'on' | 'off'}\n              inputMode={this.mode as unknown as undefined}\n              aria-invalid={this.invalid ? 'true' : 'false'}\n              onFocus={() => (this.hasFocus = true)}\n              onBlur={() => (this.hasFocus = false)}\n              onInput={this.onInput}\n              onChange={this.onChange}\n            />\n            <slot name=\"suffix\" />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAW,IAAM,gpE,MCqBVC,EAAQC,EAAA,MAAAD,UAAAE,E,4KAGMC,KAAkB,OAClBC,KAAkB,KAClBC,MAAgB,GACjCC,YACiBC,SAAoB,MACpBC,SAAoB,MACpBC,QAAmB,MACpCC,MACAC,KACAC,IACAC,IACAC,KACAC,QACAC,aAE0BC,KAEjBC,SAAW,MAGnBC,SAEAC,UAIT,cAAMC,GACJC,KAAKC,KAAKC,YAAYC,cAAc,UAAUC,O,CAGxCC,QAAWC,IACjB,MAAMC,EAAKD,EAAEE,OAA4BzB,MACzCiB,KAAKjB,MAAQwB,EACbP,KAAKH,SAASY,KAAKF,EAAE,EAGfG,SAAYJ,IAClB,MAAMC,EAAKD,EAAEE,OAA4BzB,MACzCiB,KAAKF,UAAUW,KAAKF,EAAE,EAGxB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CAAOC,MAAM,OAAOC,KAAK,QACtBhB,KAAKZ,OAASwB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SAAShB,KAAKZ,OACtDwB,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEE,MAAO,KAAM,WAAYjB,KAAKJ,UAAYoB,KAAK,SAC5DJ,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,WACXuB,EAAA,SAAAE,IAAA,2CACEE,KAAK,QACLD,MAAM,QACNlC,KAAMmB,KAAKnB,KACXE,MAAOiB,KAAKjB,MACZC,YAAagB,KAAKhB,YAClBC,SAAUe,KAAKf,SACfC,SAAUc,KAAKd,SACfG,KAAMW,KAAKX,KACXC,IAAKU,KAAKV,IACVC,IAAKS,KAAKT,IACVC,KAAMQ,KAAKR,KACXC,QAASO,KAAKP,QACdC,aAAcM,KAAKN,aACnBwB,UAAWlB,KAAKL,KAA4B,eAC9BK,KAAKb,QAAU,OAAS,QACtCgC,QAAS,IAAOnB,KAAKJ,SAAW,KAChCwB,OAAQ,IAAOpB,KAAKJ,SAAW,MAC/BS,QAASL,KAAKK,QACdK,SAAUV,KAAKU,WAEjBE,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,a","ignoreList":[]}

package/dist/components/ind-led.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndLed extends Components.IndLed, HTMLElement {}
+export const IndLed: {
+    prototype: IndLed;
+    new (): IndLed;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ind-led.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as t,a as i,t as n}from"./index.js";const s=()=>`: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 r=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}state="stopped";size="md";blinking=false;label;render(){const e=this.label??`${this.state} indicator`;return t(i,{key:"babe0b6e1a80181397c53ec0234ce3ff8d5741b4",role:"status","aria-label":e,"aria-live":this.state==="fault"?"assertive":"polite"},t("span",{key:"d7ca8697299f70715fdbe101d541c3313508e434",class:"led",part:"led","aria-hidden":"true"}),this.label&&t("span",{key:"f39a9b21eabd4380db866e9bfb2591bcaeac3ce4",class:"label",part:"label"},this.label))}static get style(){return s()}},[513,"ind-led",{state:[513],size:[513],blinking:[516],label:[1]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ind-led"];e.forEach((e=>{switch(e){case"ind-led":if(!customElements.get(n(e))){customElements.define(n(e),r)}break}}))}d();const o=r;const l=d;export{o as IndLed,l as defineCustomElement};
+//# sourceMappingURL=ind-led.js.map

package/dist/components/ind-led.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ledCss","IndLed","__stencil_proxyCustomElement","HTMLElement","state","size","blinking","label","render","accessibleName","this","h","Host","key","role","class","part"],"sources":["src/components/atoms/led/led.css?tag=ind-led&encapsulation=shadow","src/components/atoms/led/led.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"],"mappings":"2DAAA,MAAMA,EAAS,IAAM,y+E,MCURC,EAAMC,EAAA,MAAAD,UAAAE,E,iFAEQC,MAAkB,UAGlBC,KAAgB,KAGhBC,SAAoB,MAGrCC,MAER,MAAAC,GACE,MAAMC,EAAiBC,KAAKH,OAAS,GAAGG,KAAKN,kBAC7C,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SAAQ,aACDL,EAAc,YACfC,KAAKN,QAAU,QAAU,YAAc,UAElDO,EAAA,QAAAE,IAAA,2CAAME,MAAM,MAAMC,KAAK,MAAK,cAAa,SACxCN,KAAKH,OAASI,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SAASN,KAAKH,O","ignoreList":[]}

package/dist/components/ind-mqtt-monitor.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IndMqttMonitor extends Components.IndMqttMonitor, HTMLElement {}
+export const IndMqttMonitor: {
+    prototype: IndMqttMonitor;
+    new (): IndMqttMonitor;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;