wj-elements 0.4.0 → 0.4.1

package/dist/wje-textarea.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Textarea ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-textarea-margin-bottom);\n    display: block;\n\n    label {\n        margin: var(--wje-textarea-label-margin);\n        padding: var(--wje-textarea-label-padding);\n        display: var(--wje-textarea-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-textarea-label-line-height);\n        font-size: var(--wje-textarea-label-font-size);\n    }\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        border-width: var(--wje-textarea-border-width);\n        border-style: var(--wje-textarea-border-style);\n        border-color: var(--wje-textarea-border-color);\n        border-radius: var(--wje-textarea-border-radius);\n        box-sizing: border-box;\n    }\n    textarea {\n        font-family: var(--wje-textarea-font-family);\n        color: var(--wje-textarea-color);\n        font-size: 14px;\n        border: 0 none;\n        padding: var(--wje-textarea-padding);\n        &:focus {\n            outline: none;\n        }\n    }\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([resize='auto']) textarea,\n:host([resize='none']) textarea {\n    resize: none;\n}\n\n.native-textarea {\n    .input-wrapper {\n        width: 100%;\n        line-height: normal;\n    }\n    &.default {\n        background-color: var(--wje-textarea-background-color);\n        font-family: var(--wje-textarea-font-family);\n        position: relative;\n        padding-inline: 0;\n        padding-top: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n            label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        textarea {\n            border: none;\n            padding-top: 0;\n            background: none;\n            box-shadow: none;\n            width: calc(100% - var(--wje-textarea-padding) * 2);\n            max-width: calc(100% - var(--wje-textarea-padding) * 2);\n            min-width: calc(100% - var(--wje-textarea-padding) * 2);\n            padding: 0 var(--wje-textarea-padding);\n        }\n        label {\n            margin: var(--wje-textarea-label-margin);\n            padding: var(--wje-textarea-label-padding);\n            display: var(--wje-textarea-label-display);\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease;\n            line-height: var(--wje-textarea-label-line-height);\n            font-size: var(--wje-textarea-label-font-size);\n        }\n        /*label {*/\n        /*    padding: 0 var(--wje-textarea-padding);*/\n        /*    display: block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*    padding-top: 0.25rem;*/\n        /*    &.fade {*/\n        /*        opacity: 0.5;*/\n        /*        font-size: 12px;*/\n        /*        letter-spacing: normal;*/\n        /*    }*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-left: none;\n            border-top: none;\n            border-bottom: none;\n        }\n\n        ::slotted([slot='end']) {\n            border-right: none;\n            border-top: none;\n            border-bottom: none;\n        }\n    }\n    &.standard {\n        position: relative;\n        border-radius: var(--wje-textarea-border-radius);\n        padding: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n        }\n        textarea {\n            background-color: var(--wje-textarea-background-color);\n            display: block;\n            min-height: 32px;\n            box-shadow: none;\n            width: 100%;\n            box-sizing: border-box;\n            border-radius: var(--wje-textarea-border-radius);\n        }\n        /*label {*/\n        /*    margin: var(--wje-textarea-label-margin);*/\n        /*    display: inline-block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-right: none;\n            border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\n        }\n\n        ::slotted([slot='end']) {\n            border-left: none;\n            border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\n        }\n\n        &.has-start textarea {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n        }\n\n        &.has-end textarea {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n        slot[name='error'] {\n            position: static;\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-textarea-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.counter {\n    float: right;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
+const styles = "/*\n[ WJ Textarea ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-textarea-margin-bottom);\n    display: block;\n\n    label {\n        margin: var(--wje-textarea-label-margin);\n        padding: var(--wje-textarea-label-padding);\n        display: var(--wje-textarea-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-textarea-label-line-height);\n        font-size: var(--wje-textarea-label-font-size);\n    }\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        border-width: var(--wje-textarea-border-width);\n        border-style: var(--wje-textarea-border-style);\n        border-color: var(--wje-textarea-border-color);\n        border-radius: var(--wje-textarea-border-radius);\n        box-sizing: border-box;\n    }\n    textarea {\n        font-family: var(--wje-textarea-font-family);\n        color: var(--wje-textarea-color);\n        font-size: 14px;\n        border: 0 none;\n        padding: var(--wje-textarea-padding);\n        &:focus {\n            outline: none;\n        }\n    }\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([resize='auto']) textarea,\n:host([resize='none']) textarea {\n    resize: none;\n}\n\n.native-textarea {\n    .input-wrapper {\n        width: 100%;\n        line-height: normal;\n    }\n    &.default {\n        background-color: var(--wje-textarea-background-color);\n        font-family: var(--wje-textarea-font-family);\n        position: relative;\n        padding-inline: 0;\n        padding-top: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n            label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        textarea {\n            border: none;\n            padding-top: 0;\n            background: none;\n            box-shadow: none;\n            width: calc(100% - var(--wje-textarea-padding) * 2);\n            max-width: calc(100% - var(--wje-textarea-padding) * 2);\n            min-width: calc(100% - var(--wje-textarea-padding) * 2);\n            padding: 0 var(--wje-textarea-padding);\n        }\n        label {\n            margin: var(--wje-textarea-label-margin);\n            padding: var(--wje-textarea-label-padding);\n            display: var(--wje-textarea-label-display);\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease;\n            line-height: var(--wje-textarea-label-line-height);\n            font-size: var(--wje-textarea-label-font-size);\n        }\n        /*label {*/\n        /*    padding: 0 var(--wje-textarea-padding);*/\n        /*    display: block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*    padding-top: 0.25rem;*/\n        /*    &.fade {*/\n        /*        opacity: 0.5;*/\n        /*        font-size: 12px;*/\n        /*        letter-spacing: normal;*/\n        /*    }*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-left: none;\n            border-top: none;\n            border-bottom: none;\n        }\n\n        ::slotted([slot='end']) {\n            border-right: none;\n            border-top: none;\n            border-bottom: none;\n        }\n    }\n    &.standard {\n        position: relative;\n        border-radius: var(--wje-textarea-border-radius);\n        padding: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n        }\n        textarea {\n            background-color: var(--wje-textarea-background-color);\n            display: block;\n            min-height: 32px;\n            box-shadow: none;\n            width: 100%;\n            box-sizing: border-box;\n            border-radius: var(--wje-textarea-border-radius);\n        }\n        /*label {*/\n        /*    margin: var(--wje-textarea-label-margin);*/\n        /*    display: inline-block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-right: none;\n            border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\n        }\n\n        ::slotted([slot='end']) {\n            border-left: none;\n            border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\n        }\n\n        &.has-start textarea {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n        }\n\n        &.has-end textarea {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n        slot[name='error'] {\n            position: static;\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-textarea-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.counter {\n    float: right;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-textarea-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-textarea-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 const _Textarea = class _Textarea extends FormAssociatedElement {
   /**
    * Creates an instance of Textarea.

package/dist/wje-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Textarea._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('label');\n        } else {\n            this.setAttribute('label', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['value', 'name', 'disabled', 'placeholder', 'label', 'required', 'readonly', 'invalid', 'rows'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            const attrValue = this.getAttribute('value');\n            this.value = attrValue !== null ? attrValue : this.innerHTML;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        if (name === 'label') {\n            this.refresh();\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder || '';\n        } else if (name === 'rows') {\n            this.input.rows = Number(newValue || 3);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.rows = Number(this.getAttribute('rows') || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        if (this.getAttribute('resize') === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.appendChild(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.getAttribute('resize') === 'auto' && typeof ResizeObserver === 'function') {\n            this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n            this.resizeObserver.observe(this.input);\n        }\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje-textarea:change');\n            event.addListener(this, 'click', 'wje-textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid) {\n                this.invalid = false;\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.validate();\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    componentCleanup() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.\n * @cssproperty [--wje-textarea-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Textarea._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('label');\n        } else {\n            this.setAttribute('label', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['value', 'name', 'disabled', 'placeholder', 'label', 'required', 'readonly', 'invalid', 'rows'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            const attrValue = this.getAttribute('value');\n            this.value = attrValue !== null ? attrValue : this.innerHTML;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        if (name === 'label') {\n            this.refresh();\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder || '';\n        } else if (name === 'rows') {\n            this.input.rows = Number(newValue || 3);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.rows = Number(this.getAttribute('rows') || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        if (this.getAttribute('resize') === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.appendChild(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.getAttribute('resize') === 'auto' && typeof ResizeObserver === 'function') {\n            this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n            this.resizeObserver.observe(this.input);\n        }\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje-textarea:change');\n            event.addListener(this, 'click', 'wje-textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid) {\n                this.invalid = false;\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.validate();\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    componentCleanup() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":";;;;;;AA8Be,MAAM,YAAN,MAAM,kBAAiB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMxD,cAAc;AACV,UAAK;AAkFT,qCAAY;AAsQZ;AAAA;AAAA;AAAA,6CAAoB,MAAM;AACtB,UAAI,KAAK,aAAa,QAAQ,MAAM,QAAQ;AACxC,aAAK,MAAM,MAAM,SAAS;AAC1B,aAAK,MAAM,MAAM,SAAS,KAAK,MAAM,eAAe;AAAA,MACxD;AAAA,IACJ;AAMA;AAAA;AAAA;AAAA;AAAA,qCAAY,CAAC,MAAM;AACf,WAAK,eAAe,YAAY,EAAE,OAAO,MAAM,SAAS,MAAM,KAAK,MAAM;AAAA,IAC7E;AAnWI,SAAK,UAAU;AACf,SAAK,WAAW;AAChB,SAAK,cAAc,EAAE,UAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,UAAU,aAAa,KAAK;AAEjC,QAAI,KAAK,MAAO,MAAK,MAAM,QAAQ;AAEnC,SAAK,WAAW;AAChB,SAAK,SAAS;AACd,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;;AACR,aAAO,UAAK,UAAL,mBAAY,UAAS,KAAK,UAAU;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,QAAI,UAAU,QAAQ,UAAU,QAAW;AACvC,WAAK,gBAAgB,OAAO;AAAA,IAChC,OAAO;AACH,WAAK,aAAa,SAAS,KAAK;AAAA,IACpC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,IAAI,iBAAiB,OAAO;AACxB,QAAI,OAAO;AACP,WAAK,aAAa,sBAAsB,EAAE;AAAA,IAC9C,OAAO;AACH,WAAK,gBAAgB,oBAAoB;AAAA,IAC7C;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,mBAAmB;AACnB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EACjD;AAAA,EAEA,IAAI,YAAY,OAAO;AACnB,SAAK,aAAa,eAAe,KAAK;AAAA,EAC1C;AAAA,EAEA,IAAI,cAAc;AACd,WAAO,KAAK,aAAa,aAAa;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS,QAAQ,YAAY,eAAe,SAAS,YAAY,YAAY,WAAW,MAAM;AAAA,EAC1G;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAGpB,QAAI,KAAK,UAAU;AACf,YAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,WAAK,QAAQ,cAAc,OAAO,YAAY,KAAK;AACnD,WAAK,WAAW;AAAA,IACpB;AACA,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,yBAAyB,MAAM,UAAU,UAAU;AAC/C,QAAI,aAAa,SAAU;AAE3B,QAAI,SAAS,SAAS;AAClB,WAAK,QAAO;AACZ;AAAA,IACJ;AAEA,QAAI,CAAC,KAAK,OAAO;AACb,WAAK,SAAQ;AACb;AAAA,IACJ;AAEA,QAAI,SAAS,SAAS;AAClB,WAAK,SAAS,YAAY;AAC1B,WAAK,MAAM,QAAQ,KAAK;AACxB,WAAK,UAAU,aAAa,KAAK,KAAK;AAAA,IAC1C,WAAW,SAAS,QAAQ;AACxB,WAAK,MAAM,OAAO,KAAK;AAAA,IAC3B,WAAW,SAAS,YAAY;AAC5B,WAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAAA,IACtD,WAAW,SAAS,YAAY;AAC5B,WAAK,MAAM,WAAW,KAAK;AAAA,IAC/B,WAAW,SAAS,YAAY;AAC5B,WAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAAA,IACtD,WAAW,SAAS,eAAe;AAC/B,WAAK,MAAM,cAAc,KAAK,eAAe;AAAA,IACjD,WAAW,SAAS,QAAQ;AACxB,WAAK,MAAM,OAAO,OAAO,YAAY,CAAC;AAAA,IAC1C;AAEA,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,mBAAmB,KAAK,WAAW,SAAS;AACjE,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,KAAK,aAAa,SAAS,EAAG,QAAO,UAAU,IAAI,WAAW;AAElE,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,SAAS;AACtC,YAAQ,UAAU,IAAI,SAAS;AAE/B,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,UAAU,IAAI,eAAe;AAE1C,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,UAAU;AAChB,UAAM,YAAY,KAAK,SAAS;AAEhC,QAAI,QAAQ,SAAS,cAAc,UAAU;AAC7C,UAAM,KAAK;AACX,UAAM,OAAO,KAAK;AAClB,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,UAAM,YAAY,KAAK;AACvB,UAAM,cAAc,KAAK,eAAe;AACxC,UAAM,UAAU,IAAI,cAAc;AAClC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,OAAO,OAAO,KAAK,aAAa,MAAM,KAAK,CAAC;AAClD,UAAM,aAAa,cAAc,KAAK;AAEtC,UAAM,aAAa,MAAM,KAAK,KAAK,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;AAEtE,eAAW,QAAQ,CAAC,SAAS;AACzB,UAAI,KAAK,aAAa,IAAI,GAAG;AACzB,cAAM,aAAa,MAAM,KAAK,IAAI,KAAK,EAAE;AAAA,MAC7C;AAAA,IACJ,CAAC;AAED,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AACtC,SAAK,eAAe,KAAK,KAAK,GAAG,KAAK,EAAE,WAAW,gBAAgB,KAAK,WAAW;AACnF,cAAU,KAAK,KAAK;AAEpB,QAAI,KAAK,aAAa,QAAQ,MAAM,OAAQ,OAAM,iBAAiB,SAAS,KAAK,iBAAiB;AAElG,QAAI,KAAK,OAAO;AACZ,UAAI,KAAK,YAAY,YAAY;AAC7B,eAAO,YAAY,KAAK;AAAA,MAC5B,OAAO;AACH,qBAAa,YAAY,KAAK;AAAA,MAClC;AAAA,IACJ;AAEA,iBAAa,YAAY,KAAK;AAE9B,YAAQ,YAAY,YAAY;AAEhC,WAAO,YAAY,OAAO;AAC1B,WAAO,OAAO,SAAS;AAEvB,SAAK,OAAO,KAAK;AAEjB,aAAS,YAAY,MAAM;AAE3B,QAAI,KAAK,aAAa,SAAS,GAAG;AAC9B,YAAM,YAAY,KAAK,aAAa;AACpC,YAAM,iBAAiB,SAAS,KAAK,SAAS;AAE9C,UAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,cAAQ,UAAU,IAAI,SAAS;AAC/B,cAAQ,YAAY,GAAG,MAAM,MAAM,MAAM,IAAI,MAAM,SAAS;AAE5D,WAAK,iBAAiB;AACtB,eAAS,YAAY,OAAO;AAAA,IAChC;AAEA,SAAK,SAAS;AACd,SAAK,eAAe;AACpB,SAAK,QAAQ;AAEb,SAAK,SAAQ;AACb,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,QAAI,KAAK,aAAa,QAAQ,MAAM,UAAU,OAAO,mBAAmB,YAAY;AAChF,WAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,kBAAiB,CAAE;AACvE,WAAK,eAAe,QAAQ,KAAK,KAAK;AAAA,IAC1C;AAEA,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,MAAM,SAAS,qBAAqB;AACtD,YAAM,YAAY,MAAM,SAAS,oBAAoB;AAAA,IACzD;AAEA,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,aAAa,UAAU,IAAI,MAAM;AACtC,WAAK,OAAO,UAAU,IAAI,SAAS;AAAA,IACvC,CAAC;AAED,SAAK,MAAM,iBAAiB,QAAQ,CAAC,MAAM;AACvC,WAAK,OAAO,UAAU,OAAO,SAAS;AACtC,UAAI,CAAC,EAAE,OAAO,MAAO,MAAK,aAAa,UAAU,OAAO,MAAM;AAAA,IAClE,CAAC;AAED,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,SAAQ;AAEb,UAAI,KAAK,kBAAkB;AACvB,aAAK,WAAW;AAChB,aAAK,oBAAmB;AAAA,MAC5B;AAEA,UAAI,KAAK,SAAS;AACd,aAAK,UAAU;AACf,aAAK,UAAU,YAAY,CAAA,GAAI,EAAE;AAAA,MACrC;AAEA,WAAK,MAAM,UAAU,OAAO,UAAU;AACtC,WAAK,aAAa,UAAU,IAAI,MAAM;AAEtC,YAAM,QAAQ,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC;AACzC,WAAK,cAAc,KAAK;AAExB,YAAM,oBAAoB,MAAM,sBAAsB;AAAA,QAClD,OAAO,KAAK,MAAM;AAAA,MAClC,CAAa;AAED,WAAK,QAAQ,KAAK,MAAM;AAAA,IAC5B,CAAC;AAED,SAAK,iBAAiB,WAAW,CAAC,MAAM;AACpC,WAAK,UAAU;AACf,WAAK,WAAW;AAEhB,WAAK,mBAAkB;AAEvB,UAAI,KAAK,oBAAoB;AACzB,UAAE,eAAc;AAAA,MACpB;AAAA,IACJ,CAAC;AAED,SAAK,SAAQ;AAEb,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,UAAM,kBAAkB,KAAK,YAAY,CAAC,KAAK;AAC/C,UAAM,UAAU,KAAK,WAAW;AAChC,UAAM,QAAQ,KAAK,SAAS,KAAK,UAAU,QAAQ,KAAK,MAAM,KAAI,IAAK;AACvE,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,UAAU,KAAK,aAAa,UAAU;AAAA,MACtC;AAAA,MACA,aAAa,KAAK;AAAA,MAClB,GAAI,QAAQ,EAAE,MAAK,IAAK;IACpC,CAAS;AAAA,EACL;AAAA,EAEA,mBAAmB;;AACf,eAAK,mBAAL,mBAAqB,UAAU,KAAK;AACpC,eAAK,mBAAL,mBAAqB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,mBAAL,mBAAqB,UAAU,KAAK;AACpC,eAAK,mBAAL,mBAAqB;AAAA,EACzB;AAmBJ;AA5WI,cADiB,WACV,eAAc;AADV,IAAM,WAAN;AC1Bf,SAAS,OAAO,gBAAgB,QAAQ;"}

package/dist/wje-toast.js

@@ -4,7 +4,55 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Toast ]\n*/\n\n:host {\n    position: relative;\n    z-index: 9999;\n    width: 300px;\n    margin: 0.5rem 0;\n    display: none;\n}\n\n:host([open]) {\n    display: block;\n}\n\n.native-toast {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    overflow: hidden;\n    margin: 0;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--wje-border-radius-large);\n    position: relative;\n\n    &.has-media slot[name='media'] {\n        flex: 0 0 1.5rem;\n        width: 1.5rem;\n        display: flex;\n        margin-right: 0.5rem;\n        justify-content: center;\n    }\n\n    .content {\n        font-size: var(--wje-font-size-small);\n        .headline {\n            font-size: var(--wje-font-size);\n            font-weight: var(--wje-font-weight-bold);\n        }\n    }\n\n    wje-button {\n        --wje-button-margin-inline: auto 0;\n        margin-left: auto !important;\n    }\n\n    .countdown {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 4px;\n        .countdown-bar {\n            height: 100%;\n        }\n    }\n}\n\n:host([position='top']) {\n    animation: slideDown 0.3s ease-out forwards;\n    top: 1rem;\n    left: auto;\n    right: auto;\n}\n\n:host::part(icon) {\n    margin-right: 0.5rem;\n}\n\n@keyframes slideDown {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n/*PRIMARY*/\n:host([color='primary']) .native-toast {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .native-toast {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color='success']) .native-toast {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color='warning']) .native-toast {\n    background-color: var(--wje-color-warning-1);\n    color: var(--wje-color-warning-11);\n    border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color='danger']) .native-toast {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color='info']) .native-toast {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .native-toast {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-3);\n}\n\n/*PRIMARY*/\n:host([color='primary']) .countdown-bar {\n    background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .countdown-bar {\n    background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color='success']) .countdown-bar {\n    background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color='warning']) .countdown-bar {\n    background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color='danger']) .countdown-bar {\n    background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color='info']) .countdown-bar {\n    background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .countdown-bar {\n    background-color: var(--wje-color-contrast-9);\n}\n";
+const styles = "/*\n[ WJ Toast ]\n*/\n\n:host {\n    --wje-toast-stack-z: 9999;\n    --wje-toast-stack-host-margin-top: 0.5rem;\n    --wje-toast-stack-host-margin-bottom: 0.5rem;\n    --wje-toast-stack-layout-duration: 0.2s;\n    --wje-toast-stack-visual-duration: 0.2s;\n    --wje-toast-stack-opacity: 1;\n    --wje-toast-stack-shift: 0px;\n    --wje-toast-enter-offset: 0px;\n    --wje-toast-stack-scale: 1;\n    --wje-toast-stack-origin: center top;\n    position: relative;\n    z-index: var(--wje-toast-stack-z);\n    width: 300px;\n    max-width: min(100%, calc(100vw - 1rem));\n    margin: var(--wje-toast-stack-host-margin-top) 0 var(--wje-toast-stack-host-margin-bottom);\n    display: none;\n    transition:\n        margin-top var(--wje-toast-stack-layout-duration) ease,\n        margin-bottom var(--wje-toast-stack-layout-duration) ease;\n}\n\n:host([open]) {\n    display: block;\n}\n\n.native-toast {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    overflow: hidden;\n    margin: 0;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--wje-border-radius-large);\n    position: relative;\n    opacity: var(--wje-toast-stack-opacity);\n    transform: translateY(calc(var(--wje-toast-stack-shift) + var(--wje-toast-enter-offset))) scale(var(--wje-toast-stack-scale));\n    transform-origin: var(--wje-toast-stack-origin);\n    transition:\n        transform var(--wje-toast-stack-visual-duration) ease,\n        opacity var(--wje-toast-stack-visual-duration) ease;\n\n    &.has-media slot[name='media'] {\n        flex: 0 0 1.5rem;\n        width: 1.5rem;\n        display: flex;\n        margin-right: 0.5rem;\n        justify-content: center;\n    }\n\n    .content {\n        font-size: var(--wje-font-size-small);\n        .headline {\n            font-size: var(--wje-font-size);\n            font-weight: var(--wje-font-weight-bold);\n        }\n    }\n\n    wje-button {\n        --wje-button-margin-inline: auto 0;\n        margin-left: auto !important;\n    }\n\n    .countdown {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 4px;\n        .countdown-bar {\n            height: 100%;\n        }\n    }\n}\n\n:host([position='top']) {\n    animation: slideDown 0.3s ease-out forwards;\n    top: 1rem;\n    left: auto;\n    right: auto;\n}\n\n:host::part(icon) {\n    margin-right: 0.5rem;\n}\n\n@keyframes slideDown {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n/*PRIMARY*/\n:host([color='primary']) .native-toast {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .native-toast {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color='success']) .native-toast {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color='warning']) .native-toast {\n    background-color: var(--wje-color-warning-1);\n    color: var(--wje-color-warning-11);\n    border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color='danger']) .native-toast {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color='info']) .native-toast {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .native-toast {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-3);\n}\n\n/*PRIMARY*/\n:host([color='primary']) .countdown-bar {\n    background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .countdown-bar {\n    background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color='success']) .countdown-bar {\n    background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color='warning']) .countdown-bar {\n    background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color='danger']) .countdown-bar {\n    background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color='info']) .countdown-bar {\n    background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .countdown-bar {\n    background-color: var(--wje-color-contrast-9);\n}\n";
+const DEFAULT_STACK_POSITION = "top-end";
+const DEFAULT_STACK_DEPTH = 3;
+const VALID_STACK_POSITIONS = /* @__PURE__ */ new Set([
+  "top-start",
+  "top-center",
+  "top-end",
+  "bottom-start",
+  "bottom-center",
+  "bottom-end"
+]);
+const STACKED_SCALE_STEP = 0.04;
+const STACKED_MIN_SCALE = 0.88;
+const STACKED_MIN_OPACITY = 0.72;
+const STACKED_VISIBLE_SLICE = 16;
+const STACKED_EXPANDED_MARGIN = "0.5rem";
+const STACKED_PADDING = "1rem";
+const STACKED_ENTER_OFFSET = 24;
+const toggleStackExpanded = (stack, expanded) => {
+  if (expanded) {
+    stack.dataset.expanded = "true";
+    return;
+  }
+  delete stack.dataset.expanded;
+};
+const syncExpandedStackToasts = (stack, expanded) => {
+  Array.from(stack.children).filter((child) => child.tagName === "WJE-TOAST").forEach((toast) => {
+    var _a, _b;
+    if (expanded) {
+      (_a = toast.pause) == null ? void 0 : _a.call(toast);
+      return;
+    }
+    (_b = toast.resume) == null ? void 0 : _b.call(toast);
+  });
+};
+const setStackExpandedState = (stack, expanded) => {
+  var _a;
+  let shouldExpand = stack.dataset.stacked === "true" && expanded;
+  let isExpanded = stack.dataset.expanded === "true";
+  if (shouldExpand === isExpanded) {
+    return;
+  }
+  toggleStackExpanded(stack, shouldExpand);
+  syncExpandedStackToasts(stack, shouldExpand);
+  (_a = stack.updateToastLayout) == null ? void 0 : _a.call(stack);
+};
+const syncStackExpandedState = (stack) => {
+  setStackExpandedState(stack, stack.matches(":hover") || stack.matches(":focus-within"));
+};
 class Toast extends WJElement {
   /**
    * Creates an instance of Toast.
@@ -54,8 +102,11 @@ class Toast extends WJElement {
      * Resumes the countdown animation and resumes the timer.
      */
     __publicField(this, "resume", () => {
-      var _a;
-      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+      var _a, _b;
+      if (((_a = this.toastStack) == null ? void 0 : _a.dataset.expanded) === "true") {
+        return;
+      }
+      (_b = this.countdownAnimation) == null ? void 0 : _b.play();
       this.resumeTimer();
     });
     /**
@@ -67,19 +118,50 @@ class Toast extends WJElement {
      */
     __publicField(this, "start", () => {
       return new Promise((resolve) => {
-        let stack = document.body.querySelector(".wje-toast-stack");
+        var _a;
+        let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key="${this.getToastStackKey()}"]`);
         if (stack) {
           this.toastStack = stack;
+        } else {
+          this.toastStack = this.createToastStack();
         }
+        this.syncToastStack(this.toastStack);
         if (this.toastStack.parentElement === null) {
           document.body.append(this.toastStack);
         }
         this.toastStack.append(this);
-        this.show();
+        if (this.stacked) {
+          this.toastStack.style.setProperty("--wje-toast-stack-layout-duration", "0s");
+          this.toastStack.style.setProperty("--wje-toast-stack-visual-duration", "0s");
+          this.style.setProperty(
+            "--wje-toast-enter-offset",
+            this.stackPosition.startsWith("bottom") ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`
+          );
+          this.style.visibility = "hidden";
+          this.show();
+          this.updateToastStack(this.toastStack);
+        } else {
+          this.updateToastStack(this.toastStack);
+          this.show();
+        }
+        if (this.toastStack.dataset.expanded === "true") {
+          this.pause();
+        }
+        requestAnimationFrame(() => {
+          this.updateToastStack(this.toastStack);
+          if (this.stacked) {
+            this.style.removeProperty("visibility");
+            this.toastStack.style.removeProperty("--wje-toast-stack-layout-duration");
+            this.toastStack.style.removeProperty("--wje-toast-stack-visual-duration");
+            requestAnimationFrame(() => this.style.setProperty("--wje-toast-enter-offset", "0px"));
+          }
+        });
+        (_a = this.updateComplete) == null ? void 0 : _a.then(() => this.updateToastStack(this.toastStack));
         this.addEventListener("wje-toast:after-hide", this.removeChildAndStack);
+        resolve(this);
       });
     });
