@xplortech/apollo-core 2.6.0 → 2.7.1

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: 'aaa6e1cfa2d87e61b239d9aa59c9e4647f05aade', 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: '89eb57b654baf9efbfd021e8c8db1fe074daa6d1' }), 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: '122bf1f28c4fb1e460185989b2d517f1ddbfb22b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '4ed8ce484b394adee98ac16056ebbabcadd31625' }, h("header", { key: '829b7904323aeea21922a8d4a8fa33141cfa7913', "aria-label": "Sidebar Header" }, h("slot", { key: '8a6ea72fa4a1b26f9825a36b4ac7e64c9dbf476c', name: "logo" }), h("slot", { key: 'bf049e9ee7b83af1c4ebfef21681edcb35de9364', name: "brand-name" })), h("div", { key: 'a0ce70ccf5e4bac6346711127fba5278963910c1', class: "xpl-main-nav__main_section" }, h("slot", { key: 'bce360027342a1ef3e009bad6bc28e44c64dbd04', name: "navigation" })), h("footer", { key: '0b5f2e6cc890e4257f5e5503302492a236950f87', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '01dbe4d3834e1bc67b51108600688544e549ecde', 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: '310913d620acf72531ecb06aa6cd2180bb58d13b', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'd95693fd09c2f0a8024f3cb69a021f0bd79f7916' }), h("dialog", { key: '5cffd3cfdcc6033baa1d9e3e5fdf56b8411a8975', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '2d0be8e91065d464797d85cd1b98272292eacb09', class: "xpl-modal__header" }, h("div", { key: 'cb7d8594ed217599bcf0e2efa88d72afe0fff758', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: 'fb7dd69369accc0c98ef8762ca457b6368ca0036', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '36a6d3d38d35064f81740504090fbbcdf2125097', name: "title" }), h("xpl-button", { key: 'db84ecf685afec8d0d783b433f8aa030acc436bb', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'bf241c6636ace6e182bf259bd24754646dc7f151', icon: "x" }))), h("div", { key: '105fa1a5b9d927bda5ca5521bbb8211cb07ab8e8', class: "xpl-modal__subtitle" }, h("slot", { key: 'd25d6d8bb95cd51f075dd7f9b5e1e199dac3efb0', name: "subtitle" }))), h("div", { key: '3b194a36ad0f4446149027544c16a25ba27f2cec', class: "xpl-modal__body" }, h("slot", { key: '077e5b70115e3e906cd9ea7181c51615799c77e8', name: "body" })), h("div", { key: '687bd9ca45af20945ab5461ceb68ec099a30c50b', class: "xpl-modal__footer" }, h("slot", { key: '73d5884708efd296a701c37e02663668fcfd37d8', name: "tertiary" }), h("slot", { key: 'bad90d2355b8c015e19b1e450b5a2ce96e5ad55d', name: "secondary" }), h("slot", { key: 'c601b66edc9fb2c082ccc713d6df95f15bd604ef', 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: 'b3a214a57ad57e9db1bbfd6a1809999ce0575a82', 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: '0f2a74dc4fd6f419a01106d872a5f6b5066a21a8', name: "link" }, h("slot", { key: '234b41ca18d65ec3423ff580d983d24b483641cf', name: "icon" }), h("slot", { key: 'cdb0ac59997cd1c557b05c6c8d8f60ae78d28a4d' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {