@ind-ds/core 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @ind-ds/core
+
+Stencil-built web components for industrial HMI/SCADA interfaces. Framework-agnostic — consume directly as custom elements, or use the typed wrappers in `@ind-ds/react` and `@ind-ds/vue`.
+
+## Atomic decomposition
+
+```
+src/components/
+  atoms/         # primitives — LED, gauge, valve symbol, button, badge
+  molecules/     # state cards, tag rows, mini trends
+  organisms/     # alarm banners, P&ID frames, trend panels
+  templates/     # full HMI screen layouts (operator station, mobile rounds)
+```
+
+The boundary rule: an **atom** never imports another component. A **molecule** only imports atoms. An **organism** can import molecules and atoms. A **template** assembles organisms into a screen.
+
+## Adding a new component
+
+1. Decide the atomic layer (atom/molecule/organism/template).
+2. Create the folder: `src/components/<layer>/<name>/`.
+3. Add three files:
+   - `<name>.tsx` — the Stencil component (`@Component`, `tag: 'ind-<name>'`, `shadow: true`).
+   - `<name>.css` — styles. Consume `--ind-*` CSS vars from tokens; never hard-code colors. Add a `@media (prefers-reduced-motion: reduce)` rule for any animation that conveys alarm state.
+   - `<name>.spec.tsx` and/or `<name>.e2e.ts` for tests (optional but expected before promotion to stable).
+4. Re-export the public types from `src/index.ts`.
+5. `pnpm --filter @ind-ds/core build` regenerates `components.d.ts` and the `dist-custom-elements` bundle. The framework wrapper packages re-export the new element automatically.
+
+## Component conventions
+
+- Tag prefix `ind-` (e.g. `<ind-led>`, `<ind-valve>`).
+- Shadow DOM on by default. Expose customization points through CSS Shadow Parts (`exportparts`/`::part(...)`), not via custom slots when the goal is just styling.
+- Every interactive component must expose a public `focus()` method and respect `prefers-reduced-motion`.
+- Process-bearing components (LED, gauge, valve, alarm chip) expose a `state` prop with the canonical ISA-18.2 / process-state vocabulary defined in `@ind-ds/tokens` — never invent a parallel vocabulary.
+- Numeric displays must apply `font-feature-settings: var(--ind-font-feature-tabular)`.
+
+## Build
+
+```bash
+pnpm --filter @ind-ds/core build       # production build
+pnpm --filter @ind-ds/core dev         # watch + dev server on :3333
+```

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const alarmCss = () => `: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 PRIORITY_LABEL = {
+    'high-high': 'HH',
+    'high': 'H',
+    'low': 'L',
+    'low-low': 'LL',
+};
+const IndAlarm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** ISA-18.2 alarm priority. */
+    priority = 'high';
+    /** When false, the chip blinks (per ISA-18.2 unack convention). */
+    acknowledged = false;
+    /** Required human description of the alarm. */
+    label;
+    /** Optional ISO-8601 timestamp. Rendered with `<time>`. */
+    timestamp;
+    render() {
+        const prio = PRIORITY_LABEL[this.priority];
+        return (index.h(index.Host, { key: '4aa256413a1b908acbe8dda509a7524fbd3c50df', role: "alert", "aria-live": this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite', "aria-atomic": "true" }, index.h("span", { key: '19ee856cc6f4ee90f0db296fae69547c8bfa9c0f', class: "badge", part: "badge", "aria-label": `priority ${prio}` }, prio), index.h("span", { key: '54e66ef997a6ed665e4f0d59f87532368103d686', class: "label", part: "label" }, this.label), this.timestamp && (index.h("time", { key: '954956c17cce6c16df50710c6eb12fad827e8c45', class: "timestamp", part: "timestamp", dateTime: this.timestamp }, this.timestamp))));
+    }
+};
+IndAlarm.style = alarmCss();
+
+exports.ind_alarm = IndAlarm;
+//# sourceMappingURL=ind-alarm.entry.cjs.js.map
+
+//# sourceMappingURL=ind-alarm.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-alarm.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,+oEAA+oE,CAAC;;ACIxqE,MAAM,cAAc,GAAkC;AACpD,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,SAAS,EAAE,IAAI;CAChB;MAOY,QAAQ,GAAA,MAAA;;;;;IAEM,QAAQ,GAAkB,MAAM;;IAGhC,YAAY,GAAY,KAAK;;AAG9C,IAAA,KAAK;;AAGL,IAAA,SAAS;IAEjB,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC1C,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,WAAA,EAEV,IAAI,CAAC,QAAQ,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,QAAQ,EAAA,aAAA,EAElE,MAAM,EAAA,EAElBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,SAAA,EAAY,IAAI,CAAA,CAAE,EAAA,EAAG,IAAI,CAAQ,EAC9EA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,IAAI,CAAC,SAAS,KACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAA,EAC9D,IAAI,CAAC,SAAS,CACV,CACR,CACI;;;;;;;","names":["h","Host"],"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"],"version":3}

package/dist/cjs/ind-app-header.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const appHeaderCss = () => `: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 IndAppHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChangeMachine = index.createEvent(this, "indChangeMachine");
+        this.indDisconnect = index.createEvent(this, "indDisconnect");
+    }
+    /** Brand name (uppercase by convention). */
+    brand;
+    /** Sub-brand line (e.g. "Maintenance Console"). */
+    subBrand;
+    /** Machine identifier shown next to the brand. */
+    machineId;
+    /** Broker / realtime connection state — drives the dot. */
+    mqttState = 'neutral';
+    /** Label rendered next to the dot (e.g. "Connected"). */
+    mqttLabel;
+    /** App version (e.g. "v1.4.2"). */
+    version;
+    /** Documentation URL. */
+    docsUrl;
+    /** Hide the built-in "Change machine" button. */
+    hideChangeMachine = false;
+    /** Hide the built-in "Disconnect" button. */
+    hideDisconnect = false;
+    indChangeMachine;
+    indDisconnect;
+    render() {
+        return (index.h(index.Host, { key: 'c65d79c697786cf1e17f3d13a1f5475da46e66ac', role: "banner" }, index.h("div", { key: '4c17ab40581251748f4bfbdceb8553d736b9288b', class: "brand", part: "brand" }, index.h("slot", { key: '2e4a11be914770ce6cf3b2e2a4cf7e92fbd95702', name: "logo" }, index.h("span", { key: 'ff2a98d37c5153a9169b188a2e77d24f49a505e5', class: "brand-logo", "aria-hidden": "true" }, "\u2B22")), index.h("div", { key: 'a679a938ab050aa8e2c326a88e905563134fbbc5', class: "brand-text" }, index.h("span", { key: '19b941fba9c4d7dbbda39242f3c6afb543c5ef6a', class: "brand-name" }, this.brand), this.subBrand && index.h("span", { key: 'd77217db67b0384df179638cbf98ae38697a7071', class: "brand-sub" }, this.subBrand))), this.machineId && (index.h("div", { key: '1e40da6c490185efe7423b1b82d5a5e56cd4cb9a', class: "machine", part: "machine" }, index.h("span", { key: '5ca76acc4d270e8f6adc12d0077f1371e136aded', class: "machine-label" }, "Machine"), index.h("span", { key: 'a10840b72441bb7adabd0f152332bfa9e081eff5', class: "machine-id" }, this.machineId))), index.h("div", { key: '5cfbdeb0e191cdbfa679fd0a1e205c4544065b10', class: "mqtt", part: "mqtt" }, index.h("ind-status-dot", { key: 'b80758c2a80a27b362651cd1251c92d3b510212e', state: this.mqttState, size: "md" }), this.mqttLabel && index.h("span", { key: 'a443524b51f9950e068bc815bc4e89f52bc9c296', class: "mqtt-label" }, this.mqttLabel)), index.h("span", { key: '84028540ba07e5f4b400e9694a2c102c0ffcb618', class: "spacer" }), index.h("div", { key: '42e07d1726547c318367423708e9fd7078a771ed', class: "meta", part: "meta" }, this.version && index.h("span", { key: '9fc02e0f44f50126554fa70e127bf5e1819b09ee', class: "version" }, this.version), this.docsUrl && (index.h("a", { key: '3839f6149b334591551124f4bb5eb296d0f4a296', class: "docs", href: this.docsUrl, target: "_blank", rel: "noopener noreferrer" }, "Documentation"))), index.h("div", { key: '4265851f62d3f66518a9e07b32933974a301376b', class: "actions", part: "actions" }, index.h("slot", { key: 'dffb5909cf929b3c04e47d598e746a6caf8d55f5', name: "actions" }, !this.hideChangeMachine && (index.h("button", { key: '824c0c0b5419753e50d8ba002dee057ba2ec2b46', type: "button", class: "action", onClick: () => this.indChangeMachine.emit() }, "Change machine")), !this.hideDisconnect && (index.h("button", { key: '5269a1bed2754ca7f7bfd83f0f431cae2d4c1bf5', type: "button", class: "action action--danger", onClick: () => this.indDisconnect.emit() }, "Disconnect"))))));
+    }
+};
+IndAppHeader.style = appHeaderCss();
+
+exports.ind_app_header = IndAppHeader;
+//# sourceMappingURL=ind-app-header.entry.cjs.js.map
+
+//# sourceMappingURL=ind-app-header.cjs.entry.js.map

