@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 4.1.0

package/build/static/demo/v2/preview/html/assets/{ix-col_4.entry-D_kdG7BV.js → ix-col_4.entry-BsWSZp91.js}

@@ -1,8 +1,8 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, c as createEvent, F as Fragment, g as getElement } from "./global-C8r7td8X.js";
+import { r as registerInstance, f as forceUpdate, h, H as Host, c as createEvent, F as Fragment, g as getElement } from "./global-jo2I2sSs.js";
 import { m as matchBreakpoint } from "./breakpoints-D_Hmobxf-DBbixPq4.js";
-import { w as iconChevronRightSmall, E as iconChevronLeftSmall, O as iconSingleCheck } from "./index-Cz75KU1f-BUHLjWzB.js";
-import { D as DateTime, I as Info } from "./datetime-bDicGJUN-EWahaxaU.js";
-import { O as OnListener } from "./listener-DAJkOQte-D1cCX7ze.js";
+import { w as iconChevronRightSmall, D as iconChevronLeftSmall, O as iconSingleCheck } from "./index-8HpPmDK_-DinFJk0z.js";
+import { D as DateTime, I as Info } from "./datetime-bDicGJUN-Rk09H-45.js";
+import { O as OnListener } from "./listener-DAJkOQte-BvPtyHWY.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
 const colCss = ":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const Col = class {
@@ -60,12 +60,12 @@ const Col = class {
     };
   }
   render() {
-    return h(Host, { key: "a8a9fb0682755fae44cbc7fd7d02b6aa1f9338b3", style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: "31038e1d2bcda21b712f55d6840aeffc432beedf" }));
+    return h(Host, { key: "552bf87dd4905b2cfc67dbda7c33e1edf89a9cf8", style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: "293331e4b2de069f550f0d47e1525228e49fc159" }));
   }
 };
 Col.Breakpoints = ["", "sm", "md", "lg"];
 Col.style = colCss;
