@ind-ds/core 0.1.0

package/dist/collection/components/atoms/shelf-canvas/shelf-canvas.js

@@ -0,0 +1,184 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Grid of bottle/container slots showing their fill level. Generic — represents
+ * any rack of resupplyable containers (bottles, cartridges, kegs, etc.).
+ *
+ *   <ind-shelf-canvas
+ *     .slots=${[{id:'a', label:'A', level:78}, {id:'b', label:'B', level:12}]}
+ *     cols="2"></ind-shelf-canvas>
+ */
+export class IndShelfCanvas {
+    slots = [];
+    rows = 1;
+    cols = 4;
+    heading;
+    parseSlots() {
+        if (Array.isArray(this.slots))
+            return this.slots;
+        if (typeof this.slots === 'string' && this.slots.trim()) {
+            try {
+                const p = JSON.parse(this.slots);
+                return Array.isArray(p) ? p : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    resolveState(s) {
+        if (s.state)
+            return s.state;
+        if (s.level === undefined)
+            return 'missing';
+        if (s.level >= 60)
+            return 'full';
+        if (s.level >= 20)
+            return 'partial';
+        return 'empty';
+    }
+    render() {
+        const slots = this.parseSlots();
+        const W = 480;
+        const H = 340;
+        const padX = 24;
+        const padTop = this.heading ? 40 : 24;
+        const padBottom = 28;
+        const gridW = W - padX * 2;
+        const gridH = H - padTop - padBottom;
+        const cellW = gridW / this.cols;
+        const cellH = gridH / this.rows;
+        return (h(Host, { key: 'e368cf70181cf224e4076b937a1e12a53e95e58f', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, h("svg", { key: 'e5fa8c4d7bed40cddbd4c6a691aa49a9c29007a5', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (h("text", { key: 'ec0c820367a330cc570b2c44c6d63c11fbed7f3b', x: W / 2, y: "22", class: "heading", "text-anchor": "middle" }, this.heading)), slots.slice(0, this.rows * this.cols).map((s) => {
+            const i = slots.indexOf(s);
+            const col = i % this.cols;
+            const row = Math.floor(i / this.cols);
+            const cx = padX + col * cellW + cellW / 2;
+            const cy = padTop + row * cellH + cellH / 2;
+            const w = Math.min(cellW - 30, 80);
+            const bodyH = Math.max(40, cellH - 60);
+            const x = cx - w / 2;
+            const y = cy - bodyH / 2;
+            const neckTopX1 = x + w * 0.32;
+            const neckTopX2 = x + w * 0.68;
+            const shoulderY = y + 14;
+            const state = this.resolveState(s);
+            const level = s.level ?? 0;
+            const innerPad = 5;
+            const innerH = bodyH - 20 - innerPad * 2;
+            const fillH = Math.max(0, innerH * (level / 100));
+            return (h("g", { class: `slot slot--${state}` }, h("path", { class: "outline", d: `
+                    M ${neckTopX1} ${y}
+                    L ${neckTopX2} ${y}
+                    L ${neckTopX2} ${y + 8}
+                    L ${x + w} ${shoulderY}
+                    L ${x + w} ${y + bodyH}
+                    L ${x} ${y + bodyH}
+                    L ${x} ${shoulderY}
+                    L ${neckTopX1} ${y + 8}
+                    Z
+                  ` }), state !== 'missing' && level > 0 && (h("rect", { class: "fill", x: x + innerPad, y: y + bodyH - innerPad - fillH, width: w - innerPad * 2, height: fillH, rx: "2" })), state !== 'missing' && (h("text", { x: cx, y: cy + 4, class: "level", "text-anchor": "middle" }, Math.round(level), "%")), h("text", { x: cx, y: y + bodyH + 16, class: "label", "text-anchor": "middle" }, s.label)));
+        }))));
+    }
+    static get is() { return "ind-shelf-canvas"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["shelf-canvas.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["shelf-canvas.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "slots": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ShelfSlot[] | string",
+                    "resolved": "ShelfSlot[] | string",
+                    "references": {
+                        "ShelfSlot": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/shelf-canvas/shelf-canvas.tsx",
+                            "id": "src/components/atoms/shelf-canvas/shelf-canvas.tsx::ShelfSlot"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slots",
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "1"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols",
+                "defaultValue": "4"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            }
+        };
+    }
+}
+//# sourceMappingURL=shelf-canvas.js.map

package/dist/collection/components/atoms/shelf-canvas/shelf-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shelf-canvas.js","sourceRoot":"","sources":["../../../../src/components/atoms/shelf-canvas/shelf-canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAezD;;;;;;;GAOG;AAMH,MAAM,OAAO,cAAc;IACjB,KAAK,GAAyB,EAAE,CAAC;IACjC,IAAI,GAAW,CAAC,CAAC;IACjB,IAAI,GAAW,CAAC,CAAC;IACjB,OAAO,CAAU;IAEjB,UAAU;QAChB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QACjD,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;YACxD,IAAI,CAAC;gBACH,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACjC,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACnC,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,YAAY,CAAC,CAAY;QAC/B,IAAI,CAAC,CAAC,KAAK;YAAE,OAAO,CAAC,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;QAC5C,IAAI,CAAC,CAAC,KAAK,IAAI,EAAE;YAAE,OAAO,MAAM,CAAC;QACjC,IAAI,CAAC,CAAC,KAAK,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,MAAM,CAAC,GAAG,GAAG,CAAC;QACd,MAAM,CAAC,GAAG,GAAG,CAAC;QACd,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;QAC3B,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;QACrC,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QAChC,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QAEhC,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,OAAO,IAAI,iBAAiB;YAC5D,4DAAK,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAC,KAAK;gBACtC,IAAI,CAAC,OAAO,IAAI,CACf,6DAAM,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,iBAAa,QAAQ,IACxD,IAAI,CAAC,OAAO,CACR,CACR;gBAEA,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC/C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC3B,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;oBAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;oBACtC,MAAM,EAAE,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1C,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;oBAE5C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;oBACnC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,CAAC;oBACvC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;oBACrB,MAAM,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;oBACzB,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;oBAC/B,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;oBAC/B,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,CAAC;oBAEzB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;oBACnC,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;oBAC3B,MAAM,QAAQ,GAAG,CAAC,CAAC;oBACnB,MAAM,MAAM,GAAG,KAAK,GAAG,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC;oBACzC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;oBAElD,OAAO,CACL,SAAG,KAAK,EAAE,cAAc,KAAK,EAAE;wBAE7B,YACE,KAAK,EAAC,SAAS,EACf,CAAC,EAAE;wBACG,SAAS,IAAI,CAAC;wBACd,SAAS,IAAI,CAAC;wBACd,SAAS,IAAI,CAAC,GAAG,CAAC;wBAClB,CAAC,GAAG,CAAC,IAAI,SAAS;wBAClB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK;wBAClB,CAAC,IAAI,CAAC,GAAG,KAAK;wBACd,CAAC,IAAI,SAAS;wBACd,SAAS,IAAI,CAAC,GAAG,CAAC;;mBAEvB,GACD;wBAGD,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,IAAI,CACnC,YACE,KAAK,EAAC,MAAM,EACZ,CAAC,EAAE,CAAC,GAAG,QAAQ,EACf,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,EAC/B,KAAK,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC,EACvB,MAAM,EAAE,KAAK,EACb,EAAE,EAAC,GAAG,GACN,CACH;wBAGA,KAAK,KAAK,SAAS,IAAI,CACtB,YAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,KAAK,EAAC,OAAO,iBAAa,QAAQ;4BACvD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;gCACb,CACR;wBAGD,YAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,KAAK,EAAC,OAAO,iBAAa,QAAQ,IAC/D,CAAC,CAAC,KAAK,CACH,CACL,CACL,CAAC;gBACJ,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ShelfSlotState = 'full' | 'partial' | 'empty' | 'missing';\n\nexport interface ShelfSlot {\n  /** Stable identifier for keying / cell click events. */\n  id: string;\n  /** Short label shown under the container. */\n  label: string;\n  /** 0–100 fill level. `undefined` ⇒ container considered missing. */\n  level?: number;\n  /** Explicit state — overrides the level-based default. */\n  state?: ShelfSlotState;\n}\n\n/**\n * Grid of bottle/container slots showing their fill level. Generic — represents\n * any rack of resupplyable containers (bottles, cartridges, kegs, etc.).\n *\n *   <ind-shelf-canvas\n *     .slots=${[{id:'a', label:'A', level:78}, {id:'b', label:'B', level:12}]}\n *     cols=\"2\"></ind-shelf-canvas>\n */\n@Component({\n  tag: 'ind-shelf-canvas',\n  styleUrl: 'shelf-canvas.css',\n  shadow: true,\n})\nexport class IndShelfCanvas {\n  @Prop() slots: ShelfSlot[] | string = [];\n  @Prop() rows: number = 1;\n  @Prop() cols: number = 4;\n  @Prop() heading?: string;\n\n  private parseSlots(): ShelfSlot[] {\n    if (Array.isArray(this.slots)) return this.slots;\n    if (typeof this.slots === 'string' && this.slots.trim()) {\n      try {\n        const p = JSON.parse(this.slots);\n        return Array.isArray(p) ? p : [];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  private resolveState(s: ShelfSlot): ShelfSlotState {\n    if (s.state) return s.state;\n    if (s.level === undefined) return 'missing';\n    if (s.level >= 60) return 'full';\n    if (s.level >= 20) return 'partial';\n    return 'empty';\n  }\n\n  render() {\n    const slots = this.parseSlots();\n    const W = 480;\n    const H = 340;\n    const padX = 24;\n    const padTop = this.heading ? 40 : 24;\n    const padBottom = 28;\n    const gridW = W - padX * 2;\n    const gridH = H - padTop - padBottom;\n    const cellW = gridW / this.cols;\n    const cellH = gridH / this.rows;\n\n    return (\n      <Host role=\"img\" aria-label={this.heading ?? 'Shelf inventory'}>\n        <svg viewBox={`0 0 ${W} ${H}`} part=\"svg\">\n          {this.heading && (\n            <text x={W / 2} y=\"22\" class=\"heading\" text-anchor=\"middle\">\n              {this.heading}\n            </text>\n          )}\n\n          {slots.slice(0, this.rows * this.cols).map((s) => {\n            const i = slots.indexOf(s);\n            const col = i % this.cols;\n            const row = Math.floor(i / this.cols);\n            const cx = padX + col * cellW + cellW / 2;\n            const cy = padTop + row * cellH + cellH / 2;\n\n            const w = Math.min(cellW - 30, 80);\n            const bodyH = Math.max(40, cellH - 60);\n            const x = cx - w / 2;\n            const y = cy - bodyH / 2;\n            const neckTopX1 = x + w * 0.32;\n            const neckTopX2 = x + w * 0.68;\n            const shoulderY = y + 14;\n\n            const state = this.resolveState(s);\n            const level = s.level ?? 0;\n            const innerPad = 5;\n            const innerH = bodyH - 20 - innerPad * 2;\n            const fillH = Math.max(0, innerH * (level / 100));\n\n            return (\n              <g class={`slot slot--${state}`}>\n                {/* container outline — bottle silhouette */}\n                <path\n                  class=\"outline\"\n                  d={`\n                    M ${neckTopX1} ${y}\n                    L ${neckTopX2} ${y}\n                    L ${neckTopX2} ${y + 8}\n                    L ${x + w} ${shoulderY}\n                    L ${x + w} ${y + bodyH}\n                    L ${x} ${y + bodyH}\n                    L ${x} ${shoulderY}\n                    L ${neckTopX1} ${y + 8}\n                    Z\n                  `}\n                />\n\n                {/* fill */}\n                {state !== 'missing' && level > 0 && (\n                  <rect\n                    class=\"fill\"\n                    x={x + innerPad}\n                    y={y + bodyH - innerPad - fillH}\n                    width={w - innerPad * 2}\n                    height={fillH}\n                    rx=\"2\"\n                  />\n                )}\n\n                {/* level text inside the body */}\n                {state !== 'missing' && (\n                  <text x={cx} y={cy + 4} class=\"level\" text-anchor=\"middle\">\n                    {Math.round(level)}%\n                  </text>\n                )}\n\n                {/* label under the container */}\n                <text x={cx} y={y + bodyH + 16} class=\"label\" text-anchor=\"middle\">\n                  {s.label}\n                </text>\n              </g>\n            );\n          })}\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/status-dot/status-dot.css

@@ -0,0 +1,69 @@
+:host {
+  display: inline-block;
+  --_size: 8px;
+  --_bg:   var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  --_glow: transparent;
+
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: 50%;
+  background: var(--_bg);
+  box-shadow: 0 0 6px var(--_glow);
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+:host([size="sm"]) { --_size: 6px; }
+:host([size="md"]) { --_size: 8px; }
+:host([size="lg"]) { --_size: 12px; }
+
+:host([state="running"]) {
+  --_bg:   var(--ind-state-running-bg, #16a34a);
+  --_glow: var(--ind-state-running-glow, rgba(34, 197, 94, 0.6));
+}
+:host([state="stopped"]) {
+  --_bg:   var(--ind-state-stopped-bg, #5a6776);
+}
+:host([state="fault"]) {
+  --_bg:   var(--ind-state-fault-bg, #dc2626);
+  --_glow: var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7));
+}
+:host([state="warning"]) {
+  --_bg:   var(--ind-state-warning-bg, #f59e0b);
+  --_glow: var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6));
+}
+:host([state="maintenance"]) {
+  --_bg:   var(--ind-state-maintenance-bg, #2563eb);
+  --_glow: var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6));
+}
+:host([state="success"]) {
+  --_bg:   var(--ind-feedback-success-bg, #16a34a);
+  --_glow: rgba(34, 197, 94, 0.5);
+}
+:host([state="info"]) {
+  --_bg:   var(--ind-feedback-info-bg, #0891b2);
+  --_glow: rgba(8, 145, 178, 0.5);
+}
+:host([state="error"]) {
+  --_bg:   var(--ind-feedback-error-bg, #dc2626);
+  --_glow: rgba(220, 38, 38, 0.6);
+}
+:host([state="neutral"]) {
+  --_bg:   var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+:host([blinking]) {
+  animation: ind-status-dot-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite;
+}
+
+@keyframes ind-status-dot-blink {
+  50% { opacity: 0.3; box-shadow: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([blinking]) {
+    animation: none;
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}

package/dist/collection/components/atoms/status-dot/status-dot.js

@@ -0,0 +1,125 @@
+import { h, Host } from "@stencil/core";
+export class IndStatusDot {
+    state = 'neutral';
+    size = 'md';
+    blinking = false;
+    /**
+     * Optional accessible name. Set when the dot stands alone; leave undefined
+     * when it's paired with adjacent text that already names the status.
+     */
+    label;
+    render() {
+        if (this.label) {
+            return h(Host, { role: "status", "aria-label": this.label });
+        }
+        return h(Host, { "aria-hidden": "true" });
+    }
+    static get is() { return "ind-status-dot"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["status-dot.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["status-dot.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusDotState",
+                    "resolved": "\"error\" | \"fault\" | \"info\" | \"maintenance\" | \"neutral\" | \"running\" | \"stopped\" | \"success\" | \"warning\"",
+                    "references": {
+                        "StatusDotState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/status-dot/status-dot.tsx",
+                            "id": "src/components/atoms/status-dot/status-dot.tsx::StatusDotState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'neutral'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusDotSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "StatusDotSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/status-dot/status-dot.tsx",
+                            "id": "src/components/atoms/status-dot/status-dot.tsx::StatusDotSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "blinking": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "blinking",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accessible name. Set when the dot stands alone; leave undefined\nwhen it's paired with adjacent text that already names the status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=status-dot.js.map

package/dist/collection/components/atoms/status-dot/status-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-dot.js","sourceRoot":"","sources":["../../../../src/components/atoms/status-dot/status-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAoBzD,MAAM,OAAO,YAAY;IACE,KAAK,GAAmB,SAAS,CAAC;IAClC,IAAI,GAAkB,IAAI,CAAC;IAC3B,QAAQ,GAAY,KAAK,CAAC;IAEnD;;;OAGG;IACK,KAAK,CAAU;IAEvB,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,KAAK,GAAI,CAAC;QACxD,CAAC;QACD,OAAO,EAAC,IAAI,mBAAa,MAAM,GAAG,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type StatusDotState =\n  | 'neutral'\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'success'\n  | 'info'\n  | 'error';\n\nexport type StatusDotSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-status-dot',\n  styleUrl: 'status-dot.css',\n  shadow: true,\n})\nexport class IndStatusDot {\n  @Prop({ reflect: true }) state: StatusDotState = 'neutral';\n  @Prop({ reflect: true }) size: StatusDotSize = 'md';\n  @Prop({ reflect: true }) blinking: boolean = false;\n\n  /**\n   * Optional accessible name. Set when the dot stands alone; leave undefined\n   * when it's paired with adjacent text that already names the status.\n   */\n  @Prop() label?: string;\n\n  render() {\n    if (this.label) {\n      return <Host role=\"status\" aria-label={this.label} />;\n    }\n    return <Host aria-hidden=\"true\" />;\n  }\n}\n"]}

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

@@ -0,0 +1,74 @@
+:host {
+  display: inline-block;
+  width: 100%;
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+}
+
+.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;
+}
+
+.textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--ind-spacing-3, 6px) 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);
+  font-family: inherit;
+  font-size: var(--ind-font-size-base, 12px);
+  line-height: var(--ind-font-line-height-normal, 1.4);
+  color: inherit;
+  resize: vertical;
+  outline: none;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  transition:
+    border-color var(--ind-motion-duration-fast, 120ms),
+    box-shadow   var(--ind-motion-duration-fast, 120ms);
+}
+
+.textarea: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);
+}
+
+.textarea::placeholder {
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  opacity: 1;
+}
+
+:host([variant="mono"]) .textarea {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  line-height: var(--ind-font-line-height-tight, 1.4);
+  background: var(--ind-color-palette-neutral-0, #000000);
+  color: var(--ind-color-palette-neutral-800, #d0d7e0);
+  border-color: var(--ind-surface-border-strong, #5a6776);
+}
+
+:host([invalid]) .textarea {
+  border-color: var(--ind-feedback-error-bg, #dc2626);
+}
+:host([invalid]) .textarea:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);
+}
+
+:host([readonly]) .textarea {
+  cursor: default;
+}
+
+:host([disabled]) {
+  opacity: 0.55;
+  pointer-events: none;
+}