@rededor/cura 2.0.0-alpha.14 → 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)}`;
 
@@ -6803,7 +6804,6 @@ const CuraCalendar = class {
         index.registerInstance(this, hostRef);
         this.onchangeday = index.createEvent(this, "onchangeday");
         this.changeDateInView = index.createEvent(this, "changeDateInView");
-        this.isMounted = false;
         /**
          * Disable component
          *
@@ -7145,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.
@@ -7155,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.
@@ -7165,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.
@@ -7272,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);
     }
@@ -7286,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));
@@ -7420,10 +7426,10 @@ const CuraCalendar = class {
             '--color-neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`)
         };
     }
-    sendEventChangeDateInView(isCollapsed) {
+    sendEventChangeDateInView(isCollapsed, currentDate) {
         const eventData = {
-            datesInView: isCollapsed ? this.fetchDaysOfWeek() : this.fetchDaysOfMonth(),
-            monthDays: this.fetchDaysOfMonth()
+            datesInView: isCollapsed ? this.fetchDaysOfWeek(currentDate) : this.fetchDaysOfMonth(currentDate),
+            monthDays: this.fetchDaysOfMonth(currentDate)
         };
         this.changeDateInView.emit(eventData);
     }
@@ -7443,23 +7449,14 @@ const CuraCalendar = class {
         }
         this.defaultDates = this.expandDateRanges(newValue);
     }