-const datePickerCss = ":host{display:block;position:relative;width:21rem}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset);background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}";
+const datePickerCss = ":host{display:block;position:relative;max-width:21rem}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);box-shadow:inset 0 0 0 1px var(--theme-color-inv-contrast-text);background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected);font-weight:var(--theme-font-weight-bold)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:var(--theme-ms-0);line-height:143%;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}";
 var __decorate = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -461,7 +461,7 @@ const DatePicker = class {
     return rows;
   }
   render() {
-    return h(Host, { key: "42d2c188cd731f5a7328dd1ce481f660101d7a09" }, h("ix-date-time-card", { key: "f2d961f0b5aff7ff940ca19eb3a436462ca05e99", corners: this.corners, embedded: this.embedded }, h("div", { key: "196010db71c2325a06dbfe0c0ba532e2e09b9fb2", class: "header", slot: "header" }, h("ix-icon-button", { key: "585f9ba06de70c8f20a3de2b1b6cf98ccdec1c19", onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: "8d4222010c3ed656b21e0d75bf6013e0d7c19179", class: "selector" }, h("ix-button", { key: "4a3dca3a156d8461c58a43ac2063a8416328eabb", variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: "bc208dd3649f23fa34b7ec577ccfd5f21cd35366", class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: "22175d2d9b7624b6f1de915c53e9b1fdd1bd1a15", "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: "2737cf0b9d6e5de84f3e875e8db015313eb1767e", class: "wrapper" }, h("div", { key: "7a1cfb1f62cdbc0926ee1d50a6b515c762e54430", "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: "53b4d6194cac8ff5579002adbeea59be73a872b8", class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => h("div", { key: month, ref: (ref) => {
+    return h(Host, { key: "ac385bc586d47db0ce5aeb9eab3e7e71e71fe7cf" }, h("ix-date-time-card", { key: "e1d11ba64aa8b1374c6ded705afa779a9b3966b1", corners: this.corners, embedded: this.embedded }, h("div", { key: "bc99b5e074709ee8599799814a3bc7fd5ab417a5", class: "header", slot: "header" }, h("ix-icon-button", { key: "6bc172523c9588a3bb1d200d5113b2533117c021", onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: "e3505b87752b9d763ba61286f1091e67e2ee3314", class: "selector" }, h("ix-button", { key: "f6740c7a4ea82875e876896ab0d311e56edf2c6d", variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: "0cd1e04f63512e2c8798d3524c2e8cc3e719d853", class: "capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: "0021b8af9b8ba6b23e9ed49ebb4edcecc55eeb26", "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: "f00cf88696bec06c49c59962d3dcb4838be3f3f2", class: "wrapper" }, h("div", { key: "0d6b2ca0c9a2f23a7fd1fa24cc05454da9e16af7", "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: "bff068918a1f31e25f1d22b9e2f4b36e0a2affdd", class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => h("div", { key: month, ref: (ref) => {
       if (month === this.monthNames[0]) {
         this.firstMonthRef(ref);
       }
@@ -473,10 +473,10 @@ const DatePicker = class {
     }, onClick: () => this.selectMonth(index), onKeyUp: (event) => event.key === "Enter" && this.selectMonth(index), tabIndex: 0 }, h("ix-icon", { class: {
       hidden: this.tempYear !== this.selectedYear || this.tempMonth !== index,
       checkPosition: true
-    }, name: iconSingleCheck, size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`)))))))), h("ix-icon-button", { key: "c9d4d4885134a651f4ee37f6ab7bc5bc92d06afc", onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: "24ce38b7091fa6d8e712daaba8fd94d8e1364df3", class: {
+    }, name: iconSingleCheck, size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`)))))))), h("ix-icon-button", { key: "42af554f8f382640b60f98b68708e5cb4912bf33", onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: "565551cf265951458d43742f5a64e1d3e8107bcc", class: {
       grid: true,
       "grid--show-week-numbers": this.showWeekNumbers
-    } }, this.showWeekNumbers && h("div", { key: "27a12760475ceb0d93531b541e499c4d8274acee", class: "calendar-item week-day" }), this.dayNames.map((name) => h("div", { key: name, class: "calendar-item week-day" }, h("div", { class: "overflow" }, name.slice(0, 3)))), this.calendar.map((week) => {
+    } }, this.showWeekNumbers && h("div", { key: "153664ce89e84909f75d424f3af985f3c8caa22b", class: "calendar-item week-day" }), this.dayNames.map((name) => h("div", { key: name, class: "calendar-item week-day" }, h("div", { class: "overflow" }, name.slice(0, 3)))), this.calendar.map((week) => {
       return h(Fragment, null, this.showWeekNumbers && h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => {
         return day ? h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
           const target = e.currentTarget;
@@ -488,10 +488,10 @@ const DatePicker = class {
           }
         }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${this.selectedMonth}: ${day}` }, day) : h("div", null);
       }));
-    })), h("div", { key: "5bca82f35ddda23816f7bdab87abbf7d52152325", class: {
+    })), h("div", { key: "a3eaf5affbf21d93ac0bd2938a544e372ecee2bc", class: {
       button: true,
       hidden: this.singleSelection || this.embedded
-    } }, h("ix-button", { key: "f41c4b85162e1c199e079276b7ccfab3fb9149bd", onClick: () => this.onDone() }, this.i18nDone))));
+    } }, h("ix-button", { key: "bcbc94626760a7c8e755f4afb52f127d5b49dcd7", onClick: () => this.onDone() }, this.i18nDone))));
   }
   get hostElement() {
     return getElement(this);
@@ -517,12 +517,12 @@ const LayoutGrid = class {
     this.columns = 12;
   }
   render() {
-    return h(Host, { key: "c426263f82beb3d366aea55da08259a9a2392c45", class: {
+    return h(Host, { key: "040fa69fa09d20fdbfc6ae40f85cdf70f74b3eee", class: {
       "no-margin": this.noMargin
     }, style: {
       "--ix-layout-grid-columns": `${this.columns}`,
       "--ix-layout-grid-gutter": `${this.gap}px`
-    } }, h("slot", { key: "c85a805c185548b4331e206050c10567814f9833" }));
+    } }, h("slot", { key: "50cae64ab0cc69aa2ffe55bfce8f069ea22b240b" }));
   }
 };
 LayoutGrid.style = layoutGridCss;
@@ -532,7 +532,7 @@ const Row = class {
     registerInstance(this, hostRef);
   }
   render() {
-    return h(Host, { key: "d1a97faf65f7bb2656702d903995c25589a6ef41" }, h("slot", { key: "b24d88c901dd8bf48eefaf2778d8db412b61811c" }));
+    return h(Host, { key: "ff07b78a26aaca76105d0cf296807512620aa6e6" }, h("slot", { key: "46cf7e7f85f4a44831b6482df9a9b667519082f0" }));
   }
 };
 Row.style = rowCss;

package/build/static/demo/v2/preview/html/assets/{ix-content-header.entry-Bw_ir4lD.js → ix-content-header.entry-B8xVpkU7.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from "./global-C8r7td8X.js";
-import { n as iconArrowLeft } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-jo2I2sSs.js";
+import { n as iconArrowLeft } from "./index-8HpPmDK_-DinFJk0z.js";
 const contentHeaderCss = ":host{display:flex;flex-direction:row;align-items:flex-start;padding:0}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0;min-width:0;white-space:nowrap;margin-right:0.5rem}:host .titleGroup .titleOverflow{overflow:hidden;text-overflow:ellipsis}:host .titleGroup .headerTitleRow{display:flex}:host .titleGroup .headerTitleRow .headerSlot{display:inline-flex;margin-left:0.5rem}:host .titleGroup .secondary{padding:0.25rem 0}:host .subtitle{margin-top:-0.125rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";
 const ContentHeader = class {
   constructor(hostRef) {
@@ -10,13 +10,13 @@ const ContentHeader = class {
     this.hasBackButton = false;
   }
   render() {
-    return h(Host, { key: "70be3ee04b3b54d691708ff88d4c3b11b29665c7" }, this.hasBackButton ? h("ix-icon-button", { class: "backButton", variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() }) : null, h("div", { key: "ae2f111cf63ee212d574a4265076d7484d7d4973", class: "titleGroup" }, h("div", { key: "1366b36518b6a564046e37ede90611a83c10895a", class: "headerTitleRow" }, h("ix-typography", { key: "4239234ecf34dde70f9c38db0012a0771bebef80", format: this.variant === "secondary" ? "h4" : "h3", class: {
+    return h(Host, { key: "b422be3706aac399ed76b4c491d61e2da8561b24" }, this.hasBackButton ? h("ix-icon-button", { class: "backButton", variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() }) : null, h("div", { key: "7606ba97f834f591a78fc2cca74bdaf3b3a09feb", class: "titleGroup" }, h("div", { key: "df174e297a1b2075bcab0182a80f626162d1c319", class: "headerTitleRow" }, h("ix-typography", { key: "d8ab10dc801306dafe0f3e6e39ed93e0fa162ca1", format: this.variant === "secondary" ? "h4" : "h3", class: {
       secondary: this.variant === "secondary",
       titleOverflow: true
-    } }, this.headerTitle), h("div", { key: "10ee43aa1832ab8b72c7fe37994547d40c936c25", class: "headerSlot" }, h("slot", { key: "beec8fa035a64b109c3fd838a35ee6d395938677", name: "header" }))), !!this.headerSubtitle && h("ix-typography", { key: "036b83bcc660228254a46fdac7d820cb52e03ff5", format: "h6", "text-color": "soft", class: {
+    } }, this.headerTitle), h("div", { key: "e24d6b450426931aaead3732fa20161bc5aab4e2", class: "headerSlot" }, h("slot", { key: "e9a471492f2693fc6abe546d1febbc06834fef1c", name: "header" }))), !!this.headerSubtitle && h("ix-typography", { key: "5fdb5ebce68a3aae09df3299093bca156468933c", format: "h6", "text-color": "soft", class: {
       subtitle: this.variant === "secondary",
       titleOverflow: true
-    }, title: this.headerSubtitle }, this.headerSubtitle)), h("div", { key: "1379a68c4f1c0ec56351c5994989e0c6b2155cff", class: "buttons" }, h("slot", { key: "424bfa799347c0ab0ac1e47b33924778a68e9bc0" })));
+    }, title: this.headerSubtitle }, this.headerSubtitle)), h("div", { key: "6648f93246d2e8d79cc2d3e7eae65009d578632c", class: "buttons" }, h("slot", { key: "1c3ee8084521a9a799e3b2444b1edc0c1cee5066" })));
   }
 };
 ContentHeader.style = contentHeaderCss;

package/build/static/demo/v2/preview/html/assets/{ix-content.entry-B9meuSkZ.js → ix-content.entry-DyfmAxrq.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-jo2I2sSs.js";
 import { h as hasSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
 const contentCss = ":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 2rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1rem}";
 const Content = class {
@@ -10,12 +10,12 @@ const Content = class {
     return this.hostElement.shadowRoot.querySelector(".content-header slot");
   }
   render() {
-    return h(Host, { key: "c68ec9d987aad56c3ccf77ce7b8a1fe125fd68ec" }, h("div", { key: "57c983730211548634bb3f13c666eb24d8ba1758", class: {
+    return h(Host, { key: "2ca4af3b088beab36b86cb3431f1d1b59fcf8756" }, h("div", { key: "04f73ba733dc7fbf57ecf6fdc0afc1fec8249b8e", class: {
       "content-header": true,
       slotted: this.isContentHeaderSlotted
-    } }, h("slot", { key: "ed5c10f01ff82b4242941271b773bd9f151ce07b", name: "header", onSlotchange: () => {
+    } }, h("slot", { key: "962e83643e1ebcd86384cae1e7a3632b6f47554e", name: "header", onSlotchange: () => {
       this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-    } })), h("div", { key: "f2f40e2dfb416e638b6dd4294ce071861171902c", class: "content" }, h("slot", { key: "8b63341a308b4d12d5dbad358b78bd4ced1d03f7" })));
+    } })), h("div", { key: "4315ac1e71743ba30c7b8f592997c662eed392b4", class: "content" }, h("slot", { key: "c1f31f8e283bcc55011b9f2d5746d9b7c10988da" })));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-css-grid-item.entry-BioTURuz.js → ix-css-grid-item.entry-DRJ9_K7s.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host } from "./global-jo2I2sSs.js";
 const cssGridItemCss = ":host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}";
 const CssGridItem = class {
   constructor(hostRef) {
@@ -7,7 +7,7 @@ const CssGridItem = class {
   render() {
     const style = {};
     style["grid-area"] = this.itemName;
-    return h(Host, { key: "a4e4f5e7d0a42b8cd39a742f3ee4f420b60c8931", style }, h("slot", { key: "74cbbecda6397caf41cae0f78201f00ab23911d8" }));
+    return h(Host, { key: "0f7a1001629ec09b7e6f44470b733f3d1d691bcb", style }, h("slot", { key: "1fce4a329cea68181bc52e60d155d6c6b7bb41bc" }));
   }
 };
 CssGridItem.style = cssGridItemCss;

package/build/static/demo/v2/preview/html/assets/{ix-css-grid.entry-Dx5r5a03.js → ix-css-grid.entry-DDN0i6y4.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host } from "./global-jo2I2sSs.js";
 function templateBuilder(inputTemplate) {
   let templateString = "";
   inputTemplate.forEach((row) => {
@@ -73,7 +73,7 @@ const CssGrid = class {
     if (this.currentTemplate && this.currentTemplate.length !== 0) {
       style["grid-template-areas"] = templateBuilder(this.currentTemplate);
     }
-    return h(Host, { key: "1ceeb89987199bf3c537ba6c34ff8f52aff2fc76", style }, h("slot", { key: "785c5428d027f7a10f72e3b685ec51bb66fe082b" }));
+    return h(Host, { key: "470c3da8301e7d99e603b78cfd9c2883e4801c76", style }, h("slot", { key: "64f7e86981ba37aeb20223bd672bc1190dba4619" }));
   }
 };
 CssGrid.style = cssGridCss;

package/build/static/demo/v2/preview/html/assets/{ix-custom-field.entry-BUZTVt1D.js → ix-custom-field.entry-JcHGz7CW.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-hK2sg2of.js";
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-jo2I2sSs.js";
+import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-Db2_Mno0.js";
 const customFieldCss = ":host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}";
 var __decorate = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -27,7 +27,7 @@ const CustomField = class {
     this.isWarning = isWarning;
   }
   render() {
-    return h(Host, { key: "020e301b887a62969c8c500049a2d1e77638c789" }, h("ix-field-wrapper", { key: "df6b54e55636b528c2c7c56ded6e31af411f43fa", label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: "99de94d7431bc900977593304d2193eabaef898a" })));
+    return h(Host, { key: "732dae3e5ba3f37b5eac745ce48338cae5397d9e" }, h("ix-field-wrapper", { key: "5df555252c2de619f3dd5daa082632695a88e3f6", label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: "81d169fce11d76b04876eb3483909bf163c44370" })));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-date-dropdown.entry-VmSk1BHN.js → ix-date-dropdown.entry-Cw1nU6xn.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { D as DateTime } from "./datetime-bDicGJUN-EWahaxaU.js";
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from "./global-jo2I2sSs.js";
+import { D as DateTime } from "./datetime-bDicGJUN-Rk09H-45.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
-import { o as iconHistory } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { o as iconHistory } from "./index-8HpPmDK_-DinFJk0z.js";
 const dateDropdownCss = ":host{display:inline-block;position:relative}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0 1rem 0.75rem 1rem}";
 const DateDropdown = class {
   constructor(hostRef) {
@@ -134,18 +134,18 @@ const DateDropdown = class {
   }
   render() {
     var _a, _b, _c;
-    return h(Host, { key: "b0c80bf0c01f34eccf3ffd03cab8cb4598122b8e" }, h("ix-button", { key: "19fc20d03477850083cc6274ea8b4269fb827365", "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), h("ix-dropdown", { key: "8b0260dd47fd1e6267b539ef0f12a544f3817c93", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+    return h(Host, { key: "2cad55fd1448a2a553abb8bdf50f9245d2cc71bf" }, h("ix-button", { key: "77bd4e5f89d500b0323c5a2771cb2268601a87d3", "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), h("ix-dropdown", { key: "e1108d1cdac327961e3147d10f380f8d9850449c", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
       if (!show && this.selectedDateRangeId === "custom" && this.datePickerTouched && this.currentRangeValue) {
         this.onDateSelect(this.currentRangeValue);
       }
-    } }, h("ix-layout-grid", { key: "827aa5f75b7351f7194800e5d08e99be05550674", noMargin: true }, h("ix-row", { key: "31a94fc990f9f4a30f3259e1148e897d512b3408" }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && h("ix-col", { key: "4c6222ffde5a8f8644f7e4030f5942e148014e2f", class: {
+    } }, h("ix-layout-grid", { key: "fd7ece26cbcda9da063b1832ca7c010fd508ae8b", noMargin: true }, h("ix-row", { key: "8854518f7534f9c52be1d74373c8a6d822983bca" }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && h("ix-col", { key: "8e7e4d96a0e91d91cee20f961b37da7645e0a28e", class: {
       "no-margin": true,
       "border-right": this.selectedDateRangeId === "custom"
-    } }, this.dateRangeOptions.map((dateRangeOption) => h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id })), h("div", { key: "7c6e52ce4e81ba257925eaf9dae155d1fff0bcf1", hidden: this.customRangeDisabled }, h("ix-dropdown-item", { key: "6be7c3b1b827a75c51f82edd8971b3cc53f8167c", label: this.i18nCustomItem, checked: this.selectedDateRangeId === "custom", onClick: () => this.onRangeListSelect("custom") }))), h("ix-col", { key: "a8119f9199cb8e4e162688bfdcf4f91242fbd5b7", class: "no-margin" }, this.selectedDateRangeId === "custom" && h(Fragment, { key: "bd24f234a02cc55ed73df93ca6d6791d11d9ad77" }, h("ix-date-picker", { key: "0aaf7e9c3ee79d9d232eed14fb840e246caddd20", embedded: true, locale: this.locale, onDateChange: (e) => {
+    } }, this.dateRangeOptions.map((dateRangeOption) => h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id })), h("div", { key: "f9e7879a9f2e00c5bbcd7ab454cf491345a2f1ee", hidden: this.customRangeDisabled }, h("ix-dropdown-item", { key: "e373366109b1ac41af77fc4fcab8aeb4a5cf7a29", label: this.i18nCustomItem, checked: this.selectedDateRangeId === "custom", onClick: () => this.onRangeListSelect("custom") }))), h("ix-col", { key: "4e4ad3072863235f5dda814f24811e982f407c9b", class: "no-margin" }, this.selectedDateRangeId === "custom" && h(Fragment, { key: "a9c540a66333322c54cf7814231f6213806b86db" }, h("ix-date-picker", { key: "7e59d29e3a49bee9098879b51b23d9c6fbec5c6b", embedded: true, locale: this.locale, onDateChange: (e) => {
       e.stopPropagation();
       this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: "custom" });
       this.datePickerTouched = true;
-    }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: "f2bd49f4ca5012eb32fc4e859bb6e9da2cd25f3d", class: "pull-right" }, h("ix-button", { key: "18cb506d16700b59884660c4d8afb63c6e66400b", onClick: () => {
+    }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: "837f09d7b578640927e904f4adc2aef7fda7e65e", class: "pull-right" }, h("ix-button", { key: "09e9fbdf94d44bc52832d6787206aaded06a3aeb", onClick: () => {
       if (this.currentRangeValue) {
         this.onDateSelect(this.currentRangeValue);
       }

package/build/static/demo/v2/preview/html/assets/{ix-date-input.entry-B5netcjl.js → ix-date-input.entry-D7bLWykp.js}

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { p as iconCalendar } from "./index-Cz75KU1f-BUHLjWzB.js";
-import { D as DateTime } from "./datetime-bDicGJUN-EWahaxaU.js";
-import { a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, c as SlotStart } from "./input.util-VHrSuCP7-BxHyeFjg.js";
-import { c as createClassMutationObserver, H as HookValidationLifecycle } from "./validation-D_dk-JqT-hK2sg2of.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-jo2I2sSs.js";
+import { p as iconCalendar } from "./index-8HpPmDK_-DinFJk0z.js";
+import { D as DateTime } from "./datetime-bDicGJUN-Rk09H-45.js";
+import { a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, h as handleSubmitOnEnterKeydown, S as SlotEnd, c as SlotStart } from "./input.fc-CQbX6V05-BCFlGXa1.js";
+import { c as createClassMutationObserver, H as HookValidationLifecycle } from "./validation-D_dk-JqT-Db2_Mno0.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
 import { h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from "./picker-input.util-D1uMJUKN-o8S09pI3.js";
 import "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
@@ -44,6 +44,8 @@ const DateInput = class {
     this.i18nErrorDateUnparsable = "Date is not valid";
     this.showWeekNumbers = false;
     this.weekStartIndex = 0;
+    this.suppressSubmitOnEnter = false;
+    this.textAlignment = "start";
     this.show = false;
     this.from = null;
     this.isInputInvalid = false;
@@ -137,6 +139,9 @@ const DateInput = class {
   checkClassList() {
     this.isInvalid = this.hostElement.classList.contains("ix-invalid");
   }
+  handleInputKeyDown(event) {
+    handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
+  }
   renderInput() {
     var _a;
     return h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
@@ -155,6 +160,8 @@ const DateInput = class {
     }, onBlur: () => {
       this.ixBlur.emit();
       this.touched = true;
+    }, onKeyDown: (event) => this.handleInputKeyDown(event), style: {
+      textAlign: this.textAlignment
     } }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-calendar", class: { "calendar-hidden": this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconCalendar, onClick: (event) => this.onCalenderClick(event), "aria-label": this.ariaLabelCalendarButton })));
   }
   hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning }) {
@@ -196,12 +203,12 @@ const DateInput = class {
   render() {
     var _a;
     const invalidText = this.isInputInvalid ? this.i18nErrorDateUnparsable : this.invalidText;
-    return h(Host, { key: "5c7284b0afd8b3ee906370beb4b7e872a849f5cb", class: {
+    return h(Host, { key: "011a0643000de99532a82efcecdcc48d20a817e1", class: {
       disabled: this.disabled,
       readonly: this.readonly
-    } }, h("ix-field-wrapper", { key: "5e8c3a6dd37625cb818438fd8e0c7bef6daa46a1", label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: "5bffd40d906d1e1e929b4a6041ff2cec6f857d34", "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+    } }, h("ix-field-wrapper", { key: "08411e49b366d385cb96355bd4bd869d70bcee34", label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: "b471b5b81f4b4ad45a9403d54be147658f3b3e42", "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
       this.show = event.detail;
-    } }, h("ix-date-picker", { key: "8237c6eca404f1f11a921d965a7a0b7817072cf7", ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : "", minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+    } }, h("ix-date-picker", { key: "24ca8c4f0301ec042f13401e80463e85aa8a5d44", ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : "", minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
       const { from } = event.detail;
       this.onInput(from);
     }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, embedded: true })));

package/build/static/demo/v2/preview/html/assets/{ix-date-time-card.entry-D0vsrLmv.js → ix-date-time-card.entry-DBxghnZO.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
-const dateTimeCardCss = ":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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:var(--theme-shadow-4);border-radius:0.25rem}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card.straight{border-radius:0}:host .card .header-container{width:100%}:host .card .header-container .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}:host .card .content--time-picker{padding:0 1rem}:host .card .footer-container{width:100%}:host .card .footer-container .footer{padding:1rem}";
+import { r as registerInstance, h, H as Host } from "./global-jo2I2sSs.js";
+const dateTimeCardCss = ":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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:var(--theme-shadow-4);border-radius:0.25rem}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card.straight{border-radius:0}:host .card .header-container{width:100%}:host .card .header-container .header{padding:0.75rem 1rem;flex:0 1 auto}:host .card .separator{height:1px;background-color:var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}:host .card .content--time-picker{padding:0 1rem}:host .card .footer-container{width:100%}:host .card .footer-container .footer{padding:1rem}";
 const DateTimeCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -19,10 +19,10 @@ const DateTimeCard = class {
     };
   }
   render() {
-    return h(Host, { key: "0429648eb4c31bde407975b519809a5a6fd8043a" }, h("div", { key: "21434d00d886949b32554468fdca445b2b5cf76f", class: this.cardClasses() }, !this.hideHeader && h("div", { key: "7ef2b75a31b0e75646010e7f02a8dc338117d627", class: "header-container" }, h("div", { key: "bb3e80cbc6b1c9b5c9171638726074122cd91908", class: "header" }, h("slot", { key: "6ae65febb1ee7862df7dcc781fa68286bd0b7d5e", name: "header" })), h("div", { key: "d4d63d904222fbc638a04ee16e11ceea03f03e0e", class: "separator" })), h("div", { key: "0f299d9c0743f2b9e0c9f7a0e2504e51471d4475", class: {
+    return h(Host, { key: "e4b044b0076f79934f3e561dab684a9aa53ab8c2" }, h("div", { key: "91f00686e9000d71745bca5bb958a401fe265ed2", class: this.cardClasses() }, !this.hideHeader && h("div", { key: "974c90cd1522069f3e10831b6cec9d80eefc7630", class: "header-container" }, h("div", { key: "64d22e413cf579b3831580040d0921f73e37cbed", class: "header" }, h("slot", { key: "dadc035aa3e2aad17d16a0b7edb9c1aa83f5b64a", name: "header" })), h("div", { key: "14c6cffd8a0086835c42dca7e5a12a9c569ebc2f", class: "separator" })), h("div", { key: "e3150b66b51fd87e5cb62c620d9e46d21a3b9aed", class: {
       content: true,
       "content--time-picker": this.timePickerAppearance
-    } }, h("slot", { key: "6c955414005a3d9e004f1f69ded181f60f59dee5" })), this.hasFooter && h("div", { key: "09348617c1986599e342b209518727bd65976078", class: "footer-container" }, h("div", { key: "c3b84578c1acf0f8c9f01dcf8b9ec30364408a89", class: "separator" }), h("div", { key: "2cd97f773f26fb1e48fa4f5bf459c3531379b22b", class: "footer" }, h("slot", { key: "f079e60d93d18c34030ff23f0d8f2043b9a2d85e", name: "footer" })))));
+    } }, h("slot", { key: "6fe2bfb5676a992be3caa5fd134dcb5f595f3ae3" })), this.hasFooter && h("div", { key: "2c2a1a534b8e71a472e3a7e0bca7e5187322a107", class: "footer-container" }, h("div", { key: "67713b28bbfda3298d8778db37f8ca84d72270f0", class: "separator" }), h("div", { key: "247a0ac8c8fe7ddfa7b2d05c0bd9a1671229469c", class: "footer" }, h("slot", { key: "b1f5a9ace8a8c69eff1a954850cca8174619dcc8", name: "footer" })))));
   }
 };
 DateTimeCard.style = dateTimeCardCss;

package/build/static/demo/v2/preview/html/assets/{ix-datetime-picker.entry-Dxu9z94n.js → ix-datetime-picker.entry-BIrf9sKZ.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from "./global-C8r7td8X.js";
-const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-layout-grid{border-radius:0.25rem;box-shadow:var(--theme-shadow-4)}:host ix-time-picker{width:100%}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}:host ix-time-picker{width:initial}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding:0 1rem 1rem}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}";
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-jo2I2sSs.js";
+const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-layout-grid{border-radius:0.25rem;box-shadow:var(--theme-shadow-4)}:host ix-time-picker{width:100%}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}:host .row-separator,:host .col-separator{border-bottom:0.0625rem solid var(--theme-datepicker-separator--background)}:host .col-separator{border-right:none}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}:host ix-time-picker{width:initial}:host .col-separator{border-right:0.0625rem solid var(--theme-datepicker-separator--background);border-bottom:none}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding:1rem}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}";
 const DatetimePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -38,7 +38,7 @@ const DatetimePicker = class {
     this.timeChange.emit(time);
   }
   render() {
-    return h(Host, { key: "91fb1dbd40b48c37c207de3f173e19ed72f3b6c3" }, h("ix-layout-grid", { key: "0a9fc8ae63d59ba14185a12d3eb126351f4f67c4", class: "no-padding" }, h("ix-row", { key: "31e56d9e8a7ca4a6afd5754f0caf28eb494d68cd" }, h("ix-col", { key: "1df4729e7703d4f48d19233774a8fead11b74553" }, h("ix-date-picker", { key: "80923eee970fc1c163a94986c109e13f09d3a606", ref: (ref) => this.datePickerElement = ref, corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), h("ix-col", { key: "d081455e2f00a9917e11902a70cb882a84e23615" }, h("ix-time-picker", { key: "4602c3ca1b899ec283aa9469ce5fcdf4ba4a70fc", class: "min-width", ref: (ref) => this.timePickerElement = ref, embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }), h("div", { key: "1329ef1e1af1b22de5f4754ee02452a4d1aabb6b", class: "btn-select-date-container" }, h("ix-button", { key: "01efc3c5d4f72bd74a670a267a28e864c3e643fe", class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone))))));
+    return h(Host, { key: "2b4812deec9408836a8187c3a520cd69b846e935" }, h("ix-layout-grid", { key: "610fad916eb544d6687bcbfb3543b926f7521b9e", class: "no-padding" }, h("ix-row", { key: "63dcab9421e05163577db32fda3bd714a0c00de7", class: "row-separator" }, h("ix-col", { key: "8ac25a8147b15ac20b45c3f1e48bfda34919eae1", class: "col-separator" }, h("ix-date-picker", { key: "1831729d8dcb31e5361fbef4a6290111847b8679", ref: (ref) => this.datePickerElement = ref, corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), h("ix-col", { key: "51b004e4362c9dc26d0e59909cfb431fd874cbac" }, h("ix-time-picker", { key: "40672098b7e7cc369afd8429b34d14b97bcd1380", class: "min-width", ref: (ref) => this.timePickerElement = ref, embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: "876f3e8defe5de50013e8ea7e1f3465bd6e339a1" }, h("ix-col", { key: "1515e3e7b9ac5b121c8b0c3284092698f85652bf" }, h("div", { key: "6aa46d00d240c20de2e92bd5fa62f6ca59f53274", class: "btn-select-date-container" }, h("ix-button", { key: "ca4e27ecc31600f97ac2ab061cbbf29b2c717078", class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone))))));
   }
 };
 DatetimePicker.style = datetimePickerCss;

package/build/static/demo/v2/preview/html/assets/{ix-divider.entry-KerLIyu_.js → ix-divider.entry-t56WP6ss.js}

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host } from "./global-jo2I2sSs.js";
 const dividerCss = ":host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
 const Divider = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
   render() {
-    return h(Host, { key: "2353ffd7afdc669190af6a4ee6f405c38ac117de" });
+    return h(Host, { key: "ca814e8d386105be46954dfba6ae6f9a0c8ba4a9" });
   }
 };
 Divider.style = dividerCss;

package/build/static/demo/v2/preview/html/assets/{ix-drawer.entry-BFWfhrk7.js → ix-drawer.entry-CwENrayy.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from "./global-C8r7td8X.js";
-import { q as iconClose } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-jo2I2sSs.js";
+import { q as iconClose } from "./index-8HpPmDK_-DinFJk0z.js";
 import { a as animate } from "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
 import { A as Animation } from "./animation-C5MWUgDN-BXCJNYHu.js";
 const drawerCss = ":host{top:0;right:0;display:block;position:absolute;justify-content:flex-start;align-items:center;opacity:0;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;box-shadow:var(--theme-box-shadow-level-3)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .drawer-container{z-index:100}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.display-none){display:none}";
@@ -104,7 +104,7 @@ const Drawer = class {
     this.toggleDrawer(this.show);
   }
   render() {
-    return h(Host, { key: "16521422bdb7a66912901a8d1d156772c31c588a", class: {
+    return h(Host, { key: "f40c42d1e7b7e8420c4a8f804a46b722580dd132", class: {
       "drawer-container": true,
       "display-none": true
     }, style: {
@@ -112,13 +112,13 @@ const Drawer = class {
       "max-width": `${this.maxWidth}rem`,
       height: this.fullHeight ? "100%" : "auto",
       overflow: "hidden"
-    }, ref: (el) => this.divElement = el, "data-testid": "container", id: "div-container" }, h("div", { key: "8f1c103f6bb03c362a492031e2ad92bcf25d89cc", style: {
+    }, ref: (el) => this.divElement = el, "data-testid": "container", id: "div-container" }, h("div", { key: "810a3738ce5350281d758808ba93981914760877", style: {
       width: this.width === "auto" ? "auto" : `${this.getConstrainedWidth(this.width)}rem`
-    } }, h("div", { key: "7ff4e51b1f93fb7f686db4915ee838f32f61ae86", class: "header" }, h("div", { key: "7c748e9f1e9c2b5468fd524844dfc761069572f2", class: "header-content" }, h("slot", { key: "ea0ef18347626104852b149f3944165932f9d661", name: "header" })), h("ix-icon-button", { key: "a446d3e8cb7648d320cd4ea31899d2b289afbabe", class: "close-button", style: {
+    } }, h("div", { key: "5601266a5a02c122d1392234fe1c1a755e440bad", class: "header" }, h("div", { key: "a43e56c621a03939233e10bb907e6f2bd7a7e176", class: "header-content" }, h("slot", { key: "ab7c9e45ca78c512c1a242f53a616a16a98187fe", name: "header" })), h("ix-icon-button", { key: "eaaa6f03ffdf2f5e2d9100ab3f45c4a1f46ef63d", class: "close-button", style: {
       display: this.showContent ? "block" : "none"
-    }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), h("div", { key: "87f799aa707aceefa145a0b547761f587593d8e2", class: "content", style: {
+    }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), h("div", { key: "170d74d584fb7b641adaa45800144a27f4354d92", class: "content", style: {
       display: this.showContent ? "block" : "none"
-    } }, h("slot", { key: "aea1e984256bb60bcb6c6a6721988b86decdfca0" }))));
+    } }, h("slot", { key: "de087859ac50be70b998ab696698df91f6816f21" }))));
   }
   static get watchers() {
     return {

package/build/static/demo/v2/preview/html/assets/{ix-dropdown-button.entry-tMLx_yiw.js → ix-dropdown-button.entry-DyaHyv-x.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { r as iconChevronUpSmall, g as iconChevronDownSmall } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-jo2I2sSs.js";
+import { r as iconChevronUpSmall, h as iconChevronDownSmall } from "./index-8HpPmDK_-DinFJk0z.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
 const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary{color:var(--theme-btn-primary--color)}:host .triangle.secondary{color:var(--theme-btn-secondary--color)}:host .triangle.tertiary{color:var(--theme-btn-tertiary--color)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .triangle.tertiary.disabled{color:var(--theme-btn-tertiary--color--disabled)}:host .triangle.subtle-primary{color:var(--theme-btn-subtle-primary--color)}:host .triangle.subtle-secondary{color:var(--theme-btn-subtle-secondary--color)}:host .triangle.subtle-tertiary{color:var(--theme-btn-subtle-tertiary--color)}:host .triangle.subtle-primary.disabled{color:var(--theme-btn-subtle-primary--color--disabled)}:host .triangle.subtle-secondary.disabled{color:var(--theme-btn-subtle-secondary--color--disabled)}:host .triangle.subtle-tertiary.disabled{color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .triangle.danger-primary{color:var(--theme-btn-danger-primary--color)}:host .triangle.danger-secondary{color:var(--theme-btn-danger-secondary--color)}:host .triangle.danger-tertiary{color:var(--theme-btn-danger-tertiary--color)}:host .triangle.danger-primary.disabled{color:var(--theme-btn-danger-primary--color--disabled)}:host .triangle.danger-secondary.disabled{color:var(--theme-btn-danger-secondary--color--disabled)}:host .triangle.danger-tertiary.disabled{color:var(--theme-btn-danger-tertiary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";
 const DropdownButton = class {
@@ -23,9 +23,9 @@ const DropdownButton = class {
     } });
   }
   render() {
-    return h(Host, { key: "7bf428f629c4b9c4abe352fa22e187298f50d9ba", class: {
+    return h(Host, { key: "4e4aca39eff13b8f665682b3f2dc9ace533c7ca0", class: {
       disabled: this.disabled
-    }, ref: this.dropdownAnchor }, h("div", { key: "a1f250a7137b42f0f3a12a92190ea18929412b82", class: "dropdown-button" }, this.label ? h("ix-button", { variant: this.variant, disabled: this.disabled, alignment: "start", ariaLabel: this.ariaLabelDropdownButton }, h("div", { class: "content" }, this.icon ? h("ix-icon", { name: this.icon, size: "24", class: "dropdown-icon" }) : null, h("div", { class: "button-label" }, this.label), h("ix-icon", { name: this.dropdownShow ? iconChevronUpSmall : iconChevronDownSmall, size: "24" }))) : h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, disabled: this.disabled }), this.getTriangle())), h("ix-dropdown", { key: "e726b227804176cc0b63a6c1bffc3d822820200d", class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, onShowChanged: this.onDropdownShowChanged }, h("slot", { key: "9c596b8bd686b0e69336b563aef512aba7937275" })));
+    }, ref: this.dropdownAnchor }, h("div", { key: "9583ed2274621e67d779e9668fead87f663b7558", class: "dropdown-button" }, this.label ? h("ix-button", { variant: this.variant, disabled: this.disabled, alignment: "start", ariaLabel: this.ariaLabelDropdownButton }, h("div", { class: "content" }, this.icon ? h("ix-icon", { name: this.icon, size: "24", class: "dropdown-icon" }) : null, h("div", { class: "button-label" }, this.label), h("ix-icon", { name: this.dropdownShow ? iconChevronUpSmall : iconChevronDownSmall, size: "24" }))) : h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, disabled: this.disabled }), this.getTriangle())), h("ix-dropdown", { key: "e4fd6fb8451d8883fac84764758a90ce6dc4d433", class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, onShowChanged: this.onDropdownShowChanged }, h("slot", { key: "be8d3427e80c326bc7a6993f53190e290b824967" })));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-dropdown-header.entry-ByhRF0ji.js → ix-dropdown-header.entry-udMQnORL.js}

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host } from "./global-jo2I2sSs.js";
 const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const DropdownHeader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
   render() {
-    return h(Host, { key: "48d7022431ca3afd5b2a54d5ed66a753a65b11ba" }, h("ix-typography", { key: "930b1334c8a9e2974393bebec6890e72e204f360", class: "category-text", format: "h5" }, this.label));
+    return h(Host, { key: "8c2634f5c46a222e4803fa7ae426fcdf9d8edaf4" }, h("ix-typography", { key: "0951a5b06d746db809529a9149e021696507ade2", class: "category-text", format: "h5" }, this.label));
   }
 };
 DropdownHeader.style = dropdownHeaderCss;

package/build/static/demo/v2/preview/html/assets/{ix-dropdown-item.entry-BiQy9K7o.js → ix-dropdown-item.entry-H-Z1fjKs.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { O as iconSingleCheck, w as iconChevronRightSmall } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-jo2I2sSs.js";
+import { O as iconSingleCheck, w as iconChevronRightSmall } from "./index-8HpPmDK_-DinFJk0z.js";
 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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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);border:0.0625rem solid transparent;white-space:nowrap;width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem}: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}";
 const DropdownItem = class {
   constructor(hostRef) {
@@ -23,15 +23,15 @@ const DropdownItem = class {
     return this.label === void 0 && this.hostElement.innerText === "" && this.icon !== void 0;
   }
   render() {
-    return h(Host, { key: "a5b2ef55abc61e30f76a2936f8a3dab1089bce21", class: {
+    return h(Host, { key: "4683b34a35d26f4cdce448ed24cdc5115f838fed", class: {
       hover: this.hover,
       "icon-only": this.isIconOnly(),
       disabled: this.disabled,
       submenu: this.isSubMenu
-    }, role: "listitem" }, h("button", { key: "8bbf025361d0f8f7e07e54e3d377a91900f40181", type: "button", tabIndex: 0, class: {
+    }, role: "listitem" }, h("button", { key: "a655623c265f18e805a0f60a093dd4ac565ab35c", type: "button", tabIndex: 0, class: {
       "dropdown-item": true,
       "no-checked-field": this.suppressChecked
-    }, onClick: () => this.emitItemClick(), "aria-label": this.ariaLabelButton }, !this.suppressChecked ? h("div", { class: "dropdown-item-checked" }, this.checked ? h("ix-icon", { class: "checkmark", name: iconSingleCheck, size: "16" }) : null) : null, this.icon ? h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon }) : null, h("div", { key: "65fae7a6a32288a2b48be1cb26c83ae4faea527a", class: "dropdown-item-text" }, this.label, h("slot", { key: "5b0f74293fcfecf625a83abf1a5ac4de8f6f55ea" })), this.isSubMenu ? h("ix-icon", { name: iconChevronRightSmall, class: "submenu-icon" }) : null));
+    }, onClick: () => this.emitItemClick(), "aria-label": this.ariaLabelButton }, !this.suppressChecked ? h("div", { class: "dropdown-item-checked" }, this.checked ? h("ix-icon", { class: "checkmark", name: iconSingleCheck, size: "16" }) : null) : null, this.icon ? h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon }) : null, h("div", { key: "d88e90650387ce4dd0d440fe03bf21c19c785709", class: "dropdown-item-text" }, this.label, h("slot", { key: "d892aabbb2e268d36c348b800c043d08f2ceef83" })), this.isSubMenu ? h("ix-icon", { name: iconChevronRightSmall, class: "submenu-icon" }) : null));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-dropdown-quick-actions.entry-61pBMps0.js → ix-dropdown-quick-actions.entry-DhTYCRen.js}

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host } from "./global-jo2I2sSs.js";
 const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";
 const DropdownQuickActions = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
   render() {
-    return h(Host, { key: "35441282ec232f2028ff15215a93a48c6d4e46ed" }, h("slot", { key: "91f97516822014d5b70ee4b7134f9c377cb70824" }));
+    return h(Host, { key: "270b8dba8a8b79072beb81301d923f8f8754b70f" }, h("slot", { key: "9970e51c7af36350359311ea217e2a402a35f994" }));
   }
 };
 DropdownQuickActions.style = dropdownQuickActionsCss;

package/build/static/demo/v2/preview/html/assets/{ix-dropdown.entry-BAQuiTBl.js → ix-dropdown.entry-CaJIB-ug.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-jo2I2sSs.js";
 import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as computePosition } from "./floating-ui.dom-CAqtPJ4--B_Z-K7Jv.js";
 import { A as ArrowFocusController } from "./focus-BAKpVknt-BX94nhwN.js";
 import { d as dropdownController, h as hasDropdownItemWrapperImplemented } from "./dropdown-controller-D3K9vmFp-CeqyAJWH.js";
@@ -312,7 +312,7 @@ const Dropdown = class {
     this.applyDropdownPosition();
   }
   render() {
-    return h(Host, { key: "ee3eb8e3b68d99b1b5b81fe5540ea3b32ff41f09", "data-ix-dropdown": this.localUId, class: {
+    return h(Host, { key: "04a27e5950bf94cc355c91e0339f9450d46ff103", "data-ix-dropdown": this.localUId, class: {
       "dropdown-menu": true,
       show: this.show,
       overflow: !this.suppressOverflowBehavior
@@ -320,7 +320,7 @@ const Dropdown = class {
       margin: "0",
       minWidth: "0px",
       position: this.positioningStrategy
-    }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: "2ba27fbce21906f5ae9e98fa3527a834d9370938", style: { display: "contents" } }, this.header && h("div", { key: "fa128cf328ac0228b99723fef040448979f610f9", class: "dropdown-header" }, this.header), this.show && h("slot", { key: "2310f848f75cab461581ffb83d71b1b99ba7dc2e" })));
+    }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: "a5a82065838d09c0b0e8aa24887485664d0631b7", style: { display: "contents" } }, this.header && h("div", { key: "08e34e9d67769670fed4328d59d23de0d0bc1ccb", class: "dropdown-header" }, this.header), this.show && h("slot", { key: "ecf81415481bb26881fd6976b5e069ac444bb821" })));
   }
   get hostElement() {
     return getElement(this);