@siemens/ix 3.0.0-alpha.3 → 3.0.0-alpha.4

package/hydrate/index.mjs

@@ -154,7 +154,7 @@ async function appGlobalScript (config) {
 const globalScripts = appGlobalScript;
 
 /*
- Stencil Hydrate Platform v4.28.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.29.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -165,6 +165,30 @@ var __export = (target, all) => {
 // src/utils/constants.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
+var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
+  PrimitiveType2["Undefined"] = "undefined";
+  PrimitiveType2["Null"] = "null";
+  PrimitiveType2["String"] = "string";
+  PrimitiveType2["Number"] = "number";
+  PrimitiveType2["SpecialNumber"] = "number";
+  PrimitiveType2["Boolean"] = "boolean";
+  PrimitiveType2["BigInt"] = "bigint";
+  return PrimitiveType2;
+})(PrimitiveType || {});
+var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
+  NonPrimitiveType2["Array"] = "array";
+  NonPrimitiveType2["Date"] = "date";
+  NonPrimitiveType2["Map"] = "map";
+  NonPrimitiveType2["Object"] = "object";
+  NonPrimitiveType2["RegularExpression"] = "regexp";
+  NonPrimitiveType2["Set"] = "set";
+  NonPrimitiveType2["Channel"] = "channel";
+  NonPrimitiveType2["Symbol"] = "symbol";
+  return NonPrimitiveType2;
+})(NonPrimitiveType || {});
+var TYPE_CONSTANT = "type";
+var VALUE_CONSTANT = "value";
+var SERIALIZED_PREFIX = "serialized:";
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -181,6 +205,101 @@ var escapeRegExpSpecialCharacters = (text) => {
   return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
 
+// src/utils/remote-value.ts
+var RemoteValue = class _RemoteValue {
+  /**
+   * Deserializes a LocalValue serialized object back to its original JavaScript representation
+   *
+   * @param serialized The serialized LocalValue object
+   * @returns The original JavaScript value/object
+   */
+  static fromLocalValue(serialized) {
+    const type = serialized[TYPE_CONSTANT];
+    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
+    switch (type) {
+      case "string" /* String */:
+        return value;
+      case "boolean" /* Boolean */:
+        return value;
+      case "bigint" /* BigInt */:
+        return BigInt(value);
+      case "undefined" /* Undefined */:
+        return void 0;
+      case "null" /* Null */:
+        return null;
+      case "number" /* Number */:
+        if (value === "NaN") return NaN;
+        if (value === "-0") return -0;
+        if (value === "Infinity") return Infinity;
+        if (value === "-Infinity") return -Infinity;
+        return value;
+      case "array" /* Array */:
+        return value.map((item) => _RemoteValue.fromLocalValue(item));
+      case "date" /* Date */:
+        return new Date(value);
+      case "map" /* Map */:
+        const map2 = /* @__PURE__ */ new Map();
+        for (const [key, val] of value) {
+          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
+          const deserializedValue = _RemoteValue.fromLocalValue(val);
+          map2.set(deserializedKey, deserializedValue);
+        }
+        return map2;
+      case "object" /* Object */:
+        const obj = {};
+        for (const [key, val] of value) {
+          obj[key] = _RemoteValue.fromLocalValue(val);
+        }
+        return obj;
+      case "regexp" /* RegularExpression */:
+        const { pattern, flags } = value;
+        return new RegExp(pattern, flags);
+      case "set" /* Set */:
+        const set = /* @__PURE__ */ new Set();
+        for (const item of value) {
+          set.add(_RemoteValue.fromLocalValue(item));
+        }
+        return set;
+      case "symbol" /* Symbol */:
+        return Symbol(value);
+      default:
+        throw new Error(`Unsupported type: ${type}`);
+    }
+  }
+  /**
+   * Utility method to deserialize multiple LocalValues at once
+   *
+   * @param serializedValues Array of serialized LocalValue objects
+   * @returns Array of deserialized JavaScript values
+   */
+  static fromLocalValueArray(serializedValues) {
+    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
+  }
+  /**
+   * Verifies if the given object matches the structure of a serialized LocalValue
+   *
+   * @param obj Object to verify
+   * @returns boolean indicating if the object has LocalValue structure
+   */
+  static isLocalValueObject(obj) {
+    if (typeof obj !== "object" || obj === null) {
+      return false;
+    }
+    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
+      return false;
+    }
+    const type = obj[TYPE_CONSTANT];
+    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
+    if (!hasTypeProperty) {
+      return false;
+    }
+    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
+      return obj.hasOwnProperty(VALUE_CONSTANT);
+    }
+    return true;
+  }
+};
+
 // src/utils/result.ts
 var result_exports = {};
 __export(result_exports, {
@@ -230,6 +349,14 @@ var unwrapErr = (result) => {
   }
 };
 
+// src/utils/serialize.ts
+function deserializeProperty(value) {
+  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
+    return value;
+  }
+  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+}
+
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
 var ORG_LOCATION_ID = "o";
@@ -511,6 +638,7 @@ var convertToPrivate = (node) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+  var _a;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -519,6 +647,19 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
+  const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
+  members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
+    var _a2;
+    if (!(memberFlags & 31 /* Prop */)) {
+      return;
+    }
+    const attributeName = metaAttributeName || memberName;
+    const attrVal = hostElm.getAttribute(attributeName);
+    if (attrVal !== null) {
+      const attrPropVal = parsePropertyValue(attrVal, memberFlags);
+      (_a2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a2.set(memberName, attrPropVal);
+    }
+  });
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
     initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
