@rededor/cura 2.0.0-alpha.13 → 2.0.0-alpha.16

package/dist/cjs/cura-accordion_22.cjs.entry.js

@@ -3,10 +3,11 @@
 var index = require('./index-BLhmsPd0.js');
 var curaButton_definitions = require('./cura-button.definitions-B3SK8MaV.js');
 var index$1 = require('./index-EyP6Zlkd.js');
-var _static = require('./static-DHz-FA_O.js');
+var utils = require('./utils-DMHZ2n4p.js');
 var curaIcon_definitions = require('./cura-icon.definitions-DT0wF67y.js');
 var curaTabs_definitions = require('./cura-tabs.definitions-CGqqGE2e.js');
 require('./theme-legacy-default-COE-hjD7.js');
+require('./static-DHz-FA_O.js');
 
 const curaAccordionCss = () => `:host{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}`;
 
@@ -6796,12 +6797,13 @@ var locale = {
   }
 };
 
-const curaCalendarCss = () => `:host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:"";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:"";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--primary-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:"";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected{color:var(--select-label) !important;background:var(--primary-base);border-radius:50%}:host .date.default-dates{color:var(--select-label) !important;background:var(--primary-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--select-label) !important;background:var(--primary-base)}:host .date.range.interval{border-radius:0;background:var(--primary-lighter);color:var(--neutral-black) !important}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--select-label) !important;background:var(--primary-base)}@media (min-width: 992px){:host .date:hover{background:var(--primary-lighter);border-radius:50%;color:var(--neutral-white)}}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}:host .--disabled .icon::before{display:none}:host .--disabled .date{cursor:initial}@media (min-width: 992px){:host .--disabled .date:hover{color:var(--neutral-dark);cursor:initial;background:none;box-shadow:none}}:host .--disabled .default-dates{background-color:transparent;color:var(--neutral-dark) !important}:host .--disabled .today{border:2px solid var(--neutral-dark);color:var(--neutral-dark);cursor:initial}:host .--disabled .valid{color:var(--neutral-dark);font-weight:initial}`;
+const curaCalendarCss = () => `:host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);border-radius:4px;overflow:hidden;background:var(--color-neutral-purewhite);font-family:var(--font-family);position:relative}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:"";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:"";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--primary-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:"";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected{color:var(--select-label) !important;background:var(--primary-base);border-radius:50%}:host .date.default-dates{color:var(--select-label) !important;background:var(--primary-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--select-label) !important;background:var(--primary-base)}:host .date.range.interval{border-radius:0;background:var(--primary-lighter);color:var(--neutral-black) !important}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--select-label) !important;background:var(--primary-base)}@media (min-width: 992px){:host .date:hover{background:var(--primary-lighter);border-radius:50%;color:var(--neutral-white)}}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}:host .--disabled .icon::before{display:none}:host .--disabled .date{cursor:initial}@media (min-width: 992px){:host .--disabled .date:hover{color:var(--neutral-dark);cursor:initial;background:none;box-shadow:none}}:host .--disabled .default-dates{background-color:transparent;color:var(--neutral-dark) !important}:host .--disabled .today{border:2px solid var(--neutral-dark);color:var(--neutral-dark);cursor:initial}:host .--disabled .valid{color:var(--neutral-dark);font-weight:initial}:host .loading-container{align-items:center;background-color:var(--color-neutral-purewhite);display:flex;flex-direction:column;gap:12px;height:100%;justify-content:center;position:absolute;width:calc(100% - 12px)}`;
 
 const CuraCalendar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.onchangeday = index.createEvent(this, "onchangeday");
+        this.changeDateInView = index.createEvent(this, "changeDateInView");
         /**
          * Disable component
          *
@@ -6809,6 +6811,13 @@ const CuraCalendar = class {
          * @default false
          */
         this.isDisabled = false;
