@ind-ds/core 0.1.1 → 0.2.0

package/dist/esm/ind-historian-viewer.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const historianViewerCss = () => `:host{min-width:320px}.overview{padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle)}.overview ind-sparkline{width:100%;height:48px}.panel-list{max-height:360px}`;
+
+const IndHistorianViewer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    heading = 'Historian';
+    /** Tag being viewed. */
+    tag;
+    /** Engineering unit. */
+    unit;
+    /** Decimal places for the rows. */
+    precision;
+    /** Samples, most-recent first. */
+    samples = [];
+    numericPoints() {
+        return this.samples
+            .map((s) => (typeof s.value === 'number' ? s.value : parseFloat(String(s.value))))
+            .filter((n) => Number.isFinite(n))
+            .reverse();
+    }
+    render() {
+        const points = this.numericPoints();
+        return (h(Host, { key: '10019df17732d6cbfb6d65e4bbc859c9cf8a64dd' }, h("div", { key: '9f19344ace66e13d1eba3e778362f773eda4c9ef', class: "panel-head" }, h("div", { key: '7d298a252035e7b64a337526c2aab6d19d3b7246', class: "panel-titles" }, h("span", { key: '70697ae5c11a33b66b0a80c6e415543b4644086f', class: "panel-title", part: "heading" }, this.heading), this.tag && h("span", { key: '872d9b1ce0819d7854aebd3b4283d3c0a8daa1cc', class: "panel-subtitle" }, this.tag, this.unit ? ` · ${this.unit}` : ''))), points.length > 1 && (h("div", { key: 'cfdf79ae225510f3eab12c89a549a878083e5d82', class: "overview", part: "overview" }, h("ind-sparkline", { key: '6ae7ef7da3acb52b415fefb25441c553b1bdac77', points: points, variant: "default", area: true }))), h("div", { key: '3bc0acc77904b401b450ccf739757e7228f266f6', class: "panel-list", part: "list" }, this.samples.length === 0 ? (h("div", { class: "panel-empty" }, "No samples")) : (this.samples.map((s, i) => (h("ind-historical-value-row", { key: i, time: s.time, value: s.value, unit: this.unit, precision: this.precision, quality: s.quality ?? 'good' })))))));
+    }
+};
+IndHistorianViewer.style = panelCss() + historianViewerCss();
+
+export { IndHistorianViewer as ind_historian_viewer };
+//# sourceMappingURL=ind-historian-viewer.entry.js.map
+
+//# sourceMappingURL=ind-historian-viewer.entry.js.map