-    watchDatesInViewChange() {
-        if (!this.isMounted) {
-            return;
-        }
-        this.sendEventChangeDateInView(Boolean(this.collapsed));
-    }
     watchCollapse(isCollapsed) {
-        this.sendEventChangeDateInView(isCollapsed);
-    }
-    componentDidLoad() {
-        this.isMounted = true;
+        this.sendEventChangeDateInView(isCollapsed, this.currentDate);
     }
     render() {
         const { months } = this.fetchMonthNames();
-        return (index.h(index.Host, { key: '9667bc4f47b6581724dcc658ce322b375622906a', style: this.getHostCSSProperties() }, index.h("div", { key: '231bc0e3890949e6696338e386a3db4e9744c5b6', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''} ${this.getDisabledClassModifier()}`, style: this.styles }, index.h("header", { key: '88357e185b812e45d4632aa20759cf078e51af19', class: "header" }, index.h("div", { key: '93cf9ecfbce8772e64cdad26090119257f47b77b', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, index.h("cura-icon", { key: 'c188f28ca53ffb79ad9d13b1ef7b19ab6d26b10d', 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: 'c890a280637b8c50d2b8cb8ac1ab9a685d742cc3', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", disabled: this.isDisabled, color: "primary-base", onClick: this.handleNextMonth }))), index.h("span", { key: 'fac87075df8335c9ad1464a5dc6caebfbd79cf38', class: "days-of-week" }, this.fetchWeekDays().map(this.renderItemWeekDays)), index.h("div", { key: 'e3d08f781cb7765f2c74e88ebd040d8dd28e7e9f', 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.isLoading && (index.h("div", { key: '91af6d390271d126ad380f26a2018e5e06c0f762', class: "loading-container" }, index.h("cura-loader-circle", { key: '032105471ed76a221fbbc50eac62d52250328d57', color: "primary", size: "large" }), index.h("slot", { key: '2cb6ce4b2cffc2d4ec704f4ba8fb746d59c1b0a0', name: "loadingMessage" }))))));
+            : 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": [{
@@ -7470,9 +7467,6 @@ const CuraCalendar = class {
         "customDates": [{
                 "watchDefaultDatesArray": 0
             }],
-        "currentDate": [{
-                "watchDatesInViewChange": 0
-            }],
         "collapsed": [{
                 "watchCollapse": 0
             }]
@@ -7552,44 +7546,6 @@ const CuraCard = class {
 };
 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) => {
@@ -7613,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();
     }
@@ -7715,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);
         };
@@ -7747,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;
@@ -7828,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;
@@ -8156,7 +8112,7 @@ const CuraHeading = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (index.h(index.Host, { key: 'e28268e7d797af495f6accb8536e88ac49ef608f', 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); }
 };
@@ -11952,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)
@@ -12332,7 +12288,7 @@ const CuraLabel = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '720f13cf286fb7f938e46c6f0a968c4e0f109d50', style: this.hostCSSProperties() }, index.h("p", { key: '0ff31e9b99761b045b24ed8042b27e47b186bf48', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '0986ae8c63cc44b4656f403556c48a7ca6410073' }))));
+        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 {
@@ -12375,7 +12331,7 @@ const CuraLoaderCircle = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'c4615da9001f98d1b9e3663cc3be35d2171730e1', style: this.getStyles(), role: "progressbar" }, index.h("svg", { key: '9c37222a3fe0da848f113ad6d8c75e9b2a0cc9cc', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'f4a18be935decddbe888d70a37b1433044e05fb0' }, index.h("circle", { key: 'd681798065754082c40a289af01d0d68fc41dca4', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), index.h("path", { key: '3f0bba399b4fad8870467ef82bbc73bd18a2e9de', 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: '7e74e8efbd8fd28de95b40c856462e1c1dbefec1' }, index.h("linearGradient", { key: 'd8f4d5a79e13f25a72b73219d9398df4dbc1635c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: '38d78b4fe60768fd5987cb44bbbcd76bdb82b7c4' }), index.h("stop", { key: 'ea7961e56c62437260bf7e0e8270073d1dd5bbe4', 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();
@@ -12470,7 +12426,7 @@ const CuraParagraph = class {
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: '411b5363e280ac45fdd05b52beb4d778f9a65f81', style: this.hostCSSProperties() }, index.h("p", { key: '4dcf7ab9518dfe6baea24e5ecf340074d5cc0531', style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'cfbd348562f33ef233cda512d596844f49bf3453' }))));
+        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); }
 };
@@ -14555,10 +14511,10 @@ const CuraSelect = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '13d03dc2dae8a2aea0a40a9f3f8cff4f8dd5e2f7', 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: '70d1e6e1e196d9955e29705e7859e60e25116321', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: '17a8be580d7e66295756dd0d4c50023315ade905', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: '5d3e76ce07f6214eb9925e2b1bdd1a8ea0d59e43', class: "required" }, "* "))), index.h("div", { key: '57da69c886f2f94bc9311ba987a697f3caff7bbf', 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: '783caf1d2e7e55d1e50ce870ed62ee358b63d2c5', 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: '626d2a26a771babd5353bba45448a5410c4886e3', class: "up-down-button" }, index.h("cura-icon", { key: 'e331e0dde7ece240f8f80768150679262bb88ab6', 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: '458647bd83c8e8a0d68f49f2b08b7f61bed7e5af', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: '7ef8488495f4e03694bc65930aad0fa6caa8b51f' })), this.isOpen && (index.h("div", { key: '2ba839bf8b7d85ffd7be60f1575fe94f3057155a', 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,
@@ -14571,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: '8cb789b3f8cf850a6965ed7be11264a654f26c60', name: "option" }))))));
+            } }, index.h("slot", { key: '399d62fd686ed4c0a0729d336a3502b53918e371', name: "option" }))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -14625,7 +14581,7 @@ const CuraSelectOption = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1959cfad9e9f91de0a6614517e0a696ff832a8b4', slot: "option", role: "option", "aria-selected": this.selected }, index.h("div", { key: 'f22474011fa2a0def2d272477bbb6ba3c7c5dd59', class: this.getClasses(), style: this.styles }, index.h("cura-label", { key: 'a1236553e347a88c478e50cea6809c54ced8f55d', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, index.h("slot", { key: '3655ebfdd77515ddd8f8dcb6aa736b0dfcca4802' })), this.selected && index.h("cura-icon", { key: 'cc0051639d6878aaeff7c8eb4a2a15a9c73276da', 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 {
@@ -14725,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: 'fc0a87968ffd898bd8fc7b287eca4c43183d5b22', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, index.h("button", { key: '00fe656ab46b7f57dae2a7a1dead6a55759ec729', 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: 'c291da87ab7e8beda3c547570a80914bba5e5836', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, index.h("slot", { key: '7233f8f990b33a841e815746f0c18fad27b907f1' })))));
+        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": [{
@@ -14764,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: '19ab029f51ded1870e7a59518c57cd4270241ac9', role: "tablist", style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'eda90f855125cfdee50efdb11ffd05ec83e7cfe0' })));
+        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-display.cjs.entry.js

@@ -86,7 +86,7 @@ const CuraDisplay = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (index.h(index.Host, { key: '343caf7e121561a5339ea553ccadb8aeed553c37', 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-input-textarea.cjs.entry.js

@@ -0,0 +1,236 @@
+'use strict';
+
+var index = require('./index-BLhmsPd0.js');
+var utils = require('./utils-DMHZ2n4p.js');
+require('./theme-legacy-default-COE-hjD7.js');
+require('./static-DHz-FA_O.js');
+
+const curaInputTextareaCss = () => `:host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-textarea-group{width:100%;font-family:var(--font-family);text-align:left !important}.cura-textarea-group .helper-max-wrapper{display:flex;justify-content:space-between;align-items:center}.cura-textarea-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-textarea-group .max-length{display:flex}.cura-textarea-group cura-label{margin-bottom:8px}.cura-textarea-group .cura-textarea-field{width:100%;height:64px;display:flex;flex-direction:row;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-textarea-group .cura-textarea-field textarea{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:16px 16px 0px 8px;min-height:64px;resize:vertical}.cura-textarea-group .cura-textarea-field textarea:not(.resizable){resize:none}.cura-textarea-group .cura-textarea-field textarea::placeholder{color:var(--neutral-dark)}.cura-textarea-group .cura-textarea-field .feedback-icon{padding-left:16px;padding-top:16px}.cura-textarea-group .cura-textarea-field cura-loader-circle{margin:0px 12px}.cura-textarea-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly) .cura-textarea-field{border-color:var(--neutral-dark)}.cura-textarea-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly) .cura-textarea-field textarea{color:var(--neutral-dark)}.cura-textarea-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly) .cura-textarea-field textarea::placeholder{color:var(--neutral-dark)}.cura-textarea-group:focus-within .cura-textarea-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.cura-textarea-group:focus-within .cura-textarea-field textarea{color:var(--neutral-black) !important}.cura-textarea-group.success .cura-textarea-field{border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-textarea-group.success .cura-textarea-field textarea{color:var(--success-darker) !important}.cura-textarea-group.success .cura-textarea-field textarea::placeholder{color:var(--success-darker) !important}.cura-textarea-group.error .cura-textarea-field{border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-textarea-group.error .cura-textarea-field textarea{color:var(--error-darker) !important}.cura-textarea-group.error .cura-textarea-field textarea::placeholder{color:var(--error-darker) !important}.cura-textarea-group.isLoading{cursor:wait}.cura-textarea-group.isLoading .cura-textarea-field{background-color:var(--neutral-white) !important;border:2px solid var(--primary-base) !important}.cura-textarea-group.isLoading .cura-textarea-field textarea{cursor:wait;color:var(--primary-base) !important}.cura-textarea-group.isLoading .cura-textarea-field textarea::placeholder{color:var(--primary-base) !important}.cura-textarea-group.disabled .cura-textarea-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-textarea-group.disabled .cura-textarea-field textarea{color:var(--neutral-medium)}.cura-textarea-group.disabled .cura-textarea-field textarea::placeholder{color:var(--neutral-medium)}.cura-textarea-group.readOnly[read-only] .cura-textarea-field{cursor:default}.cura-textarea-group.readOnly[read-only] .cura-textarea-field textarea{cursor:default}.cura-textarea-group.small .cura-textarea-field{height:64px}.cura-textarea-group.small .cura-textarea-field textarea{font-size:12px;line-height:13px;letter-spacing:0.72px;min-height:64px}.cura-textarea-group.small .helper-text{font-weight:var(--font-weight-regular)}.cura-textarea-group.medium .cura-textarea-field{height:64px}.cura-textarea-group.medium .cura-textarea-field textarea{font-size:14px;line-height:16px;letter-spacing:0.56px;min-height:64px}.cura-textarea-group.medium .helper-text{font-weight:var(--font-weight-regular)}.cura-textarea-group.large .cura-textarea-field{height:64px}.cura-textarea-group.large .cura-textarea-field textarea{font-size:16px;min-height:64px}.cura-textarea-group.large .helper-text{font-weight:var(--font-weight-bold)}`;
+
+const CuraInputTextArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.inputClear = index.createEvent(this, "inputClear");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /**
+         * Indicates input status (default: 'default')
+         */
+        this.status = 'default';
+        /**
+         * Size of the textarea: 'small', 'medium', or 'large' (default: 'medium')
+         */
+        this.size = 'medium';
+        /**
+         * Label text for the textarea
+         */
+        this.label = '';
+        /**
+         * Name for the textarea
+         */
+        this.name = '';
+        /**
+         * Placeholder text
+         */
+        this.placeholder = null;
+        /**
+         * Initial value of the textarea
+         */
+        this.value = '';
+        /**
+         * Cura icon name to display
+         */
+        this.iconName = '';
+        /**
+         * Whether the textarea is disabled (default: false)
+         */
+        this.disabled = false;
+        /**
+         * Whether the textarea is required (default: false)
+         */
+        this.required = false;
+        /**
+         * Whether the textarea is read-only (default: false)
+         */
+        this.readOnly = false;
+        /**
+         * Whether the textarea is resizable (default: true)
+         */
+        this.resizable = true;
+        /**
+         * Whether the textarea is in loading state (default: false)
+         */
+        this.isLoading = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.currentValue = '';
+        this.fieldStyles = { height: 'auto' };
+        /**
+         * Removes the alertCircle icon when necessary (as used in CuraDropdownSearch)
+         */
+        this.hideErrorIcon = false;
+        /**
+         * Whether the textarea should have autocomplete
+         */
+        this.autocomplete = 'on';
+        this.styles = {};
+    }
+    async setFocus() {
+        const timeoutMs = utils.checkMobile() && utils.checkIOS() ? 1000 : 200;
+        let fakeInput = utils.fakeInputIOSHack(this.host);
+        setTimeout(() => {
+            this.inputRef.focus();
+            if (fakeInput)
+                fakeInput.remove();
+        }, timeoutMs);
+    }
+    formStateRestoreCallback(state) {
+        this.currentValue = state.value;
+        this.internals.setFormValue(this.currentValue);
+    }
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    formResetCallback() {
+        this.handleClearInput();
+        this.internals.setValidity({});
+        this.internals.setFormValue('');
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    connectedCallback() {
+        this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);
+        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+        this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+        this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+        this.styles['--neutral-medium'] = window.CuraAPI.theme.colors.getColor(`neutral-medium`);
+        this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+        this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+        this.styles['--success-dark'] = window.CuraAPI.theme.colors.getColor(`success-dark`);
+        this.styles['--success-darker'] = window.CuraAPI.theme.colors.getColor(`success-darker`);
+        this.styles['--success-lighter'] = window.CuraAPI.theme.colors.getColor(`success-lighter`);
+        this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor(`error-lighter`);
+        this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor(`error-dark`);
+        this.styles['--error-darker'] = window.CuraAPI.theme.colors.getColor(`error-darker`);
+        this.styles['--error-base'] = window.CuraAPI.theme.colors.getColor(`error-base`);
+        this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor(`info-base`);
+        this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+        this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+        this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.breakpoints = window.CuraAPI.theme.breakpoints.get();
+        this.styles['--font-weight-medium'] = this.weights.medium;
+        this.styles['--font-weight-bold'] = this.weights.bold;
+        this.styles['--font-weight-regular'] = this.weights.regular;
+    }
+    componentWillLoad() {
+        this.currentValue = this.value;
+    }
+    getClasses() {
+        return {
+            [this.size.toLowerCase()]: true,
+            disabled: !!this.disabled,
+            isLoading: !!this.isLoading,
+            isFocused: this.isFocused && !this.disabled && !this.readOnly && !this.isLoading,
+            isHovered: this.isHovered,
+            [this.status]: true,
+            resizable: !!this.resizable,
+        };
+    }
+    getLabelColor() {
+        if (!!this.disabled) {
+            return 'neutral-medium';
+        }
+        else if (((this.isFocused || this.isHovered || this.status === 'success' || this.status === 'error') && !this.readOnly) || this.isHovered) {
+            return 'neutral-black';
+        }
+        else {
+            return 'neutral-dark';
+        }
+    }
+    renderIcon() {
+        if (this.iconName === '' && this.status === 'default') {
+            return;
+        }
+        if (this.status === 'error' && this.hideErrorIcon) {
+            return;
+        }
+        const baseIconSize = this.size === 'large' ? 20 : 16;
+        const iconMap = {
+            loading: { name: this.iconName, color: 'primary-base' },
+            success: { name: 'checkCircle', color: 'success-dark' },
+            error: { name: 'alertCircle', color: 'error-dark' },
+            default: { name: this.iconName, color: 'neutral-dark' },
+            disabled: { name: this.iconName, color: 'neutral-medium' },
+        };
+        const iconConfig = iconMap[this.isLoading ? 'loading' : this.disabled ? 'disabled' : this.status || 'default'];
+        return (index.h("div", { class: "feedback-icon", style: this.styles }, index.h("cura-icon", { name: iconConfig.name, iconset: "default", size: baseIconSize, color: iconConfig.color })));
+    }
+    renderHelperText() {
+        const isError = this.status === 'error';
+        const isSuccess = this.status === 'success';
+        const isDefault = this.status === 'default';
+        const helperTextSize = this.size === 'large' ? 'small' : 'xsmall';
+        const colorText = (() => {
+            if (this.disabled)
+                return 'neutral-medium';
+            if (this.isLoading)
+                return 'primary-base';
+            if (this.isFocused || this.isHovered)
+                return 'neutral-black';
+            return 'neutral-dark';
+        })();
+        return (index.h("div", { style: this.styles, class: "helper-text", part: "cura-input-text-helper" }, isDefault && (index.h("cura-label", { size: helperTextSize, color: colorText }, index.h("slot", null))), isError && (index.h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "error-dark" }, index.h("slot", null))), isSuccess && (index.h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "success-dark" }, index.h("slot", null)))));
+    }
+    renderMaxLength() {
+        var _a;
+        if (!this.maxlength)
+            return null;
+        return (index.h("div", { class: "max-length" }, index.h("cura-label", { size: "xsmall", weight: 'bold', color: "neutral-dark" }, `${((_a = this.currentValue) === null || _a === void 0 ? void 0 : _a.toString().length) || 0}`), index.h("cura-label", { size: "xsmall", weight: 'bold', color: "neutral-darker" }, `/${this.maxlength}`)));
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    handleClearInput() {
+        this.currentValue = '';
+        this.inputRef.value = '';
+        this.valueChange.emit(this.currentValue);
+        this.inputClear.emit(this.currentValue);
+        this.setFocus();
+    }
+    handleInputFocus() {
+        this.isFocused = true;
+    }
+    handleInputBlur() {
+        setTimeout(() => {
+            this.isFocused = false;
+        }, 150);
+    }
+    handleInputChange(event) {
+        const inputValue = event.target.value;
+        this.valueChange.emit(inputValue);
+        this.handleTextInputChange(inputValue);
+        this.internals.setFormValue(this.currentValue);
+    }
+    handleTextInputChange(inputValue) {
+        this.currentValue = inputValue;
+    }
+    render() {
+        return (index.h(index.Host, { key: '05f1a1a3b51e4bb1bc54cab3c8d5b6062a95d32a', role: "textbox", "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, index.h("div", { key: '47eb10b6f3c3e697ae1558fd53d4d9cb9a2b6065', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-textarea-group': true }, this.getClasses()) }, index.h("div", { key: 'c090b7b2eb353dbe929810c4835f49860bfe9c80', class: "input-wrapper" }, this.label && (index.h("cura-label", { key: 'a957db2fb6e2779d3c33f7504124cff353e41c2c', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && index.h("span", { key: '1928a3597976bd5b1f4076c49dae803a69139cb5', class: "required" }, "* "))), index.h("div", { key: '58c1cab70c203e9ca106ddec09d606943814b65c', class: "cura-textarea-field", part: "cura-textarea-field", style: this.fieldStyles }, this.renderIcon(), index.h("textarea", { key: 'd6a59a727dfc5a8655ea496111dd46718101b0be', name: this.name ? this.name : '', onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.currentValue !== undefined && this.currentValue !== null ? this.currentValue : '', autocomplete: this.autocomplete }), this.isLoading && index.h("cura-loader-circle", { key: '0476538f94ba6ffc0dc89b4bd125c048f420d415', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), index.h("div", { key: '84b14a2904cfa97adc766bd65cbbf48cb390d6c6', class: "helper-max-wrapper" }, this.renderHelperText(), " ", this.renderMaxLength())))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return index.getElement(this); }
+};
+CuraInputTextArea.style = curaInputTextareaCss();
+
+exports.cura_input_textarea = CuraInputTextArea;

package/dist/cjs/cura-loader-bar.cjs.entry.js

@@ -23,7 +23,7 @@ const CuraLoaderBar = class {
         this.setProgress();
     }
     render() {
-        return (index.h(index.Host, { key: 'dd27615093a7ab333175afb1e48bbe5455d7406b', role: "progressbar", "aria-valuenow": this.progress, "aria-valuemin": 0, "aria-valuemax": 100 }, index.h("div", { key: 'c3c76b76826c558769d43e441d9e0c573fb7eb7b', id: "progress-bar", class: "progress-bar", style: this.styles }, index.h("span", { key: '0e8e361bdf63e558fa34cca67c3446b1147c2643', class: "progress-bar-fill" }))));
+        return (index.h(index.Host, { key: '1cad7226bfde87284c61f4786c3bccf66f967d40', role: "progressbar", "aria-valuenow": this.progress, "aria-valuemin": 0, "aria-valuemax": 100 }, index.h("div", { key: '59320656c2a679ff5600ef803fa215f1ed5d218d', id: "progress-bar", class: "progress-bar", style: this.styles }, index.h("span", { key: '6d66523c36dfaece1e9d7a3d60c8fbf7dbef5efa', 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) });

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

@@ -190,7 +190,7 @@ const CuraRadio = class {
         return statusColors[this.status][type];
     }
     render() {
-        return (index.h(index.Host, { key: '3b4001cf9d095153254069f9865d865f8570c74f', role: "radio", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, index.h("div", { key: '2a60ebf8f84ab618580b924bf1a2ce9acf70ed81', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: 'b1bf673d26f9651696fe5e705f4978eda14e25f6', class: "info" }, index.h("div", { key: '3f0cb6742da331c137c62b647a713781b57d25b2', class: "label-wrapper" }, index.h("cura-label", { key: 'a4bcd0b9b9265db0c7c13a47924ba6b253b01f25', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (index.h("cura-paragraph", { key: '821198baf60494203af757451e892a79afde3e2b', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), index.h("cura-label", { key: '8859c2fd4e77342b1884283977b109c714fc32e6', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: '313feac58eee6ee2d2b3656d0fb971be7fc43481' }))), index.h("input", { key: 'f9bd494bbe59443d7bacf31dafb2f516591ad596', 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 }))));
+        return (index.h(index.Host, { key: '7db2e7898ed5509b27a22a5ef06d580b6bfe58bc', role: "radio", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, index.h("div", { key: 'a48dbced2eb1be2ff162282b40b767ed90d35470', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: 'd332710c196dff35ab6cbcdd780d7bf89ad101ac', class: "info" }, index.h("div", { key: '651604209885f847e02af4a11fbd4cd9f42719e2', class: "label-wrapper" }, index.h("cura-label", { key: '13db1f1fe2dfb79cedce79ddb0cc2af9b04db77f', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (index.h("cura-paragraph", { key: '9cd6e5aaaa8007c766730b26b667a4e1f14a9324', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), index.h("cura-label", { key: '8e4c761b331bea1d1247d5827ead8e42f04ac2c0', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: 'bc8c9b14e175dae86a94e21e110afcf74e8faf49' }))), index.h("input", { key: '26a944b0af74465d83a9bd05c181924b9cfb1c38', 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 }))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

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

@@ -153,7 +153,7 @@ const CuraSwitch = class {
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: '73c935718e0bd39d49581d81de82f3d8dfbecf39', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, index.h("div", { key: 'f2d813e2c863fd869c1ea48f20155a30f7e9b5bd', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, index.h("div", { key: 'de3b927a6ff4f599c527a370b954872990ef3632', class: "info" }, index.h("cura-label", { key: '71729b9f502baf0de6dba5b0d9592c28a420f41d', textOverflow: this.overflowLabel, 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), index.h("cura-label", { key: '54cc521cadd2d09cae1c5356858f20c5a18d3cf8', textOverflow: this.overflowHelper, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, index.h("slot", { key: '57d9dbd78f8e5b30677ecca1c6ba83946b459d28' }))), index.h("div", { key: '03d28fd476865d02010fcf7cd5820f9e50b09015', class: "control" }, index.h("div", { key: '5fc59727c27271cba5f63651373e1e99deb4f5b7', class: `track ${this.size.toLowerCase()}` }, index.h("div", { key: 'cae9983998d99333e85e0da6a66c24d79f79e591', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (index.h(index.Host, { key: '55eb7eb4da5cc3eaa376c3a188f1f4580b4d3be8', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, index.h("div", { key: '2c2e8f59747f6b12e6e9b528007e9e585fc2bb6e', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, index.h("div", { key: '6e3ba0c77facb521f15cc7cdf75adb0ec7a64985', class: "info" }, index.h("cura-label", { key: '6ecc8ca37c3e4078b35f063f935ffa802ed11c0a', textOverflow: this.overflowLabel, 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), index.h("cura-label", { key: 'eea722ec56d3293259d938089972a71b2b0806df', textOverflow: this.overflowHelper, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, index.h("slot", { key: 'ce171b19a68fa581279cef2e8b4d6818b84e59c9' }))), index.h("div", { key: '73088b5709884f1d338680a4148f5b4dce33d09c', class: "control" }, index.h("div", { key: 'e61c81796ef55a901423fa8b050a22c856c7fc26', class: `track ${this.size.toLowerCase()}` }, index.h("div", { key: 'd8b302df2b06fc043dc0629a87e2fde46616b406', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {