wj-elements 0.6.1 → 0.7.0

package/dist/wje-breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst MANAGED_ITEM_ATTRIBUTE = 'data-wje-breadcrumbs-item';\nconst MOBILE_COLLAPSED_VARIANTS = new Set(['text', 'back', 'parent-title', 'menu-title', 'sheet']);\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown.\n * @csspart container - The component's container wrapper.\n * @property {Array<{id: string|number, label: string, href?: string, icon?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use \"dropdown\" to render a menu, or \"text\", \"back\", \"parent-title\", \"menu-title\", and \"sheet\" for compact breakpoint menu layouts.\n * @attribute {string} breakpoint - The viewport breakpoint where collapsing starts.\n * @attribute {string} breakpoint-collapse - The collapse behavior used below the breakpoint. Use \"menu\" to put the whole trail into one menu.\n * @attribute {string} breakpoint-collapse-icon - Icon used by the default breakpoint menu trigger.\n * // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs 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     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n        this._isCollapsedByBreakpoint = null;\n        this._items = [];\n        this._itemRecords = [];\n        this._hasItemsValue = false;\n        this.handleManagedItemClick = (e) => this.dispatchManagedItemClick(e);\n    }\n\n    /**\n     * Sets data-driven breadcrumb items.\n     * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.\n     */\n    set items(value) {\n        const records = this.normalizeItems(value);\n\n        this._hasItemsValue = true;\n        this._items = records.map((record) => record.item);\n        this._itemRecords = records;\n\n        this.syncItems(records);\n    }\n\n    /**\n     * Gets data-driven breadcrumb items.\n     * @returns {Array}\n     */\n    get items() {\n        return this._items;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get the collapsed indicator variant.\n     * @param {string} value Collapsed indicator variant.\n     */\n    set collapsedVariant(value) {\n        if (value) this.setAttribute('collapsed-variant', value);\n        else this.removeAttribute('collapsed-variant');\n    }\n\n    /**\n     * Get the collapsed indicator variant.\n     * @returns {string}\n     */\n    get collapsedVariant() {\n        return this.getAttribute('collapsed-variant') || this.variant;\n    }\n\n    /**\n     * Gets the collapsed indicator variant as a normalized token.\n     * @returns {string}\n     */\n    get normalizedCollapsedVariant() {\n        return String(this.collapsedVariant || '').trim().toLowerCase();\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 collapse behavior used below the configured breakpoint.\n     * @param {string} value Collapse behavior.\n     */\n    set breakpointCollapse(value) {\n        if (value) this.setAttribute('breakpoint-collapse', value);\n        else this.removeAttribute('breakpoint-collapse');\n    }\n\n    /**\n     * Gets the collapse behavior used below the configured breakpoint.\n     * @returns {string}\n     */\n    get breakpointCollapse() {\n        return (this.getAttribute('breakpoint-collapse') || 'items').toLowerCase();\n    }\n\n    /**\n     * Sets the icon used by the default breakpoint menu trigger.\n     * @param {string} value Icon name.\n     */\n    set breakpointCollapseIcon(value) {\n        if (value) this.setAttribute('breakpoint-collapse-icon', value);\n        else this.removeAttribute('breakpoint-collapse-icon');\n    }\n\n    /**\n     * Gets the icon used by the default breakpoint menu trigger.\n     * @returns {string}\n     */\n    get breakpointCollapseIcon() {\n        return this.getAttribute('breakpoint-collapse-icon') || '';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        if (this.hasAttribute('items-after-collapse')) {\n            return +this.getAttribute('items-after-collapse') || 1;\n        }\n\n        const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n        return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [\n            'breakpoint',\n            'breakpoint-collapse',\n            'max-items',\n            'items-before-collapse',\n            'items-after-collapse',\n            'collapsed-variant',\n            'breakpoint-collapse-icon',\n            'variant',\n            'aria-label',\n            'aria-labelledby',\n        ];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n        this.upgradeProperty('items');\n\n        if (!this._hasItemsValue && this.hasAttribute('items')) {\n            this.items = this.getAttribute('items');\n        }\n    }\n\n    /**\n     * Handles attribute changes that affect light-DOM breadcrumb indicators.\n     * @param {string} name Updated attribute.\n     * @param {string|null} oldValue Previous value.\n     * @param {string|null} newValue Next value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n\n        if (name === 'aria-label' || name === 'aria-labelledby') {\n            this.syncAria();\n        }\n\n        if (name === 'collapsed-variant' || name === 'variant' || name === 'breakpoint-collapse' || name === 'breakpoint-collapse-icon') {\n            this.updateCollapse();\n            this.refreshCollapsedIndicators();\n        }\n    }\n\n    /**\n     * Syncs host navigation semantics while preserving user-provided names.\n     */\n    syncAria() {\n        this.setAriaState({ role: 'navigation' });\n\n        const label = this.getAttribute('aria-label');\n        const hasLabelledBy = this.hasAttribute('aria-labelledby');\n\n        if (!label && !hasLabelledBy) {\n            this.setAriaState({ label: 'Breadcrumb' });\n        } else if (hasLabelledBy && label === 'Breadcrumb') {\n            this.removeAttribute('aria-label');\n        }\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n        this.defaultSlot = element;\n\n        return fragment;\n    }\n\n    /**\n     * Updates the breadcrumb elements after they are drawn on the page.\n     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n     * if the total exceeds the specified maximum items.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.updateCollapse();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.addEventListener('click', this.handleManagedItemClick);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        if (this._itemRecords.length > 0 && this.getManagedBreadcrumbs().length === 0) {\n            this.syncItems(this._itemRecords);\n        }\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this.removeEventListener('click', this.handleManagedItemClick);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n    }\n\n    /**\n     * Upgrades properties set before the custom element definition was loaded.\n     * @param {string} property Property name.\n     */\n    upgradeProperty(property) {\n        if (!Object.prototype.hasOwnProperty.call(this, property)) return;\n\n        const value = this[property];\n        delete this[property];\n        this[property] = value;\n    }\n\n    /**\n     * Normalizes incoming item data for keyed DOM diffing.\n     * @param {Array|string|null|undefined} value Breadcrumb item data.\n     * @returns {Array<object>}\n     */\n    normalizeItems(value) {\n        let items = value;\n\n        if (typeof items === 'string') {\n            try {\n                items = JSON.parse(items);\n            } catch (e) {\n                console.warn('Invalid JSON passed to wje-breadcrumbs.items', e);\n                items = [];\n            }\n        }\n\n        if (items === null || items === undefined) return [];\n\n        if (!Array.isArray(items)) {\n            console.warn('wje-breadcrumbs.items expects an array.');\n            return [];\n        }\n\n        const usedKeys = new Set();\n\n        return items.map((item, index) => this.normalizeItem(item, index, usedKeys));\n    }\n\n    /**\n     * Normalizes a single item while preserving the original object for events.\n     * @param {object|string|number} item Source value for a breadcrumb entry.\n     * @param {number} index Position of the value in the current items array.\n     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n     * @returns {object}\n     */\n    normalizeItem(item, index, usedKeys) {\n        const isObject = item !== null && typeof item === 'object';\n        const source = isObject\n            ? item\n            : {\n                id: index,\n                label: item === null || item === undefined ? '' : String(item),\n            };\n\n        return {\n            item: source,\n            key: this.getItemKey(source, index, usedKeys),\n            index,\n            label: source.label === null || source.label === undefined ? '' : String(source.label),\n            href: source.href === null || source.href === undefined ? null : String(source.href),\n            icon: source.icon === null || source.icon === undefined || source.icon === '' ? null : String(source.icon),\n            disabled: source.disabled === true || source.disabled === '' || source.disabled === 'true' || source.disabled === 1 || source.disabled === '1',\n        };\n    }\n\n    /**\n     * Resolves a stable key for an item.\n     * @param {object} item Normalized source object used to resolve the key.\n     * @param {number} index Fallback position used when the item has no id.\n     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n     * @returns {string}\n     */\n    getItemKey(item, index, usedKeys) {\n        const baseKey = item.id === null || item.id === undefined\n            ? String(index)\n            : String(item.id);\n        let key = baseKey;\n        let suffix = 1;\n\n        while (usedKeys.has(key)) {\n            key = `${baseKey}:${suffix}`;\n            suffix += 1;\n        }\n\n        usedKeys.add(key);\n        return key;\n    }\n\n    /**\n     * Incrementally synchronizes data-driven items into light DOM breadcrumbs.\n     * @param {Array<object>} records Normalized records for the next breadcrumb trail.\n     */\n    syncItems(records) {\n        const managed = this.getManagedBreadcrumbs();\n        const managedByKey = new Map(managed.map((breadcrumb) => [breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE), breadcrumb]));\n        const nextKeys = new Set(records.map((record) => record.key));\n\n        managed.forEach((breadcrumb) => {\n            const key = breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE);\n\n            if (!nextKeys.has(key)) {\n                breadcrumb.remove();\n            }\n        });\n\n        let referenceNode = this.firstChild;\n\n        records.forEach((record, index) => {\n            let breadcrumb = managedByKey.get(record.key);\n            const signature = this.getItemStructureSignature(record);\n\n            if (breadcrumb && breadcrumb.__wjeBreadcrumbSignature !== signature) {\n                const previousBreadcrumb = breadcrumb;\n                const replacement = this.createItemElement(record, index);\n                breadcrumb.replaceWith(replacement);\n                breadcrumb = replacement;\n                if (referenceNode === previousBreadcrumb) referenceNode = breadcrumb;\n            } else if (!breadcrumb) {\n                breadcrumb = this.createItemElement(record, index);\n            } else {\n                this.updateItemElement(breadcrumb, record, index);\n            }\n\n            if (breadcrumb !== referenceNode) {\n                this.insertBefore(breadcrumb, referenceNode);\n            }\n\n            referenceNode = breadcrumb.nextSibling;\n        });\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Creates a managed breadcrumb element.\n     * @param {object} record Normalized data used to create the breadcrumb.\n     * @param {number} index Position assigned to the created breadcrumb.\n     * @returns {HTMLElement}\n     */\n    createItemElement(record, index) {\n        const breadcrumb = document.createElement('wje-breadcrumb');\n        this.updateItemElement(breadcrumb, record, index);\n\n        return breadcrumb;\n    }\n\n    /**\n     * Updates a managed breadcrumb element only where values changed.\n     * @param {HTMLElement} breadcrumb Existing managed element to update.\n     * @param {object} record Normalized data used for the next rendered state.\n     * @param {number} index Position assigned to the managed breadcrumb.\n     */\n    updateItemElement(breadcrumb, record, index) {\n        breadcrumb.__wjeBreadcrumbManaged = true;\n        breadcrumb.__wjeBreadcrumbItem = record.item;\n        breadcrumb.__wjeBreadcrumbIndex = index;\n        breadcrumb.__wjeBreadcrumbKey = record.key;\n        breadcrumb.__wjeBreadcrumbSignature = this.getItemStructureSignature(record);\n\n        if (breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE) !== record.key) {\n            breadcrumb.setAttribute(MANAGED_ITEM_ATTRIBUTE, record.key);\n        }\n\n        this.syncItemAttribute(breadcrumb, 'href', record.href);\n        this.syncItemAttribute(breadcrumb, 'aria-label', record.label || null);\n        this.syncBooleanItemAttribute(breadcrumb, 'disabled', record.disabled);\n        this.syncItemContent(breadcrumb, record);\n    }\n\n    /**\n     * Synchronizes an attribute when its value changed.\n     * @param {HTMLElement} element Element receiving the synchronized attribute.\n     * @param {string} name Attribute to add, update, or remove.\n     * @param {string|null|undefined} value Next serialized value for the attribute.\n     */\n    syncItemAttribute(element, name, value) {\n        if (value === null || value === undefined || value === false) {\n            if (element.hasAttribute(name)) element.removeAttribute(name);\n            return;\n        }\n\n        const normalizedValue = String(value);\n\n        if (element.getAttribute(name) !== normalizedValue) {\n            element.setAttribute(name, normalizedValue);\n        }\n    }\n\n    /**\n     * Synchronizes a boolean attribute.\n     * @param {HTMLElement} element Element receiving the boolean attribute.\n     * @param {string} name Boolean attribute to toggle.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncBooleanItemAttribute(element, name, isEnabled) {\n        if (isEnabled && !element.hasAttribute(name)) {\n            element.setAttribute(name, '');\n        }\n\n        if (!isEnabled && element.hasAttribute(name)) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Synchronizes slotted icon and text nodes for a managed breadcrumb.\n     * @param {HTMLElement} breadcrumb Breadcrumb element.\n     * @param {object} record Normalized item record.\n     */\n    syncItemContent(breadcrumb, record) {\n        let icon = breadcrumb.__wjeBreadcrumbIcon;\n\n        if (record.icon) {\n            if (!icon || icon.parentElement !== breadcrumb) {\n                icon = document.createElement('wje-icon');\n                icon.setAttribute('slot', 'start');\n                breadcrumb.insertBefore(icon, breadcrumb.firstChild);\n                breadcrumb.__wjeBreadcrumbIcon = icon;\n            }\n\n            if (icon.getAttribute('name') !== record.icon) {\n                icon.setAttribute('name', record.icon);\n            }\n        } else if (icon) {\n            icon.remove();\n            breadcrumb.__wjeBreadcrumbIcon = null;\n        }\n\n        let labelNode = breadcrumb.__wjeBreadcrumbLabelNode;\n\n        if (!labelNode || labelNode.parentNode !== breadcrumb) {\n            labelNode = document.createTextNode('');\n            breadcrumb.appendChild(labelNode);\n            breadcrumb.__wjeBreadcrumbLabelNode = labelNode;\n        }\n\n        if (labelNode.textContent !== record.label) {\n            labelNode.textContent = record.label;\n        }\n    }\n\n    /**\n     * Returns a small signature for structural changes that need item replacement.\n     * @param {object} record Normalized item record.\n     * @returns {string}\n     */\n    getItemStructureSignature(record) {\n        return `icon:${record.icon ? '1' : '0'}`;\n    }\n\n    /**\n     * Dispatches the data-driven item click event.\n     * @param {MouseEvent} e Original click event.\n     */\n    dispatchManagedItemClick(e) {\n        const breadcrumb = this.getManagedBreadcrumbFromEvent(e);\n        if (!breadcrumb) return;\n\n        const item = breadcrumb.__wjeBreadcrumbItem;\n\n        if (item?.disabled || breadcrumb.hasAttribute('disabled')) {\n            e.preventDefault();\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n            return;\n        }\n\n        const itemClickEvent = new CustomEvent('wje-breadcrumbs:item-click', {\n            detail: {\n                item,\n                index: breadcrumb.__wjeBreadcrumbIndex,\n                originalEvent: e,\n            },\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n\n        const shouldContinue = this.dispatchEvent(itemClickEvent);\n\n        if (!shouldContinue) {\n            e.preventDefault();\n        }\n    }\n\n    /**\n     * Finds the managed breadcrumb that originated an event.\n     * @param {Event} e Event whose composed path should be inspected.\n     * @returns {HTMLElement|null}\n     */\n    getManagedBreadcrumbFromEvent(e) {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n\n        return path.find((node) => (\n            node?.nodeType === Node.ELEMENT_NODE &&\n            node.tagName?.toLowerCase() === 'wje-breadcrumb' &&\n            node.parentElement === this &&\n            node.hasAttribute(MANAGED_ITEM_ATTRIBUTE)\n        )) || null;\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.shouldApplyBreakpointCollapse();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Recalculates breadcrumb collapse state.\n     * @returns {void}\n     */\n    updateCollapse() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n        const shouldCollapseToMenu =\n            this.isBreakpointMenuCollapseActive() &&\n            (breadcrumbs.length > 1 || this.usesMobileCollapsedVariant());\n\n        if (shouldCollapseToMenu) {\n            this.applyMenuCollapse(breadcrumbs);\n            return;\n        }\n\n        const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n        const shouldUseItemCollapse = this.breakpointCollapse === 'menu' || this._isCollapsedByBreakpoint;\n        const shouldCollapse =\n            shouldUseItemCollapse &&\n            this.maxItems > 0 &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n        const lastIndex = breadcrumbs.length - 1;\n        const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n        const collapseStart = this.itemsBeforeCollapse;\n        const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', false);\n\n            const isCollapsed =\n                shouldCollapse &&\n                index >= collapseStart &&\n                index < collapseEnd;\n\n            this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n            if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n    }\n\n    /**\n     * Collapses the whole breadcrumb trail into a single menu indicator.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    applyMenuCollapse(breadcrumbs) {\n        const lastIndex = breadcrumbs.length - 1;\n        const usesMobileVariant = this.usesMobileCollapsedVariant();\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            const isIndicator = index === 0;\n\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', isIndicator);\n            this.syncManagedAttribute(breadcrumb, 'collapsed', true);\n            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', isIndicator && usesMobileVariant);\n\n            if (isIndicator) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n    }\n\n    /**\n     * Returns whether the active breakpoint mode should move the full trail into one menu.\n     * @returns {boolean}\n     */\n    isBreakpointMenuCollapseActive() {\n        return Boolean(\n            this.getBreakpointWidth() &&\n            this._isCollapsedByBreakpoint &&\n            this.breakpointCollapse === 'menu'\n        );\n    }\n\n    /**\n     * Returns whether the active collapsed variant is one of the mobile compact layouts.\n     * @returns {boolean}\n     */\n    usesMobileCollapsedVariant() {\n        return MOBILE_COLLAPSED_VARIANTS.has(this.normalizedCollapsedVariant);\n    }\n\n    /**\n     * Clears attributes/classes managed by the collapse algorithm.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n        breadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.removeAttribute('collapsed');\n            breadcrumb.removeAttribute('show-collapsed-indicator');\n            breadcrumb.removeAttribute('mobile-collapsed-indicator');\n            breadcrumb.removeAttribute('last');\n            breadcrumb.classList.remove('collapsed');\n        });\n    }\n\n    /**\n     * Applies a managed boolean attribute only when its value truly changes.\n     * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n     * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncManagedAttribute(element, name, isEnabled) {\n        if (!element) return;\n\n        const hasAttribute = element.hasAttribute(name);\n\n        if (isEnabled && !hasAttribute) {\n            element.setAttribute(name, true);\n        }\n\n        if (!isEnabled && hasAttribute) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Redraws active collapsed indicators when parent-only rendering inputs change.\n     */\n    refreshCollapsedIndicators() {\n        this.getBreadcrumbs()\n            .filter((breadcrumb) => breadcrumb.hasAttribute('show-collapsed-indicator'))\n            .forEach((breadcrumb) => breadcrumb.refresh?.());\n    }\n\n    /**\n     * Returns whether collapse rules should currently be applied.\n     * @returns {boolean}\n     */\n    shouldApplyBreakpointCollapse() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return true;\n\n        return window.innerWidth < breakpointWidth;\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-breadcrumbs-breakpoint-${token}`).trim();\n        const namedBreakpoint = Breadcrumbs.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     * Returns the custom trigger element configured for breakpoint menu collapse.\n     * @returns {Element|null}\n     */\n    getBreakpointCollapseTrigger() {\n        return Array.from(this.children)\n            .find((child) => child.getAttribute?.('slot') === 'breakpoint-collapse-trigger') || null;\n    }\n\n    /**\n     * Retrieves all breadcrumb elements within the current instance.\n     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n\n    /**\n     * Retrieves breadcrumbs managed by the items property.\n     * @returns {Array<Element>}\n     */\n    getManagedBreadcrumbs() {\n        return Array.from(this.querySelectorAll(`wje-breadcrumb[${MANAGED_ITEM_ATTRIBUTE}]`)) || [];\n    }\n\n    /**\n     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n     */\n    getBreadcrumbsCollapsed() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst MANAGED_ITEM_ATTRIBUTE = 'data-wje-breadcrumbs-item';\nconst MOBILE_COLLAPSED_VARIANTS = new Set(['text', 'back', 'parent-title', 'menu-title', 'sheet']);\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown.\n * @csspart container - The component's container wrapper.\n * @property {Array<{id: string|number, label: string, href?: string, icon?: string, title?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use \"dropdown\" to render a menu, or \"text\", \"back\", \"parent-title\", \"menu-title\", and \"sheet\" for compact breakpoint menu layouts.\n * @attribute {string} breakpoint - The viewport breakpoint where collapsing starts.\n * @attribute {string} breakpoint-collapse - The collapse behavior used below the breakpoint. Use \"menu\" to put the whole trail into one menu.\n * @attribute {string} breakpoint-collapse-icon - Icon used by the default breakpoint menu trigger.\n * // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs 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     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n        this._isCollapsedByBreakpoint = null;\n        this._items = [];\n        this._itemRecords = [];\n        this._hasItemsValue = false;\n        this.handleManagedItemClick = (e) => this.dispatchManagedItemClick(e);\n    }\n\n    /**\n     * Sets data-driven breadcrumb items.\n     * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.\n     */\n    set items(value) {\n        const records = this.normalizeItems(value);\n\n        this._hasItemsValue = true;\n        this._items = records.map((record) => record.item);\n        this._itemRecords = records;\n\n        this.syncItems(records);\n    }\n\n    /**\n     * Gets data-driven breadcrumb items.\n     * @returns {Array}\n     */\n    get items() {\n        return this._items;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get the collapsed indicator variant.\n     * @param {string} value Collapsed indicator variant.\n     */\n    set collapsedVariant(value) {\n        if (value) this.setAttribute('collapsed-variant', value);\n        else this.removeAttribute('collapsed-variant');\n    }\n\n    /**\n     * Get the collapsed indicator variant.\n     * @returns {string}\n     */\n    get collapsedVariant() {\n        return this.getAttribute('collapsed-variant') || this.variant;\n    }\n\n    /**\n     * Gets the collapsed indicator variant as a normalized token.\n     * @returns {string}\n     */\n    get normalizedCollapsedVariant() {\n        return String(this.collapsedVariant || '').trim().toLowerCase();\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 collapse behavior used below the configured breakpoint.\n     * @param {string} value Collapse behavior.\n     */\n    set breakpointCollapse(value) {\n        if (value) this.setAttribute('breakpoint-collapse', value);\n        else this.removeAttribute('breakpoint-collapse');\n    }\n\n    /**\n     * Gets the collapse behavior used below the configured breakpoint.\n     * @returns {string}\n     */\n    get breakpointCollapse() {\n        return (this.getAttribute('breakpoint-collapse') || 'items').toLowerCase();\n    }\n\n    /**\n     * Sets the icon used by the default breakpoint menu trigger.\n     * @param {string} value Icon name.\n     */\n    set breakpointCollapseIcon(value) {\n        if (value) this.setAttribute('breakpoint-collapse-icon', value);\n        else this.removeAttribute('breakpoint-collapse-icon');\n    }\n\n    /**\n     * Gets the icon used by the default breakpoint menu trigger.\n     * @returns {string}\n     */\n    get breakpointCollapseIcon() {\n        return this.getAttribute('breakpoint-collapse-icon') || '';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        if (this.hasAttribute('items-after-collapse')) {\n            return +this.getAttribute('items-after-collapse') || 1;\n        }\n\n        const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n        return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [\n            'breakpoint',\n            'breakpoint-collapse',\n            'max-items',\n            'items-before-collapse',\n            'items-after-collapse',\n            'collapsed-variant',\n            'breakpoint-collapse-icon',\n            'variant',\n            'aria-label',\n            'aria-labelledby',\n        ];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n        this.upgradeProperty('items');\n\n        if (!this._hasItemsValue && this.hasAttribute('items')) {\n            this.items = this.getAttribute('items');\n        }\n    }\n\n    /**\n     * Handles attribute changes that affect light-DOM breadcrumb indicators.\n     * @param {string} name Updated attribute.\n     * @param {string|null} oldValue Previous value.\n     * @param {string|null} newValue Next value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n\n        if (name === 'aria-label' || name === 'aria-labelledby') {\n            this.syncAria();\n        }\n\n        if (name === 'collapsed-variant' || name === 'variant' || name === 'breakpoint-collapse' || name === 'breakpoint-collapse-icon') {\n            this.updateCollapse();\n            this.refreshCollapsedIndicators();\n        }\n    }\n\n    /**\n     * Syncs host navigation semantics while preserving user-provided names.\n     */\n    syncAria() {\n        this.setAriaState({ role: 'navigation' });\n\n        const label = this.getAttribute('aria-label');\n        const hasLabelledBy = this.hasAttribute('aria-labelledby');\n\n        if (!label && !hasLabelledBy) {\n            this.setAriaState({ label: 'Breadcrumb' });\n        } else if (hasLabelledBy && label === 'Breadcrumb') {\n            this.removeAttribute('aria-label');\n        }\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n        this.defaultSlot = element;\n\n        return fragment;\n    }\n\n    /**\n     * Updates the breadcrumb elements after they are drawn on the page.\n     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n     * if the total exceeds the specified maximum items.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.updateCollapse();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.addEventListener('click', this.handleManagedItemClick);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        if (this._itemRecords.length > 0 && this.getManagedBreadcrumbs().length === 0) {\n            this.syncItems(this._itemRecords);\n        }\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this.removeEventListener('click', this.handleManagedItemClick);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n    }\n\n    /**\n     * Upgrades properties set before the custom element definition was loaded.\n     * @param {string} property Property name.\n     */\n    upgradeProperty(property) {\n        if (!Object.prototype.hasOwnProperty.call(this, property)) return;\n\n        const value = this[property];\n        delete this[property];\n        this[property] = value;\n    }\n\n    /**\n     * Normalizes incoming item data for keyed DOM diffing.\n     * @param {Array|string|null|undefined} value Breadcrumb item data.\n     * @returns {Array<object>}\n     */\n    normalizeItems(value) {\n        let items = value;\n\n        if (typeof items === 'string') {\n            try {\n                items = JSON.parse(items);\n            } catch (e) {\n                console.warn('Invalid JSON passed to wje-breadcrumbs.items', e);\n                items = [];\n            }\n        }\n\n        if (items === null || items === undefined) return [];\n\n        if (!Array.isArray(items)) {\n            console.warn('wje-breadcrumbs.items expects an array.');\n            return [];\n        }\n\n        const usedKeys = new Set();\n\n        return items.map((item, index) => this.normalizeItem(item, index, usedKeys));\n    }\n\n    /**\n     * Normalizes a single item while preserving the original object for events.\n     * @param {object|string|number} item Source value for a breadcrumb entry.\n     * @param {number} index Position of the value in the current items array.\n     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n     * @returns {object}\n     */\n    normalizeItem(item, index, usedKeys) {\n        const isObject = item !== null && typeof item === 'object';\n        const source = isObject\n            ? item\n            : {\n                id: index,\n                label: item === null || item === undefined ? '' : String(item),\n            };\n\n        return {\n            item: source,\n            key: this.getItemKey(source, index, usedKeys),\n            index,\n            label: source.label === null || source.label === undefined ? '' : String(source.label),\n            href: source.href === null || source.href === undefined ? null : String(source.href),\n            icon: source.icon === null || source.icon === undefined || source.icon === '' ? null : String(source.icon),\n            title: source.title === null || source.title === undefined ? null : String(source.title),\n            disabled: source.disabled === true || source.disabled === '' || source.disabled === 'true' || source.disabled === 1 || source.disabled === '1',\n        };\n    }\n\n    /**\n     * Resolves a stable key for an item.\n     * @param {object} item Normalized source object used to resolve the key.\n     * @param {number} index Fallback position used when the item has no id.\n     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n     * @returns {string}\n     */\n    getItemKey(item, index, usedKeys) {\n        const baseKey = item.id === null || item.id === undefined\n            ? String(index)\n            : String(item.id);\n        let key = baseKey;\n        let suffix = 1;\n\n        while (usedKeys.has(key)) {\n            key = `${baseKey}:${suffix}`;\n            suffix += 1;\n        }\n\n        usedKeys.add(key);\n        return key;\n    }\n\n    /**\n     * Incrementally synchronizes data-driven items into light DOM breadcrumbs.\n     * @param {Array<object>} records Normalized records for the next breadcrumb trail.\n     */\n    syncItems(records) {\n        const managed = this.getManagedBreadcrumbs();\n        const managedByKey = new Map(managed.map((breadcrumb) => [breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE), breadcrumb]));\n        const nextKeys = new Set(records.map((record) => record.key));\n\n        managed.forEach((breadcrumb) => {\n            const key = breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE);\n\n            if (!nextKeys.has(key)) {\n                breadcrumb.remove();\n            }\n        });\n\n        let referenceNode = this.firstChild;\n\n        records.forEach((record, index) => {\n            let breadcrumb = managedByKey.get(record.key);\n            const signature = this.getItemStructureSignature(record);\n\n            if (breadcrumb && breadcrumb.__wjeBreadcrumbSignature !== signature) {\n                const previousBreadcrumb = breadcrumb;\n                const replacement = this.createItemElement(record, index);\n                breadcrumb.replaceWith(replacement);\n                breadcrumb = replacement;\n                if (referenceNode === previousBreadcrumb) referenceNode = breadcrumb;\n            } else if (!breadcrumb) {\n                breadcrumb = this.createItemElement(record, index);\n            } else {\n                this.updateItemElement(breadcrumb, record, index);\n            }\n\n            if (breadcrumb !== referenceNode) {\n                this.insertBefore(breadcrumb, referenceNode);\n            }\n\n            referenceNode = breadcrumb.nextSibling;\n        });\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Creates a managed breadcrumb element.\n     * @param {object} record Normalized data used to create the breadcrumb.\n     * @param {number} index Position assigned to the created breadcrumb.\n     * @returns {HTMLElement}\n     */\n    createItemElement(record, index) {\n        const breadcrumb = document.createElement('wje-breadcrumb');\n        this.updateItemElement(breadcrumb, record, index);\n\n        return breadcrumb;\n    }\n\n    /**\n     * Updates a managed breadcrumb element only where values changed.\n     * @param {HTMLElement} breadcrumb Existing managed element to update.\n     * @param {object} record Normalized data used for the next rendered state.\n     * @param {number} index Position assigned to the managed breadcrumb.\n     */\n    updateItemElement(breadcrumb, record, index) {\n        breadcrumb.__wjeBreadcrumbManaged = true;\n        breadcrumb.__wjeBreadcrumbItem = record.item;\n        breadcrumb.__wjeBreadcrumbIndex = index;\n        breadcrumb.__wjeBreadcrumbKey = record.key;\n        breadcrumb.__wjeBreadcrumbSignature = this.getItemStructureSignature(record);\n\n        if (breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE) !== record.key) {\n            breadcrumb.setAttribute(MANAGED_ITEM_ATTRIBUTE, record.key);\n        }\n\n        this.syncItemAttribute(breadcrumb, 'href', record.href);\n        this.syncItemAttribute(breadcrumb, 'title', record.title);\n        this.syncItemAttribute(breadcrumb, 'aria-label', record.label || null);\n        this.syncBooleanItemAttribute(breadcrumb, 'disabled', record.disabled);\n        this.syncItemContent(breadcrumb, record);\n    }\n\n    /**\n     * Synchronizes an attribute when its value changed.\n     * @param {HTMLElement} element Element receiving the synchronized attribute.\n     * @param {string} name Attribute to add, update, or remove.\n     * @param {string|null|undefined} value Next serialized value for the attribute.\n     */\n    syncItemAttribute(element, name, value) {\n        if (value === null || value === undefined || value === false) {\n            if (element.hasAttribute(name)) element.removeAttribute(name);\n            return;\n        }\n\n        const normalizedValue = String(value);\n\n        if (element.getAttribute(name) !== normalizedValue) {\n            element.setAttribute(name, normalizedValue);\n        }\n    }\n\n    /**\n     * Synchronizes a boolean attribute.\n     * @param {HTMLElement} element Element receiving the boolean attribute.\n     * @param {string} name Boolean attribute to toggle.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncBooleanItemAttribute(element, name, isEnabled) {\n        if (isEnabled && !element.hasAttribute(name)) {\n            element.setAttribute(name, '');\n        }\n\n        if (!isEnabled && element.hasAttribute(name)) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Synchronizes slotted icon and text nodes for a managed breadcrumb.\n     * @param {HTMLElement} breadcrumb Breadcrumb element.\n     * @param {object} record Normalized item record.\n     */\n    syncItemContent(breadcrumb, record) {\n        let icon = breadcrumb.__wjeBreadcrumbIcon;\n\n        if (record.icon) {\n            if (!icon || icon.parentElement !== breadcrumb) {\n                icon = document.createElement('wje-icon');\n                icon.setAttribute('slot', 'start');\n                breadcrumb.insertBefore(icon, breadcrumb.firstChild);\n                breadcrumb.__wjeBreadcrumbIcon = icon;\n            }\n\n            if (icon.getAttribute('name') !== record.icon) {\n                icon.setAttribute('name', record.icon);\n            }\n        } else if (icon) {\n            icon.remove();\n            breadcrumb.__wjeBreadcrumbIcon = null;\n        }\n\n        let labelNode = breadcrumb.__wjeBreadcrumbLabelNode;\n\n        if (!labelNode || labelNode.parentNode !== breadcrumb) {\n            labelNode = document.createTextNode('');\n            breadcrumb.appendChild(labelNode);\n            breadcrumb.__wjeBreadcrumbLabelNode = labelNode;\n        }\n\n        if (labelNode.textContent !== record.label) {\n            labelNode.textContent = record.label;\n        }\n    }\n\n    /**\n     * Returns a small signature for structural changes that need item replacement.\n     * @param {object} record Normalized item record.\n     * @returns {string}\n     */\n    getItemStructureSignature(record) {\n        return `icon:${record.icon ? '1' : '0'}`;\n    }\n\n    /**\n     * Dispatches the data-driven item click event.\n     * @param {MouseEvent} e Original click event.\n     */\n    dispatchManagedItemClick(e) {\n        const breadcrumb = this.getManagedBreadcrumbFromEvent(e);\n        if (!breadcrumb) return;\n\n        const item = breadcrumb.__wjeBreadcrumbItem;\n\n        if (item?.disabled || breadcrumb.hasAttribute('disabled')) {\n            e.preventDefault();\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n            return;\n        }\n\n        const itemClickEvent = new CustomEvent('wje-breadcrumbs:item-click', {\n            detail: {\n                item,\n                index: breadcrumb.__wjeBreadcrumbIndex,\n                originalEvent: e,\n            },\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n\n        const shouldContinue = this.dispatchEvent(itemClickEvent);\n\n        if (!shouldContinue) {\n            e.preventDefault();\n        }\n    }\n\n    /**\n     * Finds the managed breadcrumb that originated an event.\n     * @param {Event} e Event whose composed path should be inspected.\n     * @returns {HTMLElement|null}\n     */\n    getManagedBreadcrumbFromEvent(e) {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n\n        return path.find((node) => (\n            node?.nodeType === Node.ELEMENT_NODE &&\n            node.tagName?.toLowerCase() === 'wje-breadcrumb' &&\n            node.parentElement === this &&\n            node.hasAttribute(MANAGED_ITEM_ATTRIBUTE)\n        )) || null;\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.shouldApplyBreakpointCollapse();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Recalculates breadcrumb collapse state.\n     * @returns {void}\n     */\n    updateCollapse() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n        const shouldCollapseToMenu =\n            this.isBreakpointMenuCollapseActive() &&\n            (breadcrumbs.length > 1 || this.usesMobileCollapsedVariant());\n\n        if (shouldCollapseToMenu) {\n            this.applyMenuCollapse(breadcrumbs);\n            return;\n        }\n\n        const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n        const shouldUseItemCollapse = this.breakpointCollapse === 'menu' || this._isCollapsedByBreakpoint;\n        const shouldCollapse =\n            shouldUseItemCollapse &&\n            this.maxItems > 0 &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n        const lastIndex = breadcrumbs.length - 1;\n        const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n        const collapseStart = this.itemsBeforeCollapse;\n        const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', false);\n\n            const isCollapsed =\n                shouldCollapse &&\n                index >= collapseStart &&\n                index < collapseEnd;\n\n            this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n            if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n\n        this.refreshCollapsedIndicators();\n    }\n\n    /**\n     * Collapses the whole breadcrumb trail into a single menu indicator.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    applyMenuCollapse(breadcrumbs) {\n        const lastIndex = breadcrumbs.length - 1;\n        const usesMobileVariant = this.usesMobileCollapsedVariant();\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            const isIndicator = index === 0;\n\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', isIndicator);\n            this.syncManagedAttribute(breadcrumb, 'collapsed', true);\n            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', isIndicator && usesMobileVariant);\n\n            if (isIndicator) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n\n        this.refreshCollapsedIndicators();\n    }\n\n    /**\n     * Returns whether the active breakpoint mode should move the full trail into one menu.\n     * @returns {boolean}\n     */\n    isBreakpointMenuCollapseActive() {\n        return Boolean(\n            this.getBreakpointWidth() &&\n            this._isCollapsedByBreakpoint &&\n            this.breakpointCollapse === 'menu'\n        );\n    }\n\n    /**\n     * Returns whether the active collapsed variant is one of the mobile compact layouts.\n     * @returns {boolean}\n     */\n    usesMobileCollapsedVariant() {\n        return MOBILE_COLLAPSED_VARIANTS.has(this.normalizedCollapsedVariant);\n    }\n\n    /**\n     * Clears attributes/classes managed by the collapse algorithm.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n        breadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.removeAttribute('collapsed');\n            breadcrumb.removeAttribute('show-collapsed-indicator');\n            breadcrumb.removeAttribute('mobile-collapsed-indicator');\n            breadcrumb.removeAttribute('last');\n            breadcrumb.classList.remove('collapsed');\n        });\n    }\n\n    /**\n     * Applies a managed boolean attribute only when its value truly changes.\n     * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n     * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncManagedAttribute(element, name, isEnabled) {\n        if (!element) return;\n\n        const hasAttribute = element.hasAttribute(name);\n\n        if (isEnabled && !hasAttribute) {\n            element.setAttribute(name, true);\n        }\n\n        if (!isEnabled && hasAttribute) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Redraws active collapsed indicators when parent-only rendering inputs change.\n     */\n    refreshCollapsedIndicators() {\n        this.getBreadcrumbs()\n            .filter((breadcrumb) => breadcrumb.hasAttribute('show-collapsed-indicator'))\n            .forEach((breadcrumb) => breadcrumb.refresh?.());\n    }\n\n    /**\n     * Returns whether collapse rules should currently be applied.\n     * @returns {boolean}\n     */\n    shouldApplyBreakpointCollapse() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return true;\n\n        return window.innerWidth < breakpointWidth;\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-breadcrumbs-breakpoint-${token}`).trim();\n        const namedBreakpoint = Breadcrumbs.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     * Returns the custom trigger element configured for breakpoint menu collapse.\n     * @returns {Element|null}\n     */\n    getBreakpointCollapseTrigger() {\n        return Array.from(this.children)\n            .find((child) => child.getAttribute?.('slot') === 'breakpoint-collapse-trigger') || null;\n    }\n\n    /**\n     * Retrieves all breadcrumb elements within the current instance.\n     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n\n    /**\n     * Retrieves breadcrumbs managed by the items property.\n     * @returns {Array<Element>}\n     */\n    getManagedBreadcrumbs() {\n        return Array.from(this.querySelectorAll(`wje-breadcrumb[${MANAGED_ITEM_ATTRIBUTE}]`)) || [];\n    }\n\n    /**\n     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n     */\n    getBreadcrumbsCollapsed() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":"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"}