@@ -1228,12 +1369,23 @@ var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
   return cssText;
 };
 var parsePropertyValue = (propValue, propType) => {
+  if (typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
+    try {
+      propValue = JSON.parse(propValue);
+      return propValue;
+    } catch (e) {
+    }
+  }
+  if (typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
+    propValue = deserializeProperty(propValue);
+    return propValue;
+  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
       return propValue === "false" ? false : propValue === "" || !!propValue;
     }
     if (propType & 2 /* Number */) {
-      return parseFloat(propValue);
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
     }
     if (propType & 1 /* String */) {
       return String(propValue);
@@ -1865,7 +2017,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const isHostElement = isHost(renderFnResults);
+  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
@@ -2600,21 +2753,15 @@ function proxyHostElement(elm, cstr) {
       var _a;
       if (memberFlags & 31 /* Prop */) {
         const attributeName = metaAttributeName || memberName;
-        let attrValue = elm.getAttribute(attributeName);
-        if ((attrValue == null ? void 0 : attrValue.startsWith("{")) && attrValue.endsWith("}") || (attrValue == null ? void 0 : attrValue.startsWith("[")) && attrValue.endsWith("]")) {
-          try {
-            attrValue = JSON.parse(attrValue);
-          } catch (e) {
-          }
-        }
-        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
+        const attrValue = elm.getAttribute(attributeName);
+        const propValue = elm[memberName];
         let attrPropVal;
+        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
         if (attrValue != null) {
           attrPropVal = parsePropertyValue(attrValue, memberFlags);
         }
-        const ownValue = elm[memberName];
-        if (ownValue !== void 0) {
-          attrPropVal = ownValue;
+        if (propValue !== void 0) {
+          attrPropVal = propValue;
           delete elm[memberName];
         }
         if (attrPropVal !== void 0) {
@@ -3651,7 +3798,7 @@ class Application {
             "themeSystemAppearance": [4, "theme-system-appearance"],
             "forceBreakpoint": [1, "force-breakpoint"],
             "breakpoints": [16],
-            "appSwitchConfig": [16],
+            "appSwitchConfig": [16, "app-switch-config"],
             "breakpoint": [32],
             "applicationSidebarSlotted": [32]
         },
@@ -6044,7 +6191,7 @@ class Breadcrumb {
         "$tagName$": "ix-breadcrumb",
         "$members$": {
             "visibleItemCount": [2, "visible-item-count"],
-            "nextItems": [16],
+            "nextItems": [16, "next-items"],
             "ghost": [4],
             "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
             "items": [32],
@@ -7200,10 +7347,10 @@ class CategoryFilter {
         "$members$": {
             "disabled": [4],
             "readonly": [4],
-            "filterState": [16],
+            "filterState": [16, "filter-state"],
             "placeholder": [1],
             "categories": [16],
-            "nonSelectableCategories": [16],
+            "nonSelectableCategories": [16, "non-selectable-categories"],
             "suggestions": [16],
             "icon": [1],
             "hideIcon": [4, "hide-icon"],
@@ -15979,7 +16126,7 @@ class DateDropdown {
             "loading": [4],
             "showWeekNumbers": [4, "show-week-numbers"],
             "customRangeAllowed": [4, "custom-range-allowed"],
-            "dateRangeOptions": [16],
+            "dateRangeOptions": [16, "date-range-options"],
             "locale": [1],
             "weekStartIndex": [2, "week-start-index"],
             "i18nCustomItem": [1, "i18n-custom-item"],
@@ -16831,23 +16978,25 @@ class DatePicker {
         this.calendar = [];
     }
     watchFromPropHandler(newValue) {
-        var _a;
-        this.currFromDate = newValue
-            ? DateTime.fromFormat(newValue, this.format)
-            : undefined;
-        if ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.isValid) {
-            this.selectedYear = this.currFromDate.year;
-            this.selectedMonth = this.currFromDate.month - 1;
+        if (!newValue) {
+            this.currFromDate = undefined;
+            return;
+        }
+        const date = this.parseDateString(newValue);
+        if (date) {
+            this.currFromDate = date;
+            this.updateSelectedYearMonth(date);
         }
     }
     watchToPropHandler(newValue) {
-        var _a;
-        this.currToDate = newValue
-            ? DateTime.fromFormat(newValue, this.format)
-            : undefined;
-        if ((_a = this.currToDate) === null || _a === void 0 ? void 0 : _a.isValid) {
-            this.selectedYear = this.currToDate.year;
-            this.selectedMonth = this.currToDate.month - 1;
+        if (!newValue) {
+            this.currToDate = undefined;
+            return;
+        }
+        const date = this.parseDateString(newValue);
+        if (date) {
+            this.currToDate = date;
+            this.updateSelectedYearMonth(date);
         }
     }
     onLocaleChange() {
@@ -16914,6 +17063,18 @@ class DatePicker {
     getDateTimeNow() {
         return DateTime.fromISO(this.today);
     }
+    parseDateString(dateString) {
+        const date = DateTime.fromFormat(dateString, this.format);
+        if (!date.isValid) {
+            console.error(date.invalidExplanation);
+            return undefined;
+        }
+        return date;
+    }
+    updateSelectedYearMonth(date) {
+        this.selectedYear = date.year;
+        this.selectedMonth = date.month - 1;
+    }
     onDayBlur() {
         this.isDayFocus = false;
     }
@@ -17213,7 +17374,7 @@ class DatePicker {
         return rows;
     }
     render() {
-        return (hAsync(Host, { key: 'c572010198012b0665e0741ac6f2f280c22096f0' }, hAsync("ix-date-time-card", { key: '857ff058a49313ba01f69eb0403b2a32b9864b86', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, hAsync("div", { key: '83368f09237939c0cc2d2ce7b4620f90615f8c57', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: '89e152476b95ea3770dfb77ad6948a9250b0a1fa', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: iconChevronLeftSmall, variant: "primary", class: "arrows" }), hAsync("div", { key: '1a2ddbb791a05051745849b6b33da90a1ed6d53a', class: "selector" }, hAsync("ix-button", { key: '928e85ca6c02ccf0047b08101cfbb0a1d2a17fb6', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: 'e723fa8c27d59c125f797b0adf36b07c0ead0a33', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: '3242fad1cd893de2b7c58cac2777eb71f3815f37', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: '72e107ef50026706d25e8a6291d791dac3288e2b', class: "wrapper" }, hAsync("div", { key: '962ea0d6c91bab3f9b6c86792d0d59687b30fbf4', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: 'c1902b23595de8fe97cc8dbcde44da5dea65b5d9', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
+        return (hAsync(Host, { key: 'f7b223037b3b66698a530012ed0fcbf9ec849372' }, hAsync("ix-date-time-card", { key: '375131f5ba5126d2d95b46bbf605e29844b38b85', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, hAsync("div", { key: '5065a58f901b2f392bb1c6e6e4188ca08cae19c7', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: 'f4f7e444c0e54c879ec72cbac9b9afabb962932e', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: iconChevronLeftSmall, variant: "primary", class: "arrows" }), hAsync("div", { key: '1cdb318edbb57e01efc62263bdfd635c0120a0e5', class: "selector" }, hAsync("ix-button", { key: 'c27b5dcea81095b286bd6f47ceb5bc854773c2dd', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: '2d04c84e1fb480a3053e4488cb3ecb990d7bb438', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: 'ee3dd29d87bb29b80ddaa1bb3869b51827443600', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: '23fcd9fb8e577bf09bf2806752da187350f2e49a', class: "wrapper" }, hAsync("div", { key: '05a811bfaa72104f21c144ec15e7da6fe72d9748', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: '14d433a2412bfbfe0e20020385363916f8ae4a44', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
                     this.firstMonthRef(ref);
                 }
@@ -17227,10 +17388,10 @@ class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: 'd39bbbc40e27105d7f5575f95e17d777b2fc905a', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: iconChevronRightSmall, variant: "primary", class: "arrows" })), hAsync("div", { key: '8ce294f4edfc8578be98290467610d79ef8c1b78', class: {
+            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: '867520bbab18fb88c1307bf9b353378c57c9f7b6', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: iconChevronRightSmall, variant: "primary", class: "arrows" })), hAsync("div", { key: '6e957e15a0884f0d614cc1bcf0becacebacc1171', class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, this.showWeekNumbers && hAsync("div", { key: '0027a35f4c3841e57ed6ce0571183150b8b85e65', class: "calendar-item week-day" }), this.dayNames.map((name) => (hAsync("div", { key: name, class: "calendar-item week-day" }, hAsync("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
+            } }, this.showWeekNumbers && hAsync("div", { key: 'bf9c1537e6d5f6f129a4c97091627863dd20df8b', class: "calendar-item week-day" }), this.dayNames.map((name) => (hAsync("div", { key: name, class: "calendar-item week-day" }, hAsync("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
             return (hAsync(Fragment, null, this.showWeekNumbers && (hAsync("div", { class: "calendar-item week-number" }, week.weekNumber)), week.dayNumbers.map((day) => {
                 return day ? (hAsync("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
                         const target = e.currentTarget;
@@ -17242,10 +17403,10 @@ class DatePicker {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)) : (hAsync("div", null));
             })));
-        })), hAsync("div", { key: '0c5f2867820eb6d58239a3d6029cb8aba2ddcc3c', class: {
+        })), hAsync("div", { key: 'de56a96b662f67cc23d6e61daaa7800710e80157', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, hAsync("ix-button", { key: 'd2f8f634517f6847490e579c47e2f3ec8aaecc34', onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, hAsync("ix-button", { key: 'e2b2f1ed481321f5092d3e409ca4b3565beecc9f', onClick: () => this.onDone() }, this.i18nDone)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -19967,7 +20128,7 @@ class Dropdown {
             "positioningStrategy": [1, "positioning-strategy"],
             "header": [1],
             "offset": [16],
-            "overwriteDropdownStyle": [16],
+            "overwriteDropdownStyle": [16, "overwrite-dropdown-style"],
             "discoverAllSubmenus": [4, "discover-all-submenus"],
             "ignoreRelatedSubmenu": [4, "ignore-related-submenu"],
             "suppressOverflowBehavior": [4, "suppress-overflow-behavior"],
@@ -20073,7 +20234,7 @@ class DropdownHeader {
     }; }
 }
 
-const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.5rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.5rem;color:var(--theme-color-std-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
+const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.5rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.5rem;color:var(--theme-color-std-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:pre}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
 
 class DropdownItem {
     constructor(hostRef) {
@@ -20248,19 +20409,30 @@ class EventList {
     }
     onMutation(mutationRecords) {
         this.triggerFadeOut().then(() => {
-            if (typeof this.itemHeight === 'number') {
+            if (!Number.isNaN(Number(this.itemHeight))) {
                 const height = convertToRemString(this.itemHeight);
-                mutationRecords
-                    .filter((mutation) => mutation.type === 'childList')
-                    .forEach((mutation) => mutation.addedNodes.forEach((item) => {
-                    const itemHtml = item;
-                    this.setCustomHeight(itemHtml, height);
-                }));
+                const eventListItems = this.findEventListItems(mutationRecords);
+                eventListItems.forEach((item) => this.setCustomHeight(item, height));
             }
             this.handleChevron(this.chevron);
             this.triggerFadeIn();
         });
     }
+    findEventListItems(mutationRecords) {
+        const eventListItems = [];
+        mutationRecords.forEach((mutation) => {
+            if (mutation.type !== 'childList') {
+                return;
+            }
+            mutation.addedNodes.forEach((node) => {
+                const element = node;
+                if (element.tagName === 'IX-EVENT-LIST-ITEM') {
+                    eventListItems.push(element);
+                }
+            });
+        });
+        return eventListItems;
+    }
     setCustomHeight(item, height) {
         item.style.setProperty('--event-list-item-height', height);
     }
@@ -20312,11 +20484,11 @@ class EventList {
         });
     }
     render() {
-        return (hAsync(Host, { key: '1f76181a73b8720c0488893e24fb570d6cab0122', class: {
+        return (hAsync(Host, { key: '98a84af85d5d0a37f5caeec2f7894cda5bc4435c', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, hAsync("div", { key: '16339473f805eee2ca37fe4f8b3bbbfc7eb6dd48', role: "list" }, hAsync("slot", { key: 'c542a35c05eada1c9ed14622108ddf31731977d7' }))));
+            } }, hAsync("div", { key: '7640c1d218f130ab36b0b9f41b5695ffc9c25a87', role: "list" }, hAsync("slot", { key: 'f910dc47a5015d4110325b78279e0b01679fa980' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20613,7 +20785,7 @@ class FieldWrapper {
             "showTextAsTooltip": [4, "show-text-as-tooltip"],
             "required": [4],
             "htmlForLabel": [1, "html-for-label"],
-            "controlRef": [16]
+            "controlRef": [16, "control-ref"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -20934,7 +21106,7 @@ class FormFieldLabel {
         }
     }
     render() {
-        return (hAsync(Host, { key: '4b00ea62a90eae362b7236d82a08f031c075c10d', onClick: () => this.focusOnClick() }, hAsync("label", Object.assign({ key: '1c3e406baa6b6414cacf17961279bcd7ad1545ca', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), hAsync("ix-typography", { key: '54c5e7cbd6c505edbe2c37a20ecbecd91deb441b', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, hAsync("slot", { key: '9638a38954088cff1cd539f1b49ef70778b4ff21' }), this.required && hAsync("span", { key: 'b30063403d1e99121191ce945665781cba7ba34b' }, "\u00A0*")))));
+        return (hAsync(Host, { key: '4b00ea62a90eae362b7236d82a08f031c075c10d', onClick: () => this.focusOnClick() }, hAsync("label", Object.assign({ key: '1c3e406baa6b6414cacf17961279bcd7ad1545ca', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), hAsync("ix-typography", { key: '54c5e7cbd6c505edbe2c37a20ecbecd91deb441b', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, hAsync("slot", { key: '9638a38954088cff1cd539f1b49ef70778b4ff21' }), this.required && hAsync("span", { key: 'b30063403d1e99121191ce945665781cba7ba34b' }, "*")))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20948,7 +21120,7 @@ class FormFieldLabel {
         "$members$": {
             "required": [1540],
             "htmlFor": [513, "html-for"],
-            "controlRef": [16],
+            "controlRef": [16, "control-ref"],
             "isInvalid": [1028, "is-invalid"]
         },
         "$listeners$": undefined,
@@ -21927,6 +22099,12 @@ class IxTypography {
          */
         this.textDecoration = 'none';
     }
+    static getTextColor(color) {
+        if (color.startsWith('inv-') || !color.endsWith('-contrast')) {
+            return `var(--theme-color-${color}-text)`;
+        }
+        return `var(--theme-color-${color.replace('-', '--')})`;
+    }
     render() {
         var _a;
         let typographyClass = {};
@@ -21938,10 +22116,10 @@ class IxTypography {
         let style = {};
         if (this.textColor) {
             style = {
-                color: `var(--theme-color-${this.textColor}-text)`,
+                color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (hAsync(Host, { key: '09495783bef6449f7a5a70f12f5dd4e4886a9e07', class: typographyClass, style: style }, hAsync("slot", { key: '902b34b3839cc4868ad65b61f1398bf93eedec17' })));
+        return (hAsync(Host, { key: '98b5d010c3167750cd167157c45a9305f382c19a', class: typographyClass, style: style }, hAsync("slot", { key: '01586058f3ff1bcd88bdc5044c102dd4b09569d3' })));
     }
     static get style() { return typographyCss; }
     static get cmpMeta() { return {
@@ -24098,7 +24276,7 @@ class Modal {
             "animation": [4],
             "backdrop": [4],
             "closeOnBackdropClick": [4, "close-on-backdrop-click"],
-            "beforeDismiss": [16],
+            "beforeDismiss": [16, "before-dismiss"],
             "centered": [4],
             "closeOnEscape": [4, "close-on-escape"],
             "modalVisible": [32],
@@ -25997,9 +26175,10 @@ class Select {
     updateFormInternalValue(value) {
         if (Array.isArray(value)) {
             this.formInternals.setFormValue(value.join(','));
-            return;
         }
-        this.formInternals.setFormValue(value);
+        else {
+            this.formInternals.setFormValue(value);
+        }
     }
     /** @internal */
     async hasValidValue() {
@@ -26170,14 +26349,13 @@ class Select {
         if (this.isMultipleMode) {
             return;
         }
-        const trimmedInput = this.inputFilterText.trim();
         const itemLabel = el === null || el === void 0 ? void 0 : el.label;
-        const item = this.itemExists(trimmedInput);
+        const item = this.itemExists(this.inputFilterText);
         if (item) {
             this.itemClick(item.value);
         }
         else if (this.editable && !this.itemExists(itemLabel)) {
-            const defaultPrevented = this.emitAddItem(trimmedInput);
+            const defaultPrevented = this.emitAddItem(this.inputFilterText);
             if (defaultPrevented) {
                 return;
             }
@@ -26287,7 +26465,7 @@ class Select {
     }
     filterItemsWithTypeahead() {
         var _a, _b;
-        this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : '';
         if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
             return;
         }
@@ -26396,9 +26574,9 @@ class Select {
     }
     render() {
         var _a, _b, _c, _d;
-        return (hAsync(Host, { key: '55e80c58e958e97655e20cba14b287ca41fe776d', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (hAsync(Host, { key: 'fe5a9d201aa6fa9bae2f5cb24057bf161d545d10', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, hAsync("ix-field-wrapper", { key: '50ed9d3c9b6e70f2e1d684bdac081c2efdd1c773', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: '483a09e87ba81dc50db0d30c9858872af2603ff9', class: {
+            } }, hAsync("ix-field-wrapper", { key: 'c28aa0804523d6a799c055899194a62e05dcd1a5', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: 'fa78c9596e67642237ccf2bf027f3a4450b2cccb', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -26406,13 +26584,13 @@ class Select {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, hAsync("div", { key: '9e18c8c0882aaf5aadc80d259cd91ce1f7f52f82', class: "input-container" }, hAsync("div", { key: '29307561099593acfb45603cebd2136d06ce547b', class: "chips" }, this.isMultipleMode
+            } }, hAsync("div", { key: 'c0e4e52e89640cb3dd31950f4457bbf0209363ac', class: "input-container" }, hAsync("div", { key: '53375714b199123d27fdb57d51102f7d0be912bb', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (hAsync("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', hAsync("div", { key: 'ea337cc33b09f544899a9d3d47764f880c8dfcff', class: "trigger" }, hAsync("input", { key: 'ffeb71a4df620ea1611ecf69eca18015ef148496', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', hAsync("div", { key: '42cac6b1306e7b0339c47857a41685952465280c', class: "trigger" }, hAsync("input", { key: '94fe4f82da75de234fb134fb7792f78cb87d2c37', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -26422,14 +26600,14 @@ class Select {
             }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
             !this.disabled &&
             !this.readonly &&
-            (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? (hAsync("ix-icon-button", { class: "clear", icon: iconClear, ghost: true, oval: true, size: "16", onClick: (e) => {
+            (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? (hAsync("ix-icon-button", { key: "clear", class: "clear", icon: iconClear, ghost: true, oval: true, size: "16", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.clear();
-            } })) : null, this.disabled || this.readonly ? null : (hAsync("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: iconChevronDownSmall, ghost: true, ref: (ref) => {
+            } })) : null, this.disabled || this.readonly ? null : (hAsync("ix-icon-button", { "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: iconChevronDownSmall, ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            } }))))))), hAsync("ix-dropdown", { key: '04161cb0115afc2e60efd249d393a9e81f42fe61', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } }))))))), hAsync("ix-dropdown", { key: '82133f6945c1b7b1f043bdb5a80fbe53e506f8f6', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
@@ -26445,12 +26623,12 @@ class Select {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, hAsync("div", { key: '5a61493471aa83b381f064cfc40df1801784e965', class: {
+            } }, hAsync("div", { key: '6e843696ec1bf3fe827e22e1aeda1cb07bbd51d6', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), hAsync("slot", { key: '26c2660ab8c2ff9d65d5255b1a23e775898d3b7b', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), hAsync("slot", { key: 'c6756d5bb0c13bc88dfd5acd6e5596151c694bcc', onSlotchange: () => {
                 this.updateSelection();
-            } }), hAsync("div", { key: '62f0835c1eb2c3678e22790c030f911b262abf54', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (hAsync("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), hAsync("div", { key: '3dd0a1342c1261899088bb8ca0dadff69e5d2c1a', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (hAsync("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
@@ -29005,16 +29183,24 @@ class Tree {
                         const treeIndex = path.indexOf(this.hostElement);
                         const treePath = path.slice(0, treeIndex);
                         const hasTrigger = dropdownController.pathIncludesTrigger(treePath);
-                        if (event.defaultPrevented) {
-                            return;
-                        }
                         if (hasTrigger) {
                             return;
                         }
-                        Object.values(this.context).forEach((c) => (c.isSelected = false));
-                        const context = this.getContext(item.id);
-                        context.isSelected = true;
-                        this.setContext(item.id, context);
+                        if (!event.defaultPrevented) {
+                            Object.values(this.context).forEach((c) => (c.isSelected = false));
+                            const context = this.getContext(item.id);
+                            context.isSelected = true;
+                            this.setContext(item.id, context);
+                        }
+                        if (this.toggleOnItemClick && item.hasChildren) {
+                            const context = this.getContext(item.id);
+                            context.isExpanded = !context.isExpanded;
+                            this.nodeToggled.emit({
+                                id: item.id,
+                                isExpaned: context.isExpanded,
+                            });
+                            this.setContext(item.id, context);
+                        }
                         this.nodeClicked.emit(item.id);
                     };
                     el.addEventListener('toggle', (event) => {
@@ -29090,6 +29276,11 @@ class Tree {
             this.initList();
         }
     }
+    connectedCallback() {
+        if (this.hasFirstRender) {
+            this.initList();
+        }
+    }
     disconnectedCallback() {
         var _a, _b;
         (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
@@ -29123,7 +29314,7 @@ class Tree {
         this.hyperlist = new VirtualList(this.hostElement, config);
     }
     render() {
-        return (hAsync(Host, { key: 'f07f8e18cb87e576426b1ba321d8d198712db756' }, hAsync("slot", { key: 'c2f1bfa0cb99eeac46d11270d22e949a4d8674c3' })));
+        return (hAsync(Host, { key: '3d9a880f2714c69333145042506d396a3a2828cd' }, hAsync("slot", { key: '7d61c95a13e449305c3a8d33c509eed0389e5abe' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -29136,8 +29327,9 @@ class Tree {
         "$members$": {
             "root": [1],
             "model": [16],
-            "renderItem": [16],
-            "context": [1040]
+            "renderItem": [16, "render-item"],
+            "context": [1040],
+            "toggleOnItemClick": [4, "toggle-on-item-click"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -29161,14 +29353,15 @@ class TreeItem {
         var _a, _b, _c;
         return (hAsync(Host, { key: 'bb6da9e7cfe6133c51d8aa4a6eebfb8e7fdb68b2', class: {
                 selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, hAsync("div", { key: '8c6046145871b5b27731d78150ce8db3a3d5d5ad', class: "icon-toggle-container", onClick: (e) => {
+            } }, hAsync("div", { key: 'fe3053f50feb3a1f00c3bcefb5a1c5c78909b1aa', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRight, size: "16", class: {
+                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}`, onClick: (e) => {
                 e.preventDefault();
+                e.stopPropagation();
                 this.toggle.emit();
-            } }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRight, size: "16", class: {
-                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
-            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), hAsync("div", { key: '54dde9d64be32bcc705ca8503ceb23146e70e7b7', class: "tree-node-container", onClick: () => {
+            } })) : null), hAsync("div", { key: '96bf8b81859c8292195f4418598057c0371259f9', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, hAsync("div", { key: '91747fdc39f9e1207200639d1ef1d0d4cb582947', class: "tree-node-text" }, this.text), hAsync("slot", { key: 'bacce3961714116f77a23657c30437ac719916de' }))));
+            } }, hAsync("div", { key: 'bfd399d7d167978c6e4781fb1394957b48bf85b6', class: "tree-node-text" }, this.text), hAsync("slot", { key: 'df8688241a7fa8ae7046313e779e3937640ccdde' }))));
     }
     static get style() { return treeItemCss; }
     static get cmpMeta() { return {
@@ -29375,9 +29568,9 @@ class Upload {
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), hAsync("div", { key: '9b32b9d0e31bd04b158bdd2b1229cdb559373105' }, hAsync("input", { key: '1555820542f19528482cf133c10abe8780cc340d', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), hAsync("div", { key: '9b32b9d0e31bd04b158bdd2b1229cdb559373105' }, hAsync("input", { key: '9cf78f9f8c05e391abbe36be0fd047458736d4fa', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", tabindex: "-1", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: 'e87fa10eed53a6542eb5e551fa9110b593ba4b3a', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
+            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: '2340bc932ec97f948024c59f40fbe3a0be1aaaa5', "aria-disabled": disabled, outline: true, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return uploadCss; }
@@ -30005,7 +30198,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.28.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.29.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -44079,6 +44272,32 @@ var Build = {
   isServer: false,
   isTesting: BUILD.isTesting ? true : false
 };
+
+// src/utils/constants.ts
+var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
+  PrimitiveType2["Undefined"] = "undefined";
+  PrimitiveType2["Null"] = "null";
+  PrimitiveType2["String"] = "string";
+  PrimitiveType2["Number"] = "number";
+  PrimitiveType2["SpecialNumber"] = "number";
+  PrimitiveType2["Boolean"] = "boolean";
+  PrimitiveType2["BigInt"] = "bigint";
+  return PrimitiveType2;
+})(PrimitiveType || {});
+var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
+  NonPrimitiveType2["Array"] = "array";
+  NonPrimitiveType2["Date"] = "date";
+  NonPrimitiveType2["Map"] = "map";
+  NonPrimitiveType2["Object"] = "object";
+  NonPrimitiveType2["RegularExpression"] = "regexp";
+  NonPrimitiveType2["Set"] = "set";
+  NonPrimitiveType2["Channel"] = "channel";
+  NonPrimitiveType2["Symbol"] = "symbol";
+  return NonPrimitiveType2;
+})(NonPrimitiveType || {});
+var TYPE_CONSTANT = "type";
+var VALUE_CONSTANT = "value";
+var SERIALIZED_PREFIX = "serialized:";
 var STENCIL_DEV_MODE = BUILD.isTesting ? ["STENCIL:"] : [
   "%cstencil",
   "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
@@ -44099,6 +44318,232 @@ var supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */
 // src/utils/helpers.ts
 var isString = (v) => typeof v === "string";
 
+// src/utils/local-value.ts
+var LocalValue = class _LocalValue {
+  constructor(type, value) {
+    if (type === "undefined" /* Undefined */ || type === "null" /* Null */) {
+      this.type = type;
+    } else {
+      this.type = type;
+      this.value = value;
+    }
+  }
+  /**
+   * Creates a new LocalValue object with a string value.
+   *
+   * @param {string} value - The string value to be stored in the LocalValue object.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createStringValue(value) {
+    return new _LocalValue("string" /* String */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a number value.
+   *
+   * @param {number} value - The number value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createNumberValue(value) {
+    return new _LocalValue("number" /* Number */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a special number value.
+   *
+   * @param {number} value - The value of the special number.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createSpecialNumberValue(value) {
+    if (Number.isNaN(value)) {
+      return new _LocalValue("number" /* SpecialNumber */, "NaN");
+    }
+    if (Object.is(value, -0)) {
+      return new _LocalValue("number" /* SpecialNumber */, "-0");
+    }
+    if (value === Infinity) {
+      return new _LocalValue("number" /* SpecialNumber */, "Infinity");
+    }
+    if (value === -Infinity) {
+      return new _LocalValue("number" /* SpecialNumber */, "-Infinity");
+    }
+    return new _LocalValue("number" /* SpecialNumber */, value);
+  }
+  /**
+   * Creates a new LocalValue object with an undefined value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createUndefinedValue() {
+    return new _LocalValue("undefined" /* Undefined */);
+  }
+  /**
+   * Creates a new LocalValue object with a null value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createNullValue() {
+    return new _LocalValue("null" /* Null */);
+  }
+  /**
+   * Creates a new LocalValue object with a boolean value.
+   *
+   * @param {boolean} value - The boolean value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createBooleanValue(value) {
+    return new _LocalValue("boolean" /* Boolean */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a BigInt value.
+   *
+   * @param {BigInt} value - The BigInt value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createBigIntValue(value) {
+    return new _LocalValue("bigint" /* BigInt */, value.toString());
+  }
+  /**
+   * Creates a new LocalValue object with an array.
+   *
+   * @param {Array} value - The array.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createArrayValue(value) {
+    return new _LocalValue("array" /* Array */, value);
+  }
+  /**
+   * Creates a new LocalValue object with date value.
+   *
+   * @param {string} value - The date.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createDateValue(value) {
+    return new _LocalValue("date" /* Date */, value);
+  }
+  /**
+   * Creates a new LocalValue object of map value.
+   * @param {Map} map - The map.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createMapValue(map2) {
+    const value = [];
+    Array.from(map2.entries()).forEach(([key, val]) => {
+      value.push([_LocalValue.getArgument(key), _LocalValue.getArgument(val)]);
+    });
+    return new _LocalValue("map" /* Map */, value);
+  }
+  /**
+   * Creates a new LocalValue object from the passed object.
+   *
+   * @param object the object to create a LocalValue from
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createObjectValue(object) {
+    const value = [];
+    Object.entries(object).forEach(([key, val]) => {
+      value.push([key, _LocalValue.getArgument(val)]);
+    });
+    return new _LocalValue("object" /* Object */, value);
+  }
+  /**
+   * Creates a new LocalValue object of regular expression value.
+   *
+   * @param {string} value - The value of the regular expression.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createRegularExpressionValue(value) {
+    return new _LocalValue("regexp" /* RegularExpression */, value);
+  }
+  /**
+   * Creates a new LocalValue object with the specified value.
+   * @param {Set} value - The value to be set.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createSetValue(value) {
+    return new _LocalValue("set" /* Set */, value);
+  }
+  /**
+   * Creates a new LocalValue object with the given channel value
+   *
+   * @param {ChannelValue} value - The channel value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createChannelValue(value) {
+    return new _LocalValue("channel" /* Channel */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a Symbol value.
+   *
+   * @param {Symbol} symbol - The Symbol value
+   * @returns {LocalValue} - The created LocalValue object
+   */
+  static createSymbolValue(symbol) {
+    const description = symbol.description || "Symbol()";
+    return new _LocalValue("symbol" /* Symbol */, description);
+  }
+  static getArgument(argument) {
+    const type = typeof argument;
+    switch (type) {
+      case "string" /* String */:
+        return _LocalValue.createStringValue(argument);
+      case "number" /* Number */:
+        if (Number.isNaN(argument) || Object.is(argument, -0) || !Number.isFinite(argument)) {
+          return _LocalValue.createSpecialNumberValue(argument);
+        }
+        return _LocalValue.createNumberValue(argument);
+      case "boolean" /* Boolean */:
+        return _LocalValue.createBooleanValue(argument);
+      case "bigint" /* BigInt */:
+        return _LocalValue.createBigIntValue(argument);
+      case "undefined" /* Undefined */:
+        return _LocalValue.createUndefinedValue();
+      case "symbol" /* Symbol */:
+        return _LocalValue.createSymbolValue(argument);
+      case "object" /* Object */:
+        if (argument === null) {
+          return _LocalValue.createNullValue();
+        }
+        if (argument instanceof Date) {
+          return _LocalValue.createDateValue(argument);
+        }
+        if (argument instanceof Map) {
+          const map2 = [];
+          argument.forEach((value, key) => {
+            const objectKey = typeof key === "string" ? key : _LocalValue.getArgument(key);
+            const objectValue = _LocalValue.getArgument(value);
+            map2.push([objectKey, objectValue]);
+          });
+          return _LocalValue.createMapValue(argument);
+        }
+        if (argument instanceof Set) {
+          const set = [];
+          argument.forEach((value) => {
+            set.push(_LocalValue.getArgument(value));
+          });
+          return _LocalValue.createSetValue(set);
+        }
+        if (argument instanceof Array) {
+          const arr = [];
+          argument.forEach((value) => {
+            arr.push(_LocalValue.getArgument(value));
+          });
+          return _LocalValue.createArrayValue(arr);
+        }
+        if (argument instanceof RegExp) {
+          return _LocalValue.createRegularExpressionValue({
+            pattern: argument.source,
+            flags: argument.flags
+          });
+        }
+        return _LocalValue.createObjectValue(argument);
+    }
+    throw new Error(`Unsupported type: ${type}`);
+  }
+  asMap() {
+    return {
+      [TYPE_CONSTANT]: this.type,
+      ...!(this.type === "null" /* Null */ || this.type === "undefined" /* Undefined */) ? { [VALUE_CONSTANT]: this.value } : {}
+    };
+  }
+};
+
 // src/utils/message-utils.ts
 var catchError = (diagnostics, err2, msg) => {
   const diagnostic = {
@@ -44137,6 +44582,101 @@ var shouldIgnoreError = (msg) => {
 };
 var TASK_CANCELED_MSG = `task canceled`;
 
+// src/utils/remote-value.ts
+var RemoteValue = class _RemoteValue {
+  /**
+   * Deserializes a LocalValue serialized object back to its original JavaScript representation
+   *
+   * @param serialized The serialized LocalValue object
+   * @returns The original JavaScript value/object
+   */
+  static fromLocalValue(serialized) {
+    const type = serialized[TYPE_CONSTANT];
+    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
+    switch (type) {
+      case "string" /* String */:
+        return value;
+      case "boolean" /* Boolean */:
+        return value;
+      case "bigint" /* BigInt */:
+        return BigInt(value);
+      case "undefined" /* Undefined */:
+        return void 0;
+      case "null" /* Null */:
+        return null;
+      case "number" /* Number */:
+        if (value === "NaN") return NaN;
+        if (value === "-0") return -0;
+        if (value === "Infinity") return Infinity;
+        if (value === "-Infinity") return -Infinity;
+        return value;
+      case "array" /* Array */:
+        return value.map((item) => _RemoteValue.fromLocalValue(item));
+      case "date" /* Date */:
+        return new Date(value);
+      case "map" /* Map */:
+        const map2 = /* @__PURE__ */ new Map();
+        for (const [key, val] of value) {
+          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
+          const deserializedValue = _RemoteValue.fromLocalValue(val);
+          map2.set(deserializedKey, deserializedValue);
+        }
+        return map2;
+      case "object" /* Object */:
+        const obj = {};
+        for (const [key, val] of value) {
+          obj[key] = _RemoteValue.fromLocalValue(val);
+        }
+        return obj;
+      case "regexp" /* RegularExpression */:
+        const { pattern, flags } = value;
+        return new RegExp(pattern, flags);
+      case "set" /* Set */:
+        const set = /* @__PURE__ */ new Set();
+        for (const item of value) {
+          set.add(_RemoteValue.fromLocalValue(item));
+        }
+        return set;
+      case "symbol" /* Symbol */:
+        return Symbol(value);
+      default:
+        throw new Error(`Unsupported type: ${type}`);
+    }
+  }
+  /**
+   * Utility method to deserialize multiple LocalValues at once
+   *
+   * @param serializedValues Array of serialized LocalValue objects
+   * @returns Array of deserialized JavaScript values
+   */
+  static fromLocalValueArray(serializedValues) {
+    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
+  }
+  /**
+   * Verifies if the given object matches the structure of a serialized LocalValue
+   *
+   * @param obj Object to verify
+   * @returns boolean indicating if the object has LocalValue structure
+   */
+  static isLocalValueObject(obj) {
+    if (typeof obj !== "object" || obj === null) {
+      return false;
+    }
+    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
+      return false;
+    }
+    const type = obj[TYPE_CONSTANT];
+    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
+    if (!hasTypeProperty) {
+      return false;
+    }
+    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
+      return obj.hasOwnProperty(VALUE_CONSTANT);
+    }
+    return true;
+  }
+};
+
 // src/utils/result.ts
 var result_exports = {};
 __export(result_exports, {
@@ -44186,6 +44726,21 @@ var unwrapErr = (result) => {
   }
 };
 
+// src/utils/serialize.ts
+function serializeProperty(value) {
+  if (["string", "boolean", "undefined"].includes(typeof value) || typeof value === "number" && value !== Infinity && value !== -Infinity && !isNaN(value)) {
+    return value;
+  }
+  const arg = LocalValue.getArgument(value);
+  return SERIALIZED_PREFIX + btoa(JSON.stringify(arg));
+}
+function deserializeProperty(value) {
+  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
+    return value;
+  }
+  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+}
+
 // src/utils/util.ts
 var lowerPathParam = (fn) => (p) => fn(p.toLowerCase());
 var isDtsFile = lowerPathParam((p) => p.endsWith(".d.ts") || p.endsWith(".d.mts") || p.endsWith(".d.cts"));
@@ -45600,4 +46155,4 @@ function removeScripts(elm) {
   }
 }
 
-export { createWindowFromHtml, hydrateDocument, renderToString, serializeDocumentToString, streamToString };
+export { createWindowFromHtml, deserializeProperty, hydrateDocument, renderToString, serializeDocumentToString, serializeProperty, streamToString };