wj-elements 0.2.0-alpha.8 → 0.3.0

package/dist/wje-level-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-level-indicator.js","sources":["../packages/wje-level-indicator/level-indicator.element.js","../packages/wje-level-indicator/level-indicator.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary LevelIndicator is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/LevelIndicator\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-level-indicator\n * @example\n * <wje-level-indicator></wje-level-indicator>\n */\nexport default class LevelIndicator extends WJElement {\n    /**\n     * Creates an instance of LevelIndicator.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the level attribute for an instance.\n     * @param {string} value The value to set for the 'level' attribute.\n     */\n    set level(value) {\n        this.setAttribute('level', value);\n    }\n\n    /**\n     * Retrieves the level attribute of an element, with validation to ensure\n     * it is within the range of 0 to 3. If the level attribute is not present,\n     * the default value is 1. The result is parsed as an integer and constrained\n     * to the valid range.\n     * @returns {number} The normalized level value, which is an integer between 0 and 3.\n     */\n    get level() {\n        return Math.min(this.bars, Math.max(0, parseInt(this.getAttribute('level') || '1', 10)));\n    }\n\n    /**\n     * Sets the value of the \"bars\" attribute.\n     * @param {string} value The value to set for the \"bars\" attribute.\n     */\n    set bars(value) {\n        this.setAttribute('bars', value);\n    }\n\n    /**\n     * Retrieves the value of the \"bars\" attribute, parses it as an integer,\n     * and ensures it is at least 1. If the attribute is not set, defaults to 3.\n     * @returns {number} The parsed integer value of the \"bars\" attribute or the default value of 3, constrained to a minimum of 1.\n     */\n    get bars() {\n        return Math.max(1, parseInt(this.getAttribute('bars') || '3', 10));\n    }\n\n    /**\n     * Sets the 'colorize' attribute on the element. If the provided value is truthy,\n     * the attribute will be set. If the value is falsy, the attribute will be removed.\n     * @param {boolean} value A boolean determining whether to set or remove the 'colorize' attribute.\n     */\n    set colorize(value) {\n        this.removeAttribute('colorize');\n\n        if (value) this.setAttribute('colorize', '');\n    }\n\n    /**\n     * Determines whether the element has the \"colorize\" attribute set.\n     * @returns {boolean} Returns true if the \"colorize\" attribute is present, otherwise false.\n     */\n    get colorize() {\n        return this.hasAttribute('colorize');\n    }\n\n    /**\n     * Sets the 'reverse' attribute on the element. If the provided value is truthy, the attribute is added;\n     * otherwise, the attribute is removed.\n     * @param {boolean} value The value determining whether to set or remove the 'reverse' attribute.\n     */\n    set reverse(value) {\n        this.removeAttribute('reverse');\n\n        if (value) this.setAttribute('reverse', '');\n    }\n\n    /**\n     * Getter method to check if the \"reverse\" attribute is present on the element.\n     * @returns {boolean} Returns true if the \"reverse\" attribute is set; otherwise, returns false.\n     */\n    get reverse() {\n        return this.hasAttribute('reverse');\n    }\n\n    className = 'LevelIndicator';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-level-indicator');\n        if (this.reverse) native.classList.add('reverse');\n\n        let defaultBar = document.createElement('div');\n        defaultBar.classList.add('bar');\n\n        this.barsArray = [];\n\n        for (let i = 0; i < this.bars; i++) {\n            const width = ((i + 1) / this.bars) * 100;\n\n            let bar = defaultBar.cloneNode(true);\n            bar.style.setProperty('width', width + '%');\n\n            native.appendChild(bar);\n            this.barsArray.push(bar);\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Executes any additional operations or updates required after the drawing process is completed.\n     * @returns {void} This method does not return any value.\n     */\n    afterDraw() {\n        this.updateBars(this.level, this.barsArray);\n\n        if (this.colorize)\n            this.native.style.setProperty(\n                '--wje-level-indicator-color-active',\n                `var(${this.getColor(this.level, this.barsArray.length)})`\n            );\n    }\n\n    /**\n     * Updates the class of each bar element based on the specified level.\n     * @param {number} level The threshold level determining how many bars should be active.\n     * @param {Array} bars An array of bar elements to be updated.\n     * @returns {void} This method does not return a value.\n     */\n    updateBars(level, bars) {\n        bars.forEach((bar, index) => {\n            bar.classList.toggle('active', index < level);\n        });\n    }\n\n    /**\n     * Determines the color indicator based on the given level and bars.\n     * @param {number} level The current value level used to calculate the ratio.\n     * @param {number} bars The maximum value that level can reach.\n     * @returns {string | undefined} A string representing the color code based on the ratio, or undefined if colorize is disabled.\n     */\n\n    getColor(level, bars) {\n        const thresholds = [\n            '--wje-level-indicator-color-low',\n            '--wje-level-indicator-color-medium',\n            '--wje-level-indicator-color-high', // 67% - 100% (tretia tretina)\n        ];\n\n        const index = Math.min(2, Math.floor((level - 1) / (bars / 3)));\n        return thresholds[index];\n    }\n}\n","import LevelIndicator from './level-indicator.element.js';\n\nexport default LevelIndicator;\n\nLevelIndicator.define('wje-level-indicator', LevelIndicator);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-level-indicator.js","sources":["../packages/wje-level-indicator/level-indicator.element.js","../packages/wje-level-indicator/level-indicator.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary LevelIndicator is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/LevelIndicator\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-level-indicator\n * @example\n * <wje-level-indicator></wje-level-indicator>\n */\nexport default class LevelIndicator extends WJElement {\n    /**\n     * Creates an instance of LevelIndicator.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the level attribute for an instance.\n     * @param {string} value The value to set for the 'level' attribute.\n     */\n    set level(value) {\n        this.setAttribute('level', value);\n    }\n\n    /**\n     * Retrieves the level attribute of an element, with validation to ensure\n     * it is within the range of 0 to 3. If the level attribute is not present,\n     * the default value is 1. The result is parsed as an integer and constrained\n     * to the valid range.\n     * @returns {number} The normalized level value, which is an integer between 0 and 3.\n     */\n    get level() {\n        return Math.min(this.bars, Math.max(0, parseInt(this.getAttribute('level') || '1', 10)));\n    }\n\n    /**\n     * Sets the value of the \"bars\" attribute.\n     * @param {string} value The value to set for the \"bars\" attribute.\n     */\n    set bars(value) {\n        this.setAttribute('bars', value);\n    }\n\n    /**\n     * Retrieves the value of the \"bars\" attribute, parses it as an integer,\n     * and ensures it is at least 1. If the attribute is not set, defaults to 3.\n     * @returns {number} The parsed integer value of the \"bars\" attribute or the default value of 3, constrained to a minimum of 1.\n     */\n    get bars() {\n        return Math.max(1, parseInt(this.getAttribute('bars') || '3', 10));\n    }\n\n    /**\n     * Sets the 'colorize' attribute on the element. If the provided value is truthy,\n     * the attribute will be set. If the value is falsy, the attribute will be removed.\n     * @param {boolean} value A boolean determining whether to set or remove the 'colorize' attribute.\n     */\n    set colorize(value) {\n        this.removeAttribute('colorize');\n\n        if (value) this.setAttribute('colorize', '');\n    }\n\n    /**\n     * Determines whether the element has the \"colorize\" attribute set.\n     * @returns {boolean} Returns true if the \"colorize\" attribute is present, otherwise false.\n     */\n    get colorize() {\n        return this.hasAttribute('colorize');\n    }\n\n    /**\n     * Sets the 'reverse' attribute on the element. If the provided value is truthy, the attribute is added;\n     * otherwise, the attribute is removed.\n     * @param {boolean} value The value determining whether to set or remove the 'reverse' attribute.\n     */\n    set reverse(value) {\n        this.removeAttribute('reverse');\n\n        if (value) this.setAttribute('reverse', '');\n    }\n\n    /**\n     * Getter method to check if the \"reverse\" attribute is present on the element.\n     * @returns {boolean} Returns true if the \"reverse\" attribute is set; otherwise, returns false.\n     */\n    get reverse() {\n        return this.hasAttribute('reverse');\n    }\n\n    className = 'LevelIndicator';\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 ['level', 'bars'];\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     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-level-indicator');\n        if (this.reverse) native.classList.add('reverse');\n\n        let defaultBar = document.createElement('div');\n        defaultBar.classList.add('bar');\n\n        this.barsArray = [];\n\n        for (let i = 0; i < this.bars; i++) {\n            const width = ((i + 1) / this.bars) * 100;\n\n            let bar = defaultBar.cloneNode(true);\n            bar.style.setProperty('width', width + '%');\n\n            native.appendChild(bar);\n            this.barsArray.push(bar);\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Executes any additional operations or updates required after the drawing process is completed.\n     * @returns {void} This method does not return any value.\n     */\n    afterDraw() {\n        this.syncAria();\n        this.updateBars(this.level, this.barsArray);\n\n        if (this.colorize)\n            this.native.style.setProperty(\n                '--wje-level-indicator-color-active',\n                `var(${this.getColor(this.level, this.barsArray.length)})`\n            );\n    }\n\n    /**\n     * Handles attribute changes for ARIA sync.\n     * @param {string} name\n     * @param {string|null} oldValue\n     * @param {string|null} newValue\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, oldValue, newValue);\n        }\n\n        if (oldValue !== newValue) {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'meter',\n            valuemin: 0,\n            valuemax: this.bars,\n            valuenow: this.level,\n            valuetext: `${this.level} of ${this.bars}`,\n        });\n    }\n\n    /**\n     * Updates the class of each bar element based on the specified level.\n     * @param {number} level The threshold level determining how many bars should be active.\n     * @param {Array} bars An array of bar elements to be updated.\n     * @returns {void} This method does not return a value.\n     */\n    updateBars(level, bars) {\n        bars.forEach((bar, index) => {\n            bar.classList.toggle('active', index < level);\n        });\n    }\n\n    /**\n     * Determines the color indicator based on the given level and bars.\n     * @param {number} level The current value level used to calculate the ratio.\n     * @param {number} bars The maximum value that level can reach.\n     * @returns {string | undefined} A string representing the color code based on the ratio, or undefined if colorize is disabled.\n     */\n\n    getColor(level, bars) {\n        const thresholds = [\n            '--wje-level-indicator-color-low',\n            '--wje-level-indicator-color-medium',\n            '--wje-level-indicator-color-high', // 67% - 100% (tretia tretina)\n        ];\n\n        const index = Math.min(2, Math.floor((level - 1) / (bars / 3)));\n        return thresholds[index];\n    }\n}\n","import LevelIndicator from './level-indicator.element.js';\n\nexport default LevelIndicator;\n\nLevelIndicator.define('wje-level-indicator', LevelIndicator);\n"],"names":[],"mappings":"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"}

package/dist/{packages/wje-list → wje-list}/list.element.d.ts

@@ -28,4 +28,8 @@ export default class List extends WJElement {
      * Called after the component has been drawn.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
 }

package/dist/wje-list.js

@@ -25,6 +25,7 @@ class List extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -40,9 +41,18 @@ class List extends WJElement {
    * Called after the component has been drawn.
    */
   afterDraw() {
+    this.syncAria();
     this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines"));
     this.classList.toggle("wje-inset", this.hasAttribute("inset"));
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "list" });
+    }
+  }
 }
 List.define("wje-list", List);
 export {

package/dist/wje-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-list.js","sources":["../packages/wje-list/list.element.js","../packages/wje-list/list.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `List` is a custom web component that represents a list.\n * It extends from `WJElement`.\n * @summary This element represents a list.\n * @documentation https://elements.webjet.sk/components/list\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the list.\n * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.\n * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.\n * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.\n * @tag wje-list\n */\nexport default class List extends WJElement {\n    /**\n     * Creates an instance of List.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'List';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.classList.toggle('wje-lines-' + this.lines, this.hasAttribute('lines'));\n        this.classList.toggle('wje-inset', this.hasAttribute('inset'));\n    }\n}\n","import List from './list.element.js';\n\nexport default List;\n\nList.define('wje-list', List);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;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;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,UAAU,OAAO,eAAe,KAAK,OAAO,KAAK,aAAa,OAAO,CAAC;AAC3E,SAAK,UAAU,OAAO,aAAa,KAAK,aAAa,OAAO,CAAC;AAAA,EACrE;AACA;AC5DA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-list.js","sources":["../packages/wje-list/list.element.js","../packages/wje-list/list.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `List` is a custom web component that represents a list.\n * It extends from `WJElement`.\n * @summary This element represents a list.\n * @documentation https://elements.webjet.sk/components/list\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the list.\n * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.\n * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.\n * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.\n * @tag wje-list\n */\nexport default class List extends WJElement {\n    /**\n     * Creates an instance of List.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'List';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        this.classList.toggle('wje-lines-' + this.lines, this.hasAttribute('lines'));\n        this.classList.toggle('wje-inset', this.hasAttribute('inset'));\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n}\n","import List from './list.element.js';\n\nexport default List;\n\nList.define('wje-list', List);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,SAAU;AACf,SAAK,UAAU,OAAO,eAAe,KAAK,OAAO,KAAK,aAAa,OAAO,CAAC;AAC3E,SAAK,UAAU,OAAO,aAAa,KAAK,aAAa,OAAO,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAAA,IAC9C;AAAA,EACA;AACA;ACvEA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-master.js

@@ -9,7 +9,7 @@ import { fetchAndParseCSS } from "./animations.js";
 import { getBasePath, setBasePath } from "./base-path.js";
 import { formatDate } from "./date.js";
 import { toSafeDate } from "./date.js";
-import { I, r, u } from "./icon-DY5AZ6xM.js";
+import { I, r, u } from "./icon-DVyMc4Wv.js";
 import { event } from "./event.js";
 import { default as default2 } from "./wje-accordion.js";
 import { default as default3 } from "./wje-accordion-item.js";
@@ -105,7 +105,7 @@ import { default as default89 } from "./wje-tooltip.js";
 import { default as default90 } from "./wje-tree.js";
 import { default as default91 } from "./wje-tree-item.js";
 import { default as default92 } from "./wje-visually-hidden.js";
-import { P } from "./popup.element-DeajFyOQ.js";
+import { P } from "./popup.element-Cl6QeG8M.js";
 const skSk = {
   code: "sk-sk",
   name: "Slovak",
@@ -164,6 +164,7 @@ class Timeline extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the timeline.
@@ -183,6 +184,14 @@ class Timeline extends WJElement {
     fragment.appendChild(native);
     return fragment;
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "list" });
+    }
+  }
 }
 Timeline.define("wje-timeline", Timeline);
 const styles = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: 0.5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small);\n    height: var(--wje-size-small);\n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle);\n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}\n";

