@rededor/cura-hydrate 1.0.0-alpha.1 → 1.0.0-alpha.2

package/index.js

@@ -3067,7 +3067,7 @@ class CuraButton {
         }
         this.type = 'button';
         this.size = 'large';
-        this.disabled = false;
+        this.disabled = 'false';
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -3146,7 +3146,7 @@ class CuraButton {
         }
     }
     render() {
-        return (hAsync(Host, { key: '7491e8209b9193f5e7f51ead1b08afe88b160ec1' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
+        return (hAsync(Host, { key: 'b218c0fb128f2057632a4c8d220c379091cdca15' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -3160,7 +3160,7 @@ class CuraButton {
         "$members$": {
             "type": [513],
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "isLoading": [516, "is-loading"],
             "iconName": [513, "icon-name"],
             "iconset": [513],
@@ -3196,7 +3196,7 @@ class CuraButtonOutline$1 {
         }
         this.type = 'button';
         this.size = 'large';
-        this.disabled = false;
+        this.disabled = 'false';
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -3275,7 +3275,7 @@ class CuraButtonOutline$1 {
         }
     }
     render() {
-        return (hAsync(Host, { key: '44556818a51f64ae694995a50b582e41f4386467' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
+        return (hAsync(Host, { key: '04c310620c46c1da780fe03a98699f8238b0c77b' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -3290,7 +3290,7 @@ class CuraButtonOutline$1 {
         "$members$": {
             "type": [513],
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "isLoading": [516, "is-loading"],
             "iconName": [513, "icon-name"],
             "iconset": [513],
@@ -3320,7 +3320,7 @@ class CuraButtonOutline {
         this.onclick = createEvent(this, "onclick", 7);
         this.theme = window.CuraAPI.theme;
         this.size = 'medium';
-        this.disabled = false;
+        this.disabled = 'false';
         this.selected = false;
         this.iconPosition = 'right';
         this.color = 'accent';
@@ -3395,7 +3395,7 @@ class CuraButtonOutline {
         return classes;
     }
     render() {
-        return (hAsync(Host, { key: '11c526fa5a82a986513a2d2cf94e85fbdc0a83c5' }, hAsync("button", { key: '539cb4766e18cf195541731bf95809784021fc21', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'f57e41656abb33d450e9876517e575c628c633c6', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: '84ee6289e8c5e242cbdc2cdd8110be7102244176', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '2f292f5308c69fc9efa66a43bac5941ab2adeaf9' }))))));
+        return (hAsync(Host, { key: '46ec847aae53f96f9c9cb9cba1472bb33df8fcdb' }, hAsync("button", { key: '508303050695d9a1ff7d27174e511bcac814c153', class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'bd06094e5004bd11e8ba9d05387300c8d57d34e2', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: 'b688ba052bdf3bcd39a61d553f49a0e47ac5ca54', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '29f645c3866a9f24cbae12f5167a2645c0452153' }))))));
     }
     static get watchers() { return {
         "background": ["setColors", "assignColor"],
@@ -3408,7 +3408,7 @@ class CuraButtonOutline {
         "$tagName$": "cura-button-select",
         "$members$": {
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "selected": [516],
             "iconPosition": [513, "icon-position"],
             "color": [1],
@@ -3438,7 +3438,7 @@ class CuraButtonTransparent {
         }
         this.type = 'button';
         this.size = 'large';
-        this.disabled = false;
+        this.disabled = 'false';
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -3506,7 +3506,7 @@ class CuraButtonTransparent {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'eb208813f7743d71c826ea4e05c19933fdec34de' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
+        return (hAsync(Host, { key: 'aa51dc3bd4dcf3487b253048e7580e89aef6ed81' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -3520,7 +3520,7 @@ class CuraButtonTransparent {
         "$members$": {
             "type": [513],
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "isLoading": [516, "is-loading"],
             "iconName": [513, "icon-name"],
             "iconset": [513],
@@ -7704,7 +7704,7 @@ class CuraCheckbox {
         return hAsync("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (hAsync(Host, { key: '9f96ab8f12502dc777ee00d02d8306ecd3ce9776' }, hAsync("div", { key: '4a782c31e4d97df0c7cc1d60a3c83125d01d31f6', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'c2de03821506646ffbe84cd7106ab91c1cdeba55', class: "info" }, hAsync("div", { key: '9a8985036acf8770541b69e35ff449572a6afb0e', class: "label-wrapper" }, hAsync("cura-label", { key: 'a128e382aa3f25c849fbe488f3820aa9b3cdb775', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '84e4817990f7499f047af339ce1ed9efc0ed060c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: '33527a9347eb8971d869b7e5ec492c3a7057b123', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'cda5d0d9eca328fd20663f941a41325eb1ad0e29' }))), hAsync("div", { key: '588b04e6c9c74daf8406d0cca1e50bd39d1703c9', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '209fee01eb3051602e5a9633de4fdea59d986a53', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (hAsync(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, hAsync("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, hAsync("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, hAsync("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), hAsync("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -7797,7 +7797,7 @@ class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (hAsync(Host, { key: 'd81f995e2da8e19498b2839319033cc5d93db1ea', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (hAsync(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -7822,7 +7822,7 @@ class CuraDisplay {
     }; }
 }
 
-const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:630px;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:absolute;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
+const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
 var CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 
 class CuraDropdownSearch {
@@ -7840,7 +7840,7 @@ class CuraDropdownSearch {
             const input = event.target;
             this.value = input.value;
             this.onValueChange(this.value);
-            this.valueChanged.emit(this.value);
+            // this.valueChanged.emit(this.value);
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'ArrowDown') {
@@ -7878,6 +7878,7 @@ class CuraDropdownSearch {
         this.placeholder = '';
         this.label = '';
         this.iconName = 'search';
+        this.dropdownMaxHeight = '630px';
         this.overlayVisible = false;
         this.isDropdownOpen = false;
         this.styles = {};
@@ -7904,12 +7905,12 @@ class CuraDropdownSearch {
     }
     onValueChange(newValue) {
         this.updateSelectedOption(newValue);
+        this.valueChanged.emit(this.value);
     }
     componentWillLoad() {
         this.updateSelectedOption(this.value);
     }
     componentDidRender() {
-        console.log(this.options);
         if (this.isDropdownOpen && this.isMobile) {
             this.showOverlay();
         }
@@ -7957,12 +7958,14 @@ class CuraDropdownSearch {
     }
     onSelectedOption(index) {
         const selectedOption = this.options[index];
-        const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
-        this.value = selectedValue || '';
-        this.updateSelectedOption(this.value);
-        this.isDropdownOpen = false;
-        this.isOnBlurInput = true;
-        this.removeOverlay();
+        if (selectedOption.selectable) {
+            const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
+            this.value = selectedValue || '';
+            this.updateSelectedOption(this.value);
+            this.isDropdownOpen = false;
+            this.isOnBlurInput = true;
+            this.removeOverlay();
+        }
     }
     moveHighlight(direction) {
         const visibleOptions = this.options;
@@ -8017,11 +8020,16 @@ class CuraDropdownSearch {
             'visible': this.options.length && this.isDropdownOpen ? true : false
         };
     }
+    hostCSSProperties() {
+        return {
+            '--dropdown-max-height': this.dropdownMaxHeight,
+        };
+    }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (hAsync(Host, { key: 'a1bac8740f5fb4b1504e3818f893ae9939366a2f', style: this.styles, class: "dropdown-overlay" }, hAsync("div", { key: '972cfac99c258a01a5ceacec4ca325e1445b4194', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '7433e2335ad6639d608ca23c3b25e2ecfaf4a7d2', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'f9ca9af935b0c752ce27f65bfe34b9679dbd079b', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'b75f08b2c5d6e1e68bea7e8c162bf0481eec4218', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (hAsync(Host, { key: '993da099b8256bfb9ee7b3ebabd4860e9019d097', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '883246cc7a1020ba83a4eda4fb1f6483519314cf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '5189508f35c5fc62883820a8c378bce8a3e67b7d', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'cbedd224556935a715380168c1be22d3127e920c', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'a8dd2fe42d5bc64683ba56e7bad6b6d08ce92fca', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: 'c46ff9544d7cacd7a28291b0dcee51d1e9c4f7c7', name: "helperText" }))), hAsync("div", { key: 'c6cbeffbcc00e83c4bbd51947640ae9602097563', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '735d3178c6bc3879ed96ee90e3147f083f8ac634', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '9991e5cfd78b73b9b2da92ae217fad3ae109a2c9', name: "helperText" }))), hAsync("div", { key: '664abccc90e95b83aa3192282453d199ae2a0c5f', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '2eca99c0ec684020000edc46ebbc5f8097e78200', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -8040,6 +8048,7 @@ class CuraDropdownSearch {
             "placeholder": [1537],
             "label": [1537],
             "iconName": [513, "icon-name"],
+            "dropdownMaxHeight": [513, "dropdown-max-height"],
             "overlayVisible": [32],
             "isDropdownOpen": [32],
             "styles": [32],
@@ -8052,24 +8061,31 @@ class CuraDropdownSearch {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"]]
+        "$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
     }; }
 }
 
-const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover{background-color:var(--neutral-white)}";
+const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.disabled{cursor:default}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover:not(.disabled){background-color:var(--neutral-white)}";
 var CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
 
 class CuraDropdownSearchOption {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.optionSelected = createEvent(this, "optionSelected", 7);
-        this.handleOptionClick = () => {
-            this.selected = !this.selected;
-            this.optionSelected.emit(this.value);
-            this.updateIconColor();
+        this.handleOptionClick = (e) => {
+            if (this.selectable) {
+                this.selected = !this.selected;
+                this.optionSelected.emit(this.value);
+                this.updateIconColor();
+            }
+            else {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
         };
         this.value = undefined;
         this.selected = false;
+        this.selectable = true;
         this.hovered = false;
         this.styles = {};
     }
@@ -8090,10 +8106,11 @@ class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'd045683759a6be8de6ba6e1e7c3ffb3c7e64c928', style: this.styles, slot: "dropdown-search-option" }, hAsync("ul", { key: '6fe79f291239629e214bcda850891413c307e120' }, hAsync("li", { key: 'b62dcc68f2c14da18894fbcdd5e68d5a417ce053', onClick: this.handleOptionClick, value: this.value, class: {
-                hovered: this.hovered,
+        return (hAsync(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, hAsync("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, hAsync("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
+                hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
-            } }, hAsync("slot", { key: '8883c51c5789d57b8a6b4567f5faeaacd5d52bff', name: "image" }), hAsync("cura-heading", { key: 'f701d19b2e707a78be62d3df5a768bf83959ecaa', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: 'ffe7d83f45a1757df017061a71b950cc50ce52d5' })), hAsync("slot", { key: '4d0f901f5b5e1b7c8ebe5e1148118a2645c6eddd', name: "action" })))));
+                disabled: !this.selectable
+            } }, hAsync("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), hAsync("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), hAsync("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -8106,12 +8123,13 @@ class CuraDropdownSearchOption {
         "$members$": {
             "value": [513],
             "selected": [1540],
+            "selectable": [516],
             "hovered": [1540],
             "styles": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["hovered", "hovered"]]
+        "$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["selectable", "selectable"], ["hovered", "hovered"]]
     }; }
 }
 
@@ -8123,7 +8141,7 @@ class CuraDropdownSearchOptionTitle {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '6e2312e0bf01db89fe6c85fbe525c02ed2dff7ec', slot: "dropdown-search-option" }, hAsync("cura-label", { key: '551017409617799c76a6119b4e61596a4188f5ad', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: '4e0b3b588dec8603df342358840bc0a2d8ab3c4c' }))));
+        return (hAsync(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, hAsync("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
     }
     static get style() { return CuraDropdownSearchOptionTitleStyle0; }
     static get cmpMeta() { return {
@@ -8202,7 +8220,7 @@ class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (hAsync(Host, { key: '456cd35fd9ad4389ceb13d3b89d05f70e2423068', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (hAsync(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12377,7 +12395,7 @@ class CuraLabel {
         };
     }
     render() {
-        return (hAsync(Host, { key: '42662869e7cc4cd7cc8ff29ef37209514eaea0ac', style: this.hostCSSProperties() }, hAsync("p", { key: 'cf6be4faf13ab24e0ae65edea48b528763072a7b', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '45ee41cdc15f0c73672e4b3047df4508dbb870e3' }))));
+        return (hAsync(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, hAsync("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12403,6 +12421,55 @@ class CuraLabel {
     }; }
 }
 
+const curaLoaderBarCss = ":host{display:block}:host .progress-bar{position:absolute;left:0;bottom:0;width:100%;height:4px;background-color:var(--neutral-base)}:host .progress-bar span{position:absolute;left:0;bottom:0;width:var(--bar-width);height:100%;border-radius:0 2px 2px 0;background-color:var(--color-base);transition:width 0.2s linear}";
+var CuraLoaderBarStyle0 = curaLoaderBarCss;
+
+class CuraLoaderBar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.color = 'primary-base';
+        this.progress = 0;
+        this.styles = {};
+    }
+    handleChangeColor() {
+        this.setColor();
+    }
+    handleProgress() {
+        this.setProgress();
+    }
+    connectedCallback() {
+        this.setColor();
+        this.setProgress();
+    }
+    render() {
+        return (hAsync(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, hAsync("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, hAsync("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
+    }
+    setColor() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
+    }
+    setProgress() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--bar-width': `${this.progress}%` });
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "color": ["handleChangeColor"],
+        "progress": ["handleProgress"]
+    }; }
+    static get style() { return CuraLoaderBarStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "cura-loader-bar",
+        "$members$": {
+            "color": [1],
+            "progress": [2],
+            "styles": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const curaLoaderCircleCss = ":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);animation:rotate 0.7s linear infinite}:host circle,:host path{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}:host path{stroke:var(--color)}:host stop{stop-color:var(--color)}:host linearGradient stop:first-child{stop-opacity:0.14}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}";
 var CuraLoaderCircleStyle0 = curaLoaderCircleCss;
 
@@ -12427,7 +12494,7 @@ class CuraLoaderCircle {
         };
     }
     render() {
-        return (hAsync(Host, { key: '8b2b73c6aefffd1a4350618ed52038a414cebb48', style: this.getStyles() }, hAsync("svg", { key: '4478c39440bc66adcb3bcf1d947ae12cd5c3c721', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '3c01be9c541a634c504a2b8f72296426b8cebe28' }, hAsync("circle", { key: '153102890325235a989b91badcadd00f852ccc3e', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("path", { key: '5fd7be471c351a46154fa96b459a99be297dfb5e', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), hAsync("defs", { key: '89ce06231240879c222d93fc4efc44d963bbd167' }, hAsync("linearGradient", { key: '0999b93ff91ef7d31b9bfc70cfb08190838197e9', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: 'd7adf5104e03f40f4c757d218c0fc786e9f8ef2c' }), hAsync("stop", { key: '8aaddbffb82d660aa8d62b2147efb74409218f41', offset: "1" }))))));
+        return (hAsync(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, hAsync("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, hAsync("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), hAsync("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, hAsync("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), hAsync("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
     }
     static get style() { return CuraLoaderCircleStyle0; }
     static get cmpMeta() { return {
@@ -12528,7 +12595,7 @@ class CuraParagraph {
         };
     }
     render() {
-        return (hAsync(Host, { key: '5b219ac846a02c36df1db1ff5be6f0c5c833c2c1', style: this.hostCSSProperties() }, hAsync("p", { key: 'e53f25d18b0b5d54548879872c0f234d3782b4f0', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: 'be875e98ec8c19682f972d0e4bb0bb07e9ee4224' }))));
+        return (hAsync(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, hAsync("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12685,7 +12752,7 @@ class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (hAsync(Host, { key: '8f28f0ad3ec32f97cd39f5c574f7c779b326c3c0' }, hAsync("div", { key: 'd94d37293c9165c13e082bbc7f78e7b35606147d', class: this.getClasses(), style: this.styles }, hAsync("div", { key: 'fd743a9a24a22e59d0f9066d65dbe3c5b21c57b7', class: "info" }, hAsync("div", { key: '080b345ff308b6cb0fbf1913aa6a1c872e3c325c', class: "label-wrapper" }, hAsync("cura-label", { key: '9c0f0d376470b12273a359c65a91954cfa96b1a9', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '117eaafe86a8c2f6b190a7cefaaf2d882d658940', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: '162ba073fc2722b4f1c2a3e8cfa42ae1940b4c99', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '453713a040379257a9be7c9cd327ffbd8ad3affb' }))), hAsync("input", { key: '19ad607763975886902d6e88fd44bf3e1da75c8a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (hAsync(Host, { key: 'cd50b6a8c2b43e7ddfc44c2a2d634118e8c8180c' }, hAsync("div", { key: '0ab58b0b1e0561cfbe5801167873d3f1f6b8b48d', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '24399f088f99dd08696b8421140c64765b7ae82f', class: "info" }, hAsync("div", { key: '5fa201595808fd9aede224943fd37cfe8972b51e', class: "label-wrapper" }, hAsync("cura-label", { key: '58f5d8d6f176a1519458c30fbbf0f11bc11b72c1', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: 'ce96f49de0925ca3739640acadd25bb8d9fbbd26', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'b2188df747035a27bae0ad5206ac48ef31320268', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '215226214804fe80e0b049224a590411ddd1f01e' }))), hAsync("input", { key: 'd3fc5b35a27e44f9d8e5f5ab9f9c348ef7bc8bb9', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -12974,13 +13041,13 @@ class CuraSelect {
         return (hAsync("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (hAsync(Host, { key: '25024f752db0a0189ece93612e54a43b47668efd', style: this.styles }, hAsync("div", { key: 'eae2f00129bb2d82fa1586ce7f6e2e4bb71b20de', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '0ac1eb8e18c97432a2c46e35dc04fce4d2dc640a', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: '09e8e758d595c641afbb7729847bc6e123ecd869', class: 'required' }, "* "))), hAsync("div", { key: '2248ebad1ab820689635db06db8725d39118b04b', class: {
+        return (hAsync(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, hAsync("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), hAsync("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), hAsync("input", { key: 'ea3909b76182006256055be075a446a8cb2813af', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), hAsync("cura-icon", { key: '13a28271273b9a96e39cb62ca91e6769ea33ee43', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'fb1802d14cf6099e0ddf71f0623c1f0ffba6747c', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: '2c257fd28f5c560dd66fe9f73c2fb3c165174efa' })), this.isOpen && (hAsync("div", { key: '36dbd0fa457f7d1ec9c771dafc7491a821267812', class: {
+            } }, this.renderIcon(), hAsync("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), hAsync("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (hAsync("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, hAsync("slot", { key: 'f8d751989092e50820cb7b71903eef743f672a6b', name: 'option' }))))));
+            } }, hAsync("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -13047,7 +13114,7 @@ class CuraSelectOption {
         };
     }
     render() {
-        return (hAsync(Host, { key: '9eb6b609efeb50130efd27c20bc7a42441687ce7', slot: "option" }, hAsync("div", { key: 'f72ff1ec9f5b5a579152b09e7a02496be5ab944b', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: '0b45ade14ca8ad351a696ec6bad4349eadec38f1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: '2015c43b9b1686fdef5f0369a91ce376327e5d7f' })), this.selected && hAsync("cura-icon", { key: '9ee481f8ee3e586bd629559e90acf30976711059', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (hAsync(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, hAsync("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && hAsync("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -13174,7 +13241,7 @@ class CuraSwitch {
         return classes;
     }
     render() {
-        return (hAsync(Host, { key: 'e0040434db080b1ccdb12a1389ca028f5c02f66a' }, hAsync("div", { key: '6008f7aef47e0519e965c2be573dc1eacc001b6c', class: this.getClasses(), style: this.styles }, hAsync("div", { key: 'a954404dce1c7eafd79cb3236e8761a3dc29f86e', class: "info" }, hAsync("cura-label", { key: '6ff5cc1f26abad0f173c4e1330aaae43357b7737', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: 'b82e4cb25ef94481642e1d5a2180eb4e12b8eff8', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '243e906253614d9ce837e0c598b259ad7c87afb4' }))), hAsync("div", { key: '36d0165722a6fae98ca829a5a2e89edef3694ff2', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: 'f9c0c7cbc84b655e37e7e8df1c2293c1260445ca', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: 'e5ca4006ad41a6cbf8d62ca612b52ef26fb7255f', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (hAsync(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, hAsync("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, hAsync("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), hAsync("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -13203,6 +13270,121 @@ class CuraSwitch {
     }; }
 }
 
+const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";
+var CuraToastStyle0 = curaToastCss;
+
+class CuraToast {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.handleClose = () => {
+            this.close.emit();
+            this.closeContainer();
+        };
+        this.type = 'info';
+        this.position = 'top-right';
+        this.icon = undefined;
+        this.label = undefined;
+        this.closeButton = true;
+        this.loader = true;
+        this.autoCloseDelay = 10000;
+        this.styles = {};
+        this.progress = 0;
+    }
+    handleChangeType() {
+        this.setStyle();
+    }
+    connectedCallback() {
+        this.setStyle();
+    }
+    render() {
+        return (hAsync(Host, { key: '8a49bdd99528c7b50b1b8a0de6ee0d985ffd5a11' }, hAsync("div", { key: '6e560327e729ecb9fc9e6c081cc4d3b1131f892c', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '25efc30bc808e9f04be780ddf5bdc7edc3e56725', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'b1cbab08ae6845f8f544d4497b786fdfae645b72', class: "content" }, hAsync("cura-heading", { key: '6d64c4fc8c43862f8fc5dba886b34a904a81208d', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'fa990a332ca8caf8b110b643b39c44a17bb8de67', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'ec9ab2abe06b0d67ea71725abe3a02aca1a736c6' })), hAsync("slot", { key: 'dc08874d1145bb7e62cac9081014d17ad0095f53', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3f22011909ed7074962a2ccec8ffe05bb9b01feb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '2e4168859d19170702a690bed3a20d28029cf7dc', color: `${this.type}-base`, progress: this.progress }))));
+    }
+    componentDidLoad() {
+        this.openContainer();
+        this.startAnimation();
+    }
+    setStyle() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`) });
+    }
+    getClasses() {
+        const [firstPosition, secondPosition] = this.position.split('-');
+        const classes = {};
+        classes['container'] = true;
+        classes[firstPosition] = true;
+        classes[secondPosition] = true;
+        if (this.loader) {
+            classes['loader'] = true;
+        }
+        return classes;
+    }
+    getNameIcon() {
+        const iconMapping = {
+            info: 'infoCircle',
+            success: 'checkCircle',
+            warning: 'alertCircle',
+            error: 'alertTriangle',
+        };
+        return this.icon ? this.icon : iconMapping[this.type];
+    }
+    openContainer() {
+        this.container = this.host.shadowRoot.querySelector('.container');
+        this.container.classList.add('active');
+    }
+    closeContainer() {
+        this.container.classList.remove('active');
+        setTimeout(() => {
+            this.host.remove();
+        }, 500);
+    }
+    startAnimation() {
+        if (!!this.autoCloseDelay) {
+            if (this.loader) {
+                this.progress = 0;
+                let intervalId = setInterval(() => {
+                    if (this.progress >= 100) {
+                        clearInterval(intervalId);
+                        this.closeContainer();
+                    }
+                    else {
+                        this.progress++;
+                    }
+                }, this.autoCloseDelay / 100);
+            }
+            else {
+                let intervalId = setInterval(() => {
+                    clearInterval(intervalId);
+                    this.closeContainer();
+                }, this.autoCloseDelay);
+            }
+        }
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "type": ["handleChangeType"],
+        "position": ["handleChangeType"]
+    }; }
+    static get style() { return CuraToastStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "cura-toast",
+        "$members$": {
+            "type": [1],
+            "position": [1],
+            "icon": [513],
+            "label": [513],
+            "closeButton": [516, "close-button"],
+            "loader": [516],
+            "autoCloseDelay": [514, "auto-close-delay"],
+            "styles": [32],
+            "progress": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["icon", "icon"], ["label", "label"], ["closeButton", "close-button"], ["loader", "loader"], ["autoCloseDelay", "auto-close-delay"]]
+    }; }
+}
+
 registerComponents([
   CuraAccordion,
   CuraAccordionItem,
@@ -13224,6 +13406,7 @@ registerComponents([
   CuraIconsView,
   CuraInputText,
   CuraLabel,
+  CuraLoaderBar,
   CuraLoaderCircle,
   CuraPageTemplate,
   CuraParagraph,
@@ -13231,6 +13414,7 @@ registerComponents([
   CuraSelect,
   CuraSelectOption,
   CuraSwitch,
+  CuraToast,
 ]);
 
 exports.hydrateApp = hydrateApp;

package/index.mjs

@@ -3063,7 +3063,7 @@ class CuraButton {
         }
         this.type = 'button';
         this.size = 'large';
-        this.disabled = false;
+        this.disabled = 'false';
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -3142,7 +3142,7 @@ class CuraButton {
         }
     }
     render() {
-        return (hAsync(Host, { key: '7491e8209b9193f5e7f51ead1b08afe88b160ec1' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
+        return (hAsync(Host, { key: 'b218c0fb128f2057632a4c8d220c379091cdca15' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -3156,7 +3156,7 @@ class CuraButton {
         "$members$": {
             "type": [513],
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "isLoading": [516, "is-loading"],
             "iconName": [513, "icon-name"],
             "iconset": [513],
@@ -3192,7 +3192,7 @@ class CuraButtonOutline$1 {
         }
         this.type = 'button';
         this.size = 'large';
-        this.disabled = false;
+        this.disabled = 'false';
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -3271,7 +3271,7 @@ class CuraButtonOutline$1 {
         }
     }
     render() {
-        return (hAsync(Host, { key: '44556818a51f64ae694995a50b582e41f4386467' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
+        return (hAsync(Host, { key: '04c310620c46c1da780fe03a98699f8238b0c77b' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -3286,7 +3286,7 @@ class CuraButtonOutline$1 {
         "$members$": {
             "type": [513],
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "isLoading": [516, "is-loading"],
             "iconName": [513, "icon-name"],
             "iconset": [513],
@@ -3316,7 +3316,7 @@ class CuraButtonOutline {
         this.onclick = createEvent(this, "onclick", 7);
         this.theme = window.CuraAPI.theme;
         this.size = 'medium';
-        this.disabled = false;
+        this.disabled = 'false';
         this.selected = false;
         this.iconPosition = 'right';
         this.color = 'accent';
@@ -3391,7 +3391,7 @@ class CuraButtonOutline {
         return classes;
     }
     render() {
-        return (hAsync(Host, { key: '11c526fa5a82a986513a2d2cf94e85fbdc0a83c5' }, hAsync("button", { key: '539cb4766e18cf195541731bf95809784021fc21', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'f57e41656abb33d450e9876517e575c628c633c6', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: '84ee6289e8c5e242cbdc2cdd8110be7102244176', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '2f292f5308c69fc9efa66a43bac5941ab2adeaf9' }))))));
+        return (hAsync(Host, { key: '46ec847aae53f96f9c9cb9cba1472bb33df8fcdb' }, hAsync("button", { key: '508303050695d9a1ff7d27174e511bcac814c153', class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'bd06094e5004bd11e8ba9d05387300c8d57d34e2', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: 'b688ba052bdf3bcd39a61d553f49a0e47ac5ca54', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '29f645c3866a9f24cbae12f5167a2645c0452153' }))))));
     }
     static get watchers() { return {
         "background": ["setColors", "assignColor"],
@@ -3404,7 +3404,7 @@ class CuraButtonOutline {
         "$tagName$": "cura-button-select",
         "$members$": {
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "selected": [516],
             "iconPosition": [513, "icon-position"],
             "color": [1],
@@ -3434,7 +3434,7 @@ class CuraButtonTransparent {
         }
         this.type = 'button';
         this.size = 'large';
-        this.disabled = false;
+        this.disabled = 'false';
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -3502,7 +3502,7 @@ class CuraButtonTransparent {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'eb208813f7743d71c826ea4e05c19933fdec34de' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
+        return (hAsync(Host, { key: 'aa51dc3bd4dcf3487b253048e7580e89aef6ed81' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -3516,7 +3516,7 @@ class CuraButtonTransparent {
         "$members$": {
             "type": [513],
             "size": [513],
-            "disabled": [516],
+            "disabled": [513],
             "isLoading": [516, "is-loading"],
             "iconName": [513, "icon-name"],
             "iconset": [513],
@@ -7700,7 +7700,7 @@ class CuraCheckbox {
         return hAsync("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (hAsync(Host, { key: '9f96ab8f12502dc777ee00d02d8306ecd3ce9776' }, hAsync("div", { key: '4a782c31e4d97df0c7cc1d60a3c83125d01d31f6', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'c2de03821506646ffbe84cd7106ab91c1cdeba55', class: "info" }, hAsync("div", { key: '9a8985036acf8770541b69e35ff449572a6afb0e', class: "label-wrapper" }, hAsync("cura-label", { key: 'a128e382aa3f25c849fbe488f3820aa9b3cdb775', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '84e4817990f7499f047af339ce1ed9efc0ed060c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: '33527a9347eb8971d869b7e5ec492c3a7057b123', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'cda5d0d9eca328fd20663f941a41325eb1ad0e29' }))), hAsync("div", { key: '588b04e6c9c74daf8406d0cca1e50bd39d1703c9', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '209fee01eb3051602e5a9633de4fdea59d986a53', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (hAsync(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, hAsync("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, hAsync("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, hAsync("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), hAsync("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -7793,7 +7793,7 @@ class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (hAsync(Host, { key: 'd81f995e2da8e19498b2839319033cc5d93db1ea', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (hAsync(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -7818,7 +7818,7 @@ class CuraDisplay {
     }; }
 }
 
-const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:630px;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:absolute;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
+const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
 var CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 
 class CuraDropdownSearch {
@@ -7836,7 +7836,7 @@ class CuraDropdownSearch {
             const input = event.target;
             this.value = input.value;
             this.onValueChange(this.value);
-            this.valueChanged.emit(this.value);
+            // this.valueChanged.emit(this.value);
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'ArrowDown') {
@@ -7874,6 +7874,7 @@ class CuraDropdownSearch {
         this.placeholder = '';
         this.label = '';
         this.iconName = 'search';
+        this.dropdownMaxHeight = '630px';
         this.overlayVisible = false;
         this.isDropdownOpen = false;
         this.styles = {};
@@ -7900,12 +7901,12 @@ class CuraDropdownSearch {
     }
     onValueChange(newValue) {
         this.updateSelectedOption(newValue);
+        this.valueChanged.emit(this.value);
     }
     componentWillLoad() {
         this.updateSelectedOption(this.value);
     }
     componentDidRender() {
-        console.log(this.options);
         if (this.isDropdownOpen && this.isMobile) {
             this.showOverlay();
         }
@@ -7953,12 +7954,14 @@ class CuraDropdownSearch {
     }
     onSelectedOption(index) {
         const selectedOption = this.options[index];
-        const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
-        this.value = selectedValue || '';
-        this.updateSelectedOption(this.value);
-        this.isDropdownOpen = false;
-        this.isOnBlurInput = true;
-        this.removeOverlay();
+        if (selectedOption.selectable) {
+            const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
+            this.value = selectedValue || '';
+            this.updateSelectedOption(this.value);
+            this.isDropdownOpen = false;
+            this.isOnBlurInput = true;
+            this.removeOverlay();
+        }
     }
     moveHighlight(direction) {
         const visibleOptions = this.options;
@@ -8013,11 +8016,16 @@ class CuraDropdownSearch {
             'visible': this.options.length && this.isDropdownOpen ? true : false
         };
     }
+    hostCSSProperties() {
+        return {
+            '--dropdown-max-height': this.dropdownMaxHeight,
+        };
+    }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (hAsync(Host, { key: 'a1bac8740f5fb4b1504e3818f893ae9939366a2f', style: this.styles, class: "dropdown-overlay" }, hAsync("div", { key: '972cfac99c258a01a5ceacec4ca325e1445b4194', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '7433e2335ad6639d608ca23c3b25e2ecfaf4a7d2', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'f9ca9af935b0c752ce27f65bfe34b9679dbd079b', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'b75f08b2c5d6e1e68bea7e8c162bf0481eec4218', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (hAsync(Host, { key: '993da099b8256bfb9ee7b3ebabd4860e9019d097', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '883246cc7a1020ba83a4eda4fb1f6483519314cf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '5189508f35c5fc62883820a8c378bce8a3e67b7d', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'cbedd224556935a715380168c1be22d3127e920c', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'a8dd2fe42d5bc64683ba56e7bad6b6d08ce92fca', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: 'c46ff9544d7cacd7a28291b0dcee51d1e9c4f7c7', name: "helperText" }))), hAsync("div", { key: 'c6cbeffbcc00e83c4bbd51947640ae9602097563', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '735d3178c6bc3879ed96ee90e3147f083f8ac634', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '9991e5cfd78b73b9b2da92ae217fad3ae109a2c9', name: "helperText" }))), hAsync("div", { key: '664abccc90e95b83aa3192282453d199ae2a0c5f', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '2eca99c0ec684020000edc46ebbc5f8097e78200', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -8036,6 +8044,7 @@ class CuraDropdownSearch {
             "placeholder": [1537],
             "label": [1537],
             "iconName": [513, "icon-name"],
+            "dropdownMaxHeight": [513, "dropdown-max-height"],
             "overlayVisible": [32],
             "isDropdownOpen": [32],
             "styles": [32],
@@ -8048,24 +8057,31 @@ class CuraDropdownSearch {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"]]
+        "$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
     }; }
 }
 
-const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover{background-color:var(--neutral-white)}";
+const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.disabled{cursor:default}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover:not(.disabled){background-color:var(--neutral-white)}";
 var CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
 
 class CuraDropdownSearchOption {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.optionSelected = createEvent(this, "optionSelected", 7);
-        this.handleOptionClick = () => {
-            this.selected = !this.selected;
-            this.optionSelected.emit(this.value);
-            this.updateIconColor();
+        this.handleOptionClick = (e) => {
+            if (this.selectable) {
+                this.selected = !this.selected;
+                this.optionSelected.emit(this.value);
+                this.updateIconColor();
+            }
+            else {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
         };
         this.value = undefined;
         this.selected = false;
+        this.selectable = true;
         this.hovered = false;
         this.styles = {};
     }
@@ -8086,10 +8102,11 @@ class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'd045683759a6be8de6ba6e1e7c3ffb3c7e64c928', style: this.styles, slot: "dropdown-search-option" }, hAsync("ul", { key: '6fe79f291239629e214bcda850891413c307e120' }, hAsync("li", { key: 'b62dcc68f2c14da18894fbcdd5e68d5a417ce053', onClick: this.handleOptionClick, value: this.value, class: {
-                hovered: this.hovered,
+        return (hAsync(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, hAsync("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, hAsync("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
+                hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
-            } }, hAsync("slot", { key: '8883c51c5789d57b8a6b4567f5faeaacd5d52bff', name: "image" }), hAsync("cura-heading", { key: 'f701d19b2e707a78be62d3df5a768bf83959ecaa', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: 'ffe7d83f45a1757df017061a71b950cc50ce52d5' })), hAsync("slot", { key: '4d0f901f5b5e1b7c8ebe5e1148118a2645c6eddd', name: "action" })))));
+                disabled: !this.selectable
+            } }, hAsync("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), hAsync("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), hAsync("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -8102,12 +8119,13 @@ class CuraDropdownSearchOption {
         "$members$": {
             "value": [513],
             "selected": [1540],
+            "selectable": [516],
             "hovered": [1540],
             "styles": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["hovered", "hovered"]]
+        "$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["selectable", "selectable"], ["hovered", "hovered"]]
     }; }
 }
 
@@ -8119,7 +8137,7 @@ class CuraDropdownSearchOptionTitle {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '6e2312e0bf01db89fe6c85fbe525c02ed2dff7ec', slot: "dropdown-search-option" }, hAsync("cura-label", { key: '551017409617799c76a6119b4e61596a4188f5ad', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: '4e0b3b588dec8603df342358840bc0a2d8ab3c4c' }))));
+        return (hAsync(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, hAsync("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
     }
     static get style() { return CuraDropdownSearchOptionTitleStyle0; }
     static get cmpMeta() { return {
@@ -8198,7 +8216,7 @@ class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (hAsync(Host, { key: '456cd35fd9ad4389ceb13d3b89d05f70e2423068', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (hAsync(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12373,7 +12391,7 @@ class CuraLabel {
         };
     }
     render() {
-        return (hAsync(Host, { key: '42662869e7cc4cd7cc8ff29ef37209514eaea0ac', style: this.hostCSSProperties() }, hAsync("p", { key: 'cf6be4faf13ab24e0ae65edea48b528763072a7b', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '45ee41cdc15f0c73672e4b3047df4508dbb870e3' }))));
+        return (hAsync(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, hAsync("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12399,6 +12417,55 @@ class CuraLabel {
     }; }
 }
 
+const curaLoaderBarCss = ":host{display:block}:host .progress-bar{position:absolute;left:0;bottom:0;width:100%;height:4px;background-color:var(--neutral-base)}:host .progress-bar span{position:absolute;left:0;bottom:0;width:var(--bar-width);height:100%;border-radius:0 2px 2px 0;background-color:var(--color-base);transition:width 0.2s linear}";
+var CuraLoaderBarStyle0 = curaLoaderBarCss;
+
+class CuraLoaderBar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.color = 'primary-base';
+        this.progress = 0;
+        this.styles = {};
+    }
+    handleChangeColor() {
+        this.setColor();
+    }
+    handleProgress() {
+        this.setProgress();
+    }
+    connectedCallback() {
+        this.setColor();
+        this.setProgress();
+    }
+    render() {
+        return (hAsync(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, hAsync("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, hAsync("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
+    }
+    setColor() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
+    }
+    setProgress() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--bar-width': `${this.progress}%` });
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "color": ["handleChangeColor"],
+        "progress": ["handleProgress"]
+    }; }
+    static get style() { return CuraLoaderBarStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "cura-loader-bar",
+        "$members$": {
+            "color": [1],
+            "progress": [2],
+            "styles": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const curaLoaderCircleCss = ":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);animation:rotate 0.7s linear infinite}:host circle,:host path{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}:host path{stroke:var(--color)}:host stop{stop-color:var(--color)}:host linearGradient stop:first-child{stop-opacity:0.14}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}";
 var CuraLoaderCircleStyle0 = curaLoaderCircleCss;
 
@@ -12423,7 +12490,7 @@ class CuraLoaderCircle {
         };
     }
     render() {
-        return (hAsync(Host, { key: '8b2b73c6aefffd1a4350618ed52038a414cebb48', style: this.getStyles() }, hAsync("svg", { key: '4478c39440bc66adcb3bcf1d947ae12cd5c3c721', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '3c01be9c541a634c504a2b8f72296426b8cebe28' }, hAsync("circle", { key: '153102890325235a989b91badcadd00f852ccc3e', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("path", { key: '5fd7be471c351a46154fa96b459a99be297dfb5e', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), hAsync("defs", { key: '89ce06231240879c222d93fc4efc44d963bbd167' }, hAsync("linearGradient", { key: '0999b93ff91ef7d31b9bfc70cfb08190838197e9', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: 'd7adf5104e03f40f4c757d218c0fc786e9f8ef2c' }), hAsync("stop", { key: '8aaddbffb82d660aa8d62b2147efb74409218f41', offset: "1" }))))));
+        return (hAsync(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, hAsync("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, hAsync("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), hAsync("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, hAsync("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), hAsync("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
     }
     static get style() { return CuraLoaderCircleStyle0; }
     static get cmpMeta() { return {
@@ -12524,7 +12591,7 @@ class CuraParagraph {
         };
     }
     render() {
-        return (hAsync(Host, { key: '5b219ac846a02c36df1db1ff5be6f0c5c833c2c1', style: this.hostCSSProperties() }, hAsync("p", { key: 'e53f25d18b0b5d54548879872c0f234d3782b4f0', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: 'be875e98ec8c19682f972d0e4bb0bb07e9ee4224' }))));
+        return (hAsync(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, hAsync("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12681,7 +12748,7 @@ class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (hAsync(Host, { key: '8f28f0ad3ec32f97cd39f5c574f7c779b326c3c0' }, hAsync("div", { key: 'd94d37293c9165c13e082bbc7f78e7b35606147d', class: this.getClasses(), style: this.styles }, hAsync("div", { key: 'fd743a9a24a22e59d0f9066d65dbe3c5b21c57b7', class: "info" }, hAsync("div", { key: '080b345ff308b6cb0fbf1913aa6a1c872e3c325c', class: "label-wrapper" }, hAsync("cura-label", { key: '9c0f0d376470b12273a359c65a91954cfa96b1a9', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '117eaafe86a8c2f6b190a7cefaaf2d882d658940', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: '162ba073fc2722b4f1c2a3e8cfa42ae1940b4c99', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '453713a040379257a9be7c9cd327ffbd8ad3affb' }))), hAsync("input", { key: '19ad607763975886902d6e88fd44bf3e1da75c8a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (hAsync(Host, { key: 'cd50b6a8c2b43e7ddfc44c2a2d634118e8c8180c' }, hAsync("div", { key: '0ab58b0b1e0561cfbe5801167873d3f1f6b8b48d', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '24399f088f99dd08696b8421140c64765b7ae82f', class: "info" }, hAsync("div", { key: '5fa201595808fd9aede224943fd37cfe8972b51e', class: "label-wrapper" }, hAsync("cura-label", { key: '58f5d8d6f176a1519458c30fbbf0f11bc11b72c1', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: 'ce96f49de0925ca3739640acadd25bb8d9fbbd26', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'b2188df747035a27bae0ad5206ac48ef31320268', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '215226214804fe80e0b049224a590411ddd1f01e' }))), hAsync("input", { key: 'd3fc5b35a27e44f9d8e5f5ab9f9c348ef7bc8bb9', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -12970,13 +13037,13 @@ class CuraSelect {
         return (hAsync("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (hAsync(Host, { key: '25024f752db0a0189ece93612e54a43b47668efd', style: this.styles }, hAsync("div", { key: 'eae2f00129bb2d82fa1586ce7f6e2e4bb71b20de', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '0ac1eb8e18c97432a2c46e35dc04fce4d2dc640a', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: '09e8e758d595c641afbb7729847bc6e123ecd869', class: 'required' }, "* "))), hAsync("div", { key: '2248ebad1ab820689635db06db8725d39118b04b', class: {
+        return (hAsync(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, hAsync("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), hAsync("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), hAsync("input", { key: 'ea3909b76182006256055be075a446a8cb2813af', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), hAsync("cura-icon", { key: '13a28271273b9a96e39cb62ca91e6769ea33ee43', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'fb1802d14cf6099e0ddf71f0623c1f0ffba6747c', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: '2c257fd28f5c560dd66fe9f73c2fb3c165174efa' })), this.isOpen && (hAsync("div", { key: '36dbd0fa457f7d1ec9c771dafc7491a821267812', class: {
+            } }, this.renderIcon(), hAsync("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), hAsync("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (hAsync("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, hAsync("slot", { key: 'f8d751989092e50820cb7b71903eef743f672a6b', name: 'option' }))))));
+            } }, hAsync("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -13043,7 +13110,7 @@ class CuraSelectOption {
         };
     }
     render() {
-        return (hAsync(Host, { key: '9eb6b609efeb50130efd27c20bc7a42441687ce7', slot: "option" }, hAsync("div", { key: 'f72ff1ec9f5b5a579152b09e7a02496be5ab944b', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: '0b45ade14ca8ad351a696ec6bad4349eadec38f1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: '2015c43b9b1686fdef5f0369a91ce376327e5d7f' })), this.selected && hAsync("cura-icon", { key: '9ee481f8ee3e586bd629559e90acf30976711059', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (hAsync(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, hAsync("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && hAsync("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -13170,7 +13237,7 @@ class CuraSwitch {
         return classes;
     }
     render() {
-        return (hAsync(Host, { key: 'e0040434db080b1ccdb12a1389ca028f5c02f66a' }, hAsync("div", { key: '6008f7aef47e0519e965c2be573dc1eacc001b6c', class: this.getClasses(), style: this.styles }, hAsync("div", { key: 'a954404dce1c7eafd79cb3236e8761a3dc29f86e', class: "info" }, hAsync("cura-label", { key: '6ff5cc1f26abad0f173c4e1330aaae43357b7737', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: 'b82e4cb25ef94481642e1d5a2180eb4e12b8eff8', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '243e906253614d9ce837e0c598b259ad7c87afb4' }))), hAsync("div", { key: '36d0165722a6fae98ca829a5a2e89edef3694ff2', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: 'f9c0c7cbc84b655e37e7e8df1c2293c1260445ca', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: 'e5ca4006ad41a6cbf8d62ca612b52ef26fb7255f', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (hAsync(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, hAsync("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, hAsync("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), hAsync("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -13199,6 +13266,121 @@ class CuraSwitch {
     }; }
 }
 
+const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";
+var CuraToastStyle0 = curaToastCss;
+
+class CuraToast {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.handleClose = () => {
+            this.close.emit();
+            this.closeContainer();
+        };
+        this.type = 'info';
+        this.position = 'top-right';
+        this.icon = undefined;
+        this.label = undefined;
+        this.closeButton = true;
+        this.loader = true;
+        this.autoCloseDelay = 10000;
+        this.styles = {};
+        this.progress = 0;
+    }
+    handleChangeType() {
+        this.setStyle();
+    }
+    connectedCallback() {
+        this.setStyle();
+    }
+    render() {
+        return (hAsync(Host, { key: '8a49bdd99528c7b50b1b8a0de6ee0d985ffd5a11' }, hAsync("div", { key: '6e560327e729ecb9fc9e6c081cc4d3b1131f892c', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '25efc30bc808e9f04be780ddf5bdc7edc3e56725', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'b1cbab08ae6845f8f544d4497b786fdfae645b72', class: "content" }, hAsync("cura-heading", { key: '6d64c4fc8c43862f8fc5dba886b34a904a81208d', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'fa990a332ca8caf8b110b643b39c44a17bb8de67', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'ec9ab2abe06b0d67ea71725abe3a02aca1a736c6' })), hAsync("slot", { key: 'dc08874d1145bb7e62cac9081014d17ad0095f53', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3f22011909ed7074962a2ccec8ffe05bb9b01feb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '2e4168859d19170702a690bed3a20d28029cf7dc', color: `${this.type}-base`, progress: this.progress }))));
+    }
+    componentDidLoad() {
+        this.openContainer();
+        this.startAnimation();
+    }
+    setStyle() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`) });
+    }
+    getClasses() {
+        const [firstPosition, secondPosition] = this.position.split('-');
+        const classes = {};
+        classes['container'] = true;
+        classes[firstPosition] = true;
+        classes[secondPosition] = true;
+        if (this.loader) {
+            classes['loader'] = true;
+        }
+        return classes;
+    }
+    getNameIcon() {
+        const iconMapping = {
+            info: 'infoCircle',
+            success: 'checkCircle',
+            warning: 'alertCircle',
+            error: 'alertTriangle',
+        };
+        return this.icon ? this.icon : iconMapping[this.type];
+    }
+    openContainer() {
+        this.container = this.host.shadowRoot.querySelector('.container');
+        this.container.classList.add('active');
+    }
+    closeContainer() {
+        this.container.classList.remove('active');
+        setTimeout(() => {
+            this.host.remove();
+        }, 500);
+    }
+    startAnimation() {
+        if (!!this.autoCloseDelay) {
+            if (this.loader) {
+                this.progress = 0;
+                let intervalId = setInterval(() => {
+                    if (this.progress >= 100) {
+                        clearInterval(intervalId);
+                        this.closeContainer();
+                    }
+                    else {
+                        this.progress++;
+                    }
+                }, this.autoCloseDelay / 100);
+            }
+            else {
+                let intervalId = setInterval(() => {
+                    clearInterval(intervalId);
+                    this.closeContainer();
+                }, this.autoCloseDelay);
+            }
+        }
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "type": ["handleChangeType"],
+        "position": ["handleChangeType"]
+    }; }
+    static get style() { return CuraToastStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "cura-toast",
+        "$members$": {
+            "type": [1],
+            "position": [1],
+            "icon": [513],
+            "label": [513],
+            "closeButton": [516, "close-button"],
+            "loader": [516],
+            "autoCloseDelay": [514, "auto-close-delay"],
+            "styles": [32],
+            "progress": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["icon", "icon"], ["label", "label"], ["closeButton", "close-button"], ["loader", "loader"], ["autoCloseDelay", "auto-close-delay"]]
+    }; }
+}
+
 registerComponents([
   CuraAccordion,
   CuraAccordionItem,
@@ -13220,6 +13402,7 @@ registerComponents([
   CuraIconsView,
   CuraInputText,
   CuraLabel,
+  CuraLoaderBar,
   CuraLoaderCircle,
   CuraPageTemplate,
   CuraParagraph,
@@ -13227,6 +13410,7 @@ registerComponents([
   CuraSelect,
   CuraSelectOption,
   CuraSwitch,
+  CuraToast,
 ]);
 
 exports.hydrateApp = hydrateApp;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@rededor/cura-hydrate",
   "description": "cura component hydration app.",
+  "version": "1.0.0-alpha.2",
   "main": "index.js",
   "types": "index.d.ts",
   "exports": {
@@ -8,6 +9,5 @@
       "require": "./index.js",
       "import": "./index.mjs"
     }
-  },
-  "version": "1.0.0-alpha.1"
+  }
 }