@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-input/diwa-input-styles.js

@@ -0,0 +1,162 @@
+/**
+ * diwa-input — Shadow DOM CSS-in-JS styles
+ *
+ * NOTE: This is the styles module for the legacy diwa-input component.
+ * The newer diwa-input-text (and other input variants) use input-styles.ts.
+ */
+import { getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = () => `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Label ──────────────────────────────────────────────────────────── */
+
+  .label {
+    display: block;
+    margin-bottom: var(--diwa-space-2);
+    font-size: var(--diwa-font-size-md);
+    font-weight: var(--diwa-font-weight-medium);
+    color: var(--diwa-text-secondary);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  .required {
+    color: var(--diwa-danger-text);
+  }
+
+  /* ── Wrapper ────────────────────────────────────────────────────────── */
+
+  .wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-2);
+    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));
+    padding: 0 var(--diwa-input-padding-x, 12px);
+    background-color: var(--diwa-input-bg, var(--diwa-bg-input));
+    border: var(--diwa-border-width-base) solid var(--diwa-input-border, var(--diwa-border-light));
+    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));
+    box-sizing: border-box;
+    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  /* Focus — border and ring become visible on keyboard navigation */
+  :host(:focus-within) .wrapper,
+  .wrapper:focus-within {
+    border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));
+    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);
+  }
+
+  /* ── Native input ───────────────────────────────────────────────────── */
+
+  .input {
+    flex: 1;
+    min-width: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    width: 100%;
+    font-family: inherit;
+    font-size: var(--diwa-input-font-size, var(--diwa-font-size-base));
+    color: var(--diwa-input-color, var(--diwa-text-primary));
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  .input::placeholder {
+    color: var(--diwa-input-placeholder-color, var(--diwa-text-muted));
+  }
+
+  .input[type="number"]::-webkit-inner-spin-button,
+  .input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  /* ── Prefix / Suffix slots ──────────────────────────────────────────── */
+
+  .prefix,
+  .suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--diwa-text-tertiary);
+  }
+
+  /* ── State: disabled ────────────────────────────────────────────────── */
+
+  :host([disabled]) .wrapper {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .label {
+    color: var(--diwa-text-disabled);
+  }
+
+  /* ── State: readonly ────────────────────────────────────────────────── */
+
+  :host([readonly]) .wrapper {
+    background-color: var(--diwa-bg-secondary);
+    cursor: default;
+  }
+
+  /* ── State: error ───────────────────────────────────────────────────── */
+
+  :host([state="error"]) .wrapper {
+    border-color: var(--diwa-input-border-error, var(--diwa-danger));
+  }
+
+  :host([state="error"]:focus-within) .wrapper {
+    border-color: var(--diwa-input-border-error, var(--diwa-danger));
+  }
+
+  /* ── State: success ─────────────────────────────────────────────────── */
+
+  :host([state="success"]) .wrapper {
+    border-color: var(--diwa-input-border-success, var(--diwa-success));
+  }
+
+  :host([state="success"]:focus-within) .wrapper {
+    border-color: var(--diwa-input-border-success, var(--diwa-success));
+  }
+
+  /* ── Hint ───────────────────────────────────────────────────────────── */
+
+  .hint {
+    display: block;
+    margin-top: var(--diwa-space-2);
+    font-size: var(--diwa-font-size-md);
+    color: var(--diwa-text-tertiary);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  :host([state="error"]) .hint {
+    color: var(--diwa-danger-text);
+  }
+
+  :host([state="success"]) .hint {
+    color: var(--diwa-success-text);
+  }
+
+  ${getReducedMotionStyle('.wrapper')}
+`;
+//# sourceMappingURL=diwa-input-styles.js.map

package/dist/collection/components/diwa-input/diwa-input-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-input-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-input/diwa-input-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwJzC,qBAAqB,CAAC,UAAU,CAAC;CACpC,CAAC","sourcesContent":["/**\r\n * diwa-input — Shadow DOM CSS-in-JS styles\r\n *\r\n * NOTE: This is the styles module for the legacy diwa-input component.\r\n * The newer diwa-input-text (and other input variants) use input-styles.ts.\r\n */\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Label ──────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-2);\r\n    font-size: var(--diwa-font-size-md);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  .required {\r\n    color: var(--diwa-danger-text);\r\n  }\r\n\r\n  /* ── Wrapper ────────────────────────────────────────────────────────── */\r\n\r\n  .wrapper {\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));\n    padding: 0 var(--diwa-input-padding-x, 12px);\r\n    background-color: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-base) solid var(--diwa-input-border, var(--diwa-border-light));\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n    box-sizing: border-box;\r\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  /* Focus — border and ring become visible on keyboard navigation */\n  :host(:focus-within) .wrapper,\n  .wrapper:focus-within {\n    border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\n    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);\n  }\n\r\n  /* ── Native input ───────────────────────────────────────────────────── */\r\n\r\n  .input {\r\n    flex: 1;\r\n    min-width: 0;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    background: transparent;\r\n    border: none;\r\n    outline: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    font-family: inherit;\r\n    font-size: var(--diwa-input-font-size, var(--diwa-font-size-base));\r\n    color: var(--diwa-input-color, var(--diwa-text-primary));\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  .input::placeholder {\r\n    color: var(--diwa-input-placeholder-color, var(--diwa-text-muted));\r\n  }\r\n\r\n  .input[type=\"number\"]::-webkit-inner-spin-button,\r\n  .input[type=\"number\"]::-webkit-outer-spin-button {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n  }\r\n\r\n  .input[type=\"search\"]::-webkit-search-cancel-button {\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  /* ── Prefix / Suffix slots ──────────────────────────────────────────── */\r\n\r\n  .prefix,\r\n  .suffix {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    flex-shrink: 0;\r\n    color: var(--diwa-text-tertiary);\r\n  }\r\n\r\n  /* ── State: disabled ────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .wrapper {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    color: var(--diwa-text-disabled);\r\n  }\r\n\r\n  /* ── State: readonly ────────────────────────────────────────────────── */\r\n\r\n  :host([readonly]) .wrapper {\r\n    background-color: var(--diwa-bg-secondary);\r\n    cursor: default;\r\n  }\r\n\r\n  /* ── State: error ───────────────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) .wrapper {\r\n    border-color: var(--diwa-input-border-error, var(--diwa-danger));\r\n  }\r\n\r\n  :host([state=\"error\"]:focus-within) .wrapper {\r\n    border-color: var(--diwa-input-border-error, var(--diwa-danger));\r\n  }\r\n\r\n  /* ── State: success ─────────────────────────────────────────────────── */\r\n\r\n  :host([state=\"success\"]) .wrapper {\r\n    border-color: var(--diwa-input-border-success, var(--diwa-success));\r\n  }\r\n\r\n  :host([state=\"success\"]:focus-within) .wrapper {\r\n    border-color: var(--diwa-input-border-success, var(--diwa-success));\r\n  }\r\n\r\n  /* ── Hint ───────────────────────────────────────────────────────────── */\r\n\r\n  .hint {\r\n    display: block;\r\n    margin-top: var(--diwa-space-2);\r\n    font-size: var(--diwa-font-size-md);\r\n    color: var(--diwa-text-tertiary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  :host([state=\"error\"]) .hint {\r\n    color: var(--diwa-danger-text);\r\n  }\r\n\r\n  :host([state=\"success\"]) .hint {\r\n    color: var(--diwa-success-text);\r\n  }\r\n\r\n  ${getReducedMotionStyle('.wrapper')}\r\n`;\r\n"]}

