wj-elements 0.4.7 → 0.5.0

package/dist/wje-toolbar-action.js

@@ -18,6 +18,8 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
     this._isCollapsedByBreakpoint = null;
     this._managedOverflowNodes = /* @__PURE__ */ new WeakSet();
     this._overflowRetryFrame = null;
+    this._applyOverflowFrame = null;
+    this._observedDropdown = null;
   }
   /**
    * Returns the CSS stylesheet for the component.
@@ -127,19 +129,23 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
    */
   afterDraw() {
     var _a;
-    this.onSlotChange = () => this.applyOverflow();
+    this.onSlotChange = () => {
+      this.observeExistingDropdown();
+      this.scheduleOverflow();
+    };
     (_a = this.defaultSlot) == null ? void 0 : _a.addEventListener("slotchange", this.onSlotChange);
     this.handleResize = () => this.handleBreakpointResize();
     if (this.getBreakpointWidth()) {
       window.addEventListener("resize", this.handleResize);
     }
-    this.applyOverflow();
+    this.observeExistingDropdown();
+    this.scheduleOverflow(true);
   }
   /**
    * Removes listeners after disconnect.
    */
   afterDisconnect() {
-    var _a;
+    var _a, _b;
     (_a = this.defaultSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
     window.removeEventListener("resize", this.handleResize);
     this._isCollapsedByBreakpoint = null;
@@ -147,6 +153,28 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
       cancelAnimationFrame(this._overflowRetryFrame);
       this._overflowRetryFrame = null;
     }
+    if (this._applyOverflowFrame) {
+      cancelAnimationFrame(this._applyOverflowFrame);
+      this._applyOverflowFrame = null;
+    }
+    (_b = this._dropdownObserver) == null ? void 0 : _b.disconnect();
+    this._dropdownObserver = null;
+    this._observedDropdown = null;
+  }
+  /**
+   * Schedules overflow application after layout settles.
+   * @param {boolean} [doubleFrame] Wait an extra frame for initial render/hydration.
+   */
+  scheduleOverflow(doubleFrame = false) {
+    if (this._applyOverflowFrame) return;
+    this._applyOverflowFrame = requestAnimationFrame(() => {
+      this._applyOverflowFrame = null;
+      if (doubleFrame) {
+        this.scheduleOverflow(false);
+        return;
+      }
+      this.applyOverflow();
+    });
   }
   /**
    * Returns the actions for the toolbar action.
@@ -178,6 +206,23 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
       return ((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-dropdown";
     }) || null;
   }
+  /**
+   * Observes the external dropdown for late menu/content changes.
+   */
+  observeExistingDropdown() {
+    var _a;
+    const dropdown = this.getExistingDropdown();
+    if (dropdown === this._observedDropdown) return;
+    (_a = this._dropdownObserver) == null ? void 0 : _a.disconnect();
+    this._dropdownObserver = null;
+    this._observedDropdown = dropdown;
+    if (!dropdown || typeof MutationObserver !== "function") return;
+    this._dropdownObserver = new MutationObserver(() => this.scheduleOverflow());
+    this._dropdownObserver.observe(dropdown, {
+      childList: true,
+      subtree: false
+    });
+  }
   /**
    * Returns the dropdown that should receive overflow items.
    * @returns {HTMLElement}
@@ -244,7 +289,7 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
     const nextState = this.shouldCollapseByBreakpoint();
     if (this._isCollapsedByBreakpoint === nextState) return;
     this._isCollapsedByBreakpoint = nextState;
-    this.applyOverflow();
+    this.scheduleOverflow();
   }
   /**
    * Resolves the configured breakpoint to a pixel width.
@@ -285,7 +330,7 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
     if (existingDropdown && overflowActions.length > 0 && !overflowMenu) {
       this._overflowRetryFrame = requestAnimationFrame(() => {
         this._overflowRetryFrame = null;
-        this.applyOverflow();
+        this.scheduleOverflow();
       });
       return;
     }

package/dist/wje-toolbar-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    static BREAKPOINTS = {\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        '2xl': 1450,\n        xxl: 1450,\n    };\n\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n        this._managedHiddenActions = new WeakSet();\n        this._isCollapsedByBreakpoint = null;\n        this._managedOverflowNodes = new WeakSet();\n        this._overflowRetryFrame = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\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 ['breakpoint', 'max-items', 'visible-items'];\n    }\n\n    /**\n     * Sets the collapse breakpoint token or value.\n     * @param {string} value Breakpoint token or CSS size.\n     */\n    set breakpoint(value) {\n        if (value) this.setAttribute('breakpoint', value);\n        else this.removeAttribute('breakpoint');\n    }\n\n    /**\n     * Gets the collapse breakpoint token or value.\n     * @returns {string}\n     */\n    get breakpoint() {\n        return this.getAttribute('breakpoint') || '';\n    }\n\n    /**\n     * Sets the maximum number of visible actions.\n     * @param {number|string} value The maximum number of visible actions.\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Gets the maximum number of visible actions.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items') || 0;\n    }\n\n    /**\n     * Sets the responsive visible action count.\n     * @param {number|string} value The visible action count.\n     */\n    set visibleItems(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('visible-items');\n            return;\n        }\n\n        this.setAttribute('visible-items', value);\n    }\n\n    /**\n     * Gets the responsive visible action count.\n     * @returns {number|null}\n     */\n    get visibleItems() {\n        if (!this.hasAttribute('visible-items')) return null;\n        const value = +this.getAttribute('visible-items');\n        return Number.isFinite(value) ? value : null;\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 action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom-end');\n        dropdown.setAttribute('collapsible', '');\n        dropdown.classList.add('toolbar-action-more');\n        dropdown.hidden = true;\n\n        let trigger = document.createElement('wje-button');\n        trigger.setAttribute('slot', 'trigger');\n        trigger.setAttribute('fill', 'link');\n        trigger.setAttribute('aria-label', 'Show more actions');\n        trigger.innerHTML = '<wje-icon name=\"dots\"></wje-icon>';\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.append(trigger, menu);\n\n        element.appendChild(slot);\n        element.appendChild(dropdown);\n\n        fragment.appendChild(element);\n\n        this.defaultSlot = slot;\n        this.native = element;\n        this.moreDropdown = dropdown;\n        this.moreMenu = menu;\n\n        return fragment;\n    }\n\n    /**\n     * Applies the current visible action limit after the component is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.applyOverflow();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        this.applyOverflow();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n\n        if (this._overflowRetryFrame) {\n            cancelAnimationFrame(this._overflowRetryFrame);\n            this._overflowRetryFrame = null;\n        }\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array<HTMLElement>} Managed toolbar actions.\n     */\n    getActions() {\n        return this.getAssignedElements().filter(\n            (element) =>\n                element.getAttribute('slot') !== 'trigger' &&\n                (element.tagName?.toLowerCase() === 'wje-button' || element.hasAttribute('data-toolbar-action'))\n        );\n    }\n\n    /**\n     * Returns direct children assigned to the default slot.\n     * @returns {Array<HTMLElement>}\n     */\n    getAssignedElements() {\n        return this.defaultSlot?.assignedElements?.() || Array.from(this.children);\n    }\n\n    /**\n     * Returns an existing top-level dropdown if present.\n     * @returns {HTMLElement|null}\n     */\n    getExistingDropdown() {\n        return this.getAssignedElements().find((element) => element.tagName?.toLowerCase() === 'wje-dropdown') || null;\n    }\n\n    /**\n     * Returns the dropdown that should receive overflow items.\n     * @returns {HTMLElement}\n     */\n    getOverflowDropdown() {\n        return this.getExistingDropdown() || this.moreDropdown;\n    }\n\n    /**\n     * Returns the menu used for overflow items.\n     * @returns {HTMLElement|null}\n     */\n    getOverflowMenu() {\n        const existingDropdown = this.getExistingDropdown();\n\n        if (existingDropdown) {\n            return (\n                Array.from(existingDropdown.children).find((element) => element.tagName?.toLowerCase() === 'wje-menu') ||\n                null\n            );\n        }\n\n        return this.moreMenu;\n    }\n\n    /**\n     * Gets the number of actions that should stay visible.\n     * @returns {number}\n     */\n    getVisibleLimit() {\n        const actions = this.getActions();\n\n        if (this.isCollapsedByBreakpoint()) {\n            return 0;\n        }\n\n        const maxItems = this.maxItems > 0 ? this.maxItems : actions.length;\n        const visibleItems = this.visibleItems;\n        const limit = visibleItems === null ? maxItems : Math.min(visibleItems, maxItems);\n\n        return Math.max(0, Math.min(limit, actions.length));\n    }\n\n    /**\n     * Returns whether the toolbar action should collapse based on the configured breakpoint.\n     * @returns {boolean}\n     */\n    shouldCollapseByBreakpoint() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return false;\n\n        return window.innerWidth < breakpointWidth;\n    }\n\n    /**\n     * Returns the cached breakpoint collapse state.\n     * @returns {boolean}\n     */\n    isCollapsedByBreakpoint() {\n        if (!this.getBreakpointWidth()) {\n            this._isCollapsedByBreakpoint = false;\n            return false;\n        }\n\n        const nextState = this.shouldCollapseByBreakpoint();\n        this._isCollapsedByBreakpoint = nextState;\n\n        return nextState;\n    }\n\n    /**\n     * Reacts to viewport resize only when the breakpoint mode actually changes.\n     * @returns {void}\n     */\n    handleBreakpointResize() {\n        if (!this.getBreakpointWidth()) return;\n\n        const nextState = this.shouldCollapseByBreakpoint();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this._isCollapsedByBreakpoint = nextState;\n        this.applyOverflow();\n    }\n\n    /**\n     * Resolves the configured breakpoint to a pixel width.\n     * @returns {number|null}\n     */\n    getBreakpointWidth() {\n        if (!this.breakpoint) return null;\n\n        const token = this.breakpoint.trim().toLowerCase();\n        const cssValue = getComputedStyle(this).getPropertyValue(`--wje-toolbar-action-breakpoint-${token}`).trim();\n        const namedBreakpoint = ToolbarAction.BREAKPOINTS[token];\n\n        if (cssValue) {\n            const cssNumber = parseFloat(cssValue);\n            if (Number.isFinite(cssNumber)) return cssNumber;\n        }\n\n        if (Number.isFinite(namedBreakpoint)) {\n            return namedBreakpoint;\n        }\n\n        const directNumber = parseFloat(token);\n        return Number.isFinite(directNumber) ? directNumber : null;\n    }\n\n    /**\n     * Updates visible actions and the overflow dropdown.\n     * @returns {void}\n     */\n    applyOverflow() {\n        const actions = this.getActions();\n        const visibleLimit = this.getVisibleLimit();\n        const overflowActions = actions.slice(visibleLimit);\n        const existingDropdown = this.getExistingDropdown();\n        const overflowMenu = this.getOverflowMenu();\n\n        if (this._overflowRetryFrame) {\n            cancelAnimationFrame(this._overflowRetryFrame);\n            this._overflowRetryFrame = null;\n        }\n\n        this.restoreManagedActions(actions);\n        this.restoreManagedOverflowContent();\n\n        if (existingDropdown && overflowActions.length > 0 && !overflowMenu) {\n            this._overflowRetryFrame = requestAnimationFrame(() => {\n                this._overflowRetryFrame = null;\n                this.applyOverflow();\n            });\n\n            return;\n        }\n\n        if (!existingDropdown) {\n            this.moreMenu?.replaceChildren();\n        }\n\n        overflowActions.forEach((action) => {\n            action.hidden = true;\n            action.style.display = 'none';\n            this._managedHiddenActions.add(action);\n        });\n\n        if (overflowMenu && existingDropdown && overflowActions.length > 0 && overflowMenu.children.length > 0) {\n            overflowMenu.append(this.createOverflowDivider());\n        }\n\n        overflowActions.forEach((action) => {\n            overflowMenu?.append(this.createMenuItem(action));\n        });\n\n        if (!existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = overflowActions.length === 0;\n        } else if (existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = true;\n        }\n    }\n\n    /**\n     * Restores buttons hidden by this component.\n     * @param {Array<HTMLElement>} actions Toolbar buttons.\n     */\n    restoreManagedActions(actions = this.getActions()) {\n        actions.forEach((action) => {\n            if (this._managedHiddenActions.has(action)) {\n                action.hidden = false;\n                action.style.removeProperty('display');\n                this._managedHiddenActions.delete(action);\n            }\n        });\n    }\n\n    /**\n     * Removes overflow menu nodes that were previously injected by this component.\n     */\n    restoreManagedOverflowContent() {\n        const dropdown = this.getExistingDropdown();\n\n        if (!dropdown) return;\n\n        const menu = this.getOverflowMenu();\n        if (!menu) return;\n\n        Array.from(menu.children).forEach((child) => {\n            if (this._managedOverflowNodes.has(child)) {\n                child.remove();\n                this._managedOverflowNodes.delete(child);\n            }\n        });\n    }\n\n    /**\n     * Creates a dropdown menu proxy for an overflowed button.\n     * @param {HTMLElement} action The original action button.\n     * @returns {HTMLElement}\n     */\n    createMenuItem(action) {\n        let menuItem = document.createElement('wje-menu-item');\n        menuItem.innerHTML = action.innerHTML;\n\n        if (action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') {\n            menuItem.setAttribute('disabled', '');\n        }\n\n        menuItem.addEventListener('wje-menu-item:click', (e) => this.handleMenuItemClick(e, action));\n        menuItem.addEventListener('click', (e) => this.handleMenuItemClick(e, action));\n        this._managedOverflowNodes.add(menuItem);\n\n        return menuItem;\n    }\n\n    /**\n     * Creates a divider separating existing dropdown actions from responsive overflow actions.\n     * @returns {HTMLElement}\n     */\n    createOverflowDivider() {\n        const divider = document.createElement('wje-divider');\n        this._managedOverflowNodes.add(divider);\n        return divider;\n    }\n\n    /**\n     * Forwards menu item activation to the original button.\n     * @param {Event} e The menu event.\n     * @param {HTMLElement} action The original action button.\n     */\n    handleMenuItemClick(e, action) {\n        e.preventDefault?.();\n        e.stopPropagation();\n\n        if (!action || action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') return;\n\n        action.click();\n    }\n\n    /**\n     * Measures action widths while preserving current overflow state.\n     * @returns {{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}}\n     */\n    measureActionMetrics() {\n        const actions = this.getActions();\n        const hasExistingDropdown = !!this.getExistingDropdown();\n\n        this.restoreManagedActions(actions);\n\n        const widths = actions.map((action) => action.getBoundingClientRect().width);\n        const style = this.native ? getComputedStyle(this.native) : null;\n        const gap = style ? parseFloat(style.columnGap || style.gap || '0') || 0 : 0;\n        const moreWidth = this.measureMoreWidth();\n\n        this.applyOverflow();\n\n        return {\n            count: actions.length,\n            widths,\n            gap,\n            moreWidth,\n            getWidthForCount: (visibleCount) => {\n                const count = Math.max(0, Math.min(visibleCount, actions.length));\n                const overflowCount = actions.length - count;\n                const visibleWidth = widths.slice(0, count).reduce((sum, width) => sum + width, 0);\n                const visibleGaps = Math.max(count - 1, 0) * gap;\n                const usesDropdown = hasExistingDropdown || overflowCount > 0;\n                const moreGap = count > 0 && usesDropdown ? gap : 0;\n\n                return visibleWidth + visibleGaps + (usesDropdown ? moreWidth + moreGap : 0);\n            },\n        };\n    }\n\n    /**\n     * Measures the overflow dropdown trigger.\n     * @returns {number}\n     */\n    measureMoreWidth() {\n        const dropdown = this.getOverflowDropdown();\n        if (!dropdown) return 48;\n\n        const isInternalDropdown = dropdown === this.moreDropdown;\n        const wasHidden = dropdown.hidden;\n        const previousVisibility = dropdown.style.visibility;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = false;\n            dropdown.style.visibility = 'hidden';\n        }\n\n        const width = dropdown.getBoundingClientRect().width || 48;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = true;\n            dropdown.style.visibility = previousVisibility;\n        }\n\n        if (dropdown === this.moreDropdown && this.getExistingDropdown()) {\n            this.moreDropdown.hidden = true;\n        }\n\n        return width;\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    static BREAKPOINTS = {\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        '2xl': 1450,\n        xxl: 1450,\n    };\n\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n        this._managedHiddenActions = new WeakSet();\n        this._isCollapsedByBreakpoint = null;\n        this._managedOverflowNodes = new WeakSet();\n        this._overflowRetryFrame = null;\n        this._applyOverflowFrame = null;\n        this._observedDropdown = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\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 ['breakpoint', 'max-items', 'visible-items'];\n    }\n\n    /**\n     * Sets the collapse breakpoint token or value.\n     * @param {string} value Breakpoint token or CSS size.\n     */\n    set breakpoint(value) {\n        if (value) this.setAttribute('breakpoint', value);\n        else this.removeAttribute('breakpoint');\n    }\n\n    /**\n     * Gets the collapse breakpoint token or value.\n     * @returns {string}\n     */\n    get breakpoint() {\n        return this.getAttribute('breakpoint') || '';\n    }\n\n    /**\n     * Sets the maximum number of visible actions.\n     * @param {number|string} value The maximum number of visible actions.\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Gets the maximum number of visible actions.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items') || 0;\n    }\n\n    /**\n     * Sets the responsive visible action count.\n     * @param {number|string} value The visible action count.\n     */\n    set visibleItems(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('visible-items');\n            return;\n        }\n\n        this.setAttribute('visible-items', value);\n    }\n\n    /**\n     * Gets the responsive visible action count.\n     * @returns {number|null}\n     */\n    get visibleItems() {\n        if (!this.hasAttribute('visible-items')) return null;\n        const value = +this.getAttribute('visible-items');\n        return Number.isFinite(value) ? value : null;\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 action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom-end');\n        dropdown.setAttribute('collapsible', '');\n        dropdown.classList.add('toolbar-action-more');\n        dropdown.hidden = true;\n\n        let trigger = document.createElement('wje-button');\n        trigger.setAttribute('slot', 'trigger');\n        trigger.setAttribute('fill', 'link');\n        trigger.setAttribute('aria-label', 'Show more actions');\n        trigger.innerHTML = '<wje-icon name=\"dots\"></wje-icon>';\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.append(trigger, menu);\n\n        element.appendChild(slot);\n        element.appendChild(dropdown);\n\n        fragment.appendChild(element);\n\n        this.defaultSlot = slot;\n        this.native = element;\n        this.moreDropdown = dropdown;\n        this.moreMenu = menu;\n\n        return fragment;\n    }\n\n    /**\n     * Applies the current visible action limit after the component is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange = () => {\n            this.observeExistingDropdown();\n            this.scheduleOverflow();\n        };\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        this.observeExistingDropdown();\n        this.scheduleOverflow(true);\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n\n        if (this._overflowRetryFrame) {\n            cancelAnimationFrame(this._overflowRetryFrame);\n            this._overflowRetryFrame = null;\n        }\n\n        if (this._applyOverflowFrame) {\n            cancelAnimationFrame(this._applyOverflowFrame);\n            this._applyOverflowFrame = null;\n        }\n\n        this._dropdownObserver?.disconnect();\n        this._dropdownObserver = null;\n        this._observedDropdown = null;\n    }\n\n    /**\n     * Schedules overflow application after layout settles.\n     * @param {boolean} [doubleFrame] Wait an extra frame for initial render/hydration.\n     */\n    scheduleOverflow(doubleFrame = false) {\n        if (this._applyOverflowFrame) return;\n\n        this._applyOverflowFrame = requestAnimationFrame(() => {\n            this._applyOverflowFrame = null;\n\n            if (doubleFrame) {\n                this.scheduleOverflow(false);\n                return;\n            }\n\n            this.applyOverflow();\n        });\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array<HTMLElement>} Managed toolbar actions.\n     */\n    getActions() {\n        return this.getAssignedElements().filter(\n            (element) =>\n                element.getAttribute('slot') !== 'trigger' &&\n                (element.tagName?.toLowerCase() === 'wje-button' || element.hasAttribute('data-toolbar-action'))\n        );\n    }\n\n    /**\n     * Returns direct children assigned to the default slot.\n     * @returns {Array<HTMLElement>}\n     */\n    getAssignedElements() {\n        return this.defaultSlot?.assignedElements?.() || Array.from(this.children);\n    }\n\n    /**\n     * Returns an existing top-level dropdown if present.\n     * @returns {HTMLElement|null}\n     */\n    getExistingDropdown() {\n        return this.getAssignedElements().find((element) => element.tagName?.toLowerCase() === 'wje-dropdown') || null;\n    }\n\n    /**\n     * Observes the external dropdown for late menu/content changes.\n     */\n    observeExistingDropdown() {\n        const dropdown = this.getExistingDropdown();\n\n        if (dropdown === this._observedDropdown) return;\n\n        this._dropdownObserver?.disconnect();\n        this._dropdownObserver = null;\n        this._observedDropdown = dropdown;\n\n        if (!dropdown || typeof MutationObserver !== 'function') return;\n\n        this._dropdownObserver = new MutationObserver(() => this.scheduleOverflow());\n        this._dropdownObserver.observe(dropdown, {\n            childList: true,\n            subtree: false,\n        });\n    }\n\n    /**\n     * Returns the dropdown that should receive overflow items.\n     * @returns {HTMLElement}\n     */\n    getOverflowDropdown() {\n        return this.getExistingDropdown() || this.moreDropdown;\n    }\n\n    /**\n     * Returns the menu used for overflow items.\n     * @returns {HTMLElement|null}\n     */\n    getOverflowMenu() {\n        const existingDropdown = this.getExistingDropdown();\n\n        if (existingDropdown) {\n            return (\n                Array.from(existingDropdown.children).find((element) => element.tagName?.toLowerCase() === 'wje-menu') ||\n                null\n            );\n        }\n\n        return this.moreMenu;\n    }\n\n    /**\n     * Gets the number of actions that should stay visible.\n     * @returns {number}\n     */\n    getVisibleLimit() {\n        const actions = this.getActions();\n\n        if (this.isCollapsedByBreakpoint()) {\n            return 0;\n        }\n\n        const maxItems = this.maxItems > 0 ? this.maxItems : actions.length;\n        const visibleItems = this.visibleItems;\n        const limit = visibleItems === null ? maxItems : Math.min(visibleItems, maxItems);\n\n        return Math.max(0, Math.min(limit, actions.length));\n    }\n\n    /**\n     * Returns whether the toolbar action should collapse based on the configured breakpoint.\n     * @returns {boolean}\n     */\n    shouldCollapseByBreakpoint() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return false;\n\n        return window.innerWidth < breakpointWidth;\n    }\n\n    /**\n     * Returns the cached breakpoint collapse state.\n     * @returns {boolean}\n     */\n    isCollapsedByBreakpoint() {\n        if (!this.getBreakpointWidth()) {\n            this._isCollapsedByBreakpoint = false;\n            return false;\n        }\n\n        const nextState = this.shouldCollapseByBreakpoint();\n        this._isCollapsedByBreakpoint = nextState;\n\n        return nextState;\n    }\n\n    /**\n     * Reacts to viewport resize only when the breakpoint mode actually changes.\n     * @returns {void}\n     */\n    handleBreakpointResize() {\n        if (!this.getBreakpointWidth()) return;\n\n        const nextState = this.shouldCollapseByBreakpoint();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this._isCollapsedByBreakpoint = nextState;\n        this.scheduleOverflow();\n    }\n\n    /**\n     * Resolves the configured breakpoint to a pixel width.\n     * @returns {number|null}\n     */\n    getBreakpointWidth() {\n        if (!this.breakpoint) return null;\n\n        const token = this.breakpoint.trim().toLowerCase();\n        const cssValue = getComputedStyle(this).getPropertyValue(`--wje-toolbar-action-breakpoint-${token}`).trim();\n        const namedBreakpoint = ToolbarAction.BREAKPOINTS[token];\n\n        if (cssValue) {\n            const cssNumber = parseFloat(cssValue);\n            if (Number.isFinite(cssNumber)) return cssNumber;\n        }\n\n        if (Number.isFinite(namedBreakpoint)) {\n            return namedBreakpoint;\n        }\n\n        const directNumber = parseFloat(token);\n        return Number.isFinite(directNumber) ? directNumber : null;\n    }\n\n    /**\n     * Updates visible actions and the overflow dropdown.\n     * @returns {void}\n     */\n    applyOverflow() {\n        const actions = this.getActions();\n        const visibleLimit = this.getVisibleLimit();\n        const overflowActions = actions.slice(visibleLimit);\n        const existingDropdown = this.getExistingDropdown();\n        const overflowMenu = this.getOverflowMenu();\n\n        if (this._overflowRetryFrame) {\n            cancelAnimationFrame(this._overflowRetryFrame);\n            this._overflowRetryFrame = null;\n        }\n\n        this.restoreManagedActions(actions);\n        this.restoreManagedOverflowContent();\n\n        if (existingDropdown && overflowActions.length > 0 && !overflowMenu) {\n            this._overflowRetryFrame = requestAnimationFrame(() => {\n                this._overflowRetryFrame = null;\n                this.scheduleOverflow();\n            });\n\n            return;\n        }\n\n        if (!existingDropdown) {\n            this.moreMenu?.replaceChildren();\n        }\n\n        overflowActions.forEach((action) => {\n            action.hidden = true;\n            action.style.display = 'none';\n            this._managedHiddenActions.add(action);\n        });\n\n        if (overflowMenu && existingDropdown && overflowActions.length > 0 && overflowMenu.children.length > 0) {\n            overflowMenu.append(this.createOverflowDivider());\n        }\n\n        overflowActions.forEach((action) => {\n            overflowMenu?.append(this.createMenuItem(action));\n        });\n\n        if (!existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = overflowActions.length === 0;\n        } else if (existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = true;\n        }\n    }\n\n    /**\n     * Restores buttons hidden by this component.\n     * @param {Array<HTMLElement>} actions Toolbar buttons.\n     */\n    restoreManagedActions(actions = this.getActions()) {\n        actions.forEach((action) => {\n            if (this._managedHiddenActions.has(action)) {\n                action.hidden = false;\n                action.style.removeProperty('display');\n                this._managedHiddenActions.delete(action);\n            }\n        });\n    }\n\n    /**\n     * Removes overflow menu nodes that were previously injected by this component.\n     */\n    restoreManagedOverflowContent() {\n        const dropdown = this.getExistingDropdown();\n\n        if (!dropdown) return;\n\n        const menu = this.getOverflowMenu();\n        if (!menu) return;\n\n        Array.from(menu.children).forEach((child) => {\n            if (this._managedOverflowNodes.has(child)) {\n                child.remove();\n                this._managedOverflowNodes.delete(child);\n            }\n        });\n    }\n\n    /**\n     * Creates a dropdown menu proxy for an overflowed button.\n     * @param {HTMLElement} action The original action button.\n     * @returns {HTMLElement}\n     */\n    createMenuItem(action) {\n        let menuItem = document.createElement('wje-menu-item');\n        menuItem.innerHTML = action.innerHTML;\n\n        if (action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') {\n            menuItem.setAttribute('disabled', '');\n        }\n\n        menuItem.addEventListener('wje-menu-item:click', (e) => this.handleMenuItemClick(e, action));\n        menuItem.addEventListener('click', (e) => this.handleMenuItemClick(e, action));\n        this._managedOverflowNodes.add(menuItem);\n\n        return menuItem;\n    }\n\n    /**\n     * Creates a divider separating existing dropdown actions from responsive overflow actions.\n     * @returns {HTMLElement}\n     */\n    createOverflowDivider() {\n        const divider = document.createElement('wje-divider');\n        this._managedOverflowNodes.add(divider);\n        return divider;\n    }\n\n    /**\n     * Forwards menu item activation to the original button.\n     * @param {Event} e The menu event.\n     * @param {HTMLElement} action The original action button.\n     */\n    handleMenuItemClick(e, action) {\n        e.preventDefault?.();\n        e.stopPropagation();\n\n        if (!action || action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') return;\n\n        action.click();\n    }\n\n    /**\n     * Measures action widths while preserving current overflow state.\n     * @returns {{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}}\n     */\n    measureActionMetrics() {\n        const actions = this.getActions();\n        const hasExistingDropdown = !!this.getExistingDropdown();\n\n        this.restoreManagedActions(actions);\n\n        const widths = actions.map((action) => action.getBoundingClientRect().width);\n        const style = this.native ? getComputedStyle(this.native) : null;\n        const gap = style ? parseFloat(style.columnGap || style.gap || '0') || 0 : 0;\n        const moreWidth = this.measureMoreWidth();\n\n        this.applyOverflow();\n\n        return {\n            count: actions.length,\n            widths,\n            gap,\n            moreWidth,\n            getWidthForCount: (visibleCount) => {\n                const count = Math.max(0, Math.min(visibleCount, actions.length));\n                const overflowCount = actions.length - count;\n                const visibleWidth = widths.slice(0, count).reduce((sum, width) => sum + width, 0);\n                const visibleGaps = Math.max(count - 1, 0) * gap;\n                const usesDropdown = hasExistingDropdown || overflowCount > 0;\n                const moreGap = count > 0 && usesDropdown ? gap : 0;\n\n                return visibleWidth + visibleGaps + (usesDropdown ? moreWidth + moreGap : 0);\n            },\n        };\n    }\n\n    /**\n     * Measures the overflow dropdown trigger.\n     * @returns {number}\n     */\n    measureMoreWidth() {\n        const dropdown = this.getOverflowDropdown();\n        if (!dropdown) return 48;\n\n        const isInternalDropdown = dropdown === this.moreDropdown;\n        const wasHidden = dropdown.hidden;\n        const previousVisibility = dropdown.style.visibility;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = false;\n            dropdown.style.visibility = 'hidden';\n        }\n\n        const width = dropdown.getBoundingClientRect().width || 48;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = true;\n            dropdown.style.visibility = previousVisibility;\n        }\n\n        if (dropdown === this.moreDropdown && this.getExistingDropdown()) {\n            this.moreDropdown.hidden = true;\n        }\n\n        return width;\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":"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"}

