@xplortech/apollo-core 2.6.0 → 2.7.0

package/dist/collection/components/xpl-list/xpl-list.js

@@ -1,27 +1,379 @@
-import { Host, h, Fragment } from "@stencil/core";
-const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata, }) => {
-    const hasRight = avatars || badges || subtext;
-    const inner = (h(Fragment, null, avatar &&
-        (avatar.slice(0, 1) === '/' || avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: avatar, name: title })) : (h("xpl-avatar", { name: title }, avatar))), h("div", { class: "xpl-list-item-content" }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, title), metadata && (h("ul", { class: "xpl-list-item-metadata" }, metadata.map((d) => {
-        if (typeof d === 'string') {
-            return h("li", null, d);
-        }
-        return (h("li", null, h("xpl-icon", { icon: d.icon }), " ", d.text));
-    }))))), hasRight && (h("div", { class: "xpl-list-right" }, subtext && h("div", { class: "xpl-list-item-subtext" }, subtext), avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map((a) => (h("img", { src: a, alt: "" }))))), badges &&
-        badges.map((b) => {
-            if (typeof b === 'string') {
-                return h("xpl-badge", null, b);
-            }
-            return (h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text));
-        }))))));
-    return href ? (h("a", { class: "xpl-list-item", href: href }, inner)) : (h("div", { class: "xpl-list-item" }, inner));
-};
+import { Host, h, } from "@stencil/core";
+import { TimerManager } from "../../utils/lifecycle";
+let xplListItemsPropDeprecationWarned = false;
+function getListItemFromComposedPath(e) {
+    var _a, _b;
+    const path = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) !== null && _b !== void 0 ? _b : [];
+    const fromPath = path.find((node) => node instanceof HTMLElement && node.tagName.toLowerCase() === 'xpl-list-item');
+    return fromPath !== null && fromPath !== void 0 ? fromPath : null;
+}
 export class List {
     constructor() {
+        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) {
+        var _a;
+        const row = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.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 === null || wrapper === void 0 ? void 0 : wrapper.classList.add('dragging');
+    }
+    handleItemDragEnd(event) {
+        var _a;
+        const row = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.item;
+        if (!row || row.parentElement !== this.el) {
+            return;
+        }
+        if (this.draggedItem) {
+            const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
+            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.remove('dragging');
+        }
+        this.draggedItem = null;
+    }
+    handleItemDrop(event) {
+        var _a;
+        const dropTarget = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.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 === null || wrapper === void 0 ? void 0 : 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;
+        }
+        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: Object.assign(Object.assign({}, 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(() => {
+            var _a;
+            if (!this.el.isConnected) {
+                return;
+            }
+            const movedItem = this.getDirectChildListItems().find((el) => this.getItemRowId(el) === itemId);
+            const handleRoot = movedItem === null || movedItem === void 0 ? void 0 : movedItem.querySelector('.xpl-list-item__drag-handle');
+            const focusTarget = ((_a = handleRoot === null || handleRoot === void 0 ? void 0 : handleRoot.querySelector) === null || _a === void 0 ? void 0 : _a.call(handleRoot, '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() {
-        return (h(Host, { key: '441b4eae6f2837f20b58221819ca3c10a2fb3491' }, this.items.map((item) => (h(ListItemCpt, Object.assign({}, item))))));
+        var _a, _b, _c;
+        const ariaLabelledBy = ((_a = this.labelledBy) === null || _a === void 0 ? void 0 : _a.trim()) ? this.labelledBy.trim() : undefined;
+        const ariaLabel = !ariaLabelledBy && ((_b = this.label) === null || _b === void 0 ? void 0 : _b.trim()) ? this.label.trim() : undefined;
+        return (h(Host, { key: '4290084c30b164abb653943a81783c35531d6316', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
+            _c.map((item, index) => {
+                var _a;
+                const legacyRowId = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
+                return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
+            }), h("slot", { key: '55ce7202269eab851c0d753fd87ef2d5bf9f59a8' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     static get is() { return "xpl-list"; }
     static get properties() {
@@ -42,15 +394,221 @@ export class List {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "`items` should be an array of objects with the following signature:\n{\n  avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. \"SPD\").\n  avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.\n  badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges\n    dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.\n    text: string;\n    variant?: string;\n  }[];\n  href?: string;          // A URL, if this list item is meant to link somewhere.\n  title: string;          // The text to be displayed for the list item.\n  metadata?: string[] | { // An array of strings or strings with icons (reference the allowed\n    icon: string;         // Apollo icons) to be displayed as metadata below the title.\n    text: string;\n  }[];\n  subtext?: string;       // Subtext to be displayed on the right.\n}\n\n- Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering\n  the right-hand side of the list item."
+                    "text": "Array of list items to render. Each item should follow the ListItem interface.\n**Deprecated.** Use slot-based xpl-list-item children instead."
                 },
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the list, exposed as `aria-label` on the host when set.\nUse when the list has no visible heading.\nIgnored when `labelledBy` is set (see `labelledBy` for precedence)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "labelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Element id(s) that label this list (space-separated), exposed as `aria-labelledby` when set.\nWhen set, `label` is not applied as `aria-label` so the list has a single naming source."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "labelled-by"
+            },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, enables reorder UI and behavior for **slot-based** child rows (drag handle + keyboard).\nLegacy rows rendered from the deprecated `items` prop do **not** show a drag handle; migrate to slots if reorder is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if this list is selectable (shows `xpl-radio` per row in a shared group).\nPress Escape while focus is on the **selected** row to clear selection (same as `clearSelection()`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "keyboardReorderItemId": {},
+            "reorderLiveMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is selected."
+                },
+                "complexType": {
+                    "original": "{ itemId?: string }",
+                    "resolved": "{ itemId?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "orderChange",
+                "name": "orderChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the order of items changes (after the DOM has been updated).\n`orderedItemIds` lists **visible** row ids only (hidden rows excluded)."
+                },
+                "complexType": {
+                    "original": "XplListOrderChangeDetail",
+                    "resolved": "XplListOrderChangeDetail",
+                    "references": {
+                        "XplListOrderChangeDetail": {
+                            "location": "import",
+                            "path": "./listitem",
+                            "id": "src/components/components/xpl-list/listitem.ts::XplListOrderChangeDetail",
+                            "referenceLocation": "XplListOrderChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears all radio selections in the list.\nAlso runs when `selectable` is true, the user presses Escape, and focus is on the selected row.\nEmits `itemSelect` once per row that was selected (checked radio or `selected` prop), typically one.",
+                    "tags": []
+                }
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "keyboardReorderItemId",
+                "methodName": "handleKeyboardReorderItemIdChange"
+            }, {
+                "propName": "items",
+                "methodName": "handleItemsChange"
+            }, {
+                "propName": "reorderable",
+                "methodName": "handleReorderableChange"
+            }, {
+                "propName": "selectable",
+                "methodName": "handleSelectableChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "itemSelect",
+                "method": "handleChildItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "itemDragStart",
+                "method": "handleItemDragStart",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "itemDragEnd",
+                "method": "handleItemDragEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "itemDrop",
+                "method": "handleItemDrop",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "xplListItemReorder",
+                "method": "handleItemReorder",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/xpl-main-nav/xpl-main-nav.js

@@ -13,7 +13,7 @@ export class MainNav {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: 'd8a79782b16a4e9f8ab3e6bf88c0314549aa501a', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '64dcaed4426ad4f6590671425e7571df5a1cd1d9' }, h("header", { key: '7e97eee88a0cfff836aa40c9a2cba2a6dbfa59aa', "aria-label": "Sidebar Header" }, h("slot", { key: 'c281a9fbd5192cd0bda381ba52e55a9a1f6f063b', name: "logo" }), h("slot", { key: '988a49a475779b472cac084f20b7e73ed1528089', name: "brand-name" })), h("div", { key: '6fb1ff561b1136126e466ff86dfff9b124862eb2', class: "xpl-main-nav__main_section" }, h("slot", { key: 'bf5af4e8b47c8666f7014a8e63102601278c8038', name: "navigation" })), h("footer", { key: 'a836bd8d08638490d14ddd812cdc76b1dbe70392', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '05143d5082b2f8d699e23611df2b584c90a423c5', name: "footer" })))));
+        return (h(Host, { key: '12ad41e2631d3cbab84b0bf536ffaf4fc31e7f8b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '54c0fcc49ddda8846279b8efc4afe0244e054211' }, h("header", { key: 'a1803d0c15541eb7d8b84d17d6e8c5613472dd7e', "aria-label": "Sidebar Header" }, h("slot", { key: 'cee7321f97dc59f7d7e844ecd8fab6ba656b92e9', name: "logo" }), h("slot", { key: 'f33cd91b4ad2e7dad79f89401477c7c2cc7636aa', name: "brand-name" })), h("div", { key: 'd7951aa7282d7be3107b15196679f2e55c76d847', class: "xpl-main-nav__main_section" }, h("slot", { key: '716d5be941f65ce57c2a9f12e4eeaedef83c0dd0', name: "navigation" })), h("footer", { key: '880b9fb98c5d0d2b4133cacb73a7c339590bf8bb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '005c2efc4a3490e50a2b692d0e9dc7e2ce76d938', name: "footer" })))));
     }
     static get is() { return "xpl-main-nav"; }
     static get properties() {

package/dist/collection/components/xpl-modal/xpl-modal.js

@@ -44,7 +44,7 @@ export class Modal {
         }
     }
     render() {
-        return (h(Host, { key: '54638721a2e8f0928bf9a3c2c4b40b3d4ad54db2', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '910ca79829054343c67906d7514a0d34b37832d0' }), h("dialog", { key: 'e284d70e8d190e64cb2b8df9a3ae327e7d2b0c00', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '42f86b8a9ef1cec791aa8b10458db11130d74839', class: "xpl-modal__header" }, h("div", { key: '1884139c12c8d06d23454d4840a32fb8a464dd7b', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '5211e56c773f787a7f0a78b45fcf64b2c6eeb44f', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '64287ebfac58f8f4c7e0133fb7f1d12781d12126', name: "title" }), h("xpl-button", { key: 'd10c9ab2f4c9df1b7e830da76414849a1191beaf', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '55fc8bce80a2a65d522fb3d91b0689ffdb245ed0', icon: "x" }))), h("div", { key: '17474a7e0561833a34b8c21319943ff8bde044f3', class: "xpl-modal__subtitle" }, h("slot", { key: '5b482ed4b113f17906e4d1106426ae567c937a4e', name: "subtitle" }))), h("div", { key: '85e702a36d347ef2b941f5c590504433798020a0', class: "xpl-modal__body" }, h("slot", { key: 'a5b9cc60582a82126e000ec9b74aee9376e37253', name: "body" })), h("div", { key: 'cff53f9aec109cff62835a9e13d168e434baec73', class: "xpl-modal__footer" }, h("slot", { key: 'cafc86918fca71f085c1e8d9c88f244bd5230f78', name: "tertiary" }), h("slot", { key: 'a0fbe836ebe814c85571514bb53316429e1e65e1', name: "secondary" }), h("slot", { key: 'cbf2a03c2d032fc32d1b0ecd319df7383085cfd3', name: "primary" })))));
+        return (h(Host, { key: '1014ca8cb29f3cfeb7f2cf580127b8fe61e7bcbd', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '0085b008fb42a998c2b27690102b8ae7f0e49c67' }), h("dialog", { key: '9e2d23304e10872ed3dc9a7520537e36bf8b8f5b', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: 'f55a9d85fc271183e0a6b7e60fb4ad5ed623b010', class: "xpl-modal__header" }, h("div", { key: 'ac105d7ee88148e4b10b26522f93fea70b8d6c06', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '89ff5fda063dc98628c409ee51c124f17f9e7553', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '03e05d28ca6449859ac58f0b0efaf3d8e24c1d62', name: "title" }), h("xpl-button", { key: 'ff132fcbaf91ab6922b12f667255594673e21bd5', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '6d712ffc1de66d43591ccf71b08ed5e823fc4c8f', icon: "x" }))), h("div", { key: 'ff5f20b209f6d704d0d20561818ca3ea5b353fce', class: "xpl-modal__subtitle" }, h("slot", { key: 'de25d1ab35729ad5ee0e279311285eab20fb7669', name: "subtitle" }))), h("div", { key: '286f34b54309527c836cb7cc06018ffc577c500f', class: "xpl-modal__body" }, h("slot", { key: '960036c7d3da774ad0f59ccf2c859d7ba3ec3a98', name: "body" })), h("div", { key: '24f7db0e4153d9f4105d787abdc1fe491ba6633c', class: "xpl-modal__footer" }, h("slot", { key: '4f096e57455b20caec555a008a14d411f40b53d7', name: "tertiary" }), h("slot", { key: '1fee8182d892c3460fe30c20456e1b9139bafaec', name: "secondary" }), h("slot", { key: 'e2b91a7af9f34c297d6c311823c91f9a0ab4059c', name: "primary" })))));
     }
     static get is() { return "xpl-modal"; }
     static get properties() {

package/dist/collection/components/xpl-nav-item/xpl-nav-item.js

@@ -9,11 +9,11 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: '7e852a7daf95bc3f9b4c87bad07504496b6a5863', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: '5e0a171c719802e96d48f7d635c189563387fade', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: 'a88118864c2bdc808b7de975a530b77916b3750f', name: "link" }, h("slot", { key: '91d6a9c350e5de8c6221587795d43e1c315bb8cc', name: "icon" }), h("slot", { key: 'e37e0ee23226eb03200b12092e11a7ae47800abf' }))));
+            } }, h("slot", { key: 'aff0155598a1b64d50168552ff251b824d00a86f', name: "link" }, h("slot", { key: '28da4593d2302b2867b0792562dc5b7b3ddd6983', name: "icon" }), h("slot", { key: '93e12751d2320608ee7a10d73eef67a1c1bb5443' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {