@ind-ds/core 0.1.1 → 0.2.1

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

@@ -0,0 +1,196 @@
+import { h, Host } from "@stencil/core";
+export class IndTank {
+    /** Process state (drives outline color). */
+    state = 'stopped';
+    /** Fill level, 0–100 %. */
+    level = 0;
+    /** Alarm tint of the liquid (overrides state-derived fill color). */
+    alarm = 'none';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "T-204"). */
+    tag;
+    /** Human label. */
+    label;
+    /** Show the numeric level under the symbol. */
+    showValue = false;
+    render() {
+        const pct = Math.min(100, Math.max(0, this.level));
+        // Body spans y 4..56 (height 52); liquid fills from the bottom up.
+        const top = 4;
+        const height = 52;
+        const fillH = (pct / 100) * height;
+        const fillY = top + height - fillH;
+        const name = this.label ?? this.tag ?? 'tank';
+        return (h(Host, { key: '5b40e01733c5399fffc64c2f49e7b82b42978de8', role: "meter", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${name} level ${Math.round(pct)}%` }, h("svg", { key: '76267a5138aa5c3a2e50aec8c8ef104b3fdd1d0e', class: "symbol", viewBox: "0 0 40 60", "aria-hidden": "true" }, h("defs", { key: '59c6bc39e401646fffad6506fc3d39ac34049d0c' }, h("clipPath", { key: 'e85ac49916606e0ba28886d505584f8f582c30ec', id: "tank-clip" }, h("rect", { key: '5f87fb031b4a61dd60827b411341f7095d4f920e', x: "4", y: top, width: "32", height: height, rx: "4" }))), h("rect", { key: '5ad22cabef8a273479a53b3511d7eccf3a20eff0', class: "liquid", x: "4", y: fillY, width: "32", height: fillH, "clip-path": "url(#tank-clip)" }), h("rect", { key: 'c6a32088394a44bef58c5d26d095fe3b710d7f89', class: "body", x: "4", y: top, width: "32", height: height, rx: "4" })), (this.tag || this.label || this.showValue) && (h("div", { key: 'd224c2acf97978df2b506f3242c6f6fa99066d23', class: "caption" }, this.tag && h("span", { key: '43d91f74f836e3870cbbed0f33e05e1225560562', class: "tag" }, this.tag), this.showValue && h("span", { key: 'b0784785618302059f3e54399124e542ad14ffa5', class: "tag" }, Math.round(pct), "%"), this.label && h("span", { key: '84523ec9d4ce39b5ddd0c8cf262092549d51a428', class: "label" }, this.label)))));
+    }
+    static get is() { return "ind-tank"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "tank.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_equipment/equipment.css", "tank.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "EquipmentState": {
+                            "location": "import",
+                            "path": "../_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentState",
+                            "referenceLocation": "EquipmentState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Process state (drives outline color)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill level, 0\u2013100 %."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "0"
+            },
+            "alarm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'low' | 'high'",
+                    "resolved": "\"high\" | \"low\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alarm tint of the liquid (overrides state-derived fill color)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "alarm",
+                "defaultValue": "'none'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "EquipmentSize": {
+                            "location": "import",
+                            "path": "../_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentSize",
+                            "referenceLocation": "EquipmentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag (e.g. \"T-204\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the numeric level under the symbol."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=tank.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tank.js","sourceRoot":"","sources":["../../../../src/components/atoms/tank/tank.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,OAAO;IAClB,4CAA4C;IACnB,KAAK,GAAmB,SAAS,CAAC;IAC3D,2BAA2B;IACnB,KAAK,GAAW,CAAC,CAAC;IAC1B,qEAAqE;IAC5C,KAAK,GAA4B,MAAM,CAAC;IACjE,mBAAmB;IACM,IAAI,GAAkB,IAAI,CAAC;IACpD,oCAAoC;IAC5B,GAAG,CAAU;IACrB,mBAAmB;IACX,KAAK,CAAU;IACvB,+CAA+C;IACvC,SAAS,GAAY,KAAK,CAAC;IAEnC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,mEAAmE;QACnE,MAAM,GAAG,GAAG,CAAC,CAAC;QACd,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;QACnC,MAAM,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC;QAC9C,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,mBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,mBACf,CAAC,mBACD,GAAG,gBACN,GAAG,IAAI,UAAU,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG;YAE/C,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM;gBACxD;oBACE,iEAAU,EAAE,EAAC,WAAW;wBACtB,6DAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAC,GAAG,GAAG,CAC/C,CACN;gBACP,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,KAAK,eAAY,iBAAiB,GAAG;gBAC7F,6DAAM,KAAK,EAAC,MAAM,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAC,GAAG,GAAG,CACjE;YACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAC7C,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBAC/C,IAAI,CAAC,SAAS,IAAI,6DAAM,KAAK,EAAC,KAAK;oBAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;wBAAS;gBAC7D,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-tank',\n  styleUrls: ['../_equipment/equipment.css', 'tank.css'],\n  shadow: true,\n})\nexport class IndTank {\n  /** Process state (drives outline color). */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Fill level, 0–100 %. */\n  @Prop() level: number = 0;\n  /** Alarm tint of the liquid (overrides state-derived fill color). */\n  @Prop({ reflect: true }) alarm: 'none' | 'low' | 'high' = 'none';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"T-204\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n  /** Show the numeric level under the symbol. */\n  @Prop() showValue: boolean = false;\n\n  render() {\n    const pct = Math.min(100, Math.max(0, this.level));\n    // Body spans y 4..56 (height 52); liquid fills from the bottom up.\n    const top = 4;\n    const height = 52;\n    const fillH = (pct / 100) * height;\n    const fillY = top + height - fillH;\n    const name = this.label ?? this.tag ?? 'tank';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={Math.round(pct)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={`${name} level ${Math.round(pct)}%`}\n      >\n        <svg class=\"symbol\" viewBox=\"0 0 40 60\" aria-hidden=\"true\">\n          <defs>\n            <clipPath id=\"tank-clip\">\n              <rect x=\"4\" y={top} width=\"32\" height={height} rx=\"4\" />\n            </clipPath>\n          </defs>\n          <rect class=\"liquid\" x=\"4\" y={fillY} width=\"32\" height={fillH} clip-path=\"url(#tank-clip)\" />\n          <rect class=\"body\" x=\"4\" y={top} width=\"32\" height={height} rx=\"4\" />\n        </svg>\n        {(this.tag || this.label || this.showValue) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.showValue && <span class=\"tag\">{Math.round(pct)}%</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,74 +0,0 @@
-: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;
-}

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

@@ -40,7 +40,7 @@ export class IndTextarea {
         this.indChange.emit(e.target.value);
     };
     render() {
-        return (h(Host, { key: 'a4ca904c7a9ca65900e0ccc696aab66429bdde71' }, h("label", { key: '57f1880efe8a30a2bd5e1253c81f058360519c9f', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'aa0367d91235eca6d69fd520617ea831b1ac71fc', class: "label", part: "label" }, this.label), 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))));
+        return (h(Host, { key: '57426919f6763e39da55fc5bf1366a5c9ce24436' }, h("label", { key: 'c0cc807246cd070846c50ad4124297fb1bd2d95d', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'e3a2d9a38526b6cee6f5b07e228dba59daf5d212', class: "label", part: "label" }, this.label), h("textarea", { key: '8b0f6fa3c2b4457db390bf44b06c81e089724da2', 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 is() { return "ind-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,161 @@
+import { h, Host } from "@stencil/core";
+export class IndTimestamp {
+    /** ISO string or epoch milliseconds. Defaults to now when omitted. */
+    value;
+    /** Display format. */
+    format = 'datetime';
+    /** BCP-47 locale for formatting. */
+    locale;
+    /** Show seconds for time/datetime formats. */
+    seconds = true;
+    date() {
+        if (this.value === undefined)
+            return new Date();
+        return new Date(this.value);
+    }
+    relative(d) {
+        const diff = d.getTime() - Date.now();
+        const abs = Math.abs(diff);
+        const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });
+        const units = [
+            ['day', 86400000],
+            ['hour', 3600000],
+            ['minute', 60000],
+            ['second', 1000],
+        ];
+        for (const [unit, ms] of units) {
+            if (abs >= ms || unit === 'second') {
+                return rtf.format(Math.round(diff / ms), unit);
+            }
+        }
+        return rtf.format(0, 'second');
+    }
+    formatted(d) {
+        if (Number.isNaN(d.getTime()))
+            return '--';
+        const sec = this.seconds ? { second: '2-digit' } : {};
+        switch (this.format) {
+            case 'iso':
+                return d.toISOString();
+            case 'date':
+                return d.toLocaleDateString(this.locale);
+            case 'time':
+                return d.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit', ...sec });
+            case 'relative':
+                return this.relative(d);
+            case 'datetime':
+            default:
+                return d.toLocaleString(this.locale, {
+                    year: 'numeric', month: '2-digit', day: '2-digit',
+                    hour: '2-digit', minute: '2-digit', ...sec,
+                });
+        }
+    }
+    render() {
+        const d = this.date();
+        const text = this.formatted(d);
+        const iso = Number.isNaN(d.getTime()) ? undefined : d.toISOString();
+        return (h(Host, { key: '46b6ebf2b8408a8b533293ef5a40c5c9380d6b91' }, h("time", { key: '6bc3d7c3e5286927d44594c5eccc7bd03209f83a', class: "ts", part: "time", dateTime: iso }, text)));
+    }
+    static get is() { return "ind-timestamp"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["timestamp.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["timestamp.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ISO string or epoch milliseconds. Defaults to now when omitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimestampFormat",
+                    "resolved": "\"date\" | \"datetime\" | \"iso\" | \"relative\" | \"time\"",
+                    "references": {
+                        "TimestampFormat": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/timestamp/timestamp.tsx",
+                            "id": "src/components/atoms/timestamp/timestamp.tsx::TimestampFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "format",
+                "defaultValue": "'datetime'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for formatting."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "seconds": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show seconds for time/datetime formats."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "seconds",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=timestamp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timestamp.js","sourceRoot":"","sources":["../../../../src/components/atoms/timestamp/timestamp.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TimestampFormat = 'datetime' | 'date' | 'time' | 'relative' | 'iso';\n\n@Component({\n  tag: 'ind-timestamp',\n  styleUrl: 'timestamp.css',\n  shadow: true,\n})\nexport class IndTimestamp {\n  /** ISO string or epoch milliseconds. Defaults to now when omitted. */\n  @Prop() value?: string | number;\n  /** Display format. */\n  @Prop({ reflect: true }) format: TimestampFormat = 'datetime';\n  /** BCP-47 locale for formatting. */\n  @Prop() locale?: string;\n  /** Show seconds for time/datetime formats. */\n  @Prop() seconds: boolean = true;\n\n  private date(): Date {\n    if (this.value === undefined) return new Date();\n    return new Date(this.value);\n  }\n\n  private relative(d: Date): string {\n    const diff = d.getTime() - Date.now();\n    const abs = Math.abs(diff);\n    const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });\n    const units: [Intl.RelativeTimeFormatUnit, number][] = [\n      ['day', 86400000],\n      ['hour', 3600000],\n      ['minute', 60000],\n      ['second', 1000],\n    ];\n    for (const [unit, ms] of units) {\n      if (abs >= ms || unit === 'second') {\n        return rtf.format(Math.round(diff / ms), unit);\n      }\n    }\n    return rtf.format(0, 'second');\n  }\n\n  private formatted(d: Date): string {\n    if (Number.isNaN(d.getTime())) return '--';\n    const sec = this.seconds ? { second: '2-digit' as const } : {};\n    switch (this.format) {\n      case 'iso':\n        return d.toISOString();\n      case 'date':\n        return d.toLocaleDateString(this.locale);\n      case 'time':\n        return d.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit', ...sec });\n      case 'relative':\n        return this.relative(d);\n      case 'datetime':\n      default:\n        return d.toLocaleString(this.locale, {\n          year: 'numeric', month: '2-digit', day: '2-digit',\n          hour: '2-digit', minute: '2-digit', ...sec,\n        });\n    }\n  }\n\n  render() {\n    const d = this.date();\n    const text = this.formatted(d);\n    const iso = Number.isNaN(d.getTime()) ? undefined : d.toISOString();\n    return (\n      <Host>\n        <time class=\"ts\" part=\"time\" dateTime={iso}>{text}</time>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,190 @@
+import { h, Host } from "@stencil/core";
+export class IndToggle {
+    /** On/off state. */
+    checked = false;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible label. Also the accessible name. */
+    label;
+    /** Text shown for the on state (in-track). */
+    textOn;
+    /** Text shown for the off state (in-track). */
+    textOff;
+    /** Fires when the state changes. */
+    indChange;
+    toggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.indChange.emit(this.checked);
+    };
+    onKey = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'e6963c1c5825f77432a6ee86a5331c73c038dc2d' }, h("button", { key: 'd6fc26eba0b9c4afb63a5ff4aaf3acfcd35478dc', type: "button", class: "control", part: "control", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-label": this.label, disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKey }, h("span", { key: '926f8adf483f6f336665e5fc56a655de039bd960', class: "track", part: "track" }, (this.textOn || this.textOff) && (h("span", { key: '6c176290532cff821d8f0eaac895528e8db3766a', class: "text", part: "text", "aria-hidden": "true" }, this.checked ? this.textOn : this.textOff)), h("span", { key: '6c87d49ca15e9f0000edd6c74291d691efd38c8f', class: "thumb", part: "thumb" })), this.label && h("span", { key: 'a0caa6d714b57d701187bf669291b9989a4b5f5d', class: "label", part: "label" }, this.label))));
+    }
+    static get is() { return "ind-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "On/off state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToggleSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ToggleSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/toggle/toggle.tsx",
+                            "id": "src/components/atoms/toggle/toggle.tsx::ToggleSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label. Also the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "textOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown for the on state (in-track)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-on"
+            },
+            "textOff": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown for the off state (in-track)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-off"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=toggle.js.map