@xplortech/apollo-core 2.10.0 → 2.11.0

package/dist/cjs/xpl-button-row.cjs.entry.js

@@ -13,7 +13,7 @@ const ButtonRow = class {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'cd6436989f07af18d1e696a26e3e990d99859b2e', class: "xpl-button-row" }, index.h("div", { key: '67a9ab3127bdd31d416d716bf06a2548d4b04341', class: "xpl-button-row-inner" }, index.h("div", { key: 'f4c9e84868a5476500ffd65381fafe6c427e63ad', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '9c264293c00634759559c8109657f8a58451dc06', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: 'df3443bd9afa937c4936e7b902da146f4a999f56', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '85912cdbc02ac6587085564dbfb4f0647b656d7d', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: 'cbb4302e9853d751b7b75e386c6d9441037c301e', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: '10991142b7062283d129ba3428e5d3f1c060a973', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (index.h(index.Host, { key: '9cd6193bed50a82872803b95bd5fc56c9347dd1a', class: "xpl-button-row" }, index.h("div", { key: 'eefebfcad667ceec154117b9318e2ff88c420f8f', class: "xpl-button-row-inner" }, index.h("div", { key: '94633d213b36306cf51a70e04d21a964ca13c430', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '2e47003e6f35f5acd7a6129c903d4591cc10759f', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: '05397d469cd97188f56934354850a8c3cd77e4d6', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: 'd3f6a953144e8e64aa34a37c9c80f7363dc0ee9c', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: 'abd03f3c33a48517a7f268ecf302767e605a2400', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: 'be417c38b0427e9cdbbacb700d4651677cff8ec9', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
 };
 

package/dist/cjs/xpl-calendar.cjs.entry.js

@@ -57,7 +57,7 @@ const Calendar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '180c1c356f07920c05487c50dd534284004cfce5', class: "xpl-calendar" }, index.h("input", { key: '6f46ef2a9c81043eb65a66208e71ce7e8504abea', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (index.h(index.Host, { key: '8693d0e9612e2995b03f6392387758c843db0be5', class: "xpl-calendar" }, index.h("input", { key: '29077057568f288f42d4e0eb94e2fa83ce6ea9c6', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

package/dist/cjs/xpl-dynamic-table-cell.cjs.entry.js

@@ -23,9 +23,9 @@ const DynamicTableCell = class {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (index.h(index.Host, { key: 'e6e9a3695c9d8ca3743b188284bc8e69f50f3397', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (index.h(index.Host, { key: '18dbf3410d7ecd8ccf08b4b7e8927c50777967b8', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: 'abfa632a3ac88d663acaaacbc431d07c9da4b375' })));
+            } }, index.h("slot", { key: '7efb10712db0c91fb2f745f23946270c488885a5' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-dynamic-table-row.cjs.entry.js

@@ -28,9 +28,9 @@ const DynamicTableRow = class {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (index.h(index.Host, { key: 'e070f32db6cee0bcbf0dd84e41e13e6d3b88e8a1', role: "row", class: classList, ref: (el) => {
+        return (index.h(index.Host, { key: '17fac4d9214237c1896a136839c79377dc9b3169', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: '78ea8e02e97e0017dc4aa35af4883446d4e4c4bf' })));
+            } }, index.h("slot", { key: '7d41f904e2c1fa3dcde2b7652cd2840c6bde3470' })));
     }
 };
 

package/dist/cjs/xpl-dynamic-table.cjs.entry.js

@@ -56,7 +56,7 @@ const DynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (index.h("div", { key: '3d5c3e5aea065c98323fbdbf17392af63975c9dd', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: 'f6076fef5e85fdf22b03e532e920396ce5f6ce63', name: "header" }), index.h("slot", { key: '3b94b04b8f6b7a1cca9277161c0c32b117ce315f', name: "body" })));
+        return (index.h("div", { key: '7b1ac3b1461e69fb7001baf63c256abcc65cb3a3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: '5d7484d4517b132dbb2400f7c63da3be14064586', name: "header" }), index.h("slot", { key: '292c502f9cb58467bbb69a3eeacff51af557d826', name: "body" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-grid-item.cjs.entry.js

@@ -16,7 +16,7 @@ const GridItem = class {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (index.h(index.Host, { key: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, index.h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
+        return (index.h(index.Host, { key: 'a541967d85e9a4fcd643aa95b62226e46c476dc6', class: className }, index.h("slot", { key: 'e20ba799288ffb654334698215518e8cfe6ba9a3' })));
     }
 };
 

package/dist/cjs/xpl-grid.cjs.entry.js

@@ -28,7 +28,7 @@ const Grid = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', class: "xpl-grid" });
+        return index.h(index.Host, { key: '3700079a0f7bbea9755a217d7757dff5a82ee601', class: "xpl-grid" });
     }
     get container() { return index.getElement(this); }
 };

package/dist/cjs/xpl-large-card.cjs.entry.js

@@ -19,7 +19,7 @@ const LargeCard = class {
     render() {
         const contentSlot = 'graph-content';
         const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (index.h(index.Host, { key: '886078965cb1ca87fd9c4f45a8b06f089a4b2e04', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '1c2006c9167b2d46262b222ace3c5e9135863783', class: "xpl-large-card__header" }, index.h("header", { key: '21ba4629c7e3d0d9dff98f9dde2ac4bc9f1f494e' }, index.h("slot", { key: 'd50991dc4fcca6c56c04c7cc9a401f0894035aa2', name: "title" }, this.name), this.link && (index.h("span", { key: '35b1b15786c1674f6d1797ec3b04da81b27d5d3a', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'f52a7a39b3d044341296d88adb9d2bc07cdec9ab', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: 'bac9d6cec27272d277c991c81e651714603066a2', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '9da3ca8ec575a6755f1f47065299ec3ab3e5169b', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '022da3c1e07c264441c58f7d42d6edca109a504d', name: contentSlot }))));
+        return (index.h(index.Host, { key: '30865d2efaf693257afb21c768981e2785c81ad4', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: 'bf95f5c52d36b3aa9174222ea2f3bb7e788f5992', class: "xpl-large-card__header" }, index.h("header", { key: '5a18e7dfe1544b65fa13e9b918d06ca0fdabb9f2' }, index.h("slot", { key: '94e9bd081a2c1fe5eb57cb8cedd0ab1224bb5bb3', name: "title" }, this.name), this.link && (index.h("span", { key: '082622ba8e2446dc65fe4f37ee1e15bab1c8785d', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '407180586601126e1ea5fb2c6af006d109067b39', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: '381711e6390dd685b0951d7dd08faeb6f9ef34f3', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '2cf8a71574bef72aee76720525e26288b92cecc2', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '03a58f57d713de2abad1b815a77c91f340ef1f0a', name: contentSlot }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -18,7 +18,7 @@ const MainNav = class {
         this.navWidthHandler();
     }
     render() {
-        return (index.h(index.Host, { key: '2e8b8744026876205bd66e04f5d93a2cf23415dd', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", { key: 'ad2a7cadd3a9a4ac898b6e27604aff51a3cf5c40' }, index.h("header", { key: '14e0e676e8d22147c6fe3093da3a8a4c0f102243', "aria-label": "Sidebar Header" }, index.h("slot", { key: '5da2fe9fa391e56ae7ea3a742f7a060c78dcec56', name: "logo" }), index.h("slot", { key: 'd3631d0d23c5c0404e134ebc9d852bfd1651c982', name: "brand-name" })), index.h("div", { key: 'f0ff1cda64b9474386ce4f56fb4027b4f193e0c3', class: "xpl-main-nav__main_section" }, index.h("slot", { key: '0ef80166585b66d4af64a1b13383a551444c10f0', name: "navigation" })), index.h("footer", { key: 'd23f595c3705823dd1e7a86b6db66f98bc70504a', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { key: 'b4ba325347935557ee9e2e37b824c5dc42aa32b3', name: "footer" })))));
+        return (index.h(index.Host, { key: '15982141de742a1daeae5ffbb172ea18e0667e2d', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", { key: '41efe9e9a68a3a27653efee7f6ed92d7fde9e902' }, index.h("header", { key: '18c08d774991cd41dc3b395891d1621343a5d505', "aria-label": "Sidebar Header" }, index.h("slot", { key: 'b82477e1ae127d30e80ac4e82c22a5e8cbed94e4', name: "logo" }), index.h("slot", { key: '3841701331da0ea203c356b20098e36b67255384', name: "brand-name" })), index.h("div", { key: '512df331c13b69154550fe510a8887323167081e', class: "xpl-main-nav__main_section" }, index.h("slot", { key: '30da0851944d7ce43648efe3b22786b57079042a', name: "navigation" })), index.h("footer", { key: '3c58ec415052a4b7930ed8861593cb1c52bcd1f5', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { key: 'fac051cf4e6bc7635d58df0fbf9b504af244eb52', name: "footer" })))));
     }
 };
 

package/dist/cjs/xpl-table-header.cjs.entry.js

@@ -7,7 +7,7 @@ const TableHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f50c2c0ca2743e47ad44a368a9ea684c57a72261', role: "row", class: "xpl-table-header" }, index.h("slot", { key: '7a61b45818de8675015ca3defb9ee8c3280e961a' })));
+        return (index.h(index.Host, { key: '1123c671d82d987a74264ef2869494155746d7d8', role: "row", class: "xpl-table-header" }, index.h("slot", { key: 'f1a238ba023ce03559f87cf92214a1804c8ac821' })));
     }
 };
 

package/dist/cjs/xpl-toggle.cjs.entry.js

@@ -21,13 +21,13 @@ const Toggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (index.h(index.Host, { key: 'bc7363fd59d7cc10f0df644b5c54021ce860dbbc', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '06b031581d173694651e58265b287865daeaf22b', class: {
+        return (index.h(index.Host, { key: 'c57e1813c72cba62eed2927763277341bb0d3f77', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '00ba33da343a47681982f6437f1cb45060d70ae9', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: 'a633107a6dcc2c0c43cd626c3013876831535588', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '8ec4104abdb16ca405577f061c4cb68580317bc4', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), index.h("input", { key: 'fc1d734118dafc0a5f64119eb91d19e8af1254a6', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && index.h("label", { key: '7f1a465da3ec136c11797746505c0629fe2d31a9', htmlFor: this.id }, this.label)));
+            } }, this.description)))), index.h("input", { key: 'face83ccc22985b6d0a4c8b9e4c8dcf1d9d6b72a', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && index.h("label", { key: 'aa89637f4b60b050a168fcf02e6702d9ed9bd186', htmlFor: this.id }, this.label)));
     }
 };
 

package/dist/cjs/xpl-toolbar.cjs.entry.js

@@ -16,11 +16,11 @@ const Toolbar = class {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (index.h(index.Host, { key: '782235b9cb7a50f4ba1a38ce2add940a051167a9', class: {
+        return (index.h(index.Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, index.h("div", { key: 'cb29423baac9e936ea02d4e177966161cb0f0486', class: "toolbar" }, index.h("p", { key: '484e52174e0b11b158e4865cdc62fa05136eac2d', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: '51ba928ccfae827b73f67348b64e34a14d36c235', class: "actions" }, index.h("slot", { key: 'f96d57f3e6101a277a0195e072f69b63d5b29671', name: "actions-left" }), index.h("slot", { key: '278f41ab191c18479f9c99a531ca7636be571478', name: "actions-right" })))));
+            } }, index.h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, index.h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, index.h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), index.h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-top-nav-menu.cjs.entry.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var index = require('./index-BaXVr8ux.js');
+var lifecycle = require('./lifecycle-Bf3QwiVa.js');
+
+const TOP_NAV_MOBILE_MQ = '(max-width: 767px)';
+
+const TopNavMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.timers = new lifecycle.TimerManager();
+        this.isMobileCascade = false;
+        this.onViewportChange = () => {
+            var _a, _b;
+            this.isMobileCascade = (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+        };
+        this.handleBackClick = async () => {
+            var _a;
+            const parent = this.el.closest('xpl-top-nav-item');
+            if (!parent) {
+                return;
+            }
+            await parent.closeMenu();
+            (_a = parent.querySelector('.xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            this.mobileMq = window.matchMedia(TOP_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onViewportChange);
+            this.isMobileCascade = this.mobileMq.matches;
+        }
+        this.connectParentOpenObserver();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.timers.dispose();
+        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq = undefined;
+        this.disconnectParentOpenObserver();
+    }
+    connectParentOpenObserver() {
+        this.disconnectParentOpenObserver();
+        const parent = this.el.parentElement;
+        if (!parent || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.parentOpenObserver = new MutationObserver(() => {
+            this.scheduleParentOpenCheck();
+        });
+        this.parentOpenObserver.observe(parent, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    disconnectParentOpenObserver() {
+        var _a;
+        (_a = this.parentOpenObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentOpenObserver = undefined;
+    }
+    scheduleParentOpenCheck() {
+        this.timers.scheduleCoalesced('parentOpenCheck', () => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.focusBackRowIfJustOpenedOnMobile();
+        });
+    }
+    focusBackRowIfJustOpenedOnMobile() {
+        var _a;
+        if (!this.isMobileCascade) {
+            return;
+        }
+        const parent = this.el.parentElement;
+        if (!(parent === null || parent === void 0 ? void 0 : parent.classList.contains('xpl-top-nav-item--dropdown-open'))) {
+            return;
+        }
+        (_a = this.el
+            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    renderBackRow() {
+        var _a;
+        if (!this.isMobileCascade || !((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim())) {
+            return null;
+        }
+        return (index.h("xpl-top-nav-item", { class: "xpl-top-nav-menu__back", label: this.label, onNavItemClick: this.handleBackClick }, index.h("xpl-icon", { slot: "leading-icon", icon: "chevron-left", size: 24 })));
+    }
+    render() {
+        return (index.h(index.Host, { key: '314c42b389883edceb333473d9bb97776e1f18de', class: {
+                'xpl-top-nav-menu': true,
+                dark: true,
+            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), index.h("slot", { key: 'a6b4e2c916ccc9c0cc1d5e7e6d03b2ad6032f7ac' })));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_top_nav_menu = TopNavMenu;

package/dist/collection/collection-manifest.json

@@ -68,6 +68,7 @@
     "components/xpl-top-nav/xpl-top-nav.js",
     "components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js",
     "components/xpl-top-nav/xpl-top-nav-item/xpl-top-nav-item.js",
+    "components/xpl-top-nav/xpl-top-nav-menu/xpl-top-nav-menu.js",
     "components/xpl-utility-bar/xpl-utility-bar.js"
   ],
   "mixins": [],

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

@@ -50,13 +50,13 @@ export class Accordion {
             bordered: `xpl-accordion--border-bordered${this.expanded ? '--expanded' : ''}`,
             bottom: `xpl-accordion--border-bottom${this.expanded ? '--expanded' : ''}`,
         }[this.borderType];
-        return (h(Host, { key: 'ff0111bb0d2b814b01369098582f4712f26806a2', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: 'ce80627acef0fcae1914b7dfd00634c29a4889bc', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '1a4c0ca7b81c6d7a99947721e2391fe220fdf0e2', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: 'a3026492eb4a5c0e3f1b723c7dcfb14bf16be32a', name: "heading" }, this.header), h("xpl-icon", { key: '696b5c177ac0be72083d26f502235c9191f93fa9', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '60ba182197394b4709e14b94defe6357d2e6f3b2', class: "xpl-accordion-description" }, h("slot", { key: '4e474fd39243694dd7ff70fd02ed5ab05c5eb217', name: "description" }, this.description))), h("section", { key: '183e846fd9d98a7998381d0fa3461bc17ebed2b1', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
+        return (h(Host, { key: 'bae6a1bb97a21f3f49792be58fc72941ce5d8bed', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: '255fc29fec4cdcc45f8e02daef062f35c5b8b74b', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '0e5454de19424b6412b01c50227bc001e6ab5b3a', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: '438e8876c6c1c1b04282ce4d978284e3d6f7fa9a', name: "heading" }, this.header), h("xpl-icon", { key: '055818cbd1606ad560e4fa172c3d1130a6831f5f', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '45f9ec5e1b6b4f6d21f7b126972543849353747c', class: "xpl-accordion-description" }, h("slot", { key: 'af85f48df4ddf572f5bef6da49c852152f44cc06', name: "description" }, this.description))), h("section", { key: 'fc2c6d12354cb6e972cf82ae988e647ea0a0dc26', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
                 ? {
                     none: '',
                     bordered: 'xpl-accordion-content--shown-bordered',
                     bottom: 'xpl-accordion-content--shown-border-bottom',
                 }[this.borderType]
-                : ''}` }, h("slot", { key: '8b0ecdcf8ca0a2d032d56fe7542e92df6155c714', name: "content" }))));
+                : ''}` }, h("slot", { key: '9fe9c25e6180a84cd73fec1a69984455417dc225', name: "content" }))));
     }
     static get is() { return "xpl-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-application-shell/xpl-application-shell.js

@@ -35,7 +35,7 @@ export class ApplicationShell {
         navClasses += this.navOpen
             ? ` xpl-application-shell__nav--${this.navWidth}--open`
             : ` xpl-application-shell__nav--${this.navWidth}`;
-        return (h(Host, { key: 'bc94a18433120a5f0bdf01e642890b3ccea46ec7', class: applicationShellClasses }, h("div", { key: 'aa5a35a385630256536b5d57b9f3e6f9e0e47dbc', class: navClasses }, h("slot", { key: 'baf26b14dd158cff8c06da148f5c0d7fc915465e', name: "nav" })), h("div", { key: 'e16b69bbb05a724bb0dccf4cdb066da0f4f97a1d', class: "xpl-application-shell__subnav" }, h("slot", { key: '0f754f17de56dd63e626f9735daf7e9370f2c0c3', name: "subnav" })), h("div", { key: '85e95a30352bf566dcec928ddbb46f0129010e5d', class: "xpl-application-shell__utility" }, h("slot", { key: 'de2d4c89a9b323db0b4854d091cdfec86ede8373', name: "utility" })), h("div", { key: '9e121b26e8315dd7d3202de4866e5a1b827f6bf8', class: "xpl-application-shell__content" }, h("slot", { key: 'db97073dad39912f98b196d42ce6b986d2426b6a', name: "content" })), h("xpl-backdrop", { key: '32f98a170a3ee0104e4494f63fe8695e780067c3', onClick: () => this.navToggleHandler(), class: {
+        return (h(Host, { key: '1e7abbb1e45ea9cadfa9528ae2053f8239e69242', class: applicationShellClasses }, h("div", { key: '5fa3455f3de406db9bf392ae14a515f7fe603d59', class: navClasses }, h("slot", { key: 'b9ee294553892cc2235f9b2b4c3503d293d56ddc', name: "nav" })), h("div", { key: 'dc6ad7c9288385a47e1d6992bef56ceafcd04603', class: "xpl-application-shell__subnav" }, h("slot", { key: 'b31965275416b556194f4f65e4b66bf72f531779', name: "subnav" })), h("div", { key: '664d58b3ce69d7106ead13fe1a6a7a72cec0cceb', class: "xpl-application-shell__utility" }, h("slot", { key: 'd44f3614b627099443c70f23f258016a66d42716', name: "utility" })), h("div", { key: '0f8c629b737114fe40ae3bf3d2fbe3d18e3af0b9', class: "xpl-application-shell__content" }, h("slot", { key: '814afd80ea91d4b2859e3619e499791f728eb22b', name: "content" })), h("xpl-backdrop", { key: '490bf22787f1920f500f75eabf6a692e545d0ea3', onClick: () => this.navToggleHandler(), class: {
                 'xpl-application-shell__backdrop--open': this.navOpen,
             }, relative: true })));
     }

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

@@ -4,7 +4,7 @@ export class Backdrop {
         this.relative = false;
     }
     render() {
-        return (h(Host, { key: 'b2d74c6cd60e419b212078d16258a9cbd5716149', class: {
+        return (h(Host, { key: '7d5a73e7d7927828e0cb1a7cdca6648c4512cc5a', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,

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

@@ -27,7 +27,7 @@ export class Badge {
             [`xpl-badge--size-${this.size}`]: !!this.size,
             [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
         };
-        return (h(Host, { key: 'c9595f3e4d3d9e60567818b393eed6523167ebca' }, h("div", { key: '725533575abf1cc96546f4c0beb9c7d02fca435e', class: className }, h("span", { key: 'd8f32af9c1b05b07d72ec9fa60f0039899a7863e', class: "xpl-badge__label" }, h("slot", { key: '848e2bb6d6755cca1ab7060023a81e115f6d4a48' })))));
+        return (h(Host, { key: '3a2ab519bb627a1e46bc7686c6aafdcb3c789822' }, h("div", { key: 'e9ebf0d6a9a6a6f516065ceb969aca5f68cbb3ee', class: className }, h("span", { key: '1bd6735a1a67a9720424833a213fcde9e5e6db46', class: "xpl-badge__label" }, h("slot", { key: '397cb4768204c4b4a2dd7cd85534270a165776d8' })))));
     }
     static get is() { return "xpl-badge"; }
     static get properties() {

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

@@ -56,13 +56,13 @@ export class Banner {
         const actionState = this.getActionButtonState();
         const isHeadingPresent = !!((_c = this.heading) === null || _c === void 0 ? void 0 : _c.trim());
         const isDescPresent = !!((_d = this.description) === null || _d === void 0 ? void 0 : _d.trim());
-        return (h(Host, { key: '9d4ced7103ad43590be34ae643e90e998d826d2c', class: {
+        return (h(Host, { key: '6d137a4577f93942bcb41b3b2f67f3d851bee454', class: {
                 'xpl-banner': true,
                 'xpl-banner--section': this.isSection,
                 [`xpl-banner--${this.appearance}`]: true,
                 'xpl-banner--truncate-desc': this.truncateDesc,
                 'xpl-banner--no-icon': this.isSection && !this.hasIcon,
-            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'd7c698d6da5711ef23d624b6cae03e9a0764b8c7', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '01e3c3cd3e28a09943754972112f5ecef61c2e42', icon: this.getIcon(), size: 24 }))), h("div", { key: 'b95abb8d1609a97d869fbd7b88124a5e5e1b45df', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'a792cda8b66f549522d6288330005ff60e5cca3f', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '6529492113bd3f893ec0cfb8387dbd58701d99c4', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: '14b20dc26f2cf98acd8baac75802dba11eaa84da', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '44bf1a434eaa7d8a629beb64ffc9d097118d8c09', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: '958284fccbb12b89192d3211476bbaceb31ee16a', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'a59aaf2f9b48db433f699877a2259c8587f7aa9a', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '3a374616b00743d3ee66e9f2fce50027e21ebb25', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'e854bc2ca363a23e3e6cb9eb512886c325e09362', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '14a0916310e6e0b68f9a36b4e1714cee015ad22f', icon: this.getIcon(), size: 24 }))), h("div", { key: 'bea8f5cafe66e649926aa0ee634b71ffa0f1b73e', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'f18ae9e7d4014211eea3a160fb05945149705832', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: 'e36c00dadf6bd0d35b88c9a091d140573e6b6677', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'dda19df805050c93d5c5ea8214f97084a5b0c0eb', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '5bd3047d1b8250ed28a7720fb09f316a3b45bae1', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'c0f0a32b69384194e4033ae85eebc788e005a8af', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: '721faa946e9fc896a6bafafd8450d81f50e982ed', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '4c27dbd8b394839ed98f5b4e2d4720eba1b0184f', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
     static get is() { return "xpl-banner"; }
     static get properties() {

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js

@@ -7,7 +7,7 @@ export class BreadcrumbItem {
     `;
     }
     render() {
-        return (h(Host, { key: '183fd6614da5188a84d5dc7ce9d9f2d5144e7f4b', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '416621372ac59874f8d136ba3194f097f487eae2', role: "none" }, h("slot", { key: 'a0fcee52d63596c6e96a94ebd9e069f4275cf996' })), h("span", { key: 'b076324da264cfbf9efd97c92a73b12517dd6429', innerHTML: this.chevron })));
+        return (h(Host, { key: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', innerHTML: this.chevron })));
     }
     static get is() { return "xpl-breadcrumb-item"; }
 }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Breadcrumbs {
     render() {
-        return (h(Host, { key: 'dc04f3dbc02d0e52efd258ed653e236e3a3ef8c0' }, h("nav", { key: '87a8ae67ad49e7eff110dac3b98f818aa7bc7bbd', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '80122b0a41e6b9542e1560de325266a3f27ddc86', role: "list" }, h("slot", { key: '7aa415c279281b0566aaf0e6f943afc5ff698e8a' })))));
+        return (h(Host, { key: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
     }
     static get is() { return "xpl-breadcrumbs"; }
 }

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

@@ -51,7 +51,7 @@ export class Button {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2f4d6c6964aee895a81cff28401c3e48895954e8', class: {
+        return (h(Host, { key: '4fa90ae10b235af3fbfadb40097c5cc238e40dc6', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,

package/dist/collection/components/xpl-button-row/xpl-button-row.js

@@ -6,7 +6,7 @@ export class ButtonRow {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: 'cd6436989f07af18d1e696a26e3e990d99859b2e', class: "xpl-button-row" }, h("div", { key: '67a9ab3127bdd31d416d716bf06a2548d4b04341', class: "xpl-button-row-inner" }, h("div", { key: 'f4c9e84868a5476500ffd65381fafe6c427e63ad', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '9c264293c00634759559c8109657f8a58451dc06', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'df3443bd9afa937c4936e7b902da146f4a999f56', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '85912cdbc02ac6587085564dbfb4f0647b656d7d', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: 'cbb4302e9853d751b7b75e386c6d9441037c301e', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '10991142b7062283d129ba3428e5d3f1c060a973', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: '9cd6193bed50a82872803b95bd5fc56c9347dd1a', class: "xpl-button-row" }, h("div", { key: 'eefebfcad667ceec154117b9318e2ff88c420f8f', class: "xpl-button-row-inner" }, h("div", { key: '94633d213b36306cf51a70e04d21a964ca13c430', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '2e47003e6f35f5acd7a6129c903d4591cc10759f', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: '05397d469cd97188f56934354850a8c3cd77e4d6', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'd3f6a953144e8e64aa34a37c9c80f7363dc0ee9c', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: 'abd03f3c33a48517a7f268ecf302767e605a2400', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'be417c38b0427e9cdbbacb700d4651677cff8ec9', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get is() { return "xpl-button-row"; }
     static get properties() {

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

@@ -52,7 +52,7 @@ export class Calendar {
         }
     }
     render() {
-        return (h(Host, { key: '180c1c356f07920c05487c50dd534284004cfce5', class: "xpl-calendar" }, h("input", { key: '6f46ef2a9c81043eb65a66208e71ce7e8504abea', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (h(Host, { key: '8693d0e9612e2995b03f6392387758c843db0be5', class: "xpl-calendar" }, h("input", { key: '29077057568f288f42d4e0eb94e2fa83ce6ea9c6', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

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

@@ -11,14 +11,14 @@ export class Checkbox {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a0eae3b6c390a83ddc1eacea1b0d98a08df9d614', class: {
+        return (h(Host, { key: 'd173bab038a25f785864e5614b29ec2fde832786', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'bbe0a186b0184229ac1090bbb7d0354c01cb7b62', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'ab9374abf1c8578df2e1177755afd495f245dcb2', class: {
+            } }, h("input", { key: 'badfc1e403ba5b51b757823354c4cec86f678116', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'b56888525a7b3d9544d8595b71d1ffe36f00e7b8', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '28ef92d6f0cd46c50a797131fc3f0ea1dcaaa751' }), this.description && (h("small", { key: '87e25deaad3fd000b4dd313e07f7317365f8db07', class: {
+            }, htmlFor: this.id }, h("slot", { key: 'a5f06411725e10f5e5fafc33ff5e8f4adfec9e5b' }), this.description && (h("small", { key: '16ac47d9316e4a78f732cb3c0851efd8eaf903f2', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));

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

@@ -36,7 +36,7 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: 'b2a2b4630df394470daa56346215ad1193727557', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'd2329582e74d40946d23ae522b40130b1d780522', class: {
+        return (h(Host, { key: 'a5ced1a4f1e3e5323dbc247c66ddf5ad489edc5f', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '70f4738e8f5d1e1a72858d139eb4a3b531973449', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -4,7 +4,7 @@ export class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '9ae6e297af2b7cf5b40ae9848a1479d6e87b6a3e' }, h("main", { key: '2ca4359f4090262b7186689207b4725883e5378e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '6e4e1e2947eb4e7e8d5d9201b48074cd9cb102ed', class: "xpl-content-area" }, h("slot", { key: 'bf8de84eb947b3ce40fd5df93169f382d3a896cf' })))));
+        return (h(Host, { key: '926cdfb1b6e52baabfb46bac6d837c5f1ba45183' }, h("main", { key: '71dacea3a70c90ae0471a1ec3c39add237faa119', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '5e53fe46cf9dc459d4a9d1f0540464b8bd695d8a', class: "xpl-content-area" }, h("slot", { key: '2f74936219cf75dccd583ee01a173807f0f80079' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Dashboard {
     render() {
-        return (h(Host, { key: 'e3736f9e707de77addac539a4e7f0950133d0e08' }, h("dl", { key: 'de1add10d2f37c0a541d2f60f7156cf920eabd69', class: "xpl-dashboard" }, h("slot", { key: 'acd2becab0a555bf2599d0b2db4ebe0c9d744744' }))));
+        return (h(Host, { key: '1eb93f83a05cfe198aed91b0d8771bdbe6e7aaee' }, h("dl", { key: 'bdb8f39b30d318ae25a203ac75966f12a9299b35', class: "xpl-dashboard" }, h("slot", { key: 'caf043e38777ac0a397782957f0936bb34436f63' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -31,8 +31,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: '6220a2a6ba1ac0744ba62e701c015964c05bdea9', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '44da16abf81bc72a9c777f19d7c22ab998f55e94', class: headerClasses }, h("header", { key: '4ac3524629d31f3e74a245eef3e4ed6fc3a6832a' }, !!this.leadingIcon && this.icon && (h("span", { key: '53f7476c16eee3432e43a6bdebf744caeb9f9829', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'af9ed04389ba00e4d0c79f978c1364a0530b1db7', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '164396b94252374a1978cadf336ca74685fe9ba4', name: "title" }, this.name)), this.link && (h("span", { key: '31ce9874f295b1fef5705a28d81365d66a67a18b', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f5d169eeb150ed2eaa663ca1388e1075e61f6b7b', icon: "chevron-right", size: 16 })))), h("dd", { key: '59711740ae613b61ab5ae463cbfc2aaed500fdc9', class: "xpl-data-card__body" }, h("div", { key: '35571a65469ba1c413114a50233340057f5df200', class: "xpl-data-card__left" }, h("span", { key: 'b1409661fc43dea4126e423d5dc74fe4b0a5ef5f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '634b386799ed06de06ca212005d20e6f79c54124', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '9e88749b9c2efd65d22ec92881eaf316103ddb97', class: "xpl-data-card__right" }, h("slot", { key: '467388943d1c8a6bbfb334e6ab763dc7e92e59c8', name: contentSlot }))))));
+        return (h(Host, { key: 'cbf0c9eb79fbd3e66c683e821e9b992d46d5ec1a', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '92bc8a02b1acfa3c080a2a975d43118be54f10d5', class: headerClasses }, h("header", { key: 'f6a0baa73ab0e9d3a6eb9252acba54677a1083dc' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dad99548c0ded82140b345e9887747c31ee9f6c7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'd591758d2ce1647ea67f03a27e4ae2efd29e4652', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '07760d38b11971d96d7841c9897aa13481ea234c', name: "title" }, this.name)), this.link && (h("span", { key: '6ac3587f2ab1375cee605b22fe515e2c9a489e72', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '160ebeeedc59a31e0ea3480dd393ec4623afb831', icon: "chevron-right", size: 16 })))), h("dd", { key: 'dcf0703823e9f58f71a112a83de3d65cd43e1ae1', class: "xpl-data-card__body" }, h("div", { key: 'd7551579d17cfebed3dac59d32b56eb166afb530', class: "xpl-data-card__left" }, h("span", { key: 'c5c412c76f9785de5ff8686db3dcb71540b79b1f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'b33a9a133cf0a18deaccf6e3772ab1a797f9fa1f', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: 'e9dc031341b49ebf121cbe8cc081df6978aa13ad', class: "xpl-data-card__right" }, h("slot", { key: '37c8414e9dc60052f1d5a69d86ece17b7cdbc1da', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {

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

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '8b6563d7c6c85814d5dc0527246c90eea82c0dbd', class: className }, h("span", { key: '2935de22e9c70183386b5f6e1e18ff6437a42a41' }, h("slot", { key: '10e4e4c5c861647302217f78af0a369ad330c410' }))));
+        return (h(Host, { key: '1926b1e92a89dc5039042d29491f246cf3900efa', class: className }, h("span", { key: '492651208216149bfd4d2ed7cc8610b2bc8b05ea' }, h("slot", { key: '1e8b9e121ab1cb946b7a13d2bacbeea9a490a289' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js

@@ -20,7 +20,7 @@ export class DropdownGroup {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (h(Host, { key: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
+        return (h(Host, { key: 'e6326e88bf725b9f3f9c2701dbb6e62a185ad2e7', role: "group", "aria-label": groupName }, h("li", { key: '92b0a065e228bf368fc8a6214d7d3d86c986f4dd', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '60cda98e80262dfd23b5fe0b18370d8b6245d39a', label: groupName }), h("ul", { key: '7a7c186e05a04286650d7292e156deb41638f703', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'da798e46d297ec28a0880cf04e4f0e20220ab28a', name: "options" })))));
     }
     static get is() { return "xpl-dropdown-group"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DropdownHeading {
     render() {
-        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
+        return (h(Host, { key: 'e4444b617fe160dbf259f4ecc2aafd6166859dce', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '1e1e37499c0add5b53fcd0a836f97fa5b9e1a9bd' }, this.label || h("slot", { key: 'c310120a37646452e989db2ead01d77a89b96f0d', name: "heading" }))));
     }
     static get is() { return "xpl-dropdown-heading"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -49,11 +49,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', class: {
+        return (h(Host, { key: '66ffacb152e80f270877a189488048ef6b36b7af', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '274fa639d506ef3feb5bafc3f0b21ed8bf80e95a', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'e7f63ede84adca57d99baa06dc1555d3afacd02c', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'cc0874abba079616e8516d366981a38ddef550b1', name: "option" }), subtitle && h("span", { key: '37cd186edb0de3f4c33b9faa2dfa983424a011bd', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {

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

@@ -387,7 +387,7 @@ export class Dropdown {
         const shouldVirtualize = this.isVirtualized;
         let listContent;
         if (!hasOptions) {
-            listContent = h("slot", { key: '859e13193ab2db2f10197aaf8b9699a177d480c6', name: "options" });
+            listContent = h("slot", { key: '7a604ed002d4c412eb709aa7c3ef1a9e80f614ed', name: "options" });
         }
         else if (shouldVirtualize) {
             const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -395,18 +395,18 @@ export class Dropdown {
             const start = Math.min(this.virtualStart, total);
             const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
             const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
-            listContent = (h("li", { key: '2e197eebf453591ec714ebbc60a6c8ba57646cb9', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+            listContent = (h("li", { key: 'd7730538dfae58a6efc6a8971e0078b28fc5b9de', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
         }
         else {
             listContent = options.map((option) => renderOption(option));
         }
-        return (h(Host, { key: '0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (h(Host, { key: '282d3bc09a8ce0e63d55bbc9707936afe0efae01', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
                 'xpl-dropdown--virtualized': shouldVirtualize,
-            }, role: "listbox" }, h("slot", { key: 'ff204bc8c903a5d0a47b95521781df2467c9b4a7', name: "header" }), h("ul", { key: '2685e64254a9424f9da75787c3d18ff182e9f7a1', class: "xpl-dropdown-list", ref: (el) => {
+            }, role: "listbox" }, h("slot", { key: '977cfb27b24bcecaf22587bd2e6350ad52743cad', name: "header" }), h("ul", { key: '46274999327ffdb9749a012b839ef124df4d72d2', class: "xpl-dropdown-list", ref: (el) => {
                 this.setListEl(el);
             }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }

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

@@ -51,7 +51,7 @@ export class DynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '3d5c3e5aea065c98323fbdbf17392af63975c9dd', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'f6076fef5e85fdf22b03e532e920396ce5f6ce63', name: "header" }), h("slot", { key: '3b94b04b8f6b7a1cca9277161c0c32b117ce315f', name: "body" })));
+        return (h("div", { key: '7b1ac3b1461e69fb7001baf63c256abcc65cb3a3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '5d7484d4517b132dbb2400f7c63da3be14064586', name: "header" }), h("slot", { key: '292c502f9cb58467bbb69a3eeacff51af557d826', name: "body" })));
     }
     static get is() { return "xpl-dynamic-table"; }
     static get states() {

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

@@ -19,9 +19,9 @@ export class DynamicTableCell {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: 'e6e9a3695c9d8ca3743b188284bc8e69f50f3397', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '18dbf3410d7ecd8ccf08b4b7e8927c50777967b8', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'abfa632a3ac88d663acaaacbc431d07c9da4b375' })));
+            } }, h("slot", { key: '7efb10712db0c91fb2f745f23946270c488885a5' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {