@tessera-ui/core 0.4.0

package/dist/collection/components/textarea/textarea.stories.js

@@ -0,0 +1,130 @@
+// Hand-written stories for ts-textarea
+export default {
+    title: 'Components/Textarea',
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: 'text', description: 'The textarea value.' },
+        placeholder: { control: 'text', description: 'Placeholder text.' },
+        disabled: { control: 'boolean', description: 'Renders the textarea as disabled.' },
+        readonly: { control: 'boolean', description: 'Renders the textarea as readonly.' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The textarea size.',
+        },
+        label: { control: 'text', description: 'Label text displayed above the textarea.' },
+        helpText: { control: 'text', description: 'Help text displayed below the textarea.' },
+        error: { control: 'boolean', description: 'Renders the textarea in an error state.' },
+        errorMessage: { control: 'text', description: 'Error message displayed below the textarea.' },
+        required: { control: 'boolean', description: 'Makes the textarea required.' },
+        rows: { control: 'number', description: 'Number of visible text rows.' },
+        resize: {
+            control: 'select',
+            options: ['none', 'vertical', 'horizontal', 'both'],
+            description: 'Resize behavior.',
+        },
+        maxlength: { control: 'number', description: 'Maximum character length.' },
+        name: { control: 'text', description: 'Name attribute for form submission.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.value !== undefined && args.value !== null && args.value !== '')
+        attrs.push(`value="${args.value}"`);
+    if (args.placeholder !== undefined && args.placeholder !== null)
+        attrs.push(`placeholder="${args.placeholder}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.readonly)
+        attrs.push('readonly');
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.label !== undefined && args.label !== null)
+        attrs.push(`label="${args.label}"`);
+    if (args.helpText !== undefined && args.helpText !== null)
+        attrs.push(`help-text="${args.helpText}"`);
+    if (args.error)
+        attrs.push('error');
+    if (args.errorMessage !== undefined && args.errorMessage !== null)
+        attrs.push(`error-message="${args.errorMessage}"`);
+    if (args.required)
+        attrs.push('required');
+    if (args.rows !== undefined && args.rows !== null)
+        attrs.push(`rows="${args.rows}"`);
+    if (args.resize !== undefined && args.resize !== null)
+        attrs.push(`resize="${args.resize}"`);
+    if (args.maxlength !== undefined && args.maxlength !== null)
+        attrs.push(`maxlength="${args.maxlength}"`);
+    if (args.name !== undefined && args.name !== null)
+        attrs.push(`name="${args.name}"`);
+    return `<ts-textarea ${attrs.join(' ')}></ts-textarea>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        value: '',
+        placeholder: 'Enter additional notes...',
+        disabled: false,
+        readonly: false,
+        size: 'md',
+        label: 'Additional Notes',
+        helpText: 'Provide any relevant details or context.',
+        error: false,
+        errorMessage: '',
+        required: false,
+        rows: 3,
+        resize: 'vertical',
+        name: 'notes',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
+    <ts-textarea size="sm" label="Small" placeholder="Small textarea..." rows="2"></ts-textarea>
+    <ts-textarea size="md" label="Medium" placeholder="Medium textarea..." rows="3"></ts-textarea>
+    <ts-textarea size="lg" label="Large" placeholder="Large textarea..." rows="4"></ts-textarea>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
+    <ts-textarea label="Default" placeholder="Type something..."></ts-textarea>
+    <ts-textarea label="With value" value="This textarea has pre-filled content that the user can edit."></ts-textarea>
+    <ts-textarea label="Disabled" disabled placeholder="Cannot edit this field" value="This content is locked."></ts-textarea>
+    <ts-textarea label="Readonly" readonly value="This content can be read but not modified."></ts-textarea>
+    <ts-textarea label="Required" required placeholder="This field is required" help-text="You must fill in this field."></ts-textarea>
+    <ts-textarea label="Error" error error-message="Description must be at least 20 characters." placeholder="Enter a description..."></ts-textarea>
+  </div>
+`;
+export const ResizeBehaviors = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
+    <ts-textarea label="Vertical resize (default)" resize="vertical" placeholder="Drag the bottom-right corner vertically..."></ts-textarea>
+    <ts-textarea label="Horizontal resize" resize="horizontal" placeholder="Drag horizontally..."></ts-textarea>
+    <ts-textarea label="Both directions" resize="both" placeholder="Drag in any direction..."></ts-textarea>
+    <ts-textarea label="No resize" resize="none" placeholder="This textarea cannot be resized."></ts-textarea>
+  </div>
+`;
+export const FeedbackForm = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px;">
+    <h3 style="margin: 0; font-family: sans-serif;">Submit Feedback</h3>
+    <ts-textarea
+      label="Description"
+      placeholder="Describe the issue or suggestion in detail..."
+      required
+      rows="5"
+      maxlength="500"
+      help-text="Maximum 500 characters."
+      name="description"
+    ></ts-textarea>
+    <ts-textarea
+      label="Steps to Reproduce"
+      placeholder="1. Go to...  2. Click on...  3. Observe..."
+      rows="4"
+      name="steps"
+    ></ts-textarea>
+    <ts-textarea
+      label="Expected Behavior"
+      placeholder="What did you expect to happen?"
+      rows="2"
+      name="expected"
+    ></ts-textarea>
+  </div>
+`;
+//# sourceMappingURL=textarea.stories.js.map

package/dist/collection/components/textarea/textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-textarea\n\nexport default {\n  title: 'Components/Textarea',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The textarea value.' },\n    placeholder: { control: 'text', description: 'Placeholder text.' },\n    disabled: { control: 'boolean', description: 'Renders the textarea as disabled.' },\n    readonly: { control: 'boolean', description: 'Renders the textarea as readonly.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The textarea size.',\n    },\n    label: { control: 'text', description: 'Label text displayed above the textarea.' },\n    helpText: { control: 'text', description: 'Help text displayed below the textarea.' },\n    error: { control: 'boolean', description: 'Renders the textarea in an error state.' },\n    errorMessage: { control: 'text', description: 'Error message displayed below the textarea.' },\n    required: { control: 'boolean', description: 'Makes the textarea required.' },\n    rows: { control: 'number', description: 'Number of visible text rows.' },\n    resize: {\n      control: 'select',\n      options: ['none', 'vertical', 'horizontal', 'both'],\n      description: 'Resize behavior.',\n    },\n    maxlength: { control: 'number', description: 'Maximum character length.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  if (args.placeholder !== undefined && args.placeholder !== null) attrs.push(`placeholder=\"${args.placeholder}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.readonly) attrs.push('readonly');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  if (args.helpText !== undefined && args.helpText !== null) attrs.push(`help-text=\"${args.helpText}\"`);\n  if (args.error) attrs.push('error');\n  if (args.errorMessage !== undefined && args.errorMessage !== null) attrs.push(`error-message=\"${args.errorMessage}\"`);\n  if (args.required) attrs.push('required');\n  if (args.rows !== undefined && args.rows !== null) attrs.push(`rows=\"${args.rows}\"`);\n  if (args.resize !== undefined && args.resize !== null) attrs.push(`resize=\"${args.resize}\"`);\n  if (args.maxlength !== undefined && args.maxlength !== null) attrs.push(`maxlength=\"${args.maxlength}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  return `<ts-textarea ${attrs.join(' ')}></ts-textarea>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: '',\n    placeholder: 'Enter additional notes...',\n    disabled: false,\n    readonly: false,\n    size: 'md',\n    label: 'Additional Notes',\n    helpText: 'Provide any relevant details or context.',\n    error: false,\n    errorMessage: '',\n    required: false,\n    rows: 3,\n    resize: 'vertical',\n    name: 'notes',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <ts-textarea size=\"sm\" label=\"Small\" placeholder=\"Small textarea...\" rows=\"2\"></ts-textarea>\n    <ts-textarea size=\"md\" label=\"Medium\" placeholder=\"Medium textarea...\" rows=\"3\"></ts-textarea>\n    <ts-textarea size=\"lg\" label=\"Large\" placeholder=\"Large textarea...\" rows=\"4\"></ts-textarea>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <ts-textarea label=\"Default\" placeholder=\"Type something...\"></ts-textarea>\n    <ts-textarea label=\"With value\" value=\"This textarea has pre-filled content that the user can edit.\"></ts-textarea>\n    <ts-textarea label=\"Disabled\" disabled placeholder=\"Cannot edit this field\" value=\"This content is locked.\"></ts-textarea>\n    <ts-textarea label=\"Readonly\" readonly value=\"This content can be read but not modified.\"></ts-textarea>\n    <ts-textarea label=\"Required\" required placeholder=\"This field is required\" help-text=\"You must fill in this field.\"></ts-textarea>\n    <ts-textarea label=\"Error\" error error-message=\"Description must be at least 20 characters.\" placeholder=\"Enter a description...\"></ts-textarea>\n  </div>\n`;\n\nexport const ResizeBehaviors = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <ts-textarea label=\"Vertical resize (default)\" resize=\"vertical\" placeholder=\"Drag the bottom-right corner vertically...\"></ts-textarea>\n    <ts-textarea label=\"Horizontal resize\" resize=\"horizontal\" placeholder=\"Drag horizontally...\"></ts-textarea>\n    <ts-textarea label=\"Both directions\" resize=\"both\" placeholder=\"Drag in any direction...\"></ts-textarea>\n    <ts-textarea label=\"No resize\" resize=\"none\" placeholder=\"This textarea cannot be resized.\"></ts-textarea>\n  </div>\n`;\n\nexport const FeedbackForm = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 480px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Submit Feedback</h3>\n    <ts-textarea\n      label=\"Description\"\n      placeholder=\"Describe the issue or suggestion in detail...\"\n      required\n      rows=\"5\"\n      maxlength=\"500\"\n      help-text=\"Maximum 500 characters.\"\n      name=\"description\"\n    ></ts-textarea>\n    <ts-textarea\n      label=\"Steps to Reproduce\"\n      placeholder=\"1. Go to...  2. Click on...  3. Observe...\"\n      rows=\"4\"\n      name=\"steps\"\n    ></ts-textarea>\n    <ts-textarea\n      label=\"Expected Behavior\"\n      placeholder=\"What did you expect to happen?\"\n      rows=\"2\"\n      name=\"expected\"\n    ></ts-textarea>\n  </div>\n`;\n"]}

