@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

package/dist/collection/components/application/application.js

@@ -93,12 +93,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: 'ad4410edd0461033815c6d0ec103e949d18e2ce7', "data-role": "", class: {
+        return (h(Host, { key: '4e8314dec7968a3b9b2e00a7852dc53c924d0c53', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '1eb897da2aca12dc1c46898242b43bc3b6a85252', name: "application-header" }), h("div", { key: 'fe088442c824724624c76ced27f770401ee43a52', class: "application" }, h("slot", { key: 'f66f4a1955457a017abdb142a8e11c00cf50181d', name: "menu" }), h("aside", { key: 'd5e8f0d6d3c6f8ca4868b197c0e4f767b937a38b', class: {
+            } }, h("slot", { key: '2f4a52a13679af639648164eff165d5dd37ec951', name: "application-header" }), h("div", { key: 'b316ff04f23e4606d54ddcc5531ed884b988e360', class: "application" }, h("slot", { key: '40f4800917fa9f24cdc50c72543e2c7181878775', name: "menu" }), h("aside", { key: '62e0120b64ad942e7dd991b6fe9912b60e36e04f', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '81fc02e6b6ad5c601bc8bb9d1f7a96f659d8b716', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: '0bec68225715417b268573ce2595cce5fcd71e75', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '7f64fda713c3b560d1b9a34f109d280e1de448d2' })))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '211f35df78de174484e914fa646227ba290fb9ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: 'f58973392fbff54f0aef27ae95560cfb36dbd568', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'ac63821ff0fde080c1dd284dcb7df10113cb6477' })))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application-header/application-header.js

@@ -103,12 +103,12 @@ export class ApplicationHeader {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e40a2cbcfbdf369a9c21123a9b6341bed6313298', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-menu-expand-icon", { key: '422fec21218699880932d12132c9a51f61299c1f', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        return (h(Host, { key: '58565e3136e17a2d3cae46a4add8f2ba245b59bc', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-menu-expand-icon", { key: 'da63965f1ced1898c799a48212eb7a4afdf35ffd', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (h("ix-icon-button", { key: '28b220e9f9df0e873b59e74683fbeda86199dde2', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '67ad9303b4d272bd74925401ba3917aeeefb5648', class: "logo" }, h("slot", { key: 'b65674c8bc606ad0582307ddef0c0fa3d2efde11', name: "logo" })), h("div", { key: 'be0b34c2280380397c140e3e0e6a627743d9e863', class: "name" }, this.name), h("div", { key: '627a5534b4e03a64dd005970a8639254cafb2315', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            this.suppressResponsive === false && (h("ix-icon-button", { key: 'fce7acda771398cd8f8f79dcb05254354e9524c8', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '20d47359153147df9636a2170e4987113871e701', class: "logo" }, h("slot", { key: '3889ece809965cd8c5a256e6551b1d4961774977', name: "logo" })), h("div", { key: '4e9c07f44beb7c476d61657bb303764c74ee174e', class: "name" }, this.name), h("div", { key: '099a3a4842da94cd54f789ee29380ab057957550', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: '25a99ef1ea301baa1c8df4daefae710f79371737', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'ba4c1d46798c9cb325b933905df7bb17a4aedfc6', name: "ix-application-header-avatar" }))));
     }
     static get is() { return "ix-application-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application-header/application-switch-modal/application-switch-modal.js

@@ -43,7 +43,7 @@ export class ApplicationSwitchModal {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'd9630d54ee09410a4642c32462a60627394aa48e' }, h("ix-modal-header", { key: '8b6d0de6fbcddc233d0a14890983dc222bf5d2c6', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '7f80e73a60d019138ba34d83d7b64eac6f69ed2d', class: "content" }, h("div", { key: '10dfa16ceb859e19c10952c7d72d6e8cba2c89cf', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '250971132fe98036989dcf058f313c146d74cf3d', class: "loading" }, h("ix-spinner", { key: '157940c79952e2737e1a69700bdf03703f6147b4', size: "medium", variant: "primary" }), h("span", { key: '61453fa7330672b48d86d4c544c4cfbb57327933' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (h(Host, { key: '2c9a4d11f697563924effefae0ca86ca826fa9c1' }, h("ix-modal-header", { key: '09586fc6d884b175ea95e8f4f42e9017c2874ef4', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '44be3f676830e44c4450ac9a85280829d2570004', class: "content" }, h("div", { key: 'd15e8b91de03f40013cfe94cde3159619b8ee8cc', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '5d8cc548c1c7adaa83c89ac329d04be5e6f7a59c', class: "loading" }, h("ix-spinner", { key: '80c9c4adb4546028848d2b47929527b613152651', size: "medium", variant: "primary" }), h("span", { key: 'c06fc0f909d940df03402e360e2a3d64bd9decc4' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
             'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
             _d.apps.map((appEntry) => {
                 var _a;

package/dist/collection/components/application-sidebar/application-sidebar.js

@@ -35,7 +35,7 @@ export class ApplicationSidebar {
         anime(animation);
     }
     render() {
-        return (h(Host, { key: '3ceb080403e0434b8cac86cd74610aa7e407d95c', slot: "application-sidebar", class: {
+        return (h(Host, { key: 'fe0f54c79115877bac6d0032320550ad2e3fe089', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? h("slot", null) : null));
     }

package/dist/collection/components/basic-navigation/basic-navigation.js

@@ -72,10 +72,10 @@ export class BasicNavigation {
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (h(Host, { key: 'b7a08dd07027f01f672abd914adee7a6eb28708d', "data-role": "", class: {
+        return (h(Host, { key: 'f7c1e352f7b85360afaa4aa7302394fbcefaa33a', "data-role": "", class: {
                 'hide-header': this.hideHeader,
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: '09dd326d03dc69d3186de63723b68986c81f2008', class: "navigation-content" }, h("slot", { key: 'fee45f4cbc111253d01e01fe9b46d81b45e46af6', name: "menu" }), h("div", { key: '1a7d9b9ba3c12e33ef44572963daba3acc894ff3', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '29b9da8bc571e20c87cc3c8354c54e141f673ce8' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: 'bbd969c401308a804a6b8973a038daca551fc8c4', class: "navigation-content" }, h("slot", { key: '3b09f85c77fda585b91786049d590e94c6bc3717', name: "menu" }), h("div", { key: '05b1eb22f097cf421f0ed0c747364c5b33418190', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'e46d1d8ddc56270570e28ea814087506202e7217' })))));
     }
     static get is() { return "ix-basic-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -69,7 +69,7 @@ export class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: '88564e42848afe9cd686ce212f45e0c42c130004' }, h("ix-dropdown", { key: 'e8e14815157a506130c96700c67b0a6dca823fe2', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (h(Host, { key: '6fd820850cf0fce9b8f4e6d16587ad3458062c48' }, h("ix-dropdown", { key: '46a3b21d0be6c27f8cc5050b5cb420ce1d55c046', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef
                 : null, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -86,7 +86,7 @@ export class Breadcrumb {
             return (h("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: '043028f06980967ebb599cb823eb7c2073d3af5a', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '7d8f489c5244be0f70602b6078d29f7581194a69' }, h("slot", { key: 'a2b8a891c1232e6ac47fb45ac109c1cd70e523fc' }))), h("ix-dropdown", { key: 'f9006cf33c009843f968be24bf3e6354faf64207', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: 'd4ea11b5d3417f434ef2485075cb08c66fe7169e', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '97fa52f7ddf3fc18ad7a90b8f28cf561d238146f' }, h("slot", { key: '33b1ce72c69620d9bd7b702c7bf5540c081c687d' }))), h("ix-dropdown", { key: 'e635c5495fdfd8e21f6e233d3ca6b5c444e099dc', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,

package/dist/collection/components/card-content/card-content.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h(Host, { key: 'afb985c12152039a92c11925d283c35d2e63d9f0' }, h("slot", { key: '0d05bd2d9eb17437831df580cc9e9822880ef01e' })));
+        return (h(Host, { key: '17ef18ecf4efe031b707524053d81f91db482696' }, h("slot", { key: '5e91dbb38a4bcc64e36c7bbacb1e2de92f877559' })));
     }
     static get is() { return "ix-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-list/card-list.js

@@ -133,16 +133,16 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: 'ada39cb89614cd0cad3347eedf2be1e5c41feff1' }, h(CardListTitle, { key: 'd6f36fae6be5f42dad90cf857ce0299f815884ca', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: '59b22287fe21651d515b79a8394b91f600f07a7a' }, h(CardListTitle, { key: '8f81a2633acb901e848c243a51d60752b35e5765', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '3cd90edbe2b68d1af6cf513dda3d421e4e8726bd', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: 'd53f0dcc4707057dedbc08c3b57f9cde8887f225', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '204fb870de26ad28183bfec6d46e1156c2f05727', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '74e389bb906687dff585eabb348fd6265af7d401', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '8bd77dd2e09e6cdac4fa773786f6d811305b8209', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '9a2ce4357b2e065c35c93c9fc24ef21c31ca0827', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

package/dist/collection/components/card-title/card-title.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: '55dcaeda7be00f1d398fc7759be147dafbccb42f' }, h("slot", { key: '4670e61c8c09eec34f72cb3c0a39e1d410eb5b4b' }), h("div", { key: 'f789be6128ff468e25fd2cbaadd17113ecfe4fe1', class: "title-actions" }, h("slot", { key: 'c1799b44887b9c0e7145e178aec423ea39a0c02d', name: "title-actions" }))));
+        return (h(Host, { key: 'c5c2ca3a18e299a6093ad6abbaa1c5249cfa391c' }, h("slot", { key: '6d9c155e807d25a85878f7c10e0e6ca34472f06a' }), h("div", { key: 'd7ce177e5b865646435a794b197f0b7fca89fc5e', class: "title-actions" }, h("slot", { key: '5c44f29c04f0e8960d64dd5b6aa5f4a740d6c175', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/category-filter/category-filter.css

@@ -1169,14 +1169,6 @@ input:read-only, input.readonly {
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *
@@ -1210,9 +1202,7 @@ input {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
+  -moz-appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -1238,20 +1228,11 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
+input.hover, input:hover {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
-  border-color: var(--theme-input--border-color--hover) !important;
-  background-color: var(--theme-input--background--hover);
-}
-input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus) !important;
-}
-input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+input.focus, input:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1304,6 +1285,7 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 textarea {
+  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 textarea {
@@ -1322,9 +1304,7 @@ textarea {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
+  -moz-appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -1350,20 +1330,11 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
+textarea.hover, textarea:hover {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
-  border-color: var(--theme-input--border-color--hover) !important;
-  background-color: var(--theme-input--background--hover);
-}
-textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus) !important;
-}
-textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+textarea.focus, textarea:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1463,50 +1434,6 @@ form:not(.was-validated) .valid-feedback {
   display: none !important;
 }
 
-textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),
-input.ix-info:not(.disabled):not(:disabled):not([disabled]) {
-  border-color: var(--theme-input--border-color--info);
-}
-textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,
-input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover {
-  border-color: var(--theme-input--border-color--info--hover) !important;
-}
-textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,
-input.ix-info:not(.disabled):not(:disabled):not([disabled]):active {
-  border-color: var(--theme-input--border-color--info--active) !important;
-}
-
-textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),
-input.ix-warning:not(.disabled):not(:disabled):not([disabled]) {
-  border-color: var(--theme-input--border-color--warning--active) !important;
-}
-textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,
-input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover {
-  border-color: var(--theme-input--border-color--warning--active) !important;
-}
-textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,
-input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active {
-  border-color: var(--theme-input--border-color--warning--active) !important;
-}
-
-textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
-input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
-  background-color: var(--theme-input--background--invalid);
-  border-color: var(--theme-input--border-color--invalid);
-}
-textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
-input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
-  border-color: var(--theme-input--border-color--invalid) !important;
-}
-textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,
-input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover {
-  border-color: var(--theme-input--border-color--invalid--hover) !important;
-}
-textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,
-input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
-  border-color: var(--theme-input--border-color--invalid--active) !important;
-}
-
 :host {
   /* width */
   /* Track */
@@ -1551,6 +1478,10 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
+:host :host(:focus-visible:not(.disabled):not(:disabled)) {
+  border-color: var(--theme-color-primary);
+  box-shadow: 0 0 0.25rem 0 var(--theme-color-primary) !important;
+}
 :host .reset-button {
   position: absolute;
   top: 0.25rem;
@@ -1581,9 +1512,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
+  -moz-appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -1609,20 +1538,11 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
 :host .input-container:not(.readonly):not(.disabled)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, :host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
+:host .input-container:not(.readonly):not(.disabled).hover, :host .input-container:not(.readonly):not(.disabled):hover {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, :host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
-  border-color: var(--theme-input--border-color--hover) !important;
-  background-color: var(--theme-input--background--hover);
-}
-:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, :host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus) !important;
-}
-:host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, :host .input-container:not(.readonly):not(.disabled):not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+:host .input-container:not(.readonly):not(.disabled).focus, :host .input-container:not(.readonly):not(.disabled):focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1641,15 +1561,6 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
 :host .input-container:not(.readonly):not(.disabled):disabled::placeholder {
   color: transparent;
 }
-:host .input-container:not(.readonly):not(.disabled):hover {
-  border-color: var(--theme-input--border-color--hover) !important;
-  background-color: var(--theme-input--background--hover);
-}
-:host .input-container:not(.readonly):not(.disabled).focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus) !important;
-}
 :host .input-container.disabled {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
@@ -1670,9 +1581,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
+  -moz-appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -1698,20 +1607,11 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
 :host .input-container.readonly::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, :host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
-  border-color: var(--theme-input--border-color--hover) !important;
-  background-color: var(--theme-input--background--hover);
-}
-:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, :host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
+:host .input-container.readonly.hover, :host .input-container.readonly:hover {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, :host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus) !important;
-}
-:host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, :host .input-container.readonly:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+:host .input-container.readonly.focus, :host .input-container.readonly:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1778,9 +1678,9 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
   flex-grow: 1;
   box-shadow: none;
 }
-:host .text-input, :host .text-input:hover, :host .text-input:focus :host .text-input:focus-visible {
-  border: none !important;
-  outline: none !important;
+:host .text-input, :host .text-input:hover, :host .text-input:focus-visible {
+  border: none;
+  outline: none;
 }
 :host .text-input.hide-placeholder::-moz-placeholder {
   opacity: 0;

package/dist/collection/components/category-filter/category-filter.js

@@ -402,19 +402,19 @@ export class CategoryFilter {
     }
     render() {
         var _a;
-        return (h(Host, { key: '97bb9bcad06d6a787b844f74a4333c231761d0aa' }, h("form", { key: '8f26df740ee486e72227861241373fdccaed5b83', ref: (el) => (this.formElement = el) }, h("div", { key: '0a15103e3758ef442af9e5cdcb193ccf428ab588', "read-only": this.readonly, class: {
+        return (h(Host, { key: '460d61c8d2a83d95445b5cad86e1ea2e2fbbf289' }, h("form", { key: '401290f84df0375dd2d23214e10942382dbc28de', ref: (el) => (this.formElement = el) }, h("div", { key: '06d9f1a58cd4daa32d13509142625a91cc4884f4', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: 'bcf843c92c0cb07f4882e154f22beb5b9d585155', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '8f8873087dd4f858d8c05524fa57e60630e455fa', class: "token-container" }, h("ul", { key: 'ac256e8c54bee74655b96e30f7ff01867185f2b7', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: 'b24d1cfd93ac33cb209d2ce516537c72ea0a3010', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '61ab21b44baf97bc8c65cf7ac65f8ee418210b6e', class: "token-container" }, h("ul", { key: 'd4e318bc1204bbf50d9894b5b735f4b2faa03d11', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
                 'category-preview': true,
                 'd-none': this.category === undefined,
-            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '58e035c5bf86c7a4f7cc01e1975a13beaa67ef45', class: {
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '457dee28a04610b7299aa2939c3e1280eca2f16f', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly ||
                     this.disabled ||

package/dist/collection/components/chip/chip.js

@@ -37,11 +37,11 @@ export class Chip {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '1e6668db5698108671872240cae019c50e8903ea', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (h(Host, { key: '8ede968301d60515bc378c80141926ad75fab0cd', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, h("div", { key: '7d1533fb6dfdaf15733897e9742c02022505896a', style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: 'ff82604fbd0ed7d74cdd753e1f1690f4bf67959f', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -55,10 +55,10 @@ export class Chip {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '012939f0b16b4c0ff00590cb6e503c6a42d79771', class: {
+            } }, h("ix-icon", { key: '7e033b4f17e195a9ce75e3fbea992290180feb1f', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: 'fa5866074c8ce5bfbceb8afca799a2a7953c2bf6', class: "slot-container" }, h("slot", { key: '848661158f74d1479437d905fb1e6f2a742b70b6' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), h("span", { key: '0d0bafd87e80596388ff1b74bcb9fa6024f6fe03', class: "slot-container" }, h("slot", { key: '057958812ca98820f4e039b7c5e2f016d27854c6' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -20,12 +20,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '4dab1c37e7e25e92aae59819e21cdca4f303b917' }, h("div", { key: 'e1d4436222fbede16fe740f1f8b712c4227b9f26', class: {
+        return (h(Host, { key: '61f9325ce908e838c83a286da21471c8f081cf7e' }, h("div", { key: '66adfdde8a6f7e4cec46bc8ac3111f9fd344462c', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '0df5783d73aac22f87b644942b02ac2c1c9a4a66', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '00a1dffb70b39ae24c7ffc7a02649f5c870e95e9', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '94713592851aa18c3b0b030c4a80e278cabbec35', class: "content" }, h("slot", { key: 'f78d233860cf1a36132a5b725791292524385a84' }))));
+            } })), h("div", { key: 'd27dfeb1305abb6cacdf16a5476e5d7b32d6f3ba', class: "content" }, h("slot", { key: '054a581bc21257f46c3377c53c0e8dbacc4321b5' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -17,7 +17,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '27bd6e8926336757d4cb993ab8ff978a1a85479e', style: style }, h("slot", { key: '3be8052533266ea875e2f0009720f07a4dbdd16b' })));
+        return (h(Host, { key: '5e5e54a887244e85620d34eb2759fadf20883dbd', style: style }, h("slot", { key: '14c51da716e0715e205f28181a3d51813ad88027' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js

@@ -427,7 +427,7 @@ export class DatePicker {
         return rows;
     }
     render() {
-        return (h(Host, { key: 'c1c73273107f212831840ddb94235c9d3282c675' }, h("ix-date-time-card", { key: '5710238de0deaca8ecdc8eaeb83597ae8ad3699f', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: '4db778442b74920ba9f80d24d178ea56e8cf82e1', class: "header", slot: "header" }, h("ix-icon-button", { key: 'b142148db83890499f7d34e6d354925959d461ae', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c91debc3326cecfca594d9a716d4c9bc234dd4a6', class: "selector" }, h("ix-button", { key: '94511292c5c14747310415a0e16bda25e8aeb939', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '0507d315a40f8c33495e27cf8962a176fcf99ddd', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'dde02196313adc619f8dc5073d168ad041a20e48', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '957ebddc08f671f0d51e6cc22c45544b323d03f0', class: "wrapper" }, h("div", { key: '94a9246c658279736356b065791c1c14c0876d47', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '8af75c66d9a0c1d8c67ad21d70f99a0e76ebbc4e', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+        return (h(Host, { key: '559881c8673da97e842398f4bcfe67ef5ff27794' }, h("ix-date-time-card", { key: '4550d5f5a242be0ff07110cc400ef12795475c5c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'f10ccab02142ae7461ac4b4ba4e8a8eb57123438', class: "header", slot: "header" }, h("ix-icon-button", { key: '52b171c5e04a5bbcb0832f0e6033947735521601', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c48d51b3f22c9862c8006520530559ed44d16372', class: "selector" }, h("ix-button", { key: '8c155fcbafb7c3f32dab3c9ebc912153813ce207', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '74c9634e13886d26238b4ee2262314914b1e8cf8', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'ba249019d78a59e65f3a479a3ea8315b5990bcac', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '39365087bbb4c4dd4e0329828f61a90a1247b744', class: "wrapper" }, h("div", { key: '017d16a032a473b0e791c8dc342b5e62481212e3', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '1bef58292da8545924f53fdbeddbc864936a56ef', 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;
                 }
@@ -441,12 +441,12 @@ export class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: '8dc9183422555c9891aceb3318e1507ffa2f1fbe', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: '3999bfcc5b2477ddca4b0488dce80eb9261ffc42', class: "grid" }, h("div", { key: '244bc39cad1ed81f0820c4907c773cbfaab8726d', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'f414faea937a05dd2690e82d01daf1f444fbce25', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'b79a961fbfc8c8dd821a83ab172dd7146acc5ade', class: "grid" }, h("div", { key: '7651643c6320b8598b52ffaa45dc70498854d1ad', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
             return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)))));
-        })), h("div", { key: '26d3b5e759582cbd10860fe9acdb675e9d97f1eb', class: {
+        })), h("div", { key: '0e6b9845bfdb760777cbd0f2f8419aeb5b667799', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: 'b3109bb9dfd3dcf518b58f6bc3a888632ca9469b', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'bb02236b3e41f3168aa2d5aad2c8e4aa9af90a49', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-time-card/date-time-card.js

@@ -28,7 +28,7 @@ export class DateTimeCard {
         };
     }
     render() {
-        return (h(Host, { key: 'fa0c2f27c199b297d27b9731d63fdfb2aa7e61c9' }, h("div", { key: '4332722d538fc8d791a97d2803cfda2c1bf4c1cd', class: this.cardClasses() }, h("div", { key: 'e611c5e65a9074a12569be57b1f867885e38782d', class: "header" }, h("slot", { key: 'fd04904836f2130af3e6e3f28b8a83374b4b529f', name: "header" })), h("div", { key: 'a25f03d3c152c3e537ea694a665f7d7c2a900e0a', class: "separator" }), h("div", { key: '2b927b2f93d741d8e79adef986887f30507bcc27', class: "content" }, h("slot", { key: '7edd1e2f07fa885302f9a3859830a5dab9ccb7e1' })))));
+        return (h(Host, { key: 'b699133fd52ef092307f90f515aa7046a99cd21f' }, h("div", { key: '938a7c031dae445fee084ea8c1390627b1743bfb', class: this.cardClasses() }, h("div", { key: '1d20df2d528d8219a7fcea504f63da8a07a4fe74', class: "header" }, h("slot", { key: '0dadc7cb6813210aa9de4299f86a2e1b8ed01764', name: "header" })), h("div", { key: '79a1560d676b4d7583edf9c2fc14be75d4a35514', class: "separator" }), h("div", { key: 'e0f633c51c1167383fc9f75d153cfb20ee77bc39', class: "content" }, h("slot", { key: 'eb8a5596284dd1a461d7f83abe3ec94ac0ebe76c' })))));
     }
     static get is() { return "ix-date-time-card"; }
     static get encapsulation() { return "shadow"; }
@@ -45,15 +45,15 @@ export class DateTimeCard {
     static get properties() {
         return {
             "standaloneAppearance": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -62,7 +62,8 @@ export class DateTimeCard {
                     "text": ""
                 },
                 "attribute": "standalone-appearance",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "undefined"
             },
             "individual": {
                 "type": "boolean",

package/dist/collection/components/date-time-card/date-time-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-card.js","sourceRoot":"","sources":["../../../src/components/date-time-card/date-time-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;0BAOO,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;gBACrC,CAAC,CAAC,IAAI,CAAC,oBAAoB;gBAC3B,CAAC,CAAC,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBAC5B,4DAAK,KAAK,EAAC,QAAQ;oBACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBAEN,4DAAK,KAAK,EAAC,WAAW,GAAO;gBAE7B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"date-time-card.js","sourceRoot":"","sources":["../../../src/components/date-time-card/date-time-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;oCAEQ,SAAS;0BAKV,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;gBACrC,CAAC,CAAC,IAAI,CAAC,oBAAoB;gBAC3B,CAAC,CAAC,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBAC5B,4DAAK,KAAK,EAAC,QAAQ;oBACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBAEN,4DAAK,KAAK,EAAC,WAAW,GAAO;gBAE7B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance = undefined;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/datetime-picker/datetime-picker.js

@@ -52,7 +52,7 @@ export class DatetimePicker {
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: '94d1ca87f91601415fe5a21075f84cd7da6acb28' }, h("ix-layout-grid", { key: '62717105d6b7d0891e5639c3077aa8a863b792ac', class: "no-padding" }, h("ix-row", { key: 'f689afd3bca916309313a5a84871279855af089d' }, h("ix-col", { key: '0f460e11dd5a31d6792b10375e3920030a84618a', class: "no-padding" }, h("ix-date-picker", { key: 'fa18dbf1eba23b4866b7546dfce20a8cb36a9bbb', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '5abb9b2b267a76af3f12f64b45023f9ac2425544', class: "no-padding" }, h("ix-time-picker", { key: '7dfd2a2dbcf5cc8a5d579cacdc72b8ff8a4e4b80', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: '8431567e445a1971c6199a7acd82407ac4ac744d' }, h("ix-col", { key: 'f23276218e9e2b8f81b9b552cd415a3723c13f50' }, h("ix-button", { key: '879c7d43ab47c4345dc5fe11dabb9eb7fb6ebe4b', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (h(Host, { key: '245fa3202c8983bc8eff53d4078c2a6a8daa0810' }, h("ix-layout-grid", { key: '1bc34611a653f3dea08ee0be6a336766da38b914', class: "no-padding" }, h("ix-row", { key: '26eef283266f46fb5a19fcaf1d78f985119cec3a' }, h("ix-col", { key: 'd4ac83db8977067d5c178fb48eac1acc1adca898', class: "no-padding" }, h("ix-date-picker", { key: '967af43189787bc677ff273de023b43d9e3b0019', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '53bbc9d021687f71f211b6d4091e421b7374ae56', class: "no-padding" }, h("ix-time-picker", { key: 'da5a855b94d37b1424de7f10804e707e9d082139', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'aa564cb9741fda50e046a508cb9e2ad985ed11d7' }, h("ix-col", { key: 'a13d931565a1165e262070e6e3d637fce6da38c6' }, h("ix-button", { key: '6769327a6e405d2b2705c3a64b4b2031e8f80de4', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Divider {
     render() {
-        return h(Host, { key: '6e1de6d2dee4f1184fa5e7791dd3032a1ed93fa5' });
+        return h(Host, { key: 'b940598630bbccaae3d37bfb9fef71c35e777a14' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }