wj-elements 0.2.0-alpha.8 → 0.3.0

package/dist/wje-tab-group.js

@@ -3,7 +3,7 @@ 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";
 const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: var(--wje-tab-group-nav-border);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}";
-class TabGroup extends WJElement {
+const _TabGroup = class _TabGroup extends WJElement {
   /**
    * Creates an instance of TabGroup.
    * @class
@@ -11,6 +11,7 @@ class TabGroup extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "TabGroup");
+    this._instanceId = ++_TabGroup._instanceId;
     this._lastNavWidth = null;
     this._initialized = false;
   }
@@ -20,6 +21,9 @@ class TabGroup extends WJElement {
    */
   set variant(value) {
     this.setAttribute("variant", value);
+    this.setAriaState({
+      orientation: value === "start" || value === "end" ? "vertical" : "horizontal"
+    });
   }
   /**
    * Gets the value of the 'variant' attribute.
@@ -57,6 +61,10 @@ class TabGroup extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({
+      role: "tablist",
+      orientation: this.variant === "start" || this.variant === "end" ? "vertical" : "horizontal"
+    });
   }
   /**
    * Sets up the event listeners before the component is drawn.
@@ -178,6 +186,7 @@ class TabGroup extends WJElement {
       (_a = this.querySelector(`[name="${tab}"]`)) == null ? void 0 : _a.classList.add("active");
     if (el)
       this.dropdownActive(el);
+    this.syncAria();
   }
   /**
    * Returns the currently active tab.
@@ -194,6 +203,13 @@ class TabGroup extends WJElement {
   getTabAll() {
     return this.context.querySelector('[name="nav"]').assignedElements();
   }
+  /**
+   * Returns all tabs, including those moved to "more".
+   * @returns {Array<Element>} An array of all tabs.
+   */
+  getAllTabs() {
+    return Array.from(this.querySelectorAll("wje-tab"));
+  }
   /**
    * Returns all panels.
    * @returns {Array<Element>} An array of all panels.
@@ -270,12 +286,53 @@ class TabGroup extends WJElement {
         this.moreDropdown.classList.remove("dropdown-active");
     }
   }
+  /**
+   * Syncs ARIA attributes on tabs and panels.
+   */
+  syncAria() {
+    const tabs = this.getAllTabs();
+    const panels = this.getPanelAll();
+    const panelByName = new Map(panels.map((p) => [p.getAttribute("name"), p]));
+    this.id || `wje-tab-group-${this._instanceId}`;
+    this.setAriaState({
+      orientation: this.variant === "start" || this.variant === "end" ? "vertical" : "horizontal"
+    });
+    tabs.forEach((tab, index) => {
+      const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);
+      const isActive = tab.classList.contains("active");
+      const isDisabled = tab.hasAttribute("disabled");
+      if (!tab.id) tab.id = `wje-tab-${tabName}`;
+      let controlsId = "";
+      if (this.type === "panel") {
+        const panel = panelByName.get(tabName);
+        if (panel) {
+          if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;
+          controlsId = panel.id;
+          panel.setAriaState({
+            role: "tabpanel",
+            labelledBy: tab.id
+          });
+        }
+      }
+      tab.setAriaState({
+        role: "tab",
+        selected: isActive,
+        disabled: isDisabled,
+        controls: controlsId || ""
+      });
+      if (typeof tab.setRovingTabIndex === "function") {
+        tab.setRovingTabIndex(isActive ? 0 : -1);
+      }
+    });
+  }
   disconnectedCallback() {
     var _a, _b;
     (_a = super.disconnectedCallback) == null ? void 0 : _a.call(this);
     (_b = this._resizeObserver) == null ? void 0 : _b.disconnect();
   }
-}
+};
+__publicField(_TabGroup, "_instanceId", 0);
+let TabGroup = _TabGroup;
 TabGroup.define("wje-tab-group", TabGroup);
 export {
   TabGroup as default

package/dist/wje-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._lastNavWidth = null;\n        this._initialized = false;\n    }\n\n    /**\n     * Sets the value for the 'variant' attribute of the element.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Gets the value of the 'variant' attribute.\n     * If the attribute is not set, it defaults to 'top'.\n     * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'top';\n    }\n\n    /**\n     * Sets the 'type' attribute of the element to the specified value.\n     * @param {string} value The value to set for the 'type' attribute.\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Retrieves the `type` attribute of the element.\n     * If the `type` attribute is not set, it defaults to `'panel'`.\n     * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n     */\n    get type() {\n        return this.getAttribute('type') || 'panel';\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing a structured layout for a tab group.\n     * The tab group layout includes a `header` section with navigational elements,\n     * a `section` element for tab panels, and slots for customization such as additional navigation items,\n     * dropdowns, and more.\n     * The structure comprises:\n     * - A `div` container with relevant styling and part attributes.\n     * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n     * - A `section` for tab panels with a customizable `slot`.\n     * This function also initializes the `nav` and `moreDropdown` properties for external use.\n     * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\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-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n        nav.setAttribute('part', 'nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        // More dropdown\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        // APPEND\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n\n        if(this.variant === 'top' || this.variant === 'bottom') {\n            nav.append(moreDropdown);\n        }\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Executes necessary initializations and attaches event listeners after a drawing operation.\n     * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        if (this.variant === 'top' || this.variant === 'bottom') {\n            this.initTabMetrics();\n\n            this._resizeObserver = new ResizeObserver(entries => {\n                const width = entries[0].contentRect.width;\n\n                if (width !== this._lastNavWidth) {\n                    this._lastNavWidth = width;\n                    this.checkOverflow();\n                }\n            });\n\n            this._resizeObserver.observe(this);\n        }\n    }\n\n    /**\n     * Removes the 'active' class from all panel and tab elements.\n     * @returns {void} This method does not return a value.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n\n        const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n        el?.classList.add('active');\n\n        if(this.type === 'panel')\n            this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        if(el)\n            this.dropdownActive(el);\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    /**\n     * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n     * @returns {void} Does not return a value.\n     */\n    toggleMoreVisibility() {\n        const hasTabsInMore = !!this.querySelector('wje-tab[slot=\"more\"]');\n        const nextHidden = !hasTabsInMore;\n\n        if (this.moreDropdown.hidden !== nextHidden) {\n            this.moreDropdown.hidden = nextHidden;\n        }\n    }\n\n    /**\n     * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\n     * and calculates their dimensions for further operations.\n     * @returns {void} Does not return any value.\n     */\n    initTabMetrics() {\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        // všetko do nav – LEN RAZ\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        requestAnimationFrame(() => {\n            this._tabMetrics = tabs.map(tab => ({\n                el: tab,\n                width: tab.getBoundingClientRect().width\n            }));\n\n            this._initialized = true;\n            this.checkOverflow(); // prvý výpočet\n            this._lastNavWidth = this.nav.getBoundingClientRect().width;\n        });\n    }\n\n    /**\n     * Checks if the tabs within a navigation bar overflow the available space.\n     * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    checkOverflow() {\n        if (!this._initialized) return;\n\n        const navWidth = this.nav.getBoundingClientRect().width;\n        const moreWidth = this.moreDropdown.offsetWidth || 48;\n\n        let used = 0;\n        let overflowStarted = false;\n\n        for (const { el, width } of this._tabMetrics) {\n            used += width;\n\n            const shouldOverflow = used + moreWidth > navWidth;\n\n            el.setAttribute('slot', shouldOverflow || overflowStarted ? 'more' : 'nav');\n            overflowStarted ||= shouldOverflow;\n        }\n\n        this.toggleMoreVisibility();\n    }\n\n    /**\n     * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n     * and the value of its \"slot\" attribute.\n     * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n     * @returns {void} This method does not return any value.\n     */\n    dropdownActive(el) {\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n\n    disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this._resizeObserver?.disconnect();\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    static _instanceId = 0;\n\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._instanceId = ++TabGroup._instanceId;\n        this._lastNavWidth = null;\n        this._initialized = false;\n    }\n\n    /**\n     * Sets the value for the 'variant' attribute of the element.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n        this.setAriaState({\n            orientation: (value === 'start' || value === 'end') ? 'vertical' : 'horizontal',\n        });\n    }\n\n    /**\n     * Gets the value of the 'variant' attribute.\n     * If the attribute is not set, it defaults to 'top'.\n     * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'top';\n    }\n\n    /**\n     * Sets the 'type' attribute of the element to the specified value.\n     * @param {string} value The value to set for the 'type' attribute.\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Retrieves the `type` attribute of the element.\n     * If the `type` attribute is not set, it defaults to `'panel'`.\n     * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n     */\n    get type() {\n        return this.getAttribute('type') || 'panel';\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        this.setAriaState({\n            role: 'tablist',\n            orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n        });\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing a structured layout for a tab group.\n     * The tab group layout includes a `header` section with navigational elements,\n     * a `section` element for tab panels, and slots for customization such as additional navigation items,\n     * dropdowns, and more.\n     * The structure comprises:\n     * - A `div` container with relevant styling and part attributes.\n     * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n     * - A `section` for tab panels with a customizable `slot`.\n     * This function also initializes the `nav` and `moreDropdown` properties for external use.\n     * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\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-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n        nav.setAttribute('part', 'nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        // More dropdown\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        // APPEND\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n\n        if(this.variant === 'top' || this.variant === 'bottom') {\n            nav.append(moreDropdown);\n        }\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Executes necessary initializations and attaches event listeners after a drawing operation.\n     * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        if (this.variant === 'top' || this.variant === 'bottom') {\n            this.initTabMetrics();\n\n            this._resizeObserver = new ResizeObserver(entries => {\n                const width = entries[0].contentRect.width;\n\n                if (width !== this._lastNavWidth) {\n                    this._lastNavWidth = width;\n                    this.checkOverflow();\n                }\n            });\n\n            this._resizeObserver.observe(this);\n        }\n    }\n\n    /**\n     * Removes the 'active' class from all panel and tab elements.\n     * @returns {void} This method does not return a value.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n\n        const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n        el?.classList.add('active');\n\n        if(this.type === 'panel')\n            this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        if(el)\n            this.dropdownActive(el);\n\n        this.syncAria();\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all tabs, including those moved to \"more\".\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getAllTabs() {\n        return Array.from(this.querySelectorAll('wje-tab'));\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    /**\n     * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n     * @returns {void} Does not return a value.\n     */\n    toggleMoreVisibility() {\n        const hasTabsInMore = !!this.querySelector('wje-tab[slot=\"more\"]');\n        const nextHidden = !hasTabsInMore;\n\n        if (this.moreDropdown.hidden !== nextHidden) {\n            this.moreDropdown.hidden = nextHidden;\n        }\n    }\n\n    /**\n     * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\n     * and calculates their dimensions for further operations.\n     * @returns {void} Does not return any value.\n     */\n    initTabMetrics() {\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        // všetko do nav – LEN RAZ\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        requestAnimationFrame(() => {\n            this._tabMetrics = tabs.map(tab => ({\n                el: tab,\n                width: tab.getBoundingClientRect().width\n            }));\n\n            this._initialized = true;\n            this.checkOverflow(); // prvý výpočet\n            this._lastNavWidth = this.nav.getBoundingClientRect().width;\n        });\n    }\n\n    /**\n     * Checks if the tabs within a navigation bar overflow the available space.\n     * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    checkOverflow() {\n        if (!this._initialized) return;\n\n        const navWidth = this.nav.getBoundingClientRect().width;\n        const moreWidth = this.moreDropdown.offsetWidth || 48;\n\n        let used = 0;\n        let overflowStarted = false;\n\n        for (const { el, width } of this._tabMetrics) {\n            used += width;\n\n            const shouldOverflow = used + moreWidth > navWidth;\n\n            el.setAttribute('slot', shouldOverflow || overflowStarted ? 'more' : 'nav');\n            overflowStarted ||= shouldOverflow;\n        }\n\n        this.toggleMoreVisibility();\n    }\n\n    /**\n     * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n     * and the value of its \"slot\" attribute.\n     * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n     * @returns {void} This method does not return any value.\n     */\n    dropdownActive(el) {\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes on tabs and panels.\n     */\n    syncAria() {\n        const tabs = this.getAllTabs();\n        const panels = this.getPanelAll();\n        const panelByName = new Map(panels.map((p) => [p.getAttribute('name'), p]));\n        const groupId = this.id || `wje-tab-group-${this._instanceId}`;\n\n        this.setAriaState({\n            orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n        });\n\n        tabs.forEach((tab, index) => {\n            const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);\n            const isActive = tab.classList.contains('active');\n            const isDisabled = tab.hasAttribute('disabled');\n\n            if (!tab.id) tab.id = `wje-tab-${tabName}`;\n\n            let controlsId = '';\n            if (this.type === 'panel') {\n                const panel = panelByName.get(tabName);\n                if (panel) {\n                    if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;\n                    controlsId = panel.id;\n                    panel.setAriaState({\n                        role: 'tabpanel',\n                        labelledBy: tab.id,\n                    });\n                }\n            }\n\n            tab.setAriaState({\n                role: 'tab',\n                selected: isActive,\n                disabled: isDisabled,\n                controls: controlsId || '',\n            });\n\n            if (typeof tab.setRovingTabIndex === 'function') {\n                tab.setRovingTabIndex(isActive ? 0 : -1);\n            }\n        });\n    }\n\n    disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this._resizeObserver?.disconnect();\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-tab.js

@@ -166,6 +166,11 @@ class Tab extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
     this.setAttribute("active-class", "active");
+    this.setAriaState({
+      role: "tab",
+      selected: false,
+      disabled: this.hasAttribute("disabled")
+    });
   }
   /**
    * Draws the component for the tab.
@@ -181,6 +186,7 @@ class Tab extends WJElement {
     a.classList.add("native-tab");
     a.appendChild(slot);
     fragment.appendChild(a);
+    this.slotEl = slot;
     return fragment;
   }
   /**
@@ -188,8 +194,32 @@ class Tab extends WJElement {
    * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
    */
   afterDraw() {
+    var _a;
     this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
     event.addListener(this, "click", "wje-tab:change");
+    this.syncAriaLabel();
+    (_a = this.slotEl) == null ? void 0 : _a.addEventListener("slotchange", () => this.syncAriaLabel());
+  }
+  /**
+   * Sync aria-label on host based on slotted text when not provided.
+   */
+  syncAriaLabel() {
+    var _a;
+    if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) return;
+    const text = (((_a = this.slotEl) == null ? void 0 : _a.assignedNodes({ flatten: true })) || []).map((node) => node.textContent || "").join("").trim();
+    if (text) {
+      this.setAttribute("aria-label", text);
+    }
+  }
+  /**
+   * Sets the roving tabindex on the internal focusable anchor.
+   * @param {number} value
+   */
+  setRovingTabIndex(value) {
+    var _a;
+    const anchor = (_a = this.context) == null ? void 0 : _a.querySelector("a");
+    if (!anchor) return;
+    anchor.setAttribute("tabindex", String(value));
   }
   /**
    * Cleans up before the component is disconnected.

package/dist/wje-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n        this._hasPanel = false;\n    }\n\n    /**\n     * Sets the panel attribute to the specified value.\n     * @param {string} value The value to set for the panel attribute.\n     */\n    set panel(value) {\n        this.setAttribute('panel', value);\n    }\n\n    /**\n     * Retrieves the value of the 'panel' attribute of the element.\n     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n     */\n    get panel() {\n        return this.getAttribute('panel') || null;\n    }\n\n    /**\n     * Sets the value of the 'route' attribute for the current object.\n     * @param {string} value The new value to set for the 'route' attribute.\n     */\n    set route(value) {\n        this.setAttribute('route', value);\n    }\n\n    /**\n     * Retrieves the value of the 'route' attribute.\n     * If the 'route' attribute is not set, it returns null.\n     * @returns {string|null} The value of the 'route' attribute or null if not set.\n     */\n    get route() {\n        return this.getAttribute('route') || null;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let href = this.panel || this.route || \"#\";\n\n        let a = document.createElement('a');\n        a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        event.addListener(this, 'click', 'wje-tab:change');\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAO;AA8CX;AAAA;AAAA;AAAA,qCAAY;AAxCR,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,KAAK,SAAS,KAAK,SAAS;AAEvC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,SAAS,KAAK,QAAQ,MAAM,MAAM,IAAI;AACrD,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AACR,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAChF,UAAM,YAAY,MAAM,SAAS,gBAAgB;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACR;AACA;AC9HA,IAAI,OAAO,WAAW,GAAG;"}
+{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n        this._hasPanel = false;\n    }\n\n    /**\n     * Sets the panel attribute to the specified value.\n     * @param {string} value The value to set for the panel attribute.\n     */\n    set panel(value) {\n        this.setAttribute('panel', value);\n    }\n\n    /**\n     * Retrieves the value of the 'panel' attribute of the element.\n     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n     */\n    get panel() {\n        return this.getAttribute('panel') || null;\n    }\n\n    /**\n     * Sets the value of the 'route' attribute for the current object.\n     * @param {string} value The new value to set for the 'route' attribute.\n     */\n    set route(value) {\n        this.setAttribute('route', value);\n    }\n\n    /**\n     * Retrieves the value of the 'route' attribute.\n     * If the 'route' attribute is not set, it returns null.\n     * @returns {string|null} The value of the 'route' attribute or null if not set.\n     */\n    get route() {\n        return this.getAttribute('route') || null;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'active');\n\n        this.setAriaState({\n            role: 'tab',\n            selected: false,\n            disabled: this.hasAttribute('disabled'),\n        });\n    }\n\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let href = this.panel || this.route || \"#\";\n\n        let a = document.createElement('a');\n        a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        event.addListener(this, 'click', 'wje-tab:change');\n        this.syncAriaLabel();\n        this.slotEl?.addEventListener('slotchange', () => this.syncAriaLabel());\n    }\n\n    /**\n     * Sync aria-label on host based on slotted text when not provided.\n     */\n    syncAriaLabel() {\n        if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) return;\n        const text = (this.slotEl?.assignedNodes({ flatten: true }) || [])\n            .map((node) => node.textContent || '')\n            .join('')\n            .trim();\n        if (text) {\n            this.setAttribute('aria-label', text);\n        }\n    }\n\n    /**\n     * Sets the roving tabindex on the internal focusable anchor.\n     * @param {number} value\n     */\n    setRovingTabIndex(value) {\n        const anchor = this.context?.querySelector('a');\n        if (!anchor) return;\n        anchor.setAttribute('tabindex', String(value));\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAO;AA8CX;AAAA;AAAA;AAAA,qCAAY;AAxCR,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAE1C,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,KAAK,aAAa,UAAU;AAAA,IAClD,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,KAAK,SAAS,KAAK,SAAS;AAEvC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,SAAS,KAAK,QAAQ,MAAM,MAAM,IAAI;AACrD,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;;AACR,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAChF,UAAM,YAAY,MAAM,SAAS,gBAAgB;AACjD,SAAK,cAAe;AACpB,eAAK,WAAL,mBAAa,iBAAiB,cAAc,MAAM,KAAK;EAC/D;AAAA;AAAA;AAAA;AAAA,EAKI,gBAAgB;;AACZ,QAAI,KAAK,aAAa,YAAY,KAAK,KAAK,aAAa,iBAAiB,EAAG;AAC7E,UAAM,UAAQ,UAAK,WAAL,mBAAa,cAAc,EAAE,SAAS,KAAM,OAAK,CAAE,GAC5D,IAAI,CAAC,SAAS,KAAK,eAAe,EAAE,EACpC,KAAK,EAAE,EACP,KAAM;AACX,QAAI,MAAM;AACN,WAAK,aAAa,cAAc,IAAI;AAAA,IAChD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,kBAAkB,OAAO;;AACrB,UAAM,UAAS,UAAK,YAAL,mBAAc,cAAc;AAC3C,QAAI,CAAC,OAAQ;AACb,WAAO,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACR;AACA;ACjKA,IAAI,OAAO,WAAW,GAAG;"}

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

