wj-elements 0.2.0-alpha.8 → 0.3.0

package/dist/wje-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n */\nexport default class Tooltip extends WJElement {\n    /**\n     * Creates an instance of Tooltip.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Set active attribute for the tooltip element.\n     * @param value\n     */\n    set content(value) {\n        this.setAttribute('content', value);\n    }\n\n    /**\n     * Get active attribute for the tooltip element.\n     * @returns {string}\n     */\n    get content() {\n        if (this.hasAttribute('content')) return this.getAttribute('content');\n\n        return '';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tooltip';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An array of observed attributes\n     */\n    static get observedAttributes() {\n        return ['active'];\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 tooltip.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'top');\n        popup.setAttribute('offset', this.offset || '0');\n\n        // SLOT - Anchor\n        let slot = document.createElement('slot');\n        slot.setAttribute('slot', 'anchor');\n\n        let arrow = document.createElement('div');\n        arrow.classList.add('arrow');\n        arrow.setAttribute('slot', 'arrow');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let content = document.createElement('div');\n        content.innerHTML = this.content;\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tooltip');\n\n        native.appendChild(start);\n        native.appendChild(content);\n        native.appendChild(end);\n\n        popup.appendChild(slot);\n        popup.appendChild(arrow);\n        popup.appendChild(native);\n\n        this.mySlot = slot;\n        this.popup = popup;\n        this.native = native;\n\n        fragment.appendChild(popup);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     */\n    afterDraw() {\n        let anchorEl = this.mySlot.assignedElements()[0];\n        if (this.selector) {\n            anchorEl = this.checkSelector(anchorEl);\n        }\n\n        if (!anchorEl) return;\n\n        event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n        event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n    }\n\n    afterDisconnect() {\n        event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n        event.removeListener(this, 'mouseenter', null, this.onShow);\n        event.removeListener(this, 'mouseleave', null, this.onHide);\n    }\n\n    dispatch(customEvent) {\n        return new Promise((resolve) => {\n            event.dispatchCustomEvent(this, customEvent, {\n                resolve: resolve,\n            });\n        });\n    }\n\n    beforeShow() {\n        return this.native.innerHTML;\n    }\n\n    afterShow() {\n        return true;\n    }\n\n    popupHideCallback = () => {\n        this.onHide();\n    };\n\n    /**\n     * Handles the logic for showing the component's popup or tooltip.\n     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n     */\n    onShow = () => {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.add('active');\n\n        if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n            return;\n        }\n\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active') || !res || typeof res !== 'string') {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.native.innerHTML = res;\n\n                this.popup.show(); // Show tooltip\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch(() => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Hides the component's popup or tooltip.\n     * Removes the `active` class from the component and hides the popup element.\n     */\n    onHide = () => {\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.remove('active');\n        this.popup.hide();\n    };\n\n    /**\n     * Validates if the specified selector exists within the provided element.\n     * Logs an error if the selector is not found and returns the found element or `null`.\n     * @param {HTMLElement} anchorEl The root element to search within.\n     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.\n     */\n    checkSelector(anchorEl) {\n        const newAnchorEl = anchorEl.querySelector(this.selector);\n        if (newAnchorEl === null) {\n            console.error('Selector not found:', this.selector);\n        }\n\n        return newAnchorEl;\n    }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n */\nexport default class Tooltip extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Tooltip.\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Tooltip._instanceId;\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Set active attribute for the tooltip element.\n     * @param value\n     */\n    set content(value) {\n        this.setAttribute('content', value);\n    }\n\n    /**\n     * Get active attribute for the tooltip element.\n     * @returns {string}\n     */\n    get content() {\n        if (this.hasAttribute('content')) return this.getAttribute('content');\n\n        return '';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tooltip';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An array of observed attributes\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'tooltip' });\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'top');\n        popup.setAttribute('offset', this.offset || '0');\n\n        // SLOT - Anchor\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'anchor');\n        slot.setAttribute('slot', 'anchor');\n\n        let arrow = document.createElement('div');\n        arrow.classList.add('arrow');\n        arrow.setAttribute('slot', 'arrow');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let content = document.createElement('div');\n        content.innerHTML = this.content;\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tooltip');\n\n        native.appendChild(start);\n        native.appendChild(content);\n        native.appendChild(end);\n\n        popup.appendChild(slot);\n        popup.appendChild(arrow);\n        popup.appendChild(native);\n\n        this.mySlot = slot;\n        this.popup = popup;\n        this.native = native;\n\n        fragment.appendChild(popup);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     */\n    afterDraw() {\n        const resolveAnchor = () => {\n            let anchorEl = this.mySlot.assignedElements()[0];\n            if (!anchorEl) {\n                anchorEl = this.querySelector(':scope > *:not([slot])');\n                if (anchorEl) anchorEl.setAttribute('slot', 'anchor');\n            }\n            if (this.selector) {\n                anchorEl = this.checkSelector(anchorEl);\n            }\n\n            if (!anchorEl) return null;\n\n            const tooltipId = this.id || `wje-tooltip-${this._instanceId}`;\n            if (!this.id) this.id = tooltipId;\n            anchorEl.setAttribute('aria-describedby', tooltipId);\n            return anchorEl;\n        };\n\n        this.onSlotChange = () => {\n            resolveAnchor();\n        };\n\n        this.mySlot.addEventListener('slotchange', this.onSlotChange);\n        this.onSlotChange();\n\n        let anchorEl = resolveAnchor();\n\n        if (!anchorEl) return;\n\n        event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n        event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n    }\n\n    afterDisconnect() {\n        event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n        event.removeListener(this, 'mouseenter', null, this.onShow);\n        event.removeListener(this, 'mouseleave', null, this.onHide);\n        this.mySlot?.removeEventListener('slotchange', this.onSlotChange);\n    }\n\n    dispatch(customEvent) {\n        return new Promise((resolve) => {\n            event.dispatchCustomEvent(this, customEvent, {\n                resolve: resolve,\n            });\n        });\n    }\n\n    beforeShow() {\n        return this.native.innerHTML;\n    }\n\n    afterShow() {\n        return true;\n    }\n\n    popupHideCallback = () => {\n        this.onHide();\n    };\n\n    /**\n     * Handles the logic for showing the component's popup or tooltip.\n     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n     */\n    onShow = () => {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.add('active');\n\n        if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n            return;\n        }\n\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active') || !res || typeof res !== 'string') {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.native.innerHTML = res;\n\n                this.popup.show(); // Show tooltip\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch(() => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Hides the component's popup or tooltip.\n     * Removes the `active` class from the component and hides the popup element.\n     */\n    onHide = () => {\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.remove('active');\n        this.popup.hide();\n    };\n\n    /**\n     * Validates if the specified selector exists within the provided element.\n     * Logs an error if the selector is not found and returns the found element or `null`.\n     * @param {HTMLElement} anchorEl The root element to search within.\n     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.\n     */\n    checkSelector(anchorEl) {\n        const newAnchorEl = anchorEl.querySelector(this.selector);\n        if (newAnchorEl === null) {\n            console.error('Selector not found:', this.selector);\n        }\n\n        return newAnchorEl;\n    }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":["anchorEl"],"mappings":"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"}

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

@@ -47,6 +47,10 @@ export default class Tree extends WJElement {
      * @returns {void} This method does not return a value.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Handles the click event triggered by the user interaction.
      * Identifies the closest tree item element to the event target and sets it

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

@@ -82,6 +82,7 @@ export default class TreeItem extends HTMLElement {
      */
     setupAttributes(): void;
     isShadowRoot: string;
+    connectedCallback(): void;
     /**
      * Handles updates when observed attributes of the element are changed.
      * Updates the checkbox state based on changes to the "selected" or "indeterminate" attributes.
@@ -137,6 +138,10 @@ export default class TreeItem extends HTMLElement {
      * @returns {void} Does not return a value.
      */
     toggleChildren(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Retrieves the child items from the `childrenSlot` that match specific criteria.
      * @param {object} [options] Configuration options.

package/dist/wje-tree-item.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 Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n            .indent {\n                display: block;\n                width: 1em;\n            }\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n            slot {\n                display: flex;\n                align-items: center;\n            }\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1rem + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
+const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: 1em;\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1rem + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            padding-inline-start: var(--wje-tree-item-indent, var(--wje-spacing-medium));\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
 class TreeItem extends WJElement {
   /**
    * Creates an instance of Toast.
@@ -102,6 +102,12 @@ class TreeItem extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
+  }
+  connectedCallback() {
+    var _a;
+    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
+    if (this.isNestedItem()) this.slot = "children";
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -120,6 +126,10 @@ class TreeItem extends WJElement {
    * @returns {void}
    */
   attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.checkbox) {
+      this.syncAria();
+      return;
+    }
     if (name === "selected") {
       if (this.selected) {
         this.checkbox.checked = true;
@@ -132,6 +142,7 @@ class TreeItem extends WJElement {
       this.checkbox.removeAttribute("checked");
       if (this.indeterminate) this.checkbox.setAttribute("indeterminate", "");
     }
+    this.syncAria();
   }
   /**
    * Custom logic executed before the draw process begins.
@@ -169,6 +180,7 @@ class TreeItem extends WJElement {
     let checkbox = document.createElement("wje-checkbox");
     if (this.selected) checkbox.setAttribute("checked", "");
     let label = document.createElement("div");
+    label.setAttribute("part", "label");
     label.classList.add("content");
     let slotElement = document.createElement("slot");
     let children = document.createElement("div");
@@ -224,6 +236,8 @@ class TreeItem extends WJElement {
   afterDraw() {
     if (this.expanded) this.toggleChildren();
     this.button.addEventListener("click", this.toggleChildren.bind(this));
+    this.setAttribute("tabindex", "0");
+    this.syncAria();
   }
   /**
    * Determines if the current item is a nested item within a tree structure.
@@ -251,6 +265,29 @@ class TreeItem extends WJElement {
   toggleChildren() {
     this.childrenElement.classList.toggle("open");
     this.native.classList.toggle("expanded");
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    var _a, _b;
+    const hasChildren = this.querySelectorAll(":scope > wje-tree-item").length > 0;
+    const expanded = hasChildren ? (_b = (_a = this.native) == null ? void 0 : _a.classList) == null ? void 0 : _b.contains("expanded") : void 0;
+    if (this.selection === "multiple") {
+      const checked = this.indeterminate ? "mixed" : this.selected ? "true" : "false";
+      this.setAriaState({
+        role: "treeitem",
+        checked,
+        expanded
+      });
+    } else {
+      this.setAriaState({
+        role: "treeitem",
+        selected: this.selected,
+        expanded
+      });
+    }
   }
   /**
    * Retrieves the child items from the `childrenSlot` that match specific criteria.
@@ -260,10 +297,9 @@ class TreeItem extends WJElement {
    */
   getChildrenItems(options = {}) {
     const includeDisabled = options.includeDisabled ?? true;
-    if (!this.childrenSlot) {
-      return [];
-    }
-    return [...this.childrenSlot.assignedElements({ flatten: true })].filter(
+    const assigned = this.childrenSlot ? this.childrenSlot.assignedElements({ flatten: true }) : [];
+    const direct = assigned.length ? assigned : Array.from(this.querySelectorAll(":scope > wje-tree-item"));
+    return direct.filter(
       (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this._selection = 'single';\n    }\n\n    /**\n     * Sets the expanded state of the element. When set to a truthy value,\n     * the 'expanded' attribute will be added to the element. When set to a falsy\n     * value, the 'expanded' attribute will be removed.\n     * @param {boolean} value A boolean value indicating whether the\n     * element should be expanded (true) or collapsed (false).\n     */\n    set expanded(value) {\n        if (value) {\n            this.setAttribute('expanded', '');\n        } else {\n            this.removeAttribute('expanded');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'expanded' state for the current element.\n     * This getter checks whether the 'expanded' attribute is present on the element.\n     * If the attribute exists, it returns true, representing that the element is expanded.\n     * Otherwise, it returns false, indicating that the element is not expanded.\n     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n     */\n    get expanded() {\n        return this.hasAttribute('expanded');\n    }\n\n    /**\n     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n     */\n    set selected(value) {\n        this.removeAttribute('selected');\n\n        if (value) this.setAttribute('selected', '');\n    }\n\n    /**\n     * Getter method for determining if the 'selected' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n     */\n    get selected() {\n        return this.hasAttribute('selected');\n    }\n\n    /**\n     * Sets the selection mode for the component.\n     * @param {string} value The selection mode to apply. Defaults to 'single'\n     * if no value is provided. Possible options may be\n     * specific to the implementation of the component\n     * (e.g., 'single', 'multiple').\n     */\n    set selection(value) {\n        this._selection = value || 'single';\n    }\n\n    /**\n     * Retrieves the current selection.\n     * @returns {*} The value of the current selection.\n     */\n    get selection() {\n        return this._selection;\n    }\n\n    /**\n     * Sets or removes the 'indeterminate' attribute based on the provided value.\n     * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n     */\n    set indeterminate(value) {\n        this.removeAttribute('indeterminate');\n\n        if (value) this.setAttribute('indeterminate', '');\n    }\n\n    /**\n     * Retrieves the state of the indeterminate attribute.\n     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n     */\n    get indeterminate() {\n        return this.hasAttribute('indeterminate');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'TreeItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['selected', 'indeterminate'];\n    }\n\n    /**\n     * Handles updates when observed attributes of the element are changed.\n     * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change.\n     * @param {string|null} newValue The new value of the attribute after the change.\n     * @returns {void}\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'selected') {\n            // this.checkbox.removeAttribute('indeterminate');\n            if (this.selected) {\n                this.checkbox.checked = true;\n            } else {\n                this.checkbox.checked = false;\n            }\n        }\n\n        if (name === 'indeterminate' && !this.selected) {\n            this.checkbox.removeAttribute('indeterminate');\n            this.checkbox.removeAttribute('checked');\n\n            if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n        }\n    }\n\n    /**\n     * Custom logic executed before the draw process begins.\n     * Determines and sets the appropriate slot if the current item is nested.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        if (this.isNestedItem()) this.slot = 'children';\n\n        if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Creates and returns a document fragment representing the structure of a tree item component.\n     * The method constructs the DOM elements including the native container, indentation, toggle button,\n     * selection checkbox, label, and children container, along with their respective slots and attributes.\n     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n     * child components.\n     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\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-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let item = document.createElement('div');\n        item.setAttribute('part', 'item');\n        item.classList.add('item');\n\n        let indent = document.createElement('div');\n        indent.classList.add('indent');\n\n        let button = document.createElement('div');\n        button.classList.add('toggle');\n\n        let checkbox = document.createElement('wje-checkbox');\n        if (this.selected) checkbox.setAttribute('checked', '');\n\n        let label = document.createElement('div');\n        label.classList.add('content');\n\n        let slotElement = document.createElement('slot');\n\n        let children = document.createElement('div');\n        children.classList.add('children');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'children');\n        children.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        item.appendChild(slotStart);\n        item.appendChild(indent);\n\n        if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n            if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n                let expandIcon = document.createElement('wje-icon');\n                expandIcon.setAttribute('name', 'chevron-right');\n                expandIcon.setAttribute('slot', 'expand');\n\n                this.appendChild(expandIcon);\n            }\n\n            if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n                let collapseIcon = document.createElement('wje-icon');\n                collapseIcon.setAttribute('name', 'chevron-down');\n                collapseIcon.setAttribute('slot', 'collapse');\n\n                this.appendChild(collapseIcon);\n            }\n\n            let expandSlot = document.createElement('slot');\n            expandSlot.setAttribute('name', 'expand');\n\n            let collapseSlot = document.createElement('slot');\n            collapseSlot.setAttribute('name', 'collapse');\n\n            button.appendChild(expandSlot);\n            button.appendChild(collapseSlot);\n        }\n\n        item.appendChild(button);\n\n        if (this.selection === 'multiple') item.appendChild(checkbox);\n\n        label.appendChild(slotElement);\n        item.appendChild(label);\n        item.appendChild(slotEnd);\n\n        native.appendChild(item);\n        native.appendChild(children);\n\n        fragment.appendChild(native);\n\n        this.checkbox = checkbox;\n        this.native = native;\n        this.button = button;\n        this.childrenElement = children;\n        this.childrenSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Executes operations to be performed after the draw action is completed.\n     * If the state indicates it is expanded, toggles its children.\n     * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.expanded) this.toggleChildren();\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n    }\n\n    /**\n     * Determines if the current item is a nested item within a tree structure.\n     * Checks if the item's parent element exists and is also a tree item.\n     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n     */\n    isNestedItem() {\n        const parent = this.parentElement;\n        return !!parent && this.isTreeItem(parent);\n    }\n\n    /**\n     * Checks whether the given node is a tree item.\n     * @param {object} node The node to check.\n     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.className === 'TreeItem';\n    }\n\n    /**\n     * Toggles the visibility state of the children element and updates the class of the parent element.\n     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n     * effectively showing or hiding the children and indicating the expanded state.\n     * @returns {void} Does not return a value.\n     */\n    toggleChildren() {\n        this.childrenElement.classList.toggle('open');\n        this.native.classList.toggle('expanded');\n    }\n\n    /**\n     * Retrieves the child items from the `childrenSlot` that match specific criteria.\n     * @param {object} [options] Configuration options.\n     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n     */\n    getChildrenItems(options = {}) {\n        const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n        if (!this.childrenSlot) {\n            return []; // Ak `childrenSlot` neexistuje, vráti prázdne pole\n        }\n\n        return [...this.childrenSlot.assignedElements({ flatten: true })].filter(\n            (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n        );\n    }\n\n    /**\n     * Retrieves all descendant children of the current object in a flattened array structure.\n     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n     * @returns {Array} An array containing all children and their descendants in a flat structure.\n     */\n    getAllChildrenFlat(options = {}) {\n        const directChildren = this.getChildrenItems(options);\n        return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n    }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this._selection = 'single';\n    }\n\n    /**\n     * Sets the expanded state of the element. When set to a truthy value,\n     * the 'expanded' attribute will be added to the element. When set to a falsy\n     * value, the 'expanded' attribute will be removed.\n     * @param {boolean} value A boolean value indicating whether the\n     * element should be expanded (true) or collapsed (false).\n     */\n    set expanded(value) {\n        if (value) {\n            this.setAttribute('expanded', '');\n        } else {\n            this.removeAttribute('expanded');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'expanded' state for the current element.\n     * This getter checks whether the 'expanded' attribute is present on the element.\n     * If the attribute exists, it returns true, representing that the element is expanded.\n     * Otherwise, it returns false, indicating that the element is not expanded.\n     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n     */\n    get expanded() {\n        return this.hasAttribute('expanded');\n    }\n\n    /**\n     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n     */\n    set selected(value) {\n        this.removeAttribute('selected');\n\n        if (value) this.setAttribute('selected', '');\n    }\n\n    /**\n     * Getter method for determining if the 'selected' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n     */\n    get selected() {\n        return this.hasAttribute('selected');\n    }\n\n    /**\n     * Sets the selection mode for the component.\n     * @param {string} value The selection mode to apply. Defaults to 'single'\n     * if no value is provided. Possible options may be\n     * specific to the implementation of the component\n     * (e.g., 'single', 'multiple').\n     */\n    set selection(value) {\n        this._selection = value || 'single';\n    }\n\n    /**\n     * Retrieves the current selection.\n     * @returns {*} The value of the current selection.\n     */\n    get selection() {\n        return this._selection;\n    }\n\n    /**\n     * Sets or removes the 'indeterminate' attribute based on the provided value.\n     * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n     */\n    set indeterminate(value) {\n        this.removeAttribute('indeterminate');\n\n        if (value) this.setAttribute('indeterminate', '');\n    }\n\n    /**\n     * Retrieves the state of the indeterminate attribute.\n     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n     */\n    get indeterminate() {\n        return this.hasAttribute('indeterminate');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'TreeItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    connectedCallback() {\n        super.connectedCallback?.();\n        if (this.isNestedItem()) this.slot = 'children';\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 ['selected', 'indeterminate'];\n    }\n\n    /**\n     * Handles updates when observed attributes of the element are changed.\n     * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change.\n     * @param {string|null} newValue The new value of the attribute after the change.\n     * @returns {void}\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (!this.checkbox) {\n            this.syncAria();\n            return;\n        }\n        if (name === 'selected') {\n            // this.checkbox.removeAttribute('indeterminate');\n            if (this.selected) {\n                this.checkbox.checked = true;\n            } else {\n                this.checkbox.checked = false;\n            }\n        }\n\n        if (name === 'indeterminate' && !this.selected) {\n            this.checkbox.removeAttribute('indeterminate');\n            this.checkbox.removeAttribute('checked');\n\n            if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Custom logic executed before the draw process begins.\n     * Determines and sets the appropriate slot if the current item is nested.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        if (this.isNestedItem()) this.slot = 'children';\n\n        if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Creates and returns a document fragment representing the structure of a tree item component.\n     * The method constructs the DOM elements including the native container, indentation, toggle button,\n     * selection checkbox, label, and children container, along with their respective slots and attributes.\n     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n     * child components.\n     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\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-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let item = document.createElement('div');\n        item.setAttribute('part', 'item');\n        item.classList.add('item');\n\n        let indent = document.createElement('div');\n        indent.classList.add('indent');\n\n        let button = document.createElement('div');\n        button.classList.add('toggle');\n\n        let checkbox = document.createElement('wje-checkbox');\n        if (this.selected) checkbox.setAttribute('checked', '');\n\n        let label = document.createElement('div');\n        label.setAttribute('part', 'label');\n        label.classList.add('content');\n\n        let slotElement = document.createElement('slot');\n\n        let children = document.createElement('div');\n        children.classList.add('children');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'children');\n        children.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        item.appendChild(slotStart);\n        item.appendChild(indent);\n\n        if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n            if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n                let expandIcon = document.createElement('wje-icon');\n                expandIcon.setAttribute('name', 'chevron-right');\n                expandIcon.setAttribute('slot', 'expand');\n\n                this.appendChild(expandIcon);\n            }\n\n            if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n                let collapseIcon = document.createElement('wje-icon');\n                collapseIcon.setAttribute('name', 'chevron-down');\n                collapseIcon.setAttribute('slot', 'collapse');\n\n                this.appendChild(collapseIcon);\n            }\n\n            let expandSlot = document.createElement('slot');\n            expandSlot.setAttribute('name', 'expand');\n\n            let collapseSlot = document.createElement('slot');\n            collapseSlot.setAttribute('name', 'collapse');\n\n            button.appendChild(expandSlot);\n            button.appendChild(collapseSlot);\n        }\n\n        item.appendChild(button);\n\n        if (this.selection === 'multiple') item.appendChild(checkbox);\n\n        label.appendChild(slotElement);\n        item.appendChild(label);\n        item.appendChild(slotEnd);\n\n        native.appendChild(item);\n        native.appendChild(children);\n\n        fragment.appendChild(native);\n\n        this.checkbox = checkbox;\n        this.native = native;\n        this.button = button;\n        this.childrenElement = children;\n        this.childrenSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Executes operations to be performed after the draw action is completed.\n     * If the state indicates it is expanded, toggles its children.\n     * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.expanded) this.toggleChildren();\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n        this.setAttribute('tabindex', '0');\n        this.syncAria();\n    }\n\n    /**\n     * Determines if the current item is a nested item within a tree structure.\n     * Checks if the item's parent element exists and is also a tree item.\n     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n     */\n    isNestedItem() {\n        const parent = this.parentElement;\n        return !!parent && this.isTreeItem(parent);\n    }\n\n    /**\n     * Checks whether the given node is a tree item.\n     * @param {object} node The node to check.\n     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.className === 'TreeItem';\n    }\n\n    /**\n     * Toggles the visibility state of the children element and updates the class of the parent element.\n     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n     * effectively showing or hiding the children and indicating the expanded state.\n     * @returns {void} Does not return a value.\n     */\n    toggleChildren() {\n        this.childrenElement.classList.toggle('open');\n        this.native.classList.toggle('expanded');\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n        const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n        if (this.selection === 'multiple') {\n            const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n            this.setAriaState({\n                role: 'treeitem',\n                checked,\n                expanded,\n            });\n        } else {\n            this.setAriaState({\n                role: 'treeitem',\n                selected: this.selected,\n                expanded,\n            });\n        }\n    }\n\n    /**\n     * Retrieves the child items from the `childrenSlot` that match specific criteria.\n     * @param {object} [options] Configuration options.\n     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n     */\n    getChildrenItems(options = {}) {\n        const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n        const assigned = this.childrenSlot\n            ? this.childrenSlot.assignedElements({ flatten: true })\n            : [];\n        const direct = assigned.length\n            ? assigned\n            : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n        return direct.filter(\n            (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n        );\n    }\n\n    /**\n     * Retrieves all descendant children of the current object in a flattened array structure.\n     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n     * @returns {Array} An array containing all children and their descendants in a flat structure.\n     */\n    getAllChildrenFlat(options = {}) {\n        const directChildren = this.getChildrenItems(options);\n        return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n    }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}

package/dist/wje-tree.js

@@ -22,7 +22,7 @@ class Tree extends WJElement {
      * @param {Event} e The click event object.
      */
     __publicField(this, "handleClick", (e) => {
-      e.preventDefault();
+      if (e == null ? void 0 : e.preventDefault) e.preventDefault();
       let selectedItem = e.target.closest("wje-tree-item");
       let isClickButton = e.composedPath().some((el) => {
         var _a;
@@ -69,6 +69,7 @@ class Tree extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * A method called before the drawing or rendering process of tree items.
@@ -108,6 +109,16 @@ class Tree extends WJElement {
    */
   afterDraw() {
     this.addEventListener("click", this.handleClick);
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "tree",
+      multiselectable: this.selection === "multiple" ? "true" : void 0
+    });
   }
   beforeDisconnect() {
     this.removeEventListener("click", this.handleClick);

package/dist/wje-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tree.js","sources":["../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tree` is a custom web component that represents a hierarchical tree structure.\n * It extends from `WJElement`.\n * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n * @documentation https://elements.webjet.sk/components/tree\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native container part of the tree.\n * @slot - The default slot to place `wje-tree-item` child components.\n * @tag wje-tree\n */\n\nexport default class Tree extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the selection attribute for the element.\n     * @param {string} value The value to set as the selection attribute.\n     */\n    set selection(value) {\n        this.setAttribute('selection', value);\n    }\n\n    /**\n     * Gets the current selection mode for the element.\n     * If no selection is explicitly set, it defaults to 'single'.\n     * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.\n     */\n    get selection() {\n        return this.getAttribute('selection') || 'single';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tree';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * A method called before the drawing or rendering process of tree items.\n     * It iterates through all `wje-tree-item` elements, updating their selection state\n     * and managing their expand/collapse icons accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    beforeDraw() {\n        const items = this.querySelectorAll('wje-tree-item');\n        items?.forEach((item) => {\n            item.selection = this.selection;\n\n            this.getExpandCollapseIcon(item, 'expand');\n            this.getExpandCollapseIcon(item, 'collapse');\n\n            this.getSlots(item, 'start');\n            this.getSlots(item, 'end');\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the draw process of the component is completed.\n     * Typically used to add event listeners or perform operations\n     * that are dependent on the component's drawn state.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.addEventListener('click', this.handleClick);\n    }\n\n    beforeDisconnect() {\n        this.removeEventListener('click', this.handleClick);\n    }\n\n    /**\n     * Handles the click event triggered by the user interaction.\n     * Identifies the closest tree item element to the event target and sets it\n     * as the selected item. Ensures that only one item is selected at a time, resetting\n     * the selection state for all other items.\n     * @param {Event} e The click event object.\n     */\n    handleClick = (e) => {\n        e.preventDefault();\n\n        let selectedItem = e.target.closest('wje-tree-item');\n        let isClickButton = e.composedPath().some((el) => el?.classList?.contains('toggle'));\n        if (isClickButton) return;\n\n        if (this.selection === 'single') {\n            if (selectedItem) {\n                for (let item of this.getAllItems()) {\n                    item.selected = item === selectedItem;\n                }\n            }\n        } else if (this.selection === 'multiple') {\n            // let children = selectedItem.getAllChildrenFlat();\n            selectedItem.selected = !selectedItem.selected;\n\n            this.updateCheckboxState(selectedItem);\n        }\n    };\n\n    /**\n     * Retrieves all items that match the selector 'wje-tree-item' within the current context.\n     * @returns {Array<Element>} An array of all matching DOM elements.\n     */\n    getAllItems() {\n        return [...this.querySelectorAll('wje-tree-item')];\n    }\n\n    /**\n     * Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n     * @param {HTMLElement} item The DOM element to which the icon will be appended.\n     * @param {string} status The status indicating which icon to retrieve (e.g., \"expand\" or \"collapse\").\n     * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.\n     */\n    getExpandCollapseIcon(item, status) {\n        let icon = this.querySelector('template')?.content.querySelector(`[slot=\"${status}\"]`);\n        if (!icon) {\n            console.warn(`Icon with slot \"${status}\" was not found.`);\n            return;\n        }\n\n        let iconClone = icon.cloneNode(true);\n        item.append(iconClone);\n    }\n\n    getSlots(item, slotName) {\n        let slot = this.querySelector('template')?.content.querySelector(`[slot=\"${slotName}\"]`);\n        if (!slot) {\n            console.warn(`Icon with slot \"${slotName}\" was not found.`);\n            return;\n        }\n\n        let slotClone = slot.cloneNode(true);\n        item.append(slotClone);\n    }\n\n    /**\n     * Updates the state of a checkbox, syncing the state both upwards to parent elements\n     * and downwards to child elements as necessary.\n     * @param {object} changedItem The specific item whose checkbox state has changed.\n     * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.\n     * @returns {void} This method does not return a value.\n     */\n    updateCheckboxState(changedItem, isInitialSync = false) {\n        this.isInitialSync = isInitialSync;\n        this.propagateStateDownwards(changedItem);\n        this.propagateStateUpwards(changedItem);\n    }\n\n    /**\n     * Updates the state of the parent item based on the state of its child items.\n     * Recursively propagates changes up to all parent items to reflect the selection\n     * or indeterminate state accurately.\n     * @param {object} item The current tree item whose parent state needs to be updated.\n     * It is expected to have properties `selected`, `indeterminate`,\n     * and a method `getChildrenItems({ includeDisabled: boolean })`.\n     * @returns {void} This method does not return a value.\n     */\n    updateParentState(item) {\n        const children = item.getChildrenItems({ includeDisabled: false });\n\n        if (children.length) {\n            const areAllChildrenChecked = children.every((child) => child.selected);\n            const areSomeChildrenChecked = children.some((child) => child.selected);\n            const areSomeChildrenIndeterminate = children.some((child) => child.indeterminate);\n\n            item.selected = areAllChildrenChecked;\n            item.indeterminate = areSomeChildrenIndeterminate || (areSomeChildrenChecked && !areAllChildrenChecked);\n        } else {\n            item.indeterminate = false;\n        }\n\n        const parent = item.parentElement?.closest('wje-tree-item');\n        if (parent) {\n            this.updateParentState(parent);\n        }\n    }\n\n    /**\n     * Propagates the state changes of an item upwards through its ancestors in the hierarchy.\n     * Calls the `updateParentState` method for each parent element until no parent exists.\n     * @param {HTMLElement} item The current item whose state to propagate to its parent.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateUpwards(item) {\n        const parent = item.parentElement?.closest('wje-tree-item');\n\n        if (parent) {\n            this.updateParentState(parent);\n            this.propagateStateUpwards(parent);\n        }\n    }\n\n    /**\n     * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\n     * it also determines how the state should be applied to the child items and updates the parent state if needed.\n     * @param {object} item The item whose state is being propagated to its child items. The item must have properties\n     * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateDownwards(item) {\n        const isChecked = item.selected;\n\n        item.getChildrenItems().forEach((child) => {\n            child.selected = this.isInitialSync ? isChecked || child.selected : !child.disabled && isChecked;\n            this.propagateStateDownwards(child);\n        });\n\n        if (this.isInitialSync) {\n            this.updateParentState(item);\n        }\n    }\n}\n","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tree.js","sources":["../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tree` is a custom web component that represents a hierarchical tree structure.\n * It extends from `WJElement`.\n * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n * @documentation https://elements.webjet.sk/components/tree\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native container part of the tree.\n * @slot - The default slot to place `wje-tree-item` child components.\n * @tag wje-tree\n */\n\nexport default class Tree extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the selection attribute for the element.\n     * @param {string} value The value to set as the selection attribute.\n     */\n    set selection(value) {\n        this.setAttribute('selection', value);\n    }\n\n    /**\n     * Gets the current selection mode for the element.\n     * If no selection is explicitly set, it defaults to 'single'.\n     * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.\n     */\n    get selection() {\n        return this.getAttribute('selection') || 'single';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tree';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * A method called before the drawing or rendering process of tree items.\n     * It iterates through all `wje-tree-item` elements, updating their selection state\n     * and managing their expand/collapse icons accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    beforeDraw() {\n        const items = this.querySelectorAll('wje-tree-item');\n        items?.forEach((item) => {\n            item.selection = this.selection;\n\n            this.getExpandCollapseIcon(item, 'expand');\n            this.getExpandCollapseIcon(item, 'collapse');\n\n            this.getSlots(item, 'start');\n            this.getSlots(item, 'end');\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the draw process of the component is completed.\n     * Typically used to add event listeners or perform operations\n     * that are dependent on the component's drawn state.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.addEventListener('click', this.handleClick);\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'tree',\n            multiselectable: this.selection === 'multiple' ? 'true' : undefined,\n        });\n    }\n\n    beforeDisconnect() {\n        this.removeEventListener('click', this.handleClick);\n    }\n\n    /**\n     * Handles the click event triggered by the user interaction.\n     * Identifies the closest tree item element to the event target and sets it\n     * as the selected item. Ensures that only one item is selected at a time, resetting\n     * the selection state for all other items.\n     * @param {Event} e The click event object.\n     */\n    handleClick = (e) => {\n        if (e?.preventDefault) e.preventDefault();\n\n        let selectedItem = e.target.closest('wje-tree-item');\n        let isClickButton = e.composedPath().some((el) => el?.classList?.contains('toggle'));\n        if (isClickButton) return;\n\n        if (this.selection === 'single') {\n            if (selectedItem) {\n                for (let item of this.getAllItems()) {\n                    item.selected = item === selectedItem;\n                }\n            }\n        } else if (this.selection === 'multiple') {\n            // let children = selectedItem.getAllChildrenFlat();\n            selectedItem.selected = !selectedItem.selected;\n\n            this.updateCheckboxState(selectedItem);\n        }\n    };\n\n    /**\n     * Retrieves all items that match the selector 'wje-tree-item' within the current context.\n     * @returns {Array<Element>} An array of all matching DOM elements.\n     */\n    getAllItems() {\n        return [...this.querySelectorAll('wje-tree-item')];\n    }\n\n    /**\n     * Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n     * @param {HTMLElement} item The DOM element to which the icon will be appended.\n     * @param {string} status The status indicating which icon to retrieve (e.g., \"expand\" or \"collapse\").\n     * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.\n     */\n    getExpandCollapseIcon(item, status) {\n        let icon = this.querySelector('template')?.content.querySelector(`[slot=\"${status}\"]`);\n        if (!icon) {\n            console.warn(`Icon with slot \"${status}\" was not found.`);\n            return;\n        }\n\n        let iconClone = icon.cloneNode(true);\n        item.append(iconClone);\n    }\n\n    getSlots(item, slotName) {\n        let slot = this.querySelector('template')?.content.querySelector(`[slot=\"${slotName}\"]`);\n        if (!slot) {\n            console.warn(`Icon with slot \"${slotName}\" was not found.`);\n            return;\n        }\n\n        let slotClone = slot.cloneNode(true);\n        item.append(slotClone);\n    }\n\n    /**\n     * Updates the state of a checkbox, syncing the state both upwards to parent elements\n     * and downwards to child elements as necessary.\n     * @param {object} changedItem The specific item whose checkbox state has changed.\n     * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.\n     * @returns {void} This method does not return a value.\n     */\n    updateCheckboxState(changedItem, isInitialSync = false) {\n        this.isInitialSync = isInitialSync;\n        this.propagateStateDownwards(changedItem);\n        this.propagateStateUpwards(changedItem);\n    }\n\n    /**\n     * Updates the state of the parent item based on the state of its child items.\n     * Recursively propagates changes up to all parent items to reflect the selection\n     * or indeterminate state accurately.\n     * @param {object} item The current tree item whose parent state needs to be updated.\n     * It is expected to have properties `selected`, `indeterminate`,\n     * and a method `getChildrenItems({ includeDisabled: boolean })`.\n     * @returns {void} This method does not return a value.\n     */\n    updateParentState(item) {\n        const children = item.getChildrenItems({ includeDisabled: false });\n\n        if (children.length) {\n            const areAllChildrenChecked = children.every((child) => child.selected);\n            const areSomeChildrenChecked = children.some((child) => child.selected);\n            const areSomeChildrenIndeterminate = children.some((child) => child.indeterminate);\n\n            item.selected = areAllChildrenChecked;\n            item.indeterminate = areSomeChildrenIndeterminate || (areSomeChildrenChecked && !areAllChildrenChecked);\n        } else {\n            item.indeterminate = false;\n        }\n\n        const parent = item.parentElement?.closest('wje-tree-item');\n        if (parent) {\n            this.updateParentState(parent);\n        }\n    }\n\n    /**\n     * Propagates the state changes of an item upwards through its ancestors in the hierarchy.\n     * Calls the `updateParentState` method for each parent element until no parent exists.\n     * @param {HTMLElement} item The current item whose state to propagate to its parent.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateUpwards(item) {\n        const parent = item.parentElement?.closest('wje-tree-item');\n\n        if (parent) {\n            this.updateParentState(parent);\n            this.propagateStateUpwards(parent);\n        }\n    }\n\n    /**\n     * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\n     * it also determines how the state should be applied to the child items and updates the parent state if needed.\n     * @param {object} item The item whose state is being propagated to its child items. The item must have properties\n     * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateDownwards(item) {\n        const isChecked = item.selected;\n\n        item.getChildrenItems().forEach((child) => {\n            child.selected = this.isInitialSync ? isChecked || child.selected : !child.disabled && isChecked;\n            this.propagateStateDownwards(child);\n        });\n\n        if (this.isInitialSync) {\n            this.updateParentState(item);\n        }\n    }\n}\n","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.2.0-alpha.8",
+  "version": "0.3.0",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -44,20 +44,39 @@
     "lint": "eslint packages experimental-packages --max-warnings 0",
     "lint:fix": "eslint packages experimental-packages --max-warnings 0 --fix",
     "prettier": "prettier --write ./packages ./experimental-packages",
+    "test:accordion": "web-test-runner --files packages/wje-accordion/accordion.test.js",
     "test:animation": "web-test-runner --files packages/wje-animation/animation.test.js",
     "test:avatar": "web-test-runner --files packages/wje-avatar/avatar.test.js",
     "test:badge": "web-test-runner --files packages/wje-badge/badge.test.js",
     "test:breadcrumbs": "web-test-runner --files packages/wje-breadcrumbs/breadcrumbs.test.js",
     "test:button": "web-test-runner --files packages/wje-button/button.test.js",
     "test:chip": "web-test-runner --files packages/wje-chip/chip.test.js",
+    "test:checkbox": "web-test-runner --files packages/wje-checkbox/checkbox.test.js",
     "test:color-picker": "web-test-runner --files packages/wje-color-picker/color-picker.test.js",
+    "test:dialog": "web-test-runner --files packages/wje-dialog/dialog.test.js",
+    "test:dropdown": "web-test-runner --files packages/wje-dropdown/dropdown.test.js",
     "test:file-upload": "web-test-runner --files packages/wje-file-upload/file-upload.test.js",
     "test:format-digital": "web-test-runner --files packages/wje-format-digital/format-digital.test.js",
+    "test:img": "web-test-runner --files packages/wje-img/img.test.js",
+    "test:img-comparer": "web-test-runner --files packages/wje-img-comparer/img-comparer.test.js",
+    "test:input": "web-test-runner --files packages/wje-input/input.test.js",
+    "test:input-file": "web-test-runner --files packages/wje-input-file/input-file.test.js",
+    "test:menu-button": "web-test-runner --files packages/wje-menu-button/menu-button.test.js",
+    "test:menu-item": "web-test-runner --files packages/wje-menu-item/menu-item.test.js",
+    "test:menu": "web-test-runner --files packages/wje-menu/menu.test.js",
+    "test:pagination": "web-test-runner --files packages/wje-pagination/pagination.test.js",
+    "test:qr-code": "web-test-runner --files packages/wje-qr-code/qr-code.test.js",
+    "test:radio": "web-test-runner --files packages/wje-radio/radio.test.js",
+    "test:radio-group": "web-test-runner --files packages/wje-radio-group/radio-group.test.js",
     "test:relative-time": "web-test-runner --files packages/wje-relative-time/relative-time.test.js",
     "test:select": "web-test-runner --files packages/wje-select/select.test.js",
+    "test:slider": "web-test-runner --files packages/wje-slider/slider.test.js",
+    "test:status": "web-test-runner --files packages/wje-status/status.test.js",
     "test:tab-group": "web-test-runner --files packages/wje-tab-group/tab-group.test.js",
+    "test:textarea": "web-test-runner --files packages/wje-textarea/textarea.test.js",
     "test:toast": "web-test-runner --files packages/wje-toast/toast.test.js",
-    "test:toggle": "web-test-runner --files packages/wje-toggle/toggle.test.js"
+    "test:toggle": "web-test-runner --files packages/wje-toggle/toggle.test.js",
+    "test:tooltip": "web-test-runner --files packages/wje-tooltip/tooltip.test.js"
   },
   "exports": {
     ".": {

package/dist/form-associated-element-o0UjvdUp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-associated-element-o0UjvdUp.js","sources":["../packages/internals/form-associated-element.js"],"sourcesContent":["import { default as WJElement, event } from \"../wje-element/element.js\";\n\nexport class FormAssociatedElement extends WJElement {\n  static formAssociated = true;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  /**\n   * Sets the 'name' attribute to the given value.\n   * @param {string} value The new value for the 'name' attribute.\n   */\n  set name(value) {\n    this.setAttribute('name', value);\n  }\n\n  /**\n   * Getter for the name attribute.\n   * @returns {string} The name of the input.\n   */\n  get name() {\n    return this.getAttribute('name');\n  }\n\n  /**\n   * Getter for the type attribute.\n   * @returns {string} The type of the input.\n   */\n  get type() {\n    return this.getAttribute(\"type\");\n  }\n\n  /**\n   * Sets or removes the 'required' attribute on the element.\n   * @param {boolean} value If true, adds the 'required' attribute. If false, removes the 'required' attribute.\n   */\n  set required(value) {\n    if (value) {\n      this.setAttribute('required', '');\n    } else {\n      this.removeAttribute('required');\n    }\n  }\n\n  /**\n   * Checks if the 'required' attribute is present on the element.\n   * @returns {boolean} `true` if the 'required' attribute is set, otherwise `false`.\n   */\n  get required() {\n    return this.hasAttribute('required');\n  }\n\n  /**\n   * Setter for the invalid attribute.\n   * @param {boolean} isInvalid Whether the input is invalid.\n   */\n  set invalid(isInvalid) {\n    if (isInvalid) this.setAttribute('invalid', '');\n    else this.removeAttribute('invalid');\n  }\n\n  /**\n   * Getter for the invalid attribute.\n   * @returns {boolean} Whether the attribute is present.\n   */\n  get invalid() {\n    return this.hasAttribute('invalid');\n  }\n\n  /**\n   * Set checked attribute.\n   * @param {boolean} value true if the toggle is checked, false otherwise\n   */\n  set disabled(value) {\n    if (value) {\n      this.setAttribute('disabled', '');\n    } else {\n      this.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Get disabled attribute value.\n   * @returns {boolean} true if the toggle is disabled, false otherwise\n   */\n  get disabled() {\n    return this.hasAttribute('disabled');\n  }\n\n  /**\n   * Retrieves the form element associated with this object.\n   * @returns {HTMLFormElement|null} The associated form element, or null if there isn't one.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * Retrieves the validity state of the element by returning the validity object from the internal element.\n   * The validity object provides information on whether the element satisfies its validation constraints.\n   * @returns {ValidityState} The validity state object representing the element's validation constraints.\n   */\n  get validity() {\n    return this.internals.validity;\n  }\n\n  /**\n   * Retrieves the current validation message associated with the element.\n   * @returns {string} The validation message that describes why the element's value fails validity checks.\n   */\n  get validationMessage() {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * Indicates whether the element is a candidate for constraint validation.\n   * @returns {boolean} Returns true if the element will be validated during constraint validation, false otherwise.\n   */\n  get willValidate() {\n    return this.internals.willValidate;\n  }\n\n  /**\n   * Validates the input element associated with the component and updates its validity state\n   * and error messages based on the user's input and the current validation rules.\n   * @returns {void} This method does not return a value. It modifies the validity state\n   * internally and sets appropriate validation messages.\n   */\n  validate() {\n    const validState = this.input.validity;\n\n    if (!validState.valid) {\n      for (let state in validState) {\n        const attr = `message-${state.toString()}`;\n\n        if (validState[state]) {\n          this.validationError = state.toString();\n          let errorMessage = this.message;\n\n          // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n          if (!this.hasAttribute('message'))\n            errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n          this.internals.setValidity({ [this.validationError]: true }, errorMessage, this.input);\n        }\n      }\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  /**\n   * Propagates a validation event based on the validity state of the component.\n   *\n   * This method checks the validity status of the component and emits a custom\n   * event if the component is invalid. The event's name and additional details\n   * can be specified.\n   * @param {string} [eventName] The name of the event to dispatch when the component is invalid.\n   * @param {object} [detail] Additional detail to include in the dispatched event.\n   * @returns {void} This method does not return a value.\n   */\n  propagateValidation(eventName = 'invalid', detail = {}) {\n    const internals = this.internals;\n\n    this.invalid = !this.pristine && !internals.validity.valid;\n\n    if (this.invalid) {\n      event.dispatchCustomEvent(this, this.tagName.toLocaleLowerCase() + ':' + eventName, detail);\n    }\n  }\n\n  /**\n   * Displays an invalid message for the current element.\n   * If an error message element does not exist within the designated slot,\n   * it creates one and appends it to the slot. Updates the text content\n   * of the error message element with the validation message from the\n   * element's internals.\n   * @returns {void} This method does not return any value.\n   */\n  showInvalidMessage() {\n    const internals = this.internals;\n    const slot = this.querySelector(\"[slot='error']\");\n    let errorMessageEl = slot?.querySelector('[error-message]');\n\n    if (!errorMessageEl) {\n      const error = document.createElement('div');\n      error.setAttribute('error-message', '');\n      slot?.append(error);\n      errorMessageEl = error;\n    }\n\n    errorMessageEl.textContent = internals.validationMessage;\n  }\n\n  /**\n   * Checks the validity of the input by invoking custom validation logic\n   * and then verifying against internal validation rules.\n   * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.\n   */\n  checkValidity() {\n    // zavolá tvoju vlastnú validáciu pred kontrolou internals\n    this.validate();\n    return this.internals.checkValidity();\n  }\n\n  /**\n   * Callback to handle the reset action for a form.\n   * Resets the value of the form control to its default value, updates the form value, and clears any validity states.\n   * @returns {void} Does not return a value.\n   */\n  formResetCallback() {\n    this.value = this.defaultValue;\n    this.internals.setFormValue(this.defaultValue);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Restores the form state by assigning the provided state value\n   * and updating the internal form value and validity.\n   * @param {object} state The state object containing the value to restore the form.\n   * @param {*} state.value The value to set for the form element.\n   * @returns {void} This method does not return any value.\n   */\n  formStateRestoreCallback(state) {\n    this.value = state.value;\n    this.internals.setFormValue(state.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Callback method to save the current state of a form.\n   * This method captures and returns the form's value property.\n   * @returns {object} An object containing the `value` property of the current form state.\n   */\n  formStateSaveCallback() {\n    return {\n      value: this.value\n    };\n  }\n\n  /**\n   * Toggles the disabled state of the component and updates corresponding attributes.\n   * @param {boolean} disabled Indicates whether the form should be marked as disabled.\n   * If true, the 'disabled' class is added, and the 'disabled' attribute is set.\n   * If false, both the class and attribute are removed.\n   * @returns {void}\n   */\n  formDisabledCallback(disabled) {\n    this.native?.classList.toggle('disabled', disabled);\n    this.toggleAttribute('disabled', disabled);\n  }\n\n  /**\n   * A lifecycle callback that is executed when the element is associated with a form.\n   * It updates the form's value field with the element's value and sets up an event\n   * listener to perform validation and propagate it whenever the form is submitted.\n   * @returns {void} Does not return any value.\n   */\n  formAssociatedCallback() {\n    if (this.form) {\n      this.internals.setFormValue(this.value);\n      this.form?.addEventListener('submit', () => {\n        this.validate();\n        this.propagateValidation();\n      });\n    }\n  }\n}"],"names":[],"mappings":"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"}

package/dist/packages/utils/utils.d.ts

@@ -1 +0,0 @@
-export function bool(v: any): boolean;

package/dist/packages/wje-animation/animation.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-avatar/avatar.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-badge/badge.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-breadcrumbs/breadcrumbs.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-button/button.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-chip/chip.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-color-picker/color-picker.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-file-upload/file-upload.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-format-digital/format-digital.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-pagination/pagination.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-qr-code/qr-code.element.d.ts

@@ -1,33 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * `QrCode` is a custom web component that generates a QR code.
- * @summary This element represents a QR code generator.
- * @documentation https://elements.webjet.sk/components/qr-code
- * @status stable
- * @augments {WJElement}
- * @csspart native - The native part of the QR code.
- * @slot top - The slot for the top content of the QR code.
- * @slot bottom - The slot for the bottom content of the QR code.
- * @tag wje-qr-code
- */
-export default class QrCode extends WJElement {
-    /**
-     * Returns the CSS stylesheet for the component.
-     * @returns {CSSStyleSheet} The CSS stylesheet.
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of observed attributes.
-     * @returns {string[]} The list of observed attributes.
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Draws the QR code component.
-     * @returns {DocumentFragment} The document fragment containing the QR code component.
-     */
-    draw(): DocumentFragment;
-    /**
-     * Called after the component is drawn to generate the QR code.
-     */
-    afterDraw(): void;
-}

package/dist/packages/wje-relative-time/relative-time.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-select/select.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-tab-group/tab-group.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-toast/toast.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-toggle/toggle.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-tree/tree.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/wje-tree-item/tree-item.test.d.ts

@@ -1 +0,0 @@
-export {};