package/dist/collection/components/toast/toast.css

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   ts-toast — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-toast-radius      Border radius
+     --ts-toast-shadow      Box shadow
+     --ts-toast-max-width   Maximum width
+   ========================================================================== */
+
+:host {
+  display: block;
+  position: fixed;
+  z-index: var(--ts-z-toast, 9000);
+  font-family: var(--ts-font-family-base);
+  pointer-events: none;
+
+  --ts-toast-radius: var(--ts-radius-xl);
+  --ts-toast-shadow: var(--ts-shadow-lg);
+  --ts-toast-max-width: 420px;
+}
+
+/* ---- Positions ---- */
+:host([position="top-right"]) {
+  inset-block-start: var(--ts-spacing-4);
+  inset-inline-end: var(--ts-spacing-4);
+}
+
+:host([position="top-left"]) {
+  inset-block-start: var(--ts-spacing-4);
+  inset-inline-start: var(--ts-spacing-4);
+}
+
+:host([position="bottom-right"]) {
+  inset-block-end: var(--ts-spacing-4);
+  inset-inline-end: var(--ts-spacing-4);
+}
+
+:host([position="bottom-left"]) {
+  inset-block-end: var(--ts-spacing-4);
+  inset-inline-start: var(--ts-spacing-4);
+}
+
+:host([position="top-center"]) {
+  inset-block-start: var(--ts-spacing-4);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+:host([position="bottom-center"]) {
+  inset-block-end: var(--ts-spacing-4);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+/* ---- Base ---- */
+.toast__base {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ts-spacing-3);
+  padding: var(--ts-spacing-3) var(--ts-spacing-4);
+  border-radius: var(--ts-toast-radius);
+  box-shadow: var(--ts-toast-shadow);
+  max-inline-size: var(--ts-toast-max-width);
+  pointer-events: auto;
+  border: 1px solid transparent;
+  font-size: var(--ts-font-size-sm);
+  line-height: var(--ts-line-height-normal);
+  animation: ts-toast-slide-in 0.3s ease-out;
+}
+
+@keyframes ts-toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ---- Variants ---- */
+:host([variant="info"]) .toast__base {
+  background-color: var(--ts-color-info-bg);
+  border-color: var(--ts-color-info-border);
+  color: var(--ts-color-info-600);
+}
+
+:host([variant="success"]) .toast__base {
+  background-color: var(--ts-color-success-bg);
+  border-color: var(--ts-color-success-border);
+  color: var(--ts-color-success-600);
+}
+
+:host([variant="warning"]) .toast__base {
+  background-color: var(--ts-color-warning-bg);
+  border-color: var(--ts-color-warning-border);
+  color: var(--ts-color-warning-600);
+}
+
+:host([variant="danger"]) .toast__base {
+  background-color: var(--ts-color-danger-bg);
+  border-color: var(--ts-color-danger-border);
+  color: var(--ts-color-danger-600);
+}
+
+:host([variant="neutral"]) .toast__base {
+  background-color: var(--ts-color-bg-subtle);
+  border-color: var(--ts-color-border-subtle);
+  color: var(--ts-color-text-secondary);
+}
+
+/* ---- Icon ---- */
+.toast__icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.15em;
+  flex-shrink: 0;
+  margin-block-start: 1px;
+}
+
+/* ---- Message ---- */
+.toast__message {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/* ---- Action ---- */
+.toast__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.toast__action:empty {
+  display: none;
+}
+
+/* ---- Close button ---- */
+.toast__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  border: none;
+  border-radius: var(--ts-radius-sm);
+  background: transparent;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 0.8em;
+  transition: opacity var(--ts-transition-fast);
+  padding: 0;
+  line-height: 1;
+}
+
+.toast__close:hover {
+  opacity: 1;
+}
+
+.toast__close:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  opacity: 1;
+}

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