package/dist/collection/components/diwa-input/diwa-input.js

@@ -0,0 +1,443 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-input-styles";
+/** Module-level counter — guarantees unique IDs across all DiwaInput instances. */
+let inputIdCounter = 0;
+/**
+ * @component diwa-input
+ *
+ * A fully encapsulated, accessible text input primitive.
+ * Supports all common text-based HTML input types and validation states.
+ *
+ * Design token override API (set on :root or any ancestor):
+ *   --diwa-input-height          Height of the input
+ *   --diwa-input-padding-x       Horizontal padding
+ *   --diwa-input-radius          Border radius
+ *   --diwa-input-border          Default border colour
+ *   --diwa-input-bg              Background colour
+ *   --diwa-input-color           Text colour
+ *   --diwa-input-placeholder-color  Placeholder text colour
+ *   --diwa-input-font-size       Font size
+ *   --diwa-input-border-focus    Border colour when focused
+ *   --diwa-input-border-error    Border colour in error state
+ *   --diwa-input-border-success  Border colour in success state
+ *
+ * Usage:
+ *   <diwa-input label="Email" type="email" placeholder="you@example.com"></diwa-input>
+ *   <diwa-input label="Password" type="password" required></diwa-input>
+ *   <diwa-input label="Search" type="search" state="error" hint="No results found."></diwa-input>
+ *
+ * @slot prefix — Icon or content placed before the input (e.g., a search icon)
+ * @slot suffix — Icon or content placed after the input (e.g., a clear button)
+ */
+export class DiwaInput {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Native input type. Controls keyboard, validation, and autocomplete behaviour. */
+        this.type = "text";
+        /** Controlled value. Use with onDiwaChange for controlled form patterns. */
+        this.value = "";
+        /** Marks the field as required. Sets aria-required on the inner input. */
+        this.required = false;
+        /** Disables the input. Blocks pointer and keyboard interaction. */
+        this.disabled = false;
+        /** Makes the input read-only. Content is selectable but not editable. */
+        this.readonly = false;
+        /**
+         * Validation state. Controls border colour and the hint text colour.
+         * Pair with the `hint` prop to surface error or success messages.
+         */
+        this.state = "default";
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        // ──────────────────────────────────────────────────────────────
+        // Private state / helpers
+        // ──────────────────────────────────────────────────────────────
+        this.internalId = `diwa-input-${++inputIdCounter}`;
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.diwaInput.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.diwaChange.emit(this.value);
+        };
+        this.handleFocus = (e) => {
+            this.diwaFocus.emit(e);
+        };
+        this.handleBlur = (e) => {
+            this.diwaBlur.emit(e);
+        };
+    }
+    get resolvedId() {
+        var _a;
+        return (_a = this.inputId) !== null && _a !== void 0 ? _a : this.internalId;
+    }
+    get hintId() {
+        return `${this.resolvedId}-hint`;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const { resolvedId, hintId } = this;
+        const hasHint = !!this.hint;
+        return (h(Host, { key: '78f8165d0ec522cc7c39b1305710322f373935b1', "data-theme": this.theme }, h("style", { key: '55ead2ca683d3b95e818227bac4befc820d17e43', innerHTML: getComponentCss() }), this.label && (h("label", { key: 'a371be6cb2fae92aab0536cdcc145dde89130aca', class: "label", part: "label", htmlFor: resolvedId }, this.label, this.required && (h("span", { key: 'b0a997bd0673abe864346b6c9b207da285ee9227', class: "required", "aria-hidden": "true" }, " ", "*")))), h("div", { key: '1449172e3374f27c9305566008974fca8e53f998', class: "wrapper", part: "wrapper" }, h("span", { key: '82c809cfc30968c60530b5e7e7091f1573398a02', class: "prefix", part: "prefix" }, h("slot", { key: 'b591bf5c11847e20d6cbceb36d16c6135726d80e', name: "prefix" })), h("input", { key: '95f9596afb2d1fd1c54d2ae5768da54289c5781e', id: resolvedId, part: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autocomplete: this.autocomplete, "aria-required": this.required ? "true" : undefined, "aria-invalid": this.state === "error" ? "true" : undefined, "aria-describedby": hasHint ? hintId : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("span", { key: 'c6cb1c62381e07cd2ce8b31c8329eff9544bc079', class: "suffix", part: "suffix" }, h("slot", { key: '309d70266c2d3164f9170e1da66c5fa47d38a14c', name: "suffix" }))), hasHint && (h("span", { key: '8a2fd5a30044f3d8232efc36b23b9f4206130837', id: hintId, class: "hint", part: "hint", "aria-live": this.state === "error" ? "polite" : undefined }, this.hint))));
+    }
+    static get is() { return "diwa-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-input/types.ts::InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native input type. Controls keyboard, validation, and autocomplete behaviour."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"text\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label text. Linked to the inner <input> via htmlFor/id."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when the field is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled value. Use with onDiwaChange for controlled form patterns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field as required. Sets aria-required on the inner input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input. Blocks pointer and keyboard interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the input read-only. Content is selectable but not editable."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputState",
+                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "references": {
+                        "InputState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-input/types.ts::InputState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state. Controls border colour and the hint text colour.\r\nPair with the `hint` prop to surface error or success messages."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "\"default\""
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / hint text rendered below the input.\r\nIn the error state this text should describe the validation failure.\r\nAssociated via aria-describedby for screen reader announcement."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hint",
+                "reflect": false
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML autocomplete attribute passthrough.\r\nAllows browsers to offer autocomplete suggestions."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML name attribute \u2014 used to identify the field in form data."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML id forwarded to the inner input.\r\nWhen omitted the component generates a unique id for label association."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "diwaInput",
+                "name": "diwaInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke (mirrors native `input` event).\r\nPayload is the current string value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "diwaChange",
+                "name": "diwaChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus (mirrors native `change` event).\r\nPayload is the committed string value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "diwaFocus",
+                "name": "diwaFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input receives focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "diwaBlur",
+                "name": "diwaBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=diwa-input.js.map

package/dist/collection/components/diwa-input/diwa-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-input.js","sourceRoot":"","sources":["../../../src/components/diwa-input/diwa-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport type { InputState, InputType } from \"./types\";\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-styles';\r\n\r\n/** Module-level counter — guarantees unique IDs across all DiwaInput instances. */\r\nlet inputIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-input\r\n *\r\n * A fully encapsulated, accessible text input primitive.\r\n * Supports all common text-based HTML input types and validation states.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-input-height          Height of the input\r\n *   --diwa-input-padding-x       Horizontal padding\r\n *   --diwa-input-radius          Border radius\r\n *   --diwa-input-border          Default border colour\r\n *   --diwa-input-bg              Background colour\r\n *   --diwa-input-color           Text colour\r\n *   --diwa-input-placeholder-color  Placeholder text colour\r\n *   --diwa-input-font-size       Font size\r\n *   --diwa-input-border-focus    Border colour when focused\r\n *   --diwa-input-border-error    Border colour in error state\r\n *   --diwa-input-border-success  Border colour in success state\r\n *\r\n * Usage:\r\n *   <diwa-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"></diwa-input>\r\n *   <diwa-input label=\"Password\" type=\"password\" required></diwa-input>\r\n *   <diwa-input label=\"Search\" type=\"search\" state=\"error\" hint=\"No results found.\"></diwa-input>\r\n *\r\n * @slot prefix — Icon or content placed before the input (e.g., a search icon)\r\n * @slot suffix — Icon or content placed after the input (e.g., a clear button)\r\n */\r\n@Component({\r\n  tag: \"diwa-input\",\r\n  /**\r\n   * delegatesFocus: true ensures that when host-app code focuses the\r\n   * <diwa-input> custom element directly (e.g., via .focus()), focus\r\n   * is forwarded to the inner <input> element inside the Shadow DOM.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInput {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Native input type. Controls keyboard, validation, and autocomplete behaviour. */\r\n  @Prop() type: InputType = \"text\";\r\n\r\n  /** Visible label text. Linked to the inner <input> via htmlFor/id. */\r\n  @Prop() label?: string;\r\n\r\n  /** Placeholder text shown when the field is empty. */\r\n  @Prop() placeholder?: string;\r\n\r\n  /** Controlled value. Use with onDiwaChange for controlled form patterns. */\r\n  @Prop({ mutable: true, reflect: false }) value: string = \"\";\r\n\r\n  /** Marks the field as required. Sets aria-required on the inner input. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Disables the input. Blocks pointer and keyboard interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Makes the input read-only. Content is selectable but not editable. */\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n\r\n  /**\r\n   * Validation state. Controls border colour and the hint text colour.\r\n   * Pair with the `hint` prop to surface error or success messages.\r\n   */\r\n  @Prop({ reflect: true }) state: InputState = \"default\";\r\n\r\n  /**\r\n   * Helper / hint text rendered below the input.\r\n   * In the error state this text should describe the validation failure.\r\n   * Associated via aria-describedby for screen reader announcement.\r\n   */\r\n  @Prop() hint?: string;\r\n\r\n  /**\r\n   * HTML autocomplete attribute passthrough.\r\n   * Allows browsers to offer autocomplete suggestions.\r\n   */\r\n  @Prop() autocomplete?: string;\r\n\r\n  /**\r\n   * HTML name attribute — used to identify the field in form data.\r\n   */\r\n  @Prop() name?: string;\r\n\r\n  /**\r\n   * HTML id forwarded to the inner input.\r\n   * When omitted the component generates a unique id for label association.\r\n   */\r\n  @Prop() inputId?: string;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted on every keystroke (mirrors native `input` event).\r\n   * Payload is the current string value.\r\n   */\r\n  @Event() diwaInput!: EventEmitter<string>;\r\n\r\n  /**\r\n   * Emitted when the input loses focus (mirrors native `change` event).\r\n   * Payload is the committed string value.\r\n   */\r\n  @Event() diwaChange!: EventEmitter<string>;\r\n\r\n  /**\r\n   * Emitted when the input receives focus.\r\n   */\r\n  @Event() diwaFocus!: EventEmitter<FocusEvent>;\r\n\r\n  /**\r\n   * Emitted when the input loses focus.\r\n   */\r\n  @Event() diwaBlur!: EventEmitter<FocusEvent>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private state / helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private internalId: string = `diwa-input-${++inputIdCounter}`;\r\n\r\n  private get resolvedId(): string {\r\n    return this.inputId ?? this.internalId;\r\n  }\r\n\r\n  private get hintId(): string {\r\n    return `${this.resolvedId}-hint`;\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    const target = e.target as HTMLInputElement;\r\n    this.value = target.value;\r\n    this.diwaInput.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    const target = e.target as HTMLInputElement;\r\n    this.value = target.value;\r\n    this.diwaChange.emit(this.value);\r\n  };\r\n\r\n  private handleFocus = (e: FocusEvent): void => {\r\n    this.diwaFocus.emit(e);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => {\r\n    this.diwaBlur.emit(e);\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const { resolvedId, hintId } = this;\r\n    const hasHint = !!this.hint;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        {/* Label — rendered only when the `label` prop is provided */}\r\n        {this.label && (\r\n          <label class=\"label\" part=\"label\" htmlFor={resolvedId}>\r\n            {this.label}\r\n            {this.required && (\r\n              <span class=\"required\" aria-hidden=\"true\">\r\n                {\" \"}\r\n                *\r\n              </span>\r\n            )}\r\n          </label>\r\n        )}\r\n\r\n        {/* Input wrapper — positions prefix/suffix slots alongside the input */}\r\n        <div class=\"wrapper\" part=\"wrapper\">\r\n          {/* Prefix slot — e.g., search icon. Empty slots render invisibly. */}\r\n          <span class=\"prefix\" part=\"prefix\">\r\n            <slot name=\"prefix\" />\r\n          </span>\r\n\r\n          <input\r\n            id={resolvedId}\r\n            part=\"input\"\r\n            class=\"input\"\r\n            type={this.type}\r\n            name={this.name}\r\n            value={this.value}\r\n            placeholder={this.placeholder}\r\n            disabled={this.disabled}\r\n            readOnly={this.readonly}\r\n            required={this.required}\r\n            autocomplete={this.autocomplete}\r\n            aria-required={this.required ? \"true\" : undefined}\r\n            aria-invalid={this.state === \"error\" ? \"true\" : undefined}\r\n            aria-describedby={hasHint ? hintId : undefined}\r\n            onInput={this.handleInput}\r\n            onChange={this.handleChange}\r\n            onFocus={this.handleFocus}\r\n            onBlur={this.handleBlur}\r\n          />\r\n\r\n          {/* Suffix slot — e.g., clear / visibility toggle. Empty slots render invisibly. */}\r\n          <span class=\"suffix\" part=\"suffix\">\r\n            <slot name=\"suffix\" />\r\n          </span>\r\n        </div>\r\n\r\n        {/* Hint / error text */}\r\n        {hasHint && (\r\n          <span\r\n            id={hintId}\r\n            class=\"hint\"\r\n            part=\"hint\"\r\n            aria-live={this.state === \"error\" ? \"polite\" : undefined}\r\n          >\r\n            {this.hint}\r\n          </span>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}