@ind-ds/core 0.1.0

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

@@ -0,0 +1,88 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const shelfCanvasCss = () => `:host{display:block;width:var(--ind-size-canvas-shelves-width, 480px);height:var(--ind-size-canvas-shelves-height, 340px);font-family:var(--ind-font-family-sans);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}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)}.heading{font-family:var(--ind-font-family-sans);font-size:13px;font-weight:700;fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));text-transform:uppercase;letter-spacing:0.05em}.outline{fill:color-mix(in srgb, var(--ind-surface-raised) 40%, transparent);stroke:var(--ind-surface-border-strong);stroke-width:1.5;stroke-linejoin:round}.fill{fill:var(--ind-state-running-bg, #16a34a);transition:y 240ms, height 240ms}.slot--partial .fill{fill:var(--ind-feedback-warning-bg, #f59e0b)}.slot--empty .fill{fill:var(--ind-feedback-error-bg, #dc2626)}.slot--missing .outline{fill:transparent;stroke-dasharray:4 2;stroke:var(--ind-surface-border-subtle)}.label{font-family:var(--ind-font-family-mono);font-size:11px;font-weight:600;fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));letter-spacing:0.02em}.level{font-family:var(--ind-font-family-mono);font-size:12px;font-weight:700;fill:#ffffff;paint-order:stroke;stroke:rgba(0, 0, 0, 0.55);stroke-width:3;letter-spacing:0.02em}.slot--missing .level{display:none}`;
+
+const IndShelfCanvas = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    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 (index.h(index.Host, { key: 'e368cf70181cf224e4076b937a1e12a53e95e58f', role: "img", "aria-label": this.heading ?? 'Shelf inventory' }, index.h("svg", { key: 'e5fa8c4d7bed40cddbd4c6a691aa49a9c29007a5', viewBox: `0 0 ${W} ${H}`, part: "svg" }, this.heading && (index.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 (index.h("g", { class: `slot slot--${state}` }, index.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 && (index.h("rect", { class: "fill", x: x + innerPad, y: y + bodyH - innerPad - fillH, width: w - innerPad * 2, height: fillH, rx: "2" })), state !== 'missing' && (index.h("text", { x: cx, y: cy + 4, class: "level", "text-anchor": "middle" }, Math.round(level), "%")), index.h("text", { x: cx, y: y + bodyH + 16, class: "label", "text-anchor": "middle" }, s.label)));
+        }))));
+    }
+};
+IndShelfCanvas.style = shelfCanvasCss();
+
+exports.ind_shelf_canvas = IndShelfCanvas;
+//# sourceMappingURL=ind-shelf-canvas.entry.cjs.js.map
+
+//# sourceMappingURL=ind-shelf-canvas.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-shelf-canvas.cjs.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,s7CAAs7C,CAAC;;MC4Bx8C,cAAc,GAAA,MAAA;;;;IACjB,KAAK,GAAyB,EAAE;IAChC,IAAI,GAAW,CAAC;IAChB,IAAI,GAAW,CAAC;AAChB,IAAA,OAAO;IAEP,UAAU,GAAA;AAChB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC,KAAK;AAChD,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE;AACvD,YAAA,IAAI;gBACF,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,gBAAA,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;;AAChC,YAAA,MAAM;AACN,gBAAA,OAAO,EAAE;;;AAGb,QAAA,OAAO,EAAE;;AAGH,IAAA,YAAY,CAAC,CAAY,EAAA;QAC/B,IAAI,CAAC,CAAC,KAAK;YAAE,OAAO,CAAC,CAAC,KAAK;AAC3B,QAAA,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS;AAAE,YAAA,OAAO,SAAS;AAC3C,QAAA,IAAI,CAAC,CAAC,KAAK,IAAI,EAAE;AAAE,YAAA,OAAO,MAAM;AAChC,QAAA,IAAI,CAAC,CAAC,KAAK,IAAI,EAAE;AAAE,YAAA,OAAO,SAAS;AACnC,QAAA,OAAO,OAAO;;IAGhB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;QAC/B,MAAM,CAAC,GAAG,GAAG;QACb,MAAM,CAAC,GAAG,GAAG;QACb,MAAM,IAAI,GAAG,EAAE;AACf,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE;QACrC,MAAM,SAAS,GAAG,EAAE;AACpB,QAAA,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC;AAC1B,QAAA,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS;AACpC,QAAA,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI;AAC/B,QAAA,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI;QAE/B,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,IAAI,CAAC,OAAO,IAAI,iBAAiB,EAAA,EAC5DD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAE,CAAA,IAAA,EAAO,CAAC,CAAA,CAAA,EAAI,CAAC,EAAE,EAAE,IAAI,EAAC,KAAK,EAAA,EACtC,IAAI,CAAC,OAAO,KACXA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,aAAA,EAAa,QAAQ,EAAA,EACxD,IAAI,CAAC,OAAO,CACR,CACR,EAEA,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;YAC/C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC1B,YAAA,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI;AACzB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;YACrC,MAAM,EAAE,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC;YACzC,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC;AAE3C,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,EAAE,CAAC;AAClC,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC;AACtC,YAAA,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC;AACpB,YAAA,MAAM,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;AACxB,YAAA,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI;AAC9B,YAAA,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI;AAC9B,YAAA,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE;YAExB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AAClC,YAAA,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC;YAC1B,MAAM,QAAQ,GAAG,CAAC;YAClB,MAAM,MAAM,GAAG,KAAK,GAAG,EAAE,GAAG,QAAQ,GAAG,CAAC;AACxC,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC;YAEjD,QACEA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAE,CAAA,WAAA,EAAc,KAAK,CAAA,CAAE,EAAA,EAE7BA,OAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,SAAS,EACf,CAAC,EAAE;AACG,sBAAA,EAAA,SAAS,IAAI,CAAC;AACd,sBAAA,EAAA,SAAS,IAAI,CAAC;wBACd,SAAS,CAAA,CAAA,EAAI,CAAC,GAAG,CAAC;wBAClB,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,SAAS;AAClB,sBAAA,EAAA,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,CAAC,GAAG,KAAK;wBAClB,CAAC,CAAA,CAAA,EAAI,CAAC,GAAG,KAAK;AACd,sBAAA,EAAA,CAAC,IAAI,SAAS;wBACd,SAAS,CAAA,CAAA,EAAI,CAAC,GAAG,CAAC;;AAEvB,kBAAA,CAAA,EAAA,CACD,EAGD,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,KAC/BA,OAAA,CAAA,MAAA,EAAA,EACE,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,EAAA,CACN,CACH,EAGA,KAAK,KAAK,SAAS,KAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,KAAK,EAAC,OAAO,iBAAa,QAAQ,EAAA,EACvD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MACb,CACR,EAGDA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,KAAK,EAAC,OAAO,EAAA,aAAA,EAAa,QAAQ,EAAA,EAC/D,CAAC,CAAC,KAAK,CACH,CACL;AAER,SAAC,CAAC,CACE,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/shelf-canvas/shelf-canvas.css?tag=ind-shelf-canvas&encapsulation=shadow","src/components/atoms/shelf-canvas/shelf-canvas.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: var(--ind-size-canvas-shelves-width, 480px);\n  height: var(--ind-size-canvas-shelves-height, 340px);\n  font-family: var(--ind-font-family-sans);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\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.heading {\n  font-family: var(--ind-font-family-sans);\n  font-size: 13px;\n  font-weight: 700;\n  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.outline {\n  fill: color-mix(in srgb, var(--ind-surface-raised) 40%, transparent);\n  stroke: var(--ind-surface-border-strong);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n\n.fill {\n  fill: var(--ind-state-running-bg, #16a34a);\n  transition: y 240ms, height 240ms;\n}\n\n.slot--partial .fill { fill: var(--ind-feedback-warning-bg, #f59e0b); }\n.slot--empty .fill   { fill: var(--ind-feedback-error-bg, #dc2626); }\n\n.slot--missing .outline {\n  fill: transparent;\n  stroke-dasharray: 4 2;\n  stroke: var(--ind-surface-border-subtle);\n}\n\n.label {\n  font-family: var(--ind-font-family-mono);\n  font-size: 11px;\n  font-weight: 600;\n  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  letter-spacing: 0.02em;\n}\n\n.level {\n  font-family: var(--ind-font-family-mono);\n  font-size: 12px;\n  font-weight: 700;\n  fill: #ffffff;\n  paint-order: stroke;\n  stroke: rgba(0, 0, 0, 0.55);\n  stroke-width: 3;\n  letter-spacing: 0.02em;\n}\n\n.slot--missing .level { display: none; }\n","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"],"version":3}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const sidebarNavCss = () => `:host{display:flex;flex-direction:column;width:var(--ind-size-sidebar-width, 178px);height:100%;background:var(--ind-surface-panel);border-right:1px solid var(--ind-surface-border-default);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));flex-shrink:0;box-sizing:border-box}.brand{padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px)}.brand:has(>:nth-child(1):empty),.brand:not(:has(*)){display:none}.items{flex:1;overflow-y:auto;padding:var(--ind-spacing-2, 4px) 0;scrollbar-width:thin;scrollbar-color:var(--ind-surface-border-strong) transparent}.items::-webkit-scrollbar{width:8px}.items::-webkit-scrollbar-thumb{background:var(--ind-surface-border-strong);border-radius:4px}.items::-webkit-scrollbar-track{background:transparent}.footer{padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-top:1px solid var(--ind-surface-border-subtle);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.footer:not(:has(*)){display:none}`;
+
+const IndSidebarNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3ffd6c6d8afe2ed104b24ad1435d7a1d163c5071', role: "navigation" }, index.h("div", { key: '2a56d85274fca7043d8e5624a93cb99c8767fc74', class: "brand", part: "brand" }, index.h("slot", { key: 'd185e1c6570b33648700dd922e671f023b3d34fc', name: "brand" })), index.h("div", { key: '31aaa48b8e08549a3a4990cbe4ae74507b0a8ccb', class: "items", part: "items" }, index.h("slot", { key: '4ddb250ed915874ea6114588ab336e662526383f' })), index.h("div", { key: 'd666ea3f666be22246d6f2e2464a85b741b4bfed', class: "footer", part: "footer" }, index.h("slot", { key: 'fff6600b601ec97d47f2a79b983d0a7ef261db33', name: "footer" }))));
+    }
+};
+IndSidebarNav.style = sidebarNavCss();
+
+exports.ind_sidebar_nav = IndSidebarNav;
+//# sourceMappingURL=ind-sidebar-nav.entry.cjs.js.map
+
+//# sourceMappingURL=ind-sidebar-nav.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-sidebar-nav.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,uiCAAuiC,CAAC;;MCcxjC,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,YAAY,EAAA,EACrBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/sidebar-nav/sidebar-nav.css?tag=ind-sidebar-nav&encapsulation=shadow","src/components/organisms/sidebar-nav/sidebar-nav.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: var(--ind-size-sidebar-width, 178px);\n  height: 100%;\n  background: var(--ind-surface-panel);\n  border-right: 1px solid var(--ind-surface-border-default);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.brand {\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n}\n\n.brand:has(> :nth-child(1):empty),\n.brand:not(:has(*)) { display: none; }\n\n.items {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--ind-spacing-2, 4px) 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--ind-surface-border-strong) transparent;\n}\n.items::-webkit-scrollbar { width: 8px; }\n.items::-webkit-scrollbar-thumb { background: var(--ind-surface-border-strong); border-radius: 4px; }\n.items::-webkit-scrollbar-track { background: transparent; }\n\n.footer {\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-top: 1px solid var(--ind-surface-border-subtle);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.footer:not(:has(*)) { display: none; }\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Sidebar shell: a brand area on top, a scrollable nav list, and a footer area.\n *\n * State management is left to the consumer — drive `active` on each <ind-nav-item>\n * from your router. The component is intentionally thin so it works with any\n * routing approach (React Router, Vue Router, hash-based, none).\n */\n@Component({\n  tag: 'ind-sidebar-nav',\n  styleUrl: 'sidebar-nav.css',\n  shadow: true,\n})\nexport class IndSidebarNav {\n  render() {\n    return (\n      <Host role=\"navigation\">\n        <div class=\"brand\" part=\"brand\">\n          <slot name=\"brand\" />\n        </div>\n        <div class=\"items\" part=\"items\">\n          <slot />\n        </div>\n        <div class=\"footer\" part=\"footer\">\n          <slot name=\"footer\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-status-bar.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const statusBarCss = () => `:host{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border-top:1px solid var(--ind-surface-border-default);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));min-height:24px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.message{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spacer{flex:1}.end{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px)}::slotted(*){font-size:var(--ind-font-size-sm, 11px)}`;
+
+const IndStatusBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    state = 'neutral';
+    message;
+    render() {
+        return (index.h(index.Host, { key: 'ea26634fed8ac15e259de910eb7bcd4e5ce3d094', role: "status", "aria-live": "polite" }, index.h("ind-status-dot", { key: 'a9305e75e5b0e35c5cccf526020ed00177d729e4', state: this.state, size: "sm" }), this.message && index.h("span", { key: '816506e0c34aaf66249bcca19fa0741841a1dae5', class: "message", part: "message" }, this.message), index.h("span", { key: '15edfed427f793ad354d7b71e256149323ab59b4', class: "spacer" }), index.h("span", { key: 'abd85f3229fbc9ad3e6257400a87bab0e9743dae', class: "end", part: "end" }, index.h("slot", { key: 'bc0a1f8844f91d9158ec4f265ae12cc27b443740' }))));
+    }
+};
+IndStatusBar.style = statusBarCss();
+
+exports.ind_status_bar = IndStatusBar;
+//# sourceMappingURL=ind-status-bar.entry.cjs.js.map
+
+//# sourceMappingURL=ind-status-bar.cjs.entry.js.map

