wj-elements 0.4.8 → 0.5.1

package/dist/wje-img.js

@@ -113,6 +113,24 @@ class Img extends WJElement {
   get loader() {
     return this.getAttribute("loader") || "./assets/img/image-loader.gif";
   }
+  /**
+   * Enables or disables lazy loading for the image.
+   * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.
+   */
+  set noLazy(value) {
+    if (value) {
+      this.setAttribute("no-lazy", "");
+    } else {
+      this.removeAttribute("no-lazy");
+    }
+  }
+  /**
+   * Checks whether lazy loading is disabled.
+   * @returns {boolean} True when the `no-lazy` attribute is present.
+   */
+  get noLazy() {
+    return this.hasAttribute("no-lazy");
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -127,7 +145,7 @@ class Img extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["src", "alt"];
+    return ["src", "alt", "no-lazy"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     var _a, _b;
@@ -157,7 +175,7 @@ class Img extends WJElement {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("img");
     native.setAttribute("part", "native");
-    native.setAttribute("src", this.loader);
+    native.setAttribute("src", this.noLazy ? this.src : this.loader);
     native.setAttribute("alt", this.alt || "");
     native.classList.add("lazy-loaded-image", "lazy");
     native.addEventListener("error", (e) => {
@@ -179,6 +197,10 @@ class Img extends WJElement {
    * @returns {void} Does not return a value.
    */
   afterDraw() {
+    if (this.noLazy) {
+      this.native.classList.remove("lazy");
+      return;
+    }
     let lazyImageObserver = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {

package/dist/wje-img.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.\n * @property {string} loader - The URL of the image loader to display while the image is loading.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\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 ['src', 'alt'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.\n * @property {string} loader - The URL of the image loader to display while the image is loading.\n * @property {boolean} noLazy - Disables lazy loading and renders the image source immediately.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\n    }\n\n    /**\n     * Enables or disables lazy loading for the image.\n     * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.\n     */\n    set noLazy(value) {\n        if (value) {\n            this.setAttribute('no-lazy', '');\n        } else {\n            this.removeAttribute('no-lazy');\n        }\n    }\n\n    /**\n     * Checks whether lazy loading is disabled.\n     * @returns {boolean} True when the `no-lazy` attribute is present.\n     */\n    get noLazy() {\n        return this.hasAttribute('no-lazy');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\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 ['src', 'alt', 'no-lazy'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.noLazy ? this.src : this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.noLazy) {\n            this.native.classList.remove('lazy');\n            return;\n        }\n\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,cAAc;AACV,UAAK;AAyGT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAgGZ,6CAAoB,CAAC,QAAQ,UAAU;AACnC,UAAI,SAAS,KAAK;AAClB,WAAI,iCAAQ,aAAY,aAAc,QAAO,WAAW;AAAA,IAC5D;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,MAAM;AAChB,WAAK,OAAM;AAAA,IACf;AAsCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,QAAQ;AACnB,UAAI,CAAC,KAAK,QAAS;AACnB,UAAI,KAAK,QAAQ,KAAK,OAAO,GAAG;AAC5B,YAAI,UAAU,KAAK,QAAQ,KAAK,OAAO;AAAA,MAC3C,OAAO;AACH,gBAAQ,MAAM,sBAAsB,KAAK,OAAO;AAAA,MACpD;AAAA,IACJ;AA/PI,SAAK,WAAW;AAEhB,SAAK,UAAU;AAAA,MACX,QAAQ,MAAM,KAAK,YAAW;AAAA,MAC9B,KAAK,MAAM,QAAQ,MAAM,0BAA0B,KAAK,GAAG;AAAA,IACvE;AAAA,EACI;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,IAAI,OAAO;AACX,SAAK,aAAa,OAAO,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM;AACN,WAAO,KAAK,aAAa,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,IAAI,OAAO;AACX,SAAK,aAAa,OAAO,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM;AACN,WAAO,KAAK,aAAa,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO,UAAU,UAAU;AAC3B,WAAK,aAAa,WAAW,KAAK;AAAA,IACtC,OAAO;AACH,WAAK,WAAW;AAAA,IACpB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,IAAI,KAAK,aAAa,SAAS,IAAI,KAAK;AAAA,EAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO,OAAO;AACd,QAAI,OAAO;AACP,WAAK,aAAa,UAAU,KAAK;AAAA,IACrC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO,OAAO;AACd,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IACnC,OAAO;AACH,WAAK,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,OAAO,OAAO,SAAS;AAAA,EACnC;AAAA,EAEA,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,aAAa,SAAU;AAC3B,QAAI,SAAS,OAAO;AAChB,UAAI,KAAK,OAAQ,MAAK,OAAO,aAAa,OAAO,KAAK,OAAO,EAAE;AAC/D,YAAM,SAAQ,UAAK,QAAL,mBAAU;AACxB,UAAI,MAAO,MAAK,aAAa,EAAE,MAAK,CAAE;AAAA,IAC1C;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,MAAK,CAAE;AACjC,SAAI,UAAK,QAAL,mBAAU,OAAQ,MAAK,aAAa,EAAE,OAAO,KAAK,IAAI,KAAI,EAAE,CAAE;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,OAAO,KAAK,SAAS,KAAK,MAAM,KAAK,MAAM;AAC/D,WAAO,aAAa,OAAO,KAAK,OAAO,EAAE;AACzC,WAAO,UAAU,IAAI,qBAAqB,MAAM;AAChD,WAAO,iBAAiB,SAAS,CAAC,MAAM;AACpC,YAAM,oBAAoB,IAAI,IAAI,KAAK,QAAQ,OAAO,SAAS,MAAM,EAAE;AACvE,UAAI,EAAE,OAAO,QAAQ,kBAAmB;AAExC,WAAK,kBAAkB,IAAI;AAAA,IAC/B,CAAC;AAED,SAAK,YAAY,MAAM;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AAEd,SAAI,UAAK,QAAL,mBAAU,OAAQ,MAAK,aAAa,EAAE,OAAO,KAAK,IAAI,KAAI,EAAE,CAAE;AAElE,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,YAAY;AACR,QAAI,KAAK,QAAQ;AACb,WAAK,OAAO,UAAU,OAAO,MAAM;AACnC;AAAA,IACJ;AAEA,QAAI,oBAAoB,IAAI,qBAAqB,CAAC,SAAS,aAAa;AACpE,cAAQ,QAAQ,CAAC,UAAU;AACvB,YAAI,MAAM,gBAAgB;AACtB,gBAAM,OAAO,MAAM,KAAK;AACxB,eAAK,UAAU,OAAO,MAAM;AAE5B,4BAAkB,UAAU,MAAM,MAAM;AAAA,QAC5C;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,sBAAkB,QAAQ,KAAK,MAAM;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBA,UAAU,MAAM,MAAM;AAClB,QAAI,OAAO,SAAS,YAAY;AAC5B,WAAK,QAAQ,IAAI,IAAI;AAAA,IACzB,OAAO;AACH,cAAQ,MAAM,gCAAgC;AAAA,IAClD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,MAAM;AACf,QAAI,KAAK,QAAQ,IAAI,GAAG;AACpB,aAAO,KAAK,QAAQ,IAAI;AAAA,IAC5B,OAAO;AACH,cAAQ,MAAM,WAAW,IAAI,mBAAmB;AAAA,IACpD;AAAA,EACJ;AAmBJ;ACrRA,IAAI,OAAO,WAAW,GAAG;"}

package/dist/wje-input.js

@@ -10,7 +10,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _Input_instances, syncNativeAttribute_fn;
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\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            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\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                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: var(--wje-input-clear-inline-end, 0);\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([clearable]) .native-input.focused .clear,\n:host([clearable]) .input-wrapper:hover .clear {\n    visibility: visible;\n}\n\n:host([clearable][type='number']) .clear {\n    right: var(--wje-input-number-control-width, 1.75rem);\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([invalid]) {\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::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n:host([clearable]) input {\n    box-sizing: border-box;\n    padding-inline-end: calc(var(--wje-input-clear-size, 2rem) + 0.5rem);\n}\n\n:host([clearable][type='number']) input {\n    padding-inline-end: 0.5rem;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-input-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-input-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
+const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    --wje-input-clear-size: 1.625rem;\n    --wje-input-clear-gap: 0.5rem;\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\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            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\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                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: var(--wje-input-clear-inline-end, 0);\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([clearable]) .native-input.focused .clear,\n:host([clearable]) .input-wrapper:hover .clear {\n    visibility: visible;\n}\n\n:host([clearable][type='number']) .clear {\n    right: var(--wje-input-number-control-width, 1.75rem);\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([invalid]) {\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::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n:host([clearable]) .native-input input {\n    box-sizing: border-box;\n    padding-inline-end: calc(var(--wje-input-clear-inline-end, 0px) + var(--wje-input-clear-size) + var(--wje-input-clear-gap));\n}\n\n:host([clearable][type='number']) .native-input input {\n    padding-inline-end: calc(var(--wje-input-number-control-width, 1.75rem) + var(--wje-input-clear-size) + var(--wje-input-clear-gap));\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-input-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-input-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 const _Input = class _Input extends FormAssociatedElement {
   /**
    * Creates an instance of Input.

package/dist/wje-menu-item.js

@@ -32,7 +32,7 @@ const styles = `/*
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
-        justify-content: center;
+        justify-content: var(--wje-menu-item-justify-content, center);
         color: var(--wje-menu-item-color);
         padding-top: var(--wje-menu-item-padding-top);
         padding-bottom: var(--wje-menu-item-padding-bottom);

package/dist/wje-option.js

@@ -20,12 +20,13 @@ const styles = `/*
     display: block;
 
     .end-slot {
-        position: absolute;
-        inset-inline-end: 0.5rem;
-        inset-block-start: 50%;
-        transform: translateY(-50%);
         display: inline-flex;
         align-items: center;
+        justify-content: center;
+        justify-self: end;
+        align-self: center;
+        min-width: var(--wje-option-end-slot-min-width, 2rem);
+        margin-inline-start: 0.5rem;
         pointer-events: auto;
         z-index: 1;
     }
@@ -47,6 +48,18 @@ slot[name='check'] {
     align-items: center;
 }
 
+slot[name='start'] {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+}
+
+slot:not([name]) {
+    display: block;
+    min-width: 0;
+    overflow-wrap: break-word;
+}
+
 ::slotted([slot='check']) {
     flex: 0 0 auto;
     flex-shrink: 0;
@@ -69,7 +82,8 @@ slot[name='check'] {
 }
 
 .native-option {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr) auto;
     align-items: center;
     padding-top: var(--wje-option-padding-top);
     padding-bottom: var(--wje-option-padding-bottom);
@@ -91,7 +105,7 @@ slot[name='check'] {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    margin-inline: auto 0.5rem;
+    margin-inline: 0.5rem;
 }
 `;
 class Option extends WJElement {

package/dist/wje-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n */\nexport default class Option extends WJElement {\n\t/**\n\t * Creates an instance of Option.\n\t * @class\n\t */\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Dependencies of the Option component.\n\t */\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t */\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t */\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/**\n\t * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t */\n\tget checkbox() {\n\t\treturn this.ownerSelect?.hasAttribute('checkbox');\n\t}\n\n\t/**\n\t * Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t */\n\tget multiple() {\n\t\treturn this.ownerSelect?.hasAttribute('multiple') || false;\n\t}\n\n\tget ownerSelect() {\n\t\treturn this._ownerSelect || this.closest('wje-select');\n\t}\n\n\tset ownerSelect(value) {\n\t\tthis._ownerSelect = value;\n\t}\n\n\t/**\n\t * Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/**\n\t * Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t */\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/**\n\t * This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {*} old The previous value of the attribute before the change.\n\t * @param {*} newName The new value of the attribute after the change.\n\t * @returns {void} This method does not return a value.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet endWrapper = document.createElement('span');\n\t\tendWrapper.classList.add('end-slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tendWrapper.append(end);\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(endWrapper);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\n\t\t// If `selected` was set before render, attributeChangedCallback may have run\n\t\t// before `this.check` existed. Sync the checkbox state once slots exist.\n\t\tif (this.checkbox && this.multiple) {\n\t\t\tthis.#setCheckbox(this.selected);\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tthis.setAriaState({\n\t\t\trole: 'option',\n\t\t\tselected: this.selected,\n\t\t\tdisabled: this.hasAttribute('disabled'),\n\t\t});\n\t}\n\n\t/**\n\t * Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/**\n\t * Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t */\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/**\n\t * Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t */\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/**\n\t * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tconst assigned = this.check?.assignedElements({ flatten: true }) ?? [];\n\t\tconst arr = assigned.filter((item) => this.#isCheckbox(item));\n\t\tif (arr.length > 0) arr[0].checked = checked;\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n */\nexport default class Option extends WJElement {\n\t/**\n\t * Creates an instance of Option.\n\t * @class\n\t */\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Dependencies of the Option component.\n\t */\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t */\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t */\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/**\n\t * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t */\n\tget checkbox() {\n\t\treturn this.ownerSelect?.hasAttribute('checkbox');\n\t}\n\n\t/**\n\t * Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t */\n\tget multiple() {\n\t\treturn this.ownerSelect?.hasAttribute('multiple') || false;\n\t}\n\n\tget ownerSelect() {\n\t\treturn this._ownerSelect || this.closest('wje-select');\n\t}\n\n\tset ownerSelect(value) {\n\t\tthis._ownerSelect = value;\n\t}\n\n\t/**\n\t * Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/**\n\t * Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t */\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/**\n\t * This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {*} old The previous value of the attribute before the change.\n\t * @param {*} newName The new value of the attribute after the change.\n\t * @returns {void} This method does not return a value.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet endWrapper = document.createElement('span');\n\t\tendWrapper.classList.add('end-slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tendWrapper.append(end);\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(endWrapper);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\n\t\t// If `selected` was set before render, attributeChangedCallback may have run\n\t\t// before `this.check` existed. Sync the checkbox state once slots exist.\n\t\tif (this.checkbox && this.multiple) {\n\t\t\tthis.#setCheckbox(this.selected);\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tthis.setAriaState({\n\t\t\trole: 'option',\n\t\t\tselected: this.selected,\n\t\t\tdisabled: this.hasAttribute('disabled'),\n\t\t});\n\t}\n\n\t/**\n\t * Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/**\n\t * Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t */\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/**\n\t * Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t */\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/**\n\t * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tconst assigned = this.check?.assignedElements({ flatten: true }) ?? [];\n\t\tconst arr = assigned.filter((item) => this.#isCheckbox(item));\n\t\tif (arr.length > 0) arr[0].checked = checked;\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK7C,cAAc;AACb,UAAK;AANQ;AAYd;AAAA;AAAA;AAAA,wCAAe;AAAA,MACd,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAkEC,qCAAY;AAAA,EA1EZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,IAAI,SAAS,OAAO;AACnB,QAAI,OAAO;AACV,WAAK,aAAa,YAAY,EAAE;AAAA,IACjC,OAAO;AACN,WAAK,gBAAgB,UAAU;AAAA,IAChC;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACd,WAAO,KAAK,aAAa,UAAU;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;;AACd,YAAO,UAAK,gBAAL,mBAAkB,aAAa;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;;AACd,aAAO,UAAK,gBAAL,mBAAkB,aAAa,gBAAe;AAAA,EACtD;AAAA,EAEA,IAAI,cAAc;AACjB,WAAO,KAAK,gBAAgB,KAAK,QAAQ,YAAY;AAAA,EACtD;AAAA,EAEA,IAAI,YAAY,OAAO;AACtB,SAAK,eAAe;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AAChB,SAAK,aAAa,SAAS,KAAK;AAAA,EACjC;AAAA,EAEA,IAAI,QAAQ;AACX,WAAO,KAAK,aAAa,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACf,SAAK,YAAY;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AAC1B,WAAO;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,UAAU;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,yBAAyB,MAAM,KAAK,SAAS;AAC5C,QAAI,KAAK,UAAU;AAClB,UAAI,SAAS,cAAc,YAAY,MAAM;AAC5C,8BAAK,mCAAL,WAAkB;AAAA,MACnB,OAAO;AACN,8BAAK,mCAAL,WAAkB;AAAA,MACnB;AAAA,IACD;AACA,SAAK,SAAQ;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACjB,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACN,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,aAAa,SAAS,cAAc,cAAc;AACtD,eAAW,aAAa,QAAQ,OAAO;AAEvC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,UAAU,IAAI,UAAU;AAEnC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,eAAW,OAAO,GAAG;AAErB,UAAM,eAAe,KAAK,cAAc,gBAAgB,MAAM;AAE9D,QAAI,CAAC,cAAc;AAClB,UAAI,KAAK,YAAY,KAAK,UAAU;AACnC,aAAK,OAAO,UAAU;AAAA,MACvB,OAAO;AACN,aAAK,OAAO,IAAI;AAAA,MACjB;AAAA,IACD;AAEA,WAAO,OAAO,KAAK;AACnB,WAAO,OAAO,KAAK;AACnB,WAAO,OAAO,IAAI;AAClB,WAAO,OAAO,UAAU;AAExB,aAAS,OAAO,MAAM;AAEtB,SAAK,QAAQ;AAEb,WAAO;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY;AACX,UAAM,YAAY,MAAM,SAAS,MAAM,KAAK,mBAAmB;AAI/D,QAAI,KAAK,YAAY,KAAK,UAAU;AACnC,4BAAK,mCAAL,WAAkB,KAAK;AAAA,IACxB;AACA,SAAK,SAAQ;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACV,SAAK,aAAa;AAAA,MACjB,MAAM;AAAA,MACN,UAAU,KAAK;AAAA,MACf,UAAU,KAAK,aAAa,UAAU;AAAA,IACzC,CAAG;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,mBAAmB;AAClB,UAAM,eAAe,MAAM,SAAS,MAAM,KAAK,mBAAmB;AAAA,EACnE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,oBAAoB,GAAG;AACtB,MAAE,eAAc;AAChB,MAAE,gBAAe;AACjB,MAAE,yBAAwB;AAE1B,QAAI,KAAK,aAAa,UAAU,EAAG;AAEnC,UAAM,oBAAoB,MAAM,qBAAqB;AAAA,MACpD,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,QAAQ;AAAA,IACX,CAAG;AAAA,EACF;AAqBD;AAlQe;AAAA;AAAA;AAAA;AAAA;AAAA;AAoPd,gBAAW,SAAC,MAAM;AACjB,SAAO,gBAAgB,WAAW,KAAK,cAAc;AACtD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,iBAAY,SAAC,SAAS;;AACrB,QAAM,aAAW,UAAK,UAAL,mBAAY,iBAAiB,EAAE,SAAS,KAAI,OAAO,CAAA;AACpE,QAAM,MAAM,SAAS,OAAO,CAAC,SAAS,sBAAK,kCAAL,WAAiB,KAAK;AAC5D,MAAI,IAAI,SAAS,EAAG,KAAI,CAAC,EAAE,UAAU;AACtC;AC/QD,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-select.js

@@ -23,7 +23,7 @@ import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
 import { P as Popup } from "./popup.element-C8-g3WLs.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\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            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\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    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\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";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\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            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\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    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\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";
 const _Select = class _Select extends FormAssociatedElement {
   constructor() {
     super();
@@ -222,6 +222,7 @@ const _Select = class _Select extends FormAssociatedElement {
     this.slotStart = null;
     this.slotEnd = null;
     this.input = null;
+    this.displayText = null;
     this.chips = null;
     this.clear = null;
     this.list = null;
@@ -579,6 +580,16 @@ const _Select = class _Select extends FormAssociatedElement {
     display.setAttribute("autocomplete", "off");
     display.setAttribute("readonly", "");
     display.setAttribute("placeholder", this.placeholder || "");
+    display.classList.add("display-input");
+    let displayWrapper = document.createElement("span");
+    displayWrapper.classList.add("display-wrapper");
+    let displayText = document.createElement("span");
+    displayText.setAttribute("part", "input selected-text");
+    displayText.classList.add("display-text");
+    displayText.dataset.placeholder = this.placeholder || "";
+    displayText.toggleAttribute("data-placeholder-visible", Boolean(this.placeholder));
+    displayText.setAttribute("aria-hidden", "true");
+    displayWrapper.append(display, displayText);
     if (this.required) {
       input.setAttribute("required", "");
       display.setAttribute("required", "");
@@ -653,7 +664,7 @@ const _Select = class _Select extends FormAssociatedElement {
       wrapper.appendChild(label);
     }
     inputWrapper.append(slotStart);
-    inputWrapper.append(display);
+    inputWrapper.append(displayWrapper);
     inputWrapper.append(input);
     clear.append(clearIcon);
     if (this.hasAttribute("multiple")) inputWrapper.append(chips);
@@ -690,6 +701,7 @@ const _Select = class _Select extends FormAssociatedElement {
     this.slotEnd = slotEnd;
     this.input = input;
     this.displayInput = display;
+    this.displayText = displayText;
     this.chips = chips;
     this.clear = clear;
     this.list = list;
@@ -825,7 +837,10 @@ const _Select = class _Select extends FormAssociatedElement {
       const option = options == null ? void 0 : options.at(0);
       this.value = ((_a = options == null ? void 0 : options.map((el) => el.value)) == null ? void 0 : _a.at(0)) || "";
       this.input.value = this.value[0] || "";
-      this.displayInput.value = ((_c = (_b = options[0]) == null ? void 0 : _b.textContent) == null ? void 0 : _c.trim()) || "";
+      const displayValue = ((_c = (_b = options[0]) == null ? void 0 : _b.textContent) == null ? void 0 : _c.trim()) || "";
+      this.displayInput.value = displayValue;
+      this.displayText.textContent = displayValue;
+      this.displayText.toggleAttribute("data-placeholder-visible", !displayValue && Boolean(this.placeholder));
       this.slotStart.innerHTML = "";
       this.slotEnd.innerHTML = "";
       if (option && option instanceof HTMLElement) {