package/dist/cjs/ind-app-header.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-app-header.cjs.entry.js","mappings":"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","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,79 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const buttonCss = () => `: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 IndButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indActivate = index.createEvent(this, "indActivate");
+    }
+    /** Visual variant. `danger` should be paired with `holdToConfirmMs` for critical actions. */
+    variant = 'default';
+    /** Size. */
+    size = 'md';
+    /** Disabled state. */
+    disabled = false;
+    /** Optional accessible label (falls back to slotted text). */
+    label;
+    /**
+     * If > 0, the button must be held this many milliseconds before activating.
+     * Use for critical actions (Stop, Trip, Reset) to prevent accidental clicks —
+     * standard NAMUR / safety-instrumented operating practice.
+     */
+    holdToConfirmMs = 0;
+    /** Fired on click (or after hold completes if `holdToConfirmMs > 0`). */
+    indActivate;
+    progress = 0;
+    holdStart = 0;
+    rafHandle = null;
+    startHold = (e) => {
+        if (this.disabled)
+            return;
+        e.preventDefault();
+        if (this.holdToConfirmMs <= 0) {
+            this.indActivate.emit();
+            return;
+        }
+        this.holdStart = performance.now();
+        this.progress = 0;
+        this.tick();
+    };
+    tick = () => {
+        const elapsed = performance.now() - this.holdStart;
+        this.progress = Math.min(1, elapsed / 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 = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.startHold(e);
+        }
+    };
+    disconnectedCallback() {
+        this.cancelHold();
+    }
+    render() {
+        const isHolding = this.progress > 0 && this.progress < 1;
+        return (index.h(index.Host, { key: 'bbafede18f13eac5486d9cae0c2bd727375e7762' }, index.h("button", { key: '82bf34d3c9943e33edd5c8863be6457d3c201ece', type: "button", class: { btn: true, 'is-holding': isHolding }, 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 }, index.h("span", { key: '75252fda5e1229f6c335df277b0c09a18d0b621d', class: "content", part: "content" }, index.h("slot", { key: 'f9a158deadf76da0cf1e13680c1b1dd444273387' }, this.label)), this.holdToConfirmMs > 0 && (index.h("span", { key: '7ba778902c08b3d8fe6b1c6a963c4ab645369110', class: "hold-progress", part: "hold-progress", style: { transform: `scaleX(${this.progress})` }, "aria-hidden": "true" }))), this.holdToConfirmMs > 0 && (index.h("span", { key: '9c2f72de9486bfed4855c5dc81dbf54161c97842', id: "hold-hint", class: "sr-only" }, "Hold to confirm (", this.holdToConfirmMs, " ms)"))));
+    }
+};
+IndButton.style = buttonCss();
+
+exports.ind_button = IndButton;
+//# sourceMappingURL=ind-button.entry.cjs.js.map
+
+//# sourceMappingURL=ind-button.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-button.cjs.entry.js","mappings":"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","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const checkboxCss = () => `: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 IndCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    get host() { return index.getElement(this); }
+    checked = false;
+    indeterminate = false;
+    disabled = false;
+    size = 'md';
+    label;
+    name;
+    value;
+    indChange;
+    componentDidLoad() {
+        this.syncIndeterminate();
+    }
+    syncIndeterminate() {
+        const input = this.host.shadowRoot?.querySelector('input');
+        if (input)
+            input.indeterminate = this.indeterminate;
+    }
+    onChange = (e) => {
+        const next = e.target.checked;
+        this.checked = next;
+        this.indChange.emit(next);
+    };
+    render() {
+        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        return (index.h(index.Host, { key: 'd4b48a80703ea584c4db306d26fcaebd990f9d87' }, index.h("label", { key: 'd101498325e34b2d4ce87189aaf82930f81fd831', class: "wrap", part: "wrap" }, index.h("span", { key: '8363b37e0c6a9a082dbab4e0bb26b09506cb4b00', class: "box", part: "box" }, index.h("input", { key: '2c2a0d2e10c70a97aa2c983941f14bd3c6bc30dd', type: "checkbox", class: "native", part: "native", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, "aria-checked": ariaChecked, onChange: this.onChange }), index.h("span", { key: '41f5ba40d9c2e27e899366e9de111d3aa4a3817c', class: "mark", part: "mark", "aria-hidden": "true" })), this.label && index.h("span", { key: 'c9955a662691ac94a2be379edc332f550f09b53e', class: "label", part: "label" }, this.label))));
+    }
+    static get watchers() { return {
+        "indeterminate": [{
+                "syncIndeterminate": 0
+            }]
+    }; }
+};
+IndCheckbox.style = checkboxCss();
+
+exports.ind_checkbox = IndCheckbox;
+//# sourceMappingURL=ind-checkbox.entry.cjs.js.map
+
+//# sourceMappingURL=ind-checkbox.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-checkbox.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,08DAA08D,CAAC;;MCkBz9D,WAAW,GAAA,MAAA;;;;;;IAGkB,OAAO,GAAY,KAAK;IACvC,aAAa,GAAY,KAAK;IAC9B,QAAQ,GAAY,KAAK;IACzB,IAAI,GAAiB,IAAI;AAC1C,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,KAAK;AAEJ,IAAA,SAAS;IAElB,gBAAgB,GAAA;QACd,IAAI,CAAC,iBAAiB,EAAE;;IAI1B,iBAAiB,GAAA;AACf,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC;AAC1D,QAAA,IAAI,KAAK;AAAE,YAAA,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;AAG7C,IAAA,QAAQ,GAAG,CAAC,CAAQ,KAAI;AAC9B,QAAA,MAAM,IAAI,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACnD,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;AAC3B,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AAClF,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAC1BA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,cAAA,EACH,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACvB,EACFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,CAC/C,EACN,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,CACH;;;;;;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,101 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const dialogCss = () => `:host{display:contents}.dialog{padding:0;border:none;background:transparent;color:inherit;max-width:90vw;max-height:90vh;overflow:visible}.dialog::backdrop{background:rgba(0, 0, 0, 0.55);backdrop-filter:blur(2px)}.content{display:flex;flex-direction:column;background:var(--ind-surface-raised, light-dark(#ffffff, #1a2129));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);max-height:90vh;overflow:hidden}:host([size="sm"]) .content{width:320px}:host([size="md"]) .content{width:480px}:host([size="lg"]) .content{width:720px}.header{display:flex;align-items:center;justify-content:space-between;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px) var(--ind-spacing-6, 16px);border-bottom:1px solid var(--ind-surface-border-subtle)}.heading{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-semibold, 600);margin:0}.close{background:transparent;border:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:var(--ind-radius-sm, 2px)}.close:hover{background:var(--ind-surface-panel)}.close:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:2px}.body{flex:1;overflow:auto;padding:var(--ind-spacing-6, 16px);line-height:var(--ind-font-line-height-normal, 1.4)}.footer{display:flex;justify-content:flex-end;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-6, 16px);border-top:1px solid var(--ind-surface-border-subtle)}.footer.is-empty{display:none}`;
+
+const IndDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indOpen = index.createEvent(this, "indOpen");
+        this.indClose = index.createEvent(this, "indClose");
+    }
+    get host() { return index.getElement(this); }
+    /** Open state. Two-way reflectable. */
+    open = false;
+    /** Heading rendered in the header bar. Becomes the accessible name. */
+    heading;
+    /** Size of the dialog content. */
+    size = 'md';
+    /** Close when the operator clicks outside the dialog content. */
+    closeOnBackdrop = true;
+    hasFooter = false;
+    indOpen;
+    /** Fires when the dialog closes — for any reason (ESC, backdrop, close button, .close()). */
+    indClose;
+    componentDidLoad() {
+        this.syncOpen();
+        this.watchFooter();
+    }
+    onOpenChange() {
+        this.syncOpen();
+    }
+    syncOpen() {
+        const dlg = this.host.shadowRoot?.querySelector('dialog');
+        if (!dlg)
+            return;
+        if (this.open && !dlg.open) {
+            dlg.showModal();
+            this.indOpen.emit();
+        }
+        else if (!this.open && dlg.open) {
+            dlg.close();
+        }
+    }
+    watchFooter() {
+        const slot = this.host.shadowRoot?.querySelector('slot[name="footer"]');
+        if (!slot)
+            return;
+        const update = () => {
+            this.hasFooter = slot.assignedNodes({ flatten: true }).some((n) => {
+                if (n.nodeType === Node.ELEMENT_NODE)
+                    return true;
+                return n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim().length > 0;
+            });
+        };
+        update();
+        slot.addEventListener('slotchange', update);
+    }
+    /** Programmatically open. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close. */
+    async close() {
+        this.open = false;
+    }
+    onNativeClose = () => {
+        if (this.open) {
+            this.open = false;
+            this.indClose.emit();
+        }
+    };
+    onClick = (e) => {
+        if (!this.closeOnBackdrop)
+            return;
+        // The native <dialog> covers the whole viewport when open via showModal(),
+        // but its bounding box is the content. Clicks outside that box are on the backdrop.
+        const dlg = e.currentTarget;
+        if (e.target !== dlg)
+            return; // ignore clicks bubbling from inside .content
+        const r = dlg.getBoundingClientRect();
+        const inside = e.clientX >= r.left && e.clientX <= r.right &&
+            e.clientY >= r.top && e.clientY <= r.bottom;
+        if (!inside)
+            this.close();
+    };
+    render() {
+        return (index.h(index.Host, { key: '2fc6c8608a86b696f04a42989f9fa89e90c815ca' }, index.h("dialog", { key: '2ace88391803eeacc9ab918906db7ff01f96af05', class: "dialog", part: "dialog", "aria-label": this.heading, onClose: this.onNativeClose, onClick: this.onClick }, index.h("div", { key: '01d6bcd48e243524bf657559407e58ec70995752', class: "content", part: "content" }, this.heading && (index.h("header", { key: '930017b49c0ea7056eb5ec71efd30090bf5d2ef1', class: "header", part: "header" }, index.h("h2", { key: 'be329505ab6c8d2ae4b94ea399c1426c9bb2ca23', class: "heading", part: "heading" }, this.heading), index.h("button", { key: '6943d296514bb4035bc44f292fd9a3be42b96bd7', type: "button", class: "close", part: "close", "aria-label": "Close", onClick: () => this.close() }, "\u00D7"))), index.h("div", { key: '79277205e3a87957a9f4885a80ff2d88ff250615', class: "body", part: "body" }, index.h("slot", { key: 'c1bf7607910c5d5dff0bdaa14f9285be09aecbce' })), index.h("footer", { key: '102f2ea37b063d77f4874c619e134abad87161c9', class: { footer: true, 'is-empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: 'd6068ca633c113c5a9bf6bd87e793a96928ae95e', name: "footer" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+IndDialog.style = dialogCss();
+
+exports.ind_dialog = IndDialog;
+//# sourceMappingURL=ind-dialog.entry.cjs.js.map
+
+//# sourceMappingURL=ind-dialog.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-dialog.cjs.entry.js","mappings":"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","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const dividerCss = () => `:host{display:block;background:var(--ind-surface-border-default, #2a3340);flex-shrink:0}:host([orientation="horizontal"]){width:100%;height:1px}:host([orientation="vertical"]){height:100%;min-height:1em;width:1px}`;
+
+const IndDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    orientation = 'horizontal';
+    render() {
+        return index.h(index.Host, { key: 'eae104b602756afe326c0002f84d926134075e44', role: "separator", "aria-orientation": this.orientation });
+    }
+};
+IndDivider.style = dividerCss();
+
+exports.ind_divider = IndDivider;
+//# sourceMappingURL=ind-divider.entry.cjs.js.map
+
+//# sourceMappingURL=ind-divider.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-divider.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,qNAAqN,CAAC;;MCSnO,UAAU,GAAA,MAAA;;;;IACI,WAAW,GAAuB,YAAY;IAEvE,MAAM,GAAA;QACJ,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAmB,IAAI,CAAC,WAAW,EAAA,CAAI;;;;;;;","names":["h","Host"],"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"],"version":3}

package/dist/cjs/ind-ds.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.5 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('ind-ds.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["ind-app-header.cjs",[[769,"ind-app-header",{"brand":[1],"subBrand":[1,"sub-brand"],"machineId":[1,"machine-id"],"mqttState":[1,"mqtt-state"],"mqttLabel":[1,"mqtt-label"],"version":[1],"docsUrl":[1,"docs-url"],"hideChangeMachine":[4,"hide-change-machine"],"hideDisconnect":[4,"hide-disconnect"]}]]],["ind-fill-row.cjs",[[769,"ind-fill-row",{"tag":[1],"label":[1],"value":[2],"max":[2],"unit":[1],"variant":[513],"severity":[4]}]]],["ind-health-card.cjs",[[513,"ind-health-card",{"heading":[1],"state":[513],"stateLabel":[1,"state-label"],"detail":[1]}]]],["ind-status-bar.cjs",[[769,"ind-status-bar",{"state":[513],"message":[1]}]]],["ind-alarm.cjs",[[513,"ind-alarm",{"priority":[513],"acknowledged":[516],"label":[1],"timestamp":[1]}]]],["ind-button.cjs",[[769,"ind-button",{"variant":[513],"size":[513],"disabled":[516],"label":[1],"holdToConfirmMs":[2,"hold-to-confirm-ms"],"progress":[32]}]]],["ind-checkbox.cjs",[[513,"ind-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"size":[513],"label":[1],"name":[1],"value":[1]},null,{"indeterminate":[{"syncIndeterminate":0}]}]]],["ind-dialog.cjs",[[769,"ind-dialog",{"open":[1540],"heading":[1],"size":[513],"closeOnBackdrop":[4,"close-on-backdrop"],"hasFooter":[32],"show":[64],"close":[64]},null,{"open":[{"onOpenChange":0}]}]]],["ind-divider.cjs",[[513,"ind-divider",{"orientation":[513]}]]],["ind-input.cjs",[[769,"ind-input",{"type":[513],"size":[513],"value":[1025],"placeholder":[1],"disabled":[516],"readonly":[516],"invalid":[516],"label":[1],"name":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"autocomplete":[1],"mode":[1,"inputmode"],"hasFocus":[32],"setFocus":[64]}]]],["ind-led.cjs",[[513,"ind-led",{"state":[513],"size":[513],"blinking":[516],"label":[1]}]]],["ind-mqtt-monitor.cjs",[[513,"ind-mqtt-monitor",{"log":[1],"filterValue":[1025,"filter-value"],"paused":[1028],"rows":[2]},null,{"log":[{"onLogChange":0}]}]]],["ind-nav-item.cjs",[[769,"ind-nav-item",{"active":[516],"disabled":[516],"label":[1],"href":[1],"badge":[8]}]]],["ind-scara-canvas.cjs",[[513,"ind-scara-canvas",{"joints":[1],"linkLengths":[1,"link-lengths"],"state":[513]}]]],["ind-select.cjs",[[513,"ind-select",{"options":[1],"value":[1025],"placeholder":[1],"label":[1],"name":[1],"size":[513],"disabled":[516],"invalid":[516]}]]],["ind-shelf-canvas.cjs",[[513,"ind-shelf-canvas",{"slots":[1],"rows":[2],"cols":[2],"heading":[1]}]]],["ind-sidebar-nav.cjs",[[257,"ind-sidebar-nav"]]],["ind-textarea.cjs",[[513,"ind-textarea",{"value":[1025],"placeholder":[1],"label":[1],"name":[1],"rows":[2],"size":[513],"variant":[513],"disabled":[516],"readonly":[516],"invalid":[516],"autoScroll":[4,"auto-scroll"]},null,{"value":[{"onValueChange":0}]}]]],["ind-toolbar-action.cjs",[[769,"ind-toolbar-action",{"counter":[8]}]]],["ind-value.cjs",[[513,"ind-value",{"value":[8],"unit":[1],"precision":[2],"alarm":[513],"trend":[513],"size":[513],"label":[1],"tag":[1]}]]],["ind-valve.cjs",[[513,"ind-valve",{"state":[513],"orientation":[513],"size":[513],"label":[1],"tag":[1]}]]],["ind-progress.cjs",[[513,"ind-progress",{"value":[2],"max":[2],"variant":[513],"size":[513],"label":[1],"showValue":[4,"show-value"],"unit":[1],"indeterminate":[516]}]]],["ind-status-dot.cjs",[[513,"ind-status-dot",{"state":[513],"size":[513],"blinking":[516],"label":[1]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+//# sourceMappingURL=ind-ds.cjs.js.map
+
+//# sourceMappingURL=ind-ds.cjs.js.map

package/dist/cjs/ind-ds.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-ds.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.43.5/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.5 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,+PAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/cjs/ind-fill-row.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const fillRowCss = () => `: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 IndFillRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Short ID rendered in mono (e.g. "F1", "TK-101"). */
+    tag;
+    /** Human description. */
+    label;
+    /** Current level. */
+    value = 0;
+    /** Max value. Default 100. */
+    max = 100;
+    /** Unit suffix on the numeric value (default `%`). */
+    unit = '%';
+    /** Drives the progress color and the severity glyph. */
+    variant = 'default';
+    /** Render the severity glyph between the value and the actions. */
+    severity = false;
+    render() {
+        return (index.h(index.Host, { key: '58a3405e85cdc048d8efe47d3f4c1c010bc94318' }, this.tag && index.h("span", { key: 'afe363e1253cbf40db6e9a61001a5654d2b3dfcd', class: "tag", part: "tag" }, this.tag), index.h("span", { key: '8854993e5011b07756acb62914e3cd8c16e17ea8', class: "label", part: "label" }, this.label), index.h("ind-progress", { key: '67b5c4f3d210cbf1df3dd3765b9293482e47d040', class: "progress", part: "progress", value: this.value, max: this.max, variant: this.variant, size: "sm" }), index.h("span", { key: '4bfde6d18d08e3bd8ede25a769b2776a8720a80b', class: "value", part: "value" }, Math.round(this.value), this.unit ? ' ' + this.unit : ''), this.severity && (index.h("span", { key: 'fd0cf71dd4cae3e5c4404da29e0232e42e6e3642', class: "severity", part: "severity", "aria-hidden": "true" }, "\u26A0")), index.h("span", { key: '663240206f948685c4235fbb9057450bc0874c0f', class: "actions", part: "actions" }, index.h("slot", { key: '7c924c36ed5e348bc7262a7c50c0673ce102b8ae' }))));
+    }
+};
+IndFillRow.style = fillRowCss();
+
+exports.ind_fill_row = IndFillRow;
+//# sourceMappingURL=ind-fill-row.entry.cjs.js.map
+
+//# sourceMappingURL=ind-fill-row.cjs.entry.js.map

package/dist/cjs/ind-fill-row.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-fill-row.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,8+CAA8+C,CAAC;;MCS5/C,UAAU,GAAA,MAAA;;;;;AAEb,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEL,KAAK,GAAW,CAAC;;IAEjB,GAAG,GAAW,GAAG;;IAEjB,IAAI,GAAW,GAAG;;IAED,OAAO,GAAmB,SAAS;;IAEpD,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,GAAG,IAAID,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC3DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACpDA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAsD,EACpE,IAAI,EAAC,IAAI,EAAA,CACT,EACFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CACpD,EACN,IAAI,CAAC,QAAQ,KACZA,mEAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAA,aAAA,EAAa,MAAM,aAAS,CACnE,EACDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAClCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACF;;;;;;;","names":["h","Host"],"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"],"version":3}