@ind-ds/core 0.2.0 → 0.2.1

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

@@ -1,215 +0,0 @@
-import { h, Host, } from "@stencil/core";
-export class IndButton {
-    /** Visual variant. `danger` should be paired with `holdToConfirmMs` for critical actions. */
-    variant = 'default';
-    /** Size. */
-    size = 'md';
-    /** Disabled state. */
-    disabled = false;
-    /** Optional accessible label (falls back to slotted text). */
-    label;
-    /**
-     * If > 0, the button must be held this many milliseconds before activating.
-     * Use for critical actions (Stop, Trip, Reset) to prevent accidental clicks —
-     * standard NAMUR / safety-instrumented operating practice.
-     */
-    holdToConfirmMs = 0;
-    /** Fired on click (or after hold completes if `holdToConfirmMs > 0`). */
-    indActivate;
-    progress = 0;
-    holdStart = 0;
-    rafHandle = null;
-    startHold = (e) => {
-        if (this.disabled)
-            return;
-        e.preventDefault();
-        if (this.holdToConfirmMs <= 0) {
-            this.indActivate.emit();
-            return;
-        }
-        this.holdStart = performance.now();
-        this.progress = 0;
-        this.tick();
-    };
-    tick = () => {
-        const elapsed = performance.now() - this.holdStart;
-        this.progress = Math.min(1, elapsed / this.holdToConfirmMs);
-        if (this.progress >= 1) {
-            this.cancelHold();
-            this.indActivate.emit();
-            return;
-        }
-        this.rafHandle = requestAnimationFrame(this.tick);
-    };
-    cancelHold = () => {
-        if (this.rafHandle !== null) {
-            cancelAnimationFrame(this.rafHandle);
-            this.rafHandle = null;
-        }
-        this.progress = 0;
-    };
-    onKeyDown = (e) => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            this.startHold(e);
-        }
-    };
-    disconnectedCallback() {
-        this.cancelHold();
-    }
-    render() {
-        const isHolding = this.progress > 0 && this.progress < 1;
-        return (h(Host, { key: '6265f36f3ba534127950edd92a66f9845e500239' }, h("button", { key: '4b7e7b7f3998dcc6149776138b33ce32a0f7990f', type: "button", class: { btn: true, 'is-holding': isHolding }, part: "btn", disabled: this.disabled, "aria-label": this.label, "aria-describedby": this.holdToConfirmMs > 0 ? 'hold-hint' : undefined, onPointerDown: this.startHold, onPointerUp: this.cancelHold, onPointerLeave: this.cancelHold, onPointerCancel: this.cancelHold, onKeyDown: this.onKeyDown, onKeyUp: this.cancelHold }, h("span", { key: '7a3742b5296acc828b31c7a1c72d741c5466cd3b', class: "content", part: "content" }, h("slot", { key: '6afe09c5f9ac3e032d86fab913a57e098ed19664' }, this.label)), this.holdToConfirmMs > 0 && (h("span", { key: 'b5157b7e7ab97367de99b6d9eb33dd86d499be1b', class: "hold-progress", part: "hold-progress", style: { transform: `scaleX(${this.progress})` }, "aria-hidden": "true" }))), this.holdToConfirmMs > 0 && (h("span", { key: '8f2fdfa61efd0061604b8230012f916bbc7eef34', id: "hold-hint", class: "sr-only" }, "Hold to confirm (", this.holdToConfirmMs, " ms)"))));
-    }
-    static get is() { return "ind-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonVariant",
-                    "resolved": "\"danger\" | \"default\" | \"ghost\" | \"primary\"",
-                    "references": {
-                        "ButtonVariant": {
-                            "location": "local",
-                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/button/button.tsx",
-                            "id": "src/components/atoms/button/button.tsx::ButtonVariant"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual variant. `danger` should be paired with `holdToConfirmMs` for critical actions."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "variant",
-                "defaultValue": "'default'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
-                    "references": {
-                        "ButtonSize": {
-                            "location": "local",
-                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/button/button.tsx",
-                            "id": "src/components/atoms/button/button.tsx::ButtonSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Size."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "size",
-                "defaultValue": "'md'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disabled state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional accessible label (falls back to slotted text)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "holdToConfirmMs": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If > 0, the button must be held this many milliseconds before activating.\nUse for critical actions (Stop, Trip, Reset) to prevent accidental clicks \u2014\nstandard NAMUR / safety-instrumented operating practice."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hold-to-confirm-ms",
-                "defaultValue": "0"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "progress": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "indActivate",
-                "name": "indActivate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired on click (or after hold completes if `holdToConfirmMs > 0`)."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=button.js.map

package/dist/collection/components/atoms/canvas-layer/canvas-layer.css

@@ -1,8 +0,0 @@
-:host {
-  position: absolute;
-  display: inline-block;
-  transform-origin: center;
-}
-
-/* Pair with a positioned container (e.g. an ind P&ID frame) that sets
- * `position: relative`. Layers stack by their `z` prop. */

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

@@ -1,161 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class IndCanvasLayer {
-    /** Horizontal position as a percentage of the parent (0–100). */
-    x = 0;
-    /** Vertical position as a percentage of the parent (0–100). */
-    y = 0;
-    /** Rotation in degrees. */
-    rotation = 0;
-    /** Uniform scale factor. */
-    scale = 1;
-    /** Stacking order. */
-    z = 0;
-    /** Anchor the placed content by its center (default) or top-left. */
-    anchor = 'center';
-    render() {
-        const translate = this.anchor === 'center' ? 'translate(-50%, -50%)' : 'translate(0, 0)';
-        return (h(Host, { key: '9133c1e4def8fc950638b32d0e459ee7424a0d1d', style: {
-                left: `${this.x}%`,
-                top: `${this.y}%`,
-                zIndex: String(this.z),
-                transform: `${translate} rotate(${this.rotation}deg) scale(${this.scale})`,
-            } }, h("slot", { key: '168b3e4ecc1c9d34f96a8fc0faf5e9dab5ffc2a3' })));
-    }
-    static get is() { return "ind-canvas-layer"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["canvas-layer.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["canvas-layer.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "x": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Horizontal position as a percentage of the parent (0\u2013100)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "x",
-                "defaultValue": "0"
-            },
-            "y": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Vertical position as a percentage of the parent (0\u2013100)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "y",
-                "defaultValue": "0"
-            },
-            "rotation": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Rotation in degrees."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "rotation",
-                "defaultValue": "0"
-            },
-            "scale": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Uniform scale factor."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "scale",
-                "defaultValue": "1"
-            },
-            "z": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Stacking order."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "z",
-                "defaultValue": "0"
-            },
-            "anchor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'center' | 'top-left'",
-                    "resolved": "\"center\" | \"top-left\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Anchor the placed content by its center (default) or top-left."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "anchor",
-                "defaultValue": "'center'"
-            }
-        };
-    }
-}
-//# sourceMappingURL=canvas-layer.js.map

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