+        /**
+         * Loading state
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.isLoading = false;
         /**
          * An array of specific dates to be highlighted or processed.
          *
@@ -7136,6 +7145,7 @@ const CuraCalendar = class {
         if (direction === 'next')
             newMonth = addMonths(this.currentDate, 1);
         this.currentDate = newMonth;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), newMonth);
     }
     /**
      * Handle the month dropdown change.
@@ -7146,7 +7156,9 @@ const CuraCalendar = class {
         const { months } = this.fetchMonthNames();
         const newMonth = event.detail;
         this.selectMonth = newMonth;
-        this.currentDate = new Date(getYear(this.currentDate), months.indexOf(newMonth), 1);
+        const currentDateUpdated = new Date(getYear(this.currentDate), months.indexOf(newMonth), 1);
+        this.currentDate = currentDateUpdated;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), currentDateUpdated);
     }
     /**
      * Handle the year input change.
@@ -7156,7 +7168,9 @@ const CuraCalendar = class {
     onYearDropdownChange(event) {
         const newYear = event.detail;
         this.selectYear = newYear;
-        this.currentDate = new Date(newYear, getMonth(this.currentDate), 1);
+        const currentDateUpdated = new Date(newYear, getMonth(this.currentDate), 1);
+        this.currentDate = currentDateUpdated;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), currentDateUpdated);
     }
     /**
      * Flatten date ranges into individual dates.
@@ -7165,7 +7179,7 @@ const CuraCalendar = class {
      * @returns {Date[]} An array of individual dates.
      */
     expandDateRanges(dates) {
-        if (!dates)
+        if (!dates || !Array.isArray(dates))
             return [];
         return dates.flatMap(date => {
             if (typeof date === 'string')
@@ -7263,10 +7277,10 @@ const CuraCalendar = class {
         this.collapsed = true;
         return this.fetchDaysOfWeek();
     }
-    fetchDaysOfWeek() {
+    fetchDaysOfWeek(currentDate) {
         const DAYS_IN_CALENDAR_VIEW = 7;
-        const start = startOfWeek(this.currentDate);
-        const end = endOfWeek(this.currentDate);
+        const start = startOfWeek(currentDate || this.currentDate);
+        const end = endOfWeek(currentDate || this.currentDate);
         const daysIncurrentDate = eachDayOfInterval({ start, end });
         return daysIncurrentDate.slice(0, DAYS_IN_CALENDAR_VIEW);
     }
@@ -7277,11 +7291,12 @@ const CuraCalendar = class {
         if (direction === 'next')
             newWeek = addWeeks(this.currentDate, 1);
         this.currentDate = newWeek;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), newWeek);
     }
-    fetchDaysOfMonth() {
+    fetchDaysOfMonth(currentDate) {
         const DAYS_IN_CALENDAR_VIEW = 35;
-        const start = startOfMonth(this.currentDate);
-        const end = endOfMonth(this.currentDate);
+        const start = startOfMonth(currentDate || this.currentDate);
+        const end = endOfMonth(currentDate || this.currentDate);
         const daysIncurrentDate = eachDayOfInterval({ start, end });
         const startWeekDay = getDay(start);
         const prevMonthEnd = endOfMonth(subMonths(start, 1));
@@ -7408,7 +7423,15 @@ const CuraCalendar = class {
             '--width': this.width,
             '--min-width': this.minWidth,
             '--max-width': this.maxWidth,
+            '--color-neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`)
+        };
+    }
+    sendEventChangeDateInView(isCollapsed, currentDate) {
+        const eventData = {
+            datesInView: isCollapsed ? this.fetchDaysOfWeek(currentDate) : this.fetchDaysOfMonth(currentDate),
+            monthDays: this.fetchDaysOfMonth(currentDate)
         };
+        this.changeDateInView.emit(eventData);
     }
     watchDefaultDatesArray() {
         this.selectedDates = this.customDates;
@@ -7426,11 +7449,14 @@ const CuraCalendar = class {
         }
         this.defaultDates = this.expandDateRanges(newValue);
     }
+    watchCollapse(isCollapsed) {
+        this.sendEventChangeDateInView(isCollapsed, this.currentDate);
+    }
     render() {
         const { months } = this.fetchMonthNames();
-        return (index.h(index.Host, { key: '0058175ddba56d4ddf6e1ba9aa6b66575f9bfb01', style: this.getHostCSSProperties() }, index.h("div", { key: 'fb70c1f051075f6b7904baef0733dd45d37b12a0', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''} ${this.getDisabledClassModifier()}`, style: this.styles }, index.h("header", { key: 'e109068ef54873f86212b6ec35090961ec3ea2d7', class: "header" }, index.h("div", { key: '1a03a0147439e7fe5da109f5ae315cf5b4e9f363', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, index.h("cura-icon", { key: '916ff723610f006170cc6ad16a466d6643ff4537', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", disabled: this.isDisabled, color: this.determinePrevButtonColor(), onClick: this.handlePrevMonth }), this.type === 'dropdown' ? (index.h("div", { class: "select" }, index.h("cura-select", { disabled: this.isDisabled, size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index$1) => (index.h("cura-select-option", { size: "xsmall", key: index$1, value: month }, month)))), index.h("cura-select", { disabled: this.isDisabled, size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index$1) => (index.h("cura-select-option", { key: index$1, value: year.toString() }, year.toString())))))) : (index.h("cura-label", { color: !this.isDisabled ? 'neutral-black' : 'neutral-dark', size: "small" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), index.h("cura-icon", { key: '7989ae104c7ae55c93ce76756f8cdcc15625a9c9', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", disabled: this.isDisabled, color: "primary-base", onClick: this.handleNextMonth }))), index.h("span", { key: '15f1486afe03202f30352ec4efa1d21d39fffd73', class: "days-of-week" }, this.fetchWeekDays().map(this.renderItemWeekDays)), index.h("div", { key: '75f3070e86bdd892e5a48be48911b70ceac795a4', class: "dates" }, !this.collapsed
+        return (index.h(index.Host, { key: 'ce5e455df204f6d7a8a3a34eba8198d33e1dd798', style: this.getHostCSSProperties() }, index.h("div", { key: 'b09f8c9ae06a38f0c04022a3c76ca89aed67f694', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''} ${this.getDisabledClassModifier()}`, style: this.styles }, index.h("header", { key: 'c70bc378b8427424d4128f98b6f39f3a43d18e8b', class: "header" }, index.h("div", { key: 'cdda360107fd69b8a32e7773dfcb9f94bc63b517', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, index.h("cura-icon", { key: 'a19af085d074aa74ba3a51712ed62228a4244911', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", disabled: this.isDisabled, color: this.determinePrevButtonColor(), onClick: this.handlePrevMonth }), this.type === 'dropdown' ? (index.h("div", { class: "select" }, index.h("cura-select", { disabled: this.isDisabled, size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index$1) => (index.h("cura-select-option", { size: "xsmall", key: index$1, value: month }, month)))), index.h("cura-select", { disabled: this.isDisabled, size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index$1) => (index.h("cura-select-option", { key: index$1, value: year.toString() }, year.toString())))))) : (index.h("cura-label", { color: !this.isDisabled ? 'neutral-black' : 'neutral-dark', size: "small" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), index.h("cura-icon", { key: '0e9917d69adf95a5f4566d1269738d8ea4a11036', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", disabled: this.isDisabled, color: "primary-base", onClick: this.handleNextMonth }))), index.h("span", { key: 'f5249c9c7ebeae18af57c43bbd988aa7c21b7b04', class: "days-of-week" }, this.fetchWeekDays().map(this.renderItemWeekDays)), index.h("div", { key: '2465a9c40856462242a80f1fda2abf7dc2648012', class: "dates" }, !this.collapsed
             ? this.fetchDaysOfMonth().map((day, index$1) => (index.h("div", { key: index$1, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
-            : this.fetchDaysOfWeek().map((day, index$1) => (index.h("div", { key: index$1, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (index.h("div", { class: "collapsed-container" }, index.h("cura-button-transparent", { disabled: this.isDisabled, onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (index.h("div", { class: "collapsed-container" }, index.h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
+            : this.fetchDaysOfWeek().map((day, index$1) => (index.h("div", { key: index$1, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (index.h("div", { class: "collapsed-container" }, index.h("cura-button-transparent", { disabled: this.isDisabled, onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (index.h("div", { class: "collapsed-container" }, index.h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null, this.isLoading && (index.h("div", { key: 'fba41e2fd1b743d534f763e690b8eaf8f741f2f4', class: "loading-container" }, index.h("cura-loader-circle", { key: '9780c689a48c0c6ef2804ba6e9864338dd6a21a9', color: "primary", size: "large" }), index.h("slot", { key: 'c0e9eee4818991d9fd6ac8322aa183cf574abb65', name: "loadingMessage" }))))));
     }
     static get watchers() { return {
         "defaultDate": [{
@@ -7440,6 +7466,9 @@ const CuraCalendar = class {
             }],
         "customDates": [{
                 "watchDefaultDatesArray": 0
+            }],
+        "collapsed": [{
+                "watchCollapse": 0
             }]
     }; }
 };
@@ -7512,49 +7541,11 @@ const CuraCard = class {
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: '9478ce754c108db722dbc5bcbb00a0884b6c6f38', role: this.href ? 'link' : 'div' }, this.href ? (index.h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, index.h("slot", null))) : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: '73f399ec63b8a0933a22c4a6d605dbb4bc8bf2c3', role: this.href ? 'link' : 'div' }, this.href ? (index.h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, index.h("slot", null))) : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("slot", null)))));
     }
 };
 CuraCard.style = curaCardCss();
 
-function checkMobile() {
-    return (window === null || window === void 0 ? void 0 : window.innerWidth) < _static.Static.breakpoints.medium.min;
-}
-function checkIOS() {
-    return [
-        'iPad Simulator',
-        'iPhone Simulator',
-        'iPod Simulator',
-        'iPad',
-        'iPhone',
-        'iPod'
-    ].includes(navigator.userAgent)
-        // iPad on iOS 13 detection
-        || (navigator.userAgent.includes("Mac") && "ontouchend" in document);
-}
-function fakeInputIOSHack(targetElement) {
-    if (!checkMobile() || !checkIOS())
-        return null;
-    const fakeInput = document.createElement('input');
-    fakeInput.setAttribute('type', 'text');
-    fakeInput.style.position = 'absolute';
-    fakeInput.style.opacity = '0';
-    fakeInput.style.height = '0';
-    fakeInput.style.fontSize = '16px'; // disable auto zoom
-    targetElement.prepend(fakeInput);
-    // focus so that subsequent async focus will work
-    fakeInput.focus();
-    return fakeInput;
-}
-function addBodyScrollLockClass() {
-    document.body.classList.add("cura-body-scroll-lock");
-}
-function removeBodyScrollLockClass() {
-    if (document.body.classList.contains("cura-body-scroll-lock")) {
-        document.body.classList.remove("cura-body-scroll-lock");
-    }
-}
-
 class FixedElementScrollBehavior {
     constructor(hostElement, scrollableElement) {
         this._stopPropagationEvent = (e) => {
@@ -7578,11 +7569,11 @@ class FixedElementScrollBehavior {
     disableScroll() {
         this.scrollPosition = window.scrollY;
         window.scrollTo({ top: 0, behavior: 'instant' });
-        addBodyScrollLockClass();
+        utils.addBodyScrollLockClass();
         this._addEvents();
     }
     enableScroll() {
-        removeBodyScrollLockClass();
+        utils.removeBodyScrollLockClass();
         window.scrollTo({ top: this.scrollPosition, behavior: 'instant' });
         this._removeEvents();
     }
@@ -7680,7 +7671,7 @@ const CuraDropdownSearch = class {
             if (this.resizeTimeout)
                 clearTimeout(this.resizeTimeout);
             this.resizeTimeout = setTimeout(() => {
-                this.isMobile = checkMobile();
+                this.isMobile = utils.checkMobile();
                 this.setZoomHeight();
             }, this.resizeTimeoutMs);
         };
@@ -7712,7 +7703,7 @@ const CuraDropdownSearch = class {
                 clearTimeout(this.blurTimeout);
             this.blurTimeout = setTimeout(() => {
                 if (this.zoomState) {
-                    const delay = checkIOS ? 500 : 100;
+                    const delay = utils.checkIOS ? 500 : 100;
                     setTimeout(() => this.setZoomHeight(), delay);
                 }
                 this.isOnFocus = false;
@@ -7793,7 +7784,7 @@ const CuraDropdownSearch = class {
             window.visualViewport.addEventListener('resize', this.handleVisualViewportChange);
             window.visualViewport.addEventListener('scroll', this.handleVisualViewportChange);
         }
-        this.isMobile = checkMobile();
+        this.isMobile = utils.checkMobile();
     }
     componentDidLoad() {
         var _a;
@@ -7943,7 +7934,7 @@ const CuraDropdownSearch = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '7a312071ecc60fe462636ad7b32bcb82b5d5c1a2', style: this.getHostCSSProperties(), role: "search", "aria-label": this.label, "aria-required": this.required, "aria-disabled": this.disabled, "aria-expanded": this.zoomState }, index.h("div", { key: 'c4b906871b300013208649f8dcf9b27cf161daae', class: this.getClasses(), style: this.styles }, index.h("div", { key: '97d3d3ae67dc79f2d04456555388cce9aec36f7d', class: "component-controls" }, this.isMobile && this.zoomState ? (index.h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', index.h("cura-input-text", { key: '53aa07646542b9941804f7a7f0d66f8c340ce664', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", { key: 'fb206e8295b0139082b79cc747bfe8e424df33fa', name: "helperText" }))), index.h("div", { key: '8ab0ad70e667c4b01b2f7a31fc5df6056b170565', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, index.h("slot", { key: 'dc3cda02f7a70d7229457d6c225a606ee2e03f52', onSlotchange: () => this.handleSlotChange() })))));
+        return (index.h(index.Host, { key: '4eebe0e03eb20a9c056158e9bb7dafad6c5d7e36', style: this.getHostCSSProperties(), role: "search", "aria-label": this.label, "aria-required": this.required, "aria-disabled": this.disabled, "aria-expanded": this.zoomState }, index.h("div", { key: 'c74a9785e747c23f853beabce244d9d79be963f6', class: this.getClasses(), style: this.styles }, index.h("div", { key: '8e0e1b8ad5929f7a65d970da37af8da526ea1ec6', class: "component-controls" }, this.isMobile && this.zoomState ? (index.h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', index.h("cura-input-text", { key: 'd6b1e0284f7f8bbd0293ca8c7e11de7e4d390729', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", { key: '3626dc325181c193081af56996804453c9dee9f5', name: "helperText" }))), index.h("div", { key: 'c0b979983b567e35a15e756d24cecf0a0102e2bc', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, index.h("slot", { key: '56fc0ae14345c88eaf214a12f6ebf545fc040aea', onSlotchange: () => this.handleSlotChange() })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -7963,7 +7954,7 @@ const CuraDropdownSearchCategory = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '511391a8c6c1c998b04e3093838173ae76549715' }, index.h("div", { key: '63da720bb3d2cc354ef5f1e9ceaf0f2f9c396f4e', class: "component-container", style: this.styles }, index.h("cura-heading", { key: 'ba003607e581d4abaf2e6d617f94e3174d04a4b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark', marginBlock: '0', lineHeight: '1em' }, index.h("slot", { key: '80b14ff99b42a64082895db81b4dbe78cd7545a3' })))));
+        return (index.h(index.Host, { key: 'd80c4ebc3e7edee04eb7e3b405cc11ea1cb65111' }, index.h("div", { key: 'af087ac20e0e2075acb87b64573734e16bdd7b62', class: "component-container", style: this.styles }, index.h("cura-heading", { key: 'f48f5ca2cd5fdb7b2862ae20e51b3963461db945', size: 'xsmall', weight: 'bold', color: 'neutral-dark', marginBlock: '0', lineHeight: '1em' }, index.h("slot", { key: '13030d0abe5ac052fa3c3a7e04694ecfd7a3ab23' })))));
     }
 };
 CuraDropdownSearchCategory.style = curaDropdownSearchCategoryCss();
@@ -8026,7 +8017,7 @@ const CuraDropdownSearchOption = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '6168a95a628d07878f472c310390bf9c45bd5057' }, index.h("div", { key: '29763282f101a9fbe205c91e7b3c70fa51878e63', class: this.getClasses(), style: this.styles }, index.h("div", { key: '46bd7a250ad866b984e6f4184aa4800e89b741c9', class: "selectable-container", onClick: () => this.handleSelect() }, index.h("slot", { key: '77088405f3cc4f077e49a4266fb926348774d9e9', name: 'image' }), index.h("div", { key: '96baef2af4ffe7c5ec809a5adbd0512120b6c71c', class: "content" }, index.h("slot", { key: 'e41794e8eaff6bfe1516e88e8591ca915eb7ad3f' }))), index.h("div", { key: '991bca3b0956519b531d576a1738bc3f200cc73f', class: "actions-container", onClick: () => this.handleActionsClick() }, index.h("slot", { key: '098e8c29ab48ef8e0cfff2a48a31860eafb62487', name: 'actions' })))));
+        return (index.h(index.Host, { key: 'e01c513f3c2cf8ad1b4b118f2b59d5228a052112' }, index.h("div", { key: 'b59ae795fc8905929ed91fc2e18e465b0d1632f0', class: this.getClasses(), style: this.styles }, index.h("div", { key: 'f3d163ac57e5c6cbc15f4b7d822273afa1279816', class: "selectable-container", onClick: () => this.handleSelect() }, index.h("slot", { key: 'ed9427e3251354825ee9652f653f9597ccf79383', name: 'image' }), index.h("div", { key: 'a78dcf1bfd71e42542b9f7bdb7fb43e3acc628ba', class: "content" }, index.h("slot", { key: '7ad2f91f434cf69b5f45674e887d29fe4188cd9e' }))), index.h("div", { key: '7f9cac5875885a80505b7455de49c090aca7848c', class: "actions-container", onClick: () => this.handleActionsClick() }, index.h("slot", { key: '12496150bea58f08dc7c5a868d866f67903e545c', name: 'actions' })))));
     }
 };
 CuraDropdownSearchOption.style = curaDropdownSearchOptionCss();
@@ -8121,7 +8112,7 @@ const CuraHeading = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (index.h(index.Host, { key: 'd32c25d0110f82182f4559789f3d2db04e040afe', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
+        return (index.h(index.Host, { key: '611cbd1aff08cda4926fc82ba821c86c5df3e954', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
     }
     get host() { return index.getElement(this); }
 };
@@ -8156,7 +8147,7 @@ const CuraIcon = class {
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (index.h(index.Host, { key: '5dfb1ead36b19cb799e5dad924426356b23500d4', role: "img" }, index.h("svg", { key: '9df09822b70978c96afb525cf5967145513b4a56', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, index.h("use", { key: '8ce9a2c0e434ee559a8c0ff2fb14a30093ce434a', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (index.h(index.Host, { key: 'b383f07f146a8f4760317a8bfc42a16c06f8d323', role: "img" }, index.h("svg", { key: 'd1d3e98cd7afbf729989463a123030b95ea84221', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, index.h("use", { key: 'bb6c8175923161b9d603a969bc1a7ca651e19256', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -11917,9 +11908,9 @@ const CuraInputText = class {
     }
     async setFocus() {
         // IOS needs large timeout value to work
-        const timeoutMs = checkMobile() && checkIOS() ? 1000 : 200;
+        const timeoutMs = utils.checkMobile() && utils.checkIOS() ? 1000 : 200;
         // IOS fake input hack
-        let fakeInput = fakeInputIOSHack(this.host);
+        let fakeInput = utils.fakeInputIOSHack(this.host);
         setTimeout(() => {
             this.inputRef.focus();
             if (fakeInput)
@@ -12297,7 +12288,7 @@ const CuraLabel = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '7d49bffcd8408352d48e9d2f4d1a085232b0a388', style: this.hostCSSProperties() }, index.h("p", { key: '9479efc64405d2653e2aaf185138c37c4ecca95c', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '6de7990505b1f2e4af8988e9a9cc3a96ae18cf75' }))));
+        return (index.h(index.Host, { key: '80bddd4f902e7084628ed2cbfe1144a6ddcf2674', style: this.hostCSSProperties() }, index.h("p", { key: 'bc507c1b119459c6efbb81120a7cc33c1e305800', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '451674e41f86b0b3db3f2f29b498aa49c489a7ec' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -12340,7 +12331,7 @@ const CuraLoaderCircle = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '09f72e4ec206571c1bfb4333a76da3113f2b386d', style: this.getStyles(), role: "progressbar" }, index.h("svg", { key: 'd446c093c9ae6c1ebca50e023f2eba592f37eb07', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '8d8bf0fefcb924af391977d672f777face8bf24f' }, index.h("circle", { key: 'd77eaba65fc61c265b7c495e95dae22d9732732b', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), index.h("path", { key: 'ab82247a03c327a6eac8f5c0770932e3520aa32c', 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" })), index.h("defs", { key: '6291d976f90dd54aecaead32f8314e977dad4c3f' }, index.h("linearGradient", { key: '8f213ed3cb1e55f9aae79f18d43f414b48f45a19', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: 'c723178770cb0d49746a72fff6c9c8dc7fbb07b4' }), index.h("stop", { key: '07bb208a3ca3f3b7a317b1e2386dc9cf683fd155', offset: "1" }))))));
+        return (index.h(index.Host, { key: '628e3341e2bc0bef9a18362ab46625d99a7f6800', style: this.getStyles(), role: "progressbar" }, index.h("svg", { key: 'c0e5366cef003222ec7a60fcaed02a1e2376acd5', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '194989f5d872562dffc46ca981a699183de87603' }, index.h("circle", { key: '6ffa4ee0394f80b4328e5bda459f849387086568', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), index.h("path", { key: '9cc41c580811d999769f1ebe1443bd63a092eae0', 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" })), index.h("defs", { key: '1190920b737c9306a96ac9854207a339ac312815' }, index.h("linearGradient", { key: '11921fe3939bef2f32a4688058a3c818600c5781', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: 'fa3f8b029d39912abea7adef004f24e99f76d453' }), index.h("stop", { key: '53b8efce47f6101c36ccf9f05beca7ab76ffb886', offset: "1" }))))));
     }
 };
 CuraLoaderCircle.style = curaLoaderCircleCss();
@@ -12363,7 +12354,7 @@ const CuraPageTemplate = class {
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: 'a3b743b1f518ece009858e39716903869184d627' }, index.h("div", { key: 'f3f29d5306f612c197ded53885bbf598a377388a', style: this.styles, class: "grid-template" }, index.h("div", { key: '2329343b116c6bfb8f35a146bbab6b9460e50cbe', id: "sub-header" }, index.h("slot", { key: 'b27e5dd020099fc64636a0ab363003024315cff6', name: 'sub-header' })), index.h("div", { key: '45bcb4f1a574c2c0d8337635729bd603df399f20', id: "header" }, index.h("slot", { key: '27bcdc8a59b717ab1c4a021b629a5c4a6a285f8a', name: 'header' })), index.h("div", { key: 'b19ae447a53c43d2f46127b0e38e115b792bec6b', id: "pre-content" }, index.h("slot", { key: 'b37745e63e57ad2c48cf430849b2d64c71d2b45e', name: 'pre-content' })), index.h("div", { key: '4adbaacd79ebb4e5e5fae0233acba2b7215a74ce', id: "content-container", class: this.getClasses() }, index.h("div", { key: '17a7d806d6a24fe67f249cfca2fce466861e25f5', id: "sidebar-left" }, index.h("slot", { key: '6fa66175bf7e0953ce23c6c557297d6f2efb9439', name: 'sidebar-left' })), index.h("div", { key: '450c3a5a742d40d26ccdc672c855b2f9f9ae3153', id: "content" }, index.h("slot", { key: 'ce593020ba6d60ca8a2ddd835deb8c8a4b0e33a1', name: "content" }), index.h("slot", { key: '1cc8b4478d78e3c6985e811cd0d1b510f00edf1b' })), index.h("div", { key: '4497faf9a880a4ae0eaa3f097ca02d3a155a4496', id: "sidebar-right" }, index.h("slot", { key: '97dd82f3f0b83f93334a9ca896ace76521ab05fb', name: 'sidebar-right' }))), index.h("div", { key: '80fb43c7b84bdc2c0722dbada31024d477326d0a', id: "post-body" }, index.h("slot", { key: '3975794bdbefe5fd0e05d06af7715e13ff650338', name: 'post-body' })), index.h("div", { key: '08183669839fce4b448bef3f6489fc6d8c61e898', id: "footer" }, index.h("slot", { key: '9b1797aecc9fd4131944a70371fab08b239f0802', name: 'footer' })), index.h("div", { key: '3e9ea1d173490ee3bf941439fad80814d3a5daf2', id: "sub-footer" }, index.h("slot", { key: '4b0c6a8d6f4b548040195003e8b5574c83541508', name: 'sub-footer' })))));
+        return (index.h(index.Host, { key: '65ceac57166149f686508dd56d865092406afe4d' }, index.h("div", { key: 'c78f1ef93fd52b43285fa3b39d203db258c1bf31', style: this.styles, class: "grid-template" }, index.h("div", { key: 'cfb99058f718560bf2679e13266bf6e1447cfb1e', id: "sub-header" }, index.h("slot", { key: 'ddd2aaeb147cad4e92e16dda69f757d9aa261e2c', name: 'sub-header' })), index.h("div", { key: 'c3d87f2c1d68d08e2c46730d731e03a17e0c355d', id: "header" }, index.h("slot", { key: 'a681e8d1c9c379be1c18278811d7e99455ad0a8b', name: 'header' })), index.h("div", { key: 'aee6e5920384ecdbf0c8adb358a431e304f612de', id: "pre-content" }, index.h("slot", { key: '4e554925885a9f8200fe8cb7b35e438e6a7dd1e8', name: 'pre-content' })), index.h("div", { key: '30f1f9aeb3a58fb390716dec7f5855fdcc1cc82d', id: "content-container", class: this.getClasses() }, index.h("div", { key: '259ab99ca0ec43a86536c3c188429a555eebbd45', id: "sidebar-left" }, index.h("slot", { key: 'ff359698c0b452776e558234b46745dd40746edc', name: 'sidebar-left' })), index.h("div", { key: '14338cdc57d8ee6cfb5ca15fd5ed8fe276d83bea', id: "content" }, index.h("slot", { key: 'ea4f4a5423bf061880d580e86f015907ee5929ea', name: "content" }), index.h("slot", { key: 'ddf40946d828b0de102e9fc21ee99201dc36342b' })), index.h("div", { key: 'c207b0c2280033f71c2b7803b1ae9ec017ab2b5c', id: "sidebar-right" }, index.h("slot", { key: 'fd15c1b0ce197f7de9e72827dca3c1d4736b4219', name: 'sidebar-right' }))), index.h("div", { key: 'fd02b69336b4d6920975bf1a8b4a7c8a957e65d6', id: "post-body" }, index.h("slot", { key: '205b2283d6fff54f3e3be4ed9b2b64b05c985601', name: 'post-body' })), index.h("div", { key: '4602dc880efe376c9a951237c43ebcb6723499db', id: "footer" }, index.h("slot", { key: 'ed9314b5192194cea91dab7fc6efdbfb198016fc', name: 'footer' })), index.h("div", { key: '53b5bd4b187a0ae6657bccfb8626a5d335bdeb73', id: "sub-footer" }, index.h("slot", { key: '8b086fb200223ff0bf5acd2266da3ae47cc30269', name: 'sub-footer' })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -12435,7 +12426,7 @@ const CuraParagraph = class {
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: 'c3789e60b50107cc39c51e4a3ec317e86c966689', style: this.hostCSSProperties() }, index.h("p", { key: 'f70ffc6277b6164dfc8d230123820efb3d5daa64', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '66251e59d51637fc7820516b17af8947cc9168e8' }))));
+        return (index.h(index.Host, { key: '33b3d1d2e739523255fbfbfd8b6afd67aa5dbc2d', style: this.hostCSSProperties() }, index.h("p", { key: '1baf909ffcc9c682bc9fba3b36d173e53020d084', style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'b836160b6c94a6f3a2f5a7c4c1802bc5340bd5b5' }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -14520,10 +14511,10 @@ const CuraSelect = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '8a05e5365062b5a2da4f10d7e3ca04f9d3136fba', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, index.h("div", { key: 'ab28fd73d68ccdc5ad6dd6cc7f79d879eaf25818', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: '5405aa3706b07640fdfdaa681ad22ea9c5fd9997', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: '39b37aefbf4e61572607d891eb63c737c332793c', class: "required" }, "* "))), index.h("div", { key: 'c339ab1ff49699fb0a348a169ba7f545b89bd593', class: {
+        return (index.h(index.Host, { key: '7621641772e6c166b5359346f0d0681a614c1f5c', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, index.h("div", { key: '7cc11beb3a10ada937c4668fdfcdb98b380200e0', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: 'd10426c84bb97db84074430f537293407f7afa05', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: '82808b9add65b3c6abf03e56fe63dccd574229f3', class: "required" }, "* "))), index.h("div", { key: 'e37b1468d0bf2bdac3f1c2096c22840fe7e0eced', class: {
                 'cura-input-field': true,
                 'open': this.isOpen,
-            }, ref: el => (this.inputWrapper = el) }, this.renderIcon(), index.h("input", { key: '5118ad409b6b9c48c856670857d3cae26d28fd46', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "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.textInput, readonly: this.searchBehavior ? null : true }), index.h("button", { key: '53bddc2b1e56462a9181ce99749d98568f1c5dd9', class: "up-down-button" }, index.h("cura-icon", { key: '01cb20504d2e0506e7210d33e3ca75978a598eff', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), index.h("cura-label", { key: '550c24779f690ebd16bec881770b200ce06f5390', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: '530f64f99df6328d3a49a449f8f924e57bb03f21' })), this.isOpen && (index.h("div", { key: '3ee7a6439c98a0837a3f39d27646ed7a55c630b3', class: {
+            }, ref: el => (this.inputWrapper = el) }, this.renderIcon(), index.h("input", { key: '7fabd1a5fc59c479ea09d95f7552f49f8448125e', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "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.textInput, readonly: this.searchBehavior ? null : true }), index.h("button", { key: '9fa767799517d3872d60e33a9d71562bfe24d0c5', class: "up-down-button" }, index.h("cura-icon", { key: '2299a69d28c72eba5f2a18faa87c653226105034', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), index.h("cura-label", { key: '6c88858d35cdf9c756b9ee7d9e93f5ff0596e372', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: '55a075d118ba10f7921d6cf13331c7c0a0ddae46' })), this.isOpen && (index.h("div", { key: 'd36637fb50aeefbb10991dd2fa8212886293fff3', class: {
                 menu: true,
                 open: this.isOpen,
                 [this.preferredPlacement]: true,
@@ -14536,7 +14527,7 @@ const CuraSelect = class {
                 visibility: this.isPositioned ? 'visible' : 'hidden',
                 opacity: this.isPositioned ? '1' : '0',
                 pointerEvents: this.isPositioned ? 'auto' : 'none',
-            } }, index.h("slot", { key: '84c3bb501966175635102b2ccbfa0cf43d2112f1', name: "option" }))))));
+            } }, index.h("slot", { key: '399d62fd686ed4c0a0729d336a3502b53918e371', name: "option" }))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -14590,7 +14581,7 @@ const CuraSelectOption = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '0822f9ef2bf99e9f2fd9b82757c232449cec3397', slot: "option", role: "option", "aria-selected": this.selected }, index.h("div", { key: '97ce07635ab1e67676cdf80bce6b1eada30e035c', class: this.getClasses(), style: this.styles }, index.h("cura-label", { key: 'd6fb19b666f1d12d713ba1e6270ebb62a12d86ab', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, index.h("slot", { key: '78f64d9347185fd398e1adbc45650cf247894481' })), this.selected && index.h("cura-icon", { key: '948e0d36d71e4c236a2472032703dbb47a371910', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (index.h(index.Host, { key: '351cadffe0228ba5af1a9d6019c8dece886061c6', slot: "option", role: "option", "aria-selected": this.selected }, index.h("div", { key: '0bbe81fd481f3d7d83e42bcbeb69c8b88ce23804', class: this.getClasses(), style: this.styles }, index.h("cura-label", { key: 'fa4ae11397845ed517f756fd4537f80bb7580e4f', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, index.h("slot", { key: 'c3b653b8a65d3b7afe0253fd9aafe922fdaebcfc' })), this.selected && index.h("cura-icon", { key: 'd7420da36a93c1f873ac79e6d55e1fa697a4eaad', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -14690,7 +14681,7 @@ const CuraTabs = class {
         const labelSize = curaTabs_definitions.labelSizes[this.size] || curaTabs_definitions.labelSizes['default'];
         const labelColor = this.computeContentColor();
         this.updateDynamicStyles();
-        return (index.h(index.Host, { key: '3966968b73a9a51ec26f3206cdb09fbfcb3d3daf', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, index.h("button", { key: '00cc6382c635a05c52fd74b3e02e968c2d94cacb', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), index.h("cura-label", { key: 'e193500f156c10cf0442e6f504e19d552c19f849', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, index.h("slot", { key: '8a0ac7c4b2ff4990093d13b4110e370616cf39f4' })))));
+        return (index.h(index.Host, { key: 'd12ccbd8e900c1a21dfee2ee7363e167772acad4', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, index.h("button", { key: '2e77d02614e38baaca599d7830f5ba4dcb048519', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), index.h("cura-label", { key: '343f0d566d70ea2f132ea55ca588c57cb2ce20f2', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, index.h("slot", { key: '9acebd9e763f88d698ca6c0a08e97c3960701730' })))));
     }
     static get watchers() { return {
         "colorMode": [{
@@ -14729,7 +14720,7 @@ const CuraTabsGroup = class {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'), '--gap': `${this.gap}px` });
     }
     render() {
-        return (index.h(index.Host, { key: 'fb6a6ae52fd5bdfb8c3978a75f26be87479ccafa', role: "tablist", style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'afca97b27c8359f8236331257e4db41f1332e071' })));
+        return (index.h(index.Host, { key: '1a2babd4b23b2f54644cfe9d0129736c897f50c3', role: "tablist", style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'ba78df56f01619de8df14cbfde08dd501b15048e' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -217,7 +217,7 @@ const CuraCheckbox = class {
         return index.h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (index.h(index.Host, { key: '2e951be46f80c67ea87aaf1c613e29ae7a1cc856', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, index.h("div", { key: '341a30934dd6660b03e6be161999fad24fb005ef', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: '58f32f6b047d19b8af2468b6007cf2dfb1297476', class: "info" }, index.h("div", { key: 'e23407390368c638e4e8cd9119ad3ccd1767d861', class: "label-wrapper" }, index.h("cura-label", { key: 'd7ce7b39441203e9058b0227edbfc75dd320806f', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (index.h("cura-paragraph", { key: '0684b9ab1f517083bc681bd0731aedf6d38c9873', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), index.h("cura-label", { key: '499419ee720a7c7ba7e42fc8fcebccfb4e0b0c42', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: '7c9637fa4a8082f6451851452db1b751218a20ec' }))), index.h("div", { key: '91b0a1f42d65d72aca24ff8a852d3c6f461a9cb7', class: 'checkbox', tabIndex: this.ontabindex }, index.h("input", { key: '4f1db30730b2d68d3d0f3036fd5924a9da1b541b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (index.h(index.Host, { key: '9236b8f9d487c042e00800a624e1b729e36b296d', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, index.h("div", { key: '4472e8ee4fa4d1ea6c6f4cf9ba347acc66f7df2a', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: '1c74e35fbfbcfcbe113edcd5522e674d197b2212', class: "info" }, index.h("div", { key: '75e7fdf6050f38473379fb3e4a5880f9eb34e88e', class: "label-wrapper" }, index.h("cura-label", { key: 'eeac634dd87a72922c0d89e1877d0e0b132e6cd9', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (index.h("cura-paragraph", { key: '7d590fd046c2ba90dbef7846f51a774d50418ca7', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), index.h("cura-label", { key: 'f7c750b3d3ce6afaaba514ac835ceed38674a048', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: 'd83d9f24b5a5274233e61256add788bfa2ee0f92' }))), index.h("div", { key: '3f67839bbbf8a583d41765a2a6450c71f5063066', class: 'checkbox', tabIndex: this.ontabindex }, index.h("input", { key: 'ab742442fc98838433f6db949478bef6ee2e0d45', 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 index.getElement(this); }

package/dist/cjs/cura-display.cjs.entry.js

@@ -86,7 +86,7 @@ const CuraDisplay = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (index.h(index.Host, { key: '264f7e93aac5ecb7a775c6e505f230518e3959f4', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
+        return (index.h(index.Host, { key: 'b9264ba7f3ff79b474f02107824441c9f6e67ec1', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-dropdown-search-not-found.cjs.entry.js

@@ -16,7 +16,7 @@ const CuraDropdownSearchNotFound = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '899559f0e05394638cd9c6dd61897383453ed176' }, index.h("div", { key: '0b1ed35b82f1df7feac928ab84e08149a38a79a3', class: "component-container", onClick: this.handleClick }, index.h("cura-heading", { key: '49f423b01e6719790bf7f3bcda6f3239042c0c9f', size: "xsmall", weight: "bold", color: "error-dark" }, index.h("slot", { key: '4fbcfb5602729f92f84a22d003d5b2e66e481b6c' })))));
+        return (index.h(index.Host, { key: '6b57806eb3a2c3be73c76876bfce0062e36a97fa' }, index.h("div", { key: '5a294ef5d53177d439816d881a8d5c90b60b621e', class: "component-container", onClick: this.handleClick }, index.h("cura-heading", { key: 'ff92297c1261d69ef9fa8c2b9cdbfee6365b08f2', size: "xsmall", weight: "bold", color: "error-dark" }, index.h("slot", { key: 'b84f981ba0cff218b5bf0c94a014c83daaa184ac' })))));
     }
 };
 CuraDropdownSearchNotFound.style = curaDropdownSearchNotFoundCss();

package/dist/cjs/cura-icons-view.cjs.entry.js

@@ -22,7 +22,7 @@ const CuraIconsView = class {
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (index.h(index.Host, { key: '08ac6235b9218c2202cd4957bb78100216b5b680' }, index.h("div", { key: '71856330d5f050d46b83c06125d29a235532bf98', class: "iconDetail" }, index.h("cura-heading", { key: '2520247cde8d71b1a31ce028c4525b04e6302bf1', size: "small", "margin-block": "0 24px" }, "Icon: ", index.h("b", { key: '5cf48d96ed36dd5514357c65b0ec8c9f137bb1e4' }, this.selected)), index.h("div", { key: '7eda1e7db5efc89abb583631a5e959e31397684f', class: "iconSizes" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size }), index.h("span", null, size)))), index.h("div", { key: 'f443dab7e85fe89a207da8fbefb024b0c22fa084', class: "iconSizes invert" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), index.h("span", null, size))))), index.h("div", { key: '5ea3b71259ae5454297a94aef4ce1e154c968512', class: "icons" }, iconsetdefaulticons.map(icon => index.h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, index.h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), index.h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
+        return (index.h(index.Host, { key: 'f25d10b3f380cc58fd5b4e77b437e09ba0787df4' }, index.h("div", { key: '5162f1c8aff585a60f37ef9af8451dae8b310394', class: "iconDetail" }, index.h("cura-heading", { key: '2e95f88bf98bcb3b5ea8b2ce6b015ef5d3c984e5', size: "small", "margin-block": "0 24px" }, "Icon: ", index.h("b", { key: '102d867291ca3af92c370f044a7140571b15c737' }, this.selected)), index.h("div", { key: 'e2fd0833644705ea8b406508be51c6d2d5683d24', class: "iconSizes" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size }), index.h("span", null, size)))), index.h("div", { key: 'fa842318750f3cdb5e5d7f7333c9221aaf66b585', class: "iconSizes invert" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), index.h("span", null, size))))), index.h("div", { key: 'a25fd5649fe3bda93f80208e634790da44dde89b', class: "icons" }, iconsetdefaulticons.map(icon => index.h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, index.h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), index.h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
     }
 };
 CuraIconsView.style = curaIconsViewCss();

package/dist/cjs/cura-input-date.cjs.entry.js

@@ -189,7 +189,7 @@ const CuraInputDate = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a274509eede61a43a6677fbf20dc4645c745d41d' }, index.h("div", { key: '857056581ab374e280ab442aecc49d6b93a21cd2', class: "container", style: this.styles }, index.h("cura-input-text", { key: '417fd4a96ea71a747f7fee55e7a5b524c6b51ef5', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+        return (index.h(index.Host, { key: 'fe506eeb9ca1193994e8988f59f7d39aa09afb7c' }, index.h("div", { key: '33b50ee8b32c70855ec061a0fb9747203f473a62', class: "container", style: this.styles }, index.h("cura-input-text", { key: '8c3d0254c3b6dcd0b24a5c5a27e1b4aeda4c83df', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }