@diwacopilot/components 1.0.0

package/dist/esm/diwa-textarea.entry.js

@@ -0,0 +1,154 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3fa02c74.js';
+import { a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+
+const getComponentCss = (state, disabled, readOnly, resize, compact) => {
+    const borderColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-input-border, var(--diwa-border))';
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    return `
+    :host {
+      display: block;
+      font-family: var(--diwa-font-family-base);
+      outline: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .root {
+      display: flex;
+      flex-direction: column;
+      gap: var(--diwa-space-2);
+    }
+    .label-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--diwa-space-1);
+    }
+    .label {
+      display: block;
+      font-size: var(--diwa-font-size-sm);
+      font-weight: var(--diwa-font-weight-semibold);
+      color: var(--diwa-text-secondary);
+      line-height: var(--diwa-line-height-normal);
+    }
+    .required {
+      color: var(--diwa-notification-error);
+      font-weight: var(--diwa-font-weight-semibold);
+    }
+    .textarea-wrapper {
+      position: relative;
+      display: flex;
+      background: var(--diwa-input-bg, var(--diwa-bg-input));
+      border: var(--diwa-border-width-thin) solid ${borderColor};
+      border-radius: var(--diwa-input-radius, var(--diwa-radius-md));
+      box-sizing: border-box;
+      transition: border-color var(--diwa-transition-base);
+      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}
+    }
+    .textarea-wrapper:not(:has(textarea:disabled)):not(:has(textarea[readonly])):hover {
+      border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};
+    }
+    .textarea-wrapper:focus-within {
+      border-color: var(--diwa-border-focus);
+    }
+    ${readOnly ? `.textarea-wrapper { background: var(--diwa-bg-surface); border-style: dashed; }` : ''}
+    .ta {
+      width: 100%;
+      min-height: ${compact ? '64px' : '96px'};
+      padding: ${compact ? '6px 10px' : '10px 12px'};
+      background: transparent;
+      border: none;
+      outline: none;
+      font-family: var(--diwa-font-family-base);
+      font-size: ${compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-base)'};
+      color: var(--diwa-text-primary);
+      resize: ${resize};
+      box-sizing: border-box;
+    }
+    .ta::placeholder {
+      color: var(--diwa-text-muted);
+    }
+    .description {
+      font-size: var(--diwa-font-size-sm);
+      color: var(--diwa-text-secondary);
+      line-height: var(--diwa-line-height-normal);
+      margin: 0;
+    }
+    .message {
+      font-size: var(--diwa-font-size-sm);
+      color: ${messageColor};
+      line-height: var(--diwa-line-height-normal);
+      margin: 0;
+    }
+
+    ${getReducedMotionStyle('.textarea-wrapper')}
+  `;
+};
+
+const DiwaTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.input = createEvent(this, "input", 7);
+        this.change = createEvent(this, "change", 7);
+        this.blur = createEvent(this, "blur", 1);
+        /** 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 delegatesFocus() { return true; }
+};
+
+export { DiwaTextarea as diwa_textarea };
+
+//# sourceMappingURL=diwa-textarea.entry.js.map

package/dist/esm/diwa-textarea.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-textarea/diwa-textarea-styles.ts","src/components/diwa-textarea/diwa-textarea.tsx"],"sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport type { TextareaResize } from './types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport type { TextareaResize } from './types';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  readOnly: boolean,\r\n  resize: TextareaResize,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n    :host {\r\n      display: block;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      display: block;\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n    }\r\n    .textarea-wrapper {\r\n      position: relative;\r\n      display: flex;\r\n      background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n      box-sizing: border-box;\r\n      transition: border-color var(--diwa-transition-base);\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .textarea-wrapper:not(:has(textarea:disabled)):not(:has(textarea[readonly])):hover {\r\n      border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};\r\n    }\r\n    .textarea-wrapper:focus-within {\r\n      border-color: var(--diwa-border-focus);\r\n    }\r\n    ${readOnly ? `.textarea-wrapper { background: var(--diwa-bg-surface); border-style: dashed; }` : ''}\r\n    .ta {\r\n      width: 100%;\r\n      min-height: ${compact ? '64px' : '96px'};\r\n      padding: ${compact ? '6px 10px' : '10px 12px'};\r\n      background: transparent;\r\n      border: none;\r\n      outline: none;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-base)'};\r\n      color: var(--diwa-text-primary);\r\n      resize: ${resize};\r\n      box-sizing: border-box;\r\n    }\r\n    .ta::placeholder {\r\n      color: var(--diwa-text-muted);\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.textarea-wrapper')}\r\n  `;\r\n};\r\n","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"],"version":3}

package/dist/esm/diwa-toast-item.entry.js

@@ -0,0 +1,121 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3fa02c74.js';
+import { b as getHoverCapableStyle, g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+
+const getComponentCss = (state) => {
+    const stateColor = state === 'success'
+        ? 'var(--diwa-notification-success)'
+        : state === 'error'
+            ? 'var(--diwa-notification-error)'
+            : state === 'warning'
+                ? 'var(--diwa-notification-warning)'
+                : state === 'info'
+                    ? 'var(--diwa-notification-info)'
+                    : 'var(--diwa-text-secondary)';
+    const stateBg = state === 'success'
+        ? 'var(--diwa-notification-success-soft)'
+        : state === 'error'
+            ? 'var(--diwa-notification-error-soft)'
+            : state === 'warning'
+                ? 'var(--diwa-notification-warning-soft)'
+                : state === 'info'
+                    ? 'var(--diwa-notification-info-soft)'
+                    : 'var(--diwa-bg-elevated)';
+    return `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    pointer-events: all;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-3);
+    min-width: var(--diwa-toast-min-width);
+    max-width: var(--diwa-toast-max-width);
+    padding: var(--diwa-space-4);
+    border-radius: var(--diwa-radius-md);
+    background: ${stateBg};
+    border: var(--diwa-border-width-thin) solid ${stateColor};
+    box-shadow: var(--diwa-shadow-md);
+    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);
+  }
+
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  .icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    color: ${stateColor};
+  }
+
+  .text {
+    flex: 1;
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-primary);
+    line-height: 1.5;
+  }
+
+  .close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--diwa-touch-target-min-size, 44px);
+    height: var(--diwa-touch-target-min-size, 44px);
+    border: none;
+    background: transparent;
+    color: var(--diwa-text-secondary);
+    cursor: pointer;
+    border-radius: var(--diwa-radius-sm);
+    padding: 0;
+    transition: color var(--diwa-transition-base);
+  }
+
+  ${getHoverCapableStyle('.close', 'color: var(--diwa-text-primary);')}
+
+  ${getFocusStyle('.close')}
+
+  ${getReducedMotionStyle('.toast', '.close')}
+  `;
+};
+
+const STATE_ICONS = {
+    neutral: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6.5"/><line x1="8" y1="5" x2="8" y2="8.5"/><circle cx="8" cy="11" r="0.75" fill="currentColor" stroke="none"/></svg>`,
+    info: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6.5"/><line x1="8" y1="5" x2="8" y2="8.5"/><circle cx="8" cy="11" r="0.75" fill="currentColor" stroke="none"/></svg>`,
+    success: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><polyline points="5,8 7,10 11,6"/></svg>`,
+    warning: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M8 2.5L14 13H2L8 2.5Z"/><line x1="8" y1="6.5" x2="8" y2="9.5"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor" stroke="none"/></svg>`,
+    error: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6.5"/><line x1="5.5" y1="5.5" x2="10.5" y2="10.5"/><line x1="10.5" y1="5.5" x2="5.5" y2="10.5"/></svg>`,
+};
+const CLOSE_ICON = `<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>`;
+const DiwaToastItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dismiss = createEvent(this, "dismiss", 1);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Message text to display. */
+        this.text = '';
+        /** Visual state affecting icon and colour. */
+        this.state = 'neutral';
+        this.handleClose = () => {
+            this.dismiss.emit();
+        };
+    }
+    render() {
+        return (h(Host, { key: '5ca70d89e0dcf38887c4911ba4a7d4c4687f6e9a', "data-theme": this.theme }, h("style", { key: 'b77d3924036bea1e8613e429ef9095092b8aede4', innerHTML: getComponentCss(this.state) }), h("div", { key: '6ce3268afcb611334446b86b1a1d24aaba56d97f', class: "toast" }, h("span", { key: 'b52ea94a3bce267374add9e7672d475e5011cdcf', class: "icon", "aria-hidden": "true", innerHTML: STATE_ICONS[this.state] }), h("span", { key: '6d6c2bfe94a296d8e9cef85a52dd2fe875dc6e82', class: "text" }, this.text), h("button", { key: '9666a6fc76813134644e8fdd3a0cfbb273025eb8', type: "button", class: "close", "aria-label": "Dismiss notification", onClick: this.handleClose, innerHTML: CLOSE_ICON }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+
+export { DiwaToastItem as diwa_toast_item };
+
+//# sourceMappingURL=diwa-toast-item.entry.js.map

package/dist/esm/diwa-toast-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-toast-item.entry.js","mappings":";;;AAGO,MAAM,eAAe,GAAG,CAAC,KAAiB;IAC/C,MAAM,UAAU,GACd,KAAK,KAAK,SAAS;UACf,kCAAkC;UAClC,KAAK,KAAK,OAAO;cACf,gCAAgC;cAChC,KAAK,KAAK,SAAS;kBACjB,kCAAkC;kBAClC,KAAK,KAAK,MAAM;sBACd,+BAA+B;sBAC/B,4BAA4B,CAAC;IAEzC,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;UACf,uCAAuC;UACvC,KAAK,KAAK,OAAO;cACf,qCAAqC;cACrC,KAAK,KAAK,SAAS;kBACjB,uCAAuC;kBACvC,KAAK,KAAK,MAAM;sBACd,oCAAoC;sBACpC,yBAAyB,CAAC;IAEtC,OAAO;;;;;;;;;;;;;;;;;;;kBAmBS,OAAO;kDACyB,UAAU;;;;;;;;;;;;;;aAc/C,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BnB,oBAAoB,CAAC,QAAQ,EAAE,kCAAkC,CAAC;;IAElE,aAAa,CAAC,QAAQ,CAAC;;IAEvB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC;GAC1C,CAAC;AACJ,CAAC;;ACvFD,MAAM,WAAW,GAA+B;IAC9C,OAAO,EAAE,2QAA2Q;IACpR,IAAI,EAAE,2QAA2Q;IACjR,OAAO,EAAE,6NAA6N;IACtO,OAAO,EAAE,iRAAiR;IAC1R,KAAK,EAAE,6PAA6P;CACrQ,CAAC;AAEF,MAAM,UAAU,GAAG,8MAA8M,CAAC;MAYrN,aAAa;IAJ1B;;;;QAM2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,SAAI,GAAW,EAAE,CAAC;;QAGD,UAAK,GAAe,SAAS,CAAC;QAQ/C,gBAAW,GAAG;YACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAoBH;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EACjD,4DAAK,KAAK,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EAC5E,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,EACrC,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,gBACF,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,UAAU,GACrB,CACE,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-toast-item/diwa-toast-item-styles.ts","src/components/diwa-toast-item/diwa-toast-item.tsx"],"sourcesContent":["import type { ToastState } from './types';\r\nimport { getFocusStyle, getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (state: ToastState): string => {\r\n  const stateColor =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info)'\r\n            : 'var(--diwa-text-secondary)';\r\n\r\n  const stateBg =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success-soft)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error-soft)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning-soft)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info-soft)'\r\n            : 'var(--diwa-bg-elevated)';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    pointer-events: all;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .toast {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    min-width: var(--diwa-toast-min-width);\r\n    max-width: var(--diwa-toast-max-width);\r\n    padding: var(--diwa-space-4);\r\n    border-radius: var(--diwa-radius-md);\r\n    background: ${stateBg};\r\n    border: var(--diwa-border-width-thin) solid ${stateColor};\r\n    box-shadow: var(--diwa-shadow-md);\r\n    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  @keyframes slideIn {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .icon {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    color: ${stateColor};\r\n  }\r\n\r\n  .text {\r\n    flex: 1;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .close {\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    border: none;\r\n    background: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    cursor: pointer;\r\n    border-radius: var(--diwa-radius-sm);\r\n    padding: 0;\r\n    transition: color var(--diwa-transition-base);\n  }\n\n  ${getHoverCapableStyle('.close', 'color: var(--diwa-text-primary);')}\n\r\n  ${getFocusStyle('.close')}\r\n\r\n  ${getReducedMotionStyle('.toast', '.close')}\n  `;\n};\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { ToastState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-toast-item-styles';\r\n\r\nconst STATE_ICONS: Record<ToastState, string> = {\r\n  neutral: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  info: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  success: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><polyline points=\"5,8 7,10 11,6\"/></svg>`,\r\n  warning: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M8 2.5L14 13H2L8 2.5Z\"/><line x1=\"8\" y1=\"6.5\" x2=\"8\" y2=\"9.5\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  error: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"5.5\" y1=\"5.5\" x2=\"10.5\" y2=\"10.5\"/><line x1=\"10.5\" y1=\"5.5\" x2=\"5.5\" y2=\"10.5\"/></svg>`,\r\n};\r\n\r\nconst CLOSE_ICON = `<svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\"/></svg>`;\r\n\r\n/**\r\n * @component diwa-toast-item\r\n *\r\n * Renders a single toast notification. Managed by `diwa-toast` — do not\r\n * use this component directly; use `diwa-toast.addMessage()` instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-toast-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaToastItem {\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Message text to display. */\r\n  @Prop() text: string = '';\r\n\r\n  /** Visual state affecting icon and colour. */\r\n  @Prop({ reflect: true }) state: ToastState = 'neutral';\r\n\r\n  /**\r\n   * Emitted when the user dismisses the toast or the auto-dismiss timer fires.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  private handleClose = () => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n        <div class=\"toast\">\r\n          <span class=\"icon\" aria-hidden=\"true\" innerHTML={STATE_ICONS[this.state]} />\r\n          <span class=\"text\">{this.text}</span>\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            aria-label=\"Dismiss notification\"\r\n            onClick={this.handleClose}\r\n            innerHTML={CLOSE_ICON}\r\n          />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-toast.entry.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3fa02c74.js';
+
+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;
+    }
+  }
+`;
+
+const DiwaToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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) }));
+        })));
+    }
+    get host() { return getElement(this); }
+};
+
+export { DiwaToast as diwa_toast };
+
+//# sourceMappingURL=diwa-toast.entry.js.map

package/dist/esm/diwa-toast.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-toast.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5C;;MCPY,SAAS;IAJtB;;QAO2B,UAAK,GAAU,MAAM,CAAC;QAEtC,aAAQ,GAAyC,EAAE,CAAC;QAErD,WAAM,GAAG,CAAC,CAAC;KAmCpB;;;;IA7BC,MAAM,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;YAChB,UAAU,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;SACpD;KACF;IAEO,aAAa,CAAC,EAAU;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;KAC1D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,iBAAa,OAAO,gBAAa,IAAI,CAAC,KAAK,IAC/E,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACtC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG;;YAAK,QAC1B,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,MAAM,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,GAC3C,EACH;SAAA,CAAC,CACG,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-toast/diwa-toast-styles.ts","src/components/diwa-toast/diwa-toast.tsx"],"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","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"],"version":3}