@xplortech/apollo-core 2.12.0 → 3.0.0

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

@@ -61,13 +61,13 @@ const Banner = class {
         const actionState = this.getActionButtonState();
         const isHeadingPresent = !!this.heading?.trim();
         const isDescPresent = !!this.description?.trim();
-        return (index.h(index.Host, { key: '476c72c3dad23d9d62a8d68a826fb75a93fc88ee', class: {
+        return (index.h(index.Host, { key: '00046ec64a9cf7b913298ad452aa26f3bd1078bd', 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) && (index.h("div", { key: 'b81395caa66c8c56a54535a5ace6fd3a027b0075', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: 'e8dd31a592ba17dd1825630a4f1ba9bc7323891a', icon: this.getIcon(), size: 24 }))), index.h("div", { key: '034eab05c801635fdbfb7ea549c4472407f3f09f', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'c9216bd4c11c1d3bda0e1654282d9a713e955968', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: 'e67d92d7b71b678b19627741a01d2e4b26ef7093', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: 'dd4d7bcae4bde9d16124b27993d7d1b2e96e086e', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: '51df92818c4194c76c609776f85aa31c7bffb34b', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: '7f911d3a81190cde339f69a2d93eb0c2518c9036', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: 'b9d1b8d15f0adac5b7eaa5c3e287c4b0fe7b987e', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: '528fd238ccfb1e52c7fe5c0d093f30a4fa4603bd', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (index.h("div", { key: 'bc95f036e4848863fb07cbdb35e2335f863f21f6', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: 'a019d22111644263e770384c2a8d60487dd2f705', icon: this.getIcon(), size: 24 }))), index.h("div", { key: '5c6039a2c4be58b3f503938c9b3f33feec61cda9', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'fff21d65b10b628c405959763aa21b676b5a40f6', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: '114a6720cbbcf584bc00a3974f7e95ca3cebc54d', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: '69a72574bfc37baf6c18ea5b4512f0f11fc45db5', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: '3ff5eb207a819901f3d0017223ae83e9a6c5bf30', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: 'fc54ced977a1f4fc5ca39e7fd981b789b42727fa', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: 'd236e3448164706d787f8f1fcde36430803c5dc2', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: 'a3eb350b62b53cb59a40576d0da748adad554c79', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
 };
 

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

@@ -11,7 +11,7 @@ const BreadcrumbItem = class {
     `;
     }
     render() {
-        return (index.h(index.Host, { key: '05e99f78af5eab5e1cec089972ffb032eea34e88', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: 'a692a2e091bf8038fc04f675dcaaac0f2e7a7c2f', role: "none" }, index.h("slot", { key: 'f4b90f80b4eba10d285ff104b529d22bdc8f0e0b' })), index.h("span", { key: 'a6b05807f7683d9ebbffdc3566c3f1754bb41206', innerHTML: this.chevron })));
+        return (index.h(index.Host, { key: 'eab64a8e1acfe7fb6596193a250f8937ac6f5481', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: 'ff781ce68e230191700449039b89d9a0fefd1e50', role: "none" }, index.h("slot", { key: '854ef8e0dc29ebe5f782b5ee0dbe0e710015b40c' })), index.h("span", { key: 'ba0ea70bf123b7c6405b8c3add0c87714ed80e15', innerHTML: this.chevron })));
     }
 };
 

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

@@ -7,7 +7,7 @@ const Breadcrumbs = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ec9689395d536e7018469193ba61c094d79fa004' }, index.h("nav", { key: 'ffb0b88d3b331a22d1ae620aeb67ad901c801153', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '9649caceca01e86584682f4843c30fe080b364e1', role: "list" }, index.h("slot", { key: '68f438d33b5cd458cd0643a4f28c04dd824366c7' })))));
+        return (index.h(index.Host, { key: '63e77e937ec359fdac15cf8a48673176696395bc' }, index.h("nav", { key: '6bf6c1b401d010676b7317d9356aac5e4893fd1b', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '177206147c779f29a20369e49852d11ba0d990d5', role: "list" }, index.h("slot", { key: '9cdadc4378fa2da5a3c0213c46c58f8701472b80' })))));
     }
 };
 

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: '060eb37a03ab854c56b383cf2ed598915f8b4c6f', class: "xpl-button-row" }, index.h("div", { key: '169e722e0ccb0045680001755943aa1087c70a79', class: "xpl-button-row-inner" }, index.h("div", { key: '8a49375971621161e3c1ad692ef9257b1c4bac43', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '3cc16072ce7e9b4731b50fbaf647659b842763ad', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: 'e1d248e9b65f241f5eee07d2808ee3cb67b6c867', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '827f7c01fb4617bb10acfc79b20a515718c6d539', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '726167a62d0b3dc6f19b6e38abaa446cb474a07c', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: '2d7d7fe4e965ce093d969936ff96d224762499e1', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (index.h(index.Host, { key: 'de570ef3de32367d44cfaa7004e749a51bc6fde9', class: "xpl-button-row" }, index.h("div", { key: '6bafe5cbb76355b987023cab4d1530e71065ea55', class: "xpl-button-row-inner" }, index.h("div", { key: '09ab6b0f3b7ed5790b675520d445ed3279224c3c', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '8f08a18126a27e6f1a72d8609e5533f466c3a88b', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: '0df1b38697afee3eb45af00989baac17ae2a2d00', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '289a41a34091201ecba3af76ed2ab86c84341ba4', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '742dd05eea13de9ccc2747b0146c3779bd7b4e66', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: '0eafc10b3d2b8f70d0f18a3ef0798ca6250ee0d5', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
 };
 

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

@@ -58,7 +58,7 @@ const Button = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '88b28108ae3675732cc51462438c4d067223fbcd', class: {
+        return (index.h(index.Host, { key: 'd46884793521c327622838ceca0af98ec897912b', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,

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

@@ -60,7 +60,7 @@ const Calendar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '76d2b26fe34d766b1e1348f7d5336c5ec478bae9', class: "xpl-calendar" }, index.h("input", { key: '8f015adda8e5c4f7a5f0dd9815bdead0249e3a4e', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (index.h(index.Host, { key: '871a989fee5abc19ac9e00fca79534dd79b0a773', class: "xpl-calendar" }, index.h("input", { key: '3dc76b7045ac76ff76d2f1ca80625034aff7d013', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 if (el)
                     this.inputElement = el;
             } })));

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

@@ -15,14 +15,14 @@ const Checkbox = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'fba24f4540febb1d52a143ae8249978820731422', class: {
+        return (index.h(index.Host, { key: 'd16058b571f7af6d2a83cbdce15b12bccadf0036', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: !!this.styled,
                 disabled: !!this.disabled,
-            } }, index.h("input", { key: '1663fd03d0f76952ddbe1a8ce87ea7c76c31631c', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').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 }), index.h("label", { key: '84548eea585da460e834d1e34b24e0b3724a38ea', class: {
+            } }, index.h("input", { key: '1001a243623e338fc4fefc9f58f251439c2fb74f', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').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 }), index.h("label", { key: '37e85b721cef98c8ccc448e08dbf9d9c968bd0a6', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': !!this.disabled,
-            }, htmlFor: this.id }, index.h("slot", { key: 'f9451918bee8abc6dea4fd65acef75bb13b69e4d' }), this.description && (index.h("small", { key: '02db357e5080d87595bdfd5baac1be2a2bb771d7', class: {
+            }, htmlFor: this.id }, index.h("slot", { key: 'ef36d317d97e26098396b1131a1acce6bce5ae8f' }), this.description && (index.h("small", { key: '9d710e4fa3f366965307908ca2e216ac46310f30', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));

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

@@ -42,7 +42,7 @@ const Choicelist = class {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (index.h(index.Host, { key: 'e46ee9af6a052090343eeadbcba66997b38d2edc', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: '4f995575dae9b8b1a8f136b3a336fd5ccce7e3f1', class: {
+        return (index.h(index.Host, { key: '0db2f4a4109a65ae2ab01259b960f83dd3b8bbeb', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: '53915c9efd628e455b5604f4eacbc67504a52ca5', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': !!this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/cjs/xpl-content-area.cjs.entry.js

@@ -8,7 +8,7 @@ const ContentArea = class {
         this.size = 'wide';
     }
     render() {
-        return (index.h(index.Host, { key: '1b43a3fa4173d34533cf7015005b3e37792f0af6' }, index.h("main", { key: '0b0f905db96103b7a7c24cd40af26c448422ce85', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: 'b495ccc07df5e617f147057d7003805c431386d5', class: "xpl-content-area" }, index.h("slot", { key: '093b4b9830e0f6a8bee554bc8bac255d4944784d' })))));
+        return (index.h(index.Host, { key: '97fd281e5aa7ba1805f1424e80d6018ca5fdafe0' }, index.h("main", { key: '6a6f315e74225f66105874998c679183f2c743f5', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: 'c46017f1a0fd8b278f7b817de82629eb777515fd', class: "xpl-content-area" }, index.h("slot", { key: 'cc6d45297d23770880778810952f7e95445bb800' })))));
     }
 };
 

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

@@ -7,7 +7,7 @@ const Dashboard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3f8c104ae7775cda5f23ff515d8de7013d0ca09c' }, index.h("dl", { key: 'f68ec082b0f3587eb9977a03289097d3e838488d', class: "xpl-dashboard" }, index.h("slot", { key: 'f67b34cfe1683d3ee2f70be9d3d075603e536559' }))));
+        return (index.h(index.Host, { key: '65628c79753f54949bfe0a6dfede9bf4e09cf585' }, index.h("dl", { key: 'aa6444eea3322331350fbc1b0db6b23e316d393e', class: "xpl-dashboard" }, index.h("slot", { key: '3b54ed1755a0cc72ef5527afafdf156660afcfdf' }))));
     }
 };
 

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

@@ -94,8 +94,8 @@ const DataCard = class {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (index.h(index.Host, { key: '7480f4a5839e985f317f697984ec3752a0e5f4fb', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: 'ee0d40e32b700fa8dcda517454f7dfe88439f705', class: headerClasses }, index.h("header", { key: '405d707dafdd90942bb7122904d0d8a7ef1e989a' }, !!this.leadingIcon && this.icon && (index.h("span", { key: 'd2f505eab301051b854355cbe8e8608153f1c509', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: 'e4c3366b8ec3e0a55b2cc47877d832c72ff018ac', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'a2d1c4b93e4860d046f6da66d5b82a19f60e7346', name: "title" }, this.name)), this.link && (index.h("span", { key: '8966de78de4d6fac11841afaec872a2c2f3d1db0', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '62bc6170d62a773e5e38830c53a4abb0335a9fa8', icon: "chevron-right", size: 16 })))), index.h("dd", { key: 'b10cbb97c475155819c8f35afa2b294153c7153a', class: "xpl-data-card__body" }, index.h("div", { key: '4bf749bdcea4cd4b8a53cee3476e249556357038', class: "xpl-data-card__left" }, index.h("span", { key: '8285b0cca2a5f8be35d9096980085d1e0ed6cebc', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: 'fbb5c740dc2a637198aad042800efb713fff154b', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (index.h("div", { key: 'b8f8f8fd70e1984edad76060e8b32db62c22bf5c', class: "xpl-data-card__right" }, index.h("slot", { key: 'a3c1a9e98111de7a091ded98aded8e722af1f806', name: GRAPH_CONTENT_SLOT }))))));
+        return (index.h(index.Host, { key: '05aef87fdbc999cc563d9da2ae6207ffce5351cf', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '833d00cd995e5d9f96c70e6f1af04f260076aea7', class: headerClasses }, index.h("header", { key: '283890fe21047be8ee81b64588a686f4f6339d28' }, !!this.leadingIcon && this.icon && (index.h("span", { key: '2c3e365280efb2c6c18a7d08261fc30e8d808da3', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: '3564e1275b28e1693a45c51b4fc7936317b62e2f', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'd5469c77ca2a1ec16e702ee8ab94c230dbbe742a', name: "title" }, this.name)), this.link && (index.h("span", { key: '7a560cecc871b0e223372ecca08129d9f95d2c6e', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'f85ebee53967bc2ddd78291aaa63c85145d74930', icon: "chevron-right", size: 16 })))), index.h("dd", { key: 'c19eb772979606076a22f72b8ecb4261f7371374', class: "xpl-data-card__body" }, index.h("div", { key: '1ab9f94a29394608a18990ad4a06a663abd2f0a6', class: "xpl-data-card__left" }, index.h("span", { key: '41d8633f93cf7e2c220df4b51768e9b7c2295474', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: '5dfcb6891ce3529bee2f240d85238a895ea6c61d', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (index.h("div", { key: '5b58f77c7a49e1aa157b73feb63e4ef1b5d36c0a', class: "xpl-data-card__right" }, index.h("slot", { key: '962482c44556b3722119cace638ea176af2f9533', name: GRAPH_CONTENT_SLOT }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -105,10 +105,13 @@ const Dropdown = class {
         this.previousOptionCount = 0;
         this.handleClickOutside = ({ target }) => {
             const { triggerId } = this;
+            const targetEl = target;
             const triggerElement = triggerId ? document.getElementById(triggerId) : null;
-            const isTriggerOrChild = triggerElement?.contains(target);
-            const isInside = this.hostElement.contains(target);
-            if (!isInside && !isTriggerOrChild && this.isOpen) {
+            const isTriggerOrChild = triggerElement?.contains(targetEl);
+            const isInside = this.hostElement.contains(targetEl);
+            const labelEl = targetEl?.closest('label');
+            const isTriggerLabel = !!labelEl && !!triggerId && labelEl.getAttribute('for') === triggerId;
+            if (!isInside && !isTriggerOrChild && !isTriggerLabel && this.isOpen) {
                 this.isOpen = false;
             }
         };
@@ -436,7 +439,7 @@ const Dropdown = class {
         const shouldVirtualize = this.isVirtualized;
         let listContent;
         if (!hasOptions) {
-            listContent = index.h("slot", { key: '97760aa46be9b95b750cd5db5453a9229a258182', name: "options" });
+            listContent = index.h("slot", { key: '1673c7d33d7dc1d16bf56081df85976ed389a38f', name: "options" });
         }
         else if (shouldVirtualize) {
             const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -444,18 +447,18 @@ const Dropdown = class {
             const start = Math.min(this.virtualStart, total);
             const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
             const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
-            listContent = (index.h("li", { key: 'e26d99dc6d29290d64e6408c19b3357b590cffe3', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+            listContent = (index.h("li", { key: '94094d9464c2f4ded9714f7ed16ca2b426c19794', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
         }
         else {
             listContent = options.map((option) => renderOption(option));
         }
-        return (index.h(index.Host, { key: '564b912fee05be97c27e1d791593066793ea5cf4', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (index.h(index.Host, { key: '6e2fe2b904530c7966a23b3715485ea9ed415880', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
                 'xpl-dropdown--virtualized': shouldVirtualize,
-            }, role: "listbox" }, index.h("slot", { key: '1f84f1ce175fc1affae09ad93ed7c2b349b900ba', name: "header" }), index.h("ul", { key: '933fac0a3585043bf66fcb59525ca1d6874bc2c3', class: "xpl-dropdown-list", ref: (el) => {
+            }, role: "listbox" }, index.h("slot", { key: 'b9c87382e07b23b326fab22b8423021f8c4a83f8', name: "header" }), index.h("ul", { key: '3824b650e2bbcb09fdea7f25ab19afa9a7dd8abe', class: "xpl-dropdown-list", ref: (el) => {
                 this.setListEl(el);
             }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
@@ -494,7 +497,7 @@ const DropdownGroup = class {
         const hasOptions = options && options.length;
         const mappedOptions = hasOptions &&
             options.map(({ groupName: optsGroupName, ...properties }) => optsGroupName ? (index.h("xpl-dropdown-group", { label: optsGroupName, ...properties })) : (index.h("xpl-dropdown-option", { ...properties })));
-        return (index.h(index.Host, { key: '6834fa4acc5c15d3256a0289013deb4821d22d57', role: "group", "aria-label": groupName }, index.h("li", { key: 'bed8042f619a729e9eb8c4e365e1b87dd1ea93cb', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '7171c8e2dcc007ece292dde758abf27b17cf2a7c', label: groupName }), index.h("ul", { key: 'a1e2a330759007328ad5b9d7f0ac6f920e5f6eec', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: 'ea8ea2987afe4decda1e78607d843c68e9285029', name: "options" })))));
+        return (index.h(index.Host, { key: '232eccef872d6563c056b3b709d3a741473de2b0', role: "group", "aria-label": groupName }, index.h("li", { key: '2185c7b55139ab7b144290c94ab53675a6224b46', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '26c0d13d0742fd34eb629c668bd929e5541fffb8', label: groupName }), index.h("ul", { key: '0f13b81deda008bf0588393ff1a4102a5c7a171d', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: '70cf6f662d1471c815f5e7c747080d7558efe407', name: "options" })))));
     }
 };
 
@@ -503,7 +506,7 @@ const DropdownHeading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '71b62b60d09869f77af7a6975a54a58116c002a6', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: 'ad7614e31b405ff4a9043334716eb1ff546a5c03' }, this.label || index.h("slot", { key: 'b0a0d0b2a6f96d9b8b2d16ee5e289bb3592e5d42', name: "heading" }))));
+        return (index.h(index.Host, { key: '04265224adcc5b65f53d2e35d0cfef470931ce41', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: '27293255cdfe35d207f3f0155beae3dc4b737e0d' }, this.label || index.h("slot", { key: 'b5bbee144360b2e5da681864e3dae6c2cafd2552', name: "heading" }))));
     }
 };
 
@@ -562,11 +565,11 @@ const DropdownOptionCpnt = class {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (index.h(index.Host, { key: 'cfdd7c14ccd6996d9e4e540b3364201d78f68ee8', class: {
+        return (index.h(index.Host, { key: 'f4fa4b0a3150fafd4b1c259aa140925219487898', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': !!isDisabled,
                 'xpl-dropdown-option--selected': !!isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: 'f562da32ddf9725e696659abf6f245d1e9b1f787', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: '10426bcc6a8a88db580eb04b3f83ad5d9316fc73', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: '5f67b98ef75350ca860e96b5dd0c5375447bf09f', name: "option" }), subtitle && index.h("span", { key: '6240790bbe44e43d612245bd052ed2a54fa409e1', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: '417af38233cd4765cc54a0cc4541bb5caeaf10ab', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: '48cbe69b056142ce5ef5cd6c608a99f1defd2e9f', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: '14b86d61bab431487cdef906a0a9b138d6ab4bbb', name: "option" }), subtitle && index.h("span", { key: 'c7ff5ee61b08f7a94d107183127c0b9cff0b49b5', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -25,9 +25,9 @@ const DynamicTableCell = class {
         const colIndex = this.el.parentElement
             ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
             : 0;
-        return (index.h(index.Host, { key: 'c2cfd05197952dd882bb3cf138dcbbc556e34583', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (index.h(index.Host, { key: '6a4eea3dcf826a18c24068acea56dc63261220f4', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el ?? undefined;
-            } }, index.h("slot", { key: 'bb48fdae37888679b567f842e7343091c851318a' })));
+            } }, index.h("slot", { key: '138598bb74c49c32b649f0955a53cb8ea479e04f' })));
     }
     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: '385be648a5890a43b63bf78e5cdbb08ded40b350', role: "row", class: classList, ref: (el) => {
+        return (index.h(index.Host, { key: '4b0e558771154ca42ab57235d9b38861831d7eeb', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el ?? undefined;
-            } }, index.h("slot", { key: 'aa2519e69e547492a25d9fbf18c4dc5b090fbded' })));
+            } }, index.h("slot", { key: '8b2b1a78d797c9a5fcaa8b31db2a41f57335b683' })));
     }
 };
 

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

@@ -46,10 +46,10 @@ const DynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (index.h("div", { key: '227ec50512aeedc2cd1989c3eb59e8d990ff9e9f', role: "grid", class: {
+        return (index.h("div", { key: '9fdd0a6b9adfad92d89ff30873009e08ca981124', role: "grid", class: {
                 'xpl-dynamic-table': true,
                 'xpl-dynamic-table--accordion': this.hasAccordion,
-            }, "aria-colcount": this.colCount }, index.h("slot", { key: '7dbc7ff3246211e89da64d07593a015016c60b59', name: "header" }), index.h("slot", { key: '2f4fd56d6f05d62bc2eb57afaf1d3e382c06ca57', name: "body" })));
+            }, "aria-colcount": this.colCount }, index.h("slot", { key: 'a105d82f752d34618a0603c59f85ea9e2ee6c3dd', name: "header" }), index.h("slot", { key: '24817b404a5a6f50ab1f17674a85391a8645f728', 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: 'e0f19711fdc2c90a192335de13f7adaeb65560ef', class: className }, index.h("slot", { key: 'f79adf56e33fdf5b4aceee1c2e9b8410d7a43350' })));
+        return (index.h(index.Host, { key: '0fc1d60f8f0d0df7208302a3668930afdb1dc5ba', class: className }, index.h("slot", { key: '0385c17beb3982d060b4e2a4bdd0fd16f924a0d3' })));
     }
 };
 

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

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

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

@@ -56,7 +56,7 @@ const HeaderAccordion = class {
         this.updateParentCheckbox(initialCheckoxesValue);
     }
     render() {
-        return (index.h(index.Host, { key: '8c5bd1f9f7d6aecc5e06f41e68377bb309053261', class: "xpl-header-accordion" }, index.h("div", { key: 'ecfe39b4e1cc03dede4b717fbb68f2976bcd34fd', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '2cedb69a9d43daf53faff359a9d6ee9cab4b455c', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: 'bccadcd6f1c9a498fcd54441d70b95bd33827e60', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: 'a19fdea8dff5d5513f433bbdac6a05d96671308b', name: "title" }), index.h("xpl-icon", { key: '0191d698f5a41c60043e0da9751bf23f0d1fc7b7', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), index.h("div", { key: '3d0e91436da03f0c1151df754855f365ae72b3f2', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: 'f88cfc51ae9bcdfebf10545085643f87f90e3369', name: "content" }))));
+        return (index.h(index.Host, { key: '7a9c486fd491732cafa29086b3e3edab9090fcef', class: "xpl-header-accordion" }, index.h("div", { key: 'c63b756d6336e89b7976fb9a072782ed9d67a7c9', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '65d41ff6f70d0cc9022f0337335305737a23617d', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: '514f9bfe4a024416b8a4e152472c2bd7bbe3ab1d', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '29a2434b4a4be46751f4425b7837f11324547e1a', name: "title" }), index.h("xpl-icon", { key: 'cf2e043da31d9845e6b4db91022f67c3abb4918d', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), index.h("div", { key: '6bcc05f2ebf545ef67fa7cf1e3bb1e6f39f0f170', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: '6bbcd7e23979d93d88168f173766f86701ecc382', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -13991,10 +13991,10 @@ const Icon = class {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (index.h(index.Host, { key: '3d37d0047746e887defd4b3b614a0279e661bfd5' }, index.h("figure", { key: '45f00585d6916dc4a57921b323f6a3c2c14a1837', class: wrapperClasses }, index.h("span", { key: '01d1f8ff2a2db80c0fdb8078e6308d0e22a8ddef', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (index.h(index.Host, { key: '2969450a00c78280dca3b7ed44f98f8699c41808' }, index.h("figure", { key: '56dc93a59a43dc28eb7479696b8d97656a7c7c68', class: wrapperClasses }, index.h("span", { key: 'f6133fba12fc84a6547575e70997c131c1771ef2', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), index.h("figcaption", { key: '3979091cfb488cca62b8143d1f597bec480d3ed2' }, this.icon, " icon"))));
+            }, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), index.h("figcaption", { key: 'c5c9fa42d7c00ea35666b81c7f8ba39f4482572c' }, this.icon, " icon"))));
     }
 };
 Icon.style = xplIconCss();

package/dist/cjs/xpl-input-color.cjs.entry.js

@@ -127,7 +127,7 @@ const rgbToHex = (r, g, b) => [r, g, b].map((x) => x.toString(16).padStart(2, '0
 const stringToObjectColor = (input) => {
     if (input.startsWith('#')) {
         if (!/^#([a-fA-F\d]{6})$/.test(input)) {
-            throw new Error('Only 6-digit hex format supported (e.g. #aabbcc)');
+            throw new Error('xpl-input-color: Only 6-digit hex format supported (e.g. #aabbcc)');
         }
         const hex = input.toLowerCase().slice(1);
         const r = parseInt(hex.slice(0, 2), 16);
@@ -138,7 +138,7 @@ const stringToObjectColor = (input) => {
     if (input.startsWith('rgba') || input.startsWith('rgb')) {
         const match = input.match(/[\d.]+/g)?.map(Number);
         if (!match || match.length < 3) {
-            throw new Error('Invalid rgba/rgb format');
+            throw new Error('xpl-input-color: Invalid rgba/rgb format');
         }
         const [r, g, b, a = 1] = match;
         const toHex = (n) => n.toString(16).padStart(2, '0');
@@ -148,19 +148,19 @@ const stringToObjectColor = (input) => {
     if (input.startsWith('hsla') || input.startsWith('hsl')) {
         const match = input.match(/[\d.]+/g)?.map(Number);
         if (!match || match.length < 3) {
-            throw new Error('Invalid hsla/hsl format');
+            throw new Error('xpl-input-color: Invalid hsla/hsl format');
         }
         const [hue, saturation, lightness, alpha = 1] = match;
         const rgba = hslaToRgba(hue, saturation, lightness, alpha);
         const rgbaParts = rgba.match(/[\d.]+/g)?.map(Number);
         if (!rgbaParts || rgbaParts.length < 3) {
-            throw new Error('Invalid hsla/hsl format');
+            throw new Error('xpl-input-color: Invalid hsla/hsl format');
         }
         const [r, g, b] = rgbaParts;
         const hex = rgbToHex(r, g, b);
         return { hex: hex.toLowerCase(), r, g, b, a: alpha };
     }
-    throw new Error('Unsupported color format');
+    throw new Error('xpl-input-color: Unsupported color format');
 };
 const objectToStringColor = (color) => {
     if (!color.a || color.a === 1) {
@@ -378,16 +378,16 @@ const InputColor = class {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (index.h(index.Host, { key: '02aa7baed3d45ad3a2e995f588c0915e3e348bfc', class: "xpl-input-color" }, index.h("xpl-popover", { key: '4739858b3b027f3d436c8fe84d62aa917d06ec5e', disabled: this.disabled, display: "menu" }, index.h("div", { key: '470b4bd07706693748829a25fc8499965581d48b', slot: "trigger" }, index.h("div", { key: '03a100cb1041eaa939c9db7c0574ac53bc639ef7', class: {
+        return (index.h(index.Host, { key: '2c4bff1c1b56afdc1b4192a2d7c1e0a1f5ebc073', class: "xpl-input-color" }, index.h("xpl-popover", { key: 'ba545a5022a532ef2fde8c795bee19f2680514c1', disabled: this.disabled, display: "menu" }, index.h("div", { key: '180e066079da1a97ba31bcaf66d443df8a0c48ca', slot: "trigger" }, index.h("div", { key: 'c3cc0cb1484c4111b60b736b750571552437d0cf', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': !!this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, index.h("span", { key: '61594874f76b2f6da3befd6b7b6ff0136992c5d7', class: "xpl-input-color__color", style: {
+            } }, index.h("span", { key: '72aaff4e9a54da1f766d1de85bd58216c866a4b7', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (index.h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (index.h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (index.h("xpl-icon", { key: 'e6997616cc18e0cec266b6029cfbee068744967c', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (index.h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (index.h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (index.h("xpl-icon", { key: 'f55cfde9a119e9f0de379bc1bfb5b5d4b53aa992', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), index.h("div", { key: '7253fbb77364e884b4eca04c705fda8875f16250', class: "xpl-input-color__menu" }, index.h("div", { key: '75a2f6545771354c1d5a6b01ada16a090ceb47e7', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), index.h("div", { key: 'f80f215000d3a906d65f7f6673c6d8eaabe3fc6d', class: "xpl-input-color__menu" }, index.h("div", { key: '4701c99f8a528900c34005b7c26d9fa544b664d8', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el ?? undefined;
             }, style: {
                 background: [
@@ -395,9 +395,9 @@ const InputColor = class {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, index.h("div", { key: '363f0f591d7a9214e808e3374449492d1bb35096', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '6c227329fac4c27e60e05fc4635adc9e11149289', class: "xpl-input-color__grid" }, index.h("input", { key: 'ae66886dcd2384b01146238ca90144b2aaa7d315', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, index.h("div", { key: '3e0ec5c0821dfed35190053f5e4f147cb7b55eb0', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '1b278a13c88aa663a2b8217fbc3524ee213e0f3b', class: "xpl-input-color__grid" }, index.h("input", { key: '5e35bdd6e7776848a2d2eb32a00deb3ec349c21d', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el ?? undefined;
-            } }), index.h("input", { key: 'fae631f4530dcabcef0e4ba748d7104d7539a573', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), index.h("input", { key: '1119341201878e5c8511fa3e241afba15eab6d9b', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el ?? undefined;
             }, style: {
                 backgroundImage: [
@@ -407,9 +407,9 @@ const InputColor = class {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), index.h("div", { key: '01dcd22dc144e4b8a8288b7e4cde2fc781c4f8f0', class: "xpl-input-color__preview", style: {
+            } }), index.h("div", { key: '3804928b107e92bddbc3afa3fa883caafddbd06b', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), index.h("div", { key: '64e69fd55e9f7030ca1ee354e4c322d837d41993', class: "xpl-input-color__inputs" }, [
+            } })), index.h("div", { key: '86961ee31d82724a76f6598bd547c8e650e27f24', class: "xpl-input-color__inputs" }, [
             'hex',
             'r',
             'g',

package/dist/cjs/xpl-input-phone.cjs.entry.js

@@ -477,20 +477,20 @@ const InputPhone = class {
         this.hasErrorState = null;
     }
     render() {
-        return (index.h(index.Host, { key: 'c180c62687c5d1b9c9f31400df8b76475ffe821e', class: {
+        return (index.h(index.Host, { key: '124c8feabed1cf383f2eb65e77dd2517c96ea01c', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, index.h("div", { key: 'ea5b833f60f7bac459ef6362091a15beac015dec', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: '6e0d7b18dc7784ffcadcc13500c02bbec1977b90', 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 }, this.selectedCountry?.name && (index.h("xpl-icon", { key: '038a87158d9417ad9889e3b0a94cd63bc16f5538', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '5434d2645e31bd30207c26f8e0a5004c00c699c6', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '623f1b49c156614a40cee574e1a41c2d09014e2b', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: '535313ab4c84a989b0bedfe07bbd080ffaa4b76b', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: 'e9f03ca04b18fab0f9e6407f3686e43a072a3d81', ref: (el) => {
+            } }, index.h("div", { key: '6b2a17efd488aa18ac8dea1e86d12884ceb51e90', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: 'd3f8e42841532f8c37a131545007af3213c1b9e0', 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 }, this.selectedCountry?.name && (index.h("xpl-icon", { key: 'cb52527ba28d95a93cba734bb6d1b3ab8e14a388', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '7942dae0973871635b7b64e0697d8c25352ac3bf', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '24b810a9e03c7774ad6576cc9f03888d5da9d3aa', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: 'eb7684aad427a10615c23326a2a2628a4a12fbb0', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: '8e429f156e36f101413e1d5168bb38a2ca9bdebf', ref: (el) => {
                 this.inputEl = el ?? undefined;
-            }, 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 && (index.h("button", { key: '9e52b938631e3414225506cf13a50129e4046bd1', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: 'd7fa5c395ac0677db31405b2406ec33c1aef8d7d', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '1df1f72efa719f230e582e57c62f62eff98abfc8', 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 && (index.h("button", { key: '403e1b9e35a7bfd2ba356c16c4d5e9178541f876', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: 'aee1381d3a7dcec64c708ecfa67266eef442850e', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '9d14a65f3ac538b4e420151927a0c349adf3688d', ref: (el) => {
                 this.dropdownRef = el ?? undefined;
             }, 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" }, index.h("div", { key: 'ce221f1de83d5cce87162c316aa3e64fbb0396a5', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '884815148c6827573b8a7584bb06eb8cfeaa9976', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, index.h("div", { key: '87006a8a90ef37032775247a387896f065ce5673', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '26a99c318081e3215fa779191ee8a0f9c127489f', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 this.searchQuery = e.detail ?? '';
-            } }, index.h("xpl-icon", { key: '9edff232287061494d5b8af93885c2a12fbe969b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, index.h("xpl-icon", { key: '4aee182e975ed805524ac93e3a34f055266b693b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/xpl-input-time.cjs.entry.js

@@ -175,11 +175,11 @@ const InputTime = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '61190dc5c00042aa095367bcce600a4d759bdbca', class: {
+        return (index.h(index.Host, { key: '5494cc0a537152b9d8dfa03e5281b21e6bb6eee2', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, index.h("xpl-input", { key: '8793e06e961f53794df33d0015280930a43d1a90', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, 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 && (index.h("xpl-dropdown", { key: '7c88be365f26e1eecb6c731acb9d1c87d96973dd', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, index.h("xpl-input", { key: '0d32784cd9fc8acacae1854a966bb426fa135fb5', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, 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 && (index.h("xpl-dropdown", { key: '206c668ca8ee29ceffaf14f14acd90fb076fc0ae', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el ?? undefined;
             }, class: "xpl-input-time__dropdown" }))));
     }

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

@@ -159,11 +159,12 @@ const Input = class {
             case 'time':
                 return (index.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 (index.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 }));
+                return (index.h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, error: this.error !== undefined, 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((this.label ?? '').trim());
-                const hasErrorMessage = Boolean(this.error && this.error.length > 0);
-                return (index.h("xpl-input-search", { ariaLabel: (this.ariaLabel ?? '').trim() || 'Search', autocomplete: this.autocomplete ?? 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasErrorMessage, hasVisibleLabel: hasVisibleLabel, inputId: this._id ?? '', name: this.name, onBlurEvent: this.handleSearchBlurForward, onFocusEvent: this.handleSearchFocusForward, onSearch: this.handleSearchCommit, onValueChange: this.handleChildValueChange, placeholder: this.placeholder ?? 'Search', readonly: this.readonly, ref: (el) => {
+                const hasError = this.error !== undefined;
+                const hasErrorMessage = hasError && (this.error?.length ?? 0) > 0;
+                return (index.h("xpl-input-search", { ariaLabel: (this.ariaLabel ?? '').trim() || 'Search', autocomplete: this.autocomplete ?? 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasError, hasVisibleLabel: hasVisibleLabel, inputId: this._id ?? '', name: this.name, onBlurEvent: this.handleSearchBlurForward, onFocusEvent: this.handleSearchFocusForward, onSearch: this.handleSearchCommit, onValueChange: this.handleChildValueChange, placeholder: this.placeholder ?? 'Search', readonly: this.readonly, ref: (el) => {
                         this.searchInputRef = el ?? undefined;
                     }, required: this.required, shape: this.shape ?? 'rounded', value: this.value ?? '' }));
             }
@@ -182,7 +183,7 @@ const Input = class {
     }
     render() {
         let hasError = false;
-        if (this.error) {
+        if (this.error !== undefined) {
             hasError = true;
         }
         else if (this.multiline &&
@@ -190,13 +191,13 @@ const Input = class {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (index.h(index.Host, { key: '008387a60d49c0a4d303f7b6254c18ba109138c8', class: {
+        return (index.h(index.Host, { key: '94a5e19a36756ac43ebbe6d3996a2ffbf475da24', 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 && (index.h("label", { key: '73e44138ac4bcd5ab6f96de33d818ae0d0bdb8fb', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '85b33374df5ba7f1c002d1a5555a23013fd5f8f9' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (index.h("label", { key: '802f79003fe348f0d6927701b4becdf086dc207e', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: '3b43c9816359cfbfc0c11a8874a4b561d04986d1', icon: "circle-warning", size: 16 }), index.h("span", { key: '76fe2a5cb424eb17e5d7c9358f81d2ad36775903' }, this.error)))));
+            } }, this.label && (index.h("label", { key: 'd41b5e5245483e2ea235c910f85cd6a21b100dec', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: 'c9d55823b8b97678b2f5f4374446c3693e6dceaa' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (index.h("label", { key: '20e5a1d2af06e571f0757aa60633438f79a6a17d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: 'a193ee5f1d3e0d8479fa8dfd66ab27edeb400d30', icon: "circle-warning", size: 16 }), index.h("span", { key: 'acf686fe036d1a1e9cb944ff773dda86e90ff39a' }, this.error)))));
     }
     get el() { return index.getElement(this); }
 };
@@ -327,16 +328,16 @@ const InputDate = class {
         parent.removeChild(wrapper);
     }
     render() {
-        return (index.h(index.Host, { key: 'ed469d24ccc404df6d361338c6f34b9a902c2a67', class: {
+        return (index.h(index.Host, { key: '768d9bffdb7431a48824590f9ae61f8e77735e98', 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,
-            } }, index.h("div", { key: 'ab4798bd6bb4be6495050504eb8a606d80fe84dc', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: '4bf483491d4a688564f745ef75b770e741177599', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '99030b75c8fe9bb681d9d3c4ea44b16346316c7c', 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) => {
+            } }, index.h("div", { key: '5b3421bad3bc8474b3724fc7a4287ccf98bd1ba5', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: 'f0e88d0052247c15decc6de2635db1fb847fdd94', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '251ddfab7140c7a13fd2ef36d7baefe81ed3e716', 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 ?? undefined;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), index.h("xpl-icon", { key: 'fb4de593bb36664cd8f95518b5da622df545e437', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: '6835c6b4832918efa513e57c62ec5326f63d8c36', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), index.h("xpl-icon", { key: '6828c8024496963a2a480091a40326154e21d1f5', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: 'e08267b6ffc0d605b557e69784b54757621182c7', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -383,18 +384,18 @@ const InputFile = class {
         this.onRemoveFileByIndex(fileIndex);
     }
     render() {
-        return (index.h(index.Host, { key: '62b134a3517ea8e5d9c0ba8a0f0c0ba56413a05b', class: {
+        return (index.h(index.Host, { key: 'baa52af5a8ee6222ff745cece6e59d9480165af6', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': !!this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': !!this.disabled,
-            } }, index.h("span", { key: '8f3aa455cf7fe9f27dbab609969dfac1bf4b1a3a', class: {
+            } }, index.h("span", { key: '802ed05f26bd1e2a618f5e09bea7370fe69a4718', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': !!this.hideTriggerOnSelect && (this.files?.length ?? 0) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: '3d5d42f659cd78b9f54e008113a2ff99ddaa4a03', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (index.h("ul", { key: 'd827f178ba04e03d8879b1cf81674226b3f265c7', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-input-file__file-name" }, file.name), index.h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: '487381f2b34d2ad528f1b32f976e5513c1e29c11', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (index.h("ul", { key: 'fe7b503a89a65af02cbb39b93b518b2dde790a34', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-input-file__file-name" }, file.name), index.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 && (index.h("span", { key: '3bc1ab3c72d4039a2635b9ceb4a22f4a98875632', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), index.h("input", { key: '23f6d50b87fe8e4b315670c73565bc50ca592ed5', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (index.h("span", { key: '6e5e54426f2b33858b374d09014ec0096fa43bb4', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), index.h("input", { key: '81d08e97d8d2c8a59640348e295261f9acd439cc', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el ?? undefined;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
@@ -506,7 +507,7 @@ const InputSearch = class {
         return shell;
     }
     render() {
-        return (index.h(index.Host, { key: '017e5d3958dccf6ca1096cd623ffd49b302a5ab3', class: {
+        return (index.h(index.Host, { key: '4a152d3a8db620391334488e1c6c3cdbe9250ba3', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,