@diwacopilot/components 1.0.0

package/dist/cjs/diwa-input.cjs.entry.js

@@ -0,0 +1,239 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+/**
+ * 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.
+ */
+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);
+  }
+
+  ${styles.getReducedMotionStyle('.wrapper')}
+`;
+
+/** Module-level counter — guarantees unique IDs across all DiwaInput instances. */
+let inputIdCounter = 0;
+const DiwaInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.diwaInput = index.createEvent(this, "diwaInput", 7);
+        this.diwaChange = index.createEvent(this, "diwaChange", 7);
+        this.diwaFocus = index.createEvent(this, "diwaFocus", 7);
+        this.diwaBlur = index.createEvent(this, "diwaBlur", 7);
+        // ──────────────────────────────────────────────────────────────
+        // 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 (index.h(index.Host, { key: '78f8165d0ec522cc7c39b1305710322f373935b1', "data-theme": this.theme }, index.h("style", { key: '55ead2ca683d3b95e818227bac4befc820d17e43', innerHTML: getComponentCss() }), this.label && (index.h("label", { key: 'a371be6cb2fae92aab0536cdcc145dde89130aca', class: "label", part: "label", htmlFor: resolvedId }, this.label, this.required && (index.h("span", { key: 'b0a997bd0673abe864346b6c9b207da285ee9227', class: "required", "aria-hidden": "true" }, " ", "*")))), index.h("div", { key: '1449172e3374f27c9305566008974fca8e53f998', class: "wrapper", part: "wrapper" }, index.h("span", { key: '82c809cfc30968c60530b5e7e7091f1573398a02', class: "prefix", part: "prefix" }, index.h("slot", { key: 'b591bf5c11847e20d6cbceb36d16c6135726d80e', name: "prefix" })), index.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 }), index.h("span", { key: 'c6cb1c62381e07cd2ce8b31c8329eff9544bc079', class: "suffix", part: "suffix" }, index.h("slot", { key: '309d70266c2d3164f9170e1da66c5fa47d38a14c', name: "suffix" }))), hasHint && (index.h("span", { key: '8a2fd5a30044f3d8232efc36b23b9f4206130837', id: hintId, class: "hint", part: "hint", "aria-live": this.state === "error" ? "polite" : undefined }, this.hint))));
+    }
+    static get delegatesFocus() { return true; }
+};
+
+exports.diwa_input = DiwaInput;
+
+//# sourceMappingURL=diwa-input.cjs.entry.js.map

package/dist/cjs/diwa-input.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input.entry.cjs.js","mappings":";;;;;;;AAAA;;;;;;AAQO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwJzCA,4BAAqB,CAAC,UAAU,CAAC;CACpC;;AC5JD;AACA,IAAI,cAAc,GAAG,CAAC,CAAC;MAsCV,SAAS;IATtB;;;;;;;;;;QAeU,SAAI,GAAc,MAAM,CAAC;;QASQ,UAAK,GAAW,EAAE,CAAC;;QAGpD,aAAQ,GAAY,KAAK,CAAC;;QAGT,aAAQ,GAAY,KAAK,CAAC;;QAG1B,aAAQ,GAAY,KAAK,CAAC;;;;;QAM1B,UAAK,GAAe,SAAS,CAAC;;QA2B9B,UAAK,GAAU,MAAM,CAAC;;;;QAgCvC,eAAU,GAAW,cAAc,EAAE,cAAc,EAAE,CAAC;QAUtD,gBAAW,GAAG,CAAC,CAAQ;YAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAQ;YAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAa;YAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACxB,CAAC;QAEM,eAAU,GAAG,CAAC,CAAa;YACjC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACvB,CAAC;KA0EH;IApGC,IAAY,UAAU;;QACpB,OAAO,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,UAAU,CAAC;KACxC;IAED,IAAY,MAAM;QAChB,OAAO,GAAG,IAAI,CAAC,UAAU,OAAO,CAAC;KAClC;;;;IA0BD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACpC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAE5B,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EAEtC,IAAI,CAAC,KAAK,KACTA,oEAAO,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,UAAU,IAClD,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,KACZA,mEAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,IACtC,GAAG,MAEC,CACR,CACK,CACT,EAGDA,kEAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAEjCA,mEAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAChCA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EAEPA,oEACE,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,kBACnC,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,MAAM,GAAG,SAAS,sBACvC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB,EAGFA,mEAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAChCA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACH,EAGL,OAAO,KACNA,mEACE,EAAE,EAAE,MAAM,EACV,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,QAAQ,GAAG,SAAS,IAEvD,IAAI,CAAC,IAAI,CACL,CACR,CACI,EACP;KACH;;;;;;","names":["getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-input/diwa-input-styles.ts","src/components/diwa-input/diwa-input.tsx"],"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","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"],"version":3}

package/dist/cjs/diwa-link-pure.cjs.entry.js

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+const getComponentCss = () => `
+
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-flex;
+    position: relative;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Stretch: fill the parent's inline axis */
+  :host([stretch]) {
+    display: flex;
+    width: 100%;
+  }
+
+  /* ── Root element (<a> or <span>) ───────────────────────────────────── */
+
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--diwa-space-2);
+    flex-direction: row; /* overridden by alignLabel=start below */
+
+    background: transparent;
+    border: none;
+    padding: var(--diwa-space-0-5) var(--diwa-space-1);
+    margin: 0;
+    cursor: pointer;
+
+    font-family: inherit;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-regular);
+    line-height: 1;
+    color: var(--diwa-text-primary);
+    text-decoration: none;
+    white-space: nowrap;
+
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+
+    border-radius: var(--diwa-radius-sm);
+  }
+
+  /* Stretch: push icon and label to opposite edges */
+  :host([stretch]) .root {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  ${styles.getFocusStyle('.root')}
+
+  /* ── Size ───────────────────────────────────────────────────────────── */
+
+  :host([size="sm"]) .root {
+    font-size: var(--diwa-font-size-sm);
+  }
+
+  :host([size="lg"]) .root {
+    font-size: var(--diwa-font-size-lg);
+  }
+
+  /* ── Hover ──────────────────────────────────────────────────────────── */
+
+  .root:hover {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */
+
+  :host([active]) .root,
+  .root:active {
+    background-color: var(--diwa-bg-active);
+    color: var(--diwa-text-primary);
+  }
+
+  /* ── Visited — prevent browser default purple ───────────────────────── */
+
+  .root:visited {
+    color: var(--diwa-text-primary);
+  }
+
+  /* ── alignLabel: start → label on left, icon on right ──────────────── */
+
+  :host([align-label="start"]) .root {
+    flex-direction: row-reverse;
+  }
+
+  /* ── Underline label text ───────────────────────────────────────────── */
+
+  :host([underline]) .label {
+    text-decoration: underline;
+  }
+
+  /* ── Icon wrapper ───────────────────────────────────────────────────── */
+
+  .icon {
+    display: contents;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */
+
+  .label--hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${styles.getReducedMotionStyle('.root')}
+`;
+
+const DiwaLinkPure = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Per-component theme override (light / dark). */
+        this.theme = "dark";
+        /** Target attribute — where to open the linked URL. */
+        this.target = "_self";
+        /**
+         * Lucide icon name (kebab-case, e.g. "arrow-right"), or "none" to hide icon.
+         * Defaults to "arrow-right" — matching PDS p-link-pure.
+         */
+        this.icon = "arrow-right";
+        /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */
+        this.hideLabel = false;
+        /** Display the link in active/pressed visual state. */
+        this.active = false;
+        /** Shows an underline decoration on the label text. */
+        this.underline = false;
+        /** Text size tier — also scales the icon. */
+        this.size = "md";
+        /**
+         * Controls label position relative to the icon.
+         * "end" (default): [icon] [label]
+         * "start":         [label] [icon]
+         */
+        this.alignLabel = "end";
+        /** Stretches the link to fill its container width. */
+        this.stretch = false;
+    }
+    render() {
+        var _a;
+        const isAnchor = !!this.href;
+        const Tag = isAnchor ? "a" : "span";
+        const hasIcon = this.icon !== "none";
+        const iconSize = this.size === "sm" ? 14 : this.size === "lg" ? 20 : 16;
+        const anchorProps = isAnchor
+            ? Object.assign({ href: this.href, target: this.target, download: this.download, rel: (_a = this.rel) !== null && _a !== void 0 ? _a : (this.target === "_blank" ? "noopener noreferrer" : undefined) }, (this.label ? { "aria-label": this.label } : {})) : {};
+        return (index.h(index.Host, { key: '761192365523187da4022afc17ddcd42eacd6fd1', "data-theme": this.theme }, index.h("style", { key: 'dcaf58e09c4bf9e728acc480748650235d005fb9', innerHTML: getComponentCss() }), index.h(Tag, Object.assign({ key: '9669b20ef6fcd90c86244205b9b1dd7c59f6143c', class: "root" }, anchorProps, { part: "base" }), hasIcon && (index.h("span", { key: '11a2c4828484693962c83ea800ec5ab17b6f1c77', class: "icon", "aria-hidden": "true" }, index.h("diwa-icon", { key: 'ce1521f41513d709c51292db263c6e8252ea91a5', name: this.icon, size: iconSize }))), index.h("span", { key: '61d7962e751fdd6e84630fe27d5f4fb1ed1c2de0', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, index.h("slot", { key: 'd585bfadb227cf240719d2958a3b6a52a1429410' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_link_pure = DiwaLinkPure;
+
+//# sourceMappingURL=diwa-link-pure.cjs.entry.js.map

package/dist/cjs/diwa-link-pure.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-link-pure.entry.cjs.js","mappings":";;;;;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DzCA,oBAAa,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoEtBC,4BAAqB,CAAC,OAAO,CAAC;CACjC;;MC3GY,YAAY;IAJzB;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAMvC,WAAM,GAAe,OAAO,CAAC;;;;;QAY7B,SAAI,GAAW,aAAa,CAAC;;QAGZ,cAAS,GAAY,KAAK,CAAC;;QAG3B,WAAM,GAAY,KAAK,CAAC;;QAGxB,cAAS,GAAY,KAAK,CAAC;;QAG3B,SAAI,GAAiB,IAAI,CAAC;;;;;;QAO1B,eAAU,GAAuB,KAAK,CAAC;;QAGvC,YAAO,GAAY,KAAK,CAAC;KA0CnD;IArCC,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,GAAI,GAAW,GAAI,MAAc,CAAC;QACtD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;QAExE,MAAM,WAAW,GAAG,QAAQ;8BAEtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EACD,MAAA,IAAI,CAAC,GAAG,oCACP,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,KAC5D,IAAI,CAAC,KAAK,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAEpD,EAAE,CAAC;QAEP,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,QAAC,GAAG,mEAAC,KAAK,EAAC,MAAM,IAAK,WAAW,IAAE,IAAI,EAAC,MAAM,KAC3C,OAAO,KACNA,mEAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,IACnCA,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACR,EACDA,mEACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvD,IAAI,EAAC,OAAO,IAEZA,oEAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-link-pure/diwa-link-pure-styles.ts","src/components/diwa-link-pure/diwa-link-pure.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* Stretch: fill the parent's inline axis */\n  :host([stretch]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* ── Root element (<a> or <span>) ───────────────────────────────────── */\n\n  .root {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-2);\n    flex-direction: row; /* overridden by alignLabel=start below */\n\n    background: transparent;\n    border: none;\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\n    margin: 0;\n    cursor: pointer;\n\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-regular);\n    line-height: 1;\n    color: var(--diwa-text-primary);\n    text-decoration: none;\n    white-space: nowrap;\n\n    -webkit-appearance: none;\n    appearance: none;\n    -webkit-font-smoothing: antialiased;\n\n    border-radius: var(--diwa-radius-sm);\n  }\n\n  /* Stretch: push icon and label to opposite edges */\n  :host([stretch]) .root {\n    width: 100%;\n    justify-content: space-between;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.root')}\n\n  /* ── Size ───────────────────────────────────────────────────────────── */\n\n  :host([size=\"sm\"]) .root {\n    font-size: var(--diwa-font-size-sm);\n  }\n\n  :host([size=\"lg\"]) .root {\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── Hover ──────────────────────────────────────────────────────────── */\n\n  .root:hover {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\n\n  :host([active]) .root,\n  .root:active {\n    background-color: var(--diwa-bg-active);\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── Visited — prevent browser default purple ───────────────────────── */\n\n  .root:visited {\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── alignLabel: start → label on left, icon on right ──────────────── */\n\n  :host([align-label=\"start\"]) .root {\n    flex-direction: row-reverse;\n  }\n\n  /* ── Underline label text ───────────────────────────────────────────── */\n\n  :host([underline]) .label {\n    text-decoration: underline;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: contents;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.root')}\n`;","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkPureSize, LinkPureAlignLabel, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-pure-styles\";\n\n/**\n * @component diwa-link-pure\n *\n * A minimal, text+icon link — no background or border. Mirrors PDS p-link-pure.\n * Renders as <a> when href is set, otherwise as a non-interactive <span>.\n *\n * Usage:\n *   <diwa-link-pure href=\"/more\">Read more</diwa-link-pure>\n *   <diwa-link-pure href=\"/back\" icon=\"arrow-left\" align-label=\"start\">Back</diwa-link-pure>\n *   <diwa-link-pure href=\"/close\" hide-label label=\"Close\" icon=\"x\" />\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link-pure\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLinkPure {\n  @Element() host!: HTMLDiwaLinkPureElement;\n\n  /** Per-component theme override (light / dark). */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\n\n  /** The URL the link points to. When set, renders as <a>. */\n  @Prop() href?: string;\n\n  /** Target attribute — where to open the linked URL. */\n  @Prop() target: LinkTarget = \"_self\";\n\n  /** Native download attribute for triggering file downloads. */\n  @Prop() download?: string;\n\n  /** Relationship between the current document and the linked resource. */\n  @Prop() rel?: string;\n\n  /**\n   * Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide icon.\n   * Defaults to \"arrow-right\" — matching PDS p-link-pure.\n   */\n  @Prop() icon: string = \"arrow-right\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Display the link in active/pressed visual state. */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Shows an underline decoration on the label text. */\n  @Prop({ reflect: true }) underline: boolean = false;\n\n  /** Text size tier — also scales the icon. */\n  @Prop({ reflect: true }) size: LinkPureSize = \"md\";\n\n  /**\n   * Controls label position relative to the icon.\n   * \"end\" (default): [icon] [label]\n   * \"start\":         [label] [icon]\n   */\n  @Prop({ reflect: true }) alignLabel: LinkPureAlignLabel = \"end\";\n\n  /** Stretches the link to fill its container width. */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\n\n  render() {\n    const isAnchor = !!this.href;\n    const Tag = isAnchor ? (\"a\" as any) : (\"span\" as any);\n    const hasIcon = this.icon !== \"none\";\n    const iconSize = this.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\n\n    const anchorProps = isAnchor\n      ? {\n          href: this.href,\n          target: this.target,\n          download: this.download,\n          rel:\n            this.rel ??\n            (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          ...(this.label ? { \"aria-label\": this.label } : {}),\n        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"root\" {...anchorProps} part=\"base\">\n          {hasIcon && (\n            <span class=\"icon\" aria-hidden=\"true\">\n              <diwa-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          <span\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\n            part=\"label\"\n          >\n            <slot />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}"],"version":3}