package/dist/wje-master.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-master.js","sources":["../packages/translations/sk-sk.js","../packages/translations/en-gb.js","../packages/wje-timeline/timeline.element.js","../packages/wje-timeline/timeline.js","../packages/wje-timeline-item/timeline-item.element.js","../packages/wje-timeline-item/timeline-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\n\nexport const skSk = {\n    code: 'sk-sk',\n    name: 'Slovak',\n    dir: 'ltr',\n\n    welcome: 'Vitajte',\n    'wj.file.upload.button': 'Vybrať súbor',\n    'wj.file.upload.uploaded': 'Nahraných: ',\n    'wj.file.upload.from': 'z',\n    'wj.stepper.button.next': 'Ďalej',\n    'wj.stepper.button.finish': 'Dokončiť',\n    'wj.stepper.button.previous': 'Späť',\n    'wj.stepper.step': 'Krok',\n};\n\nLocalizer.registerTranslation(skSk);\n","import { Localizer } from '../utils/localize.js';\n\nexport const enGb = {\n    code: 'en-gb',\n    name: 'English',\n    dir: 'ltr',\n\n    welcome: 'Welcome',\n    'wj.file.upload.button': 'Browse files',\n    'wj.file.upload.uploaded': 'Uploaded: ',\n    'wj.file.upload.from': 'from',\n    'wj.stepper.button.next': 'Next',\n    'wj.stepper.button.finish': 'Finish',\n    'wj.stepper.button.previous': 'Previous',\n    'wj.stepper.step': 'Step',\n    'wj.pagination.of': 'of',\n    'wj.pagination.first': 'First page',\n    'wj.pagination.prev': 'Previous',\n    'wj.pagination.next': 'Next',\n    'wj.pagination.last': 'Last page',\n};\n\nLocalizer.registerTranslation(enGb);\n","import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Timeline` is a custom web component that represents a timeline.\n * @summary This element represents a timeline.\n * @documentation https://elements.webjet.sk/components/timeline\n * @status stable\n * @augments WJElement\n * @slot - Slot for the timeline items.\n * @csspart native - The native part of the rating component.\n * @csspart vertical-line - The vertical line part of the rating component.\n * @tag wje-timeline\n */\nexport default class Timeline extends WJElement {\n    /**\n     * Creates an instance of Timeline.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Timeline';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the timeline.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-timeline');\n\n        const verticalLine = document.createElement('div');\n        verticalLine.setAttribute('part', 'vertical-line');\n        verticalLine.classList.add('vertical-line');\n\n        const slot = document.createElement('slot');\n\n        native.appendChild(verticalLine);\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Timeline from './timeline.element.js';\n\nexport default Timeline;\n\nTimeline.define('wje-timeline', Timeline);\n","import { formatDate } from '../utils/date.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * The TimelineItem component.\n * @summary This element represents a timeline item.\n * @documentation https://elements.webjet.sk/components/timeline-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the timeline item.\n * @csspart content-container - The content container part of the timeline item.\n * @csspart default-icon - The default icon part of the timeline item.\n * @slot - Slot for the content of the timeline item.\n * @slot status - Slot for the status of the timeline item.\n * @tag wje-timeline-item\n */\nexport default class TimelineItem extends WJElement {\n    constructor() {\n        super();\n    }\n\n    /**\n     * Returns the class name of the tab.\n     * @returns {string} The class name of the tab.\n     */\n    className = 'TimelineItem';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('relative-time', '');\n    }\n\n    /**\n     * Draws the component for the timeline item.\n     * @returns {DocumentFragment}\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-timeline-item');\n\n        let contentContainer = document.createElement('div');\n        contentContainer.setAttribute('part', 'content-container');\n        contentContainer.classList.add('content-container');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('text', this.getAttribute('tooltip') || '');\n        tooltip.setAttribute('position', 'top');\n        tooltip.setAttribute('content', formatDate(this.datetime, 'dd.MM.yyyy HH:mm'));\n\n        let relativeTime = document.createElement('wje-relative-time');\n        relativeTime.setAttribute('date', this.datetime || '');\n        relativeTime.setAttribute('format', this.getAttribute('format') || '');\n\n        tooltip.appendChild(relativeTime);\n\n        let event = document.createElement('h3');\n        event.classList.add('event');\n        event.textContent = this.getAttribute('event') || '';\n\n        // additional text content\n        let slot = document.createElement('slot');\n\n        // status slot\n        let slotStatus = document.createElement('wje-icon');\n        slotStatus.setAttribute('name', 'circle-dot');\n        slotStatus.setAttribute('filled', '');\n        slotStatus.setAttribute('part', 'default-icon');\n\n        // if status slot is present\n        if (this.querySelector('[slot=\"status\"]')) {\n            slotStatus = document.createElement('slot');\n            slotStatus.setAttribute('name', 'status');\n        }\n\n        contentContainer.appendChild(tooltip);\n        contentContainer.appendChild(event);\n        contentContainer.appendChild(slot);\n\n        native.appendChild(slotStatus);\n        native.appendChild(contentContainer);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import TimelineItem from './timeline-item.element.js';\n\nexport default TimelineItem;\n\nTimelineItem.define('wje-timeline-item', TimelineItem);\n"],"names":["styles","event"],"mappings":"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"}
+{"version":3,"file":"wje-master.js","sources":["../packages/translations/sk-sk.js","../packages/translations/en-gb.js","../packages/wje-timeline/timeline.element.js","../packages/wje-timeline/timeline.js","../packages/wje-timeline-item/timeline-item.element.js","../packages/wje-timeline-item/timeline-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\n\nexport const skSk = {\n    code: 'sk-sk',\n    name: 'Slovak',\n    dir: 'ltr',\n\n    welcome: 'Vitajte',\n    'wj.file.upload.button': 'Vybrať súbor',\n    'wj.file.upload.uploaded': 'Nahraných: ',\n    'wj.file.upload.from': 'z',\n    'wj.stepper.button.next': 'Ďalej',\n    'wj.stepper.button.finish': 'Dokončiť',\n    'wj.stepper.button.previous': 'Späť',\n    'wj.stepper.step': 'Krok',\n};\n\nLocalizer.registerTranslation(skSk);\n","import { Localizer } from '../utils/localize.js';\n\nexport const enGb = {\n    code: 'en-gb',\n    name: 'English',\n    dir: 'ltr',\n\n    welcome: 'Welcome',\n    'wj.file.upload.button': 'Browse files',\n    'wj.file.upload.uploaded': 'Uploaded: ',\n    'wj.file.upload.from': 'from',\n    'wj.stepper.button.next': 'Next',\n    'wj.stepper.button.finish': 'Finish',\n    'wj.stepper.button.previous': 'Previous',\n    'wj.stepper.step': 'Step',\n    'wj.pagination.of': 'of',\n    'wj.pagination.first': 'First page',\n    'wj.pagination.prev': 'Previous',\n    'wj.pagination.next': 'Next',\n    'wj.pagination.last': 'Last page',\n};\n\nLocalizer.registerTranslation(enGb);\n","import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Timeline` is a custom web component that represents a timeline.\n * @summary This element represents a timeline.\n * @documentation https://elements.webjet.sk/components/timeline\n * @status stable\n * @augments WJElement\n * @slot - Slot for the timeline items.\n * @csspart native - The native part of the rating component.\n * @csspart vertical-line - The vertical line part of the rating component.\n * @tag wje-timeline\n */\nexport default class Timeline extends WJElement {\n    /**\n     * Creates an instance of Timeline.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Timeline';\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     * 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 timeline.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-timeline');\n\n        const verticalLine = document.createElement('div');\n        verticalLine.setAttribute('part', 'vertical-line');\n        verticalLine.classList.add('vertical-line');\n\n        const slot = document.createElement('slot');\n\n        native.appendChild(verticalLine);\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n}\n","import Timeline from './timeline.element.js';\n\nexport default Timeline;\n\nTimeline.define('wje-timeline', Timeline);\n","import { formatDate } from '../utils/date.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * The TimelineItem component.\n * @summary This element represents a timeline item.\n * @documentation https://elements.webjet.sk/components/timeline-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the timeline item.\n * @csspart content-container - The content container part of the timeline item.\n * @csspart default-icon - The default icon part of the timeline item.\n * @slot - Slot for the content of the timeline item.\n * @slot status - Slot for the status of the timeline item.\n * @tag wje-timeline-item\n */\nexport default class TimelineItem extends WJElement {\n    constructor() {\n        super();\n    }\n\n    /**\n     * Returns the class name of the tab.\n     * @returns {string} The class name of the tab.\n     */\n    className = 'TimelineItem';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('relative-time', '');\n    }\n\n    /**\n     * Draws the component for the timeline item.\n     * @returns {DocumentFragment}\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-timeline-item');\n\n        let contentContainer = document.createElement('div');\n        contentContainer.setAttribute('part', 'content-container');\n        contentContainer.classList.add('content-container');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('text', this.getAttribute('tooltip') || '');\n        tooltip.setAttribute('position', 'top');\n        tooltip.setAttribute('content', formatDate(this.datetime, 'dd.MM.yyyy HH:mm'));\n\n        let relativeTime = document.createElement('wje-relative-time');\n        relativeTime.setAttribute('date', this.datetime || '');\n        relativeTime.setAttribute('format', this.getAttribute('format') || '');\n\n        tooltip.appendChild(relativeTime);\n\n        let event = document.createElement('h3');\n        event.classList.add('event');\n        event.textContent = this.getAttribute('event') || '';\n\n        // additional text content\n        let slot = document.createElement('slot');\n\n        // status slot\n        let slotStatus = document.createElement('wje-icon');\n        slotStatus.setAttribute('name', 'circle-dot');\n        slotStatus.setAttribute('filled', '');\n        slotStatus.setAttribute('part', 'default-icon');\n\n        // if status slot is present\n        if (this.querySelector('[slot=\"status\"]')) {\n            slotStatus = document.createElement('slot');\n            slotStatus.setAttribute('name', 'status');\n        }\n\n        contentContainer.appendChild(tooltip);\n        contentContainer.appendChild(event);\n        contentContainer.appendChild(slot);\n\n        native.appendChild(slotStatus);\n        native.appendChild(contentContainer);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import TimelineItem from './timeline-item.element.js';\n\nexport default TimelineItem;\n\nTimelineItem.define('wje-timeline-item', TimelineItem);\n"],"names":["styles","event"],"mappings":"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"}

