@ind-ds/core 0.1.0

package/dist/cjs/ind-health-card.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const healthCardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));min-width:160px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.status{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.state-label{font-size:var(--ind-font-size-xl, 16px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1}.detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="running"]) .state-label{color:var(--ind-state-running-bg,     #16a34a)}:host([state="fault"]) .state-label{color:var(--ind-state-fault-bg,       #dc2626)}:host([state="warning"]) .state-label{color:var(--ind-state-warning-bg,     #f59e0b)}:host([state="maintenance"]) .state-label{color:var(--ind-state-maintenance-bg, #2563eb)}:host([state="stopped"]) .state-label{color:var(--ind-surface-text-secondary)}:host([state="unknown"]) .state-label{color:var(--ind-surface-text-muted)}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}`;
+
+const DEFAULT_LABEL = {
+    running: 'OK',
+    stopped: 'Stopped',
+    fault: 'Fault',
+    warning: 'Warning',
+    maintenance: 'Maintenance',
+    unknown: '—',
+};
+const IndHealthCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Subsystem name (e.g. "PLC", "Dispense robot", "Washer"). */
+    heading;
+    /** Process state — drives the dot color and the prominent text color. */
+    state = 'unknown';
+    /** Override the default label (e.g. show "RUN 24 h" instead of "OK"). */
+    stateLabel;
+    /** Optional sub-line for context (timestamp, last error, etc.). */
+    detail;
+    render() {
+        const label = this.stateLabel ?? DEFAULT_LABEL[this.state];
+        const dotState = this.state === 'unknown' ? 'neutral' : this.state;
+        return (index.h(index.Host, { key: '2bc1d2152325d8a40fb9399ec6c24b0134bde34a', role: "group", "aria-label": `${this.heading}: ${label}`, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, index.h("div", { key: '7268095055dc03a742e97786a22dd4179f6e8ac3', class: "title", part: "title" }, this.heading), index.h("div", { key: '4069f5782516eb2b28bfafb4b0a59c3fe6133321', class: "status", part: "status" }, index.h("ind-status-dot", { key: '651976ae059c6b8faafd4bb4de7c1fa08fd6b86b', state: dotState, size: "md" }), index.h("span", { key: '18925ef8bb2c51789f315a2adf8cacc5a7ad4712', class: "state-label", part: "state-label" }, label)), this.detail && index.h("div", { key: '7f3c37bca74f5f5fb92633f9c7d85681c78bd677', class: "detail", part: "detail" }, this.detail)));
+    }
+};
+IndHealthCard.style = healthCardCss();
+
+exports.ind_health_card = IndHealthCard;
+//# sourceMappingURL=ind-health-card.entry.cjs.js.map
+
+//# sourceMappingURL=ind-health-card.cjs.entry.js.map

package/dist/cjs/ind-health-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-health-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ojDAAojD,CAAC;;ACUllD,MAAM,aAAa,GAAgC;AACjD,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,GAAG;CACb;MAOY,aAAa,GAAA,MAAA;;;;;AAEhB,IAAA,OAAO;;IAEU,KAAK,GAAgB,SAAS;;AAE/C,IAAA,UAAU;;AAEV,IAAA,MAAM;IAEd,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK;AAClE,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,YAAA,EACA,CAAA,EAAG,IAAI,CAAC,OAAO,CAAA,EAAA,EAAK,KAAK,CAAA,CAAE,EAAA,WAAA,EAC5B,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ,EAAA,EAE1DD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,OAAO,CAAO,EACpDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/BA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,QAAmF,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACxHA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAA,EAAE,KAAK,CAAQ,CACvD,EACL,IAAI,CAAC,MAAM,IAAIA,kEAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,CAChE;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/health-card/health-card.css?tag=ind-health-card&encapsulation=shadow","src/components/molecules/health-card/health-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  min-width: 160px;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.status {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.state-label {\n  font-size: var(--ind-font-size-xl, 16px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1;\n}\n\n.detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Bold colored label per state — matches the dot color so the card\n * reads at a glance across a 4-up grid. */\n:host([state=\"running\"])     .state-label { color: var(--ind-state-running-bg,     #16a34a); }\n:host([state=\"fault\"])       .state-label { color: var(--ind-state-fault-bg,       #dc2626); }\n:host([state=\"warning\"])     .state-label { color: var(--ind-state-warning-bg,     #f59e0b); }\n:host([state=\"maintenance\"]) .state-label { color: var(--ind-state-maintenance-bg, #2563eb); }\n:host([state=\"stopped\"])     .state-label { color: var(--ind-surface-text-secondary); }\n:host([state=\"unknown\"])     .state-label { color: var(--ind-surface-text-muted); }\n\n/* Fault card glows subtly as a visual cue, even without blinking. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HealthState =\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'unknown';\n\nconst DEFAULT_LABEL: Record<HealthState, string> = {\n  running: 'OK',\n  stopped: 'Stopped',\n  fault: 'Fault',\n  warning: 'Warning',\n  maintenance: 'Maintenance',\n  unknown: '—',\n};\n\n@Component({\n  tag: 'ind-health-card',\n  styleUrl: 'health-card.css',\n  shadow: true,\n})\nexport class IndHealthCard {\n  /** Subsystem name (e.g. \"PLC\", \"Dispense robot\", \"Washer\"). */\n  @Prop() heading!: string;\n  /** Process state — drives the dot color and the prominent text color. */\n  @Prop({ reflect: true }) state: HealthState = 'unknown';\n  /** Override the default label (e.g. show \"RUN 24 h\" instead of \"OK\"). */\n  @Prop() stateLabel?: string;\n  /** Optional sub-line for context (timestamp, last error, etc.). */\n  @Prop() detail?: string;\n\n  render() {\n    const label = this.stateLabel ?? DEFAULT_LABEL[this.state];\n    const dotState = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${this.heading}: ${label}`}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <div class=\"title\" part=\"title\">{this.heading}</div>\n        <div class=\"status\" part=\"status\">\n          <ind-status-dot state={dotState as 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance' | 'neutral'} size=\"md\" />\n          <span class=\"state-label\" part=\"state-label\">{label}</span>\n        </div>\n        {this.detail && <div class=\"detail\" part=\"detail\">{this.detail}</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const inputCss = () => `:host{display:inline-block;font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:var(--ind-size-input-md, 32px)}:host([size="sm"]){--_h:var(--ind-size-input-sm, 24px)}:host([size="md"]){--_h:var(--ind-size-input-md, 32px)}:host([size="lg"]){--_h:var(--ind-size-input-lg, 40px)}.wrap{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);min-width:160px;max-width:100%}.label{font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-medium, 500);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));letter-spacing:0.04em;text-transform:uppercase}.field{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);height:var(--_h);padding:0 var(--ind-spacing-4, 8px);background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);transition:border-color var(--ind-motion-duration-fast, 120ms),     box-shadow   var(--ind-motion-duration-fast, 120ms)}.field.is-focus{border-color:var(--ind-surface-focus-ring, #22d3ee);box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent)}.input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;padding:0;font:inherit;color:inherit;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.input::placeholder{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));opacity:1}:host([type="number"]) .input{font-family:var(--ind-font-family-mono);font-variant-numeric:tabular-nums}:host([invalid]) .field{border-color:var(--ind-feedback-error-bg, #dc2626)}:host([invalid]) .field.is-focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent)}:host([disabled]){opacity:0.55;pointer-events:none}:host([readonly]) .field{background:var(--ind-surface-panel, light-dark(#f4f6f9, #11161c))}::slotted([slot="prefix"]),::slotted([slot="suffix"]){color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));font-size:var(--ind-font-size-sm, 11px);font-family:var(--ind-font-family-mono);white-space:nowrap}`;
+
+const IndInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indInput = index.createEvent(this, "indInput");
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    get host() { return index.getElement(this); }
+    type = 'text';
+    size = 'md';
+    value = '';
+    placeholder;
+    disabled = false;
+    readonly = false;
+    invalid = false;
+    label;
+    name;
+    min;
+    max;
+    step;
+    pattern;
+    autocomplete;
+    /** Maps to the native `inputmode` attribute — named `mode` to avoid clashing with `HTMLElement.inputMode`. */
+    mode;
+    hasFocus = false;
+    /** Fires on every keystroke. */
+    indInput;
+    /** Fires on change (blur or Enter). */
+    indChange;
+    /** Programmatically focus the underlying input. */
+    async setFocus() {
+        this.host.shadowRoot?.querySelector('input')?.focus();
+    }
+    onInput = (e) => {
+        const v = e.target.value;
+        this.value = v;
+        this.indInput.emit(v);
+    };
+    onChange = (e) => {
+        const v = e.target.value;
+        this.indChange.emit(v);
+    };
+    render() {
+        return (index.h(index.Host, { key: 'bb19139e219e04af88a8d60ef7189b1fe75cb9fa' }, index.h("label", { key: '95047b762b29dddf02e1236c4febb7bd175a5375', class: "wrap", part: "wrap" }, this.label && index.h("span", { key: '3dfe06b89e8022fc4dc74e29d73edd4684ca7305', class: "label", part: "label" }, this.label), index.h("span", { key: '4714f42749f9018c7a472c85d4ce59537ac60b1f', class: { field: true, 'is-focus': this.hasFocus }, part: "field" }, index.h("slot", { key: '97e0af1ba3eec75684483fa1fb76d08eec886075', name: "prefix" }), index.h("input", { key: '3764cd35fb827430a05af94b3fd2164d1f812cfa', part: "input", class: "input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, pattern: this.pattern, autocomplete: this.autocomplete, inputMode: this.mode, "aria-invalid": this.invalid ? 'true' : 'false', onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false), onInput: this.onInput, onChange: this.onChange }), index.h("slot", { key: '1fefcb0e2fa6efd3385aef0bbf8b228578915c3a', name: "suffix" })))));
+    }
+};
+IndInput.style = inputCss();
+
+exports.ind_input = IndInput;
+//# sourceMappingURL=ind-input.entry.cjs.js.map
+
+//# sourceMappingURL=ind-input.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-input.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/input/input.css?tag=ind-input&encapsulation=shadow","src/components/atoms/input/input.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_h: var(--ind-size-input-md, 32px);\n}\n\n:host([size=\"sm\"]) { --_h: var(--ind-size-input-sm, 24px); }\n:host([size=\"md\"]) { --_h: var(--ind-size-input-md, 32px); }\n:host([size=\"lg\"]) { --_h: var(--ind-size-input-lg, 40px); }\n\n.wrap {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  min-width: 160px;\n  max-width: 100%;\n}\n\n.label {\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.field {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  height: var(--_h);\n  padding: 0 var(--ind-spacing-4, 8px);\n  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-md, 3px);\n  transition:\n    border-color var(--ind-motion-duration-fast, 120ms),\n    box-shadow   var(--ind-motion-duration-fast, 120ms);\n}\n\n.field.is-focus {\n  border-color: var(--ind-surface-focus-ring, #22d3ee);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent);\n}\n\n.input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.input::placeholder {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  opacity: 1;\n}\n\n:host([type=\"number\"]) .input {\n  font-family: var(--ind-font-family-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n:host([invalid]) .field {\n  border-color: var(--ind-feedback-error-bg, #dc2626);\n}\n:host([invalid]) .field.is-focus {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);\n}\n\n:host([disabled]) {\n  opacity: 0.55;\n  pointer-events: none;\n}\n\n:host([readonly]) .field {\n  background: var(--ind-surface-panel, light-dark(#f4f6f9, #11161c));\n}\n\n::slotted([slot=\"prefix\"]),\n::slotted([slot=\"suffix\"]) {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  font-size: var(--ind-font-size-sm, 11px);\n  font-family: var(--ind-font-family-mono);\n  white-space: nowrap;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type InputType = 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url';\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'url' | 'email' | 'search' | 'none';\n\n@Component({\n  tag: 'ind-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class IndInput {\n  @Element() host!: HTMLElement;\n\n  @Prop({ reflect: true }) type: InputType = 'text';\n  @Prop({ reflect: true }) size: InputSize = 'md';\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder?: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop() min?: number | string;\n  @Prop() max?: number | string;\n  @Prop() step?: number | string;\n  @Prop() pattern?: string;\n  @Prop() autocomplete?: string;\n  /** Maps to the native `inputmode` attribute — named `mode` to avoid clashing with `HTMLElement.inputMode`. */\n  @Prop({ attribute: 'inputmode' }) mode?: InputMode;\n\n  @State() private hasFocus = false;\n\n  /** Fires on every keystroke. */\n  @Event() indInput!: EventEmitter<string>;\n  /** Fires on change (blur or Enter). */\n  @Event() indChange!: EventEmitter<string>;\n\n  /** Programmatically focus the underlying input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.host.shadowRoot?.querySelector('input')?.focus();\n  }\n\n  private onInput = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.value = v;\n    this.indInput.emit(v);\n  };\n\n  private onChange = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.indChange.emit(v);\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <span class={{ field: true, 'is-focus': this.hasFocus }} part=\"field\">\n            <slot name=\"prefix\" />\n            <input\n              part=\"input\"\n              class=\"input\"\n              type={this.type}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              name={this.name}\n              min={this.min as unknown as string}\n              max={this.max as unknown as string}\n              step={this.step as unknown as string}\n              pattern={this.pattern}\n              autocomplete={this.autocomplete as unknown as 'on' | 'off'}\n              inputMode={this.mode as unknown as undefined}\n              aria-invalid={this.invalid ? 'true' : 'false'}\n              onFocus={() => (this.hasFocus = true)}\n              onBlur={() => (this.hasFocus = false)}\n              onInput={this.onInput}\n              onChange={this.onChange}\n            />\n            <slot name=\"suffix\" />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const ledCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-base, 12px);font-weight:var(--ind-font-weight-medium, 500);line-height:var(--ind-font-line-height-tight, 1.1);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.led{--_size:var(--ind-led-size, 12px);--_bg:var(--ind-state-stopped-bg, #5a6776);--_border:var(--ind-state-stopped-border, #8390a0);--_glow:var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));display:inline-block;width:var(--_size);height:var(--_size);border-radius:50%;background:radial-gradient(     circle at 30% 30%,     color-mix(in srgb, var(--_bg) 65%, white),     var(--_bg) 70%   );border:1px solid var(--_border);box-shadow:0 0 0 1px color-mix(in srgb, var(--_bg) 25%, transparent),     0 0 8px var(--_glow),     inset 0 1px 2px rgba(0, 0, 0, 0.45);transition:background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([size="sm"]) .led{--_size:8px}:host([size="md"]) .led{--_size:12px}:host([size="lg"]) .led{--_size:18px}:host([state="running"]) .led{--_bg:var(--ind-state-running-bg, #16a34a);--_border:var(--ind-state-running-border, #4ade80);--_glow:var(--ind-state-running-glow, rgba(34, 197, 94, 0.6))}:host([state="stopped"]) .led{--_bg:var(--ind-state-stopped-bg, #5a6776);--_border:var(--ind-state-stopped-border, #8390a0);--_glow:var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35))}:host([state="fault"]) .led{--_bg:var(--ind-state-fault-bg, #dc2626);--_border:var(--ind-state-fault-border, #f87171);--_glow:var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7))}:host([state="warning"]) .led{--_bg:var(--ind-state-warning-bg, #f59e0b);--_border:var(--ind-state-warning-border, #fcd34d);--_glow:var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6))}:host([state="maintenance"]) .led{--_bg:var(--ind-state-maintenance-bg, #2563eb);--_border:var(--ind-state-maintenance-border, #60a5fa);--_glow:var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6))}:host([blinking]) .led{animation:ind-led-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite}:host([blinking][state="fault"]) .led{animation-duration:var(--ind-motion-blink-urgent, 200ms)}@keyframes ind-led-blink{50%{opacity:0.2;box-shadow:none}}@media (prefers-reduced-motion: reduce){:host([blinking]) .led{animation:none;opacity:1;outline:2px solid var(--_border);outline-offset:2px}}`;
+
+const IndLed = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Process state driving the LED color and ARIA live politeness. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion. */
+    blinking = false;
+    /** Optional visible label rendered next to the LED. Always becomes the accessible name. */
+    label;
+    render() {
+        const accessibleName = this.label ?? `${this.state} indicator`;
+        return (index.h(index.Host, { key: 'babe0b6e1a80181397c53ec0234ce3ff8d5741b4', role: "status", "aria-label": accessibleName, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, index.h("span", { key: 'd7ca8697299f70715fdbe101d541c3313508e434', class: "led", part: "led", "aria-hidden": "true" }), this.label && index.h("span", { key: 'f39a9b21eabd4380db866e9bfb2591bcaeac3ce4', class: "label", part: "label" }, this.label)));
+    }
+};
+IndLed.style = ledCss();
+
+exports.ind_led = IndLed;
+//# sourceMappingURL=ind-led.entry.cjs.js.map
+
+//# sourceMappingURL=ind-led.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-led.cjs.entry.js","mappings":";;;;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,s+EAAs+E,CAAC;;MCUh/E,MAAM,GAAA,MAAA;;;;;IAEQ,KAAK,GAAa,SAAS;;IAG3B,IAAI,GAAY,IAAI;;IAGpB,QAAQ,GAAY,KAAK;;AAG1C,IAAA,KAAK;IAEb,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,IAAI,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,UAAA,CAAY;AAC9D,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,cAAc,EAAA,WAAA,EACf,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ,EAAA,EAE1DD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,EACjD,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/led/led.css?tag=ind-led&encapsulation=shadow","src/components/atoms/led/led.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-base, 12px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  line-height: var(--ind-font-line-height-tight, 1.1);\n  /* `light-dark()` makes the label readable even if the LED lands on a surface\n   * whose theme doesn't match the loaded tokens (Storybook autodocs, embedded\n   * widget on a third-party site, etc.). */\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.led {\n  --_size: var(--ind-led-size, 12px);\n  --_bg: var(--ind-state-stopped-bg, #5a6776);\n  --_border: var(--ind-state-stopped-border, #8390a0);\n  --_glow: var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));\n\n  display: inline-block;\n  width: var(--_size);\n  height: var(--_size);\n  border-radius: 50%;\n  background: radial-gradient(\n    circle at 30% 30%,\n    color-mix(in srgb, var(--_bg) 65%, white),\n    var(--_bg) 70%\n  );\n  border: 1px solid var(--_border);\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--_bg) 25%, transparent),\n    0 0 8px var(--_glow),\n    inset 0 1px 2px rgba(0, 0, 0, 0.45);\n  transition: background-color var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n:host([size=\"sm\"]) .led { --_size: 8px; }\n:host([size=\"md\"]) .led { --_size: 12px; }\n:host([size=\"lg\"]) .led { --_size: 18px; }\n\n/* Each state ships hard-coded fallbacks so the component stays visible even\n * if tokens fail to load (build-order glitch, sandbox without CSS imports).\n */\n:host([state=\"running\"]) .led {\n  --_bg: var(--ind-state-running-bg, #16a34a);\n  --_border: var(--ind-state-running-border, #4ade80);\n  --_glow: var(--ind-state-running-glow, rgba(34, 197, 94, 0.6));\n}\n:host([state=\"stopped\"]) .led {\n  --_bg: var(--ind-state-stopped-bg, #5a6776);\n  --_border: var(--ind-state-stopped-border, #8390a0);\n  --_glow: var(--ind-state-stopped-glow, rgba(131, 144, 160, 0.35));\n}\n:host([state=\"fault\"]) .led {\n  --_bg: var(--ind-state-fault-bg, #dc2626);\n  --_border: var(--ind-state-fault-border, #f87171);\n  --_glow: var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7));\n}\n:host([state=\"warning\"]) .led {\n  --_bg: var(--ind-state-warning-bg, #f59e0b);\n  --_border: var(--ind-state-warning-border, #fcd34d);\n  --_glow: var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6));\n}\n:host([state=\"maintenance\"]) .led {\n  --_bg: var(--ind-state-maintenance-bg, #2563eb);\n  --_border: var(--ind-state-maintenance-border, #60a5fa);\n  --_glow: var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6));\n}\n\n:host([blinking]) .led {\n  animation: ind-led-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite;\n}\n:host([blinking][state=\"fault\"]) .led {\n  animation-duration: var(--ind-motion-blink-urgent, 200ms);\n}\n\n@keyframes ind-led-blink {\n  50% { opacity: 0.2; box-shadow: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([blinking]) .led {\n    animation: none;\n    opacity: 1;\n    /* Substitute: a solid outline ring so the alarm condition is still visible without motion. */\n    outline: 2px solid var(--_border);\n    outline-offset: 2px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type LedState = 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance';\nexport type LedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-led',\n  styleUrl: 'led.css',\n  shadow: true,\n})\nexport class IndLed {\n  /** Process state driving the LED color and ARIA live politeness. */\n  @Prop({ reflect: true }) state: LedState = 'stopped';\n\n  /** Visual size. */\n  @Prop({ reflect: true }) size: LedSize = 'md';\n\n  /** Blink. For SCADA, fast blink = unacknowledged condition. Stops respecting prefers-reduced-motion. */\n  @Prop({ reflect: true }) blinking: boolean = false;\n\n  /** Optional visible label rendered next to the LED. Always becomes the accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    const accessibleName = this.label ?? `${this.state} indicator`;\n    return (\n      <Host\n        role=\"status\"\n        aria-label={accessibleName}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <span class=\"led\" part=\"led\" aria-hidden=\"true\" />\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-mqtt-monitor.cjs.entry.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const mqttMonitorCss = () => `:host{display:flex;flex-direction:column;font-family:var(--ind-font-family-sans);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);overflow:hidden;color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}.toolbar{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);border-bottom:1px solid var(--ind-surface-border-default);flex-wrap:wrap}.filter{flex:1;min-width:200px;height:var(--ind-size-input-sm, 24px);padding:0 var(--ind-spacing-4, 8px);background:var(--ind-surface-sunken);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font:inherit;font-size:var(--ind-font-size-sm, 11px);color:inherit;outline:none;box-sizing:border-box}.filter::placeholder{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.filter:focus{border-color:var(--ind-surface-focus-ring);box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring) 35%, transparent)}.check{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px);font-size:var(--ind-font-size-sm, 11px);cursor:pointer;user-select:none;white-space:nowrap}.spacer{flex:1}.counter{font-family:var(--ind-font-family-mono);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-sm, 11px);white-space:nowrap}.clear{height:var(--ind-size-button-sm, 26px);padding:0 var(--ind-spacing-5, 12px);background:var(--ind-button-default-bg);color:var(--ind-button-default-fg);border:1px solid var(--ind-button-default-border);border-radius:var(--ind-radius-md, 3px);font:inherit;font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-semibold, 600);cursor:pointer}.clear:hover{background:var(--ind-button-default-bg-hover)}.clear:focus-visible{outline:2px solid var(--ind-surface-focus-ring);outline-offset:2px}.log{flex:1;width:100%;box-sizing:border-box;padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);background:var(--ind-color-palette-neutral-0, #000);color:var(--ind-color-palette-neutral-800, #d0d7e0);border:none;outline:none;font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);line-height:var(--ind-font-line-height-normal, 1.4);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);resize:vertical;cursor:default}`;
+
+const IndMqttMonitor = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indFilterChange = index.createEvent(this, "indFilterChange");
+        this.indPauseChange = index.createEvent(this, "indPauseChange");
+        this.indClear = index.createEvent(this, "indClear");
+    }
+    get host() { return index.getElement(this); }
+    /** Full log content. Newline-separated lines. */
+    log = '';
+    /** Active filter — substring match on each line, case-insensitive. */
+    filterValue = '';
+    /** When true, the log doesn't auto-scroll on new content. */
+    paused = false;
+    /** Visible rows of the log textarea. */
+    rows = 18;
+    indFilterChange;
+    indPauseChange;
+    indClear;
+    componentDidLoad() {
+        this.scrollToBottom();
+    }
+    onLogChange() {
+        if (!this.paused)
+            this.scrollToBottom();
+    }
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            const ta = this.host.shadowRoot?.querySelector('.log');
+            if (ta)
+                ta.scrollTop = ta.scrollHeight;
+        });
+    }
+    filteredLines() {
+        const lines = this.log.split('\n');
+        if (!this.filterValue)
+            return lines;
+        const f = this.filterValue.toLowerCase();
+        return lines.filter((l) => l.toLowerCase().includes(f));
+    }
+    onFilter = (e) => {
+        const v = e.target.value;
+        this.filterValue = v;
+        this.indFilterChange.emit(v);
+    };
+    onPause = (e) => {
+        const v = e.target.checked;
+        this.paused = v;
+        this.indPauseChange.emit(v);
+    };
+    render() {
+        const filtered = this.filteredLines();
+        const total = this.log ? this.log.split('\n').filter((l) => l.length > 0).length : 0;
+        const visible = filtered.filter((l) => l.length > 0).length;
+        const countLabel = this.filterValue ? `${visible} / ${total} msg` : `${total} msg`;
+        return (index.h(index.Host, { key: '611c593c0c13009b372c0f3d8077c363c9801b97' }, index.h("div", { key: '6552180414c9c06bf728b6d94eaa4ec282f9ecc9', class: "toolbar", part: "toolbar" }, index.h("input", { key: '715c06c1dcd91764b619093804bd52dd9ebb512c', class: "filter", part: "filter", type: "search", placeholder: "Filter topic / payload...", value: this.filterValue, onInput: this.onFilter }), index.h("label", { key: 'c7fc734cd7d0e08d28191804852ef7bf11ed01c7', class: "check" }, index.h("input", { key: '6b250678c32e5e83b2925275cdd44579cf682933', type: "checkbox", checked: this.paused, onChange: this.onPause }), index.h("span", { key: '77f2a59bd50c2a8c48c27a719730ba2efc5e5b9e' }, "Pause")), index.h("span", { key: 'eb60e89a998c60548f62d982691ffbdc1ce08eb7', class: "spacer" }), index.h("span", { key: '298521f0328cb32523d63dd3a45248575313b6f6', class: "counter", part: "counter" }, countLabel), index.h("button", { key: '32a5aa35b0e622e8fac010a79bbd30cb434ba09e', type: "button", class: "clear", part: "clear", onClick: () => this.indClear.emit() }, "Clear")), index.h("textarea", { key: '7ca66e1a42cdd672faae4d14004af23c2cae7bae', class: "log", part: "log", readonly: true, rows: this.rows }, filtered.join('\n'))));
+    }
+    static get watchers() { return {
+        "log": [{
+                "onLogChange": 0
+            }]
+    }; }
+};
+IndMqttMonitor.style = mqttMonitorCss();
+
+exports.ind_mqtt_monitor = IndMqttMonitor;
+//# sourceMappingURL=ind-mqtt-monitor.entry.cjs.js.map
+
+//# sourceMappingURL=ind-mqtt-monitor.cjs.entry.js.map

package/dist/cjs/ind-mqtt-monitor.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-mqtt-monitor.cjs.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,45EAA45E,CAAC;;MCgB96E,cAAc,GAAA,MAAA;;;;;;;;;IAIjB,GAAG,GAAW,EAAE;;IAEC,WAAW,GAAW,EAAE;;IAExB,MAAM,GAAY,KAAK;;IAExC,IAAI,GAAW,EAAE;AAEhB,IAAA,eAAe;AACf,IAAA,cAAc;AACd,IAAA,QAAQ;IAEjB,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAIvB,WAAW,GAAA;QACT,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,cAAc,EAAE;;IAGjC,cAAc,GAAA;QACpB,qBAAqB,CAAC,MAAK;AACzB,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAsB,MAAM,CAAC;AAC3E,YAAA,IAAI,EAAE;AAAE,gBAAA,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY;AACxC,SAAC,CAAC;;IAGI,aAAa,GAAA;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,KAAK;QACnC,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;AACxC,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;;AAGjD,IAAA,QAAQ,GAAG,CAAC,CAAQ,KAAI;AAC9B,QAAA,MAAM,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AAC9C,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC;AACpB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;AAC9B,KAAC;AAEO,IAAA,OAAO,GAAG,CAAC,CAAQ,KAAI;AAC7B,QAAA,MAAM,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AAChD,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE;AACrC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC;AACpF,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM;AAC3D,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,GAAA,EAAM,KAAK,MAAM,GAAG,CAAA,EAAG,KAAK,MAAM;QAClF,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,2BAA2B,EACvC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAA,CACtB,EACFA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAA,EAClBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,EACvEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,OAAA,CAAkB,CACZ,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,CAAG,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,UAAU,CAAQ,EACxDA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAA,EAAA,OAAA,CACtB,CACX,EACNA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,QAAQ,EAAA,IAAA,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EACf,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAY,CAC5B;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/mqtt-monitor/mqtt-monitor.css?tag=ind-mqtt-monitor&encapsulation=shadow","src/components/organisms/mqtt-monitor/mqtt-monitor.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--ind-font-family-sans);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  overflow: hidden;\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n}\n\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);\n  border-bottom: 1px solid var(--ind-surface-border-default);\n  flex-wrap: wrap;\n}\n\n.filter {\n  flex: 1;\n  min-width: 200px;\n  height: var(--ind-size-input-sm, 24px);\n  padding: 0 var(--ind-spacing-4, 8px);\n  background: var(--ind-surface-sunken);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font: inherit;\n  font-size: var(--ind-font-size-sm, 11px);\n  color: inherit;\n  outline: none;\n  box-sizing: border-box;\n}\n.filter::placeholder {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n.filter:focus {\n  border-color: var(--ind-surface-focus-ring);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring) 35%, transparent);\n}\n\n.check {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-size: var(--ind-font-size-sm, 11px);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.spacer { flex: 1; }\n\n.counter {\n  font-family: var(--ind-font-family-mono);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  font-size: var(--ind-font-size-sm, 11px);\n  white-space: nowrap;\n}\n\n.clear {\n  height: var(--ind-size-button-sm, 26px);\n  padding: 0 var(--ind-spacing-5, 12px);\n  background: var(--ind-button-default-bg);\n  color: var(--ind-button-default-fg);\n  border: 1px solid var(--ind-button-default-border);\n  border-radius: var(--ind-radius-md, 3px);\n  font: inherit;\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  cursor: pointer;\n}\n.clear:hover { background: var(--ind-button-default-bg-hover); }\n.clear:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring);\n  outline-offset: 2px;\n}\n\n.log {\n  flex: 1;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);\n  background: var(--ind-color-palette-neutral-0, #000);\n  color: var(--ind-color-palette-neutral-800, #d0d7e0);\n  border: none;\n  outline: none;\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  line-height: var(--ind-font-line-height-normal, 1.4);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  resize: vertical;\n  cursor: default;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ind-mqtt-monitor',\n  styleUrl: 'mqtt-monitor.css',\n  shadow: true,\n})\nexport class IndMqttMonitor {\n  @Element() host!: HTMLElement;\n\n  /** Full log content. Newline-separated lines. */\n  @Prop() log: string = '';\n  /** Active filter — substring match on each line, case-insensitive. */\n  @Prop({ mutable: true }) filterValue: string = '';\n  /** When true, the log doesn't auto-scroll on new content. */\n  @Prop({ mutable: true }) paused: boolean = false;\n  /** Visible rows of the log textarea. */\n  @Prop() rows: number = 18;\n\n  @Event() indFilterChange!: EventEmitter<string>;\n  @Event() indPauseChange!: EventEmitter<boolean>;\n  @Event() indClear!: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.scrollToBottom();\n  }\n\n  @Watch('log')\n  onLogChange() {\n    if (!this.paused) this.scrollToBottom();\n  }\n\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const ta = this.host.shadowRoot?.querySelector<HTMLTextAreaElement>('.log');\n      if (ta) ta.scrollTop = ta.scrollHeight;\n    });\n  }\n\n  private filteredLines(): string[] {\n    const lines = this.log.split('\\n');\n    if (!this.filterValue) return lines;\n    const f = this.filterValue.toLowerCase();\n    return lines.filter((l) => l.toLowerCase().includes(f));\n  }\n\n  private onFilter = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.filterValue = v;\n    this.indFilterChange.emit(v);\n  };\n\n  private onPause = (e: Event) => {\n    const v = (e.target as HTMLInputElement).checked;\n    this.paused = v;\n    this.indPauseChange.emit(v);\n  };\n\n  render() {\n    const filtered = this.filteredLines();\n    const total = this.log ? this.log.split('\\n').filter((l) => l.length > 0).length : 0;\n    const visible = filtered.filter((l) => l.length > 0).length;\n    const countLabel = this.filterValue ? `${visible} / ${total} msg` : `${total} msg`;\n    return (\n      <Host>\n        <div class=\"toolbar\" part=\"toolbar\">\n          <input\n            class=\"filter\"\n            part=\"filter\"\n            type=\"search\"\n            placeholder=\"Filter topic / payload...\"\n            value={this.filterValue}\n            onInput={this.onFilter}\n          />\n          <label class=\"check\">\n            <input type=\"checkbox\" checked={this.paused} onChange={this.onPause} />\n            <span>Pause</span>\n          </label>\n          <span class=\"spacer\" />\n          <span class=\"counter\" part=\"counter\">{countLabel}</span>\n          <button\n            type=\"button\"\n            class=\"clear\"\n            part=\"clear\"\n            onClick={() => this.indClear.emit()}\n          >Clear</button>\n        </div>\n        <textarea\n          class=\"log\"\n          part=\"log\"\n          readonly\n          rows={this.rows}\n        >{filtered.join('\\n')}</textarea>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-nav-item.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const navItemCss = () => `:host{display:block;font-family:var(--ind-font-family-sans)}.item{position:relative;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);width:100%;height:var(--ind-nav-item-height, 38px);padding:0 var(--ind-spacing-5, 12px);background:transparent;border:none;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font:inherit;font-size:var(--ind-font-size-base, 12px);text-align:left;text-decoration:none;cursor:pointer;user-select:none;box-sizing:border-box;transition:background-color var(--ind-motion-duration-fast, 120ms),     color            var(--ind-motion-duration-fast, 120ms)}.indicator{width:10px;font-size:9px;color:var(--ind-feedback-info-bg, #0891b2);opacity:0;transition:opacity var(--ind-motion-duration-fast, 120ms);text-align:center}.content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{font-size:var(--ind-font-size-xs, 10px);font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-bold, 700);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);padding:1px var(--ind-spacing-2, 4px);min-width:16px;text-align:center;border-radius:var(--ind-radius-sm, 2px);background:var(--ind-feedback-error-bg, #dc2626);color:var(--ind-feedback-error-fg, #ffffff);line-height:1.2}.item:hover:not(:disabled):not([aria-disabled="true"]){background:var(--ind-surface-raised);color:var(--ind-surface-text-primary)}.item:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:-2px}:host([active]) .item{background:var(--ind-surface-raised);color:var(--ind-surface-text-primary);font-weight:var(--ind-font-weight-semibold, 600)}:host([active]) .indicator{opacity:1}:host([disabled]){opacity:0.4;pointer-events:none}`;
+
+const IndNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indSelect = index.createEvent(this, "indSelect");
+    }
+    /** Current page indicator — gets the ▶ prefix and active styling. */
+    active = false;
+    disabled = false;
+    /** Label text. Falls back to slotted content. */
+    label;
+    /** Optional href. When set, renders as `<a>` so middle-click / right-click open in new tab. */
+    href;
+    /** Optional badge — alarm count, unread messages, etc. */
+    badge;
+    /** Fires on click (or Enter / Space). Use this to drive client-side routers. */
+    indSelect;
+    onClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (!this.href)
+            e.preventDefault();
+        this.indSelect.emit();
+    };
+    render() {
+        const ariaCurrent = this.active ? 'page' : undefined;
+        const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;
+        const inner = [
+            index.h("span", { key: 'ad9e90d0aab88711ff9e5f5db2cd988a76520c3c', class: "indicator", part: "indicator", "aria-hidden": "true" }, "\u25B6"),
+            index.h("span", { key: '33fa94a1e111cfc992dbd20ec1c8cfc9a30b18c5', class: "content", part: "content" }, index.h("slot", { key: 'bfc5072816f07d0fc276d67621efa09d4ce421f4' }, this.label)),
+            showBadge ? index.h("span", { class: "badge", part: "badge" }, this.badge) : null,
+        ];
+        return (index.h(index.Host, { key: '895afdd6a1a347adadb7213e4b42ece2d3e32c65' }, this.href ? (index.h("a", { class: "item", part: "item", href: this.href, "aria-current": ariaCurrent, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, inner)) : (index.h("button", { type: "button", class: "item", part: "item", disabled: this.disabled, "aria-current": ariaCurrent, onClick: this.onClick }, inner))));
+    }
+};
+IndNavItem.style = navItemCss();
+
+exports.ind_nav_item = IndNavItem;
+//# sourceMappingURL=ind-nav-item.entry.cjs.js.map
+
+//# sourceMappingURL=ind-nav-item.cjs.entry.js.map

