@xplortech/apollo-core 2.7.0 → 2.8.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: 'e27ee4f9278fe24ab710504fc5a83b4b92b74607', class: "xpl-button-row" }, index.h("div", { key: 'e7ea1f3ef4dd52fd3026e47679f1e2663f315a98', class: "xpl-button-row-inner" }, index.h("div", { key: 'da4ccf63f6f00d83f829fb7cf1e2d20c76cffa33', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: 'cb3d7caeba1d66f0f752e19b33a31d627bc26911', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: 'c7342cf52d016482c2ab8e33ecd8c3616061c107', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '1ed372cc087ef1a0c650282f90aa0117b35745bc', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '56d88d07742c5e2900831f3a1ecf026d05299632', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: '5bd13162e70b4fc59996b62f507cfc2d4e7418d7', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (index.h(index.Host, { key: '184ee5671a9d1bbb967dd8e6e4427df30d62a007', class: "xpl-button-row" }, index.h("div", { key: '44b583d0899af8b158f7093b87918f0843366e44', class: "xpl-button-row-inner" }, index.h("div", { key: '31754284b0b87a1e58ccbded4b46b453c3b717ca', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '27a9c164af5e72a66380dfda4072cfb5d3b3a34d', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: '7ba9299532405aa9dceca481dae675a5129d2b51', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: 'bcb3524b921e6de30a1f6d870e04eeb9592762bb', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '5e10208c958143476df430b7f9877965b7fadc08', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: 'ebb24794d37fd6dce72fa776b97ec59edeaab1dc', 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: '6f3d6abc79ea25a9f80d8fa15279fda6b4ba5d81', class: "xpl-calendar" }, index.h("input", { key: '57f4be2ffc9d40943d20f7325cad1f81b0addedb', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (index.h(index.Host, { key: '56cd65b62892b0c3e939f6cd77e9ba507baf4a68', class: "xpl-calendar" }, index.h("input", { key: '296222d3b6c0bf3e7c400d4d8c40d7d48774ea57', 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: '924f54186ae2eb07bb4fab65eed7815f60be3a95', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (index.h(index.Host, { key: '7cfa2d58f634e41ccf1604a581fcc83a2b51676f', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: 'a18ef630d9f7f4c8b4079f2d83afe6b28700fb90' })));
+            } }, index.h("slot", { key: 'c6a04082cb8aa1089d9f6cb82f3db8d7f0addf6e' })));
     }
     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: 'b1a117c4961d5a2f618510159b292184c2c1aed3', role: "row", class: classList, ref: (el) => {
+        return (index.h(index.Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, index.h("slot", { key: 'be0ef005b0ed337272e92d29dda61dcbe966c4ed' })));
+            } }, index.h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
     }
 };
 

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

@@ -56,7 +56,7 @@ const DynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (index.h("div", { key: '9ae7568410463f24a85e39da8b14dc70e99730c3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: 'c84c62c9eb47d1bf02c6e7d8a8c3d59542ef5f7b', name: "header" }), index.h("slot", { key: '26012976f5d8474f4a648816e9dc92355611177a', name: "body" })));
+        return (index.h("div", { key: '8f33da5fa8815400447b1690172bdaddd1079c1a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, index.h("slot", { key: '221aced83acf1fc4c904533eaedb1cd79914c5d3', name: "header" }), index.h("slot", { key: '6087119ce1499e94a30d09a1917d9371331f6add', 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: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, index.h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
     }
 };
 

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: 'aeee950fb242a14f50ceda1d199cf427597b70f6', 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: '9b45179112de8d1ac309520425a1a5c340493487', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '4838c93a72df9ea794b3bbbd7f78f3e84a606109', class: "xpl-large-card__header" }, index.h("header", { key: 'eb4b2e8515be1e0763595e1cf646dc2b25bfb739' }, index.h("slot", { key: '62fdafe4b8ce03af5ff353c3ffa377fa547b572b', name: "title" }, this.name), this.link && (index.h("span", { key: 'ac0086a3402af5f12668a560ad418aaf40a56357', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '74eaffc571098a88d69d7248166889671ba441a2', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: 'd7d2499b7d8da9c09062ea5a456b588e52df2d82', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '652e32e8b200e783f03608f97cbbcc70f59421e3', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '9d9f285d34bd8e2b6666577bd2023ae474636c4c', 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: '12ad41e2631d3cbab84b0bf536ffaf4fc31e7f8b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", { key: '54c0fcc49ddda8846279b8efc4afe0244e054211' }, index.h("header", { key: 'a1803d0c15541eb7d8b84d17d6e8c5613472dd7e', "aria-label": "Sidebar Header" }, index.h("slot", { key: 'cee7321f97dc59f7d7e844ecd8fab6ba656b92e9', name: "logo" }), index.h("slot", { key: 'f33cd91b4ad2e7dad79f89401477c7c2cc7636aa', name: "brand-name" })), index.h("div", { key: 'd7951aa7282d7be3107b15196679f2e55c76d847', class: "xpl-main-nav__main_section" }, index.h("slot", { key: '716d5be941f65ce57c2a9f12e4eeaedef83c0dd0', name: "navigation" })), index.h("footer", { key: '880b9fb98c5d0d2b4133cacb73a7c339590bf8bb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { key: '005c2efc4a3490e50a2b692d0e9dc7e2ce76d938', name: "footer" })))));
+        return (index.h(index.Host, { key: '122bf1f28c4fb1e460185989b2d517f1ddbfb22b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", { key: '4ed8ce484b394adee98ac16056ebbabcadd31625' }, index.h("header", { key: '829b7904323aeea21922a8d4a8fa33141cfa7913', "aria-label": "Sidebar Header" }, index.h("slot", { key: '8a6ea72fa4a1b26f9825a36b4ac7e64c9dbf476c', name: "logo" }), index.h("slot", { key: 'bf049e9ee7b83af1c4ebfef21681edcb35de9364', name: "brand-name" })), index.h("div", { key: 'a0ce70ccf5e4bac6346711127fba5278963910c1', class: "xpl-main-nav__main_section" }, index.h("slot", { key: 'bce360027342a1ef3e009bad6bc28e44c64dbd04', name: "navigation" })), index.h("footer", { key: '0b5f2e6cc890e4257f5e5503302492a236950f87', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { key: '01dbe4d3834e1bc67b51108600688544e549ecde', name: "footer" })))));
     }
 };
 

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

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-BQ97-AWw.js');
+
+const TableHeaderCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sortChanged = index.createEvent(this, "sortChanged", 7);
+        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 index.h("span", null, this.label);
+                case 'checkbox':
+                    return index.h("xpl-checkbox", null);
+                case 'icon':
+                    return index.h("xpl-icon", { icon: this.icon, size: 20 });
+                default:
+                    return '';
+            }
+        };
+        const renderSortIcon = () => {
+            switch (this.sortDirection) {
+                case 'none':
+                    return index.h("xpl-icon", { class: "sort-icon", icon: "arrow-down", size: 16 });
+                case 'asc':
+                    return (index.h("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-up", size: 16 }));
+                case 'desc':
+                    return (index.h("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-down", size: 16 }));
+                default:
+                    return '';
+            }
+        };
+        return (index.h(index.Host, { role: "columnheader", "aria-colindex": colIndex, class: `xpl-table-header-cell ${this.sortable ? 'sortable' : 'non-sortable'}`, style: { width: `${this.width}px` } }, this.sortable ? (index.h("button", { onClick: () => this.toggleSort() }, renderContent(), renderSortIcon())) : (renderContent())));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_table_header_cell = TableHeaderCell;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('./index-BQ97-AWw.js');
+
+const TableHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '7b36c9e640bd43ac38ea2625e7600e8699a13c5f', role: "row", class: "xpl-table-header" }, index.h("slot", { key: 'd03fe894a829477b6bf25dbd6dfa724b224b8d42' })));
+    }
+};
+
+exports.xpl_table_header = TableHeader;

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