@@ -0,0 +1,291 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for message content.
+ * @slot action - Optional action button.
+ *
+ * @part base - The toast container.
+ * @part icon - The variant icon wrapper.
+ * @part message - The message wrapper.
+ * @part action - The action slot wrapper.
+ * @part close - The close button.
+ */
+export class TsToast {
+    autoCloseTimer;
+    /** The toast's visual variant. */
+    variant = 'info';
+    /** Auto-dismiss duration in ms. Set 0 to disable. */
+    duration = 5000;
+    /** Whether the toast shows a close button. */
+    dismissible = true;
+    /** Whether the toast is visible. */
+    open = false;
+    /** Position of the toast on screen. */
+    position = 'top-right';
+    /** Emitted when the toast is dismissed. */
+    tsClose;
+    isVisible = false;
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.isVisible = true;
+            this.startAutoClose();
+        }
+        else {
+            this.isVisible = false;
+            this.clearAutoClose();
+        }
+    }
+    connectedCallback() {
+        if (this.open) {
+            this.isVisible = true;
+            this.startAutoClose();
+        }
+    }
+    disconnectedCallback() {
+        this.clearAutoClose();
+    }
+    /** Programmatically close the toast. */
+    async close() {
+        this.open = false;
+        this.isVisible = false;
+        this.clearAutoClose();
+        this.tsClose.emit();
+    }
+    /** Programmatically show the toast. */
+    async show() {
+        this.open = true;
+    }
+    startAutoClose() {
+        this.clearAutoClose();
+        if (this.duration > 0) {
+            this.autoCloseTimer = setTimeout(() => {
+                this.close();
+            }, this.duration);
+        }
+    }
+    clearAutoClose() {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderIcon() {
+        const icons = {
+            info: '\u2139',
+            success: '\u2713',
+            warning: '\u26A0',
+            danger: '\u2715',
+            neutral: '\u2139',
+        };
+        return h("span", { class: "toast__icon-symbol", "aria-hidden": "true" }, icons[this.variant] || '\u2139');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';
+        return (h(Host, { class: {
+                'ts-toast': true,
+                [`ts-toast--${this.variant}`]: true,
+                [`ts-toast--${this.position}`]: true,
+                'ts-toast--open': this.isVisible,
+            }, role: "status", "aria-live": ariaLive }, h("div", { class: "toast__base", part: "base" }, h("div", { class: "toast__icon", part: "icon" }, this.renderIcon()), h("div", { class: "toast__message", part: "message" }, h("slot", null)), h("div", { class: "toast__action", part: "action" }, h("slot", { name: "action" })), this.dismissible && (h("button", { class: "toast__close", part: "close", type: "button", "aria-label": "Dismiss notification", onClick: this.handleClose }, "\\u2715")))));
+    }
+    static get is() { return "ts-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsToastVariant",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TsToastVariant": {
+                            "location": "global",
+                            "id": "global::TsToastVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The toast's visual variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-dismiss duration in ms. Set 0 to disable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "5000"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toast shows a close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toast is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsToastPosition",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "TsToastPosition": {
+                            "location": "global",
+                            "id": "global::TsToastPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the toast on screen."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'top-right'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toast is dismissed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the toast.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically show the toast.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\ntype TsToastVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\ntype TsToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - Optional action button.\n *\n * @part base - The toast container.\n * @part icon - The variant icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class TsToast {\n  private autoCloseTimer?: ReturnType<typeof setTimeout>;\n\n  /** The toast's visual variant. */\n  @Prop({ reflect: true }) variant: TsToastVariant = 'info';\n\n  /** Auto-dismiss duration in ms. Set 0 to disable. */\n  @Prop() duration = 5000;\n\n  /** Whether the toast shows a close button. */\n  @Prop() dismissible = true;\n\n  /** Whether the toast is visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Position of the toast on screen. */\n  @Prop({ reflect: true }) position: TsToastPosition = 'top-right';\n\n  /** Emitted when the toast is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  @State() isVisible = false;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean): void {\n    if (newValue) {\n      this.isVisible = true;\n      this.startAutoClose();\n    } else {\n      this.isVisible = false;\n      this.clearAutoClose();\n    }\n  }\n\n  connectedCallback(): void {\n    if (this.open) {\n      this.isVisible = true;\n      this.startAutoClose();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.clearAutoClose();\n  }\n\n  /** Programmatically close the toast. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n    this.isVisible = false;\n    this.clearAutoClose();\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the toast. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  private startAutoClose(): void {\n    this.clearAutoClose();\n    if (this.duration > 0) {\n      this.autoCloseTimer = setTimeout(() => {\n        this.close();\n      }, this.duration);\n    }\n  }\n\n  private clearAutoClose(): void {\n    if (this.autoCloseTimer) {\n      clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = undefined;\n    }\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      neutral: '\\u2139',\n    };\n    return <span class=\"toast__icon-symbol\" aria-hidden=\"true\">{icons[this.variant] || '\\u2139'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-toast': true,\n          [`ts-toast--${this.variant}`]: true,\n          [`ts-toast--${this.position}`]: true,\n          'ts-toast--open': this.isVisible,\n        }}\n        role=\"status\"\n        aria-live={ariaLive}\n      >\n        <div class=\"toast__base\" part=\"base\">\n          <div class=\"toast__icon\" part=\"icon\">\n            {this.renderIcon()}\n          </div>\n\n          <div class=\"toast__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"toast__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"toast__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}