@xplortech/apollo-core 2.9.0 → 2.11.0

package/dist/collection/components/xpl-input/xpl-input-date/xpl-input-date.js

@@ -78,16 +78,16 @@ export class InputDate {
         parent.removeChild(wrapper);
     }
     render() {
-        return (h(Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', class: {
+        return (h(Host, { key: 'c038443e47f6b246c2c91ff27a5eb6afcf1c1967', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
                 'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
-            } }, h("div", { key: '14940421a3f9fb4e7a5acbd5abb222d927a701cf', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '108b33b4f0a87bacff90480633327dd221f6b1d4', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '00633c5b69d25a94d7cd8501bde70459e8ebf2ce', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+            } }, h("div", { key: '45b9b4ebc53293dcc4c0d527df6d2ef234ac2509', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'b112ce85a056e1090391ee9e626c66da47cac750', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: 'e3f218c1b205660ec7eb153396aa358e0769e829', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: 'ba0d694b7ace1359d6901c0110dce40a78805f74', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '5ca7564e2096b697a75ebfb573654c0c23125245', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: 'f20a83ef7b788aae76ebb6f76ba786eff4c71aeb', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (h("label", { key: '0aad7e2ec12c88b27e94de978580f6b35b318fce', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     static get is() { return "xpl-input-date"; }
     static get properties() {

package/dist/collection/components/xpl-input/xpl-input-file/xpl-input-file.js

@@ -33,18 +33,18 @@ export class InputFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', class: {
+        return (h(Host, { key: '42d8f9897e024eb89dc7568f3b99f5a395131294', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '8dc3e290dcddba706316ec41443e2e87aa82f79f', class: {
+            } }, h("span", { key: '90d5962d5c72ed675cfb18444d814d26a231e4a6', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '2d2391a2ccca22170bfa0b9ace50a42fdba54284', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'c302bbbb5c1977c513dba82db70da1615f39a217', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: 'ad648187fbd71bdccd99db542460e85715507f76', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'edf302f553f738ecc35e0ce64f73e4b6713b76e7', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '9252c5450f32e8d2ed478af9f84eef4a26cee49f', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd44213b6fd075bfb12c7857d3a56e06f78ef0fdc', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '56f627241c314b9018cd963ea55a997364b63abf', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: '47180dbed43ab7f3291faeadbe0ddce261d75f25', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }

package/dist/collection/components/xpl-input/xpl-input-phone/xpl-input-phone.js

@@ -196,21 +196,21 @@ export class InputPhone {
     }
     render() {
         var _a;
-        return (h(Host, { key: '4a55afb3d85dc5882eca2cab0a23b11374cc053e', class: {
+        return (h(Host, { key: '1b29d31aca23d7047c36a910bfce85aa54784377', class: {
                 'xpl-input-phone': true,
-                'xpl-input-phone--error': !!this.hasErrorState,
+                'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, h("div", { key: 'c7e46df1b58b6e76dda47b3b32f5a6abe29f048c', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'ef1bedb4bad96760c81ad4dbf2cadb5a29d4abb9', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: 'a307f620c2815d63b17dbeb6c270d2972884e9d9', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: 'c16e66d315877cec35e322a1164f765cd387931f', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '7a33b994588e4c5ea868a4e092709b8acd50a36f', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '5a39cfd472f5287fc8cf0648ce618e21dabf5e97', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'dfb25910769594bc9b9d1c861049605d7bdd9d0e', ref: (el) => {
+            } }, h("div", { key: '6b7fa8dab343d6236a5de65b73cb731da1997695', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'cb785ee5ad4da9ea7ee316b7895bf2ca3992a6ae', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: '0edbeee2da23758c9335f30b01b2a5f24ece73a3', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '310ae67c8eb2fc30c550782011921051492fae54', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '84abb24d097c61bfd76be3e5bbe1ea7bd9718d30', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '29975e649c40580f7e126bfc2f72be2a07f6c813', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '55c85bc4fd439a9913b5b58a8fbbc3f1a328cac9', ref: (el) => {
                 this.inputEl = el;
-            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '8db932d94550aa6d947e2564d8a94a12bef43bce', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: '87e55c3a5ae6b8774d3ce64af843b7e63448fe25', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '467b0e2fde23a45b2c36138affa26467e0b6c9d0', ref: (el) => {
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '2b05b045d36937e3c85ff93308a75bededd56f4e', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: '0834f75780e6cba9e5fef6e4f8613d89dad42216', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '1e19c6663b14de3f5fd9f740417fc6f342a47177', ref: (el) => {
                 this.dropdownRef = el;
             }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
                 this.dropdownOpen = e.detail;
-            }, "aria-label": "Country" }, h("div", { key: 'f4f3665ab8286faed45c3a3a510bd247c7a31842', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '659875e60e85bac085deb8f6648623eccc76d560', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, h("div", { key: '910ee42b45fcfea4b5670ca300c6cd7d9a15c709', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: 'd7b79cd82d6f1dcd4ed57938f7c4389925426b0c', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 var _a;
                 this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
-            } }, h("xpl-icon", { key: '987941768e8494d9c898fc93e531da03bd57ad71', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, h("xpl-icon", { key: '7e8a462d8c0949421d0668b3b289a7c7e7169dbe', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     static get is() { return "xpl-input-phone"; }
     static get properties() {
@@ -254,6 +254,25 @@ export class InputPhone {
                 "reflect": false,
                 "attribute": "disabled"
             },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is in an error state. When true, the input renders with\nthe error border styling. The error message itself is owned by the parent\n`xpl-input` wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
             "inputId": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/xpl-input/xpl-input-search/xpl-input-search.js

@@ -96,7 +96,7 @@ export class InputSearch {
         return shell;
     }
     render() {
-        return (h(Host, { key: 'c8f0c2b1c96cc8c6d9a2c390e791977b031adb9b', class: {
+        return (h(Host, { key: 'bbbcb91c290fec3f0ad0f7df9cb9e43c699f3ab2', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,

package/dist/collection/components/xpl-input/xpl-input-time/xpl-input-time.js

@@ -105,11 +105,11 @@ export class InputTime {
         }));
     }
     render() {
-        return (h(Host, { key: 'a48ebfd7cd0578b33bd11059f9bebb342bf954f7', class: {
+        return (h(Host, { key: 'aef2e65955381ed89dd800e889bd20469a201172', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, h("xpl-input", { key: '68089e0bd5b0ed7d88917094eafe529637947380', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '1bbe4a3a42c02ff985a26e7547c54f0bbdc92ce0', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, h("xpl-input", { key: '90f85f631d876714e65134e964ec521bce1d7948', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: 'f42c653946921b15cb0c1b24db01d299c22406c1', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }

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

@@ -115,7 +115,7 @@ export class Input {
             case 'time':
                 return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption, onValueChange: this.handleChildValueChange }));
             case 'phone':
-                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational, onValueChange: this.handleChildValueChange }));
+                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, error: !!this.error, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational, onValueChange: this.handleChildValueChange }));
             case 'search': {
                 const hasVisibleLabel = Boolean(((_a = this.label) !== null && _a !== void 0 ? _a : '').trim());
                 const hasErrorMessage = Boolean(this.error && this.error.length > 0);
@@ -151,13 +151,13 @@ export class Input {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: '406ab6d1b4d43ceb06cdb819cec8699d2d3322b3', class: {
+        return (h(Host, { key: '909cf5bbf56456a5bc27e5a3cb6a662ada8df1a7', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: 'ab7ea9eb5cb82e6b602ce93ab3da482c12f59078', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '37435c5f1d3d8a30acba7788a7d215921e679327' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '57b66daa234d93d9f6d7ad582380960013596919', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '9a14b46934a8d7edc5f5e48c3fecf87441e741ca', icon: "alert-circle", size: 16 }), h("span", { key: 'badecb1aba3b3ff35cbcf6d7cb4d5355844951e6' }, this.error)))));
+            } }, this.label && (h("label", { key: '0391385b4f19a7a4e36e0a42f4bac9e0400fd7df', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '5724a1710c660297a31cbc37b46b68a0e837e583' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: 'ea1f4fe026d00c4119df392df786648f46e21e4b', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '42c279d5e037da8178c4db4e4b934150ddc43a42', icon: "alert-circle", size: 16 }), h("span", { key: '461f9c09aaa8642df9645e856fa10a312572054c' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {

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

@@ -13,7 +13,7 @@ export class LargeCard {
     render() {
         const contentSlot = 'graph-content';
         const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (h(Host, { key: '9b45179112de8d1ac309520425a1a5c340493487', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '4838c93a72df9ea794b3bbbd7f78f3e84a606109', class: "xpl-large-card__header" }, h("header", { key: 'eb4b2e8515be1e0763595e1cf646dc2b25bfb739' }, h("slot", { key: '62fdafe4b8ce03af5ff353c3ffa377fa547b572b', name: "title" }, this.name), this.link && (h("span", { key: 'ac0086a3402af5f12668a560ad418aaf40a56357', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '74eaffc571098a88d69d7248166889671ba441a2', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'd7d2499b7d8da9c09062ea5a456b588e52df2d82', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '652e32e8b200e783f03608f97cbbcc70f59421e3', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '9d9f285d34bd8e2b6666577bd2023ae474636c4c', name: contentSlot }))));
+        return (h(Host, { key: '30865d2efaf693257afb21c768981e2785c81ad4', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: 'bf95f5c52d36b3aa9174222ea2f3bb7e788f5992', class: "xpl-large-card__header" }, h("header", { key: '5a18e7dfe1544b65fa13e9b918d06ca0fdabb9f2' }, h("slot", { key: '94e9bd081a2c1fe5eb57cb8cedd0ab1224bb5bb3', name: "title" }, this.name), this.link && (h("span", { key: '082622ba8e2446dc65fe4f37ee1e15bab1c8785d', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '407180586601126e1ea5fb2c6af006d109067b39', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: '381711e6390dd685b0951d7dd08faeb6f9ef34f3', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '2cf8a71574bef72aee76720525e26288b92cecc2', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '03a58f57d713de2abad1b815a77c91f340ef1f0a', name: contentSlot }))));
     }
     static get is() { return "xpl-large-card"; }
     static get properties() {

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

@@ -368,12 +368,12 @@ export class List {
         var _a, _b, _c;
         const ariaLabelledBy = ((_a = this.labelledBy) === null || _a === void 0 ? void 0 : _a.trim()) ? this.labelledBy.trim() : undefined;
         const ariaLabel = !ariaLabelledBy && ((_b = this.label) === null || _b === void 0 ? void 0 : _b.trim()) ? this.label.trim() : undefined;
-        return (h(Host, { key: 'aaa6e1cfa2d87e61b239d9aa59c9e4647f05aade', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
+        return (h(Host, { key: '66c41bf0c252a6ae1e61aea6d8c1c40fc594d8c7', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
             _c.map((item, index) => {
                 var _a;
                 const legacyRowId = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
                 return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
-            }), h("slot", { key: '89eb57b654baf9efbfd021e8c8db1fe074daa6d1' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+            }), h("slot", { key: '922088a7fe36e8bb2ee905ac79ac845eff101707' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     static get is() { return "xpl-list"; }
     static get properties() {

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

@@ -13,7 +13,7 @@ export class MainNav {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: '122bf1f28c4fb1e460185989b2d517f1ddbfb22b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '4ed8ce484b394adee98ac16056ebbabcadd31625' }, h("header", { key: '829b7904323aeea21922a8d4a8fa33141cfa7913', "aria-label": "Sidebar Header" }, h("slot", { key: '8a6ea72fa4a1b26f9825a36b4ac7e64c9dbf476c', name: "logo" }), h("slot", { key: 'bf049e9ee7b83af1c4ebfef21681edcb35de9364', name: "brand-name" })), h("div", { key: 'a0ce70ccf5e4bac6346711127fba5278963910c1', class: "xpl-main-nav__main_section" }, h("slot", { key: 'bce360027342a1ef3e009bad6bc28e44c64dbd04', name: "navigation" })), h("footer", { key: '0b5f2e6cc890e4257f5e5503302492a236950f87', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '01dbe4d3834e1bc67b51108600688544e549ecde', name: "footer" })))));
+        return (h(Host, { key: '15982141de742a1daeae5ffbb172ea18e0667e2d', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '41efe9e9a68a3a27653efee7f6ed92d7fde9e902' }, h("header", { key: '18c08d774991cd41dc3b395891d1621343a5d505', "aria-label": "Sidebar Header" }, h("slot", { key: 'b82477e1ae127d30e80ac4e82c22a5e8cbed94e4', name: "logo" }), h("slot", { key: '3841701331da0ea203c356b20098e36b67255384', name: "brand-name" })), h("div", { key: '512df331c13b69154550fe510a8887323167081e', class: "xpl-main-nav__main_section" }, h("slot", { key: '30da0851944d7ce43648efe3b22786b57079042a', name: "navigation" })), h("footer", { key: '3c58ec415052a4b7930ed8861593cb1c52bcd1f5', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'fac051cf4e6bc7635d58df0fbf9b504af244eb52', name: "footer" })))));
     }
     static get is() { return "xpl-main-nav"; }
     static get properties() {

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

@@ -9,6 +9,9 @@ export class Modal {
             this.modalClosed.emit();
         };
         this.handleNativeBackdropClick = (event) => {
+            if (event.target !== this.dialogElement) {
+                return;
+            }
             const rect = this.dialogElement.getBoundingClientRect();
             const clickedOutsideDialog = event.clientX < rect.left ||
                 event.clientX > rect.right ||
@@ -44,7 +47,7 @@ export class Modal {
         }
     }
     render() {
-        return (h(Host, { key: '310913d620acf72531ecb06aa6cd2180bb58d13b', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'd95693fd09c2f0a8024f3cb69a021f0bd79f7916' }), h("dialog", { key: '5cffd3cfdcc6033baa1d9e3e5fdf56b8411a8975', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '2d0be8e91065d464797d85cd1b98272292eacb09', class: "xpl-modal__header" }, h("div", { key: 'cb7d8594ed217599bcf0e2efa88d72afe0fff758', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: 'fb7dd69369accc0c98ef8762ca457b6368ca0036', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '36a6d3d38d35064f81740504090fbbcdf2125097', name: "title" }), h("xpl-button", { key: 'db84ecf685afec8d0d783b433f8aa030acc436bb', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'bf241c6636ace6e182bf259bd24754646dc7f151', icon: "x" }))), h("div", { key: '105fa1a5b9d927bda5ca5521bbb8211cb07ab8e8', class: "xpl-modal__subtitle" }, h("slot", { key: 'd25d6d8bb95cd51f075dd7f9b5e1e199dac3efb0', name: "subtitle" }))), h("div", { key: '3b194a36ad0f4446149027544c16a25ba27f2cec', class: "xpl-modal__body" }, h("slot", { key: '077e5b70115e3e906cd9ea7181c51615799c77e8', name: "body" })), h("div", { key: '687bd9ca45af20945ab5461ceb68ec099a30c50b', class: "xpl-modal__footer" }, h("slot", { key: '73d5884708efd296a701c37e02663668fcfd37d8', name: "tertiary" }), h("slot", { key: 'bad90d2355b8c015e19b1e450b5a2ce96e5ad55d', name: "secondary" }), h("slot", { key: 'c601b66edc9fb2c082ccc713d6df95f15bd604ef', name: "primary" })))));
+        return (h(Host, { key: 'd1457065d1448b866f21a5a7a903fbc8504567a5', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '05807b08500c1ba557c9dabe04ca059f3638f36c' }), h("dialog", { key: '14f78e63f6e19f83fd159604175381b054848ad6', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '54cbd855c642bad93f74d8f6f875c32728d8539a', class: "xpl-modal__header" }, h("div", { key: 'd0ae962e9ddb8df05eeefd2cd083c0aaf6253814', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '896dbc9e4c614b456f2b22626c294f86e655f811', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '859b27499e4ae644c06d376225f56d47b0081dc2', name: "title" }), h("xpl-button", { key: '288822a0310d17b13360acb7d358e7b5711fa79f', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '14181eec31afd43bf07a21f6ae65664ea12f789a', icon: "x" }))), h("div", { key: '4d23417d83bdb3312f1c883a367687e1d4fdfa7c', class: "xpl-modal__subtitle" }, h("slot", { key: '5db4d5c7997a4a27f7195cdd0ff56d81238835e1', name: "subtitle" }))), h("div", { key: 'e17d7805f75d00422d6eaa8148a1f0f3297369df', class: "xpl-modal__body" }, h("slot", { key: 'f1f43ce5fce6c1567bf856071b5d283c28a64bbe', name: "body" })), h("div", { key: 'c7757cabc4d718a19ee8c91020f20e4437b73d6d', class: "xpl-modal__footer" }, h("slot", { key: 'bdcf1d5ca962025e7cdd2368b1dd6117b5dc190a', name: "tertiary" }), h("slot", { key: '483ce3eb24f84d4c08a84e97e6e6a9af9829b007', name: "secondary" }), h("slot", { key: '7c7ec707d80fecb81a21c997c84a1622370285b0', name: "primary" })))));
     }
     static get is() { return "xpl-modal"; }
     static get properties() {

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

@@ -9,11 +9,11 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: 'b3a214a57ad57e9db1bbfd6a1809999ce0575a82', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: 'f7494edb113b4eccf244c312447e69248af495ba', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: '0f2a74dc4fd6f419a01106d872a5f6b5066a21a8', name: "link" }, h("slot", { key: '234b41ca18d65ec3423ff580d983d24b483641cf', name: "icon" }), h("slot", { key: 'cdb0ac59997cd1c557b05c6c8d8f60ae78d28a4d' }))));
+            } }, h("slot", { key: 'acde5d80edbead75a558b964954caa18e1cc0c5f', name: "link" }, h("slot", { key: '66838cf7e6610e48d7102475cc6463aa65f4651b', name: "icon" }), h("slot", { key: 'de185eaab42a425cf82eaaf6883b1472fecb9754' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {

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

@@ -8,6 +8,7 @@ export class Pagination {
         this.selectedRowsPerPage = 10;
         this.rowsPerPageSelectRef = null;
         this.pageSelectRef = null;
+        this.pageChoices = [];
         this.handleNextPage = () => {
             if (this.currentPage < this.totalPages) {
                 this.currentPage += 1;
@@ -41,11 +42,29 @@ export class Pagination {
         else if (newValue > this.totalPages) {
             this.currentPage = this.totalPages;
         }
+        this.buildPageChoices();
         this.pageChange.emit(this.currentPage);
     }
+    onTotalPagesUpdate() {
+        if (this.currentPage > this.totalPages) {
+            this.currentPage = this.totalPages;
+            return;
+        }
+        this.buildPageChoices();
+    }
     onRowsPerPageUpdate(newValue) {
         this.rowsPerPageChange.emit(newValue);
     }
+    buildPageChoices() {
+        this.pageChoices = Array.from({ length: this.totalPages }, (_, index) => ({
+            label: `Page ${index + 1}`,
+            value: (index + 1).toString(),
+            isSelected: index + 1 === this.currentPage,
+        }));
+    }
+    componentWillLoad() {
+        this.buildPageChoices();
+    }
     componentDidLoad() {
         var _a, _b;
         (_a = this.rowsPerPageSelectRef) === null || _a === void 0 ? void 0 : _a.addEventListener('changeEvent', this.handleRowsChange);
@@ -59,23 +78,19 @@ export class Pagination {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (h(Host, { key: 'fad9cdff4010b4b5ac842633bf7daf09b4dbd5d4', class: {
+        return (h(Host, { key: '7ee32b9506487555cf9c96b8204bc06acff20614', class: {
                 'xpl-pagination': true,
                 'xpl-pagination__with-page-control': this.withPageControl,
                 'xpl-pagination__no-page-control': !this.withPageControl,
-            } }, this.withPageControl && (h("div", { key: 'eb125851b89aa1422ec3e5d5e336fcbecd07489e', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5f2aa4c45d183827317a74cf4700981b6b0e7f2b', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '7ba2987a24b3228d9b59320f29b22b5819f85546', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
+            } }, this.withPageControl && (h("div", { key: 'd0b77c50e30c046df37e806912d9d144066ce8ea', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5a596a7f2e440f007cc51ffb965f8c6da057bd11', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '3592c6c2b8efa704536e64bf6ae085f228921573', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 label: option.toString(),
                 value: option.toString(),
                 isSelected: option === this.selectedRowsPerPage,
             })), ref: (el) => {
                 this.rowsPerPageSelectRef = el;
-            } }))), h("div", { key: '8bab9db1cecfdaeeb760b0e4e1afb393ff3a3fe7', class: "xpl-pagination__pager" }, h("button", { key: '19efd8a9aee2b05f875d2db34c7cdd174c845f60', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: 'a77a15c649a6f2c86b100d1687b4a099acc18602', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '5778cad67d3a4b930b1f89b0e49c30e941e23259', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: Array.from({ length: this.totalPages }, (_, index) => ({
-                label: `Page ${index + 1}`,
-                value: (index + 1).toString(),
-                isSelected: index + 1 === this.currentPage,
-            })), "custom-display-value": true, ref: (el) => {
+            } }))), h("div", { key: '0c4e020f133b9bff31e185fb3ea11d3e98f0ac00', class: "xpl-pagination__pager" }, h("button", { key: 'add5b2b91bb1c1d08637bc7e8cf907274126765c', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: 'ca29bdc9acb1f220afb7cbb5a2f1bfc8602c07c9', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '89244ec17d7e8f10188a6b7b25dde30f9885aef2', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
                 this.pageSelectRef = el;
-            } }, h("div", { key: 'd0ae655a0100c2e81c8f7bdc2c8d3072f00cc7c9', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: 'ca6c7eb4fd277344f340b83673f1e43cb0c9fe99', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: 'd18efdcb7e67ab908fbf79fc475993cf656b150c', icon: "arrow-right", size: 20 })))));
+            } }, h("div", { key: '916de27d7e201ba0920c265109edf2a6e9bd0620', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '7ddaf9be0ab94e8e0e1fdbdca20e76294d7d2706', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '37703d9e35a8288bf24c8675e4e973a400f7a0e9', icon: "arrow-right", size: 20 })))));
     }
     static get is() { return "xpl-pagination"; }
     static get properties() {
@@ -219,6 +234,9 @@ export class Pagination {
         return [{
                 "propName": "currentPage",
                 "methodName": "onPageUpdate"
+            }, {
+                "propName": "totalPages",
+                "methodName": "onTotalPagesUpdate"
             }, {
                 "propName": "selectedRowsPerPage",
                 "methodName": "onRowsPerPageUpdate"

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

@@ -6,11 +6,11 @@ export class XplPanel {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (h(Host, { key: 'e9a747ba679f6f9f907d13217f329947bff93e31', class: {
+        return (h(Host, { key: 'f7216acfba4419e26d171a24aa64153991841701', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && h("div", { key: 'b777fd4a81574ff9276582b256b673cccfc63a34', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '5fa5ba4c2bfa13d7dcaee603e96ec9b77d103b13', class: "xpl-panel__content" }, h("slot", { key: 'c99b797e076c2641ae205181479dabb38f9ea009' }))));
+            } }, hasAccent && h("div", { key: '18f1ed385cb4d29dbe18e7272e779a40a2ead05e', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: 'd0a13066c9c4b472b505ffd7592f882bb886b9a2', class: "xpl-panel__content" }, h("slot", { key: '0c8c6495afcbd3a897a6f118e17df75dc7328363' }))));
     }
     static get is() { return "xpl-panel"; }
     static get properties() {

package/dist/collection/components/xpl-popover/popover.stories.js

@@ -20,9 +20,7 @@ export const Simple = ({ isOpen = true, position, display }) => {
         <xpl-button slot="trigger">
           Toggle Popover
         </xpl-button>
-        <div style="padding: 1rem; background: white; color: black; border: 1px solid #ccc; border-radius: 4px;">
-          This is the popover content.
-        </div>
+        <div>This is the popover content.</div>
       </xpl-popover>
     </div>
   `;
@@ -40,9 +38,7 @@ export const LargerTrigger = ({ isOpen = true, position }) => {
         <button slot="trigger" style="cursor: pointer; height: 128px; background-color: gray">
           Toggle Popover
         </button>
-        <div style="padding: 1rem; background: white; color: black; border: 1px solid #ccc; border-radius: 4px;">
-          This is the popover content.
-        </div>
+        <div>This is the popover content.</div>
       </xpl-popover>
     </div>
   `;
@@ -60,7 +56,7 @@ export const LargerContent = ({ isOpen = true, position }) => {
         <xpl-button slot="trigger">
           Toggle Popover
         </xpl-button>
-        <div style="padding: 1rem; background: white; color: black; border: 1px solid #ccc; border-radius: 4px;">
+        <div style="display: flex; flex-direction: column; gap: 1rem;">
           <span class="xpl-text-title-4">Title</span>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed

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

@@ -206,16 +206,16 @@ export class Popover {
         });
     }
     render() {
-        return (h(Host, { key: '6fe479a39ee565772785c7b540c4e0915c5403e4' }, h("div", { key: '350452ca097bab13e7f06b3d1aa5e2774d80104b', class: {
+        return (h(Host, { key: 'fd4ba66077f4909fe71a47b719fc76e8b0970bcc' }, h("div", { key: 'f54d27275be2e332ae72e225197eb76350803db3', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, h("span", { key: '0a9365be21ef70855bd7d304a77fc80d19ba16d3', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, h("span", { key: 'a45378d297636bcb6eddd0ea2927703291f27571', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, h("slot", { key: 'df227b5bb7683599b4f82ef2a8c9d840b4920a61', name: "trigger" })), this.display === 'arrow' && (h("div", { key: 'dbf0b6998b3aa6ae40089e13bef86878037bbe24', class: "xpl-popover__arrow" }, h("svg", { key: '2bf57b69abc556ba9a86b59f6347a2c8d81a67c3', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '36fef83ea3e2d3d4b388f5bdfe74d0bdc034be9d', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '1187a6ec22457ab6086753cf199398705541b1b4', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '7c6f063094de1462629a0db380597374c4231855', class: {
+            } }, h("slot", { key: 'e40f33425dede71e45fefca68eed6231f569b6f4', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '4c6dbd56d3b6c782bdd25c9674df29b92866e55c', class: "xpl-popover__arrow" }, h("svg", { key: '6492c5f9ffd7609ed0fb334f515bf5448db9b837', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e1e92c7c65caece9b89b9b23f6031409cd67312c', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '496097d86300cdd3a09732e3fb5492e8b3e4a292', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'ed12d8116e9c230dbe166b4479b19d640849b873', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '41062b776eed58b98452bb5a8d3b7099ac1138d2' })))));
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: 'ad827a2a95546d4e3c975cd410ba4067fd69ad04' })))));
     }
     static get is() { return "xpl-popover"; }
     static get properties() {

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

@@ -25,12 +25,12 @@ export class ProgressBar {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (h(Host, { key: 'e5cc7a2231ed74242241723c9f0a57444a8000bb', class: {
+        return (h(Host, { key: 'bae4b080ca10ce596b7f889fc50b41199bcee67b', class: {
                 'xpl-progress-bar': true,
                 [`xpl-progress-bar--${this.size}`]: true,
                 [`xpl-progress-bar--${this.variant}`]: true,
                 'xpl-progress-bar--complete': this.isComplete,
-            } }, h("div", { key: '3212fdea66e2cd3edffc36f99c9edc197f15bcee', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: '004c0b9203df13c6818fdbb8c928a47d86e7388e', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'ce735edff19cc004f979a582618c968260cd23c3', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '3a9f143b79152aa3208593c9249a62d819c2967a', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '517787d0ff39c082a3d4763b78b16a9ce9235b4b', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '488c5092b96a1e9a5a08f9b090f94fe66f6f1490', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, h("div", { key: '3e13c35002888a7ea5b4710ec96ea72ab6e8811c', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'c41d0c11ef55fc3be48b8007716439a0791245c5', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'c680eb355e174bfa3a17b29e64d5d9e8d3699718', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: 'a4d541ee3fa68549dbfa8f371b8d3e5a5d9dcfd0', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '24aa03523c672a1604b91da88dae9a58895a412b', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '67a687ba35eb5208286833834b1a4e75d64ca47d', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
     static get is() { return "xpl-progress-bar"; }
     static get properties() {

package/dist/collection/components/xpl-progress-indicator/xpl-progress-indicator.js

@@ -55,7 +55,7 @@ export class ProgressIndicator {
                 ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
                 : `Progress: step ${currentStepNumber} of ${totalSteps}`
             : 'Progress';
-        return (h(Host, { key: '3a6f253693fd47f982541099a1729ca36d0ce64a', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: 'c25b47994c43135ed3147ca579bdc3d8124d7c8a', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (h(Host, { key: '267a70a3c6ceffe23390abb57a524d5ddb2b53a6', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: 'd34a875d04fb035cc5cda9c8194135d173f7ebae', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get is() { return "xpl-progress-indicator"; }
     static get properties() {

package/dist/collection/components/xpl-radio/radio.stories.js

@@ -41,23 +41,25 @@ export default {
         },
     },
 };
-export const Radio = ({ label, description, checked, disabled, styled, value, name, selectedValue, }) => {
-    let attrs = '';
-    if (description)
-        attrs += ` description="${description}"`;
-    if (checked)
-        attrs += ` checked`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (styled)
-        attrs += ` styled`;
-    if (value)
-        attrs += ` value="${value}"`;
-    if (name)
-        attrs += ` name="${name}"`;
-    if (selectedValue)
-        attrs += ` selected-value="${selectedValue}"`;
-    const demoAttr = attrs.replace('value', 'value="demo"');
+function toKebab(str) {
+    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function getRadioAttrs(attrs) {
+    return Object.entries(attrs).reduce((acc, [attr, value]) => {
+        if (attr === 'label')
+            return acc;
+        const name = toKebab(attr);
+        if (typeof value === 'boolean')
+            return value ? `${acc} ${name}` : acc;
+        if (value)
+            return `${acc} ${name}="${value}"`;
+        return acc;
+    }, '');
+}
+export const Radio = (origAttrs) => {
+    const attrs = getRadioAttrs(origAttrs);
+    const demoAttr = attrs.replace(/ value="[^"]*"/, ' value="demo"');
+    const { label } = origAttrs;
     return `
         <form>
             <xpl-radio ${demoAttr}> Demo</xpl-radio>

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

@@ -20,14 +20,14 @@ export class Radio {
         return Boolean(this.checked);
     }
     render() {
-        return (h(Host, { key: '1cda65b10ee03e06c30b2c501d7f2ec4153619f6', class: {
+        return (h(Host, { key: 'b25d59aa55a08aa7264e1dadc670b540d3740dfc', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'b19a87e42feb5953ace4b8bd049427959c40a7e6', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: 'd07051460f7503a182b969eeafcb8eba5d61bef2', class: {
+            } }, h("input", { key: 'df724428d276baf063679829f2b1ffcdcbfbf2b2', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: 'd521ca252872494ed28826721dde6270e441a3a3', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '06835704869d514a0d3eb01d671b6bec42524e89' }), this.description && (h("small", { key: '3e798a699fa53ca6c932e6466b438ed47aa46148', class: {
+            }, htmlFor: this.id }, h("slot", { key: '5093a78e1fb18908b700cb90cf932de06a3ce76d' }), this.description && (h("small", { key: '8806e9374a812df4db6fa8a9a9e1672abd282299', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SecondaryNav {
     render() {
-        return (h(Host, { key: 'f4fdd93b13c1dc779c84e8b00b12caeff58df960', class: "xpl-secondary-nav" }, h("nav", { key: '4092d23357761026ad5fddfbc32a221d957cce1e', "aria-label": "Secondary Nav" }, h("slot", { key: 'c3ae9f1821a6d22babece27971cc1faf15037cdb' }))));
+        return (h(Host, { key: '8137a8f7ecc1682f1b7e64d41f12c70b9030dd4d', class: "xpl-secondary-nav" }, h("nav", { key: 'f2f65911a356c4265ee583f37ffeb9f78f12d9b4', "aria-label": "Secondary Nav" }, h("slot", { key: '972a51f6d4d59f17a88681f1fbd537ff0dc9fe0b' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }