@diwacopilot/components 1.0.0

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

@@ -0,0 +1,475 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-textarea-styles";
+/**
+ * @slot label-after — Content placed after the label (e.g. a diwa-popover).
+ *
+ * @controlled {"props": ["value"], "event": "input"}
+ */
+export class DiwaTextarea {
+    constructor() {
+        /** Visible label text. */
+        this.label = '';
+        /** Supplementary description shown below the label. */
+        this.description = '';
+        /** Validation state affecting border colour and message colour. */
+        this.state = 'none';
+        /** Feedback message shown when state is "error" or "success". */
+        this.message = '';
+        /** The name attribute forwarded to the native textarea. */
+        this.name = '';
+        /** Current value. Update in response to the input event. */
+        this.value = '';
+        /** Placeholder text shown when the textarea is empty. */
+        this.placeholder = '';
+        /** Whether the textarea is required. */
+        this.required = false;
+        /** Whether the textarea is disabled. */
+        this.disabled = false;
+        /** Whether the textarea is read-only. */
+        this.readOnly = false;
+        /** Number of visible text rows. */
+        this.rows = 4;
+        /** Controls which dimensions can be resized by the user. */
+        this.resize = 'vertical';
+        /** Renders a compact version with reduced padding and font size. */
+        this.compact = false;
+        /** Hides the label visually (label is still in the DOM for screen readers). */
+        this.hideLabel = false;
+        /** Adapts the color when used on a light or dark background. */
+        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);
+        };
+    }
+    render() {
+        const taId = 'textarea';
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: 'd4f47cf2f3be23a0df6c1f2dc24c8f11647fadc4', "data-theme": this.theme }, h("style", { key: '66ab29c8d8633795ed2fbc8403486496c36a356d', innerHTML: getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact) }), h("div", { key: '5a28099aa65e5b3b4588007479203360949c2dcf', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'a292c7d30962fc7db056cf9dca05552196b4532d', class: "label-row" }, h("label", { key: '38a4700dc55d557ef437efe0e54c0121bb0f172c', class: "label", htmlFor: taId }, this.label, this.required && h("span", { key: '8bef937a0727b2c51dabe30b9b74927053f7840f', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '36169954033c2e1abcba95ccb445f7cb9f6460c0', name: "label-after" }))), h("div", { key: '05de702c20d30ff01af79245daf06e72bc013025', class: "textarea-wrapper" }, h("textarea", { key: 'ac18d6a3a4b2d724f1bd78f16e17f72dccc751f7', class: "ta", id: taId, name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readOnly, rows: this.rows, maxLength: this.maxLength, minLength: this.minLength, "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 })), !this.message && this.description && (h("p", { key: '973b18b1bafa587c7d98684d73a80e8357434c0e', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'dc389f318bfc3e674e1cb4c8ca6d8e2ffe348480', id: msgId, class: "message" }, this.message)))));
+    }
+    static get is() { return "diwa-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supplementary description shown below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputFieldState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "InputFieldState": {
+                            "location": "import",
+                            "path": "../diwa-input/types",
+                            "id": "src/components/diwa-input/types.ts::InputFieldState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state affecting border colour and message colour."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Feedback message shown when state is \"error\" or \"success\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name attribute forwarded to the native textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value. Update in response to the input event."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when the textarea is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is required."
+                },
+                "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": "Whether the textarea is disabled."
+                },
+                "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": "Whether the textarea is read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "read-only",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum character length."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-length",
+                "reflect": false
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible text rows."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextareaResize",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "TextareaResize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-textarea/types.ts::TextareaResize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls which dimensions can be resized by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "resize",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a compact version with reduced padding and font size."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually (label is still in the DOM for screen readers)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "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": "Adapts the color when used on a light or dark background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "input",
+                "name": "input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke. Detail contains the current value string."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea loses focus after value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "blur",
+                "name": "blur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=diwa-textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-textarea.js","sourceRoot":"","sources":["../../../src/components/diwa-textarea/diwa-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TextareaResize } from './types';\r\nimport { getComponentCss } from './diwa-textarea-styles';\r\n\r\n/**\r\n * @slot label-after — Content placed after the label (e.g. a diwa-popover).\r\n *\r\n * @controlled {\"props\": [\"value\"], \"event\": \"input\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-textarea',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaTextarea {\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description shown below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state affecting border colour and message colour. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message shown when state is \"error\" or \"success\". */\r\n  @Prop() message: string = '';\r\n\r\n  /** The name attribute forwarded to the native textarea. */\r\n  @Prop() name: string = '';\r\n\r\n  /** Current value. Update in response to the input event. */\r\n  @Prop({ mutable: true }) value: string = '';\r\n\r\n  /** Placeholder text shown when the textarea is empty. */\r\n  @Prop() placeholder: string = '';\r\n\r\n  /** Whether the textarea is required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Whether the textarea is disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Whether the textarea is read-only. */\r\n  @Prop({ reflect: true }) readOnly: boolean = false;\r\n\r\n  /** Maximum character length. */\r\n  @Prop() maxLength?: number;\r\n\r\n  /** Minimum character length. */\r\n  @Prop() minLength?: number;\r\n\r\n  /** Number of visible text rows. */\r\n  @Prop() rows: number = 4;\r\n\r\n  /** Controls which dimensions can be resized by the user. */\r\n  @Prop() resize: TextareaResize = 'vertical';\r\n\r\n  /** Renders a compact version with reduced padding and font size. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the label visually (label is still in the DOM for screen readers). */\r\n  @Prop() hideLabel: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted on every keystroke. Detail contains the current value string. */\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n\r\n  /** Emitted when the textarea loses focus after value changes. */\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n\r\n  /** Emitted when the textarea loses focus. */\r\n  @Event({ bubbles: false, composed: false }) blur!: EventEmitter<FocusEvent>;\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLTextAreaElement).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 HTMLTextAreaElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => {\r\n    this.blur.emit(e);\r\n  };\r\n\r\n  render() {\r\n    const taId = 'textarea';\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.resize, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={taId}>\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=\"textarea-wrapper\">\r\n            <textarea\r\n              class=\"ta\"\r\n              id={taId}\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              rows={this.rows}\r\n              maxLength={this.maxLength}\r\n              minLength={this.minLength}\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            />\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"]}