package/dist/cjs/ind-nav-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-nav-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,gsDAAgsD,CAAC;;MCO9sD,UAAU,GAAA,MAAA;;;;;;IAEI,MAAM,GAAY,KAAK;IACvB,QAAQ,GAAY,KAAK;;AAE1C,IAAA,KAAK;;AAEL,IAAA,IAAI;;AAEJ,IAAA,KAAK;;AAGJ,IAAA,SAAS;AAEV,IAAA,OAAO,GAAG,CAAC,CAAa,KAAI;AAClC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE;YAClB;;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,CAAC,CAAC,cAAc,EAAE;AAClC,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS;AACpD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;AAEtF,QAAA,MAAM,KAAK,GAAG;YACZA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,QAAA,CAAS;AACpE,YAAAA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAACA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CAAO;YACrE,SAAS,GAAGA,kBAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,GAAG,IAAI;SACxE;QAED,QACEA,OAAA,CAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,WAAW,EAAA,eAAA,EACV,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpB,KAAK,CACJ,KAEJA,OAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,cAAA,EACT,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpB,KAAK,CACC,CACV,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/nav-item/nav-item.css?tag=ind-nav-item&encapsulation=shadow","src/components/molecules/nav-item/nav-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--ind-font-family-sans);\n}\n\n.item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  width: 100%;\n  height: var(--ind-nav-item-height, 38px);\n  padding: 0 var(--ind-spacing-5, 12px);\n  background: transparent;\n  border: none;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  font: inherit;\n  font-size: var(--ind-font-size-base, 12px);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n  transition:\n    background-color var(--ind-motion-duration-fast, 120ms),\n    color            var(--ind-motion-duration-fast, 120ms);\n}\n\n.indicator {\n  width: 10px;\n  font-size: 9px;\n  color: var(--ind-feedback-info-bg, #0891b2);\n  opacity: 0;\n  transition: opacity var(--ind-motion-duration-fast, 120ms);\n  text-align: center;\n}\n\n.content {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-bold, 700);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  padding: 1px var(--ind-spacing-2, 4px);\n  min-width: 16px;\n  text-align: center;\n  border-radius: var(--ind-radius-sm, 2px);\n  background: var(--ind-feedback-error-bg, #dc2626);\n  color: var(--ind-feedback-error-fg, #ffffff);\n  line-height: 1.2;\n}\n\n.item:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n  background: var(--ind-surface-raised);\n  color: var(--ind-surface-text-primary);\n}\n\n.item:focus-visible {\n  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);\n  outline-offset: -2px;\n}\n\n:host([active]) .item {\n  background: var(--ind-surface-raised);\n  color: var(--ind-surface-text-primary);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n:host([active]) .indicator {\n  opacity: 1;\n}\n\n:host([disabled]) {\n  opacity: 0.4;\n  pointer-events: none;\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ind-nav-item',\n  styleUrl: 'nav-item.css',\n  shadow: true,\n})\nexport class IndNavItem {\n  /** Current page indicator — gets the ▶ prefix and active styling. */\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Label text. Falls back to slotted content. */\n  @Prop() label?: string;\n  /** Optional href. When set, renders as `<a>` so middle-click / right-click open in new tab. */\n  @Prop() href?: string;\n  /** Optional badge — alarm count, unread messages, etc. */\n  @Prop() badge?: string | number;\n\n  /** Fires on click (or Enter / Space). Use this to drive client-side routers. */\n  @Event() indSelect!: EventEmitter<void>;\n\n  private onClick = (e: MouseEvent) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) e.preventDefault();\n    this.indSelect.emit();\n  };\n\n  render() {\n    const ariaCurrent = this.active ? 'page' : undefined;\n    const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;\n\n    const inner = [\n      <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">▶</span>,\n      <span class=\"content\" part=\"content\"><slot>{this.label}</slot></span>,\n      showBadge ? <span class=\"badge\" part=\"badge\">{this.badge}</span> : null,\n    ];\n\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            class=\"item\"\n            part=\"item\"\n            href={this.href}\n            aria-current={ariaCurrent}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.onClick}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button\n            type=\"button\"\n            class=\"item\"\n            part=\"item\"\n            disabled={this.disabled}\n            aria-current={ariaCurrent}\n            onClick={this.onClick}\n          >\n            {inner}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const progressCss = () => `:host{display:block;font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:8px;--_fill:var(--ind-button-primary-bg, #2563eb)}:host([size="sm"]){--_h:4px}:host([size="md"]){--_h:8px}:host([size="lg"]){--_h:12px}:host([variant="success"]){--_fill:var(--ind-feedback-success-bg, #16a34a)}:host([variant="warning"]){--_fill:var(--ind-feedback-warning-bg, #f59e0b)}:host([variant="error"]){--_fill:var(--ind-feedback-error-bg, #dc2626)}.header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ind-spacing-3, 6px);margin-bottom:var(--ind-spacing-2, 4px)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.value{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.track{position:relative;width:100%;height:var(--_h);background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-sm, 2px);overflow:hidden}.fill{display:block;height:100%;background:var(--_fill);transition:width var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([indeterminate]) .fill{width:30%;animation:ind-progress-march 1.4s ease-in-out infinite}@keyframes ind-progress-march{0%{margin-left:-30%}100%{margin-left:100%}}@media (prefers-reduced-motion: reduce){:host([indeterminate]) .fill{animation:none;width:100%;opacity:0.5}}`;
+
+const IndProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Current value (0–`max`). */
+    value = 0;
+    /** Max value. */
+    max = 100;
+    /** Visual variant. Use `warning` / `error` for low / critical fill levels. */
+    variant = 'default';
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered above the bar. */
+    label;
+    /** Show numeric value next to the label. */
+    showValue = false;
+    /** Unit suffix for the displayed value. */
+    unit;
+    /** Indeterminate (animated bar, no value). */
+    indeterminate = false;
+    percent() {
+        if (this.max <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    valueLabel() {
+        if (this.unit === '%' || (this.max === 100 && !this.unit)) {
+            return `${Math.round(this.percent())} %`;
+        }
+        return `${this.value}${this.unit ? ' ' + this.unit : ''} / ${this.max}`;
+    }
+    render() {
+        const pct = this.percent();
+        return (index.h(index.Host, { key: '0e74d2952b1fe8b2356927e0e38adbcb72d863c6', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label }, (this.label || this.showValue) && (index.h("div", { key: '1fbeb6fed63ac3fb1cb830408d6ee851ec9fe989', class: "header", part: "header" }, this.label && index.h("span", { key: '1a2a0e6bb58c4e69b5b19587906e7c53720587cb', class: "label", part: "label" }, this.label), this.showValue && !this.indeterminate && (index.h("span", { key: '7fa1c9ce1e0ec68abc1b478cfb373af8266467a3', class: "value", part: "value" }, this.valueLabel())))), index.h("div", { key: 'e821a5f203432e33199d111ba807eb6106068b14', class: "track", part: "track" }, index.h("div", { key: '88e1e2728d12adea9220b3cf8f68072e85bdc1dd', class: "fill", part: "fill", style: this.indeterminate ? undefined : { width: `${pct}%` } }))));
+    }
+};
+IndProgress.style = progressCss();
+
+exports.ind_progress = IndProgress;
+//# sourceMappingURL=ind-progress.entry.cjs.js.map
+
+//# sourceMappingURL=ind-progress.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-progress.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,miDAAmiD,CAAC;;MCUljD,WAAW,GAAA,MAAA;;;;;IAEd,KAAK,GAAW,CAAC;;IAEjB,GAAG,GAAW,GAAG;;IAEA,OAAO,GAAoB,SAAS;;IAEpC,IAAI,GAAiB,IAAI;;AAE1C,IAAA,KAAK;;IAEL,SAAS,GAAY,KAAK;;AAE1B,IAAA,IAAI;;IAEa,aAAa,GAAY,KAAK;IAE/C,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;QAC3B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;;IAG1D,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,KAAK,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACzD,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,EAAA,CAAI;;QAE1C,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA,GAAA,EAAM,IAAI,CAAC,GAAG,CAAA,CAAE;;IAGzE,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE;QAC1B,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,EAAA,eAAA,EAC3C,CAAC,EAAA,eAAA,EACD,IAAI,CAAC,GAAG,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EAAA,EAErB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,MAC5BD,kEAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9B,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EAClE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,KACpCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,UAAU,EAAE,CAAQ,CAC5D,CACG,CACP,EACDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,KAAK,EAAE,CAAA,EAAG,GAAG,CAAA,CAAA,CAAG,EAAE,EAAA,CAC5D,CACE,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/progress/progress.css?tag=ind-progress&encapsulation=shadow","src/components/atoms/progress/progress.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_h: 8px;\n  --_fill: var(--ind-button-primary-bg, #2563eb);\n}\n\n:host([size=\"sm\"]) { --_h: 4px; }\n:host([size=\"md\"]) { --_h: 8px; }\n:host([size=\"lg\"]) { --_h: 12px; }\n\n:host([variant=\"success\"]) { --_fill: var(--ind-feedback-success-bg, #16a34a); }\n:host([variant=\"warning\"]) { --_fill: var(--ind-feedback-warning-bg, #f59e0b); }\n:host([variant=\"error\"])   { --_fill: var(--ind-feedback-error-bg, #dc2626); }\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}\n\n.label {\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.value {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--_h);\n  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-sm, 2px);\n  overflow: hidden;\n}\n\n.fill {\n  display: block;\n  height: 100%;\n  background: var(--_fill);\n  transition: width var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n:host([indeterminate]) .fill {\n  width: 30%;\n  animation: ind-progress-march 1.4s ease-in-out infinite;\n}\n\n@keyframes ind-progress-march {\n  0%   { margin-left: -30%; }\n  100% { margin-left: 100%; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    animation: none;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProgressVariant = 'default' | 'success' | 'warning' | 'error';\nexport type ProgressSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-progress',\n  styleUrl: 'progress.css',\n  shadow: true,\n})\nexport class IndProgress {\n  /** Current value (0–`max`). */\n  @Prop() value: number = 0;\n  /** Max value. */\n  @Prop() max: number = 100;\n  /** Visual variant. Use `warning` / `error` for low / critical fill levels. */\n  @Prop({ reflect: true }) variant: ProgressVariant = 'default';\n  /** Size. */\n  @Prop({ reflect: true }) size: ProgressSize = 'md';\n  /** Optional label rendered above the bar. */\n  @Prop() label?: string;\n  /** Show numeric value next to the label. */\n  @Prop() showValue: boolean = false;\n  /** Unit suffix for the displayed value. */\n  @Prop() unit?: string;\n  /** Indeterminate (animated bar, no value). */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  private percent(): number {\n    if (this.max <= 0) return 0;\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100));\n  }\n\n  private valueLabel(): string {\n    if (this.unit === '%' || (this.max === 100 && !this.unit)) {\n      return `${Math.round(this.percent())} %`;\n    }\n    return `${this.value}${this.unit ? ' ' + this.unit : ''} / ${this.max}`;\n  }\n\n  render() {\n    const pct = this.percent();\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-valuenow={this.indeterminate ? undefined : this.value}\n        aria-valuemin={0}\n        aria-valuemax={this.max}\n        aria-label={this.label}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"header\" part=\"header\">\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n            {this.showValue && !this.indeterminate && (\n              <span class=\"value\" part=\"value\">{this.valueLabel()}</span>\n            )}\n          </div>\n        )}\n        <div class=\"track\" part=\"track\">\n          <div\n            class=\"fill\"\n            part=\"fill\"\n            style={this.indeterminate ? undefined : { width: `${pct}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-scara-canvas.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const scaraCanvasCss = () => `:host{display:block;width:var(--ind-size-canvas-robot-width, 320px);height:var(--ind-size-canvas-robot-height, 220px);font-family:var(--ind-font-family-mono)}svg{display:block;width:100%;height:100%;background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px)}.envelope{fill:none;stroke:var(--ind-surface-border-subtle);stroke-dasharray:2 4}.envelope-inner{stroke-dasharray:1 3;opacity:0.6}.axis{stroke:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));stroke-width:1}.axis-label{font-family:var(--ind-font-family-mono);font-size:9px;fill:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.link{stroke-width:5;stroke-linecap:round;transition:stroke 240ms}.link-1{stroke:var(--ind-state-running-bg, #16a34a)}.link-2{stroke:var(--ind-state-running-border, #4ade80)}.wrist{stroke:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));stroke-width:2;stroke-linecap:round}.joint{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));stroke:var(--ind-surface-border-strong);stroke-width:1}.joint.base{fill:var(--ind-state-stopped-bg, #5a6776);stroke:var(--ind-state-stopped-border, #8390a0)}.joint.effector{fill:var(--ind-state-warning-bg, #f59e0b);stroke:var(--ind-state-warning-border, #fcd34d)}.readout text{font-size:9px;fill:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));font-feature-settings:"tnum" 1}.readout tspan{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-weight:700}:host([state="moving"]) .link{stroke-dasharray:4 2;animation:ind-scara-move 1.2s linear infinite}:host([state="fault"]) .link,:host([state="fault"]) .wrist{stroke:var(--ind-state-fault-bg, #dc2626)}:host([state="fault"]) .joint{stroke:var(--ind-state-fault-border, #f87171)}@keyframes ind-scara-move{to{stroke-dashoffset:-12}}@media (prefers-reduced-motion: reduce){:host([state="moving"]) .link{animation:none}}`;
+
+const IndScaraCanvas = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    joints = [0, 0, 0];
+    linkLengths = [110, 90];
+    state = 'idle';
+    parseArr(v) {
+        if (Array.isArray(v))
+            return v;
+        if (typeof v === 'string' && v.trim()) {
+            try {
+                const p = JSON.parse(v);
+                return Array.isArray(p) ? p : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    render() {
+        const j = this.parseArr(this.joints);
+        const l = this.parseArr(this.linkLengths);
+        const [j1 = 0, j2 = 0, j3 = 0] = j;
+        const [l1 = 110, l2 = 90] = l;
+        const cx = 160;
+        const cy = 105;
+        const j1r = (j1 * Math.PI) / 180;
+        const j2r = (j2 * Math.PI) / 180;
+        const j3r = (j3 * Math.PI) / 180;
+        // Forward kinematics
+        const ex = cx + l1 * Math.cos(j1r);
+        const ey = cy + l1 * Math.sin(j1r);
+        const eex = ex + l2 * Math.cos(j1r + j2r);
+        const eey = ey + l2 * Math.sin(j1r + j2r);
+        // Wrist indicator (J3)
+        const wlen = 14;
+        const wx = eex + wlen * Math.cos(j1r + j2r + j3r);
+        const wy = eey + wlen * Math.sin(j1r + j2r + j3r);
+        const fmt = (n) => n.toFixed(1);
+        const fmt0 = (n) => n.toFixed(0);
+        return (index.h(index.Host, { key: '0634f9fc9b197f66bf334c43c38e85c19066d090', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, index.h("svg", { key: 'c16607c36459cfad670b9ab913d46c23daf99883', viewBox: "0 0 320 220", part: "svg" }, index.h("circle", { key: '4fc539c4f5a658ffbb4a2a9594a864e04cd6e9fe', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), index.h("circle", { key: 'b493720a1f306e75dedf48dbd1ccb53850248230', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), index.h("line", { key: 'e28c6dc2ac8e73bac4381bba4dfb4cdb983097c7', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), index.h("line", { key: '5f460ffa1860dd1484100e972d043fd9a1491621', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), index.h("text", { key: 'f4cb4f52a3279f7924aea8d8e642a91be18c38a5', x: "24", y: cy + 3, class: "axis-label" }, "X"), index.h("text", { key: 'd3d18e860674380af133295b763c52bc0adf591b', x: cx + 4, y: "14", class: "axis-label" }, "Y"), index.h("line", { key: 'cfad2277909207ee8a0f99fc73cc823db20f4f8e', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), index.h("line", { key: '2ea11a2363123b2f6876179a2519dc38e9882126', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), index.h("line", { key: 'ad0a714279eea710da7e72a2141aab8165576c34', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), index.h("circle", { key: '89f2b18ca37ed7b0e67b0dee6ed28e0702cafa54', cx: cx, cy: cy, r: "8", class: "joint base" }), index.h("circle", { key: '44129fff9afa9becab60e20ab86933e4a111f854', cx: ex, cy: ey, r: "6", class: "joint elbow" }), index.h("circle", { key: 'bfa99f679b71e28f58c244267e5876c73c9cd6aa', cx: eex, cy: eey, r: "7", class: "joint effector" }), index.h("g", { key: '3753b9117625a70389a12c518330660d943a237f', class: "readout" }, index.h("text", { key: '420f362c46c764ea86fbf12128727600a1454e51', x: "10", y: "198" }, "J1 ", index.h("tspan", { key: '4f1afe52d964043034d93d02eb27b4fc4e7b7f3c' }, fmt(j1), "\u00B0")), index.h("text", { key: '185d3d66158b63322153d59a97d79792e5105957', x: "74", y: "198" }, "J2 ", index.h("tspan", { key: '9c6802f9ee9b2bb8ae3154880e2b7b1ffaf21167' }, fmt(j2), "\u00B0")), index.h("text", { key: 'b6d0a5aa47c925997cc7efa0c1cadd067f184243', x: "138", y: "198" }, "J3 ", index.h("tspan", { key: '5c06a24d477670deeceb6f80e3fb707b39b1b1e3' }, fmt(j3), "\u00B0")), index.h("text", { key: '99c96bf07d28555af967c4cb22a2856c1bdb46fb', x: "202", y: "198" }, "X ", index.h("tspan", { key: '4097b0a431bed9c608f5a43994ad213bfdd56663' }, fmt0(eex - cx))), index.h("text", { key: '56ccbac660ea805f260977c0e64fdf424f1d40fe', x: "254", y: "198" }, "Y ", index.h("tspan", { key: 'd4cfa6e17fc0da8494f8f526e7d5f27cf233dc22' }, fmt0(eey - cy)))))));
+    }
+};
+IndScaraCanvas.style = scaraCanvasCss();
+
+exports.ind_scara_canvas = IndScaraCanvas;
+//# sourceMappingURL=ind-scara-canvas.entry.cjs.js.map
+
+//# sourceMappingURL=ind-scara-canvas.cjs.entry.js.map

package/dist/cjs/ind-scara-canvas.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-scara-canvas.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/scara-canvas/scara-canvas.css?tag=ind-scara-canvas&encapsulation=shadow","src/components/atoms/scara-canvas/scara-canvas.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: var(--ind-size-canvas-robot-width, 320px);\n  height: var(--ind-size-canvas-robot-height, 220px);\n  font-family: var(--ind-font-family-mono);\n}\n\nsvg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n}\n\n.envelope {\n  fill: none;\n  stroke: var(--ind-surface-border-subtle);\n  stroke-dasharray: 2 4;\n}\n\n.envelope-inner {\n  stroke-dasharray: 1 3;\n  opacity: 0.6;\n}\n\n.axis {\n  stroke: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  stroke-width: 1;\n}\n\n.axis-label {\n  font-family: var(--ind-font-family-mono);\n  font-size: 9px;\n  fill: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.link {\n  stroke-width: 5;\n  stroke-linecap: round;\n  transition: stroke 240ms;\n}\n.link-1 { stroke: var(--ind-state-running-bg, #16a34a); }\n.link-2 { stroke: var(--ind-state-running-border, #4ade80); }\n\n.wrist {\n  stroke: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n.joint {\n  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  stroke: var(--ind-surface-border-strong);\n  stroke-width: 1;\n}\n\n.joint.base {\n  fill: var(--ind-state-stopped-bg, #5a6776);\n  stroke: var(--ind-state-stopped-border, #8390a0);\n}\n\n.joint.effector {\n  fill: var(--ind-state-warning-bg, #f59e0b);\n  stroke: var(--ind-state-warning-border, #fcd34d);\n}\n\n.readout text {\n  font-size: 9px;\n  fill: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  font-feature-settings: \"tnum\" 1;\n}\n.readout tspan {\n  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-weight: 700;\n}\n\n:host([state=\"moving\"]) .link {\n  stroke-dasharray: 4 2;\n  animation: ind-scara-move 1.2s linear infinite;\n}\n\n:host([state=\"fault\"]) .link,\n:host([state=\"fault\"]) .wrist {\n  stroke: var(--ind-state-fault-bg, #dc2626);\n}\n:host([state=\"fault\"]) .joint {\n  stroke: var(--ind-state-fault-border, #f87171);\n}\n\n@keyframes ind-scara-move {\n  to { stroke-dashoffset: -12; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([state=\"moving\"]) .link {\n    animation: none;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ScaraState = 'idle' | 'moving' | 'fault';\n\n/**\n * 2D top-down SCARA arm view. Pure presentational — pass joint angles and\n * link lengths, the component computes forward kinematics in SVG space.\n *\n *   <ind-scara-canvas .joints=${[30, 45, 0]} state=\"moving\"></ind-scara-canvas>\n *\n * - `joints[0]` (J1) — shoulder rotation in degrees, 0 = +X axis\n * - `joints[1]` (J2) — elbow rotation in degrees, relative to link 1\n * - `joints[2]` (J3) — wrist (end effector) rotation, drives the small indicator\n *\n * Z translation isn't represented — it would require a separate side view.\n */\n@Component({\n  tag: 'ind-scara-canvas',\n  styleUrl: 'scara-canvas.css',\n  shadow: true,\n})\nexport class IndScaraCanvas {\n  @Prop() joints: number[] | string = [0, 0, 0];\n  @Prop() linkLengths: number[] | string = [110, 90];\n  @Prop({ reflect: true }) state: ScaraState = 'idle';\n\n  private parseArr(v: number[] | string): number[] {\n    if (Array.isArray(v)) return v;\n    if (typeof v === 'string' && v.trim()) {\n      try {\n        const p = JSON.parse(v);\n        return Array.isArray(p) ? p : [];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  render() {\n    const j = this.parseArr(this.joints);\n    const l = this.parseArr(this.linkLengths);\n    const [j1 = 0, j2 = 0, j3 = 0] = j;\n    const [l1 = 110, l2 = 90] = l;\n\n    const cx = 160;\n    const cy = 105;\n\n    const j1r = (j1 * Math.PI) / 180;\n    const j2r = (j2 * Math.PI) / 180;\n    const j3r = (j3 * Math.PI) / 180;\n\n    // Forward kinematics\n    const ex = cx + l1 * Math.cos(j1r);\n    const ey = cy + l1 * Math.sin(j1r);\n    const eex = ex + l2 * Math.cos(j1r + j2r);\n    const eey = ey + l2 * Math.sin(j1r + j2r);\n\n    // Wrist indicator (J3)\n    const wlen = 14;\n    const wx = eex + wlen * Math.cos(j1r + j2r + j3r);\n    const wy = eey + wlen * Math.sin(j1r + j2r + j3r);\n\n    const fmt = (n: number) => n.toFixed(1);\n    const fmt0 = (n: number) => n.toFixed(0);\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={`SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°`}\n      >\n        <svg viewBox=\"0 0 320 220\" part=\"svg\">\n          {/* Working envelope */}\n          <circle cx={cx} cy={cy} r={l1 + l2} class=\"envelope envelope-outer\" />\n          <circle cx={cx} cy={cy} r={Math.max(0, l1 - l2)} class=\"envelope envelope-inner\" />\n\n          {/* Reference axes */}\n          <line x1=\"10\" y1={cy} x2=\"22\" y2={cy} class=\"axis\" />\n          <line x1={cx} y1=\"6\" x2={cx} y2=\"18\" class=\"axis\" />\n          <text x=\"24\" y={cy + 3} class=\"axis-label\">X</text>\n          <text x={cx + 4} y=\"14\" class=\"axis-label\">Y</text>\n\n          {/* Links */}\n          <line x1={cx} y1={cy} x2={ex} y2={ey} class=\"link link-1\" />\n          <line x1={ex} y1={ey} x2={eex} y2={eey} class=\"link link-2\" />\n          <line x1={eex} y1={eey} x2={wx} y2={wy} class=\"wrist\" />\n\n          {/* Joints */}\n          <circle cx={cx} cy={cy} r=\"8\" class=\"joint base\" />\n          <circle cx={ex} cy={ey} r=\"6\" class=\"joint elbow\" />\n          <circle cx={eex} cy={eey} r=\"7\" class=\"joint effector\" />\n\n          {/* Readout */}\n          <g class=\"readout\">\n            <text x=\"10\" y=\"198\">J1 <tspan>{fmt(j1)}°</tspan></text>\n            <text x=\"74\" y=\"198\">J2 <tspan>{fmt(j2)}°</tspan></text>\n            <text x=\"138\" y=\"198\">J3 <tspan>{fmt(j3)}°</tspan></text>\n            <text x=\"202\" y=\"198\">X <tspan>{fmt0(eex - cx)}</tspan></text>\n            <text x=\"254\" y=\"198\">Y <tspan>{fmt0(eey - cy)}</tspan></text>\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const selectCss = () => `:host{display:inline-block;font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:var(--ind-size-input-md, 32px)}:host([size="sm"]){--_h:var(--ind-size-input-sm, 24px)}:host([size="md"]){--_h:var(--ind-size-input-md, 32px)}:host([size="lg"]){--_h:var(--ind-size-input-lg, 40px)}.wrap{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);min-width:160px}.label{font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-medium, 500);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));letter-spacing:0.04em;text-transform:uppercase}.field{position:relative;display:inline-flex;align-items:center;height:var(--_h);background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);transition:border-color var(--ind-motion-duration-fast, 120ms),     box-shadow   var(--ind-motion-duration-fast, 120ms)}.field:focus-within{border-color:var(--ind-surface-focus-ring, #22d3ee);box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent)}.native{appearance:none;-webkit-appearance:none;flex:1;height:100%;background:transparent;border:none;outline:none;padding:0 calc(var(--ind-spacing-7, 20px) + 8px) 0 var(--ind-spacing-4, 8px);font:inherit;color:inherit;cursor:pointer;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.native::-ms-expand{display:none}.native option{background:var(--ind-surface-panel);color:var(--ind-surface-text-primary)}.caret{position:absolute;right:var(--ind-spacing-4, 8px);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));pointer-events:none;line-height:1}:host([invalid]) .field{border-color:var(--ind-feedback-error-bg, #dc2626)}:host([invalid]) .field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent)}:host([disabled]){opacity:0.55;pointer-events:none}`;
+
+const IndSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+    }
+    /**
+     * Options. Pass an array via JS property (`.options = [...]`) OR a JSON-stringified
+     * array via the HTML `options` attribute. The native picker handles keyboard nav and
+     * mobile UI without us building a popover.
+     */
+    options = [];
+    value = '';
+    placeholder;
+    label;
+    name;
+    size = 'md';
+    disabled = false;
+    invalid = false;
+    indChange;
+    parseOptions() {
+        if (Array.isArray(this.options))
+            return this.options;
+        if (typeof this.options === 'string' && this.options.trim()) {
+            try {
+                const parsed = JSON.parse(this.options);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    onChange = (e) => {
+        const v = e.target.value;
+        this.value = v;
+        this.indChange.emit(v);
+    };
+    render() {
+        const opts = this.parseOptions();
+        return (index.h(index.Host, { key: '283d3e72b726d0b04958b452629df4e579907f05' }, index.h("label", { key: 'dcbfc48d00c096cd6b709e4eb16b687cd07dd350', class: "wrap", part: "wrap" }, this.label && index.h("span", { key: '011fa524c21bfc749cedc70f6ec810ca90a73be2', class: "label", part: "label" }, this.label), index.h("span", { key: '8fc35e3db2cbf2bd9cb780d8e1e1ee395c022d1a', class: "field", part: "field" }, index.h("select", { key: 'a8944a8a82162e4f1b36e9384145dd4e0399afaf', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (index.h("option", { key: '8da45f0c3d932005210e61a216f7f9dfa9581767', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (index.h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), index.h("span", { key: 'ca2db8e41ee4fe3a8ef1a51458189face0450541', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
+    }
+};
+IndSelect.style = selectCss();
+
+exports.ind_select = IndSelect;
+//# sourceMappingURL=ind-select.entry.cjs.js.map
+
+//# sourceMappingURL=ind-select.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-select.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,wgEAAwgE,CAAC;;MCerhE,SAAS,GAAA,MAAA;;;;;AACpB;;;;AAIG;IACK,OAAO,GAA4B,EAAE;IACpB,KAAK,GAAW,EAAE;AACnC,IAAA,WAAW;AACX,IAAA,KAAK;AACL,IAAA,IAAI;IACa,IAAI,GAAe,IAAI;IACvB,QAAQ,GAAY,KAAK;IACzB,OAAO,GAAY,KAAK;AAExC,IAAA,SAAS;IAEV,YAAY,GAAA;AAClB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC,OAAO;AACpD,QAAA,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE;AAC3D,YAAA,IAAI;gBACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;AACvC,gBAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,EAAE;;AAC1C,YAAA,MAAM;AACN,gBAAA,OAAO,EAAE;;;AAGb,QAAA,OAAO,EAAE;;AAGH,IAAA,QAAQ,GAAG,CAAC,CAAQ,KAAI;AAC9B,QAAA,MAAM,CAAC,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK;AAC/C,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACxB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;QAChC,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5B,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACnEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,cAAA,EACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,WAAW,KACfA,qEAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAA,IAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE,IAClD,IAAI,CAAC,WAAW,CACV,CACV,EACA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MACVA,OAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAC3E,CAAC,CAAC,KAAK,CACD,CACV,CAAC,CACK,EACTA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,QAAA,CAAS,CACvD,CACD,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/select/select.css?tag=ind-select&encapsulation=shadow","src/components/atoms/select/select.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_h: var(--ind-size-input-md, 32px);\n}\n\n:host([size=\"sm\"]) { --_h: var(--ind-size-input-sm, 24px); }\n:host([size=\"md\"]) { --_h: var(--ind-size-input-md, 32px); }\n:host([size=\"lg\"]) { --_h: var(--ind-size-input-lg, 40px); }\n\n.wrap {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  min-width: 160px;\n}\n\n.label {\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-medium, 500);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.field {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: var(--_h);\n  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-md, 3px);\n  transition:\n    border-color var(--ind-motion-duration-fast, 120ms),\n    box-shadow   var(--ind-motion-duration-fast, 120ms);\n}\n\n.field:focus-within {\n  border-color: var(--ind-surface-focus-ring, #22d3ee);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent);\n}\n\n.native {\n  appearance: none;\n  -webkit-appearance: none;\n  flex: 1;\n  height: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0 calc(var(--ind-spacing-7, 20px) + 8px) 0 var(--ind-spacing-4, 8px);\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.native::-ms-expand { display: none; }\n\n/* Native option styling: at least give them a dark theme bg when\n * the OS picker honors it (Chrome/Edge mostly do). */\n.native option {\n  background: var(--ind-surface-panel);\n  color: var(--ind-surface-text-primary);\n}\n\n.caret {\n  position: absolute;\n  right: var(--ind-spacing-4, 8px);\n  font-size: var(--ind-font-size-base, 12px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  pointer-events: none;\n  line-height: 1;\n}\n\n:host([invalid]) .field {\n  border-color: var(--ind-feedback-error-bg, #dc2626);\n}\n:host([invalid]) .field:focus-within {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);\n}\n\n:host([disabled]) {\n  opacity: 0.55;\n  pointer-events: none;\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-select',\n  styleUrl: 'select.css',\n  shadow: true,\n})\nexport class IndSelect {\n  /**\n   * Options. Pass an array via JS property (`.options = [...]`) OR a JSON-stringified\n   * array via the HTML `options` attribute. The native picker handles keyboard nav and\n   * mobile UI without us building a popover.\n   */\n  @Prop() options: SelectOption[] | string = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder?: string;\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop({ reflect: true }) size: SelectSize = 'md';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  @Event() indChange!: EventEmitter<string>;\n\n  private parseOptions(): SelectOption[] {\n    if (Array.isArray(this.options)) return this.options;\n    if (typeof this.options === 'string' && this.options.trim()) {\n      try {\n        const parsed = JSON.parse(this.options);\n        return Array.isArray(parsed) ? parsed : [];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  private onChange = (e: Event) => {\n    const v = (e.target as HTMLSelectElement).value;\n    this.value = v;\n    this.indChange.emit(v);\n  };\n\n  render() {\n    const opts = this.parseOptions();\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <span class=\"field\" part=\"field\">\n            <select\n              class=\"native\"\n              part=\"native\"\n              disabled={this.disabled}\n              name={this.name}\n              aria-invalid={this.invalid ? 'true' : 'false'}\n              onChange={this.onChange}\n            >\n              {this.placeholder && (\n                <option value=\"\" disabled selected={this.value === ''}>\n                  {this.placeholder}\n                </option>\n              )}\n              {opts.map((o) => (\n                <option value={o.value} disabled={o.disabled} selected={o.value === this.value}>\n                  {o.label}\n                </option>\n              ))}\n            </select>\n            <span class=\"caret\" part=\"caret\" aria-hidden=\"true\">▾</span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}