@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/esm/xpl-list.entry.js

@@ -0,0 +1,394 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { T as TimerManager } from './lifecycle-Dqb1pIRo.js';
+
+let xplListItemsPropDeprecationWarned = false;
+function getListItemFromComposedPath(e) {
+    const path = e.composedPath?.() ?? [];
+    const fromPath = path.find((node) => node instanceof HTMLElement && node.tagName.toLowerCase() === 'xpl-list-item');
+    return fromPath ?? null;
+}
+const List = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemSelect = createEvent(this, "itemSelect", 7);
+        this.orderChange = createEvent(this, "orderChange", 7);
+        this.draggedItem = null;
+        this.listItems = [];
+        this.nextAutoItemIdSeq = 0;
+        this.radioName = `xpl-list-radio-${Math.random().toString(36).slice(2, 11)}`;
+        this.timers = new TimerManager();
+        this.keyboardReorderItemId = null;
+        this.reorderLiveMessage = '';
+        this.items = [];
+        this.reorderable = false;
+        this.selectable = false;
+    }
+    handleKeyboardReorderItemIdChange() {
+        this.collectListItems();
+    }
+    handleItemsChange() {
+        this.collectListItems();
+    }
+    handleReorderableChange() {
+        this.collectListItems();
+    }
+    handleSelectableChange() {
+        this.collectListItems();
+    }
+    componentWillLoad() {
+        this.collectListItems();
+        if (this.items.length > 0 && !xplListItemsPropDeprecationWarned) {
+            xplListItemsPropDeprecationWarned = true;
+            console.warn('[xpl-list] The "items" prop is deprecated. Use slot-based xpl-list-item children instead.');
+        }
+    }
+    componentDidLoad() {
+        this.collectListItems();
+    }
+    disconnectedCallback() {
+        this.timers.dispose();
+    }
+    handleKeyDown(ev) {
+        if (!this.selectable || ev.key !== 'Escape' || ev.defaultPrevented) {
+            return;
+        }
+        const listItem = getListItemFromComposedPath(ev);
+        if (!listItem || listItem.parentElement !== this.el) {
+            return;
+        }
+        const radio = listItem.querySelector('.xpl-list-item__selectable input[type="radio"]');
+        const itemEl = listItem;
+        const isFocusedSelectedRow = (radio instanceof HTMLInputElement && radio.checked) || itemEl.selected;
+        if (!isFocusedSelectedRow) {
+            return;
+        }
+        ev.preventDefault();
+        this.clearSelection();
+    }
+    handleChildItemSelect(event) {
+        if (!this.selectable) {
+            return;
+        }
+        const target = event.target;
+        if (target.tagName !== 'XPL-LIST-ITEM') {
+            return;
+        }
+        if (target.parentElement !== this.el) {
+            return;
+        }
+        this.syncSelectionFromChildDetail(event.detail);
+    }
+    handleSlotChange() {
+        this.collectListItems();
+    }
+    handleItemDragStart(event) {
+        const row = event.detail?.item;
+        if (!row || row.parentElement !== this.el) {
+            return;
+        }
+        if (this.keyboardReorderItemId !== null) {
+            this.keyboardReorderItemId = null;
+        }
+        this.draggedItem = row;
+        const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
+        wrapper?.classList.add('dragging');
+    }
+    handleItemDragEnd(event) {
+        const row = event.detail?.item;
+        if (!row || row.parentElement !== this.el) {
+            return;
+        }
+        if (this.draggedItem) {
+            const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
+            wrapper?.classList.remove('dragging');
+        }
+        this.draggedItem = null;
+    }
+    handleItemDrop(event) {
+        const dropTarget = event.detail?.item;
+        if (!dropTarget || dropTarget.parentElement !== this.el) {
+            return;
+        }
+        if (this.draggedItem && this.draggedItem.parentElement !== this.el) {
+            this.draggedItem = null;
+            return;
+        }
+        if (this.draggedItem) {
+            const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
+            wrapper?.classList.remove('dragging');
+        }
+        if (this.draggedItem && dropTarget && this.draggedItem !== dropTarget) {
+            const visibleItems = this.getVisibleListItemElements();
+            const fromIndex = visibleItems.indexOf(this.draggedItem);
+            const toIndex = visibleItems.indexOf(dropTarget);
+            if (fromIndex !== -1 && toIndex !== -1) {
+                const direction = fromIndex > toIndex ? 'up' : 'down';
+                const draggedItemId = this.getItemRowId(this.draggedItem);
+                if (direction === 'up') {
+                    this.el.insertBefore(this.draggedItem, dropTarget);
+                }
+                else {
+                    const nextVisible = this.getNextVisibleListItemAfter(dropTarget);
+                    if (nextVisible) {
+                        this.el.insertBefore(this.draggedItem, nextVisible);
+                    }
+                    else {
+                        this.el.appendChild(this.draggedItem);
+                    }
+                }
+                const orderedItemIds = this.getOrderedItemIds();
+                this.orderChange.emit({ itemId: draggedItemId, direction, orderedItemIds });
+                this.announceReorder(draggedItemId, orderedItemIds);
+                this.el.dispatchEvent(new CustomEvent('xplListReorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        itemId: draggedItemId,
+                        direction,
+                        fromIndex,
+                        toIndex,
+                        orderedItemIds,
+                    },
+                }));
+            }
+        }
+        this.draggedItem = null;
+        event.preventDefault();
+    }
+    handleItemReorder(event) {
+        event.stopPropagation();
+        const { direction, itemId, keyboardMode, exitKeyboardMode } = event.detail;
+        if (keyboardMode !== undefined) {
+            this.keyboardReorderItemId = keyboardMode ? (itemId ?? null) : null;
+        }
+        if (exitKeyboardMode) {
+            this.keyboardReorderItemId = null;
+        }
+        if (direction && itemId) {
+            const didReorder = this.performReorder(itemId, direction);
+            if (didReorder) {
+                this.el.dispatchEvent(new CustomEvent('xplListReorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        ...event.detail,
+                        orderedItemIds: this.getOrderedItemIds(),
+                    },
+                }));
+            }
+        }
+    }
+    async clearSelection() {
+        if (!this.selectable)
+            return;
+        this.collectListItems();
+        const previouslySelectedIds = [];
+        this.listItems.forEach((item) => {
+            const radio = item.querySelector('.xpl-list-item__selectable input[type="radio"]');
+            const wasChecked = radio instanceof HTMLInputElement ? radio.checked : false;
+            const hadSelectedProp = !!item.selected;
+            if (wasChecked || hadSelectedProp) {
+                const rowId = this.getItemRowId(item);
+                if (rowId) {
+                    previouslySelectedIds.push(rowId);
+                }
+            }
+        });
+        const uniqueSelectedIds = [...new Set(previouslySelectedIds)];
+        this.listItems.forEach((item) => {
+            const rowRadio = item.querySelector('.xpl-list-item__selectable input[type="radio"]');
+            if (rowRadio instanceof HTMLInputElement) {
+                rowRadio.checked = false;
+            }
+        });
+        this.listItems.forEach((item) => {
+            if (item.selected) {
+                item.selected = false;
+            }
+        });
+        uniqueSelectedIds.forEach((itemId) => {
+            this.itemSelect.emit({ itemId });
+        });
+    }
+    syncSelectionFromChildDetail(detail) {
+        this.collectListItems();
+        const selectedId = detail.itemId;
+        const hasSelectedId = selectedId != null && selectedId !== '';
+        this.listItems.forEach((item) => {
+            const rowId = this.getItemRowId(item);
+            item.selected = hasSelectedId && rowId === selectedId;
+        });
+    }
+    performReorder(itemId, direction) {
+        this.listItems = this.getVisibleListItemElements();
+        const itemIndex = this.listItems.findIndex((item) => this.getItemRowId(item) === itemId);
+        if (itemIndex === -1)
+            return false;
+        const targetIndex = direction === 'up' ? itemIndex - 1 : itemIndex + 1;
+        if (targetIndex < 0 || targetIndex >= this.listItems.length)
+            return false;
+        const item = this.listItems[itemIndex];
+        const targetItem = this.listItems[targetIndex];
+        if (direction === 'up') {
+            this.el.insertBefore(item, targetItem);
+        }
+        else {
+            const nextVisible = this.getNextVisibleListItemAfter(targetItem);
+            if (nextVisible) {
+                this.el.insertBefore(item, nextVisible);
+            }
+            else {
+                this.el.appendChild(item);
+            }
+        }
+        const orderedItemIds = this.getOrderedItemIds();
+        this.orderChange.emit({
+            itemId,
+            direction,
+            orderedItemIds,
+        });
+        this.announceReorder(itemId, orderedItemIds);
+        this.timers.requestAnimationFrame(() => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            const movedItem = this.getDirectChildListItems().find((el) => this.getItemRowId(el) === itemId);
+            const handleRoot = movedItem?.querySelector('.xpl-list-item__drag-handle');
+            const focusTarget = handleRoot?.querySelector?.('button') instanceof HTMLElement
+                ? handleRoot.querySelector('button')
+                : handleRoot;
+            if (focusTarget instanceof HTMLElement) {
+                focusTarget.focus();
+            }
+        });
+        return true;
+    }
+    getOrderedItemIds() {
+        return this.getVisibleListItemElements().map((node) => this.getItemRowId(node));
+    }
+    announceReorder(movedItemId, orderedItemIds) {
+        if (!this.reorderable || !movedItemId) {
+            return;
+        }
+        const index = orderedItemIds.indexOf(movedItemId);
+        if (index < 0) {
+            return;
+        }
+        const position = index + 1;
+        const total = orderedItemIds.length;
+        this.reorderLiveMessage = '';
+        this.timers.requestAnimationFrame(() => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.reorderLiveMessage = `Item ${movedItemId}, now position ${position} of ${total}`;
+        });
+    }
+    getDirectChildListItems() {
+        return Array.from(this.el.children).filter((n) => n.tagName.toLowerCase() === 'xpl-list-item');
+    }
+    getVisibleListItemElements() {
+        return this.getDirectChildListItems().filter((n) => !n.hasAttribute('hidden'));
+    }
+    isLegacyPropBasedRow(row) {
+        return row.item != null;
+    }
+    getNextVisibleListItemAfter(element) {
+        let n = element.nextElementSibling;
+        while (n) {
+            if (n instanceof HTMLElement &&
+                n.tagName.toLowerCase() === 'xpl-list-item' &&
+                !n.hasAttribute('hidden')) {
+                return n;
+            }
+            n = n.nextElementSibling;
+        }
+        return null;
+    }
+    collectListItems() {
+        this.listItems = this.getDirectChildListItems();
+        const usedRowIds = new Set();
+        this.listItems.forEach((item) => {
+            const taken = item.getAttribute('item-id') || item.id || (item.itemId ? String(item.itemId) : '');
+            if (taken) {
+                usedRowIds.add(taken);
+            }
+        });
+        this.listItems.forEach((item) => {
+            if (!item.hasAttribute('item-id') && !item.id) {
+                if (item.itemId) {
+                    item.setAttribute('item-id', item.itemId);
+                    usedRowIds.add(item.itemId);
+                }
+                else {
+                    let candidate;
+                    do {
+                        candidate = `item-${this.nextAutoItemIdSeq}`;
+                        this.nextAutoItemIdSeq += 1;
+                    } while (usedRowIds.has(candidate));
+                    item.setAttribute('item-id', candidate);
+                    usedRowIds.add(candidate);
+                }
+            }
+            if (this.isLegacyPropBasedRow(item)) {
+                item.removeAttribute('selectable');
+                item.removeAttribute('radio-name');
+                item.removeAttribute('reorderable');
+            }
+            else {
+                if (this.selectable) {
+                    item.setAttribute('selectable', 'true');
+                    item.setAttribute('radio-name', this.radioName);
+                }
+                else {
+                    item.removeAttribute('selectable');
+                    item.removeAttribute('radio-name');
+                }
+                if (this.reorderable) {
+                    item.setAttribute('reorderable', 'true');
+                }
+                else {
+                    item.removeAttribute('reorderable');
+                }
+            }
+            const rowId = this.getItemRowId(item);
+            if (this.isLegacyPropBasedRow(item)) {
+                item.removeAttribute('keyboard-active');
+            }
+            else if (this.keyboardReorderItemId && rowId === this.keyboardReorderItemId) {
+                item.setAttribute('keyboard-active', 'true');
+            }
+            else {
+                item.removeAttribute('keyboard-active');
+            }
+        });
+    }
+    getItemRowId(item) {
+        return item.getAttribute('item-id') || item.id || item.itemId || '';
+    }
+    render() {
+        const ariaLabelledBy = this.labelledBy?.trim() ? this.labelledBy.trim() : undefined;
+        const ariaLabel = !ariaLabelledBy && this.label?.trim() ? this.label.trim() : undefined;
+        return (h(Host, { key: '8b055baaf9acc04df19be097d0fb5bcb86c7165a', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, this.items?.map((item, index) => {
+            const legacyRowId = item.id ?? `item-${index}`;
+            return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
+        }), h("slot", { key: '103e3fb6cb29f9527b090dd9e53412528ed7b9c2' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "keyboardReorderItemId": [{
+                "handleKeyboardReorderItemIdChange": 0
+            }],
+        "items": [{
+                "handleItemsChange": 0
+            }],
+        "reorderable": [{
+                "handleReorderableChange": 0
+            }],
+        "selectable": [{
+                "handleSelectableChange": 0
+            }]
+    }; }
+};
+
+export { List as xpl_list };

package/dist/esm/xpl-main-nav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CXkZUm1c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
 
 const MainNav = class {
     constructor(hostRef) {
@@ -16,7 +16,7 @@ const MainNav = class {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: '15982141de742a1daeae5ffbb172ea18e0667e2d', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '41efe9e9a68a3a27653efee7f6ed92d7fde9e902' }, h("header", { key: '18c08d774991cd41dc3b395891d1621343a5d505', "aria-label": "Sidebar Header" }, h("slot", { key: 'b82477e1ae127d30e80ac4e82c22a5e8cbed94e4', name: "logo" }), h("slot", { key: '3841701331da0ea203c356b20098e36b67255384', name: "brand-name" })), h("div", { key: '512df331c13b69154550fe510a8887323167081e', class: "xpl-main-nav__main_section" }, h("slot", { key: '30da0851944d7ce43648efe3b22786b57079042a', name: "navigation" })), h("footer", { key: '3c58ec415052a4b7930ed8861593cb1c52bcd1f5', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'fac051cf4e6bc7635d58df0fbf9b504af244eb52', name: "footer" })))));
+        return (h(Host, { key: '936e7393a8037c6c78c7a6d5d284d9c37be2f866', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '45fd74c979b53bbd8080ca92ea15e3135d0d49ae' }, h("header", { key: 'cb692d0e90aa70bce5e09af43e54d864849f4800', "aria-label": "Sidebar Header" }, h("slot", { key: '778c33ef024895ca44616ef9655843330e3c563b', name: "logo" }), h("slot", { key: '7728db09b46999e708c46d10d5de56c65ab9a9fa', name: "brand-name" })), h("div", { key: '0376fefe7921b061f3f2fdc972aa381ed7d124a2', class: "xpl-main-nav__main_section" }, h("slot", { key: '12a61a53d6c93695d38c70d9a953fe4e37438178', name: "navigation" })), h("footer", { key: '8cd0e32231e155324c78878dcaad955ab7b3e4fb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'cdaf0bec22d3d8229441e7e036c3fcbcb244c32f', name: "footer" })))));
     }
 };
 

package/dist/esm/xpl-modal.entry.js

@@ -0,0 +1,105 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+
+let modalInstanceCount = 0;
+const Modal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.modalClosed = createEvent(this, "modalClosed", 7);
+        this.dialogElement = null;
+        this.titleId = `xpl-modal-title-${(modalInstanceCount += 1)}`;
+        this.isOpen = false;
+        this.size = 'medium';
+        this.variant = 'default';
+        this.handleDialogClose = () => {
+            this.isOpen = false;
+            this.modalClosed.emit();
+        };
+        this.handleNativeBackdropClick = (event) => {
+            const { dialogElement } = this;
+            if (!dialogElement || event.target !== dialogElement) {
+                return;
+            }
+            const rect = dialogElement.getBoundingClientRect();
+            const clickedOutsideDialog = event.clientX < rect.left ||
+                event.clientX > rect.right ||
+                event.clientY < rect.top ||
+                event.clientY > rect.bottom;
+            if (clickedOutsideDialog) {
+                this.handleDialogClose();
+            }
+        };
+    }
+    connectedCallback() {
+        this.bindDialog();
+    }
+    disconnectedCallback() {
+        this.clearCloseTimer();
+        this.unbindDialog();
+    }
+    componentDidLoad() {
+        this.bindDialog();
+    }
+    updateModalState() {
+        this.clearCloseTimer();
+        if (this.isOpen) {
+            this.openDialog();
+        }
+        else {
+            this.scheduleClose();
+        }
+    }
+    bindDialog() {
+        const dialog = this.element.querySelector('dialog');
+        if (!dialog) {
+            return;
+        }
+        this.dialogElement = dialog;
+        dialog.removeEventListener('cancel', this.handleDialogClose);
+        dialog.removeEventListener('click', this.handleNativeBackdropClick);
+        dialog.addEventListener('cancel', this.handleDialogClose);
+        dialog.addEventListener('click', this.handleNativeBackdropClick);
+        this.updateModalState();
+    }
+    unbindDialog() {
+        const dialog = this.dialogElement;
+        if (!dialog) {
+            return;
+        }
+        if (dialog.open && typeof dialog.close === 'function') {
+            dialog.close();
+        }
+        dialog.removeEventListener('cancel', this.handleDialogClose);
+        dialog.removeEventListener('click', this.handleNativeBackdropClick);
+    }
+    clearCloseTimer() {
+        if (this.closeTimerId !== undefined) {
+            clearTimeout(this.closeTimerId);
+            this.closeTimerId = undefined;
+        }
+    }
+    openDialog() {
+        if (this.dialogElement && !this.dialogElement.open) {
+            this.dialogElement.showModal?.();
+        }
+    }
+    scheduleClose() {
+        if (!this.dialogElement || typeof this.dialogElement.close !== 'function') {
+            return;
+        }
+        this.closeTimerId = setTimeout(() => {
+            this.closeTimerId = undefined;
+            this.dialogElement?.close();
+        }, 250);
+    }
+    render() {
+        return (h(Host, { key: '3194d5377b7438543a3f6e6ab41fd7c307674a28', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'dfc30ff7879364920669a1d1ebfdaea39951b966' }), h("dialog", { key: 'bfb33a8d97d17981f582768b0e34b0d167cf60cb', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}`, "aria-labelledby": this.titleId }, h("div", { key: '0b71adc30bde109aa831a28200c918a458a7da52', class: "xpl-modal__header" }, h("div", { key: '657c5aad60fa85e4285e299dcbe24209742277e6', class: "xpl-modal__title" }, h("xpl-button", { key: '2301014d0f4bd129dbbfc7b1eb242db98622f866', type: "button", class: "xpl-modal__close-button", "icon-only": true, variant: "tertiary", "aria-label": "Close modal", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'a978ff514926ca4b319c4920b2057baa50a1fb24', icon: "xmark" })), this.variant === 'warning' && (h("xpl-icon", { key: '2a1cf704d1aa75170d53ef3887a4d1e7874762fa', size: 20, icon: "triangle-warning", class: "xpl-modal__alert-icon" })), h("span", { key: 'd2bcd4c5b4596e80875eb9000ee75d592e41ce74', class: "xpl-modal__title-text", id: this.titleId }, h("slot", { key: 'cf009856b6e86bab36bc16a249ad9b3ebc09fd1c', name: "title" }))), h("div", { key: '29258401d4ec72c81a5a7e28e2365efd2227445e', class: "xpl-modal__subtitle" }, h("slot", { key: '9f749c62f55edabcec4dc5d8677ad9b45e64be50', name: "subtitle" }))), h("div", { key: 'f12dd8ee02ef7f9aeeedd0d7c7b5ffe52c24a336', class: "xpl-modal__body" }, h("slot", { key: '0a9e2d67a7842075560e1cf846e4b3d18bfe1bee', name: "body" })), h("div", { key: '720e9bf0cb5746b31b7dee9cb1ad4226eb13bf11', class: "xpl-modal__footer" }, h("slot", { key: '819ba75ee04742fb872c0345b4cc1732891856ee', name: "primary" }), h("slot", { key: 'b74d4339586fd2d863791d6cb6cd3d593a9c9785', name: "secondary" }), h("slot", { key: 'a4d437d7e9142bf91307edae5ed5dbd89e8921f0', name: "tertiary" })))));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "updateModalState": 0
+            }]
+    }; }
+};
+
+export { Modal as xpl_modal };

package/dist/esm/xpl-nav-header-menu.entry.js

@@ -0,0 +1,84 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { h as hasHostNamedSlot } from './light-dom-slots-DkqlawVY.js';
+
+const NAV_HEADER_MENU_RIGHT_ASIDE_MOBILE_REGIONS = [
+    '.xpl-nav-header-menu__right-aside-mobile',
+];
+const NavHeaderMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rightAsideMobilePresent = false;
+    }
+    connectedCallback() {
+        this.syncRightAsideMobileSlotPresent();
+        this.connectRightAsideMobileSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.deferredRightAsideSlotWorkTimeoutId !== undefined) {
+            clearTimeout(this.deferredRightAsideSlotWorkTimeoutId);
+            this.deferredRightAsideSlotWorkTimeoutId = undefined;
+        }
+        this.disconnectRightAsideMobileSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncRightAsideMobileSlotPresent();
+    }
+    componentWillRender() {
+        this.disconnectRightAsideMobileSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleDeferredRightAsideSlotWork();
+    }
+    scheduleDeferredRightAsideSlotWork() {
+        if (this.deferredRightAsideSlotWorkTimeoutId !== undefined) {
+            clearTimeout(this.deferredRightAsideSlotWorkTimeoutId);
+        }
+        this.deferredRightAsideSlotWorkTimeoutId = setTimeout(() => {
+            this.deferredRightAsideSlotWorkTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncRightAsideMobileSlotPresent();
+            this.connectRightAsideMobileSlotObserver();
+        }, 0);
+    }
+    connectRightAsideMobileSlotObserver() {
+        this.disconnectRightAsideMobileSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.rightAsideMobileSlotObserver = new MutationObserver(() => {
+            this.scheduleDeferredRightAsideSlotWork();
+        });
+        this.rightAsideMobileSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectRightAsideMobileSlotObserver() {
+        this.rightAsideMobileSlotObserver?.disconnect();
+        this.rightAsideMobileSlotObserver = undefined;
+    }
+    syncRightAsideMobileSlotPresent() {
+        const has = hasHostNamedSlot(this.el, 'right-aside-mobile', {
+            hostTag: 'xpl-nav-header-menu',
+            projectionRegionSelectors: NAV_HEADER_MENU_RIGHT_ASIDE_MOBILE_REGIONS,
+        });
+        if (has !== this.rightAsideMobilePresent) {
+            this.rightAsideMobilePresent = has;
+        }
+    }
+    render() {
+        const hasProfile = !!this.username || !!this.email;
+        return (h(Host, { key: '36df50ceb427be007b8da6c4e6154ab0267e7e6b', class: {
+                'xpl-nav-header-menu': true,
+                'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
+                dark: true,
+            } }, hasProfile && (h("div", { key: '5906352d9c6580f96cb3e1ba3ae841b04c136a27', class: "xpl-nav-header-menu__profile" }, h("div", { key: '38ad80fe95f2ea56e12f3dfeea32af734f31aafd', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: 'a58f2ab162da92c5afbfaf01234748a6478a61db', class: "xpl-nav-header-menu__username", title: this.username }, this.username)), this.email && (h("div", { key: 'd91f764a3b4278937d1bac6ed670f1e2abf899b0', class: "xpl-nav-header-menu__email", title: this.email }, this.email))))), h("div", { key: '78fade2c6cc2ec049b40ca3093f77855b46ee7db', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: '9715e86a06f642f1b0455e43f12fc83c1fdc20f8', name: "right-aside-mobile" })), h("div", { key: 'c1893f276e93629ff8dd96f807579b2b991ea884', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '23218885442af87a956216af71b598c2eb478eff' }))));
+    }
+    get el() { return getElement(this); }
+};
+
+export { NavHeaderMenu as xpl_nav_header_menu };

package/dist/esm/xpl-nav-item.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+
+const NavItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.navOpen = createEvent(this, "navOpen", 7);
+        this.navControl = false;
+    }
+    onNavToggle() {
+        if (window.innerWidth <= 640) {
+            this.navOpen.emit(false);
+        }
+    }
+    render() {
+        return (h(Host, { key: '6632b50719b413f69b1943035e60c086951709d7', class: "xpl-nav-item", role: "listitem", onClick: () => {
+                if (this.navControl) {
+                    this.onNavToggle();
+                }
+            } }, h("slot", { key: '1c7f754d3fa4b67883562f4877414cefc7947920', name: "link" }, h("slot", { key: 'c4268f625e8a4ef9323293d064abee42afee5d1f', name: "icon" }), h("slot", { key: '5f843056b4c5852e3fa89c9a5ef36442b76238a0' }))));
+    }
+};
+
+export { NavItem as xpl_nav_item };