@@ -23,6 +23,7 @@ import { FormAssociatedElement } from '../internals/form-associated-element.js';
  * @tag wje-textarea
  */
 export default class Textarea extends FormAssociatedElement {
+    static _instanceId: number;
     /**
      * Returns the CSS styles for the component.
      * @static
@@ -36,6 +37,7 @@ export default class Textarea extends FormAssociatedElement {
      */
     static get observedAttributes(): Array<string>;
     pristine: boolean;
+    _instanceId: number;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -46,7 +48,18 @@ export default class Textarea extends FormAssociatedElement {
      * @returns {string} The value of the attribute.
      */
     get value(): string;
-    _value: string;
+    _value: any;
+    /**
+     * Sets the label attribute of the element.
+     * @param {string} value The value to set as the label attribute.
+     */
+    set label(value: string);
+    /**
+     * Retrieves the value of the 'label' attribute if it exists.
+     * If the 'label' attribute is not set, it returns false.
+     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+     */
+    get label(): string | boolean;
     /**
      * Sets the `validateOnChange` property. If set to a truthy value, it adds the
      * `validate-on-change` attribute to the element. If set to a falsy value, it
@@ -63,11 +76,13 @@ export default class Textarea extends FormAssociatedElement {
     get validateOnChange(): boolean;
     set placeholder(value: string);
     get placeholder(): string;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Draws the component for the textarea.
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    _ariaErrorId: string;
     counterElement: HTMLDivElement;
     native: HTMLDivElement;
     labelElement: HTMLLabelElement;
@@ -77,6 +92,10 @@ export default class Textarea extends FormAssociatedElement {
      */
     afterDraw(): void;
     resizeObserver: ResizeObserver;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Sets the height of the textarea.
      */

package/dist/wje-textarea.js

@@ -1,10 +1,10 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
+import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Textarea ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-textarea-margin-bottom);\n    display: block;\n\n    label {\n        margin: var(--wje-textarea-label-margin);\n        padding: var(--wje-textarea-label-padding);\n        display: var(--wje-textarea-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-textarea-label-line-height);\n        font-size: var(--wje-textarea-label-font-size);\n    }\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        border-width: var(--wje-textarea-border-width);\n        border-style: var(--wje-textarea-border-style);\n        border-color: var(--wje-textarea-border-color);\n        border-radius: var(--wje-textarea-border-radius);\n        box-sizing: border-box;\n    }\n    textarea {\n        font-family: var(--wje-textarea-font-family);\n        color: var(--wje-textarea-color);\n        font-size: 14px;\n        border: 0 none;\n        padding: var(--wje-textarea-padding);\n        &:focus {\n            outline: none;\n        }\n    }\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([resize='auto']) textarea,\n:host([resize='none']) textarea {\n    resize: none;\n}\n\n.native-textarea {\n    .input-wrapper {\n        width: 100%;\n        line-height: normal;\n    }\n    &.default {\n        background-color: var(--wje-textarea-background-color);\n        font-family: var(--wje-textarea-font-family);\n        position: relative;\n        padding-inline: 0;\n        padding-top: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n            label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        textarea {\n            border: none;\n            padding-top: 0;\n            background: none;\n            box-shadow: none;\n            width: calc(100% - var(--wje-textarea-padding) * 2);\n            max-width: calc(100% - var(--wje-textarea-padding) * 2);\n            min-width: calc(100% - var(--wje-textarea-padding) * 2);\n            padding: 0 var(--wje-textarea-padding);\n        }\n        label {\n            margin: var(--wje-textarea-label-margin);\n            padding: var(--wje-textarea-label-padding);\n            display: var(--wje-textarea-label-display);\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease;\n            line-height: var(--wje-textarea-label-line-height);\n            font-size: var(--wje-textarea-label-font-size);\n        }\n        /*label {*/\n        /*    padding: 0 var(--wje-textarea-padding);*/\n        /*    display: block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*    padding-top: 0.25rem;*/\n        /*    &.fade {*/\n        /*        opacity: 0.5;*/\n        /*        font-size: 12px;*/\n        /*        letter-spacing: normal;*/\n        /*    }*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-left: none;\n            border-top: none;\n            border-bottom: none;\n        }\n\n        ::slotted([slot='end']) {\n            border-right: none;\n            border-top: none;\n            border-bottom: none;\n        }\n    }\n    &.standard {\n        position: relative;\n        border-radius: var(--wje-textarea-border-radius);\n        padding: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n        }\n        textarea {\n            background-color: var(--wje-textarea-background-color);\n            display: block;\n            min-height: 32px;\n            box-shadow: none;\n            width: 100%;\n            box-sizing: border-box;\n            border-radius: var(--wje-textarea-border-radius);\n        }\n        /*label {*/\n        /*    margin: var(--wje-textarea-label-margin);*/\n        /*    display: inline-block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-right: none;\n            border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\n        }\n\n        ::slotted([slot='end']) {\n            border-left: none;\n            border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\n        }\n\n        &.has-start textarea {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n        }\n\n        &.has-end textarea {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n        slot[name='error'] {\n            position: static;\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-textarea-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.counter {\n    float: right;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
-class Textarea extends FormAssociatedElement {
+const _Textarea = class _Textarea extends FormAssociatedElement {
   /**
    * Creates an instance of Textarea.
    * @class
@@ -30,6 +30,7 @@ class Textarea extends FormAssociatedElement {
     });
     this.invalid = false;
     this.pristine = true;
+    this._instanceId = ++_Textarea._instanceId;
   }
   /**
    * Setter for the value attribute.
@@ -40,6 +41,7 @@ class Textarea extends FormAssociatedElement {
     if (this.input) this.input.value = value;
     this.pristine = false;
     this._value = value;
+    this.syncAria();
   }
   /**
    * Getter for the value attribute.
@@ -49,6 +51,25 @@ class Textarea extends FormAssociatedElement {
     var _a;
     return ((_a = this.input) == null ? void 0 : _a.value) ?? this._value ?? "";
   }
+  /**
+   * Sets the label attribute of the element.
+   * @param {string} value The value to set as the label attribute.
+   */
+  set label(value) {
+    if (value === null || value === void 0) {
+      this.removeAttribute("label");
+    } else {
+      this.setAttribute("label", value);
+    }
+  }
+  /**
+   * Retrieves the value of the 'label' attribute if it exists.
+   * If the 'label' attribute is not set, it returns false.
+   * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+   */
+  get label() {
+    return this.getAttribute("label") || false;
+  }
   /**
    * Sets the `validateOnChange` property. If set to a truthy value, it adds the
    * `validate-on-change` attribute to the element. If set to a falsy value, it
@@ -91,7 +112,7 @@ class Textarea extends FormAssociatedElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return [];
+    return ["value", "name", "disabled", "placeholder", "label", "required", "readonly", "invalid", "rows"];
   }
   /**
    * Sets up the attributes for the component.
@@ -99,9 +120,40 @@ class Textarea extends FormAssociatedElement {
   setupAttributes() {
     this.isShadowRoot = "open";
     if (this.pristine) {
-      this.value = this.innerHTML;
+      const attrValue = this.getAttribute("value");
+      this.value = attrValue !== null ? attrValue : this.innerHTML;
       this.pristine = false;
     }
+    this.syncAria();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "label") {
+      this.refresh();
+      return;
+    }
+    if (!this.input) {
+      this.syncAria();
+      return;
+    }
+    if (name === "value") {
+      this._value = newValue ?? "";
+      this.input.value = this.value;
+      this.internals.setFormValue(this.value);
+    } else if (name === "name") {
+      this.input.name = this.name;
+    } else if (name === "disabled") {
+      this.input.disabled = this.hasAttribute("disabled");
+    } else if (name === "required") {
+      this.input.required = this.required;
+    } else if (name === "readonly") {
+      this.input.readOnly = this.hasAttribute("readonly");
+    } else if (name === "placeholder") {
+      this.input.placeholder = this.placeholder || "";
+    } else if (name === "rows") {
+      this.input.rows = Number(newValue || 3);
+    }
+    this.syncAria();
   }
   /**
    * Draws the component for the textarea.
@@ -130,7 +182,7 @@ class Textarea extends FormAssociatedElement {
     input.placeholder = this.placeholder || "";
     input.classList.add("form-control");
     input.setAttribute("part", "input");
-    input.setAttribute("rows", this.rows || 3);
+    input.rows = Number(this.getAttribute("rows") || 3);
     input.setAttribute("spellcheck", false);
     const attributes = Array.from(this.attributes).map((attr) => attr.name);
     attributes.forEach((attr) => {
@@ -142,11 +194,15 @@ class Textarea extends FormAssociatedElement {
     error.setAttribute("slot", "error");
     let errorSlot = document.createElement("slot");
     errorSlot.setAttribute("name", "error");
-    if (this.resize === "auto") input.addEventListener("input", this.setTextareaHeight);
-    if (this.variant === "standard") {
-      if (this.label) native.appendChild(label);
-    } else {
-      inputWrapper.appendChild(label);
+    this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;
+    errorSlot.id = this._ariaErrorId;
+    if (this.getAttribute("resize") === "auto") input.addEventListener("input", this.setTextareaHeight);
+    if (this.label) {
+      if (this.variant === "standard") {
+        native.appendChild(label);
+      } else {
+        inputWrapper.appendChild(label);
+      }
     }
     inputWrapper.appendChild(input);
     wrapper.appendChild(inputWrapper);
@@ -166,13 +222,17 @@ class Textarea extends FormAssociatedElement {
     this.native = native;
     this.labelElement = label;
     this.input = input;
+    this.syncAria();
     return fragment;
   }
   /**
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);
+    if (this.getAttribute("resize") === "auto" && typeof ResizeObserver === "function") {
+      this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+      this.resizeObserver.observe(this.input);
+    }
     if (!this.hasAttribute("disabled")) {
       event.addListener(this, "click", "wje-textarea:change");
       event.addListener(this, "click", "wje-textarea:input");
@@ -213,19 +273,41 @@ class Textarea extends FormAssociatedElement {
       }
     });
     this.validate();
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    const requiredInvalid = this.required && !this.value;
+    const invalid = this.invalid || requiredInvalid;
+    const label = this.label && this.label !== false ? this.label.trim() : "";
+    this.setAriaState({
+      role: "textbox",
+      disabled: this.disabled,
+      required: this.required,
+      readonly: this.hasAttribute("readonly"),
+      invalid,
+      describedBy: this._ariaErrorId,
+      ...label ? { label } : {}
+    });
   }
   componentCleanup() {
-    var _a;
+    var _a, _b;
     (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
+    (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
   }
   /**
    * Disconnects the component.
    */
   beforeDisconnect() {
-    var _a;
+    var _a, _b;
     (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
+    (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
   }
-}
+};
+__publicField(_Textarea, "_instanceId", 0);
+let Textarea = _Textarea;
 Textarea.define("wje-textarea", Textarea);
 export {
   Textarea as default