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

package/dist/wje-toolbar.js

@@ -36,6 +36,7 @@ class Toolbar extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the toolbar.
@@ -55,6 +56,19 @@ class Toolbar extends WJElement {
     fragment.appendChild(native);
     return fragment;
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "toolbar" });
+    }
+    const ariaLabel = this.getAttribute("aria-label");
+    const label = this.getAttribute("label");
+    if (!ariaLabel && label) {
+      this.setAriaState({ label });
+    }
+  }
 }
 Toolbar.define("wje-toolbar", Toolbar);
 export {

package/dist/wje-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n */\n\nexport default class Toolbar extends WJElement {\n    /**\n     * Creates an instance of Toolbar.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toolbar';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the toolbar.\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-toolbar');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(end);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":[],"mappings":";;;;;AAuBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,GAAG;AACtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;ACjFA,QAAQ,OAAO,eAAe,OAAO;"}
+{"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n */\n\nexport default class Toolbar extends WJElement {\n    /**\n     * Creates an instance of Toolbar.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toolbar';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the toolbar.\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-toolbar');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(end);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'toolbar' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":[],"mappings":";;;;;AAuBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,GAAG;AACtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,UAAS,CAAE;AAAA,IACzC;AAEA,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AACvC,QAAI,CAAC,aAAa,OAAO;AACrB,WAAK,aAAa,EAAE,OAAO;AAAA,IAC/B;AAAA,EACJ;AACJ;ACjGA,QAAQ,OAAO,eAAe,OAAO;"}

package/dist/wje-tooltip.js

@@ -3,10 +3,10 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import "./wje-popup.js";
-import { P as Popup } from "./popup.element-DeajFyOQ.js";
+import { P as Popup } from "./popup.element-DklicGea.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Tooltip ]\n*/\n\n.native-tooltip {\n    display: flex;\n    align-items: center;\n    padding: var(--wje-tooltip-spacing);\n    color: var(--wje-tooltip-color);\n    background-color: var(--wje-tooltip-background);\n    font-weight: var(--wje-tooltip-font-weight);\n    font-size: var(--wje-tooltip-font-size);\n    border-radius: var(--wje-tooltip-border-radius);\n    line-height: var(--wje-tooltip-line-height);\n    box-sizing: border-box;\n    box-shadow: var(--wje-tooltip-shadow);\n}\n\n::slotted([slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted([slot='end']) {\n    margin: 0 0 0 0.3rem;\n}\n\n.arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--wje-tooltip-arrow-color);\n    transform: rotate(45deg);\n}\n";
-class Tooltip extends WJElement {
+const _Tooltip = class _Tooltip extends WJElement {
   /**
    * Creates an instance of Tooltip.
    */
@@ -60,6 +60,7 @@ class Tooltip extends WJElement {
       this.classList.remove("active");
       this.popup.hide();
     });
+    this._instanceId = ++_Tooltip._instanceId;
   }
   /**
    * Set active attribute for the tooltip element.
@@ -97,6 +98,7 @@ class Tooltip extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "tooltip" });
   }
   /**
    * Draws the component for the tooltip.
@@ -108,6 +110,7 @@ class Tooltip extends WJElement {
     popup.setAttribute("placement", this.placement || "top");
     popup.setAttribute("offset", this.offset || "0");
     let slot = document.createElement("slot");
+    slot.setAttribute("name", "anchor");
     slot.setAttribute("slot", "anchor");
     let arrow = document.createElement("div");
     arrow.classList.add("arrow");
@@ -137,10 +140,27 @@ class Tooltip extends WJElement {
    * Draws the component for the tooltip.
    */
   afterDraw() {
-    let anchorEl = this.mySlot.assignedElements()[0];
-    if (this.selector) {
-      anchorEl = this.checkSelector(anchorEl);
-    }
+    const resolveAnchor = () => {
+      let anchorEl2 = this.mySlot.assignedElements()[0];
+      if (!anchorEl2) {
+        anchorEl2 = this.querySelector(":scope > *:not([slot])");
+        if (anchorEl2) anchorEl2.setAttribute("slot", "anchor");
+      }
+      if (this.selector) {
+        anchorEl2 = this.checkSelector(anchorEl2);
+      }
+      if (!anchorEl2) return null;
+      const tooltipId = this.id || `wje-tooltip-${this._instanceId}`;
+      if (!this.id) this.id = tooltipId;
+      anchorEl2.setAttribute("aria-describedby", tooltipId);
+      return anchorEl2;
+    };
+    this.onSlotChange = () => {
+      resolveAnchor();
+    };
+    this.mySlot.addEventListener("slotchange", this.onSlotChange);
+    this.onSlotChange();
+    let anchorEl = resolveAnchor();
     if (!anchorEl) return;
     event.addListener(anchorEl, "mouseenter", null, this.onShow);
     event.addListener(anchorEl, "mouseleave", null, this.onHide);
@@ -148,10 +168,12 @@ class Tooltip extends WJElement {
     event.addListener(this, "wje-dropdown:close", null, this.onShow);
   }
   afterDisconnect() {
+    var _a;
     event.removeListener(this, "wje-dropdown:open", null, this.onHide);
     event.removeListener(this, "wje-dropdown:close", null, this.onShow);
     event.removeListener(this, "mouseenter", null, this.onShow);
     event.removeListener(this, "mouseleave", null, this.onHide);
+    (_a = this.mySlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
   }
   dispatch(customEvent) {
     return new Promise((resolve) => {
@@ -179,7 +201,9 @@ class Tooltip extends WJElement {
     }
     return newAnchorEl;
   }
-}
+};
+__publicField(_Tooltip, "_instanceId", 0);
+let Tooltip = _Tooltip;
 Tooltip.define("wje-tooltip", Tooltip);
 export {
   Tooltip as default

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/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/dist/wje-visually-hidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-visually-hidden.js","sources":["../packages/wje-visually-hidden/visually-hidden.element.js","../packages/wje-visually-hidden/visually-hidden.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `VisuallyHidden` is a custom web component that represents a visually hidden element.\n * @summary This element represents a visually hidden element.\n * @documentation https://elements.webjet.sk/components/visually-hidden\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the visually hidden element.\n * @tag wje-visually-hidden\n */\nexport default class VisuallyHidden extends WJElement {\n    /**\n     * Creates an instance of VisuallyHidden.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'VisuallyHidden';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the visually hidden element.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import VisuallyHidden from './visually-hidden.element.js';\n\nexport default VisuallyHidden;\n\nVisuallyHidden.define('wje-visually-hidden', VisuallyHidden);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,uBAAuB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIlD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACf;AACA;AC5DA,eAAe,OAAO,uBAAuB,cAAc;"}
+{"version":3,"file":"wje-visually-hidden.js","sources":["../packages/wje-visually-hidden/visually-hidden.element.js","../packages/wje-visually-hidden/visually-hidden.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `VisuallyHidden` is a custom web component that represents a visually hidden element.\n * @summary This element represents a visually hidden element.\n * @documentation https://elements.webjet.sk/components/visually-hidden\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the visually hidden element.\n * @tag wje-visually-hidden\n */\nexport default class VisuallyHidden extends WJElement {\n    /**\n     * Creates an instance of VisuallyHidden.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'VisuallyHidden';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the visually hidden element.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import VisuallyHidden from './visually-hidden.element.js';\n\nexport default VisuallyHidden;\n\nVisuallyHidden.define('wje-visually-hidden', VisuallyHidden);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,uBAAuB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIlD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACX;AACJ;AC5DA,eAAe,OAAO,uBAAuB,cAAc;"}

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.9",
+  "version": "0.3.0-alpha.2",
   "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": {
     ".": {
@@ -119,4 +138,4 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-javascript-obfuscator": "^3.1.0"
   }
-}
+}