package/dist/collection/components/diwa-textarea/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-textarea/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-textarea/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-textarea — Public TypeScript types\r\n */\r\n\r\nexport type TextareaResize = 'none' | 'both' | 'vertical' | 'horizontal';\r\n"]}

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

@@ -0,0 +1,32 @@
+export const getComponentCss = () => `
+  :host {
+    position: fixed;
+    bottom: var(--diwa-space-6);
+    right: var(--diwa-space-6);
+    z-index: var(--diwa-z-toast);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--diwa-space-3);
+    pointer-events: none;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  ::slotted(*) {
+    pointer-events: all;
+  }
+
+  @media (max-width: 480px) {
+    :host {
+      left: var(--diwa-space-3);
+      right: var(--diwa-space-3);
+      bottom: var(--diwa-space-3);
+      align-items: stretch;
+    }
+  }
+`;
+//# sourceMappingURL=diwa-toast-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-toast-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-toast/diwa-toast-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5C,CAAC","sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\n    position: fixed;\n    bottom: var(--diwa-space-6);\n    right: var(--diwa-space-6);\n    z-index: var(--diwa-z-toast);\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: var(--diwa-space-3);\n    pointer-events: none;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  ::slotted(*) {\n    pointer-events: all;\n  }\n\n  @media (max-width: 480px) {\n    :host {\n      left: var(--diwa-space-3);\n      right: var(--diwa-space-3);\n      bottom: var(--diwa-space-3);\n      align-items: stretch;\n    }\n  }\n`;\n"]}

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

