@xplortech/apollo-core 2.9.0 → 2.11.0

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

@@ -11,14 +11,14 @@ export class Checkbox {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'dd508c61fc68052f2bbdfccd606ea8f0109783f3', class: {
+        return (h(Host, { key: 'd173bab038a25f785864e5614b29ec2fde832786', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'c5b482a12c02cb4384444e3d385cccc17a8cbd3c', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'e5ae6eef395457ff6021b008bbb4221e7c36a3c9', class: {
+            } }, h("input", { key: 'badfc1e403ba5b51b757823354c4cec86f678116', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'b56888525a7b3d9544d8595b71d1ffe36f00e7b8', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '71ae02b761df01bea00b483e21a9b442b8fbdd9f' }), this.description && (h("small", { key: 'f34f7e323cd9c39ce1094177e7a4d3cf4b06f788', class: {
+            }, htmlFor: this.id }, h("slot", { key: 'a5f06411725e10f5e5fafc33ff5e8f4adfec9e5b' }), this.description && (h("small", { key: '16ac47d9316e4a78f732cb3c0851efd8eaf903f2', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -153,7 +153,7 @@ export class Checkbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
+                    "text": "The value attribute for the checkbox input.\n(submitted in form as name/value pair)"
                 },
                 "getter": false,
                 "setter": false,

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

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

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

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

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

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

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

@@ -31,8 +31,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: '917b6ae82a30b849b100e878dc6be08eb4171214', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '21573d19d14f861eea6562529f78e93affc1e5d2', class: headerClasses }, h("header", { key: '1af52bd082f4d12239db85e78eaf74ed2eb7e027' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dfdcc25ae67fdc766ee3075a479fbfeeac2561ab', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '4072018714c05bd5bae20bfb9e5b6a04561474da', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f81204887ad6c229cb50e8d3ff654c1aa4703368', name: "title" }, this.name)), this.link && (h("span", { key: '6d8d61f8611fdbc5cd09fc20ba15194e0e1e7b56', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '863e66734bbbd6aa178f140b22f8afb3dd401127', icon: "chevron-right", size: 16 })))), h("dd", { key: '08a5e4af6873c267336f7daff6d3455e75a2883e', class: "xpl-data-card__body" }, h("div", { key: 'ec8ff889fb93d99e7ef51361e041edbaaaf5cd62', class: "xpl-data-card__left" }, h("span", { key: '4787e6aadc3832830fe707ffc08e5614a7abde7b', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '2060dba53f12917e37747a6bc52c7f03fe4dadc7', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '7a091cce8bc0abae2af7b15d6d1a63acd16854c5', class: "xpl-data-card__right" }, h("slot", { key: 'd83790136435a0d5427fd746d2cba5a08cf914eb', name: contentSlot }))))));
+        return (h(Host, { key: 'cbf0c9eb79fbd3e66c683e821e9b992d46d5ec1a', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '92bc8a02b1acfa3c080a2a975d43118be54f10d5', class: headerClasses }, h("header", { key: 'f6a0baa73ab0e9d3a6eb9252acba54677a1083dc' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dad99548c0ded82140b345e9887747c31ee9f6c7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'd591758d2ce1647ea67f03a27e4ae2efd29e4652', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '07760d38b11971d96d7841c9897aa13481ea234c', name: "title" }, this.name)), this.link && (h("span", { key: '6ac3587f2ab1375cee605b22fe515e2c9a489e72', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '160ebeeedc59a31e0ea3480dd393ec4623afb831', icon: "chevron-right", size: 16 })))), h("dd", { key: 'dcf0703823e9f58f71a112a83de3d65cd43e1ae1', class: "xpl-data-card__body" }, h("div", { key: 'd7551579d17cfebed3dac59d32b56eb166afb530', class: "xpl-data-card__left" }, h("span", { key: 'c5c412c76f9785de5ff8686db3dcb71540b79b1f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'b33a9a133cf0a18deaccf6e3772ab1a797f9fa1f', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: 'e9dc031341b49ebf121cbe8cc081df6978aa13ad', class: "xpl-data-card__right" }, h("slot", { key: '37c8414e9dc60052f1d5a69d86ece17b7cdbc1da', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {

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

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '213dc1893d64e06256ef2958b59b8377428d81d4', class: className }, h("span", { key: '2e03654076b9b76f2ce9e8475bb44068170c8a80' }, h("slot", { key: '5af40b6963beddbd0d1fe5fd05a9e62274ce3418' }))));
+        return (h(Host, { key: '1926b1e92a89dc5039042d29491f246cf3900efa', class: className }, h("span", { key: '492651208216149bfd4d2ed7cc8610b2bc8b05ea' }, h("slot", { key: '1e8b9e121ab1cb946b7a13d2bacbeea9a490a289' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

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

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

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

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

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

@@ -49,11 +49,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '838f64dba15bc8d6c2f65a8685365c5618c24d5f', class: {
+        return (h(Host, { key: '66ffacb152e80f270877a189488048ef6b36b7af', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'bc4b23054cd73a95ff5cf167c4195563a9e318ec', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '797d92d1d80cb8c33500d8dfe8b1bf9396c767ca', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '7a590a3abae38e7934f703929895be152b01816d', name: "option" }), subtitle && h("span", { key: '465fb73335df17864cd21e067f26cdba85d8135c', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '274fa639d506ef3feb5bafc3f0b21ed8bf80e95a', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'e7f63ede84adca57d99baa06dc1555d3afacd02c', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'cc0874abba079616e8516d366981a38ddef550b1', name: "option" }), subtitle && h("span", { key: '37cd186edb0de3f4c33b9faa2dfa983424a011bd', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {

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

@@ -12,8 +12,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host, } from "@stencil/core";
 import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
+const VIRTUAL_LIST = {
+    rowHeight: 45,
+    overscan: 20,
+    virtualizeFrom: 200,
+};
+function renderOption(option, virtualIndex) {
+    const { groupName, options: opts, subtitle } = option, properties = __rest(option, ["groupName", "options", "subtitle"]);
+    if (groupName) {
+        return (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties)));
+    }
+    const isVirtual = virtualIndex !== undefined;
+    return (h("xpl-dropdown-option", Object.assign({ class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
+            ? { transform: `translateY(${virtualIndex * VIRTUAL_LIST.rowHeight}px)` }
+            : undefined, subtitle: subtitle }, properties)));
+}
 export class Dropdown {
     constructor() {
+        this.virtualEnd = 0;
+        this.virtualStart = 0;
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
@@ -21,6 +38,9 @@ export class Dropdown {
         this.placement = 'bottom-start';
         this.selectOnFocus = false;
         this.cleanupAutoUpdate = null;
+        this.virtualScrollRaf = null;
+        this.openAlignmentRaf = null;
+        this.previousOptionCount = 0;
         this.updateDropdownPosition = async (triggerEl) => {
             var _a, _b;
             const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
@@ -92,6 +112,64 @@ export class Dropdown {
                 this.isOpen = false;
             }
         };
+        this.handleVirtualScroll = () => {
+            if (this.virtualScrollRaf !== null)
+                return;
+            this.virtualScrollRaf = requestAnimationFrame(() => {
+                this.virtualScrollRaf = null;
+                this.updateVirtualRange();
+            });
+        };
+        this.setListEl = (el) => {
+            var _a, _b;
+            if (el === this.listEl)
+                return;
+            this.listEl = el;
+            (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (el && typeof ResizeObserver !== 'undefined') {
+                (_b = this.listResizeObserver) !== null && _b !== void 0 ? _b : (this.listResizeObserver = new ResizeObserver(() => {
+                    if (this.isVirtualized)
+                        this.handleVirtualScroll();
+                }));
+                this.listResizeObserver.observe(el);
+            }
+        };
+        this.scheduleOpenAlignment = () => {
+            if (this.openAlignmentRaf !== null)
+                return;
+            this.openAlignmentRaf = requestAnimationFrame(() => {
+                this.openAlignmentRaf = null;
+                this.scrollSelectedIntoView();
+                this.updateVirtualRange();
+            });
+        };
+    }
+    onOptionsChanged() {
+        var _a, _b, _c, _d;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const listReplaced = total !== this.previousOptionCount;
+        this.previousOptionCount = total;
+        if (!this.isVirtualized) {
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
+            return;
+        }
+        const list = this.listEl;
+        if (list) {
+            const maxScroll = Math.max(0, total * VIRTUAL_LIST.rowHeight - list.clientHeight);
+            if (list.scrollTop > maxScroll) {
+                list.scrollTop = maxScroll;
+            }
+            if (this.isOpen && listReplaced) {
+                const selectedIndex = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.findIndex((option) => option.isSelected)) !== null && _d !== void 0 ? _d : -1;
+                const outOfWindow = selectedIndex >= 0 &&
+                    (selectedIndex < this.virtualStart || selectedIndex >= this.virtualEnd);
+                if (outOfWindow) {
+                    this.scrollSelectedIntoView();
+                }
+            }
+        }
+        this.updateVirtualRange();
     }
     onAnchorToTriggerChanged() {
         if (this.isOpen) {
@@ -115,7 +193,7 @@ export class Dropdown {
     }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
-            const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
+            const flatOptions = this.options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
             flatOptions.forEach((option) => {
                 const optionValue = option.value || option.label;
                 if (this.mode === 'single') {
@@ -140,9 +218,13 @@ export class Dropdown {
         this.isOpenChange.emit(newValue);
         if (newValue) {
             this.startPositioning();
+            this.alignOnOpen();
         }
         else {
             this.stopPositioning();
+            this.cancelVirtualScroll();
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
         }
     }
     connectedCallback() {
@@ -150,44 +232,68 @@ export class Dropdown {
         document.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keydown', this.handleKeyDown);
         this.stopPositioning();
+        this.cancelVirtualScroll();
+        (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         this.handleSelect = this.handleSelect.bind(this);
         if (this.selectedValues) {
             this.onSelectedValuesChanged(this.selectedValues, true);
         }
+        this.previousOptionCount = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     }
     componentDidLoad() {
-        if (this.isOpen)
+        if (this.isOpen) {
             this.startPositioning();
+            this.alignOnOpen();
+        }
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
         const isSingle = mode === 'single';
         const isMulti = mode === 'multi';
         if (options) {
-            options
-                .reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], [])
-                .forEach((option) => {
-                const isMatch = (option.value || option.label) ===
-                    (component.hostElement.value || component.hostElement.label);
-                if (isSingle) {
-                    option.isSelected = isMatch;
-                    component.hostElement.isSelected = true;
-                }
-                else if (isMulti && isMatch) {
-                    option.isSelected = !option.isSelected;
-                    component.hostElement.isSelected = option.isSelected;
-                }
-            });
-            const mapOptions = (option) => {
-                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
-                return option;
-            };
-            this.options = options.map(mapOptions);
+            const targetValue = component.hostElement.value || component.hostElement.label;
+            const hasGroups = options.some((option) => option.groupName);
+            if (!hasGroups) {
+                options.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        if (isMatch)
+                            component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                this.options = [...options];
+            }
+            else {
+                const flatOptions = options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
+                flatOptions.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                const mapOptions = (option) => {
+                    option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                    return option;
+                };
+                this.options = options.map(mapOptions);
+            }
         }
         else if (isSingle) {
             const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
@@ -226,21 +332,83 @@ export class Dropdown {
             .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
         this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
+    cancelVirtualScroll() {
+        if (this.virtualScrollRaf !== null) {
+            cancelAnimationFrame(this.virtualScrollRaf);
+            this.virtualScrollRaf = null;
+        }
+        if (this.openAlignmentRaf !== null) {
+            cancelAnimationFrame(this.openAlignmentRaf);
+            this.openAlignmentRaf = null;
+        }
+    }
+    alignOnOpen() {
+        this.scrollSelectedIntoView();
+        this.updateVirtualRange();
+        this.scheduleOpenAlignment();
+    }
+    scrollSelectedIntoView() {
+        const { listEl: list, options } = this;
+        if (!list || !(options === null || options === void 0 ? void 0 : options.length) || !this.isVirtualized)
+            return;
+        const selectedIndex = options.findIndex((option) => option.isSelected);
+        if (selectedIndex < 0)
+            return;
+        const { rowHeight } = VIRTUAL_LIST;
+        const centered = selectedIndex * rowHeight - (list.clientHeight - rowHeight) / 2;
+        const maxScroll = Math.max(0, options.length * rowHeight - list.clientHeight);
+        list.scrollTop = Math.max(0, Math.min(centered, maxScroll));
+    }
+    updateVirtualRange() {
+        var _a, _b;
+        const list = this.listEl;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (!list || !total)
+            return;
+        const { rowHeight, overscan } = VIRTUAL_LIST;
+        const firstVisible = Math.floor(list.scrollTop / rowHeight);
+        const visibleCount = Math.ceil(list.clientHeight / rowHeight) || 1;
+        const start = Math.max(0, firstVisible - overscan);
+        const end = Math.min(total, firstVisible + visibleCount + overscan);
+        if (start !== this.virtualStart || end !== this.virtualEnd) {
+            this.virtualStart = start;
+            this.virtualEnd = end;
+        }
+    }
+    get isVirtualized() {
+        const { options } = this;
+        return (!!options &&
+            options.length > VIRTUAL_LIST.virtualizeFrom &&
+            options.every((option) => !option.groupName && !option.subtitle));
+    }
     render() {
-        const { isOpen } = this;
-        const { mode, options } = this;
-        const hasOptions = options && options.length;
-        const mappedOptions = hasOptions &&
-            options.map((_a) => {
-                var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
-                return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
-            });
-        return (h(Host, { key: '1ef465611f9a8501af41c17523352714a7921f29', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        const { isOpen, mode, options } = this;
+        const hasOptions = !!(options && options.length);
+        const shouldVirtualize = this.isVirtualized;
+        let listContent;
+        if (!hasOptions) {
+            listContent = h("slot", { key: '7a604ed002d4c412eb709aa7c3ef1a9e80f614ed', name: "options" });
+        }
+        else if (shouldVirtualize) {
+            const { rowHeight, overscan } = VIRTUAL_LIST;
+            const total = options.length;
+            const start = Math.min(this.virtualStart, total);
+            const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
+            const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
+            listContent = (h("li", { key: 'd7730538dfae58a6efc6a8971e0078b28fc5b9de', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+        }
+        else {
+            listContent = options.map((option) => renderOption(option));
+        }
+        return (h(Host, { key: '282d3bc09a8ce0e63d55bbc9707936afe0efae01', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
-            }, role: "listbox" }, h("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
+                'xpl-dropdown--virtualized': shouldVirtualize,
+            }, role: "listbox" }, h("slot", { key: '977cfb27b24bcecaf22587bd2e6350ad52743cad', name: "header" }), h("ul", { key: '46274999327ffdb9749a012b839ef124df4d72d2', class: "xpl-dropdown-list", ref: (el) => {
+                this.setListEl(el);
+            }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {
@@ -482,6 +650,12 @@ export class Dropdown {
             }
         };
     }
+    static get states() {
+        return {
+            "virtualEnd": {},
+            "virtualStart": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "isOpenChange",
@@ -542,6 +716,9 @@ export class Dropdown {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "options",
+                "methodName": "onOptionsChanged"
+            }, {
                 "propName": "anchorToTrigger",
                 "methodName": "onAnchorToTriggerChanged"
             }, {

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

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

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

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

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

@@ -24,9 +24,9 @@ export class DynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: '17fac4d9214237c1896a136839c79377dc9b3169', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
+            } }, h("slot", { key: '7d41f904e2c1fa3dcde2b7652cd2840c6bde3470' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class Grid {
         });
     }
     render() {
-        return h(Host, { key: 'aeee950fb242a14f50ceda1d199cf427597b70f6', class: "xpl-grid" });
+        return h(Host, { key: '3700079a0f7bbea9755a217d7757dff5a82ee601', class: "xpl-grid" });
     }
     static get is() { return "xpl-grid"; }
     static get elementRef() { return "container"; }

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

@@ -12,7 +12,7 @@ export class GridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
+        return (h(Host, { key: 'a541967d85e9a4fcd643aa95b62226e46c476dc6', class: className }, h("slot", { key: 'e20ba799288ffb654334698215518e8cfe6ba9a3' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

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

@@ -68,7 +68,7 @@ export class HeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '16a93cbaab64072990502ed7d1bc2a496ad31425', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', name: "content" }))));
+        return (h(Host, { key: '5a1f1085ff8351162fc87a30e939035ec81795fc', class: "xpl-header-accordion" }, h("div", { key: 'dd3e3b0a441b380e28fb898283e93d53d7347866', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '6550eb878d0f55262beb1ee114ea54801037ad16', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '80e0b49c5d52866293eac2aef91bbe97d4a8ad96', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '9a29e3496f29f6179aae2c122e17db09943e2067', name: "title" }), h("xpl-icon", { key: 'c3fddf66a6c41353240adb706da7faf6231caa57', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'e1ffea5a3a456b5556d67f42326ec17eb80fe305', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7c4e2677463ad9bbd1adcafc95692bdd95a09c0b', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

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

@@ -16,10 +16,10 @@ export class Icon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: '81c2fcdfacbdb3cc34b1bd870a13041a3b3720c8' }, h("figure", { key: 'd8bc04651492fb705fdc6a10cc44a19013da078b', class: wrapperClasses }, h("span", { key: '8c9d18ade708bbf3caf4e1fce9779680ee9f6892', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '256c0d05be8026b24a139f8bfff4f00c65112030' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: 'd26da1d1df59a9aa414c50bcfb9861d860a6ae65' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

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

@@ -244,7 +244,7 @@ Datepicker.args = {
     errorMessage: '',
     min: '01/01/2000',
     max: '12/31/2099',
-    required: true,
+    required: false,
     type: 'date',
 };
 Datepicker.parameters = {

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

@@ -195,16 +195,16 @@ export class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '14fe9097b513719084fd3487b3a18f95c0eaf158', class: "xpl-input-color" }, h("xpl-popover", { key: '8b3d322c236115ab5b487b8ea6fde2227a69cc47', disabled: this.disabled, display: "menu" }, h("div", { key: '8309555df24767e7e3c4131a9d571a23b7b29cc6', slot: "trigger" }, h("div", { key: '8a9edf9c0e2c70f15fdd7add09571e3b0bfef89a', class: {
+        return (h(Host, { key: '9700bba0a5c9b7cd11135a21167e5e06463483b5', class: "xpl-input-color" }, h("xpl-popover", { key: '486c2fc5660d7e7c60b7922fa4363174baa7892e', disabled: this.disabled, display: "menu" }, h("div", { key: 'c51bd4c77381c46726bf32c319f69611eba845d1', slot: "trigger" }, h("div", { key: '9a78cf317854ce56532d49c551d1e1041daf1484', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '0d1c39976d6b95e0ff25b46b00b9a3d6796c8f8e', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: 'a78d2b771ad17897820805f1f5d1e265cdd6cbfa', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '2b5ab7d7927e9685652de5e5ea843b970465d568', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '2a176659e06f5f971b1de14c9e6f2978a766dd35', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: 'd564121400cc8adde26658ad15f25403f2672988', class: "xpl-input-color__menu" }, h("div", { key: '896f8b010eb20a03c0c838467f7a8f7d7e6980e1', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: '4cfadf2209a0d453f8a1ecc74a343d63b48c5b36', class: "xpl-input-color__menu" }, h("div", { key: '5acdd216cf4e1714ec493a53c0a974d6d25e0c49', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -212,9 +212,9 @@ export class InputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: 'af50abd9fc235df8ed6c0e399d6b755078c86182', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '8bdbdfee8d6c09534700744a420ac80b89330789', class: "xpl-input-color__grid" }, h("input", { key: '9e918ed41384861a55847709980d65751f1e8fbe', 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 }, h("div", { key: '519a19802a049f1c47fe9acd8ca074c9679cb667', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '4c6cc466a3ba89897f0b59cce99835f9a2bc842a', class: "xpl-input-color__grid" }, h("input", { key: 'e32fa17e45e231c5d3492c8900feb643ab36f206', 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;
-            } }), h("input", { key: 'a352b5ed96dff5fbc5e1dce6e241e34d2f847f5d', 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) => {
+            } }), h("input", { key: '52ca6f9ae33a4129b0b050b7c2c2b8f74616fe5d', 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;
             }, style: {
                 backgroundImage: [
@@ -224,9 +224,9 @@ export class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: 'df000dcb3466bc5be835d55381562c356ecc8c17', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: 'a1cf7bde4bd0d2fc7b19b60cff878f56aeb70e2e', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: 'fc79485821cc081e14007aefdfd4b14bbd875a1e', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: '3a82739b45a8ac2be0e732ea27cff2a583503eaf', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;