-    this.toastStack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
+    this.toastStack = this.createToastStack();
   }
   /**
    * Set headline value of the toast.
@@ -166,6 +248,67 @@ class Toast extends WJElement {
   get countdown() {
     return this.hasAttribute("countdown");
   }
+  /**
+   * Set stacked value of the toast.
+   * @param value
+   */
+  set stacked(value) {
+    this.toggleAttribute("stacked", WjElementUtils.stringToBoolean(value));
+  }
+  /**
+   * Get stacked value of the toast.
+   * @returns {boolean}
+   */
+  get stacked() {
+    return this.hasAttribute("stacked");
+  }
+  /**
+   * Set stack depth of the toast.
+   * @param value
+   */
+  set stackDepth(value) {
+    if (value === null || value === void 0 || value === "") {
+      this.removeAttribute("stack-depth");
+      return;
+    }
+    this.setAttribute("stack-depth", value);
+  }
+  /**
+   * Get stack depth of the toast.
+   * @returns {number}
+   */
+  get stackDepth() {
+    let value = Number.parseInt(this.getAttribute("stack-depth"), 10);
+    if (Number.isFinite(value) && value > 0) {
+      return value;
+    }
+    return DEFAULT_STACK_DEPTH;
+  }
+  /**
+   * Set stack position of the toast.
+   * @param value
+   */
+  set stackPosition(value) {
+    if (!value) {
+      this.removeAttribute("stack-position");
+      return;
+    }
+    this.setAttribute("stack-position", value);
+  }
+  /**
+   * Get stack position of the toast.
+   * @returns {string}
+   */
+  get stackPosition() {
+    let value = this.getAttribute("stack-position");
+    if (VALID_STACK_POSITIONS.has(value)) {
+      return value;
+    }
+    if (this.getAttribute("position") === "bottom") {
+      return "bottom-end";
+    }
+    return DEFAULT_STACK_POSITION;
+  }
   /**
    * Set icon value of the toast.
    * @param value
@@ -180,6 +323,222 @@ class Toast extends WJElement {
   get icon() {
     return this.getAttribute("icon");
   }
+  /**
+   * Creates a toast stack container.
+   * @returns {HTMLDivElement}
+   */
+  createToastStack() {
+    let stack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
+    stack.addEventListener("mouseenter", () => setStackExpandedState(stack, true));
+    stack.addEventListener("mouseleave", () => requestAnimationFrame(() => syncStackExpandedState(stack)));
+    stack.addEventListener("focusin", () => setStackExpandedState(stack, true));
+    stack.addEventListener("focusout", () => requestAnimationFrame(() => syncStackExpandedState(stack)));
+    this.syncToastStack(stack);
+    return stack;
+  }
+  /**
+   * Returns the key of the toast stack.
+   * @returns {string}
+   */
+  getToastStackKey() {
+    return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : "default"}`;
+  }
+  /**
+   * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.
+   * @param {HTMLDivElement} stack
+   */
+  applyToastStackPlacement(stack = this.toastStack) {
+    const positions = {
+      "top-start": {
+        top: "0",
+        bottom: "auto",
+        left: "0",
+        right: "auto",
+        transform: "none",
+        margin: "0.5rem"
+      },
+      "top-center": {
+        top: "0",
+        bottom: "auto",
+        left: "50%",
+        right: "auto",
+        transform: "translateX(-50%)",
+        margin: "0.5rem 0 0"
+      },
+      "top-end": {
+        top: "0",
+        bottom: "auto",
+        left: "auto",
+        right: "0",
+        transform: "none",
+        margin: "0.5rem"
+      },
+      "bottom-start": {
+        top: "auto",
+        bottom: "0",
+        left: "0",
+        right: "auto",
+        transform: "none",
+        margin: "0 0.5rem 0.5rem"
+      },
+      "bottom-center": {
+        top: "auto",
+        bottom: "0",
+        left: "50%",
+        right: "auto",
+        transform: "translateX(-50%)",
+        margin: "0 0 0.5rem"
+      },
+      "bottom-end": {
+        top: "auto",
+        bottom: "0",
+        left: "auto",
+        right: "0",
+        transform: "none",
+        margin: "0 0.5rem 0.5rem"
+      }
+    };
+    stack.style.removeProperty("inset-inline");
+    stack.style.removeProperty("inset-inline-start");
+    stack.style.removeProperty("inset-inline-end");
+    Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);
+  }
+  /**
+   * Applies the current toast stack configuration to a stack element.
+   * @param {HTMLDivElement} stack
+   */
+  syncToastStack(stack = this.toastStack) {
+    stack.dataset.position = this.stackPosition;
+    stack.dataset.stackKey = this.getToastStackKey();
+    stack.updateToastLayout = () => this.updateToastStack(stack);
+    stack.style.display = "flex";
+    stack.style.alignItems = "stretch";
+    stack.style.width = "min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))";
+    stack.style.maxWidth = "calc(100vw - 1rem)";
+    stack.style.maxHeight = "calc(100vh - 1rem)";
+    stack.style.zIndex = "9999";
+    this.applyToastStackPlacement(stack);
+    if (this.stacked) {
+      stack.dataset.stacked = "true";
+      stack.dataset.stackDepth = String(this.stackDepth);
+    } else {
+      delete stack.dataset.stacked;
+      delete stack.dataset.stackDepth;
+      delete stack.dataset.expanded;
+    }
+  }
+  /**
+   * Clears transient stack styling from a toast.
+   * @param {Toast} toast
+   */
+  clearStackItemStyles(toast) {
+    [
+      "--wje-toast-stack-scale",
+      "--wje-toast-stack-shift",
+      "--wje-toast-stack-opacity",
+      "--wje-toast-stack-z",
+      "--wje-toast-stack-origin",
+      "--wje-toast-stack-host-margin-top",
+      "--wje-toast-stack-host-margin-bottom",
+      "order",
+      "position",
+      "top",
+      "left",
+      "right",
+      "width",
+      "margin",
+      "margin-top",
+      "margin-bottom"
+    ].forEach((property) => toast.style.removeProperty(property));
+  }
+  /**
+   * Measures the rendered height of a toast for stack overlap calculations.
+   * @param {Toast} toast
+   * @returns {number}
+   */
+  getToastVisualHeight(toast) {
+    var _a, _b;
+    let hostHeight = toast.getBoundingClientRect().height;
+    let nativeHeight = ((_b = (_a = toast.shadowRoot) == null ? void 0 : _a.querySelector(".native-toast")) == null ? void 0 : _b.getBoundingClientRect().height) || 0;
+    return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);
+  }
+  /**
+   * Recomputes the visual order of toasts inside the stack.
+   * @param {HTMLDivElement} stack
+   */
+  updateToastStack(stack = this.toastStack) {
+    var _a, _b;
+    let toasts = Array.from(stack.children).filter((child) => child.tagName === "WJE-TOAST");
+    let isStacked = stack.dataset.stacked === "true";
+    let isExpanded = stack.dataset.expanded === "true";
+    let isBottomStack = (_a = stack.dataset.position) == null ? void 0 : _a.startsWith("bottom");
+    let transformOrigin = ((_b = stack.dataset.position) == null ? void 0 : _b.startsWith("bottom")) ? "center bottom" : "center top";
+    let stackHeight = 0;
+    stack.dataset.count = String(toasts.length);
+    stack.style.gap = "var(--wje-spacing-x-small)";
+    stack.style.flexDirection = "column";
+    stack.style.overflow = isStacked ? isExpanded ? "auto" : "visible" : "auto";
+    if (isStacked) {
+      stack.style.paddingTop = isExpanded ? isBottomStack ? STACKED_PADDING : "0px" : STACKED_PADDING;
+      stack.style.paddingBottom = isExpanded ? isBottomStack ? "0px" : STACKED_PADDING : STACKED_PADDING;
+    } else {
+      stack.style.removeProperty("padding-top");
+      stack.style.removeProperty("padding-bottom");
+    }
+    if (!isStacked || isExpanded) {
+      stack.style.removeProperty("height");
+    }
+    toasts.forEach((toast, index) => {
+      this.clearStackItemStyles(toast);
+      toast.style.setProperty("--wje-toast-stack-z", String(index + 1));
+      if (!isStacked) {
+        return;
+      }
+      if (isExpanded) {
+        let visualOrder = isBottomStack ? index : toasts.length - index - 1;
+        let isVisualFirst = visualOrder === 0;
+        let isVisualLast = visualOrder === toasts.length - 1;
+        toast.style.setProperty("--wje-toast-stack-scale", "1.000");
+        toast.style.setProperty("--wje-toast-stack-shift", "0px");
+        toast.style.setProperty("--wje-toast-stack-opacity", "1.000");
+        toast.style.setProperty("--wje-toast-stack-origin", transformOrigin);
+        toast.style.order = String(visualOrder);
+        toast.style.width = "100%";
+        toast.style.setProperty(
+          "--wje-toast-stack-host-margin-top",
+          isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : "0px"
+        );
+        toast.style.setProperty(
+          "--wje-toast-stack-host-margin-bottom",
+          !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : "0px"
+        );
+        return;
+      }
+      let toastHeight = this.getToastVisualHeight(toast);
+      let maxDepth = Math.max(0, this.stackDepth - 1);
+      let visibleLevels = Math.min(toasts.length, this.stackDepth);
+      let depth = Math.min(toasts.length - index - 1, maxDepth);
+      let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));
+      let targetTop = isBottomStack ? visibleIndex * STACKED_VISIBLE_SLICE : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;
+      let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);
+      let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);
+      toast.style.setProperty("--wje-toast-stack-scale", scale.toFixed(3));
+      toast.style.setProperty("--wje-toast-stack-shift", "0px");
+      toast.style.setProperty("--wje-toast-stack-opacity", opacity.toFixed(3));
+      toast.style.setProperty("--wje-toast-stack-origin", transformOrigin);
+      toast.style.position = "absolute";
+      toast.style.top = `${targetTop}px`;
+      toast.style.left = "0";
+      toast.style.right = "0";
+      toast.style.width = "100%";
+      toast.style.setProperty("--wje-toast-stack-host-margin-top", "0px");
+      toast.style.setProperty("--wje-toast-stack-host-margin-bottom", "0px");
+      stackHeight = Math.max(stackHeight, targetTop + toastHeight);
+    });
+    if (isStacked && !isExpanded) {
+      stack.style.height = `${stackHeight}px`;
+    }
+  }
   /**
    * Returns the CSS stylesheet for the component.
    * @static
@@ -294,6 +653,7 @@ class Toast extends WJElement {
     if (this.timeoutID) {
       clearTimeout(this.timeoutID);
     }
+    this.isTimerPaused = false;
     this.timeoutID = window.setTimeout(() => {
       this.hide();
     }, this.remainingTime);
@@ -304,11 +664,14 @@ class Toast extends WJElement {
    * The method is called when the toast notification is paused.
    */
   stopTimer() {
-    if (this.timeoutID) {
-      window.clearTimeout(this.timeoutID);
+    if (!this.timeoutID || this.isTimerPaused) {
+      return;
     }
+    window.clearTimeout(this.timeoutID);
+    this.timeoutID = null;
     const elapsedTime = Date.now() - this.startTime;
-    this.remainingTime -= elapsedTime;
+    this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);
+    this.isTimerPaused = true;
   }
   /**
    * Resumes the timer.
@@ -316,7 +679,7 @@ class Toast extends WJElement {
    * than zero. The method is called when the toast notification is resumed.
    */
   resumeTimer() {
-    if (this.remainingTime > 0) {
+    if (this.isTimerPaused && this.remainingTime > 0) {
       this.startTimer();
     }
   }
@@ -328,7 +691,16 @@ class Toast extends WJElement {
    * empty.
    */
   removeChildAndStack() {
-    this.toastStack.removeChild(this);
+    if (this.parentElement === this.toastStack) {
+      this.toastStack.removeChild(this);
+    }
+    this.toastStack.style.setProperty("--wje-toast-stack-layout-duration", "0s");
+    this.toastStack.style.setProperty("--wje-toast-stack-visual-duration", "0s");
+    this.updateToastStack(this.toastStack);
+    requestAnimationFrame(() => {
+      this.toastStack.style.removeProperty("--wje-toast-stack-layout-duration");
+      this.toastStack.style.removeProperty("--wje-toast-stack-visual-duration");
+    });
     if (this.toastStack.querySelector("wje-toast") === null) {
       this.toastStack.remove();
     }