@@ -0,0 +1,113 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-toast-styles";
+/**
+ * @component diwa-toast
+ *
+ * Singleton container that queues and displays toast notifications.
+ * Call `addMessage()` to queue a new toast. The toast container positions
+ * itself fixed at the bottom-right of the viewport.
+ *
+ * Usage:
+ *   const toast = document.querySelector('diwa-toast');
+ *   toast.addMessage({ text: 'Saved!', state: 'success' });
+ *
+ * Or via the static helper:
+ *   DiwaToast.addMessage({ text: 'Error!', state: 'error' });
+ */
+export class DiwaToast {
+    constructor() {
+        this.theme = 'dark';
+        this.messages = [];
+        this.nextId = 0;
+    }
+    /**
+     * Adds a toast message to the queue.
+     */
+    async addMessage(message) {
+        var _a;
+        const id = this.nextId++;
+        this.messages = [...this.messages, Object.assign(Object.assign({}, message), { id })];
+        const duration = (_a = message.duration) !== null && _a !== void 0 ? _a : 5000;
+        if (duration > 0) {
+            setTimeout(() => this.removeMessage(id), duration);
+        }
+    }
+    removeMessage(id) {
+        this.messages = this.messages.filter((m) => m.id !== id);
+    }
+    render() {
+        return (h(Host, { key: '51dba2219ff8a36a154e7cc7d94760b039019244', role: "status", "aria-live": "polite", "aria-atomic": "false", "data-theme": this.theme }, h("style", { key: '21c673cb8e9b9fc1cb1b5f2bbdc5d017f4f5ae8c', innerHTML: getComponentCss() }), this.messages.map((msg) => {
+            var _a;
+            return (h("diwa-toast-item", { key: msg.id, text: msg.text, state: (_a = msg.state) !== null && _a !== void 0 ? _a : 'neutral', theme: this.theme, onDismiss: () => this.removeMessage(msg.id) }));
+        })));
+    }
+    static get is() { return "diwa-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "messages": {}
+        };
+    }
+    static get methods() {
+        return {
+            "addMessage": {
+                "complexType": {
+                    "signature": "(message: ToastMessage) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "ToastMessage",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ToastMessage": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-toast/types.ts::ToastMessage"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Adds a toast message to the queue.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-toast.js","sourceRoot":"","sources":["../../../src/components/diwa-toast/diwa-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;;;;;;;;;GAaG;AAKH,MAAM,OAAO,SAAS;IAJtB;QAO2B,UAAK,GAAU,MAAM,CAAC;QAEtC,aAAQ,GAAyC,EAAE,CAAC;QAErD,WAAM,GAAG,CAAC,CAAC;KAmCpB;IAjCC;;OAEG;IAEH,KAAK,CAAC,UAAU,CAAC,OAAqB;;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,kCAAO,OAAO,KAAE,EAAE,IAAG,CAAC;QACvD,MAAM,QAAQ,GAAG,MAAA,OAAO,CAAC,QAAQ,mCAAI,IAAI,CAAC;QAC1C,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,EAAU;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,iBAAa,OAAO,gBAAa,IAAI,CAAC,KAAK;YAC/E,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACtC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;;gBAAC,OAAA,CAC1B,uBACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,KAAK,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,SAAS,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,GAC3C,CACH,CAAA;aAAA,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Method, Prop, State, h } from '@stencil/core';\r\nimport type { ToastMessage } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-toast-styles';\r\n\r\n/**\r\n * @component diwa-toast\r\n *\r\n * Singleton container that queues and displays toast notifications.\r\n * Call `addMessage()` to queue a new toast. The toast container positions\r\n * itself fixed at the bottom-right of the viewport.\r\n *\r\n * Usage:\r\n *   const toast = document.querySelector('diwa-toast');\r\n *   toast.addMessage({ text: 'Saved!', state: 'success' });\r\n *\r\n * Or via the static helper:\r\n *   DiwaToast.addMessage({ text: 'Error!', state: 'error' });\r\n */\r\n@Component({\r\n  tag: 'diwa-toast',\r\n  shadow: true,\r\n})\r\nexport class DiwaToast {\r\n  @Element() host!: HTMLDiwaToastElement;\r\n\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  @State() messages: Array<ToastMessage & { id: number }> = [];\r\n\r\n  private nextId = 0;\r\n\r\n  /**\r\n   * Adds a toast message to the queue.\r\n   */\r\n  @Method()\r\n  async addMessage(message: ToastMessage): Promise<void> {\r\n    const id = this.nextId++;\r\n    this.messages = [...this.messages, { ...message, id }];\r\n    const duration = message.duration ?? 5000;\r\n    if (duration > 0) {\r\n      setTimeout(() => this.removeMessage(id), duration);\r\n    }\r\n  }\r\n\r\n  private removeMessage(id: number) {\r\n    this.messages = this.messages.filter((m) => m.id !== id);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"false\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        {this.messages.map((msg) => (\r\n          <diwa-toast-item\r\n            key={msg.id}\r\n            text={msg.text}\r\n            state={msg.state ?? 'neutral'}\r\n            theme={this.theme}\r\n            onDismiss={() => this.removeMessage(msg.id)}\r\n          />\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-toast/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map