package/dist/wje-dropdown.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _onMenuItemCustom;
 import WJElement from "./wje-element.js";
-import { P as Popup } from "./popup.element-B1HZhDZJ.js";
+import { P as Popup } from "./popup.element-CwXvVFK7.js";
 import { event } from "./event.js";
 const _Dropdown = class _Dropdown extends WJElement {
   /**
@@ -183,12 +183,32 @@ const _Dropdown = class _Dropdown extends WJElement {
   get trigger() {
     return this.getAttribute("trigger") || "click";
   }
+  set mobilePresentation(value) {
+    if (value) {
+      this.setAttribute("mobile-presentation", value);
+    } else {
+      this.removeAttribute("mobile-presentation");
+    }
+  }
+  get mobilePresentation() {
+    return this.getAttribute("mobile-presentation");
+  }
+  set mobileBreakPoint(value) {
+    if (value) {
+      this.setAttribute("mobile-break-point", value);
+    } else {
+      this.removeAttribute("mobile-break-point");
+    }
+  }
+  get mobileBreakPoint() {
+    return this.getAttribute("mobile-break-point") || "768";
+  }
   /**
    * Getter for the CSS stylesheet.
    * @returns {string[]}
    */
   static get observedAttributes() {
-    return ["active"];
+    return ["active", "mobile-presentation", "mobile-break-point"];
   }
   /**
    * Sets up the attributes for the dropdown.
@@ -224,8 +244,12 @@ const _Dropdown = class _Dropdown extends WJElement {
     popup.setAttribute("placement", this.placement);
     popup.setAttribute("offset", this.offset);
     popup.setAttribute("part", "popup");
-    if (this.isPortaled)
-      popup.setAttribute("portal", this.portaled);
+    popup.setAttribute("exportparts", "native:popup-native, backdrop:backdrop");
+    if (this.mobilePresentation) {
+      popup.setAttribute("mobile-presentation", this.mobilePresentation);
+      popup.setAttribute("mobile-break-point", this.mobileBreakPoint);
+    }
+    if (this.isPortaled) popup.setAttribute("portal", this.portaled);
     popup.append(anchorSlot, slot);
     popup.setAttribute("manual", "");
     native.appendChild(popup);

package/dist/wje-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Dropdown._instanceId;\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets or removes the 'portaled' attribute on the element.\n     * When the value is truthy, the attribute 'portaled' is added to the element.\n     * When the value is falsy, the attribute 'portaled' is removed from the element.\n     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.\n     */\n    set portaled(value) {\n        if (value) {\n            this.setAttribute('portaled', value);\n        } else {\n            this.removeAttribute('portaled');\n        }\n    }\n\n    /**\n     * Getter method for the `portaled` property.\n     * Checks if the `portaled` attribute is present on the element.\n     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.\n     */\n    get portaled() {\n        return this.getAttribute('portaled') || '';\n    }\n\n    /**\n     * Checks whether the element has the 'portaled' attribute.\n     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.\n     */\n    get isPortaled() {\n        return this.hasAttribute('portaled');\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('part', 'popup');\n\n        if(this.isPortaled)\n            popup.setAttribute('portal', this.portaled);\n\n        popup.append(anchorSlot, slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        this.syncPopupOwner();\n        this.syncOwnedContentOwner();\n\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        // Close when any actionable wje-menu-item inside the popup is clicked (works across Shadow DOM via composed path)\n        event.addListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n              Array.from(this.querySelectorAll('wje-menu-item')),\n              'click',\n              'wje-menu-item:click',\n              this.onClose\n            );\n        }\n\n        this.onSlotChange = () => this.syncAria();\n        this.anchorSlot.addEventListener('slotchange', this.onSlotChange);\n\n        this.syncAria();\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n        event.removeListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n        event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n        this.anchorSlot?.removeEventListener('slotchange', this.onSlotChange);\n    }\n\n    /**\n     * Handles popup hide events and closes only the dropdown that owns the popup.\n     * This prevents nested dropdowns from collapsing their parent dropdown when the\n     * child popup is hidden.\n     * @param {Event} e The popup hide event.\n     */\n    popupHideCallback = (e) => {\n        if (this.classList.contains('active') && e.target === this) {\n            this.toggleCallback(e);\n        }\n    };\n\n    /**\n     * Assigns the current dropdown instance as the owner of its popup layers.\n     * Owner metadata is later used to resolve which dropdown should react to\n     * delegated menu-item clicks, including portaled popup content.\n     */\n    syncPopupOwner() {\n        if (!this.popup) return;\n\n        this.popup.ownerDropdown = this;\n\n        if (this.popup.native) {\n            this.popup.native.ownerDropdown = this;\n        }\n\n        if (this.popup.floatingEl) {\n            this.popup.floatingEl.ownerDropdown = this;\n        }\n    }\n\n    /**\n     * Recursively assigns owner metadata to the dropdown content subtree while\n     * leaving nested dropdown roots untouched, so each nested dropdown can keep\n     * its own ownership boundary.\n     * @param {HTMLElement} [root] The subtree root whose children should inherit this dropdown owner. Defaults to the current dropdown.\n     */\n    syncOwnedContentOwner(root = this) {\n        const children = Array.from(root.children || []);\n\n        for (const child of children) {\n            if (child.tagName === 'WJE-DROPDOWN' && child !== this) {\n                continue;\n            }\n\n            child.ownerDropdown = this;\n            this.syncOwnedContentOwner(child);\n        }\n    }\n\n    /**\n     * Resolves the dropdown that owns a clicked menu item. The lookup prefers\n     * explicit owner metadata and falls back to DOM traversal so both regular\n     * and portaled dropdown content can be scoped correctly.\n     * @param {EventTarget[]} path The composed event path.\n     * @param {HTMLElement} item The clicked menu item element.\n     * @returns {HTMLElement|null} The owning dropdown element or null when it cannot be resolved.\n     */\n    getMenuItemOwner(path, item) {\n        if (item?.ownerDropdown) return item.ownerDropdown;\n\n        if (item?.closest) {\n            const closestDropdown = item.closest('wje-dropdown');\n            if (closestDropdown) return closestDropdown;\n        }\n\n        const ownerFromPath = path.find((node) => node?.ownerDropdown)?.ownerDropdown;\n        if (ownerFromPath) return ownerFromPath;\n\n        const dropdownFromPath = path.find((node) => node?.tagName === 'WJE-DROPDOWN');\n        if (dropdownFromPath) return dropdownFromPath;\n\n        return null;\n    }\n\n    /**\n     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\n     * This works even when the menu is portaled, because we rely on the composed path.\n     */\n    onMenuItemClick = (e) => {\n        // Find nearest wje-menu-item in the composed path\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n\n        const owner = this.getMenuItemOwner(path, item);\n        if (owner && owner !== this) return;\n\n        // Ignore disabled items\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n\n        // If this item contains a nested submenu (wje-menu), it's not a leaf -> don't close yet\n        if (typeof item.querySelector === 'function' && item.querySelector('wje-menu')) return;\n\n        // Leaf item selected -> close dropdown (which calls popup.hide(true) inside onClose)\n        this.onClose();\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        if (this.classList.contains('active')) {\n            e.stopPropagation();\n            this.onClose();\n        } else {\n            e.stopPropagation();\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        this.classList.add('active');\n        this.syncAria();\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n                this.syncPopupOwner();\n\n                event.addListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = () => {\n        this.classList.remove('active');\n        this.syncAria();\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    }\n\n    /**\n     * Syncs ARIA attributes for the trigger element.\n     */\n    syncAria() {\n        const triggerEl = this.anchorSlot?.assignedElements?.({ flatten: true })?.[0];\n        if (!triggerEl) return;\n\n        const popupId = this.popup?.id || `wje-dropdown-popup-${this._instanceId}`;\n        if (this.popup && !this.popup.id) this.popup.id = popupId;\n\n        const hasMenu = !!this.querySelector('wje-menu');\n        triggerEl.setAttribute('aria-haspopup', hasMenu ? 'menu' : 'dialog');\n        triggerEl.setAttribute('aria-expanded', this.classList.contains('active') ? 'true' : 'false');\n        triggerEl.setAttribute('aria-controls', popupId);\n    }\n\n    #onMenuItemCustom = (e) => {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        if (!this.popup || !this.popup.floatingEl || !path.includes(this.popup.floatingEl)) return;\n\n        const item = path.find(n => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n        const owner = this.getMenuItemOwner(path, item);\n        if (owner && owner !== this) return;\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n        if (item.hasAttribute('has-submenu')) return; // parent; nezatváraj\n\n        // Zavri len tento dropdown. NEvolaj stopPropagation na custom evente,\n        // aby fungovali aj tvoje app-level listenery (riadok 480).\n        this.classList.remove('active');\n        this.popup.hide(true);\n    }\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @csspart popup-native - The exported native popup panel part.\n * @csspart backdrop - The exported mobile bottom sheet backdrop part.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * @property {string} mobilePresentation - Enables a responsive presentation, currently \"bottom-sheet\".\n * @property {string} mobileBreakPoint - Viewport width where the mobile presentation becomes active. Defaults to \"768\".\n * @attribute {string} mobile-presentation - Enables a responsive presentation, currently \"bottom-sheet\".\n * @attribute {string} mobile-break-point - Viewport width where the mobile presentation becomes active. Defaults to \"768\".\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @cssproperty [--wje-popup-backdrop-background=var(--wje-backdrop)] - Backdrop background used by mobile bottom sheet dropdowns.\n * @cssproperty [--wje-popup-backdrop-opacity=1] - Backdrop opacity used by mobile bottom sheet dropdowns.\n * @cssproperty [--wje-popup-mobile-background=var(--wje-select-options-background-color)] - Background of the mobile bottom sheet panel.\n * @cssproperty [--wje-popup-mobile-border-radius=var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0] - Border radius of the mobile bottom sheet panel.\n * @cssproperty [--wje-popup-mobile-box-shadow=0 -8px 32px rgba(0, 0, 0, 0.16)] - Shadow of the mobile bottom sheet panel.\n * @cssproperty [--wje-popup-mobile-max-height=90vh] - Maximum height of the mobile bottom sheet panel.\n * @cssproperty [--wje-popup-mobile-transition-duration=250ms] - Transition duration for the mobile bottom sheet and backdrop.\n * @cssproperty [--wje-popup-mobile-transition-easing=ease] - Transition easing for the mobile bottom sheet and backdrop.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Dropdown._instanceId;\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets or removes the 'portaled' attribute on the element.\n     * When the value is truthy, the attribute 'portaled' is added to the element.\n     * When the value is falsy, the attribute 'portaled' is removed from the element.\n     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.\n     */\n    set portaled(value) {\n        if (value) {\n            this.setAttribute('portaled', value);\n        } else {\n            this.removeAttribute('portaled');\n        }\n    }\n\n    /**\n     * Getter method for the `portaled` property.\n     * Checks if the `portaled` attribute is present on the element.\n     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.\n     */\n    get portaled() {\n        return this.getAttribute('portaled') || '';\n    }\n\n    /**\n     * Checks whether the element has the 'portaled' attribute.\n     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.\n     */\n    get isPortaled() {\n        return this.hasAttribute('portaled');\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    set mobilePresentation(value) {\n        if (value) {\n            this.setAttribute('mobile-presentation', value);\n        } else {\n            this.removeAttribute('mobile-presentation');\n        }\n    }\n\n    get mobilePresentation() {\n        return this.getAttribute('mobile-presentation');\n    }\n\n    set mobileBreakPoint(value) {\n        if (value) {\n            this.setAttribute('mobile-break-point', value);\n        } else {\n            this.removeAttribute('mobile-break-point');\n        }\n    }\n\n    get mobileBreakPoint() {\n        return this.getAttribute('mobile-break-point') || '768';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active', 'mobile-presentation', 'mobile-break-point'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('part', 'popup');\n        popup.setAttribute('exportparts', 'native:popup-native, backdrop:backdrop');\n\n        if (this.mobilePresentation) {\n            popup.setAttribute('mobile-presentation', this.mobilePresentation);\n            popup.setAttribute('mobile-break-point', this.mobileBreakPoint);\n        }\n\n        if (this.isPortaled) popup.setAttribute('portal', this.portaled);\n\n        popup.append(anchorSlot, slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        this.syncPopupOwner();\n        this.syncOwnedContentOwner();\n\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        // Close when any actionable wje-menu-item inside the popup is clicked (works across Shadow DOM via composed path)\n        event.addListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n                Array.from(this.querySelectorAll('wje-menu-item')),\n                'click',\n                'wje-menu-item:click',\n                this.onClose\n            );\n        }\n\n        this.onSlotChange = () => this.syncAria();\n        this.anchorSlot.addEventListener('slotchange', this.onSlotChange);\n\n        this.syncAria();\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n        event.removeListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n        event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n        this.anchorSlot?.removeEventListener('slotchange', this.onSlotChange);\n    }\n\n    /**\n     * Handles popup hide events and closes only the dropdown that owns the popup.\n     * This prevents nested dropdowns from collapsing their parent dropdown when the\n     * child popup is hidden.\n     * @param {Event} e The popup hide event.\n     */\n    popupHideCallback = (e) => {\n        if (this.classList.contains('active') && e.target === this) {\n            this.toggleCallback(e);\n        }\n    };\n\n    /**\n     * Assigns the current dropdown instance as the owner of its popup layers.\n     * Owner metadata is later used to resolve which dropdown should react to\n     * delegated menu-item clicks, including portaled popup content.\n     */\n    syncPopupOwner() {\n        if (!this.popup) return;\n\n        this.popup.ownerDropdown = this;\n\n        if (this.popup.native) {\n            this.popup.native.ownerDropdown = this;\n        }\n\n        if (this.popup.floatingEl) {\n            this.popup.floatingEl.ownerDropdown = this;\n        }\n    }\n\n    /**\n     * Recursively assigns owner metadata to the dropdown content subtree while\n     * leaving nested dropdown roots untouched, so each nested dropdown can keep\n     * its own ownership boundary.\n     * @param {HTMLElement} [root] The subtree root whose children should inherit this dropdown owner. Defaults to the current dropdown.\n     */\n    syncOwnedContentOwner(root = this) {\n        const children = Array.from(root.children || []);\n\n        for (const child of children) {\n            if (child.tagName === 'WJE-DROPDOWN' && child !== this) {\n                continue;\n            }\n\n            child.ownerDropdown = this;\n            this.syncOwnedContentOwner(child);\n        }\n    }\n\n    /**\n     * Resolves the dropdown that owns a clicked menu item. The lookup prefers\n     * explicit owner metadata and falls back to DOM traversal so both regular\n     * and portaled dropdown content can be scoped correctly.\n     * @param {EventTarget[]} path The composed event path.\n     * @param {HTMLElement} item The clicked menu item element.\n     * @returns {HTMLElement|null} The owning dropdown element or null when it cannot be resolved.\n     */\n    getMenuItemOwner(path, item) {\n        if (item?.ownerDropdown) return item.ownerDropdown;\n\n        if (item?.closest) {\n            const closestDropdown = item.closest('wje-dropdown');\n            if (closestDropdown) return closestDropdown;\n        }\n\n        const ownerFromPath = path.find((node) => node?.ownerDropdown)?.ownerDropdown;\n        if (ownerFromPath) return ownerFromPath;\n\n        const dropdownFromPath = path.find((node) => node?.tagName === 'WJE-DROPDOWN');\n        if (dropdownFromPath) return dropdownFromPath;\n\n        return null;\n    }\n\n    /**\n     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\n     * This works even when the menu is portaled, because we rely on the composed path.\n     */\n    onMenuItemClick = (e) => {\n        // Find nearest wje-menu-item in the composed path\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n\n        const owner = this.getMenuItemOwner(path, item);\n        if (owner && owner !== this) return;\n\n        // Ignore disabled items\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n\n        // If this item contains a nested submenu (wje-menu), it's not a leaf -> don't close yet\n        if (typeof item.querySelector === 'function' && item.querySelector('wje-menu')) return;\n\n        // Leaf item selected -> close dropdown (which calls popup.hide(true) inside onClose)\n        this.onClose();\n    };\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        if (this.classList.contains('active')) {\n            e.stopPropagation();\n            this.onClose();\n        } else {\n            e.stopPropagation();\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        this.classList.add('active');\n        this.syncAria();\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n                this.syncPopupOwner();\n\n                event.addListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = () => {\n        this.classList.remove('active');\n        this.syncAria();\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    };\n\n    /**\n     * Syncs ARIA attributes for the trigger element.\n     */\n    syncAria() {\n        const triggerEl = this.anchorSlot?.assignedElements?.({ flatten: true })?.[0];\n        if (!triggerEl) return;\n\n        const popupId = this.popup?.id || `wje-dropdown-popup-${this._instanceId}`;\n        if (this.popup && !this.popup.id) this.popup.id = popupId;\n\n        const hasMenu = !!this.querySelector('wje-menu');\n        triggerEl.setAttribute('aria-haspopup', hasMenu ? 'menu' : 'dialog');\n        triggerEl.setAttribute('aria-expanded', this.classList.contains('active') ? 'true' : 'false');\n        triggerEl.setAttribute('aria-controls', popupId);\n    }\n\n    #onMenuItemCustom = (e) => {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n        if (!this.popup || !this.popup.floatingEl || !path.includes(this.popup.floatingEl)) return;\n\n        const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n        if (!item) return;\n        const owner = this.getMenuItemOwner(path, item);\n        if (owner && owner !== this) return;\n        if (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return;\n        if (item.hasAttribute('has-submenu')) return; // parent; nezatváraj\n\n        // Zavri len tento dropdown. NEvolaj stopPropagation na custom evente,\n        // aby fungovali aj tvoje app-level listenery (riadok 480).\n        this.classList.remove('active');\n        this.popup.hide(true);\n    };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}

package/dist/wje-master.js

@@ -105,7 +105,7 @@ import { default as default89 } from "./wje-tooltip.js";
 import { default as default90 } from "./wje-tree.js";
 import { default as default91 } from "./wje-tree-item.js";
 import { default as default92 } from "./wje-visually-hidden.js";
-import { P } from "./popup.element-B1HZhDZJ.js";
+import { P } from "./popup.element-CwXvVFK7.js";
 const skSk = {
   code: "sk-sk",
   name: "Slovak",

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as Popup } from "./popup.element-B1HZhDZJ.js";
+import { P as Popup } from "./popup.element-CwXvVFK7.js";
 Popup.define("wje-popup", Popup);
 export {
   Popup as default

package/dist/wje-select.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _addedOptions, _htmlOptions, _portaledOptionRecords, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, focusFindInput_fn, syncOptionCheckbox_fn;
+var _addedOptions, _htmlOptions, _portaledOptionRecords, _remoteOptionsLoaded, _isRemoteOptionsLoading, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, focusFindInput_fn, syncOptionCheckbox_fn;
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 import { Localizer } from "./localize.js";
@@ -22,8 +22,8 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-B1HZhDZJ.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\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-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\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";
+import { P as Popup } from "./popup.element-CwXvVFK7.js";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    box-sizing: border-box;\n    min-width: 100%;\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\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-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\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";
 const _Select = class _Select extends FormAssociatedElement {
   constructor() {
     super();
@@ -31,6 +31,8 @@ const _Select = class _Select extends FormAssociatedElement {
     __privateAdd(this, _addedOptions, []);
     __privateAdd(this, _htmlOptions, []);
     __privateAdd(this, _portaledOptionRecords, []);
+    __privateAdd(this, _remoteOptionsLoaded, false);
+    __privateAdd(this, _isRemoteOptionsLoading, false);
     /**
      * An object representing component dependencies with their respective classes.
      * Each property in the object maps a custom component name (as a string key)
@@ -149,6 +151,8 @@ const _Select = class _Select extends FormAssociatedElement {
     });
     __privateAdd(this, _handleOptionsLoad, (e) => {
       var _a;
+      __privateSet(this, _remoteOptionsLoaded, true);
+      __privateSet(this, _isRemoteOptionsLoading, false);
       this.selectedOptions.forEach((option) => {
         this.getAllOptions().forEach((el) => {
           if (el.value === option.value) {
@@ -639,16 +643,27 @@ const _Select = class _Select extends FormAssociatedElement {
     error.setAttribute("slot", "error");
     let errorSlot = document.createElement("slot");
     errorSlot.setAttribute("name", "error");
+    const optionsElement = this.querySelector("wje-options");
+    const hasRemoteOptions = optionsElement instanceof HTMLElement;
+    if (hasRemoteOptions) {
+      __privateSet(this, _isRemoteOptionsLoading, !__privateGet(this, _remoteOptionsLoaded));
+    } else {
+      __privateSet(this, _remoteOptionsLoaded, false);
+      __privateSet(this, _isRemoteOptionsLoading, false);
+    }
     let popup = document.createElement("wje-popup");
     popup.setAttribute("placement", "bottom-start");
-    if (!this.noSize)
+    if (!this.noSize) {
       popup.setAttribute("size", "");
+      popup.contentAwareSize = true;
+      popup.style.setProperty("--wje-popup-loader-inset", "var(--wje-select-options-border-width, 1px)");
+    }
     popup.setAttribute("part", "popup");
     popup.setAttribute("offset", this.offset);
     if (this.isPortaled) {
       popup.setAttribute("portal", this.portaled);
     }
-    if ((this.lazy || this.querySelector("wje-options")) && !this._wasOppened) {
+    if (this.lazy && !this._wasOppened || hasRemoteOptions && !__privateGet(this, _remoteOptionsLoaded)) {
       popup.setAttribute("loader", "");
     } else {
       popup.removeAttribute("loader");
@@ -1096,6 +1111,8 @@ const _Select = class _Select extends FormAssociatedElement {
 _addedOptions = new WeakMap();
 _htmlOptions = new WeakMap();
 _portaledOptionRecords = new WeakMap();
+_remoteOptionsLoaded = new WeakMap();
+_isRemoteOptionsLoading = new WeakMap();
 _Select_instances = new WeakSet();
 /**
  * Processes the given item and retrieves the corresponding value from the selected options.
@@ -1134,6 +1151,10 @@ hasVisibleOptions_fn = function() {
  */
 updateEmptyState_fn = function() {
   if (!(this.emptyState instanceof HTMLElement)) return;
+  if (__privateGet(this, _isRemoteOptionsLoading)) {
+    this.emptyState.hidden = true;
+    return;
+  }
   this.emptyState.hidden = __privateMethod(this, _Select_instances, hasVisibleOptions_fn).call(this);
 };
 _applySearchFilter = new WeakMap();
@@ -1196,6 +1217,8 @@ syncOptionCheckbox_fn = function(option) {
 __publicField(_Select, "_instanceId", 0);
 __publicField(_Select, "portalStyles", `
 		[data-wje-select-portal] .options-wrapper {
+			box-sizing: border-box;
+			min-width: 100%;
 			border-width: var(--wje-select-options-border-width, 1px);
 			border-style: var(--wje-select-options-border-style, solid);
 			border-color: var(--wje-select-options-border-color, var(--wje-border-color, #dcdfe3));