@xplortech/apollo-core 2.5.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));
-};
-export class XplList {
+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: '3eb471a9d1e64f3da012240b7ebb071efaad334d' }, 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 XplList {
                     }
                 },
                 "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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplMainNav {
+export class MainNav {
     constructor() {
         this.width = 'default';
     }
@@ -13,7 +13,7 @@ export class XplMainNav {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: '4bc985a6fc8533aac4a436bafb38a84e240d84d0', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '37095d22b076a66f32f054dd1bc11487c6bd4927' }, h("header", { key: 'ed18404dbd24edf1306452d097e5be3efbcc57a0', "aria-label": "Sidebar Header" }, h("slot", { key: 'bfced098b786899701193dff672b30d2f5a1ad39', name: "logo" }), h("slot", { key: 'c3be7a15c652539240599743deb02c11f3d1bb45', name: "brand-name" })), h("div", { key: '0aee9797d8b12bb0fc825fedd255d7ba78b52968', class: "xpl-main-nav__main_section" }, h("slot", { key: 'b5772dce6f67b9ee753f1ea68ad12c46564ba3f7', name: "navigation" })), h("footer", { key: 'a2918a192ce73dacc796c3f3a09d180f735a8971', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'f898b0f5cfd1d4424f573e74a38df5336506ca45', 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/modal.stories.js

@@ -84,4 +84,8 @@ Modal.args = {
 };
 Modal.parameters = {
     layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12849-6374&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplModal {
+export class Modal {
     constructor() {
         this.isOpen = false;
         this.size = 'medium';
@@ -44,7 +44,7 @@ export class XplModal {
         }
     }
     render() {
-        return (h(Host, { key: '67a2c3914086a75280693b156c5148a5e86395d2', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'e99270d95b4a2267d4fd9c7cbee25672b5f90b7d' }), h("dialog", { key: '3493394ff8f93a8a5fb00903d712dd956b886024', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '66731b3fc2b562fd9f013de173dcf808b3f3ff1a', class: "xpl-modal__header" }, h("div", { key: 'b3a712444c7f3607b5f1bf968f46ac83305f6f1a', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: 'd96d5df9527b0b96fa793025af3dca9956c5a946', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '3d30207ca82fffa6a7c7d7be42b240dc552ab01d', name: "title" }), h("xpl-button", { key: '34e0247f1f0de686233c95e236457dd170e3b050', type: "button", class: "xpl-modal__close-button", iconOnly: true, size: "sm", variant: "subtle", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'd14026b3e17070767fef2d798d5e4406c011dc7d', icon: "x" }))), h("div", { key: 'cdacbf1e44ca7c8601ebcbfdce2ac5b6fb7d6489', class: "xpl-modal__subtitle" }, h("slot", { key: '2ade6726ee27396a0aa570ef2b0c88be0361eb01', name: "subtitle" }))), h("div", { key: 'f016a31264ee6874ddd19e9dcbde3b3f8c76d2ea', class: "xpl-modal__body" }, h("slot", { key: 'ea6016e3c5733a344f1f427ca07267917f66001e', name: "body" })), h("div", { key: '7e43b4317efd765152cdb3ea804e1fe9b0036bc4', class: "xpl-modal__footer" }, h("slot", { key: '410d2ce31eccc7d2bb0c48091b165de2f85f6986', name: "tertiary" }), h("slot", { key: 'd2d64c8203c8b942385c26adfe283af76c12afb3', name: "secondary" }), h("slot", { key: '3eb401ad94c36a2aa9f380508c438e5b473020d5', 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() {