@ind-ds/core 0.1.1 → 0.2.1

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

@@ -0,0 +1,330 @@
+import { h, Host } from "@stencil/core";
+export class IndKnob {
+    host;
+    /** 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}` : ''))))));
+    }
+    static get is() { return "ind-knob"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["knob.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["knob.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step for keyboard / drag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KnobSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "KnobSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/knob/knob.tsx",
+                            "id": "src/components/atoms/knob/knob.tsx::KnobSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unit suffix."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the numeric value below the knob."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indInput",
+                "name": "indInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires continuously while turning."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on release."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=knob.js.map

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

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

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

@@ -0,0 +1,145 @@
+import { h, Host } from "@stencil/core";
+export class IndLabel {
+    /** 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" }, "*"))));
+    }
+    static get is() { return "ind-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelTone",
+                    "resolved": "\"muted\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "LabelTone": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/label/label.tsx",
+                            "id": "src/components/atoms/label/label.tsx::LabelTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text emphasis."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'secondary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LabelSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/label/label.tsx",
+                            "id": "src/components/atoms/label/label.tsx::LabelSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "uppercase": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Uppercase caption styling (tracking + smaller)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "uppercase",
+                "defaultValue": "false"
+            },
+            "htmlFor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Associates the label with a form control id (rendered as <label for>)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-for"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional required marker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/atoms/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,QAAQ;IACnB,qBAAqB;IACI,IAAI,GAAc,WAAW,CAAC;IACvD,YAAY;IACa,IAAI,GAAc,IAAI,CAAC;IAChD,sDAAsD;IAC7B,SAAS,GAAY,KAAK,CAAC;IACpD,6EAA6E;IACrE,OAAO,CAAU;IACzB,gCAAgC;IACP,QAAQ,GAAY,KAAK,CAAC;IAEnD,MAAM;QACJ,MAAM,GAAG,GAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QACjD,OAAO,CACL,EAAC,IAAI;YACH,EAAC,GAAG,qDAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;gBACjD,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,UAAU,iBAAa,MAAM,QAAS,CAC3E,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1,91 +0,0 @@
-: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);
-  /* `light-dark()` makes the label readable even if the LED lands on a surface
-   * whose theme doesn't match the loaded tokens (Storybook autodocs, embedded
-   * widget on a third-party site, etc.). */
-  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; }
-
-/* Each state ships hard-coded fallbacks so the component stays visible even
- * if tokens fail to load (build-order glitch, sandbox without CSS imports).
- */
-: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;
-    /* Substitute: a solid outline ring so the alarm condition is still visible without motion. */
-    outline: 2px solid var(--_border);
-    outline-offset: 2px;
-  }
-}

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

@@ -10,7 +10,7 @@ export class IndLed {
     label;
     render() {
         const accessibleName = this.label ?? `${this.state} indicator`;
-        return (h(Host, { key: 'babe0b6e1a80181397c53ec0234ce3ff8d5741b4', role: "status", "aria-label": accessibleName, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("span", { key: 'd7ca8697299f70715fdbe101d541c3313508e434', class: "led", part: "led", "aria-hidden": "true" }), this.label && h("span", { key: 'f39a9b21eabd4380db866e9bfb2591bcaeac3ce4', class: "label", part: "label" }, this.label)));
+        return (h(Host, { key: 'd843ed36b6c73a35e20903104acdf71540429a7a', role: "status", "aria-label": accessibleName, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("span", { key: '97548c63e15ca29608b5646f51bbcba147114d0c', class: "led", part: "led", "aria-hidden": "true" }), this.label && h("span", { key: '0224cf04e55d1ccb388fc9c4f8796881bc0bf884', class: "label", part: "label" }, this.label)));
     }
     static get is() { return "ind-led"; }
     static get encapsulation() { return "shadow"; }