package/dist/esm/ind-historian-viewer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-historian-viewer.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-historian-viewer&encapsulation=shadow","src/components/organisms/historian-viewer/historian-viewer.css?tag=ind-historian-viewer&encapsulation=shadow","src/components/organisms/historian-viewer/historian-viewer.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 320px;\n}\n\n.overview {\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n}\n\n.overview ind-sparkline {\n  width: 100%;\n  height: 48px;\n}\n\n.panel-list {\n  max-height: 360px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { DataQuality } from '../../molecules/historical-value-row/historical-value-row';\n\nexport interface HistorianSample {\n  time: string;\n  value: number | string;\n  quality?: DataQuality;\n}\n\n/**\n * Tabular history viewer for a single tag: header with tag/unit, an optional\n * sparkline overview, and a scrolling list of `<ind-historical-value-row>`s.\n */\n@Component({\n  tag: 'ind-historian-viewer',\n  styleUrls: ['../_shared/panel.css', 'historian-viewer.css'],\n  shadow: true,\n})\nexport class IndHistorianViewer {\n  @Prop() heading: string = 'Historian';\n  /** Tag being viewed. */\n  @Prop() tag?: string;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Decimal places for the rows. */\n  @Prop() precision?: number;\n  /** Samples, most-recent first. */\n  @Prop() samples: HistorianSample[] = [];\n\n  private numericPoints(): number[] {\n    return this.samples\n      .map((s) => (typeof s.value === 'number' ? s.value : parseFloat(String(s.value))))\n      .filter((n) => Number.isFinite(n))\n      .reverse();\n  }\n\n  render() {\n    const points = this.numericPoints();\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.tag && <span class=\"panel-subtitle\">{this.tag}{this.unit ? ` · ${this.unit}` : ''}</span>}\n          </div>\n        </div>\n        {points.length > 1 && (\n          <div class=\"overview\" part=\"overview\">\n            <ind-sparkline points={points} variant=\"default\" area></ind-sparkline>\n          </div>\n        )}\n        <div class=\"panel-list\" part=\"list\">\n          {this.samples.length === 0 ? (\n            <div class=\"panel-empty\">No samples</div>\n          ) : (\n            this.samples.map((s, i) => (\n              <ind-historical-value-row\n                key={i}\n                time={s.time}\n                value={s.value}\n                unit={this.unit}\n                precision={this.precision}\n                quality={s.quality ?? 'good'}\n              />\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,kBAAkB,GAAG,MAAM,CAAC,kOAAkO,CAAC;;MCkBxP,kBAAkB,GAAA,MAAA;;;;IACrB,OAAO,GAAW,WAAW;;AAE7B,IAAA,GAAG;;AAEH,IAAA,IAAI;;AAEJ,IAAA,SAAS;;IAET,OAAO,GAAsB,EAAE;IAE/B,aAAa,GAAA;QACnB,OAAO,IAAI,CAAC;AACT,aAAA,GAAG,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAChF,aAAA,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAChC,aAAA,OAAO,EAAE;;IAGd,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE;AACnC,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,GAAG,CAAA,GAAA,EAAM,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAQ,CAC3F,CACF,EACL,MAAM,CAAC,MAAM,GAAG,CAAC,KAChB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAA,EACnC,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAA,IAAA,EAAA,CAAiB,CAClE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EAChC,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,IACxB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EAAA,YAAA,CAAiB,KAEzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACpB,CAAA,CAAA,0BAAA,EAAA,EACE,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,MAAM,GAC5B,CACH,CAAC,CACH,CACG,CACD;;;;;;;"}

package/dist/esm/ind-historical-value-row.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const rowCss = () => `:host{display:grid;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);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));border-bottom:1px solid var(--ind-surface-border-subtle);box-sizing:border-box;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.time{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));white-space:nowrap}.tag{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));white-space:nowrap}.msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const historicalValueRowCss = () => `:host{grid-template-columns:1fr auto auto}.value{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-medium, 500);text-align:right}.unit{color:var(--ind-surface-text-secondary);font-weight:var(--ind-font-weight-regular, 400)}.quality{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.04em;padding:1px 5px;border-radius:var(--ind-radius-sm, 2px);white-space:nowrap}.quality-good{color:var(--ind-state-running-bg, #16a34a);background:color-mix(in srgb, var(--ind-state-running-bg, #16a34a) 16%, transparent)}.quality-uncertain{color:var(--ind-state-warning-bg, #f59e0b);background:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 16%, transparent)}.quality-bad{color:var(--ind-state-fault-bg, #dc2626);background:color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 16%, transparent)}`;
+
+const QUALITY_LABEL = {
+    good: 'Good',
+    uncertain: 'Uncertain',
+    bad: 'Bad',
+};
+const IndHistoricalValueRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Pre-formatted timestamp. */
+    time;
+    /** Sample value. */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Decimal places when numeric. */
+    precision;
+    /** Data quality flag. */
+    quality = 'good';
+    formatted() {
+        if (typeof this.value === 'string')
+            return this.value;
+        if (!Number.isFinite(this.value))
+            return '--';
+        if (this.precision !== undefined)
+            return this.value.toFixed(this.precision);
+        return String(this.value);
+    }
+    render() {
+        return (h(Host, { key: '0f9964bb0b57a48ec321af617c73c49bbdba379f', role: "row", "aria-label": `${this.time}: ${this.formatted()} ${this.unit ?? ''}, ${QUALITY_LABEL[this.quality]}` }, h("span", { key: '17f0412c066e28d2c00c8a87296aeb0898b4e1b0', class: "time", part: "time" }, this.time), h("span", { key: '01a0b99d35321fe7fbc2579b75dc34b438aa695b', class: "value", part: "value" }, this.formatted(), this.unit && h("span", { key: 'b778bcf0adcf60bd0c6826bc886b31a2dfc1e92b', class: "unit", part: "unit" }, " ", this.unit)), h("span", { key: '9145c8be49a4e8f4f8f000a0888a61fe06858dfa', class: `quality quality-${this.quality}`, part: "quality" }, QUALITY_LABEL[this.quality])));
+    }
+};
+IndHistoricalValueRow.style = rowCss() + historicalValueRowCss();
+
+export { IndHistoricalValueRow as ind_historical_value_row };
+//# sourceMappingURL=ind-historical-value-row.entry.js.map
+
+//# sourceMappingURL=ind-historical-value-row.entry.js.map

package/dist/esm/ind-historical-value-row.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-historical-value-row.entry.js","sources":["src/components/molecules/_shared/row.css?tag=ind-historical-value-row&encapsulation=shadow","src/components/molecules/historical-value-row/historical-value-row.css?tag=ind-historical-value-row&encapsulation=shadow","src/components/molecules/historical-value-row/historical-value-row.tsx"],"sourcesContent":["/* Shared chrome for log-style molecule rows (alarm, event, audit, historical).\n * Each component sets its own grid-template-columns. */\n:host {\n  display: grid;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);\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  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  box-sizing: border-box;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.time {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  white-space: nowrap;\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  white-space: nowrap;\n}\n\n.msg {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n",":host {\n  grid-template-columns: 1fr auto auto;\n}\n\n.value {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-medium, 500);\n  text-align: right;\n}\n\n.unit {\n  color: var(--ind-surface-text-secondary);\n  font-weight: var(--ind-font-weight-regular, 400);\n}\n\n.quality {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 1px 5px;\n  border-radius: var(--ind-radius-sm, 2px);\n  white-space: nowrap;\n}\n\n.quality-good { color: var(--ind-state-running-bg, #16a34a); background: color-mix(in srgb, var(--ind-state-running-bg, #16a34a) 16%, transparent); }\n.quality-uncertain { color: var(--ind-state-warning-bg, #f59e0b); background: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 16%, transparent); }\n.quality-bad { color: var(--ind-state-fault-bg, #dc2626); background: color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 16%, transparent); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DataQuality = 'good' | 'uncertain' | 'bad';\n\nconst QUALITY_LABEL: Record<DataQuality, string> = {\n  good: 'Good',\n  uncertain: 'Uncertain',\n  bad: 'Bad',\n};\n\n/**\n * One sample in a historical / trend table: timestamp, value with unit and an\n * OPC-style data quality flag. Read-only.\n */\n@Component({\n  tag: 'ind-historical-value-row',\n  styleUrls: ['../_shared/row.css', 'historical-value-row.css'],\n  shadow: true,\n})\nexport class IndHistoricalValueRow {\n  /** Pre-formatted timestamp. */\n  @Prop() time!: string;\n  /** Sample value. */\n  @Prop() value!: number | string;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Decimal places when numeric. */\n  @Prop() precision?: number;\n  /** Data quality flag. */\n  @Prop({ reflect: true }) quality: DataQuality = 'good';\n\n  private formatted(): string {\n    if (typeof this.value === 'string') return this.value;\n    if (!Number.isFinite(this.value)) return '--';\n    if (this.precision !== undefined) return this.value.toFixed(this.precision);\n    return String(this.value);\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" aria-label={`${this.time}: ${this.formatted()} ${this.unit ?? ''}, ${QUALITY_LABEL[this.quality]}`}>\n        <span class=\"time\" part=\"time\">{this.time}</span>\n        <span class=\"value\" part=\"value\">\n          {this.formatted()}\n          {this.unit && <span class=\"unit\" part=\"unit\"> {this.unit}</span>}\n        </span>\n        <span class={`quality quality-${this.quality}`} part=\"quality\">{QUALITY_LABEL[this.quality]}</span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,iyBAAiyB,CAAC;;ACAxzB,MAAM,qBAAqB,GAAG,MAAM,CAAC,y3BAAy3B,CAAC;;ACI/5B,MAAM,aAAa,GAAgC;AACjD,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,GAAG,EAAE,KAAK;CACX;MAWY,qBAAqB,GAAA,MAAA;;;;;AAExB,IAAA,IAAI;;AAEJ,IAAA,KAAK;;AAEL,IAAA,IAAI;;AAEJ,IAAA,SAAS;;IAEQ,OAAO,GAAgB,MAAM;IAE9C,SAAS,GAAA;AACf,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK;QACrD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;AAC7C,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3E,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,EAAA,EAAK,IAAI,CAAC,SAAS,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA,EAAA,EAAK,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA,CAAE,EAAA,EACjH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,OAAG,IAAI,CAAC,IAAI,CAAQ,CAC3D,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC9F;;;;;;;"}

package/dist/esm/ind-icon.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const iconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;color:currentColor;--_size:16px}:host([size="sm"]){--_size:12px}:host([size="md"]){--_size:16px}:host([size="lg"]){--_size:24px}.icon{width:var(--_size);height:var(--_size);display:block}.icon path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}::slotted(svg){width:var(--_size);height:var(--_size)}`;
+
+const PATHS = {
+    alarm: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',
+    bell: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',
+    gear: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 12l-1.5-1 1-3 1.8.3a6.9 6.9 0 0 1 1.5-1.5L6.5 4l3-1L11 4.5a7 7 0 0 1 2 0L14.5 3l3 1-.3 1.8a7 7 0 0 1 1.5 1.5l1.8-.3 1 3-1.5 1a7 7 0 0 1 0 2l1.5 1-1 3-1.8-.3a7 7 0 0 1-1.5 1.5l.3 1.8-3 1-1.5-1.5a7 7 0 0 1-2 0L9.5 21l-3-1 .3-1.8A6.9 6.9 0 0 1 5.3 16.7L3.5 17l-1-3 1.5-1a7 7 0 0 1 0-2z',
+    home: 'M3 11l9-8 9 8M5 10v10h5v-6h4v6h5V10',
+    'chevron-right': 'M9 5l7 7-7 7',
+    'chevron-down': 'M5 9l7 7 7-7',
+    check: 'M4 12l5 5 11-11',
+    close: 'M5 5l14 14M19 5L5 19',
+    warning: 'M12 3l10 18H2L12 3zM12 9v5M12 17.5v.5',
+    info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v6M12 7.5v.5',
+    power: 'M12 3v9M7 6a8 8 0 1 0 10 0',
+    refresh: 'M4 12a8 8 0 0 1 14-5l2 2M20 12a8 8 0 0 1-14 5l-2-2M18 3v4h-4M6 21v-4h4',
+    play: 'M7 4l13 8-13 8z',
+    pause: 'M8 4v16M16 4v16',
+    stop: 'M5 5h14v14H5z',
+    wrench: 'M21 5a4 4 0 0 1-5 5L7 19l-3-3 9-9a4 4 0 0 1 5-5l-3 3 1 1 3-3z',
+};
+const IndIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Built-in icon name. Omit and use the default slot to pass a custom SVG. */
+    name;
+    /** Size. */
+    size = 'md';
+    /** Accessible label. When omitted the icon is decorative (aria-hidden). */
+    label;
+    render() {
+        const decorative = !this.label;
+        const d = this.name ? PATHS[this.name] : undefined;
+        return (h(Host, { key: '09bb726a67eb425c8bd200ac5371da86bab85b63', role: decorative ? 'presentation' : 'img', "aria-label": this.label, "aria-hidden": decorative ? 'true' : undefined }, d ? (h("svg", { class: "icon", part: "icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: d }))) : (h("slot", null))));
+    }
+};
+IndIcon.style = iconCss();
+
+export { IndIcon as ind_icon };
+//# sourceMappingURL=ind-icon.entry.js.map
+
+//# sourceMappingURL=ind-icon.entry.js.map

package/dist/esm/ind-icon.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-icon.entry.js","sources":["src/components/atoms/icon/icon.css?tag=ind-icon&encapsulation=shadow","src/components/atoms/icon/icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: currentColor;\n  --_size: 16px;\n}\n\n:host([size=\"sm\"]) { --_size: 12px; }\n:host([size=\"md\"]) { --_size: 16px; }\n:host([size=\"lg\"]) { --_size: 24px; }\n\n.icon {\n  width: var(--_size);\n  height: var(--_size);\n  display: block;\n}\n\n.icon path {\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.75;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n::slotted(svg) {\n  width: var(--_size);\n  height: var(--_size);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type IconName =\n  | 'alarm'\n  | 'bell'\n  | 'gear'\n  | 'home'\n  | 'chevron-right'\n  | 'chevron-down'\n  | 'check'\n  | 'close'\n  | 'warning'\n  | 'info'\n  | 'power'\n  | 'refresh'\n  | 'play'\n  | 'pause'\n  | 'stop'\n  | 'wrench';\n\nexport type IconSize = 'sm' | 'md' | 'lg';\n\nconst PATHS: Record<IconName, string> = {\n  alarm: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',\n  bell: 'M12 3a6 6 0 0 0-6 6v3l-2 3h16l-2-3V9a6 6 0 0 0-6-6zM10 19a2 2 0 0 0 4 0',\n  gear: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 12l-1.5-1 1-3 1.8.3a6.9 6.9 0 0 1 1.5-1.5L6.5 4l3-1L11 4.5a7 7 0 0 1 2 0L14.5 3l3 1-.3 1.8a7 7 0 0 1 1.5 1.5l1.8-.3 1 3-1.5 1a7 7 0 0 1 0 2l1.5 1-1 3-1.8-.3a7 7 0 0 1-1.5 1.5l.3 1.8-3 1-1.5-1.5a7 7 0 0 1-2 0L9.5 21l-3-1 .3-1.8A6.9 6.9 0 0 1 5.3 16.7L3.5 17l-1-3 1.5-1a7 7 0 0 1 0-2z',\n  home: 'M3 11l9-8 9 8M5 10v10h5v-6h4v6h5V10',\n  'chevron-right': 'M9 5l7 7-7 7',\n  'chevron-down': 'M5 9l7 7 7-7',\n  check: 'M4 12l5 5 11-11',\n  close: 'M5 5l14 14M19 5L5 19',\n  warning: 'M12 3l10 18H2L12 3zM12 9v5M12 17.5v.5',\n  info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v6M12 7.5v.5',\n  power: 'M12 3v9M7 6a8 8 0 1 0 10 0',\n  refresh: 'M4 12a8 8 0 0 1 14-5l2 2M20 12a8 8 0 0 1-14 5l-2-2M18 3v4h-4M6 21v-4h4',\n  play: 'M7 4l13 8-13 8z',\n  pause: 'M8 4v16M16 4v16',\n  stop: 'M5 5h14v14H5z',\n  wrench: 'M21 5a4 4 0 0 1-5 5L7 19l-3-3 9-9a4 4 0 0 1 5-5l-3 3 1 1 3-3z',\n};\n\n@Component({\n  tag: 'ind-icon',\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class IndIcon {\n  /** Built-in icon name. Omit and use the default slot to pass a custom SVG. */\n  @Prop({ reflect: true }) name?: IconName;\n  /** Size. */\n  @Prop({ reflect: true }) size: IconSize = 'md';\n  /** Accessible label. When omitted the icon is decorative (aria-hidden). */\n  @Prop() label?: string;\n\n  render() {\n    const decorative = !this.label;\n    const d = this.name ? PATHS[this.name] : undefined;\n    return (\n      <Host role={decorative ? 'presentation' : 'img'} aria-label={this.label} aria-hidden={decorative ? 'true' : undefined}>\n        {d ? (\n          <svg class=\"icon\" part=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d={d} />\n          </svg>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2ZAA2Z,CAAC;;ACsBnb,MAAM,KAAK,GAA6B;AACtC,IAAA,KAAK,EAAE,yEAAyE;AAChF,IAAA,IAAI,EAAE,yEAAyE;AAC/E,IAAA,IAAI,EAAE,iUAAiU;AACvU,IAAA,IAAI,EAAE,qCAAqC;AAC3C,IAAA,eAAe,EAAE,cAAc;AAC/B,IAAA,cAAc,EAAE,cAAc;AAC9B,IAAA,KAAK,EAAE,iBAAiB;AACxB,IAAA,KAAK,EAAE,sBAAsB;AAC7B,IAAA,OAAO,EAAE,uCAAuC;AAChD,IAAA,IAAI,EAAE,yDAAyD;AAC/D,IAAA,KAAK,EAAE,4BAA4B;AACnC,IAAA,OAAO,EAAE,wEAAwE;AACjF,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE,iBAAiB;AACxB,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,MAAM,EAAE,+DAA+D;CACxE;MAOY,OAAO,GAAA,MAAA;;;;;AAEO,IAAA,IAAI;;IAEJ,IAAI,GAAa,IAAI;;AAEtC,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK;AAC9B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS;QAClD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,KAAK,EAAA,YAAA,EAAc,IAAI,CAAC,KAAK,EAAA,aAAA,EAAe,UAAU,GAAG,MAAM,GAAG,SAAS,EAAA,EAClH,CAAC,IACA,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EAClE,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,CAAC,EAAA,CAAI,CACV,KAEN,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACT,CACI;;;;;;;"}

package/dist/esm/ind-knob_3.entry.js

@@ -0,0 +1,194 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bls_NlWP.js';
+
+const knobCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_size:44px}:host([size="sm"]){--_size:32px}:host([size="lg"]){--_size:64px}.knob{width:var(--_size);height:var(--_size);border-radius:50%;background:radial-gradient(circle at 50% 35%, #3a434f, #1b222c 75%);border:1px solid var(--ind-surface-border-strong, #5a6776);box-shadow:inset 0 2px 4px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5);cursor:ns-resize;touch-action:none;position:relative}:host([disabled]) .knob{cursor:not-allowed;opacity:0.5}.knob:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:3px}.dial{position:absolute;inset:0;transition:transform var(--ind-motion-duration-fast, 120ms) ease}.pointer{position:absolute;top:8%;left:50%;width:2px;height:32%;transform:translateX(-50%);background:var(--ind-button-primary-bg, #60a5fa);border-radius:1px}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.label{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.value{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}@media (prefers-reduced-motion: reduce){.dial{transition:none}}`;
+
+const IndKnob = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indInput = createEvent(this, "indInput");
+        this.indChange = createEvent(this, "indChange");
+    }
+    get host() { return getElement(this); }
+    /** Current value. */
+    value = 0;
+    /** Minimum. */
+    min = 0;
+    /** Maximum. */
+    max = 100;
+    /** Step for keyboard / drag. */
+    step = 1;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Label. */
+    label;
+    /** Unit suffix. */
+    unit;
+    /** Show the numeric value below the knob. */
+    showValue = true;
+    dragging = false;
+    /** Fires continuously while turning. */
+    indInput;
+    /** Fires on release. */
+    indChange;
+    startY = 0;
+    startVal = 0;
+    clamp(v) {
+        return Math.max(this.min, Math.min(this.max, v));
+    }
+    angle() {
+        const span = this.max - this.min || 1;
+        const ratio = (this.value - this.min) / span;
+        return -135 + ratio * 270;
+    }
+    setValue(v, commit = false) {
+        const next = this.clamp(Math.round(v / this.step) * this.step);
+        if (next !== this.value) {
+            this.value = next;
+            this.indInput.emit(next);
+        }
+        if (commit)
+            this.indChange.emit(this.value);
+    }
+    onPointerDown = (e) => {
+        if (this.disabled)
+            return;
+        this.dragging = true;
+        this.startY = e.clientY;
+        this.startVal = this.value;
+        e.target.setPointerCapture?.(e.pointerId);
+    };
+    onPointerMove = (e) => {
+        if (!this.dragging)
+            return;
+        const dy = this.startY - e.clientY;
+        const span = this.max - this.min;
+        this.setValue(this.startVal + (dy / 120) * span);
+    };
+    onPointerUp = () => {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        this.indChange.emit(this.value);
+    };
+    onKey = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            this.setValue(this.value + this.step, true);
+        }
+        else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            this.setValue(this.value - this.step, true);
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            this.setValue(this.min, true);
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            this.setValue(this.max, true);
+        }
+    };
+    render() {
+        return (h(Host, { key: '2780b654474f735a038ffb9132235a0c35dcba4d' }, h("div", { key: '2ef194639267e1c217da5391cb07323ba97fa6b0', class: "knob", part: "knob", role: "slider", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? undefined : '0', onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onKeyDown: this.onKey }, h("span", { key: '30cee136350a8d75c00315d37757533d6c2ebc09', class: "dial", part: "dial", style: { transform: `rotate(${this.angle()}deg)` } }, h("span", { key: '31b82d98c1ff65bb86da7d1cf44e119f58f519ed', class: "pointer", part: "pointer" }))), (this.label || this.showValue) && (h("div", { key: '23b659182311e0a82789eb53360839c50b03c0c7', class: "caption", part: "caption" }, this.label && h("span", { key: 'a568a65383f51aa298c6f0628a8b8d94f41b64d9', class: "label", part: "label" }, this.label), this.showValue && (h("span", { key: 'c66ac7584404b3ecf768076e681a48fb836bec6d', class: "value", part: "value" }, this.value, this.unit ? ` ${this.unit}` : ''))))));
+    }
+};
+IndKnob.style = knobCss();
+
+const sliderCss = () => `:host{display:block;font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_track-h:4px;--_thumb:14px;--_accent:var(--ind-button-primary-bg, #2563eb)}:host([size="sm"]){--_track-h:3px;--_thumb:11px}:host([size="lg"]){--_track-h:6px;--_thumb:18px}.header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ind-spacing-3, 6px);margin-bottom:var(--ind-spacing-2, 4px);font-size:var(--ind-font-size-base, 12px)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.value{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.range{-webkit-appearance:none;appearance:none;width:100%;height:var(--_thumb);background:transparent;cursor:pointer;margin:0}.range:disabled{cursor:not-allowed;opacity:0.5}.range::-webkit-slider-runnable-track{height:var(--_track-h);border-radius:var(--ind-radius-full, 9999px);background:linear-gradient(     to right,     var(--_accent) 0 var(--_pct, 0%),     var(--ind-surface-border-default, #2a3340) var(--_pct, 0%) 100%   )}.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--_thumb);height:var(--_thumb);margin-top:calc((var(--_track-h) - var(--_thumb)) / 2);border-radius:50%;background:#fff;border:2px solid var(--_accent);box-shadow:0 1px 3px rgba(0, 0, 0, 0.4)}.range::-moz-range-track{height:var(--_track-h);border-radius:var(--ind-radius-full, 9999px);background:var(--ind-surface-border-default, #2a3340)}.range::-moz-range-progress{height:var(--_track-h);border-radius:var(--ind-radius-full, 9999px);background:var(--_accent)}.range::-moz-range-thumb{width:var(--_thumb);height:var(--_thumb);border-radius:50%;background:#fff;border:2px solid var(--_accent)}.range:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:4px;border-radius:var(--ind-radius-sm, 2px)}`;
+
+const IndSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indInput = createEvent(this, "indInput");
+        this.indChange = createEvent(this, "indChange");
+    }
+    /** Current value. */
+    value = 0;
+    /** Minimum. */
+    min = 0;
+    /** Maximum. */
+    max = 100;
+    /** Step. */
+    step = 1;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible label. */
+    label;
+    /** Unit suffix shown with the value. */
+    unit;
+    /** Show the current value next to the label. */
+    showValue = true;
+    /** Fires on every change while dragging. */
+    indInput;
+    /** Fires on commit (mouse up / keyboard). */
+    indChange;
+    onInput = (e) => {
+        const v = Number(e.target.value);
+        this.value = v;
+        this.indInput.emit(v);
+    };
+    onChange = (e) => {
+        this.indChange.emit(Number(e.target.value));
+    };
+    percent() {
+        const span = this.max - this.min || 1;
+        return ((this.value - this.min) / span) * 100;
+    }
+    render() {
+        return (h(Host, { key: '60ef2f0f415c431fbcddca469fb7cb5e44ecc194' }, (this.label || this.showValue) && (h("div", { key: 'e94c6f2a029460ac19ece73f72663889512f64b2', class: "header", part: "header" }, this.label && h("span", { key: 'e9e7367004d1ca23a594a4d010d4dade6e9f5573', class: "label", part: "label" }, this.label), this.showValue && (h("span", { key: '8848b531da6f87ef75b33be18dfe398cf6ec978a', class: "value", part: "value" }, this.value, this.unit ? ` ${this.unit}` : '')))), h("input", { key: '53cee697d1274af909a66b45633bba1525a28fcf', class: "range", part: "range", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, "aria-label": this.label, style: { '--_pct': `${this.percent()}%` }, onInput: this.onInput, onChange: this.onChange })));
+    }
+};
+IndSlider.style = sliderCss();
+
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+
+const speedControlCss = () => `:host{min-width:200px}ind-slider{width:100%}`;
+
+const IndSpeedControl = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indInput = createEvent(this, "indInput");
+        this.indChange = createEvent(this, "indChange");
+    }
+    /** Control name (e.g. "Conveyor speed"). */
+    label;
+    /** Current value (two-way). */
+    value = 0;
+    min = 0;
+    max = 100;
+    step = 1;
+    /** Unit (default %). */
+    unit = '%';
+    disabled = false;
+    /** Input widget. */
+    variant = 'slider';
+    /** Live value while dragging. */
+    indInput;
+    /** Committed value. */
+    indChange;
+    onInput = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indInput.emit(e.detail);
+    };
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: '9d36c2050ac90d11a70432f2caa3f60632a8ae41' }, h("div", { key: '9dfdd9e4bdec6ff00581cdd62c3824bc68a9e8f4', class: "card-head" }, h("span", { key: 'ed439908c8ab1cefd1d5c43a6eb3a454d0f47965', class: "card-title", part: "label" }, this.label)), this.variant === 'knob' ? (h("ind-knob", { part: "control", value: this.value, min: this.min, max: this.max, step: this.step, unit: this.unit, disabled: this.disabled, showValue: true, size: "md", onIndInput: this.onInput, onIndChange: this.onChange })) : (h("ind-slider", { part: "control", value: this.value, min: this.min, max: this.max, step: this.step, unit: this.unit, disabled: this.disabled, showValue: true, size: "md", onIndInput: this.onInput, onIndChange: this.onChange }))));
+    }
+};
+IndSpeedControl.style = cardCss() + speedControlCss();
+
+export { IndKnob as ind_knob, IndSlider as ind_slider, IndSpeedControl as ind_speed_control };
+//# sourceMappingURL=ind-knob.ind-slider.ind-speed-control.entry.js.map
+
+//# sourceMappingURL=ind-knob_3.entry.js.map

