@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-input-url.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getInputCss } from './p-35c7c864.js';
+
+const DiwaInputUrl$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInputUrl extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        this.input = createEvent(this, "input", 7);
+        this.blur = createEvent(this, "blur", 3);
+        this.focus = createEvent(this, "focus", 3);
+        this._hasStart = false;
+        this._hasEnd = false;
+        this.label = '';
+        this.description = '';
+        this.message = '';
+        this.state = 'none';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.hideLabel = false;
+        this.compact = false;
+        this.theme = 'dark';
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.input.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            this.value = e.target.value;
+            this.change.emit(this.value);
+        };
+        this.handleBlur = (e) => { this.blur.emit(e); };
+        this.handleFocus = (e) => { this.focus.emit(e); };
+    }
+    connectedCallback() {
+        this._hasStart = !!this.el.querySelector('[slot="start"]');
+        this._hasEnd = !!this.el.querySelector('[slot="end"]');
+    }
+    render() {
+        const inputId = 'input';
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: 'a65beb62cdb31c1aabe439f9b8f6f2dc6966380b', "data-theme": this.theme }, h("style", { key: 'ff59c6e404d17c7676ce59133a4560a217c65114', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: 'd1ebf45cf487eb3d49d61d591f59500a12d92731', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'd7bc5c83a4c307e73fac55332f56c7cf17dd32fd', class: "label-row" }, h("label", { key: '714e2799d06afffb41ac6ac10680d16cf67d4a52', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: 'f06a988f6b0afdf34825994c43e4b9b4cb9b2010', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: 'b916cfcfc7e064704b1e8643fe758b0f78f2b73d', name: "label-after" }))), h("div", { key: '51af50d3630a0f48eb111df4493d1787ff618534', class: "input-wrapper" }, this._hasStart && h("div", { key: '571d43f905d552089338b5066f7c20d28bd6a2d5', class: "slot-start" }, h("slot", { key: 'f8dfa7cc9fe16dca29d122c655371e17faad8a09', name: "start" })), h("input", { key: 'cb5abcccfe70433832fabc2094b071d781b592fc', id: inputId, class: "input", type: "url", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus }), this._hasEnd && h("div", { key: '21b3380362ba71f8ec69b884450c3dc609a10f70', class: "slot-end" }, h("slot", { key: 'bdab4ba41c29734be286db913292eaf6a859d48c', name: "end" }))), !this.message && this.description && (h("p", { key: '60f3d1857a4a7f2f553ecd322727ddc822c52d0b', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'b4fedae59dade9ed51363d0e124a61e71b45f923', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+}, [17, "diwa-input-url", {
+        "label": [1],
+        "description": [1],
+        "message": [1],
+        "state": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [516],
+        "readonly": [516],
+        "hideLabel": [4, "hide-label"],
+        "compact": [4],
+        "autoComplete": [1, "auto-complete"],
+        "theme": [1],
+        "_hasStart": [32],
+        "_hasEnd": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input-url"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input-url":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInputUrl$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInputUrl = DiwaInputUrl$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInputUrl, defineCustomElement };
+
+//# sourceMappingURL=diwa-input-url.js.map

package/dist-custom-elements/diwa-input-url.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-url.js","mappings":"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","names":["DiwaInputUrl","getComponentCss"],"sources":["src/components/diwa-input-url/diwa-input-url.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-url-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-url',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputUrl {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"url\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-week.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputWeek extends Components.DiwaInputWeek, HTMLElement {}
+export const DiwaInputWeek: {
+    prototype: DiwaInputWeek;
+    new (): DiwaInputWeek;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-input-week.js

@@ -0,0 +1,91 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getInputCss } from './p-35c7c864.js';
+
+const DiwaInputWeek$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInputWeek extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        this.input = createEvent(this, "input", 7);
+        this.blur = createEvent(this, "blur", 3);
+        this.focus = createEvent(this, "focus", 3);
+        this._hasStart = false;
+        this._hasEnd = false;
+        this.label = '';
+        this.description = '';
+        this.message = '';
+        this.state = 'none';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.hideLabel = false;
+        this.compact = false;
+        this.theme = 'dark';
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.input.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            this.value = e.target.value;
+            this.change.emit(this.value);
+        };
+        this.handleBlur = (e) => { this.blur.emit(e); };
+        this.handleFocus = (e) => { this.focus.emit(e); };
+    }
+    connectedCallback() {
+        this._hasStart = !!this.el.querySelector('[slot="start"]');
+        this._hasEnd = !!this.el.querySelector('[slot="end"]');
+    }
+    render() {
+        const inputId = 'input';
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: '4cc5cc85ed8fa8c773fe7ad750e673a0ff389777', "data-theme": this.theme }, h("style", { key: 'b0fc511131f99c953540dc5a4dcd92dc5cb91a1b', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: '38afefa33e9182fc1b351bb0ce9add0a894a9fc9', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '9d04a0e49c5d6d8feef7e07ea0ad2ce5c8b8af1f', class: "label-row" }, h("label", { key: 'efa91862e70ee8243ec263081b8bd69921bf0abb', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: 'a0d6c9a259482afe4a32e0694e40303099575c55', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '765b374e9621bb3a293ddd06c101cb768b34fdcf', name: "label-after" }))), h("div", { key: '0502e169ef872e6a9d1c3701d63d58134d4fd8e9', class: "input-wrapper" }, this._hasStart && h("div", { key: '0d84de18ab5090b6cebad6bdbc386454a27595f2', class: "slot-start" }, h("slot", { key: '33cae6bc089ac29d8061637eca7cac6765f28588', name: "start" })), h("input", { key: '386306bf52e25ef77f18d1c2536292308ddad8ad', id: inputId, class: "input", type: "week", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, autocomplete: this.autoComplete, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus }), this._hasEnd && h("div", { key: '5dd8446e2aef07d0c4a6fd573fc72a36791fde9d', class: "slot-end" }, h("slot", { key: 'c7576d8d1fa8b964d6dc1890deef7f896787cfe5', name: "end" }))), !this.message && this.description && (h("p", { key: '512432dd6a79d71b6a7739bd1680fb7dd3f7fbdf', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'af74243593034242f83cc8c745bbb5223daca0da', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+}, [17, "diwa-input-week", {
+        "label": [1],
+        "description": [1],
+        "message": [1],
+        "state": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [516],
+        "readonly": [516],
+        "hideLabel": [4, "hide-label"],
+        "compact": [4],
+        "autoComplete": [1, "auto-complete"],
+        "theme": [1],
+        "min": [1],
+        "max": [1],
+        "_hasStart": [32],
+        "_hasEnd": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input-week"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input-week":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInputWeek$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInputWeek = DiwaInputWeek$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInputWeek, defineCustomElement };
+
+//# sourceMappingURL=diwa-input-week.js.map

package/dist-custom-elements/diwa-input-week.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-week.js","mappings":"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","names":["DiwaInputWeek","getComponentCss"],"sources":["src/components/diwa-input-week/diwa-input-week.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-week-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-week',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputWeek {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Minimum week in YYYY-Www format (e.g. 2024-W01). */\r\n  @Prop() min?: string;\r\n  /** Maximum week in YYYY-Www format (e.g. 2024-W52). */\r\n  @Prop() max?: string;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"week\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              min={this.min}\r\n              max={this.max}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInput extends Components.DiwaInput, HTMLElement {}
+export const DiwaInput: {
+    prototype: DiwaInput;
+    new (): DiwaInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-input.js

@@ -0,0 +1,268 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { a as getReducedMotionStyle } from './p-70bbb21a.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);
+  }
+
+  ${getReducedMotionStyle('.wrapper')}
+`;
+
+/** Module-level counter — guarantees unique IDs across all DiwaInput instances. */
+let inputIdCounter = 0;
+const DiwaInput$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.diwaInput = createEvent(this, "diwaInput", 7);
+        this.diwaChange = createEvent(this, "diwaChange", 7);
+        this.diwaFocus = createEvent(this, "diwaFocus", 7);
+        this.diwaBlur = 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 (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 delegatesFocus() { return true; }
+}, [17, "diwa-input", {
+        "type": [1],
+        "label": [1],
+        "placeholder": [1],
+        "value": [1025],
+        "required": [4],
+        "disabled": [516],
+        "readonly": [516],
+        "state": [513],
+        "hint": [1],
+        "autocomplete": [1],
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "theme": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInput$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInput = DiwaInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInput, defineCustomElement };
+
+//# sourceMappingURL=diwa-input.js.map

package/dist-custom-elements/diwa-input.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input.js","mappings":"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","names":["DiwaInput"],"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-custom-elements/diwa-link-pure.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaLinkPure extends Components.DiwaLinkPure, HTMLElement {}
+export const DiwaLinkPure: {
+    prototype: DiwaLinkPure;
+    new (): DiwaLinkPure;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;