@@ -1,92 +0,0 @@
-:host {
-  display: inline-flex;
-  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));
-  --_size: 16px;
-}
-
-:host([size="sm"]) { --_size: 12px; }
-:host([size="md"]) { --_size: 16px; }
-:host([size="lg"]) { --_size: 20px; }
-
-.wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ind-spacing-3, 6px);
-  cursor: pointer;
-  user-select: none;
-}
-
-.box {
-  position: relative;
-  display: inline-block;
-  width: var(--_size);
-  height: var(--_size);
-  flex-shrink: 0;
-}
-
-.native {
-  position: absolute;
-  inset: 0;
-  margin: 0;
-  opacity: 0;
-  cursor: inherit;
-}
-
-.mark {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
-  border: 1px solid var(--ind-surface-border-default, #2a3340);
-  border-radius: var(--ind-radius-sm, 2px);
-  transition:
-    background var(--ind-motion-duration-fast, 120ms),
-    border-color var(--ind-motion-duration-fast, 120ms);
-}
-
-.mark::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  display: block;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 70%;
-  opacity: 0;
-  transition: opacity var(--ind-motion-duration-fast, 120ms);
-}
-
-:host([checked]) .mark,
-:host([indeterminate]) .mark {
-  background: var(--ind-button-primary-bg, #2563eb);
-  border-color: var(--ind-button-primary-border, #60a5fa);
-}
-
-:host([checked]) .mark::after {
-  opacity: 1;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/></svg>");
-}
-
-:host([indeterminate]) .mark::after {
-  opacity: 1;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M3 8h10'/></svg>");
-}
-
-.native:focus-visible + .mark {
-  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);
-  outline-offset: 2px;
-}
-
-:host([disabled]) {
-  opacity: 0.5;
-}
-:host([disabled]) .wrap {
-  cursor: not-allowed;
-}
-
-.label {
-  line-height: 1.2;
-}

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

@@ -1,214 +0,0 @@
-import { h, Host, } from "@stencil/core";
-export class IndCheckbox {
-    host;
-    checked = false;
-    indeterminate = false;
-    disabled = false;
-    size = 'md';
-    label;
-    name;
-    value;
-    indChange;
-    componentDidLoad() {
-        this.syncIndeterminate();
-    }
-    syncIndeterminate() {
-        const input = this.host.shadowRoot?.querySelector('input');
-        if (input)
-            input.indeterminate = this.indeterminate;
-    }
-    onChange = (e) => {
-        const next = e.target.checked;
-        this.checked = next;
-        this.indChange.emit(next);
-    };
-    render() {
-        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
-        return (h(Host, { key: '97a30cc5fc8eb0a01e0193b56e811abd3f322a31' }, h("label", { key: 'cac1ab16f2b130f3dac76e5b861ecbd3a9271b23', class: "wrap", part: "wrap" }, h("span", { key: 'e18b87b7e0fbc6f87a631b47a03e7d56d12bda9a', class: "box", part: "box" }, h("input", { key: 'e2f3e227b34b5b0161fced6d2ac9dc671a1812ed', type: "checkbox", class: "native", part: "native", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, "aria-checked": ariaChecked, onChange: this.onChange }), h("span", { key: '0181321087723255ed57ac80503fe2bfa54a3b13', class: "mark", part: "mark", "aria-hidden": "true" })), this.label && h("span", { key: '27a256ee09a5c9f362221a78b4faeb32b4e63f86', class: "label", part: "label" }, this.label))));
-    }
-    static get is() { return "ind-checkbox"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["checkbox.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["checkbox.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "checked",
-                "defaultValue": "false"
-            },
-            "indeterminate": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "indeterminate",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CheckboxSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
-                    "references": {
-                        "CheckboxSize": {
-                            "location": "local",
-                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/checkbox/checkbox.tsx",
-                            "id": "src/components/atoms/checkbox/checkbox.tsx::CheckboxSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "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": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "indChange",
-                "name": "indChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "indeterminate",
-                "methodName": "syncIndeterminate"
-            }];
-    }
-}
-//# sourceMappingURL=checkbox.js.map