package/dist/esm/ind-knob_3.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-knob_3.entry.js","mappings":"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","names":[],"sources":["src/components/atoms/knob/knob.css?tag=ind-knob&encapsulation=shadow","src/components/atoms/knob/knob.tsx","src/components/atoms/slider/slider.css?tag=ind-slider&encapsulation=shadow","src/components/atoms/slider/slider.tsx","src/components/molecules/_shared/card.css?tag=ind-speed-control&encapsulation=shadow","src/components/molecules/speed-control/speed-control.css?tag=ind-speed-control&encapsulation=shadow","src/components/molecules/speed-control/speed-control.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_size: 44px;\n}\n\n:host([size=\"sm\"]) { --_size: 32px; }\n:host([size=\"lg\"]) { --_size: 64px; }\n\n.knob {\n  width: var(--_size);\n  height: var(--_size);\n  border-radius: 50%;\n  background:\n    radial-gradient(circle at 50% 35%, #3a434f, #1b222c 75%);\n  border: 1px solid var(--ind-surface-border-strong, #5a6776);\n  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5);\n  cursor: ns-resize;\n  touch-action: none;\n  position: relative;\n}\n\n:host([disabled]) .knob { cursor: not-allowed; opacity: 0.5; }\n\n.knob:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: 3px;\n}\n\n.dial {\n  position: absolute;\n  inset: 0;\n  transition: transform var(--ind-motion-duration-fast, 120ms) ease;\n}\n\n.pointer {\n  position: absolute;\n  top: 8%;\n  left: 50%;\n  width: 2px;\n  height: 32%;\n  transform: translateX(-50%);\n  background: var(--ind-button-primary-bg, #60a5fa);\n  border-radius: 1px;\n}\n\n.caption {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.label {\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.value {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dial { transition: none; }\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Host } from '@stencil/core';\n\nexport type KnobSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-knob',\n  styleUrl: 'knob.css',\n  shadow: true,\n})\nexport class IndKnob {\n  @Element() host!: HTMLElement;\n\n  /** Current value. */\n  @Prop({ mutable: true }) value: number = 0;\n  /** Minimum. */\n  @Prop() min: number = 0;\n  /** Maximum. */\n  @Prop() max: number = 100;\n  /** Step for keyboard / drag. */\n  @Prop() step: number = 1;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: KnobSize = 'md';\n  /** Label. */\n  @Prop() label?: string;\n  /** Unit suffix. */\n  @Prop() unit?: string;\n  /** Show the numeric value below the knob. */\n  @Prop() showValue: boolean = true;\n\n  @State() dragging = false;\n\n  /** Fires continuously while turning. */\n  @Event() indInput!: EventEmitter<number>;\n  /** Fires on release. */\n  @Event() indChange!: EventEmitter<number>;\n\n  private startY = 0;\n  private startVal = 0;\n\n  private clamp(v: number): number {\n    return Math.max(this.min, Math.min(this.max, v));\n  }\n\n  private angle(): number {\n    const span = this.max - this.min || 1;\n    const ratio = (this.value - this.min) / span;\n    return -135 + ratio * 270;\n  }\n\n  private setValue(v: number, commit = false) {\n    const next = this.clamp(Math.round(v / this.step) * this.step);\n    if (next !== this.value) {\n      this.value = next;\n      this.indInput.emit(next);\n    }\n    if (commit) this.indChange.emit(this.value);\n  }\n\n  private onPointerDown = (e: PointerEvent) => {\n    if (this.disabled) return;\n    this.dragging = true;\n    this.startY = e.clientY;\n    this.startVal = this.value;\n    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);\n  };\n\n  private onPointerMove = (e: PointerEvent) => {\n    if (!this.dragging) return;\n    const dy = this.startY - e.clientY;\n    const span = this.max - this.min;\n    this.setValue(this.startVal + (dy / 120) * span);\n  };\n\n  private onPointerUp = () => {\n    if (!this.dragging) return;\n    this.dragging = false;\n    this.indChange.emit(this.value);\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') { e.preventDefault(); this.setValue(this.value + this.step, true); }\n    else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') { e.preventDefault(); this.setValue(this.value - this.step, true); }\n    else if (e.key === 'Home') { e.preventDefault(); this.setValue(this.min, true); }\n    else if (e.key === 'End') { e.preventDefault(); this.setValue(this.max, true); }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"knob\"\n          part=\"knob\"\n          role=\"slider\"\n          aria-valuenow={this.value}\n          aria-valuemin={this.min}\n          aria-valuemax={this.max}\n          aria-label={this.label}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? undefined : '0'}\n          onPointerDown={this.onPointerDown}\n          onPointerMove={this.onPointerMove}\n          onPointerUp={this.onPointerUp}\n          onKeyDown={this.onKey}\n        >\n          <span class=\"dial\" part=\"dial\" style={{ transform: `rotate(${this.angle()}deg)` }}>\n            <span class=\"pointer\" part=\"pointer\" />\n          </span>\n        </div>\n        {(this.label || this.showValue) && (\n          <div class=\"caption\" part=\"caption\">\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n            {this.showValue && (\n              <span class=\"value\" part=\"value\">{this.value}{this.unit ? ` ${this.unit}` : ''}</span>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_track-h: 4px;\n  --_thumb: 14px;\n  --_accent: var(--ind-button-primary-bg, #2563eb);\n}\n\n:host([size=\"sm\"]) { --_track-h: 3px; --_thumb: 11px; }\n:host([size=\"lg\"]) { --_track-h: 6px; --_thumb: 18px; }\n\n.header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: var(--ind-spacing-3, 6px);\n  margin-bottom: var(--ind-spacing-2, 4px);\n  font-size: var(--ind-font-size-base, 12px);\n}\n\n.label { color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }\n\n.value {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.range {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: var(--_thumb);\n  background: transparent;\n  cursor: pointer;\n  margin: 0;\n}\n\n.range:disabled { cursor: not-allowed; opacity: 0.5; }\n\n/* WebKit */\n.range::-webkit-slider-runnable-track {\n  height: var(--_track-h);\n  border-radius: var(--ind-radius-full, 9999px);\n  background: linear-gradient(\n    to right,\n    var(--_accent) 0 var(--_pct, 0%),\n    var(--ind-surface-border-default, #2a3340) var(--_pct, 0%) 100%\n  );\n}\n.range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--_thumb);\n  height: var(--_thumb);\n  margin-top: calc((var(--_track-h) - var(--_thumb)) / 2);\n  border-radius: 50%;\n  background: #fff;\n  border: 2px solid var(--_accent);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n\n/* Firefox */\n.range::-moz-range-track {\n  height: var(--_track-h);\n  border-radius: var(--ind-radius-full, 9999px);\n  background: var(--ind-surface-border-default, #2a3340);\n}\n.range::-moz-range-progress {\n  height: var(--_track-h);\n  border-radius: var(--ind-radius-full, 9999px);\n  background: var(--_accent);\n}\n.range::-moz-range-thumb {\n  width: var(--_thumb);\n  height: var(--_thumb);\n  border-radius: 50%;\n  background: #fff;\n  border: 2px solid var(--_accent);\n}\n\n.range:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: 4px;\n  border-radius: var(--ind-radius-sm, 2px);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SliderSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-slider',\n  styleUrl: 'slider.css',\n  shadow: true,\n})\nexport class IndSlider {\n  /** Current value. */\n  @Prop({ mutable: true }) value: number = 0;\n  /** Minimum. */\n  @Prop() min: number = 0;\n  /** Maximum. */\n  @Prop() max: number = 100;\n  /** Step. */\n  @Prop() step: number = 1;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: SliderSize = 'md';\n  /** Visible label. */\n  @Prop() label?: string;\n  /** Unit suffix shown with the value. */\n  @Prop() unit?: string;\n  /** Show the current value next to the label. */\n  @Prop() showValue: boolean = true;\n\n  /** Fires on every change while dragging. */\n  @Event() indInput!: EventEmitter<number>;\n  /** Fires on commit (mouse up / keyboard). */\n  @Event() indChange!: EventEmitter<number>;\n\n  private onInput = (e: Event) => {\n    const v = Number((e.target as HTMLInputElement).value);\n    this.value = v;\n    this.indInput.emit(v);\n  };\n  private onChange = (e: Event) => {\n    this.indChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private percent(): number {\n    const span = this.max - this.min || 1;\n    return ((this.value - this.min) / span) * 100;\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.showValue) && (\n          <div class=\"header\" part=\"header\">\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n            {this.showValue && (\n              <span class=\"value\" part=\"value\">\n                {this.value}{this.unit ? ` ${this.unit}` : ''}\n              </span>\n            )}\n          </div>\n        )}\n        <input\n          class=\"range\"\n          part=\"range\"\n          type=\"range\"\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          value={this.value}\n          disabled={this.disabled}\n          aria-label={this.label}\n          style={{ '--_pct': `${this.percent()}%` }}\n          onInput={this.onInput}\n          onChange={this.onChange}\n        />\n      </Host>\n    );\n  }\n}\n","/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  box-sizing: border-box;\n  min-width: 160px;\n}\n\n.card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n",":host {\n  min-width: 200px;\n}\n\nind-slider {\n  width: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SpeedControlVariant = 'slider' | 'knob';\n\n/**\n * Speed / rate control. Renders a slider (default) or knob for the operator to\n * set a percentage or engineering speed, and re-emits live + committed values.\n */\n@Component({\n  tag: 'ind-speed-control',\n  styleUrls: ['../_shared/card.css', 'speed-control.css'],\n  shadow: true,\n})\nexport class IndSpeedControl {\n  /** Control name (e.g. \"Conveyor speed\"). */\n  @Prop() label!: string;\n  /** Current value (two-way). */\n  @Prop({ mutable: true }) value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Unit (default %). */\n  @Prop() unit: string = '%';\n  @Prop() disabled: boolean = false;\n  /** Input widget. */\n  @Prop() variant: SpeedControlVariant = 'slider';\n\n  /** Live value while dragging. */\n  @Event() indInput!: EventEmitter<number>;\n  /** Committed value. */\n  @Event() indChange!: EventEmitter<number>;\n\n  private onInput = (e: CustomEvent<number>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indInput.emit(e.detail);\n  };\n  private onChange = (e: CustomEvent<number>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indChange.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{this.label}</span>\n        </div>\n        {this.variant === 'knob' ? (\n          <ind-knob\n            part=\"control\"\n            value={this.value}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            unit={this.unit}\n            disabled={this.disabled}\n            showValue\n            size=\"md\"\n            onIndInput={this.onInput}\n            onIndChange={this.onChange}\n          />\n        ) : (\n          <ind-slider\n            part=\"control\"\n            value={this.value}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            unit={this.unit}\n            disabled={this.disabled}\n            showValue\n            size=\"md\"\n            onIndInput={this.onInput}\n            onIndChange={this.onChange}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ind-kpi-card.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+
+const kpiCardCss = () => `:host{min-width:150px}.readout{display:flex;align-items:baseline;gap:var(--ind-spacing-2, 4px)}.number{font-size:var(--ind-font-size-3xl, 28px);font-weight:var(--ind-font-weight-bold, 700);line-height:1}.unit{font-size:var(--ind-font-size-lg, 14px);color:var(--ind-surface-text-secondary)}.delta{display:flex;align-items:center;gap:var(--ind-spacing-2, 4px);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted)}:host([variant="good"]) .delta{color:var(--ind-state-running-bg, #16a34a)}:host([variant="bad"]) .delta{color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const IndKpiCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** KPI name (e.g. "OEE", "Throughput"). */
+    label;
+    /** Primary value. */
+    value;
+    /** Engineering unit (e.g. "%", "u/h"). */
+    unit;
+    /** Decimal places when numeric. */
+    precision;
+    /** Delta caption (e.g. "+2.3 % vs last shift"). */
+    delta;
+    /** Trend direction shown as an arrow. */
+    trend = 'none';
+    /** Semantic color of the delta. */
+    variant = 'neutral';
+    formatted() {
+        if (typeof this.value === 'string')
+            return this.value;
+        if (!Number.isFinite(this.value))
+            return '--';
+        if (this.precision !== undefined)
+            return this.value.toFixed(this.precision);
+        return String(this.value);
+    }
+    render() {
+        const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';
+        return (h(Host, { key: '508d714f7c810c81fcc5a46ce67779f078a1d0a6', role: "group", "aria-label": `${this.label}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}` }, h("div", { key: '1b3290a2fb4aa79077a663f71d488795db70047a', class: "card-title", part: "label" }, this.label), h("div", { key: 'c521f3a3150bb6f4e385f503155958d1d9f70d5e', class: "readout", part: "readout" }, h("span", { key: 'aa697fb0c472b480ec586ea837ef21e5dd0853a2', class: "number", part: "number" }, this.formatted()), this.unit && h("span", { key: 'b6fc91609382367aa00d997b26ec0433d89ed7c9', class: "unit", part: "unit" }, this.unit)), (this.delta || arrow) && (h("div", { key: '594d4fc821d89474db61b618b17e04e390fb8280', class: "delta", part: "delta" }, arrow && h("span", { key: 'a9af0dbaef647345a955f50ad392958860a16a4a', class: "arrow", part: "arrow", "aria-hidden": "true" }, arrow), this.delta && h("span", { key: '0b674c45d8921de1559ad91f1123e56a1a980a64', class: "delta-text" }, this.delta)))));
+    }
+};
+IndKpiCard.style = cardCss() + kpiCardCss();
+
+export { IndKpiCard as ind_kpi_card };
+//# sourceMappingURL=ind-kpi-card.entry.js.map
+
+//# sourceMappingURL=ind-kpi-card.entry.js.map

package/dist/esm/ind-kpi-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-kpi-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-kpi-card&encapsulation=shadow","src/components/molecules/kpi-card/kpi-card.css?tag=ind-kpi-card&encapsulation=shadow","src/components/molecules/kpi-card/kpi-card.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  box-sizing: border-box;\n  min-width: 160px;\n}\n\n.card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n",":host {\n  min-width: 150px;\n}\n\n.readout {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-2, 4px);\n}\n\n.number {\n  font-size: var(--ind-font-size-3xl, 28px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  line-height: 1;\n}\n\n.unit {\n  font-size: var(--ind-font-size-lg, 14px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.delta {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted);\n}\n\n:host([variant=\"good\"]) .delta { color: var(--ind-state-running-bg, #16a34a); }\n:host([variant=\"bad\"])  .delta { color: var(--ind-state-fault-bg, #dc2626); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type KpiTrend = 'none' | 'up' | 'down' | 'flat';\nexport type KpiVariant = 'neutral' | 'good' | 'bad';\n\n/**\n * Headline KPI: a large value with an optional delta and trend arrow. The\n * `variant` colors the delta (good = green, bad = red) independently of the\n * arrow direction, since \"down\" is not always bad.\n */\n@Component({\n  tag: 'ind-kpi-card',\n  styleUrls: ['../_shared/card.css', 'kpi-card.css'],\n  shadow: true,\n})\nexport class IndKpiCard {\n  /** KPI name (e.g. \"OEE\", \"Throughput\"). */\n  @Prop() label!: string;\n  /** Primary value. */\n  @Prop() value!: number | string;\n  /** Engineering unit (e.g. \"%\", \"u/h\"). */\n  @Prop() unit?: string;\n  /** Decimal places when numeric. */\n  @Prop() precision?: number;\n  /** Delta caption (e.g. \"+2.3 % vs last shift\"). */\n  @Prop() delta?: string;\n  /** Trend direction shown as an arrow. */\n  @Prop() trend: KpiTrend = 'none';\n  /** Semantic color of the delta. */\n  @Prop({ reflect: true }) variant: KpiVariant = 'neutral';\n\n  private formatted(): string {\n    if (typeof this.value === 'string') return this.value;\n    if (!Number.isFinite(this.value)) return '--';\n    if (this.precision !== undefined) return this.value.toFixed(this.precision);\n    return String(this.value);\n  }\n\n  render() {\n    const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';\n    return (\n      <Host role=\"group\" aria-label={`${this.label}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}`}>\n        <div class=\"card-title\" part=\"label\">{this.label}</div>\n        <div class=\"readout\" part=\"readout\">\n          <span class=\"number\" part=\"number\">{this.formatted()}</span>\n          {this.unit && <span class=\"unit\" part=\"unit\">{this.unit}</span>}\n        </div>\n        {(this.delta || arrow) && (\n          <div class=\"delta\" part=\"delta\">\n            {arrow && <span class=\"arrow\" part=\"arrow\" aria-hidden=\"true\">{arrow}</span>}\n            {this.delta && <span class=\"delta-text\">{this.delta}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,UAAU,GAAG,MAAM,CAAC,mkBAAmkB,CAAC;;MCejlB,UAAU,GAAA,MAAA;;;;;AAEb,IAAA,KAAK;;AAEL,IAAA,KAAK;;AAEL,IAAA,IAAI;;AAEJ,IAAA,SAAS;;AAET,IAAA,KAAK;;IAEL,KAAK,GAAa,MAAM;;IAEP,OAAO,GAAe,SAAS;IAEhD,SAAS,GAAA;AACf,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK;QACrD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;AAC7C,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3E,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG3B,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;QACxG,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAA,EAAK,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA,CAAE,EAAA,EACpG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAO,EACvD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,SAAS,EAAE,CAAQ,EAC3D,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CAC3D,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,MACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC5B,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAA,EAAE,KAAK,CAAQ,EAC3E,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACvD,CACP,CACI;;;;;;;"}

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

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

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

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