@@ -6,8 +6,13 @@ var v4 = require('./v4-D4KzFnn8.js');
 const Toggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.toggleChange = index.createEvent(this, "toggleChange", 7);
         this.variant = 'default';
         this.id = v4.v4();
+        this.onChange = (event) => {
+            const target = event.target;
+            this.toggleChange.emit(target.checked);
+        };
     }
     render() {
         let containerClassName = 'xpl-toggle-container';
@@ -16,13 +21,13 @@ const Toggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (index.h(index.Host, { key: 'b501bb268b9fbc2756544b17481ae78ee3144960', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '34d2bb6e6c4538a863f333e8124fbde9ec2544cb', class: {
+        return (index.h(index.Host, { key: '2665ccecd2df94b7ed7443e2ecb6265fca7f235f', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '75292b431419e1d34c127a82d61baa1ee024a2bb', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: 'f9f5ff29d428e776566d0a12e62ab7efe311feb5', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '772e34c7d553faee5b1dfc448ecb95706dc3e8df', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), index.h("input", { key: 'f9b1baf90d9336711ce1354a66770c7423551af8', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && index.h("label", { key: '49f803372904b5b87394a55c67f428401cd14379', htmlFor: this.id }, this.label)));
+            } }, this.description)))), index.h("input", { key: 'afec8fff16aadca330c804832dbd41c4b10f5caa', 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: '1b25d01805915cb2dacf03ad9340beec61565bcc', 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: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
+        return (index.h(index.Host, { key: '156bc52063283c17215e1d3a90c25939ae92685b', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, 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" })))));
+            } }, index.h("div", { key: '184e28d57a16d8ba6e10f29a95c931a036f44515', class: "toolbar" }, index.h("p", { key: 'ff6a7137db216c71859eac4398bbaf8bc6fe18f9', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'a610539a08383a3d1d3dad8d95a8b75f43eaf1a3', class: "actions" }, index.h("slot", { key: 'dd8ea3150b40926ab40f36d38770daaa969a6fff', name: "actions-left" }), index.h("slot", { key: 'b51f8940fb52dd6880841a917574f782e0d0c72c', name: "actions-right" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -58,13 +58,8 @@
     "components/xpl-tab-panel/xpl-tab-panel.js",
     "components/xpl-tabs/xpl-tabs.js",
     "components/xpl-table/xpl-table.js",
-    "components/xpl-table/xpl-table-body/xpl-table-body.js",
-    "components/xpl-table/xpl-table-cell/xpl-table-cell.js",
-    "components/xpl-table/xpl-table-footer/xpl-table-footer.js",
-    "components/xpl-table/xpl-table-footer-cell/xpl-table-footer-cell.js",
-    "components/xpl-table/xpl-table-header/xpl-table-header.js",
-    "components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.js",
-    "components/xpl-table/xpl-table-row/xpl-table-row.js",
+    "components/xpl-table-header/xpl-table-header.js",
+    "components/xpl-table-header-cell/xpl-table-header-cell.js",
     "components/xpl-tag/xpl-tag.js",
     "components/xpl-toast/xpl-toast.js",
     "components/xpl-toggle/xpl-toggle.js",

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: '18c7c61474cbe060a50f9774071929b39408d102', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: 'fd156541648734e8a2f9fc812fcb93d3786ec2f3', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '4ee0e1b2291317a76db0b29ee006d62927d056dd', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: 'f9eb1b84091c661dace111f7046c1f82e36f6d10', name: "heading" }, this.header), h("xpl-icon", { key: '053a55ae04a3ef4265bb4efaba29a4740282c962', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '71888857c06b4cbdea758c3c95a7b587f5357327', class: "xpl-accordion-description" }, h("slot", { key: '88bc6b8d6e690e8ff45ce380b38e504b8c2d79de', name: "description" }, this.description))), h("section", { key: '8588e3bc3827a15aed4eedf36943fabe4576c5fe', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
+        return (h(Host, { key: 'bd94adc64eebb9b2b37b899700457a88fa00bdf0', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: '3801db3bfa5c3a8c6ac0c21c20f60a1519ca4168', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '80cdadc37c28fea139f8ec21c770760bf3e25050', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: '28341a76482e2ddb2b8c1f277e48816a6f8d83d4', name: "heading" }, this.header), h("xpl-icon", { key: '9b0cde7d7927677dcd545783accace4a9cdcce03', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '1d2be2ffce23d2cfc017da95634d046dc66e5121', class: "xpl-accordion-description" }, h("slot", { key: 'e993274ea2f6963290a2015b3849bda8ee7f1f3d', name: "description" }, this.description))), h("section", { key: '6054b44f3b027feca7567f1bf13b06e78a78fe1a', 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: 'e36113f90992d45665bc4bed296f8c4d631e18be', name: "content" }))));
+                : ''}` }, h("slot", { key: '53e22f8fcd1c3ebb2354bbc3d01e30ec5cfa804c', 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: '9e5d0140f03e53b4f9cceead9efa401e2843cd04', class: applicationShellClasses }, h("div", { key: '003a9884e84a657c84a1b4501fc864f028e07a45', class: navClasses }, h("slot", { key: 'ac4e14ff20780165f3c00339fa74f0c182301729', name: "nav" })), h("div", { key: '78569b66d89482e423981aa177f1a41ec8516274', class: "xpl-application-shell__subnav" }, h("slot", { key: '70b8b077b725a892d4c4f2a7835c05c6f1900ea9', name: "subnav" })), h("div", { key: '1157ac9ea1f748664322656db45ff74faecd858a', class: "xpl-application-shell__utility" }, h("slot", { key: '9548015f35a610a1fab49911947f398d039701b2', name: "utility" })), h("div", { key: '624e64ab6dfa4b96389077351968d511acf93c4e', class: "xpl-application-shell__content" }, h("slot", { key: 'bf8acb059d5c8dab0cb727c124aea66d9dcd767a', name: "content" })), h("xpl-backdrop", { key: '7db9ac4e5429726e8aedd0e96bd1df57e0e54d9c', onClick: () => this.navToggleHandler(), class: {
+        return (h(Host, { key: 'f61e8399f5a5e935354c817ee0d1386afcddce28', class: applicationShellClasses }, h("div", { key: '4886a782d1511d3aac9df0a90afc38351b94d4fd', class: navClasses }, h("slot", { key: 'd80279f234d498eb51491bd1d6850d7babfd6ece', name: "nav" })), h("div", { key: 'dd26f273261026555a3f73885fd04ffdbbf871cb', class: "xpl-application-shell__subnav" }, h("slot", { key: '3b120224a8d1cb30503514befeb96e3a08fc22ba', name: "subnav" })), h("div", { key: '7ac6b8f10b2dca85e774e1117f9117952a3052cf', class: "xpl-application-shell__utility" }, h("slot", { key: 'd9d4b15e7c3e7bec0edc237df3634c8fd2648df4', name: "utility" })), h("div", { key: '00ee0b5da796ea84731e740a58b162dad8250696', class: "xpl-application-shell__content" }, h("slot", { key: 'bf997f59491a08597089a0531cfecf90c703f565', name: "content" })), h("xpl-backdrop", { key: '84264e5a5da96be74547610e5b8d45195014d34c', 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: 'ce11926c0ef08f0ae9d77fecfa813f20b6eee229', class: {
+        return (h(Host, { key: '072fedf411c5d8671ec2d8a6ff639e5adf93e15c', 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: '6d8b154300f5a676c58d8633c2b5f7514967f764' }, h("div", { key: 'bef0970eb3185b1afb08ece888b63509e69ff15d', class: className }, h("span", { key: '90e51d0f3d74a99268b9a4944a94b6c0096f1ea9', class: "xpl-badge__label" }, h("slot", { key: '5f13f42adbbcfc0698f25687ba27f4bb0c63d5a8' })))));
+        return (h(Host, { key: 'f1a45af398443a5330afe856ac2442aa34cadf24' }, h("div", { key: 'fecb691b2b11414de0a03e119dd63332ade79a3c', class: className }, h("span", { key: '6c4169ea3d4f0f7cdaa03841ec72ac15f9e209f3', class: "xpl-badge__label" }, h("slot", { key: 'c7d96b70e9bcd161c279bf943c2cbc7248e2a53e' })))));
     }
     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: '01e821a96ff2f4f41050a524ed6ec76e8f8ae71c', class: {
+        return (h(Host, { key: '373b38c40719c248968ed93381309584f24697a9', 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: 'e0b8fc78558cb0feff957deda21e9a6009a41ebc', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: 'b1ad22088243b609c67275091a6b7ec0f5bfcd2b', icon: this.getIcon(), size: 24 }))), h("div", { key: '9ae85de66f2092d2f689e881ebf5cb28b442a804', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: '5a4a146c870f4c12abe4a5ef1e5d7aa51d8e7507', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '115e1349f08a077a898556174c7f14c22e43eb8c', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'd2ebd4a9f6bf5902958c071a476da8b5b2888c5c', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '763ce0af40d4a9a5d62f18ee08085a8455819779', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'd59e222b9eb5d766953d26609a48366a32499814', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'ec7d24375a62f20c7309d7b49d88f6db1eb2a891', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: 'f45280a420a3556100cd0ed48c39124d400becd9', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'b12f8facbdad390e2069374163048099a33aa309', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '35ee47db756bc0f6b6cd0a2b0cd890a4ec10ff7c', icon: this.getIcon(), size: 24 }))), h("div", { key: '8aaca62cbd7b3cf353bfb35fc2f679932f2b0ade', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'fded85ef43b5186704195312621a33b7b823d19d', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '1b7386b32891789f8cc425da922f7c3ee60fe5a6', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: '0b4b8e89db7cc6c4a55e207cf0be1b36956fe243', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: 'c15e5cb0ff332f2ca809dcf912fc7a4c68d47538', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: '6f20f721df8eb994ef9935d2c6f634b3460d9d77', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: '2fab1fec767aaed2bb36ee2b40bcf84a48ad6ead', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '7747d3e4aae5426d0e3344fb7aab92a4f003cf4e', 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: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', innerHTML: this.chevron })));
+        return (h(Host, { key: '98314b8841ba9d900dbba227363865efb26faf4c', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '26bf86067dc2348b6ca96243bd1f9513ca187a00', role: "none" }, h("slot", { key: '802b606cce1052ea7fb859260627d6c6801ed78f' })), h("span", { key: '22de35338bf4439a23f8c08a7ea46d1d4f2b68e8', 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: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
+        return (h(Host, { key: '36533f6524e01aed62e293ebe93d8eea34b6b59a' }, h("nav", { key: '6a5562e639044f9d9d12a6365df69c5181f5bbba', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '99463e4808425aa8478a5e8fa2a113831eae1ecf', role: "list" }, h("slot", { key: 'f4d20df3a834f100663786d47881f742c9691969' })))));
     }
     static get is() { return "xpl-breadcrumbs"; }
 }

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

@@ -45,7 +45,7 @@ export class Button {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'dc9baff2fca5d300d4f10d854669fe44ce9dcf2b', class: {
+        return (h(Host, { key: 'fc2207b2f07ecccd8c076846406b7c5d2ed6854d', 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: 'e27ee4f9278fe24ab710504fc5a83b4b92b74607', class: "xpl-button-row" }, h("div", { key: 'e7ea1f3ef4dd52fd3026e47679f1e2663f315a98', class: "xpl-button-row-inner" }, h("div", { key: 'da4ccf63f6f00d83f829fb7cf1e2d20c76cffa33', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'cb3d7caeba1d66f0f752e19b33a31d627bc26911', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'c7342cf52d016482c2ab8e33ecd8c3616061c107', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '1ed372cc087ef1a0c650282f90aa0117b35745bc', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '56d88d07742c5e2900831f3a1ecf026d05299632', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '5bd13162e70b4fc59996b62f507cfc2d4e7418d7', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: '184ee5671a9d1bbb967dd8e6e4427df30d62a007', class: "xpl-button-row" }, h("div", { key: '44b583d0899af8b158f7093b87918f0843366e44', class: "xpl-button-row-inner" }, h("div", { key: '31754284b0b87a1e58ccbded4b46b453c3b717ca', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '27a9c164af5e72a66380dfda4072cfb5d3b3a34d', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: '7ba9299532405aa9dceca481dae675a5129d2b51', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'bcb3524b921e6de30a1f6d870e04eeb9592762bb', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '5e10208c958143476df430b7f9877965b7fadc08', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'ebb24794d37fd6dce72fa776b97ec59edeaab1dc', 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: '6f3d6abc79ea25a9f80d8fa15279fda6b4ba5d81', class: "xpl-calendar" }, h("input", { key: '57f4be2ffc9d40943d20f7325cad1f81b0addedb', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (h(Host, { key: '56cd65b62892b0c3e939f6cd77e9ba507baf4a68', class: "xpl-calendar" }, h("input", { key: '296222d3b6c0bf3e7c400d4d8c40d7d48774ea57', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

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

@@ -6,24 +6,19 @@ export class Checkbox {
         this.ariaLabel = '';
         this.onChange = (event) => {
             const target = event.target;
-            if (this.value) {
-                this.checkboxChange.emit(this.value);
-            }
-            else {
-                this.checkboxChange.emit(target.checked);
-            }
+            this.checkboxChange.emit(target.checked);
         };
     }
     render() {
         var _a;
-        return (h(Host, { key: '278efc899d85f3c69d78eae9c893dd95a5c1a0fe', class: {
+        return (h(Host, { key: 'dd508c61fc68052f2bbdfccd606ea8f0109783f3', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: '40ff6da70e68b75c0fda7df23eccfd04c152a4e1', 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: '19ebb91dfdb4514b563bb20b7fa2ca06294d2d45', class: {
+            } }, h("input", { key: 'c5b482a12c02cb4384444e3d385cccc17a8cbd3c', 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: 'e5ae6eef395457ff6021b008bbb4221e7c36a3c9', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'ceb7f27e19f4256b3c5317e17f4bb8512c6962a6' }), this.description && (h("small", { key: '78a5d2ac044006361a8ce075a2ad8d872f384203', class: {
+            }, htmlFor: this.id }, h("slot", { key: '71ae02b761df01bea00b483e21a9b442b8fbdd9f' }), this.description && (h("small", { key: 'f34f7e323cd9c39ce1094177e7a4d3cf4b06f788', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -70,25 +65,6 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "checked"
             },
-            "dataId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A custom data attribute for the checkbox"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "data-id"
-            },
             "description": {
                 "type": "string",
                 "mutable": false,
@@ -165,6 +141,25 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "name"
             },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -203,7 +198,7 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "styled"
             },
-            "value": {
+            "dataId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -215,12 +210,12 @@ export class Checkbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
+                    "text": "A custom data attribute for the checkbox"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "data-id"
             }
         };
     }
@@ -238,11 +233,11 @@ export class Checkbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the checkbox input\n\nReturns the value of the checkbox input if a value is provided, otherwise returns the checked state"
+                    "text": "Emits the new checked state of the checkbox after a user interaction.\n\nAlways emits a boolean so the event payload reliably represents whether\nthe checkbox is now on or off. This is what Vue `v-model` binds to via\nthe `checked` attribute \u2014 emitting the `value` string here would coerce\nany non-empty string to `true` and make it impossible to uncheck a\ncheckbox that has a `value` prop set. Consumers that need the `value`\ncan read it from the host element (`event.target.value`) or rely on\nnative form submission (`name`/`value` pair)."
                 },
                 "complexType": {
-                    "original": "string | boolean",
-                    "resolved": "boolean | string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }];

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

@@ -3,20 +3,21 @@ import { v4 as uuid } from "uuid";
 export class Choicelist {
     constructor() {
         this.name = uuid();
-        this.onChoiceChange = (value, choiceIndex) => {
+        this.onChoiceChange = (_value, choiceIndex) => {
+            const choice = this.choices[choiceIndex];
             if (this.multi) {
                 this.selected = this.selected.map((isSelected, index) => index === choiceIndex ? !isSelected : isSelected);
-                if (typeof value === 'string') {
+                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
                     const changedValues = this.choices
                         .filter((_, index) => this.selected[index])
-                        .map((choice, index) => { var _a; return (_a = choice.value) !== null && _a !== void 0 ? _a : this.selected[index]; });
+                        .map((c, index) => { var _a; return (_a = c.value) !== null && _a !== void 0 ? _a : this.selected[index]; });
                     this.choicelistValueChange.emit(changedValues);
                 }
             }
             else {
                 this.selected = this.selected.map((_, index) => index === choiceIndex);
-                if (typeof value === 'string') {
-                    this.choicelistValueChange.emit(value);
+                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
+                    this.choicelistValueChange.emit(choice.value);
                 }
             }
         };
@@ -35,7 +36,7 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: '3e1881fd40ea2aecefbb24951920b92ac08ef029', 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: '052b5c72e4bc37b84939b639e070b8e692064ffe', class: {
+        return (h(Host, { key: 'd2da0f5aeb424a36fb117711f34c0631c464ef6a', 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: 'a40e08f0fd60a5268ed9f4d15a97b3fa677e2e46', 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: 'cef99f9f6ab92587151d12cf86b67fedba498b66' }, h("main", { key: '17b27ecd7223283294ea7536a7cfe9c6580c4ec4', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '566d17a37f8389b10d95d2db96c4df1e3e0a01ec', class: "xpl-content-area" }, h("slot", { key: 'f084437566dc11ac51cd57e514ebb3bade2826e6' })))));
+        return (h(Host, { key: '2fe4c1c077c12e47600c737cc9266ae2eff8aaec' }, h("main", { key: '2e6c6f4b83cea96d629bb5af65c4ce6a4d20570e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '033e707fbc48ae523fafb25dd2952d3de9214908', class: "xpl-content-area" }, h("slot", { key: '04afc15969c2b1fb7e2feb3d8ae46248ee0f6e31' })))));
     }
     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: '7894283eaf23b979cd2f30bdd3dafee98d2a82e0' }, h("dl", { key: '0e67c4909212d1ce954d2eef615443179925c1bf', class: "xpl-dashboard" }, h("slot", { key: '420cf5e409a1699e3b92b4deb38d49fca67caa50' }))));
+        return (h(Host, { key: 'ceeb8b27d9537c70e88360de21238c9ce2a3f90b' }, h("dl", { key: '3c4fcb92f472f14885053a1cb1db893618a6d8a8', class: "xpl-dashboard" }, h("slot", { key: 'fe4fa8fdec2ce84bdedc7aa404ab647abd189d11' }))));
     }
     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: '15499953647bf4b8c38c98b2beafbc30adececd3', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '6b4ac5e8e9fdffa254618b70f8ca4abb5c244361', class: headerClasses }, h("header", { key: '398ae3fcc452fe3281b006497cd5bca10d5405f3' }, !!this.leadingIcon && this.icon && (h("span", { key: '872e3b75a6cb7f3b6ae28f16da84b7264aeeb1e7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '23452cb159ee169040132182e0c7701d6f537c61', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '492cec94080ea654732e8a14214d78bcf844abf6', name: "title" }, this.name)), this.link && (h("span", { key: '2c31f2d7e9c96b81465a855e156504ce825c9f97', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1b5f695dc1062c8934569924334aafeb0c4f50d5', icon: "chevron-right", size: 16 })))), h("dd", { key: '6b45e5c1e3bb58fb2a690a633ad601694917b2fb', class: "xpl-data-card__body" }, h("div", { key: 'a6d27211c38c758f7cfb59d5597ac4f0c991bd31', class: "xpl-data-card__left" }, h("span", { key: '92f23b34ba9d72e934c6db3d120ab6e8d3ccfe97', 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: 'c776c1bb00bca03edbe6e5ed60f712b830ba40e5', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '5d0acee9071c6356830c6f55dd5066ac68bbc356', class: "xpl-data-card__right" }, h("slot", { key: 'c513a4cd650d309fdc06045e02315fdab9256eae', name: contentSlot }))))));
+        return (h(Host, { key: '917b6ae82a30b849b100e878dc6be08eb4171214', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '21573d19d14f861eea6562529f78e93affc1e5d2', class: headerClasses }, h("header", { key: '1af52bd082f4d12239db85e78eaf74ed2eb7e027' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dfdcc25ae67fdc766ee3075a479fbfeeac2561ab', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '4072018714c05bd5bae20bfb9e5b6a04561474da', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f81204887ad6c229cb50e8d3ff654c1aa4703368', name: "title" }, this.name)), this.link && (h("span", { key: '6d8d61f8611fdbc5cd09fc20ba15194e0e1e7b56', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '863e66734bbbd6aa178f140b22f8afb3dd401127', icon: "chevron-right", size: 16 })))), h("dd", { key: '08a5e4af6873c267336f7daff6d3455e75a2883e', class: "xpl-data-card__body" }, h("div", { key: 'ec8ff889fb93d99e7ef51361e041edbaaaf5cd62', class: "xpl-data-card__left" }, h("span", { key: '4787e6aadc3832830fe707ffc08e5614a7abde7b', 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: '2060dba53f12917e37747a6bc52c7f03fe4dadc7', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '7a091cce8bc0abae2af7b15d6d1a63acd16854c5', class: "xpl-data-card__right" }, h("slot", { key: 'd83790136435a0d5427fd746d2cba5a08cf914eb', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {