@ind-ds/core 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,5 @@
+'use strict';
+
+//# sourceMappingURL=index.cjs.js.map
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  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;
+exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,35 @@
+{
+  "entries": [
+    "components/atoms/alarm/alarm.js",
+    "components/organisms/app-header/app-header.js",
+    "components/atoms/button/button.js",
+    "components/atoms/checkbox/checkbox.js",
+    "components/atoms/dialog/dialog.js",
+    "components/atoms/divider/divider.js",
+    "components/molecules/fill-row/fill-row.js",
+    "components/molecules/health-card/health-card.js",
+    "components/atoms/input/input.js",
+    "components/atoms/led/led.js",
+    "components/atoms/progress/progress.js",
+    "components/atoms/scara-canvas/scara-canvas.js",
+    "components/atoms/select/select.js",
+    "components/atoms/shelf-canvas/shelf-canvas.js",
+    "components/organisms/status-bar/status-bar.js",
+    "components/atoms/status-dot/status-dot.js",
+    "components/atoms/textarea/textarea.js",
+    "components/atoms/value/value.js",
+    "components/atoms/valve/valve.js",
+    "components/molecules/nav-item/nav-item.js",
+    "components/molecules/toolbar-action/toolbar-action.js",
+    "components/organisms/mqtt-monitor/mqtt-monitor.js",
+    "components/organisms/sidebar-nav/sidebar-nav.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.5",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/atoms/alarm/alarm.css

@@ -0,0 +1,87 @@
+: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);
+}
+
+/* Unacknowledged → blink at the priority-appropriate rate. */
+: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);
+}
+
+/* Acknowledged → muted, no animation (ISA-18.2 convention). */
+: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;
+  }
+}

package/dist/collection/components/atoms/alarm/alarm.js

@@ -0,0 +1,122 @@
+import { h, Host } from "@stencil/core";
+const PRIORITY_LABEL = {
+    'high-high': 'HH',
+    'high': 'H',
+    'low': 'L',
+    'low-low': 'LL',
+};
+export class IndAlarm {
+    /** 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 (h(Host, { key: '4aa256413a1b908acbe8dda509a7524fbd3c50df', role: "alert", "aria-live": this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite', "aria-atomic": "true" }, h("span", { key: '19ee856cc6f4ee90f0db296fae69547c8bfa9c0f', class: "badge", part: "badge", "aria-label": `priority ${prio}` }, prio), h("span", { key: '54e66ef997a6ed665e4f0d59f87532368103d686', class: "label", part: "label" }, this.label), this.timestamp && (h("time", { key: '954956c17cce6c16df50710c6eb12fad827e8c45', class: "timestamp", part: "timestamp", dateTime: this.timestamp }, this.timestamp))));
+    }
+    static get is() { return "ind-alarm"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alarm.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alarm.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "priority": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlarmPriority",
+                    "resolved": "\"high\" | \"high-high\" | \"low\" | \"low-low\"",
+                    "references": {
+                        "AlarmPriority": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/alarm/alarm.tsx",
+                            "id": "src/components/atoms/alarm/alarm.tsx::AlarmPriority"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ISA-18.2 alarm priority."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "priority",
+                "defaultValue": "'high'"
+            },
+            "acknowledged": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When false, the chip blinks (per ISA-18.2 unack convention)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "acknowledged",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required human description of the alarm."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional ISO-8601 timestamp. Rendered with `<time>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timestamp"
+            }
+        };
+    }
+}
+//# sourceMappingURL=alarm.js.map

package/dist/collection/components/atoms/alarm/alarm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alarm.js","sourceRoot":"","sources":["../../../../src/components/atoms/alarm/alarm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD,MAAM,cAAc,GAAkC;IACpD,WAAW,EAAE,IAAI;IACjB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,IAAI;CAChB,CAAC;AAOF,MAAM,OAAO,QAAQ;IACnB,+BAA+B;IACN,QAAQ,GAAkB,MAAM,CAAC;IAE1D,mEAAmE;IAC1C,YAAY,GAAY,KAAK,CAAC;IAEvD,+CAA+C;IACvC,KAAK,CAAU;IAEvB,2DAA2D;IACnD,SAAS,CAAU;IAE3B,MAAM;QACJ,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,eAEV,IAAI,CAAC,QAAQ,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,iBAElE,MAAM;YAElB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,gBAAa,YAAY,IAAI,EAAE,IAAG,IAAI,CAAQ;YAC9E,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,IAC9D,IAAI,CAAC,SAAS,CACV,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/atoms/button/button.css

@@ -0,0 +1,110 @@
+: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;
+}

package/dist/collection/components/atoms/button/button.js

@@ -0,0 +1,215 @@
+import { h, Host, } from "@stencil/core";
+export class IndButton {
+    /** 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 (h(Host, { key: 'bbafede18f13eac5486d9cae0c2bd727375e7762' }, 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 }, h("span", { key: '75252fda5e1229f6c335df277b0c09a18d0b621d', class: "content", part: "content" }, h("slot", { key: 'f9a158deadf76da0cf1e13680c1b1dd444273387' }, this.label)), this.holdToConfirmMs > 0 && (h("span", { key: '7ba778902c08b3d8fe6b1c6a963c4ab645369110', class: "hold-progress", part: "hold-progress", style: { transform: `scaleX(${this.progress})` }, "aria-hidden": "true" }))), this.holdToConfirmMs > 0 && (h("span", { key: '9c2f72de9486bfed4855c5dc81dbf54161c97842', id: "hold-hint", class: "sr-only" }, "Hold to confirm (", this.holdToConfirmMs, " ms)"))));
+    }
+    static get is() { return "ind-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"danger\" | \"default\" | \"ghost\" | \"primary\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/button/button.tsx",
+                            "id": "src/components/atoms/button/button.tsx::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant. `danger` should be paired with `holdToConfirmMs` for critical actions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/button/button.tsx",
+                            "id": "src/components/atoms/button/button.tsx::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accessible label (falls back to slotted text)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "holdToConfirmMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If > 0, the button must be held this many milliseconds before activating.\nUse for critical actions (Stop, Trip, Reset) to prevent accidental clicks \u2014\nstandard NAMUR / safety-instrumented operating practice."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hold-to-confirm-ms",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "progress": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indActivate",
+                "name": "indActivate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on click (or after hold completes if `holdToConfirmMs > 0`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=button.js.map

package/dist/collection/components/atoms/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/atoms/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}