package/dist/cjs/ind-status-bar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-status-bar.cjs.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,+pBAA+pB,CAAC;;MCgB/qB,YAAY,GAAA,MAAA;;;;IACE,KAAK,GAAmB,SAAS;AAClD,IAAA,OAAO;IAEf,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,EAAA,EACpCD,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EAC9C,IAAI,CAAC,OAAO,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC3EA,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,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAACA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CAAO,CACvC;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/status-bar/status-bar.css?tag=ind-status-bar&encapsulation=shadow","src/components/organisms/status-bar/status-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border-top: 1px solid var(--ind-surface-border-default);\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  min-height: 24px;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.message {\n  flex: 0 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.spacer {\n  flex: 1;\n}\n\n.end {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n::slotted(*) {\n  font-size: var(--ind-font-size-sm, 11px);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type StatusBarState =\n  | 'neutral' | 'running' | 'stopped' | 'fault' | 'warning' | 'maintenance' | 'success' | 'info' | 'error';\n\n/**\n * Global footer bar: status dot + message on the left, slotted content on the right.\n *\n * Sized to be unobtrusive (~24 px). Drop additional `<span>` / `<ind-button size=\"sm\">`\n * children for right-aligned context (timestamps, server identifiers, action buttons).\n */\n@Component({\n  tag: 'ind-status-bar',\n  styleUrl: 'status-bar.css',\n  shadow: true,\n})\nexport class IndStatusBar {\n  @Prop({ reflect: true }) state: StatusBarState = 'neutral';\n  @Prop() message?: string;\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\">\n        <ind-status-dot state={this.state} size=\"sm\" />\n        {this.message && <span class=\"message\" part=\"message\">{this.message}</span>}\n        <span class=\"spacer\" />\n        <span class=\"end\" part=\"end\"><slot /></span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-status-dot.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const statusDotCss = () => `: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}}`;
+
+const IndStatusDot = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    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 index.h(index.Host, { role: "status", "aria-label": this.label });
+        }
+        return index.h(index.Host, { "aria-hidden": "true" });
+    }
+};
+IndStatusDot.style = statusDotCss();
+
+exports.ind_status_dot = IndStatusDot;
+//# sourceMappingURL=ind-status-dot.entry.cjs.js.map
+
+//# sourceMappingURL=ind-status-dot.cjs.entry.js.map

package/dist/cjs/ind-status-dot.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-status-dot.cjs.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,6mDAA6mD,CAAC;;MCoB7nD,YAAY,GAAA,MAAA;;;;IACE,KAAK,GAAmB,SAAS;IACjC,IAAI,GAAkB,IAAI;IAC1B,QAAQ,GAAY,KAAK;AAElD;;;AAGG;AACK,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,CAAI;;QAEvD,OAAOD,OAAA,CAACC,UAAI,EAAA,EAAA,aAAA,EAAa,MAAM,GAAG;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/status-dot/status-dot.css?tag=ind-status-dot&encapsulation=shadow","src/components/atoms/status-dot/status-dot.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --_size: 8px;\n  --_bg:   var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  --_glow: transparent;\n\n  width: var(--_size);\n  height: var(--_size);\n  border-radius: 50%;\n  background: var(--_bg);\n  box-shadow: 0 0 6px var(--_glow);\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n:host([size=\"sm\"]) { --_size: 6px; }\n:host([size=\"md\"]) { --_size: 8px; }\n:host([size=\"lg\"]) { --_size: 12px; }\n\n:host([state=\"running\"]) {\n  --_bg:   var(--ind-state-running-bg, #16a34a);\n  --_glow: var(--ind-state-running-glow, rgba(34, 197, 94, 0.6));\n}\n:host([state=\"stopped\"]) {\n  --_bg:   var(--ind-state-stopped-bg, #5a6776);\n}\n:host([state=\"fault\"]) {\n  --_bg:   var(--ind-state-fault-bg, #dc2626);\n  --_glow: var(--ind-state-fault-glow, rgba(220, 38, 38, 0.7));\n}\n:host([state=\"warning\"]) {\n  --_bg:   var(--ind-state-warning-bg, #f59e0b);\n  --_glow: var(--ind-state-warning-glow, rgba(245, 158, 11, 0.6));\n}\n:host([state=\"maintenance\"]) {\n  --_bg:   var(--ind-state-maintenance-bg, #2563eb);\n  --_glow: var(--ind-state-maintenance-glow, rgba(37, 99, 235, 0.6));\n}\n:host([state=\"success\"]) {\n  --_bg:   var(--ind-feedback-success-bg, #16a34a);\n  --_glow: rgba(34, 197, 94, 0.5);\n}\n:host([state=\"info\"]) {\n  --_bg:   var(--ind-feedback-info-bg, #0891b2);\n  --_glow: rgba(8, 145, 178, 0.5);\n}\n:host([state=\"error\"]) {\n  --_bg:   var(--ind-feedback-error-bg, #dc2626);\n  --_glow: rgba(220, 38, 38, 0.6);\n}\n:host([state=\"neutral\"]) {\n  --_bg:   var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n:host([blinking]) {\n  animation: ind-status-dot-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite;\n}\n\n@keyframes ind-status-dot-blink {\n  50% { opacity: 0.3; box-shadow: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([blinking]) {\n    animation: none;\n    outline: 2px solid currentColor;\n    outline-offset: 2px;\n  }\n}\n","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"],"version":3}

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const textareaCss = () => `: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}`;
+
+const IndTextarea = 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); }
+    value = '';
+    placeholder;
+    label;
+    name;
+    rows = 4;
+    size = 'md';
+    /** `mono` swaps to JetBrains Mono and small font — for logs and MQTT streams. */
+    variant = 'default';
+    disabled = false;
+    readonly = false;
+    invalid = false;
+    /** When true, auto-scrolls to bottom whenever `value` changes. Pair with `readonly` for log streams. */
+    autoScroll = false;
+    indInput;
+    indChange;
+    componentDidLoad() {
+        if (this.autoScroll)
+            this.scrollToBottom();
+    }
+    onValueChange() {
+        if (this.autoScroll)
+            this.scrollToBottom();
+    }
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            const ta = this.host.shadowRoot?.querySelector('textarea');
+            if (ta)
+                ta.scrollTop = ta.scrollHeight;
+        });
+    }
+    onInput = (e) => {
+        const v = e.target.value;
+        this.value = v;
+        this.indInput.emit(v);
+    };
+    onChange = (e) => {
+        this.indChange.emit(e.target.value);
+    };
+    render() {
+        return (index.h(index.Host, { key: 'a4ca904c7a9ca65900e0ccc696aab66429bdde71' }, index.h("label", { key: '57f1880efe8a30a2bd5e1253c81f058360519c9f', class: "wrap", part: "wrap" }, this.label && index.h("span", { key: 'aa0367d91235eca6d69fd520617ea831b1ac71fc', class: "label", part: "label" }, this.label), index.h("textarea", { key: '2248ea771f4ac6f8ae9fb0cc12ea4ed038e7ab24', part: "textarea", class: "textarea", placeholder: this.placeholder, rows: this.rows, disabled: this.disabled, readonly: this.readonly, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onInput: this.onInput, onChange: this.onChange }, this.value))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+IndTextarea.style = textareaCss();
+
+exports.ind_textarea = IndTextarea;
+//# sourceMappingURL=ind-textarea.entry.cjs.js.map
+
+//# sourceMappingURL=ind-textarea.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-textarea.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,24DAA24D,CAAC;;MCmB15D,WAAW,GAAA,MAAA;;;;;;;IAGG,KAAK,GAAW,EAAE;AACnC,IAAA,WAAW;AACX,IAAA,KAAK;AACL,IAAA,IAAI;IACJ,IAAI,GAAW,CAAC;IACC,IAAI,GAAiB,IAAI;;IAEzB,OAAO,GAAoB,SAAS;IACpC,QAAQ,GAAY,KAAK;IACzB,QAAQ,GAAY,KAAK;IACzB,OAAO,GAAY,KAAK;;IAEzC,UAAU,GAAY,KAAK;AAE1B,IAAA,QAAQ;AACR,IAAA,SAAS;IAElB,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,cAAc,EAAE;;IAI5C,aAAa,GAAA;QACX,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,cAAc,EAAE;;IAGpC,cAAc,GAAA;QACpB,qBAAqB,CAAC,MAAK;AACzB,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC;AAC1D,YAAA,IAAI,EAAE;AAAE,gBAAA,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY;AACxC,SAAC,CAAC;;AAGI,IAAA,OAAO,GAAG,CAAC,CAAQ,KAAI;AAC7B,QAAA,MAAM,CAAC,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK;AACjD,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,KAAC;AAEO,IAAA,QAAQ,GAAG,CAAC,CAAQ,KAAI;QAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAE,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;AAC9D,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,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,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,cAAA,EACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACvB,IAAI,CAAC,KAAK,CAAY,CAClB,CACH;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/textarea/textarea.css?tag=ind-textarea&encapsulation=shadow","src/components/atoms/textarea/textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n}\n\n.wrap {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\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.textarea {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--ind-spacing-3, 6px) 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  font-family: inherit;\n  font-size: var(--ind-font-size-base, 12px);\n  line-height: var(--ind-font-line-height-normal, 1.4);\n  color: inherit;\n  resize: vertical;\n  outline: none;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  transition:\n    border-color var(--ind-motion-duration-fast, 120ms),\n    box-shadow   var(--ind-motion-duration-fast, 120ms);\n}\n\n.textarea: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.textarea::placeholder {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  opacity: 1;\n}\n\n:host([variant=\"mono\"]) .textarea {\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-tight, 1.4);\n  background: var(--ind-color-palette-neutral-0, #000000);\n  color: var(--ind-color-palette-neutral-800, #d0d7e0);\n  border-color: var(--ind-surface-border-strong, #5a6776);\n}\n\n:host([invalid]) .textarea {\n  border-color: var(--ind-feedback-error-bg, #dc2626);\n}\n:host([invalid]) .textarea:focus {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);\n}\n\n:host([readonly]) .textarea {\n  cursor: default;\n}\n\n:host([disabled]) {\n  opacity: 0.55;\n  pointer-events: none;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type TextareaSize = 'sm' | 'md' | 'lg';\nexport type TextareaVariant = 'default' | 'mono';\n\n@Component({\n  tag: 'ind-textarea',\n  styleUrl: 'textarea.css',\n  shadow: true,\n})\nexport class IndTextarea {\n  @Element() host!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder?: string;\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop() rows: number = 4;\n  @Prop({ reflect: true }) size: TextareaSize = 'md';\n  /** `mono` swaps to JetBrains Mono and small font — for logs and MQTT streams. */\n  @Prop({ reflect: true }) variant: TextareaVariant = 'default';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  /** When true, auto-scrolls to bottom whenever `value` changes. Pair with `readonly` for log streams. */\n  @Prop() autoScroll: boolean = false;\n\n  @Event() indInput!: EventEmitter<string>;\n  @Event() indChange!: EventEmitter<string>;\n\n  componentDidLoad() {\n    if (this.autoScroll) this.scrollToBottom();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    if (this.autoScroll) this.scrollToBottom();\n  }\n\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const ta = this.host.shadowRoot?.querySelector('textarea');\n      if (ta) ta.scrollTop = ta.scrollHeight;\n    });\n  }\n\n  private onInput = (e: Event) => {\n    const v = (e.target as HTMLTextAreaElement).value;\n    this.value = v;\n    this.indInput.emit(v);\n  };\n\n  private onChange = (e: Event) => {\n    this.indChange.emit((e.target as HTMLTextAreaElement).value);\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          <textarea\n            part=\"textarea\"\n            class=\"textarea\"\n            placeholder={this.placeholder}\n            rows={this.rows}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            name={this.name}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          >{this.value}</textarea>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-toolbar-action.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const toolbarActionCss = () => `:host{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border-bottom:1px solid var(--ind-surface-border-default);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));flex-wrap:wrap}.filter ::slotted(*){min-width:200px}.flags{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px)}.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}.actions{display:flex;gap:var(--ind-spacing-3, 6px)}`;
+
+const IndToolbarAction = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Counter rendered before the actions (e.g. "1 248 messages"). */
+    counter;
+    render() {
+        const hasCounter = this.counter !== undefined && this.counter !== '' && this.counter !== null;
+        return (index.h(index.Host, { key: '335b711876377ee50cfeaac4635c2794d5c038eb' }, index.h("span", { key: '69cf5e6ca388c2bef9004cddd515db9c1d34f2f9', class: "filter", part: "filter" }, index.h("slot", { key: '6a5d72136095b2531214ea2e28a39a795e8b7e2d', name: "filter" })), index.h("span", { key: '614f12f7432752c3deef9cca8174a503d7048878', class: "flags", part: "flags" }, index.h("slot", { key: 'db14ea5398c70574cb0b690db2e0578aafa6a545', name: "flags" })), index.h("span", { key: '07ff837c88d3228666b7bcd36ae52f9efa5b081d', class: "spacer" }), hasCounter && index.h("span", { key: 'ee9220383a9a4c9c471f4945da3c28f67dada3ee', class: "counter", part: "counter" }, this.counter), index.h("span", { key: '53bc247add97382c56d4447b30c9b73e663fbe96', class: "actions", part: "actions" }, index.h("slot", { key: 'da6c78e96a87a412f44d620356268ef1a746fc99', name: "actions" }))));
+    }
+};
+IndToolbarAction.style = toolbarActionCss();
+
+exports.ind_toolbar_action = IndToolbarAction;
+//# sourceMappingURL=ind-toolbar-action.entry.cjs.js.map
+
+//# sourceMappingURL=ind-toolbar-action.cjs.entry.js.map

package/dist/cjs/ind-toolbar-action.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-toolbar-action.cjs.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,yvBAAyvB,CAAC;;MCO7wB,gBAAgB,GAAA,MAAA;;;;;AAEnB,IAAA,OAAO;IAEf,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;AAC7F,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAACA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAAO,EAChEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAACA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAAO,EAC7DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,CAAG,EACtB,UAAU,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EACzEA,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,EAAM,IAAI,EAAC,SAAS,GAAG,CAAO,CAC9D;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/toolbar-action/toolbar-action.css?tag=ind-toolbar-action&encapsulation=shadow","src/components/molecules/toolbar-action/toolbar-action.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border-bottom: 1px solid var(--ind-surface-border-default);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  flex-wrap: wrap;\n}\n\n.filter ::slotted(*) {\n  min-width: 200px;\n}\n\n.flags {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\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.actions {\n  display: flex;\n  gap: var(--ind-spacing-3, 6px);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ind-toolbar-action',\n  styleUrl: 'toolbar-action.css',\n  shadow: true,\n})\nexport class IndToolbarAction {\n  /** Counter rendered before the actions (e.g. \"1 248 messages\"). */\n  @Prop() counter?: string | number;\n\n  render() {\n    const hasCounter = this.counter !== undefined && this.counter !== '' && this.counter !== null;\n    return (\n      <Host>\n        <span class=\"filter\" part=\"filter\"><slot name=\"filter\" /></span>\n        <span class=\"flags\" part=\"flags\"><slot name=\"flags\" /></span>\n        <span class=\"spacer\" />\n        {hasCounter && <span class=\"counter\" part=\"counter\">{this.counter}</span>}\n        <span class=\"actions\" part=\"actions\"><slot name=\"actions\" /></span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const valueCss = () => `:host{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);background:var(--ind-surface-sunken, #000);border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));min-width:96px;transition:background-color var(--ind-motion-duration-base, 200ms),     border-color var(--ind-motion-duration-base, 200ms),     color var(--ind-motion-duration-base, 200ms)}.header{display:flex;gap:var(--ind-spacing-3, 6px);align-items:baseline;font-size:var(--ind-font-size-sm, 11px);line-height:var(--ind-font-line-height-tight, 1.1);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.tag{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);letter-spacing:0.02em}.label{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.readout{display:flex;align-items:baseline;gap:var(--ind-spacing-2, 4px);line-height:1}.number{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-bold, 700);font-variant-numeric:tabular-nums}.unit{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));font-weight:var(--ind-font-weight-medium, 500)}.trend{font-size:var(--ind-font-size-md, 13px);margin-left:var(--ind-spacing-2, 4px)}:host([size="sm"]) .number{font-size:var(--ind-font-size-xl, 16px)}:host([size="md"]) .number{font-size:var(--ind-font-size-2xl, 20px)}:host([size="lg"]) .number{font-size:var(--ind-font-size-3xl, 28px)}:host([alarm="high-high"]){background:var(--ind-alarm-high-high-bg, #dc2626);color:var(--ind-alarm-high-high-fg, #ffffff);border-color:var(--ind-alarm-high-high-border, #f87171)}:host([alarm="high"]){background:var(--ind-alarm-high-bg, #f59e0b);color:var(--ind-alarm-high-fg, #000000);border-color:var(--ind-alarm-high-border, #fcd34d)}:host([alarm="low"]){background:var(--ind-alarm-low-bg, #0891b2);color:var(--ind-alarm-low-fg, #ffffff);border-color:var(--ind-alarm-low-border, #22d3ee)}:host([alarm="low-low"]){background:var(--ind-alarm-low-low-bg, #7c3aed);color:var(--ind-alarm-low-low-fg, #ffffff);border-color:var(--ind-alarm-low-low-border, #a78bfa)}:host([alarm]:not([alarm="none"])) .header,:host([alarm]:not([alarm="none"])) .tag,:host([alarm]:not([alarm="none"])) .label,:host([alarm]:not([alarm="none"])) .unit{color:inherit}:host([alarm]:not([alarm="none"])) .label,:host([alarm]:not([alarm="none"])) .unit{opacity:0.85}:host([alarm]:not([alarm="none"])) .tag{opacity:1;font-weight:var(--ind-font-weight-bold, 700)}:host([trend="up"]) .trend{color:var(--ind-trend-up-fg, #fcd34d)}:host([trend="down"]) .trend{color:var(--ind-trend-down-fg, #22d3ee)}:host([trend="stable"]) .trend{color:var(--ind-trend-stable-fg, #8390a0)}`;
+
+const IndValue = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Raw value to display. Numeric values are formatted with `precision`. */
+    value;
+    /** Engineering unit shown after the number (e.g. "bar", "°C", "m³/h"). */
+    unit;
+    /** Decimal places when `value` is numeric. Default: as-is. */
+    precision;
+    /** Active alarm priority. Highlights the readout with the ISA-18.2 color. */
+    alarm = 'none';
+    /** Process trend direction. Renders a small arrow next to the unit. */
+    trend = 'none';
+    /** Readout size — `lg` is appropriate for primary KPIs (uses the 3xl font). */
+    size = 'md';
+    /** Human label shown above the number (e.g. "Discharge pressure"). */
+    label;
+    /** Equipment tag shown above the number (e.g. "PT-101"). */
+    tag;
+    formatted() {
+        if (typeof this.value === 'string')
+            return this.value;
+        if (!Number.isFinite(this.value))
+            return '--';
+        if (this.precision !== undefined)
+            return this.value.toFixed(this.precision);
+        return String(this.value);
+    }
+    render() {
+        const accessibleName = this.label ?? this.tag ?? 'process value';
+        const alarmSuffix = this.alarm !== 'none' ? `, alarm ${this.alarm}` : '';
+        return (index.h(index.Host, { key: 'cda5c03f956f161e618626d2aef0aac40409281a', role: "group", "aria-label": `${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`, "aria-live": this.alarm === 'high-high' ? 'assertive' : 'polite' }, (this.tag || this.label) && (index.h("div", { key: '8fe9dfd6fb733e6ba0e7e607efc5d023736cca9e', class: "header", part: "header" }, this.tag && index.h("span", { key: 'adec308000bce2cee378504fffedf8662a091c8c', class: "tag", part: "tag" }, this.tag), this.label && index.h("span", { key: '4de4405dfbb798ca1781ade6fd7e1419089226ca', class: "label", part: "label" }, this.label))), index.h("div", { key: 'b7f9e66b333a6d7e3341585af4bba571dae65bf6', class: "readout", part: "readout" }, index.h("span", { key: 'c6a942f2a64187cf9acd75b112d262928556d84b', class: "number", part: "number" }, this.formatted()), this.unit && index.h("span", { key: '39714e17d50497d59afe6e81eca9b51cf2182332', class: "unit", part: "unit" }, this.unit), this.trend !== 'none' && (index.h("span", { key: '1e4f671cc86bf24617f26e3db4eb3709160291b3', class: "trend", part: "trend", "aria-hidden": "true" }, this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆')))));
+    }
+};
+IndValue.style = valueCss();
+
+exports.ind_value = IndValue;
+//# sourceMappingURL=ind-value.entry.cjs.js.map
+
+//# sourceMappingURL=ind-value.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-value.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,o5FAAo5F,CAAC;;MCWh6F,QAAQ,GAAA,MAAA;;;;;AAEX,IAAA,KAAK;;AAGL,IAAA,IAAI;;AAGJ,IAAA,SAAS;;IAGQ,KAAK,GAAe,MAAM;;IAG1B,KAAK,GAAe,MAAM;;IAG1B,IAAI,GAAc,IAAI;;AAGvC,IAAA,KAAK;;AAGL,IAAA,GAAG;IAEH,SAAS,GAAA;AACf,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK;QACrD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;AAC7C,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3E,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG3B,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,eAAe;AAChE,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,CAAA,QAAA,EAAW,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,EAAE;AACxE,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,gBACA,CAAA,EAAG,cAAc,CAAA,EAAA,EAAK,IAAI,CAAC,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA,EAAG,WAAW,CAAA,CAAE,EAAA,WAAA,EAC1F,IAAI,CAAC,KAAK,KAAK,WAAW,GAAG,WAAW,GAAG,QAAQ,EAAA,EAE7D,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,MACtBD,kEAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9B,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC1D,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,CAC/D,CACP,EACDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,SAAS,EAAE,CAAQ,EAC3D,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EAC9D,IAAI,CAAC,KAAK,KAAK,MAAM,KACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,IAChD,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,GAAG,GAAG,GAAG,CACzD,CACR,CACG,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/value/value.css?tag=ind-value&encapsulation=shadow","src/components/atoms/value/value.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-sunken, #000);\n  border: 1px solid var(--ind-surface-border-default, #2a3340);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  min-width: 96px;\n  transition:\n    background-color var(--ind-motion-duration-base, 200ms),\n    border-color var(--ind-motion-duration-base, 200ms),\n    color var(--ind-motion-duration-base, 200ms);\n}\n\n.header {\n  display: flex;\n  gap: var(--ind-spacing-3, 6px);\n  align-items: baseline;\n  font-size: var(--ind-font-size-sm, 11px);\n  line-height: var(--ind-font-line-height-tight, 1.1);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  letter-spacing: 0.02em;\n}\n\n.label {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.readout {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-2, 4px);\n  line-height: 1;\n}\n\n.number {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-bold, 700);\n  font-variant-numeric: tabular-nums;\n}\n\n.unit {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  font-weight: var(--ind-font-weight-medium, 500);\n}\n\n.trend {\n  font-size: var(--ind-font-size-md, 13px);\n  margin-left: var(--ind-spacing-2, 4px);\n}\n\n:host([size=\"sm\"]) .number { font-size: var(--ind-font-size-xl, 16px); }\n:host([size=\"md\"]) .number { font-size: var(--ind-font-size-2xl, 20px); }\n:host([size=\"lg\"]) .number { font-size: var(--ind-font-size-3xl, 28px); }\n\n/* Alarm highlight — uses the ISA-18.2 alarm tokens directly. */\n:host([alarm=\"high-high\"]) {\n  background: var(--ind-alarm-high-high-bg, #dc2626);\n  color: var(--ind-alarm-high-high-fg, #ffffff);\n  border-color: var(--ind-alarm-high-high-border, #f87171);\n}\n:host([alarm=\"high\"]) {\n  background: var(--ind-alarm-high-bg, #f59e0b);\n  color: var(--ind-alarm-high-fg, #000000);\n  border-color: var(--ind-alarm-high-border, #fcd34d);\n}\n:host([alarm=\"low\"]) {\n  background: var(--ind-alarm-low-bg, #0891b2);\n  color: var(--ind-alarm-low-fg, #ffffff);\n  border-color: var(--ind-alarm-low-border, #22d3ee);\n}\n:host([alarm=\"low-low\"]) {\n  background: var(--ind-alarm-low-low-bg, #7c3aed);\n  color: var(--ind-alarm-low-low-fg, #ffffff);\n  border-color: var(--ind-alarm-low-low-border, #a78bfa);\n}\n\n/* When in an alarm state, force every descendant to inherit the host color\n * (which is the high-contrast alarm fg, e.g. black on amber for \"high\").\n *\n * We have to override `.header` explicitly because it sets its own color —\n * otherwise `.label` and `.tag` inherit *from .header*, not from :host,\n * and stay at the original muted neutral color (broken contrast on alarm bg).\n */\n:host([alarm]:not([alarm=\"none\"])) .header,\n:host([alarm]:not([alarm=\"none\"])) .tag,\n:host([alarm]:not([alarm=\"none\"])) .label,\n:host([alarm]:not([alarm=\"none\"])) .unit {\n  color: inherit;\n}\n\n/* The tag identifies WHICH instrument is alarming — keep it at full opacity\n * so operators can read it at a glance. Label/unit can be slightly faded. */\n:host([alarm]:not([alarm=\"none\"])) .label,\n:host([alarm]:not([alarm=\"none\"])) .unit {\n  opacity: 0.85;\n}\n:host([alarm]:not([alarm=\"none\"])) .tag {\n  opacity: 1;\n  font-weight: var(--ind-font-weight-bold, 700);\n}\n\n:host([trend=\"up\"])     .trend { color: var(--ind-trend-up-fg, #fcd34d); }\n:host([trend=\"down\"])   .trend { color: var(--ind-trend-down-fg, #22d3ee); }\n:host([trend=\"stable\"]) .trend { color: var(--ind-trend-stable-fg, #8390a0); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ValueAlarm = 'none' | 'low-low' | 'low' | 'high' | 'high-high';\nexport type ValueTrend = 'none' | 'up' | 'down' | 'stable';\nexport type ValueSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-value',\n  styleUrl: 'value.css',\n  shadow: true,\n})\nexport class IndValue {\n  /** Raw value to display. Numeric values are formatted with `precision`. */\n  @Prop() value!: number | string;\n\n  /** Engineering unit shown after the number (e.g. \"bar\", \"°C\", \"m³/h\"). */\n  @Prop() unit?: string;\n\n  /** Decimal places when `value` is numeric. Default: as-is. */\n  @Prop() precision?: number;\n\n  /** Active alarm priority. Highlights the readout with the ISA-18.2 color. */\n  @Prop({ reflect: true }) alarm: ValueAlarm = 'none';\n\n  /** Process trend direction. Renders a small arrow next to the unit. */\n  @Prop({ reflect: true }) trend: ValueTrend = 'none';\n\n  /** Readout size — `lg` is appropriate for primary KPIs (uses the 3xl font). */\n  @Prop({ reflect: true }) size: ValueSize = 'md';\n\n  /** Human label shown above the number (e.g. \"Discharge pressure\"). */\n  @Prop() label?: string;\n\n  /** Equipment tag shown above the number (e.g. \"PT-101\"). */\n  @Prop() tag?: string;\n\n  private formatted(): string {\n    if (typeof this.value === 'string') return this.value;\n    if (!Number.isFinite(this.value)) return '--';\n    if (this.precision !== undefined) return this.value.toFixed(this.precision);\n    return String(this.value);\n  }\n\n  render() {\n    const accessibleName = this.label ?? this.tag ?? 'process value';\n    const alarmSuffix = this.alarm !== 'none' ? `, alarm ${this.alarm}` : '';\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`}\n        aria-live={this.alarm === 'high-high' ? 'assertive' : 'polite'}\n      >\n        {(this.tag || this.label) && (\n          <div class=\"header\" part=\"header\">\n            {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          </div>\n        )}\n        <div class=\"readout\" part=\"readout\">\n          <span class=\"number\" part=\"number\">{this.formatted()}</span>\n          {this.unit && <span class=\"unit\" part=\"unit\">{this.unit}</span>}\n          {this.trend !== 'none' && (\n            <span class=\"trend\" part=\"trend\" aria-hidden=\"true\">\n              {this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆'}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-ph7ZTjuY.js');
+
+const valveCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.symbol{--_w:var(--ind-valve-width, 48px);--_fill:var(--ind-state-stopped-bg, #5a6776);--_stroke:var(--ind-state-stopped-border, #8390a0);width:var(--_w);height:calc(var(--_w) / 2);display:block}:host([orientation="vertical"]) .symbol{transform:rotate(90deg)}:host([size="sm"]) .symbol{--_w:32px}:host([size="md"]) .symbol{--_w:48px}:host([size="lg"]) .symbol{--_w:72px}.left,.right{fill:var(--_fill);stroke:var(--_stroke);stroke-width:1.25;stroke-linejoin:round;transition:fill var(--ind-motion-duration-base, 200ms),     stroke var(--ind-motion-duration-base, 200ms)}.stem{stroke:var(--_stroke);stroke-width:2;stroke-linecap:round}:host([state="open"]) .symbol{--_fill:var(--ind-state-running-bg, #16a34a);--_stroke:var(--ind-state-running-border, #4ade80)}:host([state="closed"]) .symbol{--_fill:var(--ind-state-stopped-bg, #5a6776);--_stroke:var(--ind-state-stopped-border, #8390a0)}:host([state="fault"]) .symbol{--_fill:var(--ind-state-fault-bg, #dc2626);--_stroke:var(--ind-state-fault-border, #f87171)}:host([state="transit"]) .symbol{--_fill:var(--ind-state-warning-bg, #f59e0b);--_stroke:var(--ind-state-warning-border, #fcd34d)}:host([state="transit"]) .left,:host([state="transit"]) .right{stroke-dasharray:4 2;animation:ind-valve-march var(--ind-motion-blink-slow, 1000ms) linear infinite}@keyframes ind-valve-march{to{stroke-dashoffset:-6}}.caption{display:flex;gap:var(--ind-spacing-3, 6px);align-items:baseline;font-size:var(--ind-font-size-sm, 11px)}.tag{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600)}.label{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}@media (prefers-reduced-motion: reduce){:host([state="transit"]) .left,:host([state="transit"]) .right{animation:none;stroke-dasharray:4 2}}`;
+
+const IndValve = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Valve state. `transit` is mid-stroke (transitioning between open and closed). */
+    state = 'closed';
+    /** Render the symbol along the flow direction. */
+    orientation = 'horizontal';
+    /** Visual size. */
+    size = 'md';
+    /** Human label rendered as caption (e.g. "Discharge valve"). */
+    label;
+    /** Equipment tag rendered as caption (e.g. "V-12"). */
+    tag;
+    render() {
+        const name = this.label ?? this.tag ?? 'valve';
+        return (index.h(index.Host, { key: 'f0a9a4f7a1401c7ffc091bb10e52d13854e0fd42', role: "img", "aria-label": `${name} — ${this.state}` }, index.h("svg", { key: '1ba7a6466df31802d8ca141016670c6c301bc066', class: "symbol", part: "symbol", viewBox: "0 0 32 16", "aria-hidden": "true" }, index.h("polygon", { key: '89f77217a84e53606ce38e126c8ce87358fafb8b', class: "left", part: "left", points: "2,2 2,14 16,8" }), index.h("polygon", { key: '12ca5cd5ad1c117c48cc54275fe98509daba3267', class: "right", part: "right", points: "30,2 30,14 16,8" }), index.h("line", { key: '24510448beca41c7ab421b61c06de63840bddf99', class: "stem", part: "stem", x1: "16", y1: "2", x2: "16", y2: "14" })), (this.tag || this.label) && (index.h("div", { key: '18b6f7a60c0fdb8b5b7a688d5f6151811a9d587b', class: "caption", part: "caption" }, this.tag && index.h("span", { key: '7a8eb4c486380e3cb1a92e1ab3bdcbd2689cbd50', class: "tag", part: "tag" }, this.tag), this.label && index.h("span", { key: '6281ca7b4ae18e455a28b18890d28c58f38c14c1', class: "label", part: "label" }, this.label)))));
+    }
+};
+IndValve.style = valveCss();
+
+exports.ind_valve = IndValve;
+//# sourceMappingURL=ind-valve.entry.cjs.js.map
+
+//# sourceMappingURL=ind-valve.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-valve.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,qiEAAqiE,CAAC;;MCWjjE,QAAQ,GAAA,MAAA;;;;;IAEM,KAAK,GAAe,QAAQ;;IAG5B,WAAW,GAAqB,YAAY;;IAG5C,IAAI,GAAc,IAAI;;AAGvC,IAAA,KAAK;;AAGL,IAAA,GAAG;IAEX,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO;QAC9C,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,EAAA,YAAA,EACE,CAAA,EAAG,IAAI,MAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAGrCD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EACtEA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAE,MAAM,EAAC,eAAe,EAAA,CAAG,EAC7DA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAC/DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,CACjE,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,MACtBA,kEAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChC,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC1D,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,CAC/D,CACP,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/valve/valve.css?tag=ind-valve&encapsulation=shadow","src/components/atoms/valve/valve.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-base, 12px);\n  /* `light-dark()` makes the fallback adapt to the page's color-scheme so the\n   * caption stays readable even if the atom lands on a surface whose theme\n   * doesn't match the loaded tokens (e.g. Storybook autodocs on white). */\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.symbol {\n  --_w: var(--ind-valve-width, 48px);\n  --_fill:   var(--ind-state-stopped-bg, #5a6776);\n  --_stroke: var(--ind-state-stopped-border, #8390a0);\n\n  width: var(--_w);\n  height: calc(var(--_w) / 2);\n  display: block;\n}\n\n:host([orientation=\"vertical\"]) .symbol {\n  transform: rotate(90deg);\n}\n\n:host([size=\"sm\"]) .symbol { --_w: 32px; }\n:host([size=\"md\"]) .symbol { --_w: 48px; }\n:host([size=\"lg\"]) .symbol { --_w: 72px; }\n\n.left,\n.right {\n  fill: var(--_fill);\n  stroke: var(--_stroke);\n  stroke-width: 1.25;\n  stroke-linejoin: round;\n  transition:\n    fill var(--ind-motion-duration-base, 200ms),\n    stroke var(--ind-motion-duration-base, 200ms);\n}\n\n.stem {\n  stroke: var(--_stroke);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n:host([state=\"open\"]) .symbol {\n  --_fill:   var(--ind-state-running-bg, #16a34a);\n  --_stroke: var(--ind-state-running-border, #4ade80);\n}\n:host([state=\"closed\"]) .symbol {\n  --_fill:   var(--ind-state-stopped-bg, #5a6776);\n  --_stroke: var(--ind-state-stopped-border, #8390a0);\n}\n:host([state=\"fault\"]) .symbol {\n  --_fill:   var(--ind-state-fault-bg, #dc2626);\n  --_stroke: var(--ind-state-fault-border, #f87171);\n}\n:host([state=\"transit\"]) .symbol {\n  --_fill:   var(--ind-state-warning-bg, #f59e0b);\n  --_stroke: var(--ind-state-warning-border, #fcd34d);\n}\n\n/* Transit: marching ants on the perimeter — universally read as\n * \"in motion / transitioning\" by control room operators. */\n:host([state=\"transit\"]) .left,\n:host([state=\"transit\"]) .right {\n  stroke-dasharray: 4 2;\n  animation: ind-valve-march var(--ind-motion-blink-slow, 1000ms) linear infinite;\n}\n\n@keyframes ind-valve-march {\n  to { stroke-dashoffset: -6; }\n}\n\n.caption {\n  display: flex;\n  gap: var(--ind-spacing-3, 6px);\n  align-items: baseline;\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.label {\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([state=\"transit\"]) .left,\n  :host([state=\"transit\"]) .right {\n    animation: none;\n    stroke-dasharray: 4 2;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ValveState = 'open' | 'closed' | 'transit' | 'fault';\nexport type ValveOrientation = 'horizontal' | 'vertical';\nexport type ValveSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-valve',\n  styleUrl: 'valve.css',\n  shadow: true,\n})\nexport class IndValve {\n  /** Valve state. `transit` is mid-stroke (transitioning between open and closed). */\n  @Prop({ reflect: true }) state: ValveState = 'closed';\n\n  /** Render the symbol along the flow direction. */\n  @Prop({ reflect: true }) orientation: ValveOrientation = 'horizontal';\n\n  /** Visual size. */\n  @Prop({ reflect: true }) size: ValveSize = 'md';\n\n  /** Human label rendered as caption (e.g. \"Discharge valve\"). */\n  @Prop() label?: string;\n\n  /** Equipment tag rendered as caption (e.g. \"V-12\"). */\n  @Prop() tag?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'valve';\n    return (\n      <Host\n        role=\"img\"\n        aria-label={`${name} — ${this.state}`}\n      >\n        {/* ISA-5.1 bowtie symbol. ViewBox is 32×16 so the natural ratio is 2:1. */}\n        <svg class=\"symbol\" part=\"symbol\" viewBox=\"0 0 32 16\" aria-hidden=\"true\">\n          <polygon class=\"left\"  part=\"left\"  points=\"2,2 2,14 16,8\" />\n          <polygon class=\"right\" part=\"right\" points=\"30,2 30,14 16,8\" />\n          <line    class=\"stem\"  part=\"stem\"  x1=\"16\" y1=\"2\" x2=\"16\" y2=\"14\" />\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\" part=\"caption\">\n            {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}