wj-elements 0.2.0-alpha.9 → 0.3.0-alpha.2

package/dist/wje-textarea.js

@@ -1,10 +1,10 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
+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";
-class Textarea extends FormAssociatedElement {
+const _Textarea = class _Textarea extends FormAssociatedElement {
   /**
    * Creates an instance of Textarea.
    * @class
@@ -30,6 +30,7 @@ class Textarea extends FormAssociatedElement {
     });
     this.invalid = false;
     this.pristine = true;
+    this._instanceId = ++_Textarea._instanceId;
   }
   /**
    * Setter for the value attribute.
@@ -40,6 +41,7 @@ class Textarea extends FormAssociatedElement {
     if (this.input) this.input.value = value;
     this.pristine = false;
     this._value = value;
+    this.syncAria();
   }
   /**
    * Getter for the value attribute.
@@ -49,6 +51,25 @@ class Textarea extends FormAssociatedElement {
     var _a;
     return ((_a = this.input) == null ? void 0 : _a.value) ?? this._value ?? "";
   }
+  /**
+   * Sets the label attribute of the element.
+   * @param {string} value The value to set as the label attribute.
+   */
+  set label(value) {
+    if (value === null || value === void 0) {
+      this.removeAttribute("label");
+    } else {
+      this.setAttribute("label", value);
+    }
+  }
+  /**
+   * Retrieves the value of the 'label' attribute if it exists.
+   * If the 'label' attribute is not set, it returns false.
+   * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+   */
+  get label() {
+    return this.getAttribute("label") || false;
+  }
   /**
    * Sets the `validateOnChange` property. If set to a truthy value, it adds the
    * `validate-on-change` attribute to the element. If set to a falsy value, it
@@ -91,7 +112,7 @@ class Textarea extends FormAssociatedElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return [];
+    return ["value", "name", "disabled", "placeholder", "label", "required", "readonly", "invalid", "rows"];
   }
   /**
    * Sets up the attributes for the component.
@@ -99,9 +120,40 @@ class Textarea extends FormAssociatedElement {
   setupAttributes() {
     this.isShadowRoot = "open";
     if (this.pristine) {
-      this.value = this.innerHTML;
+      const attrValue = this.getAttribute("value");
+      this.value = attrValue !== null ? attrValue : this.innerHTML;
       this.pristine = false;
     }
+    this.syncAria();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "label") {
+      this.refresh();
+      return;
+    }
+    if (!this.input) {
+      this.syncAria();
+      return;
+    }
+    if (name === "value") {
+      this._value = newValue ?? "";
+      this.input.value = this.value;
+      this.internals.setFormValue(this.value);
+    } else if (name === "name") {
+      this.input.name = this.name;
+    } else if (name === "disabled") {
+      this.input.disabled = this.hasAttribute("disabled");
+    } else if (name === "required") {
+      this.input.required = this.required;
+    } else if (name === "readonly") {
+      this.input.readOnly = this.hasAttribute("readonly");
+    } else if (name === "placeholder") {
+      this.input.placeholder = this.placeholder || "";
+    } else if (name === "rows") {
+      this.input.rows = Number(newValue || 3);
+    }
+    this.syncAria();
   }
   /**
    * Draws the component for the textarea.
@@ -130,7 +182,7 @@ class Textarea extends FormAssociatedElement {
     input.placeholder = this.placeholder || "";
     input.classList.add("form-control");
     input.setAttribute("part", "input");
-    input.setAttribute("rows", this.rows || 3);
+    input.rows = Number(this.getAttribute("rows") || 3);
     input.setAttribute("spellcheck", false);
     const attributes = Array.from(this.attributes).map((attr) => attr.name);
     attributes.forEach((attr) => {
@@ -142,11 +194,15 @@ class Textarea extends FormAssociatedElement {
     error.setAttribute("slot", "error");
     let errorSlot = document.createElement("slot");
     errorSlot.setAttribute("name", "error");
-    if (this.resize === "auto") input.addEventListener("input", this.setTextareaHeight);
-    if (this.variant === "standard") {
-      if (this.label) native.appendChild(label);
-    } else {
-      inputWrapper.appendChild(label);
+    this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;
+    errorSlot.id = this._ariaErrorId;
+    if (this.getAttribute("resize") === "auto") input.addEventListener("input", this.setTextareaHeight);
+    if (this.label) {
+      if (this.variant === "standard") {
+        native.appendChild(label);
+      } else {
+        inputWrapper.appendChild(label);
+      }
     }
     inputWrapper.appendChild(input);
     wrapper.appendChild(inputWrapper);
@@ -166,13 +222,17 @@ class Textarea extends FormAssociatedElement {
     this.native = native;
     this.labelElement = label;
     this.input = input;
+    this.syncAria();
     return fragment;
   }
   /**
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);
+    if (this.getAttribute("resize") === "auto" && typeof ResizeObserver === "function") {
+      this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+      this.resizeObserver.observe(this.input);
+    }
     if (!this.hasAttribute("disabled")) {
       event.addListener(this, "click", "wje-textarea:change");
       event.addListener(this, "click", "wje-textarea:input");
@@ -213,19 +273,41 @@ class Textarea extends FormAssociatedElement {
       }
     });
     this.validate();
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    const requiredInvalid = this.required && !this.value;
+    const invalid = this.invalid || requiredInvalid;
+    const label = this.label && this.label !== false ? this.label.trim() : "";
+    this.setAriaState({
+      role: "textbox",
+      disabled: this.disabled,
+      required: this.required,
+      readonly: this.hasAttribute("readonly"),
+      invalid,
+      describedBy: this._ariaErrorId,
+      ...label ? { label } : {}
+    });
   }
   componentCleanup() {
-    var _a;
+    var _a, _b;
     (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
+    (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
   }
   /**
    * Disconnects the component.
    */
   beforeDisconnect() {
-    var _a;
+    var _a, _b;
     (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
+    (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
   }
-}
+};
+__publicField(_Textarea, "_instanceId", 0);
+let Textarea = _Textarea;
 Textarea.define("wje-textarea", Textarea);
 export {
   Textarea as default

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    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\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    }\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 `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 [];\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            this.value = this.innerHTML;\n            this.pristine = false;\n        }\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.setAttribute('rows', this.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\n        if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.variant === 'standard') {\n            if (this.label) native.appendChild(label);\n        } else {\n            inputWrapper.appendChild(label);\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        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\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\n    componentCleanup() {\n        this.resizeObserver?.unobserve(this.input);\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\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-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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"}

package/dist/wje-thumbnail.js

@@ -35,6 +35,7 @@ class Thumbnail extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the thumbnail.
@@ -46,6 +47,24 @@ class Thumbnail extends WJElement {
     fragment.appendChild(element);
     return fragment;
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    const ariaLabel = this.getAttribute("aria-label");
+    const label = this.getAttribute("label");
+    if (ariaLabel || label) {
+      if (!this.hasAttribute("role")) {
+        this.setAttribute("role", "img");
+      }
+      if (!ariaLabel && label) {
+        this.setAriaState({ label });
+      }
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
 }
 Thumbnail.define("wje-thumbnail", Thumbnail);
 export {

package/dist/wje-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n */\n\nexport default class Thumbnail extends WJElement {\n    /**\n     * Creates an instance of Thumbnail.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component\n     */\n    className = 'Thumbnail';\n\n    /**\n     * Returns the CSS stylesheet 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 observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the thumbnail.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAO;AAMX;AAAA;AAAA;AAAA,qCAAY;AAAA,EALhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AC9DA,UAAU,OAAO,iBAAiB,SAAS;"}
+{"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n */\n\nexport default class Thumbnail extends WJElement {\n    /**\n     * Creates an instance of Thumbnail.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component\n     */\n    className = 'Thumbnail';\n\n    /**\n     * Returns the CSS stylesheet 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 observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the thumbnail.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n\n        if (ariaLabel || label) {\n            if (!this.hasAttribute('role')) {\n                this.setAttribute('role', 'img');\n            }\n            if (!ariaLabel && label) {\n                this.setAriaState({ label });\n            }\n            this.removeAttribute('aria-hidden');\n        } else {\n            this.setAttribute('aria-hidden', 'true');\n        }\n    }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AAMT;AAAA;AAAA;AAAA,qCAAY;AAAA,EALZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AAEvC,QAAI,aAAa,OAAO;AACpB,UAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,aAAK,aAAa,QAAQ,KAAK;AAAA,MACnC;AACA,UAAI,CAAC,aAAa,OAAO;AACrB,aAAK,aAAa,EAAE,OAAO;AAAA,MAC/B;AACA,WAAK,gBAAgB,aAAa;AAAA,IACtC,OAAO;AACH,WAAK,aAAa,eAAe,MAAM;AAAA,IAC3C;AAAA,EACJ;AACJ;ACnFA,UAAU,OAAO,iBAAiB,SAAS;"}

package/dist/wje-toast.js

@@ -193,6 +193,9 @@ class Toast extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({
+      role: "status"
+    });
   }
   /**
    * Draw method for the toast notification.
@@ -223,6 +226,7 @@ class Toast extends WJElement {
     closeBtn.setAttribute("color", this.color);
     closeBtn.setAttribute("size", "small");
     closeBtn.classList.add("close");
+    closeBtn.setAttribute("aria-label", "Close");
     let countdownEl = document.createElement("div");
     countdownEl.classList.add("countdown");
     let countdownBar = document.createElement("div");

package/dist/wje-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (this.timeoutID) {\n            window.clearTimeout(this.timeoutID);\n        }\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime -= elapsedTime;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        this.toastStack.removeChild(this);\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector('.wje-toast-stack');\n            if (stack) {\n                this.toastStack = stack;\n            }\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n\n            this.show();\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'status',\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n        closeBtn.setAttribute('aria-label', 'Close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (this.timeoutID) {\n            window.clearTimeout(this.timeoutID);\n        }\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime -= elapsedTime;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        this.toastStack.removeChild(this);\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector('.wje-toast-stack');\n            if (stack) {\n                this.toastStack = stack;\n            }\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n\n            this.show();\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}

package/dist/wje-toggle.js

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _internalValue;
-import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
+import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n\n    label {\n        display: flex;\n        cursor: pointer;\n        align-items: center;\n        user-select: none;\n\n        .label-wrapper {\n            width: var(--wje-toggle-width) !important;\n            min-width: var(--wje-toggle-width);\n            height: var(--wje-toggle-height);\n            position: relative;\n            display: flex;\n            align-items: center;\n\n            &:before {\n                content: '';\n                position: absolute;\n                cursor: pointer;\n                width: 100%;\n                height: 100%;\n                top: auto;\n                left: 0;\n                background: var(--wje-toggle-color-base);\n                background-size: 300%;\n                background-position: right;\n                border-radius: var(--wje-toggle-border-radius);\n                border: none;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                transition: background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n\n            &:after {\n                content: '';\n                position: absolute;\n                transform: translateX(0%);\n                background: var(--wje-toggle-handle-color);\n                width: var(--wje-toggle-handle-width);\n                height: var(--wje-toggle-handle-height);\n                border-radius: var(--wje-toggle-handle-border-radius);\n                top: auto;\n                left: 2px;\n                box-shadow: var(--wje-toggle-handle-shadow);\n                transition: transform, box-shadow;\n                transition-duration: var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n        }\n    }\n\n    input[type='checkbox'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-9);\n            opacity: 0.58;\n\n            &:before {\n                cursor: not-allowed !important;\n            }\n        }\n    }\n\n    input[type='checkbox'] {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n\n        &:checked {\n            & + label {\n                .label-wrapper:before {\n                    background-position: left;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                }\n\n                .label-wrapper:after {\n                    transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                    box-shadow: var(--wje-toggle-handle-shadow-checked);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .label-wrapper:before {\n                    outline: none !important;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n                }\n            }\n        }\n\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: scaleX(1.1);\n                    transform-origin: center left;\n                    transition: transform step-start;\n                }\n            }\n        }\n\n        &:checked {\n            &[disabled]:active {\n                & + label {\n                    .label-wrapper:after {\n                        transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                        transform-origin: center right;\n                    }\n                }\n            }\n        }\n\n        &:hover {\n            &:active {\n                & + label {\n                    .label-wrapper:before {\n                        background-color: transparent;\n                    }\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\n:host([invalid]) {\n    label{\n        color: var(--wje-input-color-invalid);\n    }\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    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n";
 class Toggle extends FormAssociatedElement {
@@ -101,6 +101,7 @@ class Toggle extends FormAssociatedElement {
       this.value = __privateGet(this, _internalValue);
       this.pristine = false;
     }
+    this.syncAria();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.input) return;
@@ -123,6 +124,7 @@ class Toggle extends FormAssociatedElement {
         this.internals.setFormValue(this.value);
       }
     }
+    this.syncAria();
   }
   draw() {
     const fragment = document.createDocumentFragment();
@@ -167,6 +169,7 @@ class Toggle extends FormAssociatedElement {
   }
   afterDraw() {
     this.internals.setFormValue(this.checked ? this.value : null);
+    this.syncAria();
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {
         this.validate();
@@ -174,6 +177,7 @@ class Toggle extends FormAssociatedElement {
         this.propagateValidation();
         this.indeterminate = false;
         this.checked = e.target.checked;
+        this.syncAria();
         event.dispatchCustomEvent(this, "wje-toggle:input");
       });
       this.input.addEventListener("change", (e) => {
@@ -190,6 +194,18 @@ class Toggle extends FormAssociatedElement {
       }
     }
   }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "switch",
+      checked: this.checked,
+      disabled: this.disabled,
+      required: this.required,
+      invalid: this.invalid
+    });
+  }
   /**
    * Removes the event listener when the checkbox is disconnected.
    */

package/dist/wje-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends FormAssociatedElement {\n    #internalValue;\n\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        if (this.input) {\n            this.input.value = value;\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\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    /**\n     * Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n            this.internals.setFormValue(this.value); // len ak je checked\n        } else {\n            this.removeAttribute('checked');\n            this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n        }\n        if (this.input) {\n            this.input.checked = value;\n        }\n    }\n\n    /**\n     * Get checked attribute.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'required'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.#internalValue;\n            this.pristine = false;\n        }\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (!this.input) return;\n        if (name === 'checked') {\n            const isChecked = this.hasAttribute('checked');\n            this.input.checked = isChecked;\n            // Reflect into form value\n            if (isChecked) {\n                this.internals.setFormValue(this.value);\n            } else {\n                this.internals.setFormValue(null);\n            }\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'indeterminate') {\n            this.input.indeterminate = this.hasAttribute('indeterminate');\n        } else if (name === 'value') {\n            // keep payload in sync; do not toggle checked here\n            this.#internalValue = newValue ?? undefined;\n            this.input.value = this.value;\n            // If currently checked, update the submitted payload\n            if (this.input.checked) {\n                this.internals.setFormValue(this.value);\n            }\n        }\n    }\n\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toggle');\n\n        const input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.type = 'checkbox';\n        input.name = this.name;\n        input.id = 'input';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        if (this.hasAttribute('required')) input.required = true;\n\n        const label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        const toggle = document.createElement('div');\n        toggle.setAttribute('part', 'toggle');\n        toggle.classList.add('label-wrapper');\n\n        const text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        // APPEND\n        if (this.placement === 'end') {\n            native.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(toggle);\n        } else {\n            label.appendChild(toggle);\n            label.appendChild(text);\n        }\n\n        native.appendChild(input);\n        native.appendChild(label);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    afterDraw() {\n        this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.validate();\n\n                this.pristine = false;\n                this.propagateValidation();\n\n                this.indeterminate = false;\n                this.checked = e.target.checked;\n\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n\n            this.addEventListener('invalid', (e) => {\n                this.invalid = true;\n                this.pristine = false;\n\n                this.showInvalidMessage();\n            });\n\n            this.validate();\n\n            if (this.invalid) {\n                this.showInvalidMessage();\n            }\n        }\n    }\n\n    /**\n     * Removes the event listener when the checkbox is disconnected.\n     */\n    beforeDisconnect() {\n        event.removeElement(this.input);\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends FormAssociatedElement {\n    #internalValue;\n\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        if (this.input) {\n            this.input.value = value;\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\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    /**\n     * Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n            this.internals.setFormValue(this.value); // len ak je checked\n        } else {\n            this.removeAttribute('checked');\n            this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n        }\n        if (this.input) {\n            this.input.checked = value;\n        }\n    }\n\n    /**\n     * Get checked attribute.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'required'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.#internalValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (!this.input) return;\n        if (name === 'checked') {\n            const isChecked = this.hasAttribute('checked');\n            this.input.checked = isChecked;\n            // Reflect into form value\n            if (isChecked) {\n                this.internals.setFormValue(this.value);\n            } else {\n                this.internals.setFormValue(null);\n            }\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'indeterminate') {\n            this.input.indeterminate = this.hasAttribute('indeterminate');\n        } else if (name === 'value') {\n            // keep payload in sync; do not toggle checked here\n            this.#internalValue = newValue ?? undefined;\n            this.input.value = this.value;\n            // If currently checked, update the submitted payload\n            if (this.input.checked) {\n                this.internals.setFormValue(this.value);\n            }\n        }\n        this.syncAria();\n    }\n\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toggle');\n\n        const input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.type = 'checkbox';\n        input.name = this.name;\n        input.id = 'input';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        if (this.hasAttribute('required')) input.required = true;\n\n        const label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        const toggle = document.createElement('div');\n        toggle.setAttribute('part', 'toggle');\n        toggle.classList.add('label-wrapper');\n\n        const text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        // APPEND\n        if (this.placement === 'end') {\n            native.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(toggle);\n        } else {\n            label.appendChild(toggle);\n            label.appendChild(text);\n        }\n\n        native.appendChild(input);\n        native.appendChild(label);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    afterDraw() {\n        this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n        this.syncAria();\n\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.validate();\n\n                this.pristine = false;\n                this.propagateValidation();\n\n                this.indeterminate = false;\n                this.checked = e.target.checked;\n                this.syncAria();\n\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n\n            this.addEventListener('invalid', (e) => {\n                this.invalid = true;\n                this.pristine = false;\n\n                this.showInvalidMessage();\n            });\n\n            this.validate();\n\n            if (this.invalid) {\n                this.showInvalidMessage();\n            }\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'switch',\n            checked: this.checked,\n            disabled: this.disabled,\n            required: this.required,\n            invalid: this.invalid,\n        });\n    }\n\n    /**\n     * Removes the event listener when the checkbox is disconnected.\n     */\n    beforeDisconnect() {\n        event.removeElement(this.input);\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":"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"}

package/dist/wje-toolbar-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\n\n    /**\n     * Returns the CSS stylesheet 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 observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the toolbar action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let maxItems = +this.maxItems || 0;\n        let actions = this.getActions();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        const shouldCollapse = maxItems !== 0 && actions.length > maxItems;\n        if (shouldCollapse) {\n            element = document.createElement('wje-dropdown');\n        }\n\n        element.appendChild(slot);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array} An array of wje-button elements\n     */\n    getActions() {\n        return Array.from(this.querySelectorAll('wje-button'));\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":";;;;;AAae,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,WAAW,CAAC,KAAK,YAAY;AACjC,QAAI,UAAU,KAAK,WAAY;AAE/B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,UAAM,iBAAiB,aAAa,KAAK,QAAQ,SAAS;AAC1D,QAAI,gBAAgB;AAChB,gBAAU,SAAS,cAAc,cAAc;AAAA,IAC3D;AAEQ,YAAQ,YAAY,IAAI;AAExB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAAA,EAC7D;AACA;ACnFA,cAAc,OAAO,sBAAsB,aAAa;"}
+{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\n\n    /**\n     * Returns the CSS stylesheet 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 observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the toolbar action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let maxItems = +this.maxItems || 0;\n        let actions = this.getActions();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        const shouldCollapse = maxItems !== 0 && actions.length > maxItems;\n        if (shouldCollapse) {\n            element = document.createElement('wje-dropdown');\n        }\n\n        element.appendChild(slot);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array} An array of wje-button elements\n     */\n    getActions() {\n        return Array.from(this.querySelectorAll('wje-button'));\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":";;;;;AAae,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,WAAW,CAAC,KAAK,YAAY;AACjC,QAAI,UAAU,KAAK,WAAU;AAE7B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,UAAM,iBAAiB,aAAa,KAAK,QAAQ,SAAS;AAC1D,QAAI,gBAAgB;AAChB,gBAAU,SAAS,cAAc,cAAc;AAAA,IACnD;AAEA,YAAQ,YAAY,IAAI;AAExB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAAA,EACzD;AACJ;ACnFA,cAAc,OAAO,sBAAsB,aAAa;"}