@xplortech/apollo-core 2.7.0 → 2.7.1

package/dist/collection/components/xpl-table-header/table-header.stories.js

@@ -0,0 +1,126 @@
+export default {
+    title: 'Components/Dynamic Table/Table Header',
+    component: 'xpl-table-header',
+    argTypes: {
+        firstCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        firstCellLabel: {
+            control: 'text',
+        },
+        firstCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        firstCellWidth: {
+            control: 'number',
+        },
+        firstCellSortable: { control: 'boolean' },
+        secondCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        secondCellLabel: {
+            control: 'text',
+        },
+        secondCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        secondCellWidth: {
+            control: 'number',
+        },
+        secondCellSortable: { control: 'boolean' },
+        thirdCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        thirdCellLabel: {
+            control: 'text',
+        },
+        thirdCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        thirdCellWidth: {
+            control: 'number',
+        },
+        thirdCellSortable: { control: 'boolean' },
+    },
+    tags: ['beta'],
+};
+export const TableHeader = ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, firstCellSortable, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, secondCellSortable, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, thirdCellSortable, }) => `
+    <xpl-dynamic-table>
+        <div slot="header">
+            <xpl-table-header>
+                <xpl-table-header-cell
+                    type=${firstCellType}
+                    label="${firstCellLabel}"
+                    icon=${firstCellIcon}
+                    width=${firstCellWidth}
+                    sortable=${firstCellSortable}
+                    ></xpl-table-header-cell>
+                    <xpl-table-header-cell
+                    type=${secondCellType}
+                    label="${secondCellLabel}"
+                    icon=${secondCellIcon}
+                    width=${secondCellWidth}
+                    sortable=${secondCellSortable}
+                    ></xpl-table-header-cell>
+                    <xpl-table-header-cell
+                    type=${thirdCellType}
+                    label="${thirdCellLabel}"
+                    icon=${thirdCellIcon}
+                    width=${thirdCellWidth}
+                    sortable=${thirdCellSortable}
+                >
+                </xpl-table-header-cell>
+            </xpl-table-header>
+      </div>
+    </xpl-dynamic-table>
+
+  `;
+TableHeader.args = {
+    firstCellType: 'label',
+    firstCellLabel: '',
+    firstCellIcon: 'heart',
+    firstCellWidth: 48,
+    firstCellSortable: false,
+    secondCellType: 'icon',
+    secondCellLabel: 'Column Item 2',
+    secondCellIcon: 'heart',
+    secondCellWidth: 48,
+    secondCellSortable: false,
+    thirdCellType: 'label',
+    thirdCellLabel: 'Column Item 3',
+    thirdCellIcon: 'heart',
+    thirdCellWidth: 208,
+    thirdCellSortable: true,
+};
+TableHeader.parameters = {
+    'web-component': {
+        render: TableHeader(TableHeader.args),
+    },
+    html: {
+        render: `
+          <tr class="xpl-table-header table-header">
+            <th class="header-cell">
+              <span></span>
+            </th>
+            <th class="header-cell">
+              <xpl-icon class="header-icon" icon="heart"></xpl-icon>
+            </th>
+            <th class="header-cell">
+              <button class="sortable">
+                <span class="sortable-text">Column Item 3</span>
+                <xpl-icon class="sort-icon" icon="arrow-down"></xpl-icon>
+              </button>
+            </th>
+          </tr>`,
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
+};

package/dist/collection/components/xpl-table-header/xpl-table-header.js

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class TableHeader {
+    render() {
+        return (h(Host, { key: '7b36c9e640bd43ac38ea2625e7600e8699a13c5f', role: "row", class: "xpl-table-header" }, h("slot", { key: 'd03fe894a829477b6bf25dbd6dfa724b224b8d42' })));
+    }
+    static get is() { return "xpl-table-header"; }
+}

package/dist/collection/components/xpl-table-header-cell/table-header-cell.stories.js

@@ -0,0 +1,75 @@
+export default {
+    title: 'Components/Dynamic Table/Table Header Cell',
+    component: 'xpl-table-header-cell',
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        label: {
+            control: 'text',
+        },
+        icon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        width: {
+            control: 'number',
+        },
+        sortable: { control: 'boolean' },
+    },
+    tags: ['beta'],
+};
+export const TableHeaderCell = ({ type, label, icon, width, sortable }) => `
+    <xpl-table-header-cell
+        type=${type}
+        label="${label}"
+        icon=${icon}
+        width=${width}
+        sortable=${sortable}
+    ></xpl-table-header-cell>
+`;
+TableHeaderCell.args = {
+    type: 'label',
+    label: 'Column Item',
+    icon: 'chevron-down',
+    width: null,
+    sortable: false,
+};
+TableHeaderCell.parameters = {
+    'web-component': {
+        render: TableHeaderCell(TableHeaderCell.args),
+    },
+    html: {
+        render: ({ type, label, icon, width, sortable }) => {
+            const renderContent = () => {
+                switch (type) {
+                    case 'label':
+                        return `<span>${label}</span>`;
+                    case 'checkbox':
+                        return `<input type="checkbox" class="xpl-checkbox">`;
+                    case 'icon':
+                        return `<xpl-icon icon="${icon}"></xpl-icon>`;
+                    default:
+                        return '';
+                }
+            };
+            return `
+                <th class="header-cell" style="width: ${width}px">
+                    ${sortable
+                ? `
+                        <button class="sortable">
+                            ${renderContent()}
+                            <xpl-icon icon="arrow-down"></xpl-icon>
+                        </button>
+                    `
+                : `<div class="non-sortable">renderContent()</div>`}
+                </th>
+            `;
+        },
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
+};

package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js

@@ -0,0 +1,188 @@
+import { Host, h } from "@stencil/core";
+export class TableHeaderCell {
+    constructor() {
+        this.sortable = false;
+        this.label = '';
+        this.type = 'label';
+        this.sortDirection = 'none';
+    }
+    toggleSort() {
+        if (this.sortDirection === 'asc') {
+            this.sortDirection = 'desc';
+        }
+        else if (this.sortDirection === 'desc') {
+            this.sortDirection = 'none';
+        }
+        else {
+            this.sortDirection = 'asc';
+        }
+        this.sortChanged.emit(this.sortDirection);
+    }
+    render() {
+        const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
+        const renderContent = () => {
+            switch (this.type) {
+                case 'label':
+                    return h("span", null, this.label);
+                case 'checkbox':
+                    return h("xpl-checkbox", null);
+                case 'icon':
+                    return h("xpl-icon", { icon: this.icon, size: 20 });
+                default:
+                    return '';
+            }
+        };
+        const renderSortIcon = () => {
+            switch (this.sortDirection) {
+                case 'none':
+                    return h("xpl-icon", { class: "sort-icon", icon: "arrow-down", size: 16 });
+                case 'asc':
+                    return (h("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-up", size: 16 }));
+                case 'desc':
+                    return (h("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-down", size: 16 }));
+                default:
+                    return '';
+            }
+        };
+        return (h(Host, { role: "columnheader", "aria-colindex": colIndex, class: `xpl-table-header-cell ${this.sortable ? 'sortable' : 'non-sortable'}`, style: { width: `${this.width}px` } }, this.sortable ? (h("button", { onClick: () => this.toggleSort() }, renderContent(), renderSortIcon())) : (renderContent())));
+    }
+    static get is() { return "xpl-table-header-cell"; }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display in the cell.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{boolean} - Whether the cell is sortable or not"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sortable",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} - Text to display in the cell"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'label' | 'checkbox' | 'icon'",
+                    "resolved": "\"checkbox\" | \"icon\" | \"label\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} - The type of cell to render"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'label'"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default\nto fit the content of the cell with 16px of padding on each side"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sortDirection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortChanged",
+                "name": "sortChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sort direction changes."
+                },
+                "complexType": {
+                    "original": "'asc' | 'desc' | 'none'",
+                    "resolved": "\"asc\" | \"desc\" | \"none\"",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -317,11 +317,11 @@ export class Tabs {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (h(Host, { key: '56e4284e5a8fd492ebedcc963ddc2218f75c58c6', class: {
+        return (h(Host, { key: '9998ae067e13e7c08338ae29bfe05bc3adacaa87', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: 'bd22e0a513a068915a206d48f8011cb779abdf44', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '18209c354e77267a13ce0c7380df0e419595cca7', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -332,17 +332,17 @@ export class Tabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: 'b56a5a8435cbba117f7b66711a4bad4a0df1b808', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'cf1bf2ec95fbbe7f0a6b8774cc5ce26928c7d6ca', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
                 this.tabChange.emit(event.detail);
-            } }, !isSegment && (h("div", { key: '77c1c13e85a172da519e5081364808f8a873eb54', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (h("div", { key: '5bfd13566a17723ec166a934bc72e59307eacb8c', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), h("slot", { key: '24e4b6409fbfa26f859d64d4d37493a711006368', name: "heading" })), h("div", { key: '2a364d45d6377131c2809d25373bc90512f11307', class: "xpl-tabs__panels" }, h("slot", { key: '59335370a20458fc36bfa33a2a117744ce4434fc', name: "panel" }))));
+            } })), h("slot", { key: '52baf508a46759fe908f8721b3089d3db0189383', name: "heading" })), h("div", { key: '363fe87f244eace0dc0af0903e0b8c25da3a613f', class: "xpl-tabs__panels" }, h("slot", { key: 'f3872844f486cf831bca26a228eba88fa18b42c3', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {

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

@@ -121,7 +121,7 @@ export class Tag {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (h(Host, { key: '117319681b3edca99c97361353fd1775a0b9b32f', class: {
+        return (h(Host, { key: '7e85098bb9f5e8c0fceee3e7947337e0799c4de8', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -129,7 +129,7 @@ export class Tag {
                 'xpl-tag--dragging': this.isDragging,
                 'xpl-tag--draggable': dragEnabled,
                 'xpl-tag--sm': this.size === 'sm',
-            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'b1040693b482270dec9403a908bf3cacd5db49b8', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'ed0419c92f526424bb1b9cd43e93ba119348da07', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'cb875506819a0a58d42add85a1a09e95e4786eba', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: '431f061a4c96dacb9dc76a753c9d2de01491b2be', icon: "xmark", size: 10 })))));
     }
     static get is() { return "xpl-tag"; }
     static get properties() {

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

@@ -35,9 +35,9 @@ export class Toast {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
+        return (h(Host, { key: '4f470ceb525c35a86ddbf65365fac1674ebe7033', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '04da6ca2777ceb222da2f4fd831d8aef5101a667', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '0e5e75aa05e96361700c0c7b9eccbc4c5b75a00c', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'f1ccc651318b6d7128255918bdd68ef36a249e9f', class: "xpl-toast__notification" }, h("p", { key: '1ae879d8a670a0f1a4928bfa2a0692581040dca1', class: "xpl-toast__title" }, h("slot", { key: 'b819a773c11b88cb00f8638db8a960de55ce6508', name: "title" })), this.caption !== '' && (h("p", { key: '8f6eb8dd769e4aaf5b16b3caafd9e9ec5408a7e1', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '46ae2f04fa38b50d2a07082b6972590f6bd28005', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
+            } }, h("slot", { key: '69512a9b482bb54252527d798dfa2884a19b7d8c', name: "action" })), this.dismissable && (h("div", { key: '818a5f9dde1a9c9b7ab3cd62cd807200e3687af6', class: "xpl-toast__close" }, h("button", { key: '3a617189f8f031e119a125efce0ab35a7f5cf31f', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'd86187aed0665da278f953be5ab92f7051f44438', icon: "x" }))))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {

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

@@ -12,13 +12,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'b501bb268b9fbc2756544b17481ae78ee3144960', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '34d2bb6e6c4538a863f333e8124fbde9ec2544cb', class: {
+        return (h(Host, { key: '0cf2e99934bbe447559fbe88cc61989bbfabbdea', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'f9f5ff29d428e776566d0a12e62ab7efe311feb5', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '0b8157e097f3890d6c521c399cf1f9c25514e341', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: 'f9b1baf90d9336711ce1354a66770c7423551af8', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: '49f803372904b5b87394a55c67f428401cd14379', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: '3bcfe674974e16e50a38d17836da0aa1c49fd6dc', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

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

@@ -12,11 +12,11 @@ export class Toolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
+        return (h(Host, { key: '156bc52063283c17215e1d3a90c25939ae92685b', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
+            } }, h("div", { key: '184e28d57a16d8ba6e10f29a95c931a036f44515', class: "toolbar" }, h("p", { key: 'ff6a7137db216c71859eac4398bbaf8bc6fe18f9', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'a610539a08383a3d1d3dad8d95a8b75f43eaf1a3', class: "actions" }, h("slot", { key: 'dd8ea3150b40926ab40f36d38770daaa969a6fff', name: "actions-left" }), h("slot", { key: 'b51f8940fb52dd6880841a917574f782e0d0c72c', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'eddf77e8e8093eff29c5c22fdc3d2b882de4a0ca', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'fad3bccade4af1d9734d288c32d7951527398853' }))))));
+        return (h(Host, { key: 'a118d629923a433680360f746e063ca94d5f1c6a' }, h("div", { key: 'cfd9742ee2cebd56994480bd2a601cb4e93b12a9', class: "xpl-tooltip-container" }, h("slot", { key: '8aae99e1a187f8f737e896ccfd00d67f1cfeb3b3' }), h("div", { key: '4b418074b2ac7f8760f09e3af033ea93f7a0012e', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'ef6a166f78250f1f98eae41661fd7020b36eeaae', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '7baecae00ab178f715c89443d250b068861afe5f' }))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {

package/dist/collection/components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js

@@ -64,11 +64,11 @@ export class NavHeaderMenu {
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (h(Host, { key: '677e0ab10d9bb5578f472101c677222e038c2b4a', class: {
+        return (h(Host, { key: '451149dc9d73f705492fc65bf4f014b8efa4ee8a', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (h("div", { key: 'fa3898bd0b2aa4726d44ad991a2c6272d4f323de', class: "xpl-nav-header-menu__profile" }, h("div", { key: '354ff7d001e5b545cc7c4310ee10cae7d72c6159', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '92b6486692879a602e87062820d7cbf175bf15d2', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'a228df8215ffd68c36631e11184ba38c790bc560', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: '0ee2394e784f6efb43f04ec65765481203dda954', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'f551acc13c6e6f2611e78d04de72987048011318', name: "right-aside-mobile" })), h("div", { key: 'b90709dea7e169df42acaf8125a9359321c979ff', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: 'c35efb10d04d4d4b0bbf832d8541ba6d4b9782c0' }))));
+            } }, hasProfile && (h("div", { key: 'f42b560492c110644d52b10f708a3ed650833861', class: "xpl-nav-header-menu__profile" }, h("div", { key: '6d98f720af85cbf8164bea7500175d6bfbb9465b', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '9d52880dc41c11e71ac3cc107d8009eccb787bac', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'd1b71ac2c4f6aaf5efd7b1910b8848f97ab08bf0', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e1b298c39ccbe0f68b8d60fa82714572f656ab1e', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'fbb8d26c38a4a50568e8836ac3af4409fe6c93c0', name: "right-aside-mobile" })), h("div", { key: 'cbe858338ec04cdd3b74285f95b0466432924be2', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: 'b47ccc7f955a30d8b9d9b884fa3d920d45958f7c' }))));
     }
     static get is() { return "xpl-nav-header-menu"; }
     static get properties() {

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

@@ -301,14 +301,14 @@ export class TopNavItem {
         return (h("div", Object.assign({}, shared, { role: "button" }), this.icon && h("xpl-icon", { size: 16, icon: this.icon }), this.label ? (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label)) : (h("slot", null)), this.hasDropdown && h("xpl-icon", { icon: "chevron-down" })));
     }
     render() {
-        return (h(Host, Object.assign({ key: '391dd693aabff902ffd5de50d710d3fab06573e2', class: {
+        return (h(Host, Object.assign({ key: '4758b54726318591f140bcfea8d4db22c70c96ff', class: {
                 'xpl-top-nav-item': true,
                 'xpl-top-nav-item--active': this.active,
                 'xpl-top-nav-item--dropdown-open': this.open,
                 'xpl-top-nav-item--has-dropdown': this.hasDropdown,
                 'xpl-top-nav-item--selected': this.selected,
                 dark: true,
-            } }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (h("div", { key: 'c5d5239d0279722d5a78bc7436a3ebb9247f904d', class: "xpl-top-nav-item__dropdown" }, h("slot", { key: 'f0a735798a09218822fd14174d0c845014c5e557', name: "dropdown" })))));
+            } }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (h("div", { key: '65f53889e4815fb974d7abe12d13dd8be19c1943', class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '2f4f164deaec561be73a13e2303cc13e037699bb', name: "dropdown" })))));
     }
     static get is() { return "xpl-top-nav-item"; }
     static get properties() {

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

@@ -236,7 +236,7 @@ export class TopNav {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '7b9229d9aaa6e462102694f2af4cac513c0a897d', class: {
+        return (h(Host, { key: '9f65d609c6b4cf08b2899216fe8bc70fe0e12db9', class: {
                 'xpl-top-nav': true,
                 'xpl-top-nav--nav-control': Boolean(this.navControl),
                 'xpl-top-nav--open': this.open,
@@ -244,15 +244,15 @@ export class TopNav {
                 'xpl-top-nav--has-brand': this.hasBrand,
                 'xpl-top-nav--has-user-menu': this.hasUserMenu,
                 dark: true,
-            } }, h("nav", { key: '15e65c606ec67d5dcb3de7e14dbbb2983d23f097', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: '4dcd01744fac5acfd8370da93d3343fc9be1762c', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '07bd342a80a412922a6d22a789694e2457312e1d', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, h("xpl-icon", { key: '1a69e0dac8d98b1331676e9e69fa76cac7a55de5', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (h("div", { key: '5af668cb6533a3f1e91101a1179c614215e3f431', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: 'f77e07635deb49f7db37fd965b389f5a3d379864', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
+            } }, h("nav", { key: 'a3d613acbe13866886bca363372127e8e869ec2c', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: 'b7057ef80f36e98def53bbfc2a39bd30bacd9b4c', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '3c4091842c7e4c1a62fea5446f6e29486617b11a', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, h("xpl-icon", { key: 'cd5fd2cd1cf1dae5c765b63678e14cb87588c3b2', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (h("div", { key: '3cabfe3ce8ff58d9aed0ed9b4adccd896f6cad08', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: 'bca3924f36affd16b6c17d0d8cc1ccc57c488ef6', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
                 ? this.brandName.trim()
-                : 'Brand' })) : this.brandLogoSlotPresent ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: 'f349c1fa2021e705602eed288e83db9a5dade455', class: {
+                : 'Brand' })) : this.brandLogoSlotPresent ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: '1e9a1af5fbeca22c0f440556c121c38b8528d9ba', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-left': true,
-            } }, h("div", { key: '718718595ec839e0aef4f703f766d1bedfd65c6b', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'ebcb856dc7c6bc247877a1306350073f9990ff18', name: "left-aside" })))), h("div", { key: 'e582c5e3799d471b358c48c34d5c629a5b6db44d', class: {
+            } }, h("div", { key: 'b5d67e1adf5bc6a751be3d8bfa448bdb682039bc', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'c738eb6fbda41c8320fa2645fb88f43ef11731b6', name: "left-aside" })))), h("div", { key: '8573832a3922746b2301f9bc8b4fa6ab7e1ac441', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-right': true,
-            } }, h("div", { key: 'eda8ef4e6252b5c7362f1e30e15f9f60df2e77d6', class: "xpl-nav-right__list" }, h("div", { key: 'f99115361d8ec8e8c964f434b1c713488ece962a', class: "xpl-top-nav__right-rail" }, h("div", { key: '0eeea604e76f47ee71c7e2310f7a4764aa47bf39', class: "xpl-top-nav__right-lead" }, h("slot", { key: 'd4fd4fa67af3bc6dbdb4b641e24603fcfc14e920', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
+            } }, h("div", { key: 'a21b318496a47000cde7a0346d3376999e7893ea', class: "xpl-nav-right__list" }, h("div", { key: '5934e7d3976b13abba77b4361b4fe1c6f49bcc2e', class: "xpl-top-nav__right-rail" }, h("div", { key: '49b44ea3d59eec32d6859978754e81ce6acc1bec', class: "xpl-top-nav__right-lead" }, h("slot", { key: '054671b75354700b873a85f08998a14d7fc7073b', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
                 ? undefined
                 : 'Open account menu' }, this.childAccountLabelText.length > 0
             ? this.childAccountLabelText

package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js

@@ -11,7 +11,7 @@ export class UtilityBar {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (h(Host, { key: 'ace824cff0305860bce4dd4da2be0b2f8cf59672' }, h("nav", { key: '0617af3b292b4459900c7e352c9486d666fc501e', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: 'e060a576b15089bc70d030a6c692124294b7eb4e', name: "main" }))));
+        return (h(Host, { key: '2af96247c611b67255b7f285dfb2b8b1dada47cc' }, h("nav", { key: '135186097dd0d8f308a1a08b5fbf4a5537c10f25', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: '3346444f9813b20d8c4ed13b5a0784205dcfbbb1', name: "main" }))));
     }
     static get is() { return "xpl-utility-bar"; }
     static get properties() {