package/dist/wje-menu-button.js

@@ -34,6 +34,7 @@ class MenuButton extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "button" });
   }
   /**
    * Draws the component for the menu button.

package/dist/wje-menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-menu-button.js","sources":["../packages/wje-menu-button/menu-button.element.js","../packages/wje-menu-button/menu-button.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuButton` is a custom web component that represents a menu button.\n * @summary This element represents a menu button.\n * @documentation https://elements.webjet.sk/components/menu-button\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the menu button.\n * // @fires click - Event fired when the menu button is clicked.\n * @tag wje-menu-button\n */\n\nexport default class MenuButton extends WJElement {\n    /**\n     * Creates an instance of MenuButton.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'MenuButton';\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 [];\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 menu button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n\n    /**\n     * Refreshes the component after drawing. Adds a click event listener that toggles the \"open\" class on the content element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', null, (e) => {\n            document.querySelector(`#${this.contentId}`).classList.toggle('open');\n        });\n    }\n}\n","import MenuButton from './menu-button.element.js';\n\nexport default MenuButton;\n\nMenuButton.define('wje-menu-button', MenuButton);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,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,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,MAAM,CAAC,MAAM;AAC1C,eAAS,cAAc,IAAI,KAAK,SAAS,EAAE,EAAE,UAAU,OAAO,MAAM;AAAA,IAChF,CAAS;AAAA,EACT;AACA;ACpEA,WAAW,OAAO,mBAAmB,UAAU;"}
+{"version":3,"file":"wje-menu-button.js","sources":["../packages/wje-menu-button/menu-button.element.js","../packages/wje-menu-button/menu-button.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuButton` is a custom web component that represents a menu button.\n * @summary This element represents a menu button.\n * @documentation https://elements.webjet.sk/components/menu-button\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the menu button.\n * // @fires click - Event fired when the menu button is clicked.\n * @tag wje-menu-button\n */\n\nexport default class MenuButton extends WJElement {\n    /**\n     * Creates an instance of MenuButton.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'MenuButton';\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'button' });\n    }\n\n    /**\n     * Draws the component for the menu button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n\n    /**\n     * Refreshes the component after drawing. Adds a click event listener that toggles the \"open\" class on the content element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', null, (e) => {\n            document.querySelector(`#${this.contentId}`).classList.toggle('open');\n        });\n    }\n}\n","import MenuButton from './menu-button.element.js';\n\nexport default MenuButton;\n\nMenuButton.define('wje-menu-button', MenuButton);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,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;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,MAAM,CAAC,MAAM;AAC1C,eAAS,cAAc,IAAI,KAAK,SAAS,EAAE,EAAE,UAAU,OAAO,MAAM;AAAA,IAChF,CAAS;AAAA,EACT;AACA;ACrEA,WAAW,OAAO,mBAAmB,UAAU;"}

package/dist/{packages/wje-menu-item → wje-menu-item}/menu-item.element.d.ts

@@ -100,6 +100,10 @@ export default class MenuItem extends WJElement {
      */
     afterDraw(): void;
     unbindRouterLinks: any;
+    /**
+     * Syncs ARIA attributes based on menu item state.
+     */
+    syncAria(): void;
     mouseenterHandler: (e: any) => void;
     rebindRouterLinks: (e: any) => void;
     unbindPortalRouterLinks: any;

package/dist/wje-menu-item.js

@@ -216,6 +216,7 @@ class MenuItem extends WJElement {
      * @param {object} e
      */
     __publicField(this, "clickHandler", (e) => {
+      if (this.hasAttribute("disabled")) return;
       switch (this.variant) {
         case "NAV":
           if (!this.collapse && this.hasSubmenu) {
@@ -408,6 +409,7 @@ class MenuItem extends WJElement {
   setupAttributes() {
     super.setupAttributes();
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Removes the active attribute from the menu before drawing the MenuItem.
@@ -492,6 +494,7 @@ class MenuItem extends WJElement {
     }
     this.native = native;
     this.submenu = submenu;
+    this.syncAria();
     return fragment;
   }
   /**
@@ -513,6 +516,21 @@ class MenuItem extends WJElement {
       this.addEventListener("click", this.handleActiveClick);
     }
   }
+  /**
+   * Syncs ARIA attributes based on menu item state.
+   */
+  syncAria() {
+    var _a, _b;
+    const hasSubmenu = !!this.hasSubmenu;
+    const expanded = this.classList.contains("expanded-submenu") || ((_b = (_a = this.native) == null ? void 0 : _a.classList) == null ? void 0 : _b.contains("expanded-submenu"));
+    const disabled = this.hasAttribute("disabled");
+    this.setAriaState({
+      role: "menuitem",
+      disabled,
+      haspopup: hasSubmenu ? "menu" : void 0,
+      expanded: hasSubmenu ? expanded : void 0
+    });
+  }
   /**
    * Creates a tooltip for the MenuItem when it is collapsed.
    * @param {HTMLElement} native The native MenuItem element.
@@ -544,6 +562,7 @@ class MenuItem extends WJElement {
       (_a = this.popup) == null ? void 0 : _a.show();
       this.classList.add("expanded-submenu");
       this.native.classList.add("expanded-submenu");
+      this.syncAria();
     }
   }
   /**
@@ -556,6 +575,7 @@ class MenuItem extends WJElement {
       (_a = this.popup) == null ? void 0 : _a.hide();
       this.classList.remove("expanded-submenu");
       this.native.classList.remove("expanded-submenu");
+      this.syncAria();
     }
   }
   /**
@@ -569,8 +589,10 @@ class MenuItem extends WJElement {
       let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
       if (!submenuElements.hasAttribute("active")) {
         submenuElements.setAttribute("active", "");
+        this.syncAria();
       } else {
         if (this === e.target) submenuElements.removeAttribute("active");
+        this.syncAria();
       }
     }
   }
@@ -582,6 +604,7 @@ class MenuItem extends WJElement {
       let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
       if (submenuElements == null ? void 0 : submenuElements.hasAttribute("active")) {
         submenuElements == null ? void 0 : submenuElements.removeAttribute("active");
+        this.syncAria();
       }
     }
   }
@@ -593,6 +616,7 @@ class MenuItem extends WJElement {
       let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
       if (!(submenuElements == null ? void 0 : submenuElements.hasAttribute("active"))) {
         submenuElements == null ? void 0 : submenuElements.setAttribute("active", "");
+        this.syncAria();
       }
     }
   }

package/dist/wje-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-menu-item.js","sources":["../packages/wje-menu-item/menu-item.element.js","../packages/wje-menu-item/menu-item.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuItem` is a custom web component that represents a menu item.\n * @summary This element represents a menu item.\n * @documentation https://elements.webjet.sk/components/menu-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu item.\n * @csspart submenu - The submenu part of the menu item.\n * @slot - The default slot for the menu item.\n * @slot start - The slot for the start of the menu item.\n * @slot end - The slot for the end of the menu item.\n * @slot submenu - The slot for the submenu of the menu item.\n * @cssproperty [--wje-menu-item-color=var(--wje-color)] - Sets the text color of a menu item. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background=transparent] - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-hover=var(--wje-color-contrast-8)] - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-hover=var(--wje-border-color)] - Sets the background color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-focus=var(--wje-color-contrast-8)] - Defines the text color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-focus=var(--wje-border-color)] - Specifies the background color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-active=var(--wje-color-contrast-8)] - Sets the text color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-active=var(--wje-border-color)] - Specifies the background color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-padding-top=.5rem] - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-padding-bottom=.5rem] - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-line-height=1.8rem] - Sets the line height for the text within a menu item. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-submenu-offset=0] - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-item-icon-visibility=hidden] - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-x] - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-y] - Specifies the y-coordinate of the cursor for the safe triangle area.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-x] - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-y] - Defines the y-coordinate where the submenu's safe triangle starts.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-x] - Specifies the x-coordinate where the submenu's safe triangle ends.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-y] - Specifies the y-coordinate where the submenu's safe triangle ends.\n * @tag wje-menu-item\n */\nexport default class MenuItem extends WJElement {\n    /**\n     * Constructor for MenuItem class.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._bind = false;\n\n    }\n\n    /**\n     * Getter for placement attribute.\n     * @returns {string} The placement attribute of the menu or \"right-start\" if it doesn't exist.\n     */\n    get placement() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('placement')) {\n            return menu.getAttribute('placement');\n        }\n        return 'right-start';\n    }\n\n    /**\n     * Getter for offset attribute.\n     * @returns {string} The offset attribute of the menu or \"0\" if it doesn't exist.\n     */\n    get offset() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('offset')) {\n            return menu.getAttribute('offset');\n        }\n        return '0';\n    }\n\n    /**\n     * Getter for variant attribute.\n     * @returns {string} The variant attribute of the menu or \"CONTEXT\" if it doesn't exist.\n     */\n    get variant() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('variant') && !this.collapse) {\n            return menu.getAttribute('variant').toUpperCase();\n        }\n\n        return 'CONTEXT';\n    }\n\n    /**\n     * Getter for collapse attribute.\n     * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.\n     */\n    get collapse() {\n        if (this.closest('[collapse]')) return true;\n\n        return false;\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    className = 'MenuItem';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} The styles imported from styles.css.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for observedAttributes.\n     * @returns {Array} An empty array as no attributes are being observed.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the MenuItem element.\n     */\n    setupAttributes() {\n        super.setupAttributes();\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the active attribute from the menu before drawing the MenuItem.\n     */\n    beforeDraw() {\n        this.querySelector('wje-menu')?.removeAttribute('active');\n    }\n\n    /**\n     * Draws the MenuItem element and sets the variant and collapse attributes.\n     * @returns {DocumentFragment} The fragment to be appended to the MenuItem.\n     */\n    draw() {\n        this.hasSubmenu = WjElementUtils.hasSlot(this, 'submenu');\n\n        let fragment = document.createDocumentFragment();\n\n        this.setAttribute('tabindex', '0');\n\n        this.classList.forEach((className) => {\n            // Ak trieda začína na \"wje-menu-variant-\", odstráňte ju\n            if (className.startsWith('wje-menu-variant-')) {\n                this.classList.remove(className);\n            }\n        });\n\n        this.classList.remove('collapse');\n        this.classList.add('wje-menu-variant-' + this.variant.toLowerCase());\n\n        if (!this.collapse) {\n            this.querySelector('wje-menu')?.setAttribute('variant', this.variant.toLowerCase());\n        } else if (this.parentElement?.hasAttribute('collapse')) {\n            this.classList.add('collapse');\n        }\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.setAttribute('id', 'anchor');\n        native.classList.add('native-menu-item');\n\n        // CHECKED - Icon\n        let checkedIcon = document.createElement('span');\n        checkedIcon.setAttribute('part', 'check');\n        checkedIcon.classList.add('check-icon');\n        checkedIcon.innerHTML = `<wje-icon name=\"check\"></wje-icon>`;\n\n        if (this.hasAttribute('checked')) checkedIcon.classList.add('checked');\n        else checkedIcon.classList.remove('checked');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        // SLOT\n        let slot = document.createElement('slot');\n        slot.classList.add('label');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('part', 'end');\n        end.name = 'end';\n\n        // SLOT - Submenu\n        let submenu = document.createElement('slot');\n        submenu.setAttribute('part', 'submenu');\n        submenu.name = 'submenu';\n\n        // SUBMENU - Icon\n        let submenuIconClass = this.collapse ? 'collapse' : 'expand';\n        let submenuIcon = document.createElement('span');\n        submenuIcon.setAttribute('part', 'submenu-icon');\n        submenuIcon.classList.add('submenu-icon', submenuIconClass);\n        submenuIcon.innerHTML = this.collapse\n            ? `<wje-icon name=\"chevron-down\"></wje-icon>`\n            : `<wje-icon name=\"chevron-right\"></wje-icon>`;\n\n        if (this.hasSubmenu) native.classList.add('has-submenu');\n        else native.classList.remove('has-submenu');\n\n        native.appendChild(checkedIcon);\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n        native.appendChild(submenuIcon);\n\n        let isAppend = false;\n        // ak je variant typu CONTEXT zobrazime submenu ako popup\n        if (this.variant === 'CONTEXT' && this.hasSubmenu) {\n            native.setAttribute('slot', 'anchor'); // pridame slot anchor pre popup\n\n            let popup = document.createElement('wje-popup');\n            popup.setAttribute('anchor', 'anchor');\n            popup.setAttribute('placement', this.placement);\n            popup.setAttribute('offset', this.offset);\n\n            popup.appendChild(native);\n            popup.appendChild(submenu);\n\n            this.popup = popup;\n            fragment.appendChild(popup);\n            isAppend = true;\n        }\n\n        if (this.parentElement?.hasAttribute('collapse') && !this.hasSubmenu) {\n            fragment.appendChild(this.collapseItem(native));\n        } else if (!isAppend) {\n            fragment.appendChild(native);\n        }\n\n        if ((!this.collapse && this.variant === 'NAV') || (this.variant === 'MEGAMENU' && this.hasSubmenu)) {\n            fragment.appendChild(submenu);\n        }\n\n        this.native = native;\n        this.submenu = submenu;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after drawing the MenuItem.\n     */\n    afterDraw() {\n\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: '[route]' });\n\n        document.addEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n        this.addEventListener('mousemove', this.dispatchMove);\n        this.addEventListener('wje-popup:reposition', this.dispatchReposition);\n\n        // Event na zobrazenie submenu\n        event.addListener(this, 'mouseenter', null, this.mouseenterHandler);\n        // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n        event.addListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n        // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n        event.addListener(this, 'focusout', null, this.shouldHideSubmenu);\n        event.addListener(this, 'click', null, this.clickHandler);\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if(this.hasAttribute('active-class')) {\n            this.addEventListener('click', this.handleActiveClick);\n        }\n    }\n\n    mouseenterHandler = (e) => {\n        if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n            if (this.hasAttribute('manual') || (this.variant === 'NAV' && this.collapse)) return;\n\n            this.activateSubmenu(e);\n\n            e.stopPropagation();\n\n            this.showSubmenu();\n        }\n    };\n\n    rebindRouterLinks = (e) => {\n        this.unbindPortalRouterLinks = bindRouterLinks(e.detail.container, { selector: '[route]' });\n    }\n\n    /**\n     * Handles the click event on the MenuItem.\n     * @param {object} e\n     */\n    clickHandler = (e) => {\n        switch (this.variant) {\n            case 'NAV':\n                if (!this.collapse && this.hasSubmenu) {\n                    this.submenuToggle(e);\n                    this.hideSubmenu();\n                    e.stopPropagation();\n                } else {\n                    event.dispatchCustomEvent(this, 'wje-menu-item:click');\n                    event.dispatchCustomEvent(this, this.dialog);\n                }\n                break;\n            case 'CONTEXT':\n                if (!this.collapse && this.hasSubmenu) {\n                    let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n                    if (submenuElements?.hasAttribute('active')) {\n                        this.shouldHideSubmenu(e);\n                    } else {\n                        this.activateSubmenu(e);\n                        this.showSubmenu(e);\n                    }\n                } else {\n                    event.dispatchCustomEvent(this, 'wje-menu-item:click');\n                    event.dispatchCustomEvent(this, this.dialog);\n                }\n\n                break;\n        }\n    }\n\n    /**\n     * Checks if the submenu should be hidden based on the event.\n     * @param {Event} e The event object.\n     */\n    shouldHideSubmenu = (e) => {\n        if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n            if ((e.relatedTarget && this.contains(e.relatedTarget)) || (this.variant === 'NAV' && !this.collapse)) {\n                return;\n            }\n\n            this.deactivateSubmenu();\n            this.hideSubmenu();\n        }\n    };\n\n    /**\n     * Creates a tooltip for the MenuItem when it is collapsed.\n     * @param {HTMLElement} native The native MenuItem element.\n     * @returns {HTMLElement} The tooltip element.\n     */\n    collapseItem(native) {\n        let tooltipStart = document.createElement('slot');\n        tooltipStart.setAttribute('slot', 'start');\n        tooltipStart.setAttribute('name', 'tooltip-start');\n\n        let tooltipEnd = document.createElement('slot');\n        tooltipEnd.setAttribute('slot', 'end');\n        tooltipEnd.setAttribute('name', 'tooltip-end');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.getTextFromElement(this));\n        tooltip.setAttribute('placement', 'right');\n        tooltip.setAttribute('offset', this.offset || '0');\n\n        tooltip.appendChild(tooltipStart);\n        tooltip.appendChild(tooltipEnd);\n        tooltip.appendChild(native);\n\n        return tooltip;\n    }\n\n    /**\n     * Dispatches a mousemove event.\n     */\n    dispatchMove = (e) => {\n        this.style.setProperty('--wje-menu-item-safe-triangle-cursor-x', `${e.clientX}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-cursor-y', `${e.clientY}px`);\n    };\n\n    /**\n     * Dispatches a reposition event.\n     */\n    dispatchReposition = (e) => {\n        // ak nemame submenu tak to ukoncime\n        if (this.submenu.assignedNodes().length === 0) return;\n\n        let submenu = this.submenu.assignedNodes()[0];\n        const { left, top, width, height } = submenu.getBoundingClientRect();\n\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-x', `${left}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-y', `${top}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-x', `${left}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-y', `${top + height}px`);\n    };\n\n    /**\n     * Shows the submenu of the MenuItem.\n     */\n    showSubmenu() {\n        this.tabIndex = -1;\n        if (this.hasSubmenu) {\n            this.popup?.show();\n            this.classList.add('expanded-submenu');\n            this.native.classList.add('expanded-submenu');\n        }\n    }\n\n    /**\n     * Hides the submenu of the MenuItem.\n     */\n    hideSubmenu() {\n        this.tabIndex = 0;\n        if (this.hasSubmenu) {\n            this.popup?.hide();\n            this.classList.remove('expanded-submenu');\n            this.native.classList.remove('expanded-submenu');\n        }\n    }\n\n    /**\n     * Toggles the active state of the submenu element.\n     * If the submenu is not active, it sets the \"active\" attribute.\n     * If the submenu is already active, it removes the \"active\" attribute.\n     * @param {Event} e The event object.\n     */\n    submenuToggle(e) {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (!submenuElements.hasAttribute('active')) {\n                submenuElements.setAttribute('active', '');\n            } else {\n                if (this === e.target) submenuElements.removeAttribute('active');\n            }\n        }\n    }\n\n    /**\n     * Deactivates the submenu by removing the \"active\" attribute.\n     */\n    deactivateSubmenu() {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (submenuElements?.hasAttribute('active')) {\n                submenuElements?.removeAttribute('active');\n            }\n        }\n    }\n\n    /**\n     * Activates the submenu of the menu item.\n     */\n    activateSubmenu() {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (!submenuElements?.hasAttribute('active')) {\n                submenuElements?.setAttribute('active', '');\n            }\n        }\n    }\n\n    /**\n     * Gets the text from the element and returns it.\n     */\n    beforeDisconnect() {\n        document.removeEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n        this.removeEventListener('mousemove', this.dispatchMove);\n        this.removeEventListener('wje-popup:reposition', this.dispatchReposition);\n\n        event.removeListener(this, 'mouseenter', null, this.mouseenterHandler);\n        event.removeListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n        event.removeListener(this, 'focusout', null, this.shouldHideSubmenu);\n        event.removeListener(this, 'click', null, this.clickHandler);\n\n        this.unbindRouterLinks?.();\n        this.unbindPortalRouterLinks?.();\n    }\n\n    /**\n     * Extracts and returns the concatenated text content from all text nodes within the specified element.\n     * @param {HTMLElement} element The HTML element from which to extract text content.\n     * @returns {string} The concatenated and trimmed text content from the element's text nodes.\n     */\n    getTextFromElement(element) {\n        let text = '';\n        for (let node of element.childNodes) {\n            if (node.nodeType === Node.TEXT_NODE) {\n                text += node.textContent;\n            }\n        }\n        return text.trim();\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n\n    handleActiveClick = (e) => {\n        const target = e.target.closest('wje-menu-item');\n        if (!target) return;\n\n        let rootMenu = target.closest('wje-menu');\n        let currentMenu = rootMenu;\n\n        // Nájdite najvyšší rodičovský wje-menu, ktorý obsahuje tento menu-item\n        while (currentMenu?.parentElement) {\n            const parent = currentMenu.parentElement.closest?.('wje-menu');\n            if (!parent) break;\n            rootMenu = parent;\n            currentMenu = parent;\n        }\n\n        // Ak je item v portálovanom submenu, pôvodný closest nemusí nájsť root menu.\n        // Skúsime ho získať z composedPath a vystúpiť na najvyšší <wje-menu>.\n        if (!rootMenu) {\n            const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n            let firstMenuInPath = path.find(n => n && n.tagName === 'WJE-MENU');\n            if (firstMenuInPath) {\n                let top = firstMenuInPath;\n                while (top && top.parentElement) {\n                    const parent = top.parentElement.closest?.('wje-menu');\n                    if (!parent) break;\n                    top = parent;\n                }\n                rootMenu = top;\n            }\n        }\n\n        // Ak stále nemáme rootMenu, nevieme kde aplikovať active-class\n        if (!rootMenu) return;\n\n        // Odstráň všetky existujúce triedy z predchádzajúcich kliknutí\n        rootMenu.querySelectorAll('wje-menu-item').forEach(item => {\n            const activeClass = item.getAttribute('active-class');\n            if (activeClass) item.classList.remove(activeClass);\n        });\n\n        // Pridaj active-class všetkým nadradeným menu-itemom vrátane targetu\n        let current = target;\n        while (current && current.tagName === 'WJE-MENU-ITEM') {\n            const activeClass = current.getAttribute('active-class');\n            if (activeClass) current.classList.add(activeClass);\n\n            // nájdi najbližší parent wje-menu\n            const parentMenu = current.closest('wje-menu');\n            if (!parentMenu) break;\n\n            // pokračuj na menu-item, ktorý má ako submenu tento parentMenu\n            const candidate = parentMenu.closest('wje-menu-item');\n            if (!candidate) break;\n\n            current = candidate;\n        }\n    }\n}\n","import MenuItem from './menu-item.element.js';\n\nexport default MenuItem;\n\nMenuItem.define('wje-menu-item', MenuItem);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAO;AANA;AAgGX,qCAAY;AA6KZ,6CAAoB,CAAC,MAAM;AACvB,UAAI,KAAK,YAAa,KAAK,YAAY,aAAa,KAAK,YAAa;AAClE,YAAI,KAAK,aAAa,QAAQ,KAAM,KAAK,YAAY,SAAS,KAAK,SAAW;AAE9E,aAAK,gBAAgB,CAAC;AAEtB,UAAE,gBAAiB;AAEnB,aAAK,YAAa;AAAA,MAC9B;AAAA,IACK;AAED,6CAAoB,CAAC,MAAM;AACvB,WAAK,0BAA0B,gBAAgB,EAAE,OAAO,WAAW,EAAE,UAAU,WAAW;AAAA,IAClG;AAMI;AAAA;AAAA;AAAA;AAAA,wCAAe,CAAC,MAAM;AAClB,cAAQ,KAAK,SAAO;AAAA,QAChB,KAAK;AACD,cAAI,CAAC,KAAK,YAAY,KAAK,YAAY;AACnC,iBAAK,cAAc,CAAC;AACpB,iBAAK,YAAa;AAClB,cAAE,gBAAiB;AAAA,UACvC,OAAuB;AACH,kBAAM,oBAAoB,MAAM,qBAAqB;AACrD,kBAAM,oBAAoB,MAAM,KAAK,MAAM;AAAA,UAC/D;AACgB;AAAA,QACJ,KAAK;AACD,cAAI,CAAC,KAAK,YAAY,KAAK,YAAY;AACnC,gBAAI,kBAAkB,KAAK,QAAQ,iBAAiB,EAAE,SAAS,MAAM,EAAE,CAAC;AACxE,gBAAI,mDAAiB,aAAa,WAAW;AACzC,mBAAK,kBAAkB,CAAC;AAAA,YAChD,OAA2B;AACH,mBAAK,gBAAgB,CAAC;AACtB,mBAAK,YAAY,CAAC;AAAA,YAC1C;AAAA,UACA,OAAuB;AACH,kBAAM,oBAAoB,MAAM,qBAAqB;AACrD,kBAAM,oBAAoB,MAAM,KAAK,MAAM;AAAA,UAC/D;AAEgB;AAAA,MAChB;AAAA,IACA;AAMI;AAAA;AAAA;AAAA;AAAA,6CAAoB,CAAC,MAAM;AACvB,UAAI,KAAK,YAAa,KAAK,YAAY,aAAa,KAAK,YAAa;AAClE,YAAK,EAAE,iBAAiB,KAAK,SAAS,EAAE,aAAa,KAAO,KAAK,YAAY,SAAS,CAAC,KAAK,UAAW;AACnG;AAAA,QAChB;AAEY,aAAK,kBAAmB;AACxB,aAAK,YAAa;AAAA,MAC9B;AAAA,IACK;AA+BD;AAAA;AAAA;AAAA,wCAAe,CAAC,MAAM;AAClB,WAAK,MAAM,YAAY,0CAA0C,GAAG,EAAE,OAAO,IAAI;AACjF,WAAK,MAAM,YAAY,0CAA0C,GAAG,EAAE,OAAO,IAAI;AAAA,IACpF;AAKD;AAAA;AAAA;AAAA,8CAAqB,CAAC,MAAM;AAExB,UAAI,KAAK,QAAQ,cAAa,EAAG,WAAW,EAAG;AAE/C,UAAI,UAAU,KAAK,QAAQ,cAAa,EAAG,CAAC;AAC5C,YAAM,EAAE,MAAM,KAAK,OAAO,OAAQ,IAAG,QAAQ,sBAAuB;AAEpE,WAAK,MAAM,YAAY,iDAAiD,GAAG,IAAI,IAAI;AACnF,WAAK,MAAM,YAAY,iDAAiD,GAAG,GAAG,IAAI;AAClF,WAAK,MAAM,YAAY,+CAA+C,GAAG,IAAI,IAAI;AACjF,WAAK,MAAM,YAAY,+CAA+C,GAAG,MAAM,MAAM,IAAI;AAAA,IAC5F;AAiHD,6CAAoB,CAAC,MAAM;;AACvB,YAAM,SAAS,EAAE,OAAO,QAAQ,eAAe;AAC/C,UAAI,CAAC,OAAQ;AAEb,UAAI,WAAW,OAAO,QAAQ,UAAU;AACxC,UAAI,cAAc;AAGlB,aAAO,2CAAa,eAAe;AAC/B,cAAM,UAAS,uBAAY,eAAc,YAA1B,4BAAoC;AACnD,YAAI,CAAC,OAAQ;AACb,mBAAW;AACX,sBAAc;AAAA,MAC1B;AAIQ,UAAI,CAAC,UAAU;AACX,cAAM,OAAO,OAAO,EAAE,iBAAiB,aAAa,EAAE,aAAY,IAAK,CAAE;AACzE,YAAI,kBAAkB,KAAK,KAAK,OAAK,KAAK,EAAE,YAAY,UAAU;AAClE,YAAI,iBAAiB;AACjB,cAAI,MAAM;AACV,iBAAO,OAAO,IAAI,eAAe;AAC7B,kBAAM,UAAS,eAAI,eAAc,YAAlB,4BAA4B;AAC3C,gBAAI,CAAC,OAAQ;AACb,kBAAM;AAAA,UAC1B;AACgB,qBAAW;AAAA,QAC3B;AAAA,MACA;AAGQ,UAAI,CAAC,SAAU;AAGf,eAAS,iBAAiB,eAAe,EAAE,QAAQ,UAAQ;AACvD,cAAM,cAAc,KAAK,aAAa,cAAc;AACpD,YAAI,YAAa,MAAK,UAAU,OAAO,WAAW;AAAA,MAC9D,CAAS;AAGD,UAAI,UAAU;AACd,aAAO,WAAW,QAAQ,YAAY,iBAAiB;AACnD,cAAM,cAAc,QAAQ,aAAa,cAAc;AACvD,YAAI,YAAa,SAAQ,UAAU,IAAI,WAAW;AAGlD,cAAM,aAAa,QAAQ,QAAQ,UAAU;AAC7C,YAAI,CAAC,WAAY;AAGjB,cAAM,YAAY,WAAW,QAAQ,eAAe;AACpD,YAAI,CAAC,UAAW;AAEhB,kBAAU;AAAA,MACtB;AAAA,IACA;AA/hBQ,SAAK,QAAQ;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,QAAI,OAAO,KAAK,cAAc,UAAU;AAExC,QAAI,6BAAM,aAAa,cAAc;AACjC,aAAO,KAAK,aAAa,WAAW;AAAA,IAChD;AACQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS;AACT,QAAI,OAAO,KAAK,cAAc,UAAU;AAExC,QAAI,6BAAM,aAAa,WAAW;AAC9B,aAAO,KAAK,aAAa,QAAQ;AAAA,IAC7C;AACQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,QAAI,OAAO,KAAK,cAAc,UAAU;AAExC,SAAI,6BAAM,aAAa,eAAc,CAAC,KAAK,UAAU;AACjD,aAAO,KAAK,aAAa,SAAS,EAAE,YAAa;AAAA,IAC7D;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,QAAI,KAAK,QAAQ,YAAY,EAAG,QAAO;AAEvC,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY,OAAO;AACnB,SAAK,aAAa,gBAAgB,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc;AACd,WAAO,KAAK,aAAa,cAAc;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,IAAI,wBAAwB;AACxB,UAAM,aAAa,MAAM,KAAK,KAAK,UAAU,EAAE,OAAO,CAAC,SAAS,KAAK,KAAK,WAAW,eAAe,CAAC;AAErG,WAAO,WAAW,OAAO,CAAC,KAAK,SAAS;AACpC,YAAM,MAAM,KAAK,KAAK,QAAQ,iBAAiB,EAAE;AACjD,UAAI,GAAG,IAAI,KAAK;AAEhB,aAAO;AAAA,IACV,GAAE,EAAE;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,UAAM,gBAAiB;AACvB,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;;AACT,eAAK,cAAc,UAAU,MAA7B,mBAAgC,gBAAgB;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;;AACH,SAAK,aAAa,eAAe,QAAQ,MAAM,SAAS;AAExD,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,aAAa,YAAY,GAAG;AAEjC,SAAK,UAAU,QAAQ,CAAC,cAAc;AAElC,UAAI,UAAU,WAAW,mBAAmB,GAAG;AAC3C,aAAK,UAAU,OAAO,SAAS;AAAA,MAC/C;AAAA,IACA,CAAS;AAED,SAAK,UAAU,OAAO,UAAU;AAChC,SAAK,UAAU,IAAI,sBAAsB,KAAK,QAAQ,aAAa;AAEnE,QAAI,CAAC,KAAK,UAAU;AAChB,iBAAK,cAAc,UAAU,MAA7B,mBAAgC,aAAa,WAAW,KAAK,QAAQ;IACxE,YAAU,UAAK,kBAAL,mBAAoB,aAAa,aAAa;AACrD,WAAK,UAAU,IAAI,UAAU;AAAA,IACzC;AAEQ,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,MAAM,QAAQ;AAClC,WAAO,UAAU,IAAI,kBAAkB;AAGvC,QAAI,cAAc,SAAS,cAAc,MAAM;AAC/C,gBAAY,aAAa,QAAQ,OAAO;AACxC,gBAAY,UAAU,IAAI,YAAY;AACtC,gBAAY,YAAY;AAExB,QAAI,KAAK,aAAa,SAAS,EAAG,aAAY,UAAU,IAAI,SAAS;AAAA,QAChE,aAAY,UAAU,OAAO,SAAS;AAG3C,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,OAAO;AAGb,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,UAAU,IAAI,OAAO;AAG1B,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAC9B,QAAI,OAAO;AAGX,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,aAAa,QAAQ,SAAS;AACtC,YAAQ,OAAO;AAGf,QAAI,mBAAmB,KAAK,WAAW,aAAa;AACpD,QAAI,cAAc,SAAS,cAAc,MAAM;AAC/C,gBAAY,aAAa,QAAQ,cAAc;AAC/C,gBAAY,UAAU,IAAI,gBAAgB,gBAAgB;AAC1D,gBAAY,YAAY,KAAK,WACvB,8CACA;AAEN,QAAI,KAAK,WAAY,QAAO,UAAU,IAAI,aAAa;AAAA,QAClD,QAAO,UAAU,OAAO,aAAa;AAE1C,WAAO,YAAY,WAAW;AAC9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,GAAG;AACtB,WAAO,YAAY,WAAW;AAE9B,QAAI,WAAW;AAEf,QAAI,KAAK,YAAY,aAAa,KAAK,YAAY;AAC/C,aAAO,aAAa,QAAQ,QAAQ;AAEpC,UAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,YAAM,aAAa,UAAU,QAAQ;AACrC,YAAM,aAAa,aAAa,KAAK,SAAS;AAC9C,YAAM,aAAa,UAAU,KAAK,MAAM;AAExC,YAAM,YAAY,MAAM;AACxB,YAAM,YAAY,OAAO;AAEzB,WAAK,QAAQ;AACb,eAAS,YAAY,KAAK;AAC1B,iBAAW;AAAA,IACvB;AAEQ,UAAI,UAAK,kBAAL,mBAAoB,aAAa,gBAAe,CAAC,KAAK,YAAY;AAClE,eAAS,YAAY,KAAK,aAAa,MAAM,CAAC;AAAA,IAC1D,WAAmB,CAAC,UAAU;AAClB,eAAS,YAAY,MAAM;AAAA,IACvC;AAEQ,QAAK,CAAC,KAAK,YAAY,KAAK,YAAY,SAAW,KAAK,YAAY,cAAc,KAAK,YAAa;AAChG,eAAS,YAAY,OAAO;AAAA,IACxC;AAEQ,SAAK,SAAS;AACd,SAAK,UAAU;AAEf,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AAER,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,WAAW;AAEpF,aAAS,iBAAiB,qBAAqB,KAAK,iBAAiB;AAErE,SAAK,iBAAiB,aAAa,KAAK,YAAY;AACpD,SAAK,iBAAiB,wBAAwB,KAAK,kBAAkB;AAGrE,UAAM,YAAY,MAAM,cAAc,MAAM,KAAK,iBAAiB;AAElE,UAAM,YAAY,MAAM,cAAc,MAAM,KAAK,iBAAiB;AAElE,UAAM,YAAY,MAAM,YAAY,MAAM,KAAK,iBAAiB;AAChE,UAAM,YAAY,MAAM,SAAS,MAAM,KAAK,YAAY;AAExD,QAAI,KAAK,aAAa,cAAc,GAAG;AACnC,YAAM,YAAY,MAAM,SAAS,MAAM,sBAAK,4CAAoB;AAAA,IAC5E;AAEQ,QAAG,KAAK,aAAa,cAAc,GAAG;AAClC,WAAK,iBAAiB,SAAS,KAAK,iBAAiB;AAAA,IACjE;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwEI,aAAa,QAAQ;AACjB,QAAI,eAAe,SAAS,cAAc,MAAM;AAChD,iBAAa,aAAa,QAAQ,OAAO;AACzC,iBAAa,aAAa,QAAQ,eAAe;AAEjD,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,KAAK;AACrC,eAAW,aAAa,QAAQ,aAAa;AAE7C,QAAI,UAAU,SAAS,cAAc,aAAa;AAClD,YAAQ,aAAa,WAAW,KAAK,mBAAmB,IAAI,CAAC;AAC7D,YAAQ,aAAa,aAAa,OAAO;AACzC,YAAQ,aAAa,UAAU,KAAK,UAAU,GAAG;AAEjD,YAAQ,YAAY,YAAY;AAChC,YAAQ,YAAY,UAAU;AAC9B,YAAQ,YAAY,MAAM;AAE1B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EA6BI,cAAc;;AACV,SAAK,WAAW;AAChB,QAAI,KAAK,YAAY;AACjB,iBAAK,UAAL,mBAAY;AACZ,WAAK,UAAU,IAAI,kBAAkB;AACrC,WAAK,OAAO,UAAU,IAAI,kBAAkB;AAAA,IACxD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,cAAc;;AACV,SAAK,WAAW;AAChB,QAAI,KAAK,YAAY;AACjB,iBAAK,UAAL,mBAAY;AACZ,WAAK,UAAU,OAAO,kBAAkB;AACxC,WAAK,OAAO,UAAU,OAAO,kBAAkB;AAAA,IAC3D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,cAAc,GAAG;AACb,QAAI,KAAK,YAAY;AACjB,UAAI,kBAAkB,KAAK,QAAQ,iBAAiB,EAAE,SAAS,MAAM,EAAE,CAAC;AACxE,UAAI,CAAC,gBAAgB,aAAa,QAAQ,GAAG;AACzC,wBAAgB,aAAa,UAAU,EAAE;AAAA,MACzD,OAAmB;AACH,YAAI,SAAS,EAAE,OAAQ,iBAAgB,gBAAgB,QAAQ;AAAA,MAC/E;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,oBAAoB;AAChB,QAAI,KAAK,YAAY;AACjB,UAAI,kBAAkB,KAAK,QAAQ,iBAAiB,EAAE,SAAS,MAAM,EAAE,CAAC;AACxE,UAAI,mDAAiB,aAAa,WAAW;AACzC,2DAAiB,gBAAgB;AAAA,MACjD;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,QAAI,KAAK,YAAY;AACjB,UAAI,kBAAkB,KAAK,QAAQ,iBAAiB,EAAE,SAAS,MAAM,EAAE,CAAC;AACxE,UAAI,EAAC,mDAAiB,aAAa,YAAW;AAC1C,2DAAiB,aAAa,UAAU;AAAA,MACxD;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,aAAS,oBAAoB,qBAAqB,KAAK,iBAAiB;AAExE,SAAK,oBAAoB,aAAa,KAAK,YAAY;AACvD,SAAK,oBAAoB,wBAAwB,KAAK,kBAAkB;AAExE,UAAM,eAAe,MAAM,cAAc,MAAM,KAAK,iBAAiB;AACrE,UAAM,eAAe,MAAM,cAAc,MAAM,KAAK,iBAAiB;AACrE,UAAM,eAAe,MAAM,YAAY,MAAM,KAAK,iBAAiB;AACnE,UAAM,eAAe,MAAM,SAAS,MAAM,KAAK,YAAY;AAE3D,eAAK,sBAAL;AACA,eAAK,4BAAL;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,mBAAmB,SAAS;AACxB,QAAI,OAAO;AACX,aAAS,QAAQ,QAAQ,YAAY;AACjC,UAAI,KAAK,aAAa,KAAK,WAAW;AAClC,gBAAQ,KAAK;AAAA,MAC7B;AAAA,IACA;AACQ,WAAO,KAAK,KAAM;AAAA,EAC1B;AAwEA;AAxiBe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyeX,yBAAoB,WAAG;AACnB,OAAK;AAAA,IACH,IAAI,YAAY,KAAK,aAAa,EAAE,QAAQ,KAAK,uBAAuB,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,EACxG;AACT;AC/gBA,SAAS,OAAO,iBAAiB,QAAQ;"}
+{"version":3,"file":"wje-menu-item.js","sources":["../packages/wje-menu-item/menu-item.element.js","../packages/wje-menu-item/menu-item.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuItem` is a custom web component that represents a menu item.\n * @summary This element represents a menu item.\n * @documentation https://elements.webjet.sk/components/menu-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu item.\n * @csspart submenu - The submenu part of the menu item.\n * @slot - The default slot for the menu item.\n * @slot start - The slot for the start of the menu item.\n * @slot end - The slot for the end of the menu item.\n * @slot submenu - The slot for the submenu of the menu item.\n * @cssproperty [--wje-menu-item-color=var(--wje-color)] - Sets the text color of a menu item. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background=transparent] - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-hover=var(--wje-color-contrast-8)] - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-hover=var(--wje-border-color)] - Sets the background color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-focus=var(--wje-color-contrast-8)] - Defines the text color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-focus=var(--wje-border-color)] - Specifies the background color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-active=var(--wje-color-contrast-8)] - Sets the text color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-active=var(--wje-border-color)] - Specifies the background color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-padding-top=.5rem] - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-padding-bottom=.5rem] - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-line-height=1.8rem] - Sets the line height for the text within a menu item. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-submenu-offset=0] - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-item-icon-visibility=hidden] - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-x] - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-y] - Specifies the y-coordinate of the cursor for the safe triangle area.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-x] - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-y] - Defines the y-coordinate where the submenu's safe triangle starts.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-x] - Specifies the x-coordinate where the submenu's safe triangle ends.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-y] - Specifies the y-coordinate where the submenu's safe triangle ends.\n * @tag wje-menu-item\n */\nexport default class MenuItem extends WJElement {\n    /**\n     * Constructor for MenuItem class.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._bind = false;\n\n    }\n\n    /**\n     * Getter for placement attribute.\n     * @returns {string} The placement attribute of the menu or \"right-start\" if it doesn't exist.\n     */\n    get placement() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('placement')) {\n            return menu.getAttribute('placement');\n        }\n        return 'right-start';\n    }\n\n    /**\n     * Getter for offset attribute.\n     * @returns {string} The offset attribute of the menu or \"0\" if it doesn't exist.\n     */\n    get offset() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('offset')) {\n            return menu.getAttribute('offset');\n        }\n        return '0';\n    }\n\n    /**\n     * Getter for variant attribute.\n     * @returns {string} The variant attribute of the menu or \"CONTEXT\" if it doesn't exist.\n     */\n    get variant() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('variant') && !this.collapse) {\n            return menu.getAttribute('variant').toUpperCase();\n        }\n\n        return 'CONTEXT';\n    }\n\n    /**\n     * Getter for collapse attribute.\n     * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.\n     */\n    get collapse() {\n        if (this.closest('[collapse]')) return true;\n\n        return false;\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    className = 'MenuItem';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} The styles imported from styles.css.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for observedAttributes.\n     * @returns {Array} An empty array as no attributes are being observed.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the MenuItem element.\n     */\n    setupAttributes() {\n        super.setupAttributes();\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Removes the active attribute from the menu before drawing the MenuItem.\n     */\n    beforeDraw() {\n        this.querySelector('wje-menu')?.removeAttribute('active');\n    }\n\n    /**\n     * Draws the MenuItem element and sets the variant and collapse attributes.\n     * @returns {DocumentFragment} The fragment to be appended to the MenuItem.\n     */\n    draw() {\n        this.hasSubmenu = WjElementUtils.hasSlot(this, 'submenu');\n\n        let fragment = document.createDocumentFragment();\n\n        this.setAttribute('tabindex', '0');\n\n        this.classList.forEach((className) => {\n            // Ak trieda začína na \"wje-menu-variant-\", odstráňte ju\n            if (className.startsWith('wje-menu-variant-')) {\n                this.classList.remove(className);\n            }\n        });\n\n        this.classList.remove('collapse');\n        this.classList.add('wje-menu-variant-' + this.variant.toLowerCase());\n\n        if (!this.collapse) {\n            this.querySelector('wje-menu')?.setAttribute('variant', this.variant.toLowerCase());\n        } else if (this.parentElement?.hasAttribute('collapse')) {\n            this.classList.add('collapse');\n        }\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.setAttribute('id', 'anchor');\n        native.classList.add('native-menu-item');\n\n        // CHECKED - Icon\n        let checkedIcon = document.createElement('span');\n        checkedIcon.setAttribute('part', 'check');\n        checkedIcon.classList.add('check-icon');\n        checkedIcon.innerHTML = `<wje-icon name=\"check\"></wje-icon>`;\n\n        if (this.hasAttribute('checked')) checkedIcon.classList.add('checked');\n        else checkedIcon.classList.remove('checked');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        // SLOT\n        let slot = document.createElement('slot');\n        slot.classList.add('label');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('part', 'end');\n        end.name = 'end';\n\n        // SLOT - Submenu\n        let submenu = document.createElement('slot');\n        submenu.setAttribute('part', 'submenu');\n        submenu.name = 'submenu';\n\n        // SUBMENU - Icon\n        let submenuIconClass = this.collapse ? 'collapse' : 'expand';\n        let submenuIcon = document.createElement('span');\n        submenuIcon.setAttribute('part', 'submenu-icon');\n        submenuIcon.classList.add('submenu-icon', submenuIconClass);\n        submenuIcon.innerHTML = this.collapse\n            ? `<wje-icon name=\"chevron-down\"></wje-icon>`\n            : `<wje-icon name=\"chevron-right\"></wje-icon>`;\n\n        if (this.hasSubmenu) native.classList.add('has-submenu');\n        else native.classList.remove('has-submenu');\n\n        native.appendChild(checkedIcon);\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n        native.appendChild(submenuIcon);\n\n        let isAppend = false;\n        // ak je variant typu CONTEXT zobrazime submenu ako popup\n        if (this.variant === 'CONTEXT' && this.hasSubmenu) {\n            native.setAttribute('slot', 'anchor'); // pridame slot anchor pre popup\n\n            let popup = document.createElement('wje-popup');\n            popup.setAttribute('anchor', 'anchor');\n            popup.setAttribute('placement', this.placement);\n            popup.setAttribute('offset', this.offset);\n\n            popup.appendChild(native);\n            popup.appendChild(submenu);\n\n            this.popup = popup;\n            fragment.appendChild(popup);\n            isAppend = true;\n        }\n\n        if (this.parentElement?.hasAttribute('collapse') && !this.hasSubmenu) {\n            fragment.appendChild(this.collapseItem(native));\n        } else if (!isAppend) {\n            fragment.appendChild(native);\n        }\n\n        if ((!this.collapse && this.variant === 'NAV') || (this.variant === 'MEGAMENU' && this.hasSubmenu)) {\n            fragment.appendChild(submenu);\n        }\n\n        this.native = native;\n        this.submenu = submenu;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after drawing the MenuItem.\n     */\n    afterDraw() {\n\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: '[route]' });\n\n        document.addEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n        this.addEventListener('mousemove', this.dispatchMove);\n        this.addEventListener('wje-popup:reposition', this.dispatchReposition);\n\n        // Event na zobrazenie submenu\n        event.addListener(this, 'mouseenter', null, this.mouseenterHandler);\n        // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n        event.addListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n        // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n        event.addListener(this, 'focusout', null, this.shouldHideSubmenu);\n        event.addListener(this, 'click', null, this.clickHandler);\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if(this.hasAttribute('active-class')) {\n            this.addEventListener('click', this.handleActiveClick);\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes based on menu item state.\n     */\n    syncAria() {\n        const hasSubmenu = !!this.hasSubmenu;\n        const expanded = this.classList.contains('expanded-submenu') || this.native?.classList?.contains('expanded-submenu');\n        const disabled = this.hasAttribute('disabled');\n\n        this.setAriaState({\n            role: 'menuitem',\n            disabled,\n            haspopup: hasSubmenu ? 'menu' : undefined,\n            expanded: hasSubmenu ? expanded : undefined,\n        });\n    }\n\n    mouseenterHandler = (e) => {\n        if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n            if (this.hasAttribute('manual') || (this.variant === 'NAV' && this.collapse)) return;\n\n            this.activateSubmenu(e);\n\n            e.stopPropagation();\n\n            this.showSubmenu();\n        }\n    };\n\n    rebindRouterLinks = (e) => {\n        this.unbindPortalRouterLinks = bindRouterLinks(e.detail.container, { selector: '[route]' });\n    }\n\n    /**\n     * Handles the click event on the MenuItem.\n     * @param {object} e\n     */\n    clickHandler = (e) => {\n        if (this.hasAttribute('disabled')) return;\n        switch (this.variant) {\n            case 'NAV':\n                if (!this.collapse && this.hasSubmenu) {\n                    this.submenuToggle(e);\n                    this.hideSubmenu();\n                    e.stopPropagation();\n                } else {\n                    event.dispatchCustomEvent(this, 'wje-menu-item:click');\n                    event.dispatchCustomEvent(this, this.dialog);\n                }\n                break;\n            case 'CONTEXT':\n                if (!this.collapse && this.hasSubmenu) {\n                    let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n                    if (submenuElements?.hasAttribute('active')) {\n                        this.shouldHideSubmenu(e);\n                    } else {\n                        this.activateSubmenu(e);\n                        this.showSubmenu(e);\n                    }\n                } else {\n                    event.dispatchCustomEvent(this, 'wje-menu-item:click');\n                    event.dispatchCustomEvent(this, this.dialog);\n                }\n\n                break;\n        }\n    }\n\n    /**\n     * Checks if the submenu should be hidden based on the event.\n     * @param {Event} e The event object.\n     */\n    shouldHideSubmenu = (e) => {\n        if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n            if ((e.relatedTarget && this.contains(e.relatedTarget)) || (this.variant === 'NAV' && !this.collapse)) {\n                return;\n            }\n\n            this.deactivateSubmenu();\n            this.hideSubmenu();\n        }\n    };\n\n    /**\n     * Creates a tooltip for the MenuItem when it is collapsed.\n     * @param {HTMLElement} native The native MenuItem element.\n     * @returns {HTMLElement} The tooltip element.\n     */\n    collapseItem(native) {\n        let tooltipStart = document.createElement('slot');\n        tooltipStart.setAttribute('slot', 'start');\n        tooltipStart.setAttribute('name', 'tooltip-start');\n\n        let tooltipEnd = document.createElement('slot');\n        tooltipEnd.setAttribute('slot', 'end');\n        tooltipEnd.setAttribute('name', 'tooltip-end');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.getTextFromElement(this));\n        tooltip.setAttribute('placement', 'right');\n        tooltip.setAttribute('offset', this.offset || '0');\n\n        tooltip.appendChild(tooltipStart);\n        tooltip.appendChild(tooltipEnd);\n        tooltip.appendChild(native);\n\n        return tooltip;\n    }\n\n    /**\n     * Dispatches a mousemove event.\n     */\n    dispatchMove = (e) => {\n        this.style.setProperty('--wje-menu-item-safe-triangle-cursor-x', `${e.clientX}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-cursor-y', `${e.clientY}px`);\n    };\n\n    /**\n     * Dispatches a reposition event.\n     */\n    dispatchReposition = (e) => {\n        // ak nemame submenu tak to ukoncime\n        if (this.submenu.assignedNodes().length === 0) return;\n\n        let submenu = this.submenu.assignedNodes()[0];\n        const { left, top, width, height } = submenu.getBoundingClientRect();\n\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-x', `${left}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-y', `${top}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-x', `${left}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-y', `${top + height}px`);\n    };\n\n    /**\n     * Shows the submenu of the MenuItem.\n     */\n    showSubmenu() {\n        this.tabIndex = -1;\n        if (this.hasSubmenu) {\n            this.popup?.show();\n            this.classList.add('expanded-submenu');\n            this.native.classList.add('expanded-submenu');\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Hides the submenu of the MenuItem.\n     */\n    hideSubmenu() {\n        this.tabIndex = 0;\n        if (this.hasSubmenu) {\n            this.popup?.hide();\n            this.classList.remove('expanded-submenu');\n            this.native.classList.remove('expanded-submenu');\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Toggles the active state of the submenu element.\n     * If the submenu is not active, it sets the \"active\" attribute.\n     * If the submenu is already active, it removes the \"active\" attribute.\n     * @param {Event} e The event object.\n     */\n    submenuToggle(e) {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (!submenuElements.hasAttribute('active')) {\n                submenuElements.setAttribute('active', '');\n                this.syncAria();\n            } else {\n                if (this === e.target) submenuElements.removeAttribute('active');\n                this.syncAria();\n            }\n        }\n    }\n\n    /**\n     * Deactivates the submenu by removing the \"active\" attribute.\n     */\n    deactivateSubmenu() {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (submenuElements?.hasAttribute('active')) {\n                submenuElements?.removeAttribute('active');\n                this.syncAria();\n            }\n        }\n    }\n\n    /**\n     * Activates the submenu of the menu item.\n     */\n    activateSubmenu() {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (!submenuElements?.hasAttribute('active')) {\n                submenuElements?.setAttribute('active', '');\n                this.syncAria();\n            }\n        }\n    }\n\n    /**\n     * Gets the text from the element and returns it.\n     */\n    beforeDisconnect() {\n        document.removeEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n        this.removeEventListener('mousemove', this.dispatchMove);\n        this.removeEventListener('wje-popup:reposition', this.dispatchReposition);\n\n        event.removeListener(this, 'mouseenter', null, this.mouseenterHandler);\n        event.removeListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n        event.removeListener(this, 'focusout', null, this.shouldHideSubmenu);\n        event.removeListener(this, 'click', null, this.clickHandler);\n\n        this.unbindRouterLinks?.();\n        this.unbindPortalRouterLinks?.();\n    }\n\n    /**\n     * Extracts and returns the concatenated text content from all text nodes within the specified element.\n     * @param {HTMLElement} element The HTML element from which to extract text content.\n     * @returns {string} The concatenated and trimmed text content from the element's text nodes.\n     */\n    getTextFromElement(element) {\n        let text = '';\n        for (let node of element.childNodes) {\n            if (node.nodeType === Node.TEXT_NODE) {\n                text += node.textContent;\n            }\n        }\n        return text.trim();\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n\n    handleActiveClick = (e) => {\n        const target = e.target.closest('wje-menu-item');\n        if (!target) return;\n\n        let rootMenu = target.closest('wje-menu');\n        let currentMenu = rootMenu;\n\n        // Nájdite najvyšší rodičovský wje-menu, ktorý obsahuje tento menu-item\n        while (currentMenu?.parentElement) {\n            const parent = currentMenu.parentElement.closest?.('wje-menu');\n            if (!parent) break;\n            rootMenu = parent;\n            currentMenu = parent;\n        }\n\n        // Ak je item v portálovanom submenu, pôvodný closest nemusí nájsť root menu.\n        // Skúsime ho získať z composedPath a vystúpiť na najvyšší <wje-menu>.\n        if (!rootMenu) {\n            const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n            let firstMenuInPath = path.find(n => n && n.tagName === 'WJE-MENU');\n            if (firstMenuInPath) {\n                let top = firstMenuInPath;\n                while (top && top.parentElement) {\n                    const parent = top.parentElement.closest?.('wje-menu');\n                    if (!parent) break;\n                    top = parent;\n                }\n                rootMenu = top;\n            }\n        }\n\n        // Ak stále nemáme rootMenu, nevieme kde aplikovať active-class\n        if (!rootMenu) return;\n\n        // Odstráň všetky existujúce triedy z predchádzajúcich kliknutí\n        rootMenu.querySelectorAll('wje-menu-item').forEach(item => {\n            const activeClass = item.getAttribute('active-class');\n            if (activeClass) item.classList.remove(activeClass);\n        });\n\n        // Pridaj active-class všetkým nadradeným menu-itemom vrátane targetu\n        let current = target;\n        while (current && current.tagName === 'WJE-MENU-ITEM') {\n            const activeClass = current.getAttribute('active-class');\n            if (activeClass) current.classList.add(activeClass);\n\n            // nájdi najbližší parent wje-menu\n            const parentMenu = current.closest('wje-menu');\n            if (!parentMenu) break;\n\n            // pokračuj na menu-item, ktorý má ako submenu tento parentMenu\n            const candidate = parentMenu.closest('wje-menu-item');\n            if (!candidate) break;\n\n            current = candidate;\n        }\n    }\n}\n","import MenuItem from './menu-item.element.js';\n\nexport default MenuItem;\n\nMenuItem.define('wje-menu-item', MenuItem);\n"],"names":[],"mappings":"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"}

package/dist/wje-menu.js

@@ -2,7 +2,7 @@ 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 WJElement from "./wje-element.js";
-const styles = "/*\n[ Wj Menu ]\n*/\n\n:host {\n    display: none;\n    background: var(--wje-menu-background);\n    position: relative;\n    border-width: var(--wje-menu-border-width);\n    border-style: var(--wje-menu-border-style);\n    border-color: var(--wje-menu-border-color);\n    z-index: var(--wje-menu-z-index, 8);\n    box-shadow: var(--wje-menu-shadow);\n    border-radius: var(--wje-menu-border-radius);\n    padding-top: var(--wje-menu-padding-top);\n    padding-bottom: var(--wje-menu-padding-bottom);\n    padding-inline: var(--wje-menu-padding-inline);\n    margin-top: var(--wje-menu-margin-top);\n    margin-bottom: var(--wje-menu-margin-bottom);\n    margin-inline: var(--wje-menu-margin-inline);\n    overflow: auto;\n    overscroll-behavior: none;\n    .native-menu {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        ::slotted(wje-button) {\n            margin: 0;\n        }\n    }\n}\n\n:host(.wje-menu-collapse) {\n    width: var(--wje-menu-collapse-width);\n}\n\n:host([collapse]) {\n    box-shadow: none;\n}\n\n:host([variant='context']) {\n    display: block !important;\n    margin-left: var(--wje-menu-submenu-offset);\n}\n\n:host([variant='megamenu']) .native-menu {\n    flex-direction: row;\n    align-items: end;\n    flex-wrap: nowrap;\n    .check-icon {\n        display: none;\n    }\n}\n\n:host([active]) {\n    display: flex !important;\n}\n";
+const styles = "/*\n[ Wj Menu ]\n*/\n\n:host {\n    display: none;\n    background: var(--wje-menu-background);\n    position: relative;\n    border-width: var(--wje-menu-border-width);\n    border-style: var(--wje-menu-border-style);\n    border-color: var(--wje-menu-border-color);\n    z-index: var(--wje-menu-z-index, 8);\n    box-shadow: var(--wje-menu-shadow);\n    border-radius: var(--wje-menu-border-radius);\n    padding-top: var(--wje-menu-padding-top);\n    padding-bottom: var(--wje-menu-padding-bottom);\n    padding-inline: var(--wje-menu-padding-inline);\n    margin-top: var(--wje-menu-margin-top);\n    margin-bottom: var(--wje-menu-margin-bottom);\n    margin-inline: var(--wje-menu-margin-inline);\n    overflow: auto;\n    /*overscroll-behavior: none;*/\n    .native-menu {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        ::slotted(wje-button) {\n            margin: 0;\n        }\n    }\n}\n\n:host(.wje-menu-collapse) {\n    width: var(--wje-menu-collapse-width);\n}\n\n:host([collapse]) {\n    box-shadow: none;\n}\n\n:host([variant='context']) {\n    display: block !important;\n    margin-left: var(--wje-menu-submenu-offset);\n}\n\n:host([variant='megamenu']) .native-menu {\n    flex-direction: row;\n    align-items: end;\n    flex-wrap: nowrap;\n    .check-icon {\n        display: none;\n    }\n}\n\n:host([active]) {\n    display: flex !important;\n}\n";
 class Menu extends WJElement {
   /**
    * Creates an instance of Menu.
@@ -33,6 +33,9 @@ class Menu extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({
+      role: "menu"
+    });
   }
   /**
    * Draws the component for the menu.

package/dist/wje-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-menu.js","sources":["../packages/wje-menu/menu.element.js","../packages/wje-menu/menu.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Menu` is a custom web component that represents a menu.\n * It extends from `WJElement`.\n * @summary This element represents a menu.\n * @documentation https://elements.webjet.sk/components/menu\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu.\n * @slot - The default slot for the menu.\n * @cssproperty [--wje-menu-background=var(--wje-background)] - Defines the background color of the menu. Accepts any valid CSS color value, such as `#ffffff`, `rgb(255, 255, 255)`, or CSS variables.\n * @cssproperty [--wje-menu-border-width=1px] - Specifies the width of the menu's border. Accepts any valid CSS length value (e.g., `px`, `em`, `%`).\n * @cssproperty [--wje-menu-border-style=solid] - Sets the style of the menu's border. Common values include `solid`, `dashed`, `dotted`, etc.\n * @cssproperty [--wje-menu-border-color=var(--wje-border-color)] - Defines the color of the menu's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-border-radius=var(--wje-border-radius-small)] - Determines the radius of the menu's corners, creating rounded edges. Accepts any valid CSS length value (e.g., `px`, `%`).\n * @cssproperty [--wje-menu-padding-top=.5rem] - Specifies the top padding inside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-padding-bottom=.5rem] - Specifies the bottom padding inside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-padding-inline=0] - Sets the horizontal (left and right) padding inside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-margin-top=0] - Defines the top margin outside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-margin-bottom=0] - Defines the bottom margin outside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-margin-inline=0] - Specifies the horizontal (left and right) margin outside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-collapse-width=65px] - Sets the width of the menu when it is collapsed. This property is typically used to define the reduced size of the menu in collapsed state. Accepts any valid CSS length value.\n * @tag wje-menu\n */\nexport default class Menu extends WJElement {\n    /**\n     * Creates an instance of Menu.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Menu';\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 ['active', 'collapse'];\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 menu.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.remove('wje-menu-collapse');\n\n        if (this.hasAttribute('collapse')) this.classList.add('wje-menu-collapse');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-menu');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Refreshes the component after drawing.\n     */\n    afterDraw() {\n        Array.from(this.children).forEach((child) => {\n            if (child.tagName.includes('-')) child.refresh();\n        });\n    }\n\n    /**\n     * Cleans up the component before disconnecting.\n     */\n    beforeDisconnect() {\n        this.context.innerHTML = '';\n    }\n}\n","import Menu from './menu.element.js';\n\nexport default Menu;\n\nMenu.define('wje-menu', Menu);\n"],"names":[],"mappings":";;;;;AA0Be,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,UAAU,UAAU;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,UAAU,OAAO,mBAAmB;AAEzC,QAAI,KAAK,aAAa,UAAU,EAAG,MAAK,UAAU,IAAI,mBAAmB;AAEzE,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AACvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,CAAC,UAAU;AACzC,UAAI,MAAM,QAAQ,SAAS,GAAG,EAAG,OAAM,QAAS;AAAA,IAC5D,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,SAAK,QAAQ,YAAY;AAAA,EACjC;AACA;AChGA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-menu.js","sources":["../packages/wje-menu/menu.element.js","../packages/wje-menu/menu.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Menu` is a custom web component that represents a menu.\n * It extends from `WJElement`.\n * @summary This element represents a menu.\n * @documentation https://elements.webjet.sk/components/menu\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu.\n * @slot - The default slot for the menu.\n * @cssproperty [--wje-menu-background=var(--wje-background)] - Defines the background color of the menu. Accepts any valid CSS color value, such as `#ffffff`, `rgb(255, 255, 255)`, or CSS variables.\n * @cssproperty [--wje-menu-border-width=1px] - Specifies the width of the menu's border. Accepts any valid CSS length value (e.g., `px`, `em`, `%`).\n * @cssproperty [--wje-menu-border-style=solid] - Sets the style of the menu's border. Common values include `solid`, `dashed`, `dotted`, etc.\n * @cssproperty [--wje-menu-border-color=var(--wje-border-color)] - Defines the color of the menu's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-border-radius=var(--wje-border-radius-small)] - Determines the radius of the menu's corners, creating rounded edges. Accepts any valid CSS length value (e.g., `px`, `%`).\n * @cssproperty [--wje-menu-padding-top=.5rem] - Specifies the top padding inside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-padding-bottom=.5rem] - Specifies the bottom padding inside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-padding-inline=0] - Sets the horizontal (left and right) padding inside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-margin-top=0] - Defines the top margin outside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-margin-bottom=0] - Defines the bottom margin outside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-margin-inline=0] - Specifies the horizontal (left and right) margin outside the menu. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-collapse-width=65px] - Sets the width of the menu when it is collapsed. This property is typically used to define the reduced size of the menu in collapsed state. Accepts any valid CSS length value.\n * @tag wje-menu\n */\nexport default class Menu extends WJElement {\n    /**\n     * Creates an instance of Menu.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Menu';\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 ['active', 'collapse'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'menu',\n        });\n    }\n\n    /**\n     * Draws the component for the menu.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.remove('wje-menu-collapse');\n\n        if (this.hasAttribute('collapse')) this.classList.add('wje-menu-collapse');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-menu');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Refreshes the component after drawing.\n     */\n    afterDraw() {\n        Array.from(this.children).forEach((child) => {\n            if (child.tagName.includes('-')) child.refresh();\n        });\n    }\n\n    /**\n     * Cleans up the component before disconnecting.\n     */\n    beforeDisconnect() {\n        this.context.innerHTML = '';\n    }\n}\n","import Menu from './menu.element.js';\n\nexport default Menu;\n\nMenu.define('wje-menu', Menu);\n"],"names":[],"mappings":";;;;;AA0Be,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,UAAU,UAAU;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,IAClB,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,UAAU,OAAO,mBAAmB;AAEzC,QAAI,KAAK,aAAa,UAAU,EAAG,MAAK,UAAU,IAAI,mBAAmB;AAEzE,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AACvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,CAAC,UAAU;AACzC,UAAI,MAAM,QAAQ,SAAS,GAAG,EAAG,OAAM,QAAS;AAAA,IAC5D,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,SAAK,QAAQ,YAAY;AAAA,EACjC;AACA;ACnGA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/{packages/wje-option → wje-option}/option.element.d.ts

@@ -85,6 +85,10 @@ export default class Option extends WJElement {
      * @returns {void} Does not return a value.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Handles the click event on an option element and dispatches a custom event when triggered.
      * @param {Event} e The click event object that triggered the callback.

package/dist/wje-option.js

@@ -9,7 +9,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _Option_instances, isCheckbox_fn, setCheckbox_fn;
 import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-DY5AZ6xM.js";
+import { I as Icon } from "./icon-DVyMc4Wv.js";
 import Checkbox from "./wje-checkbox.js";
 import { event } from "./event.js";
 const styles = `/*
@@ -182,12 +182,14 @@ class Option extends WJElement {
         __privateMethod(this, _Option_instances, setCheckbox_fn).call(this, false);
       }
     }
+    this.syncAria();
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the option.
@@ -240,6 +242,17 @@ class Option extends WJElement {
     if (this.checkbox && this.multiple) {
       __privateMethod(this, _Option_instances, setCheckbox_fn).call(this, this.selected);
     }
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "option",
+      selected: this.selected,
+      disabled: this.hasAttribute("disabled")
+    });
   }
   /**
    * Handles operations or cleanup tasks that need to occur before disconnecting.