package/dist/wje-toolbar.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 Toolbar ]\n*/\n\n:host {\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-block: var(--wje-toolbar-padding-block);\n    box-shadow: var(--wje-toolbar-shadow);\n    gap: var(--wje-toolbar-action-gap);\n    overflow: hidden;\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    min-width: 0;\n    margin-right: auto;\n}\n\n::slotted([slot='end']) {\n    flex: 0 0 auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
+const styles = "/*\n[ WJ Toolbar ]\n*/\n\n:host {\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-block: var(--wje-toolbar-padding-block);\n    margin-inline: var(--wje-toolbar-margin-inline);\n    margin-block: var(--wje-toolbar-margin-block);\n    box-shadow: var(--wje-toolbar-shadow);\n    gap: var(--wje-toolbar-action-gap);\n    overflow: hidden;\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    min-width: 0;\n    margin-right: auto;\n}\n\n::slotted([slot='end']) {\n    flex: 0 0 auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
 class Toolbar extends WJElement {
   /**
    * Creates an instance of Toolbar.

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        this._breadcrumbState = new WeakMap();\n        this._responsiveFrame = null;\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        this.native = native;\n        this.startSlot = start;\n        this.endSlot = end;\n\n        return fragment;\n    }\n\n    /**\n     * Initializes responsive layout observers.\n     */\n    afterDraw() {\n        this.onSlotChange = () => {\n            this._breadcrumbState = new WeakMap();\n            this.scheduleResponsiveLayout();\n        };\n        this.startSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.endSlot?.addEventListener('slotchange', this.onSlotChange);\n\n        if (typeof ResizeObserver === 'function') {\n            this._resizeObserver = new ResizeObserver(() => this.scheduleResponsiveLayout());\n            this._resizeObserver.observe(this.native || this);\n        }\n\n        this.scheduleResponsiveLayout();\n    }\n\n    /**\n     * Cleans up responsive layout observers.\n     */\n    afterDisconnect() {\n        this.startSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this.endSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this._resizeObserver?.disconnect();\n\n        if (this._responsiveFrame) {\n            cancelAnimationFrame(this._responsiveFrame);\n            this._responsiveFrame = null;\n        }\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    /**\n     * Schedules responsive layout recalculation.\n     */\n    scheduleResponsiveLayout() {\n        if (this._responsiveFrame) return;\n\n        this._responsiveFrame = requestAnimationFrame(() => {\n            this._responsiveFrame = null;\n            this.updateResponsiveLayout();\n        });\n    }\n\n    /**\n     * Updates slotted breadcrumbs and actions to fit the toolbar width.\n     * @returns {Promise<void>}\n     */\n    async updateResponsiveLayout() {\n        const action = this.getToolbarAction();\n        const breadcrumbs = this.getBreadcrumbs();\n        const isSelfManagedAction = this.isSelfManagedAction(action);\n        const isSelfManagedBreadcrumbs = this.isSelfManagedBreadcrumbs(breadcrumbs, action);\n\n        if (!this.native || (!action && !breadcrumbs)) return;\n\n        const toolbarWidth = this.native.getBoundingClientRect().width;\n        if (!toolbarWidth) return;\n\n        const actionMetrics = action && !isSelfManagedAction ? action.measureActionMetrics?.() : null;\n        const breadcrumbMetrics =\n            breadcrumbs && !isSelfManagedBreadcrumbs\n                ? await this.measureBreadcrumbs(breadcrumbs)\n                : null;\n\n        let visibleActions = actionMetrics?.count || 0;\n        let compactBreadcrumbs = false;\n\n        if (actionMetrics && breadcrumbMetrics) {\n            for (let count = actionMetrics.count; count >= 0; count--) {\n                const actionWidth = actionMetrics.getWidthForCount(count);\n                const availableBreadcrumbWidth = toolbarWidth - actionWidth;\n\n                if (breadcrumbMetrics.fullWidth <= availableBreadcrumbWidth) {\n                    visibleActions = count;\n                    compactBreadcrumbs = false;\n                    break;\n                }\n\n                if (breadcrumbMetrics.compactWidth <= availableBreadcrumbWidth) {\n                    visibleActions = count;\n                    compactBreadcrumbs = true;\n                    break;\n                }\n\n                if (count === 0) {\n                    visibleActions = 0;\n                    compactBreadcrumbs = true;\n                }\n            }\n        } else if (actionMetrics) {\n            visibleActions = this.getVisibleActionsForWidth(actionMetrics, toolbarWidth);\n        } else if (breadcrumbMetrics) {\n            compactBreadcrumbs = breadcrumbMetrics.fullWidth > toolbarWidth;\n        }\n\n        if (isSelfManagedAction) {\n            this.clearVisibleActions(action);\n        } else {\n            this.setVisibleActions(action, visibleActions);\n        }\n\n        if (!isSelfManagedBreadcrumbs) {\n            this.setBreadcrumbCompactState(breadcrumbs, compactBreadcrumbs);\n        }\n    }\n\n    /**\n     * Measures breadcrumbs in their full state.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @returns {Promise<{count: number, fullWidth: number, compactWidth: number}>}\n     */\n    async measureBreadcrumbs(breadcrumbs) {\n        const items = breadcrumbs.getBreadcrumbs?.() || [];\n        const count = items.length;\n\n        if (count === 0) {\n            return { count: 0, fullWidth: 0, compactWidth: 0 };\n        }\n\n        const cachedState = this.ensureBreadcrumbState(breadcrumbs, count);\n        if (cachedState.count === count && cachedState.fullWidth) {\n            return {\n                count,\n                fullWidth: cachedState.fullWidth,\n                compactWidth: cachedState.compactWidth,\n            };\n        }\n\n        this.setBreadcrumbMaxItems(breadcrumbs, count);\n\n        await breadcrumbs.updateComplete;\n        await this.nextFrame();\n\n        const itemWidths = items.map((item) => item.getBoundingClientRect().width);\n        const fullWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n        const state = this.ensureBreadcrumbState(breadcrumbs, count);\n        const before = Math.max(1, breadcrumbs.itemsBeforeCollapse || 1);\n        const after = Math.max(1, breadcrumbs.itemsAfterCollapse || 1);\n        const visibleBefore = itemWidths.slice(0, before).reduce((sum, width) => sum + width, 0);\n        const visibleAfter = itemWidths.slice(Math.max(count - after, before)).reduce((sum, width) => sum + width, 0);\n        const compactWidth = count > state.compactMaxItems\n            ? visibleBefore + visibleAfter + 48\n            : fullWidth;\n\n        state.count = count;\n        state.fullWidth = fullWidth;\n        state.compactWidth = compactWidth;\n\n        return { count, fullWidth, compactWidth };\n    }\n\n    /**\n     * Stores original breadcrumb settings used as responsive compact target.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @param {number} count Number of breadcrumb elements currently in the trail.\n     * @returns {{compactMaxItems: number}}\n     */\n    ensureBreadcrumbState(breadcrumbs, count) {\n        if (!this._breadcrumbState.has(breadcrumbs)) {\n            const attr = breadcrumbs.getAttribute('max-items');\n            const parsed = attr === null ? NaN : Number(attr);\n            const compactMaxItems = Number.isFinite(parsed) && parsed > 0 ? parsed : Math.min(3, count);\n\n            this._breadcrumbState.set(breadcrumbs, {\n                compactMaxItems: Math.max(1, Math.min(compactMaxItems, count)),\n            });\n        }\n\n        return this._breadcrumbState.get(breadcrumbs);\n    }\n\n    /**\n     * Applies the compact or full breadcrumb state.\n     * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.\n     * @param {boolean} compact Whether compact mode should be used.\n     */\n    setBreadcrumbCompactState(breadcrumbs, compact) {\n        if (!breadcrumbs) return;\n\n        const count = breadcrumbs.getBreadcrumbs?.().length || 0;\n        const state = this.ensureBreadcrumbState(breadcrumbs, count);\n        const nextMaxItems = compact ? state.compactMaxItems : count;\n\n        this.setBreadcrumbMaxItems(breadcrumbs, nextMaxItems);\n    }\n\n    /**\n     * Sets breadcrumb max-items only when it changed.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @param {number} value The max item count.\n     */\n    setBreadcrumbMaxItems(breadcrumbs, value) {\n        if (!breadcrumbs || !value) return;\n\n        if (+breadcrumbs.getAttribute('max-items') === value) {\n            breadcrumbs.updateCollapse?.();\n            return;\n        }\n\n        breadcrumbs.setAttribute('max-items', value);\n        breadcrumbs.updateCollapse?.();\n    }\n\n    /**\n     * Finds how many actions fit into the available width.\n     * @param {object} actionMetrics Measured action metrics.\n     * @param {number} width Available width.\n     * @returns {number}\n     */\n    getVisibleActionsForWidth(actionMetrics, width) {\n        for (let count = actionMetrics.count; count >= 0; count--) {\n            if (actionMetrics.getWidthForCount(count) <= width) return count;\n        }\n\n        return 0;\n    }\n\n    /**\n     * Applies visible action count.\n     * @param {HTMLElement|null} action Toolbar action component.\n     * @param {number} count Visible action count.\n     */\n    setVisibleActions(action, count) {\n        if (!action) return;\n\n        if (+action.getAttribute('visible-items') === count) {\n            return;\n        }\n\n        action.setAttribute('visible-items', count);\n        action.applyOverflow?.();\n    }\n\n    /**\n     * Clears toolbar-managed visible action state when actions manage themselves.\n     * @param {HTMLElement|null} action Toolbar action component.\n     */\n    clearVisibleActions(action) {\n        if (!action?.hasAttribute?.('visible-items')) return;\n\n        action.removeAttribute('visible-items');\n    }\n\n    /**\n     * Returns the slotted toolbar action.\n     * @returns {HTMLElement|null}\n     */\n    getToolbarAction() {\n        return this.endSlot?.assignedElements?.().find((el) => el.tagName?.toLowerCase() === 'wje-toolbar-action') || null;\n    }\n\n    /**\n     * Returns the slotted breadcrumbs.\n     * @returns {HTMLElement|null}\n     */\n    getBreadcrumbs() {\n        return this.startSlot?.assignedElements?.().find((el) => el.tagName?.toLowerCase() === 'wje-breadcrumbs') || null;\n    }\n\n    /**\n     * Returns whether toolbar actions are managed by their own breakpoint logic.\n     * @param {HTMLElement|null} action Toolbar action component.\n     * @returns {boolean}\n     */\n    isSelfManagedAction(action) {\n        return !!action?.getAttribute?.('breakpoint');\n    }\n\n    /**\n     * Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n     * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.\n     * @returns {boolean}\n     */\n    isSelfManagedBreadcrumbs(breadcrumbs, action) {\n        return (\n            !!breadcrumbs?.getAttribute('breakpoint') ||\n            (breadcrumbs?.hasAttribute?.('max-items') && !!action?.getExistingDropdown?.())\n        );\n    }\n\n    /**\n     * Waits for one animation frame.\n     * @returns {Promise<void>}\n     */\n    nextFrame() {\n        return new Promise((resolve) => requestAnimationFrame(resolve));\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":["_a"],"mappings":"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"}
+{"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-margin-block=0] - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value.\n * @cssproperty [--wje-toolbar-margin-inline=0] - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value.\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        this._breadcrumbState = new WeakMap();\n        this._responsiveFrame = null;\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        this.native = native;\n        this.startSlot = start;\n        this.endSlot = end;\n\n        return fragment;\n    }\n\n    /**\n     * Initializes responsive layout observers.\n     */\n    afterDraw() {\n        this.onSlotChange = () => {\n            this._breadcrumbState = new WeakMap();\n            this.scheduleResponsiveLayout();\n        };\n        this.startSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.endSlot?.addEventListener('slotchange', this.onSlotChange);\n\n        if (typeof ResizeObserver === 'function') {\n            this._resizeObserver = new ResizeObserver(() => this.scheduleResponsiveLayout());\n            this._resizeObserver.observe(this.native || this);\n        }\n\n        this.scheduleResponsiveLayout();\n    }\n\n    /**\n     * Cleans up responsive layout observers.\n     */\n    afterDisconnect() {\n        this.startSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this.endSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this._resizeObserver?.disconnect();\n\n        if (this._responsiveFrame) {\n            cancelAnimationFrame(this._responsiveFrame);\n            this._responsiveFrame = null;\n        }\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    /**\n     * Schedules responsive layout recalculation.\n     */\n    scheduleResponsiveLayout() {\n        if (this._responsiveFrame) return;\n\n        this._responsiveFrame = requestAnimationFrame(() => {\n            this._responsiveFrame = null;\n            this.updateResponsiveLayout();\n        });\n    }\n\n    /**\n     * Updates slotted breadcrumbs and actions to fit the toolbar width.\n     * @returns {Promise<void>}\n     */\n    async updateResponsiveLayout() {\n        const action = this.getToolbarAction();\n        const breadcrumbs = this.getBreadcrumbs();\n        const isSelfManagedAction = this.isSelfManagedAction(action);\n        const isSelfManagedBreadcrumbs = this.isSelfManagedBreadcrumbs(breadcrumbs, action);\n\n        if (!this.native || (!action && !breadcrumbs)) return;\n\n        const toolbarWidth = this.native.getBoundingClientRect().width;\n        if (!toolbarWidth) return;\n\n        const actionMetrics = action && !isSelfManagedAction ? action.measureActionMetrics?.() : null;\n        const breadcrumbMetrics =\n            breadcrumbs && !isSelfManagedBreadcrumbs\n                ? await this.measureBreadcrumbs(breadcrumbs)\n                : null;\n\n        let visibleActions = actionMetrics?.count || 0;\n        let compactBreadcrumbs = false;\n\n        if (actionMetrics && breadcrumbMetrics) {\n            for (let count = actionMetrics.count; count >= 0; count--) {\n                const actionWidth = actionMetrics.getWidthForCount(count);\n                const availableBreadcrumbWidth = toolbarWidth - actionWidth;\n\n                if (breadcrumbMetrics.fullWidth <= availableBreadcrumbWidth) {\n                    visibleActions = count;\n                    compactBreadcrumbs = false;\n                    break;\n                }\n\n                if (breadcrumbMetrics.compactWidth <= availableBreadcrumbWidth) {\n                    visibleActions = count;\n                    compactBreadcrumbs = true;\n                    break;\n                }\n\n                if (count === 0) {\n                    visibleActions = 0;\n                    compactBreadcrumbs = true;\n                }\n            }\n        } else if (actionMetrics) {\n            visibleActions = this.getVisibleActionsForWidth(actionMetrics, toolbarWidth);\n        } else if (breadcrumbMetrics) {\n            compactBreadcrumbs = breadcrumbMetrics.fullWidth > toolbarWidth;\n        }\n\n        if (isSelfManagedAction) {\n            this.clearVisibleActions(action);\n        } else {\n            this.setVisibleActions(action, visibleActions);\n        }\n\n        if (!isSelfManagedBreadcrumbs) {\n            this.setBreadcrumbCompactState(breadcrumbs, compactBreadcrumbs);\n        }\n    }\n\n    /**\n     * Measures breadcrumbs in their full state.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @returns {Promise<{count: number, fullWidth: number, compactWidth: number}>}\n     */\n    async measureBreadcrumbs(breadcrumbs) {\n        const items = breadcrumbs.getBreadcrumbs?.() || [];\n        const count = items.length;\n\n        if (count === 0) {\n            return { count: 0, fullWidth: 0, compactWidth: 0 };\n        }\n\n        const cachedState = this.ensureBreadcrumbState(breadcrumbs, count);\n        if (cachedState.count === count && cachedState.fullWidth) {\n            return {\n                count,\n                fullWidth: cachedState.fullWidth,\n                compactWidth: cachedState.compactWidth,\n            };\n        }\n\n        this.setBreadcrumbMaxItems(breadcrumbs, count);\n\n        await breadcrumbs.updateComplete;\n        await this.nextFrame();\n\n        const itemWidths = items.map((item) => item.getBoundingClientRect().width);\n        const fullWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n        const state = this.ensureBreadcrumbState(breadcrumbs, count);\n        const before = Math.max(1, breadcrumbs.itemsBeforeCollapse || 1);\n        const after = Math.max(1, breadcrumbs.itemsAfterCollapse || 1);\n        const visibleBefore = itemWidths.slice(0, before).reduce((sum, width) => sum + width, 0);\n        const visibleAfter = itemWidths.slice(Math.max(count - after, before)).reduce((sum, width) => sum + width, 0);\n        const compactWidth = count > state.compactMaxItems\n            ? visibleBefore + visibleAfter + 48\n            : fullWidth;\n\n        state.count = count;\n        state.fullWidth = fullWidth;\n        state.compactWidth = compactWidth;\n\n        return { count, fullWidth, compactWidth };\n    }\n\n    /**\n     * Stores original breadcrumb settings used as responsive compact target.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @param {number} count Number of breadcrumb elements currently in the trail.\n     * @returns {{compactMaxItems: number}}\n     */\n    ensureBreadcrumbState(breadcrumbs, count) {\n        if (!this._breadcrumbState.has(breadcrumbs)) {\n            const attr = breadcrumbs.getAttribute('max-items');\n            const parsed = attr === null ? NaN : Number(attr);\n            const compactMaxItems = Number.isFinite(parsed) && parsed > 0 ? parsed : Math.min(3, count);\n\n            this._breadcrumbState.set(breadcrumbs, {\n                compactMaxItems: Math.max(1, Math.min(compactMaxItems, count)),\n            });\n        }\n\n        return this._breadcrumbState.get(breadcrumbs);\n    }\n\n    /**\n     * Applies the compact or full breadcrumb state.\n     * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.\n     * @param {boolean} compact Whether compact mode should be used.\n     */\n    setBreadcrumbCompactState(breadcrumbs, compact) {\n        if (!breadcrumbs) return;\n\n        const count = breadcrumbs.getBreadcrumbs?.().length || 0;\n        const state = this.ensureBreadcrumbState(breadcrumbs, count);\n        const nextMaxItems = compact ? state.compactMaxItems : count;\n\n        this.setBreadcrumbMaxItems(breadcrumbs, nextMaxItems);\n    }\n\n    /**\n     * Sets breadcrumb max-items only when it changed.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @param {number} value The max item count.\n     */\n    setBreadcrumbMaxItems(breadcrumbs, value) {\n        if (!breadcrumbs || !value) return;\n\n        if (+breadcrumbs.getAttribute('max-items') === value) {\n            breadcrumbs.updateCollapse?.();\n            return;\n        }\n\n        breadcrumbs.setAttribute('max-items', value);\n        breadcrumbs.updateCollapse?.();\n    }\n\n    /**\n     * Finds how many actions fit into the available width.\n     * @param {object} actionMetrics Measured action metrics.\n     * @param {number} width Available width.\n     * @returns {number}\n     */\n    getVisibleActionsForWidth(actionMetrics, width) {\n        for (let count = actionMetrics.count; count >= 0; count--) {\n            if (actionMetrics.getWidthForCount(count) <= width) return count;\n        }\n\n        return 0;\n    }\n\n    /**\n     * Applies visible action count.\n     * @param {HTMLElement|null} action Toolbar action component.\n     * @param {number} count Visible action count.\n     */\n    setVisibleActions(action, count) {\n        if (!action) return;\n\n        if (+action.getAttribute('visible-items') === count) {\n            return;\n        }\n\n        action.setAttribute('visible-items', count);\n        action.applyOverflow?.();\n    }\n\n    /**\n     * Clears toolbar-managed visible action state when actions manage themselves.\n     * @param {HTMLElement|null} action Toolbar action component.\n     */\n    clearVisibleActions(action) {\n        if (!action?.hasAttribute?.('visible-items')) return;\n\n        action.removeAttribute('visible-items');\n    }\n\n    /**\n     * Returns the slotted toolbar action.\n     * @returns {HTMLElement|null}\n     */\n    getToolbarAction() {\n        return this.endSlot?.assignedElements?.().find((el) => el.tagName?.toLowerCase() === 'wje-toolbar-action') || null;\n    }\n\n    /**\n     * Returns the slotted breadcrumbs.\n     * @returns {HTMLElement|null}\n     */\n    getBreadcrumbs() {\n        return this.startSlot?.assignedElements?.().find((el) => el.tagName?.toLowerCase() === 'wje-breadcrumbs') || null;\n    }\n\n    /**\n     * Returns whether toolbar actions are managed by their own breakpoint logic.\n     * @param {HTMLElement|null} action Toolbar action component.\n     * @returns {boolean}\n     */\n    isSelfManagedAction(action) {\n        return !!action?.getAttribute?.('breakpoint');\n    }\n\n    /**\n     * Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n     * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.\n     * @returns {boolean}\n     */\n    isSelfManagedBreadcrumbs(breadcrumbs, action) {\n        return (\n            !!breadcrumbs?.getAttribute('breakpoint') ||\n            (breadcrumbs?.hasAttribute?.('max-items') && !!action?.getExistingDropdown?.())\n        );\n    }\n\n    /**\n     * Waits for one animation frame.\n     * @returns {Promise<void>}\n     */\n    nextFrame() {\n        return new Promise((resolve) => requestAnimationFrame(resolve));\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":["_a"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -78,6 +78,8 @@
     "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:toolbar": "web-test-runner --files packages/wje-toolbar/toolbar.test.js",
+    "test:toolbar-action": "web-test-runner --files packages/wje-toolbar-action/toolbar-action.test.js",
     "test:tooltip": "web-test-runner --files packages/wje-tooltip/tooltip.test.js"
   },
   "exports": {