@siemens/ix 5.0.0 → 5.1.0

package/dist/collection/components/checkbox/checkbox.js

@@ -20,6 +20,7 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
 import { HookValidationLifecycle } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
+import { hasSlottedContent } from "../utils/shadow-dom";
 /**
  * @form-ready
  */
@@ -69,6 +70,8 @@ export class Checkbox {
      */
     ixBlur;
     touched = false;
+    hasDefaultSlotElements = false;
+    defaultSlotElement;
     inputRef = makeRef((checkboxRef) => {
         checkboxRef.checked = this.checked;
     });
@@ -86,6 +89,15 @@ export class Checkbox {
     componentWillLoad() {
         this.updateFormInternalValue();
     }
+    componentDidLoad() {
+        this.updateDefaultSlotElements();
+    }
+    updateDefaultSlotElements() {
+        this.hasDefaultSlotElements = hasSlottedContent(this.defaultSlotElement);
+    }
+    get isLabelLess() {
+        return !this.label && !this.hasDefaultSlotElements;
+    }
     updateFormInternalValue() {
         if (this.checked) {
             this.formInternals.setFormValue(this.value ?? 'on');
@@ -113,13 +125,14 @@ export class Checkbox {
         return (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, this.indeterminate && (h(Fragment, null, h("rect", { width: "18", height: "18", fill: "transparent" }), h("rect", { x: "3", y: "8", width: "12", height: "2", fill: "var(--ix-checkbox-check-color)" }))), this.checked && (h("path", { d: "M3.65625 8.15625L8.4375 12.9375L14.625 3.9375", stroke: "var(--ix-checkbox-check-color)", "stroke-width": "2" }))));
     }
     render() {
-        return (h(Host, { key: '7cf9106ea2b83fcc4913a4552cf91c09f0a0ec16', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
+        return (h(Host, { key: '9c353db29458af8bf9fff3a1433791dcaedb9e76', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
                 disabled: this.disabled,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'ea4e86f56eb29791d77991e31a95bc0e8958b943' }, h("input", { key: '59446931420ba7c117d6b8bc392cdcd5c99723ae', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: '842691bcb514facd3f0588b8d49e069ac6655866', disabled: this.disabled, class: {
+                'label-less': this.isLabelLess,
+            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'd0ed641122caa2175facad671e038b5f6f61926a' }, h("input", { key: 'ce50b07c238ecf34096c4294d7795f585b896836', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("div", { key: '81b24e66445a7a79dbf0ee2cfd129b70d74f9b74', class: "checkbox-button" }, h("button", { key: '180a94cca8a27191d0853356e814e94af7d1edc5', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: '92c580ec9a1ffdb83b0d7dc5d0d8a5addfad7432', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'ae78de9041287d4ea3ad3820be9ba6f4fc062b2e' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark())), h("ix-typography", { key: 'c2eef4e975fcb6fde8a381818896d74af3e6d5a3', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'c3b38ea2eba94a7093fa9d9394cfd197144cdec9', onSlotchange: () => this.updateDefaultSlotElements(), ref: (element) => (this.defaultSlotElement = element) })))));
     }
     static get is() { return "ix-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -276,6 +289,11 @@ export class Checkbox {
             }
         };
     }
+    static get states() {
+        return {
+            "hasDefaultSlotElements": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "checkedChange",

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -102,10 +102,10 @@ export class CheckboxGroup {
         return Promise.resolve(this.checkboxElements.some((checkbox) => checkbox.checked));
     }
     render() {
-        return (h(Host, { key: '7ce000341dfbf0b447b05cf56eb0c0f0ce6ced71', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: 'c993e1c79c87c4bf67937c1656c30959cc290f78', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: '78a0cfe64c2f3f2de8574282f36531e4c4aa9012', class: {
+        return (h(Host, { key: 'c4fc534271973ace749f101e65f59286d9ac2155', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: '2bd30dc064e6f611b8ae14c3d11f108f91dfb8d7', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: '86a167bd0b683913f7cba7250f64bd93f6c319a5', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '1b90032207b05a058e5639e08c997269a683b504' })))));
+            } }, h("slot", { key: 'a46e693b49c0f23214fb8dbd5c089e42652b746f' })))));
     }
     static get is() { return "ix-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,14 +152,14 @@ export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
             !!this.inheritAriaAttributes['aria-labelledby']?.trim();
         const hasTooltip = !!this.tooltipText || this.hostElement.hasAttribute('tooltip-text');
         const needsGroupRole = hasAccessibleName && (showClose || hasTooltip);
-        return (h(Host, { key: 'ce26e0d24d71d552acdd962c5b277319a9ad8440', role: this.getHostRole(needsGroupRole), class: {
+        return (h(Host, { key: '9f724c90d7b7b50436fd53dac1c9e473b568f8f6', role: this.getHostRole(needsGroupRole), class: {
                 inactive: this.inactive,
-            } }, h("div", { key: 'e0d71bc62636c5d592260b8b0db1ecae4692f451', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: 'e04d0c14e50d73655c0caf406373e3d678abfa69', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: '73704c677c0d29106d9a17ed72713d35a73fca33', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '1758dc64e728902d6c2fbf82913a66afb3a103e5', class: {
+            } }, h("div", { key: '5fe02566c2d6b0a5ef6c6bc5c75aa8a1c9eae41c', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: '9fe4c5a27535af0dc8bff42cc2d4e7277e91e7bd', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: 'fa78760c9912d9642d95b60e401f599de00bc26c', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '34307f0a33c01af655f4d37498a6fc98dfc499c5', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: 'fa4ad21840fab8b2d3a041c08a269f0311c20392', class: "slot-container" }, h("slot", { key: 'c68dfc344ea985bc18dc29f4c3face2bd0238fc7' })))), showClose && (h("button", { key: '3f084d56ec7b791aa89418dfe00efe66e4c673aa', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
+            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: 'c2093240153933547f8c1e6e5cbe80d664c5aafa', class: "slot-container" }, h("slot", { key: 'c08bf6660d91b77e9d640583a9e2eb5cc4de7365' })))), showClose && (h("button", { key: '233aaa96d9650b9b357b7bae028f9baafd312517', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
                 this.closeChip.emit(event);
                 event.stopPropagation();
-            } }, h("ix-icon", { key: 'f5a87d2fbc9bfb907b746219e65ec8d4e75f645c', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
+            } }, h("ix-icon", { key: 'f095e50123273af0a21f3321e6b81358f1cfe8b3', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -77,9 +77,9 @@ export class Col {
         };
     }
     render() {
-        return (h(Host, { key: '92516eb3dfd8c82f3edd51707861615729ae0d45', style: {
+        return (h(Host, { key: '8f9bb67a9721a22dab39e140b0e180a868839416', style: {
                 ...this.getColumnSizeStyling(),
-            } }, h("slot", { key: '43e5c2cf90ba0f62a01bc47f22420c9d102fd7c4' })));
+            } }, h("slot", { key: '2d34daa2051b168c8b4dd61233d80195be90f3d5' })));
     }
     static get is() { return "ix-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.css

@@ -26,7 +26,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding: 1.5rem 2rem 0.25rem 2rem;
+  padding: 0.75rem 2rem 0.25rem 2rem;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -84,5 +84,5 @@
   position: relative;
 }
 :host .content-header.slotted {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }

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

@@ -18,12 +18,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: 'c55017944f9bae7571742eace9f6e7c741e736e3' }, h("div", { key: '42bb2691481a6e55ec4ad1f1e1e075e96cedd0df', class: {
+        return (h(Host, { key: '2cb8428708f3a1e815704254035676f742cd6f30' }, h("div", { key: '4e275d8af38da243e29b46bb8e5dcc9e9d23b1da', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: 'ea93135ea0b4a1e7a20a159446280ceb24aa4b01', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '3e4a6609305c444deaacbf29a60514f300f65301', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '90c0076e390d2a7b9a5c7be22ba05fba1e2302bf', class: "content" }, h("slot", { key: 'aff4024b33c30f527a951df5656d105847c87fe6' }))));
+            } })), h("div", { key: '893989653b3beaf7bc406e7870db8d8f7d0deba4', class: "content" }, h("slot", { key: '25b54aafbde16ab4d87a0cdbc4a8222dabacb226' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,13 +34,13 @@ export class ContentHeader {
      */
     backButtonClick;
     render() {
-        return (h(Host, { key: '08d49655e0c6990b14505b590d2ba0e94a295db6' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '8afb44c00a90916824175200dd536e56eb949624', class: "titleGroup" }, h("div", { key: '2a27fa1f4b31d9114dfebc9a8aff5729f906b1c8', class: "headerTitleRow" }, h("ix-typography", { key: 'd901bfeee7f8abc8e5007e53c21105f5c79b0a56', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
+        return (h(Host, { key: 'a81bf466bf10e9e7a0794253b246c340a9b92999' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7b81cb2b7c5d48fdd75b631e9ef2b5da9224f455', class: "titleGroup" }, h("div", { key: '59d28222f4bbfd83a94490f10bb67b944e44c79f', class: "headerTitleRow" }, h("ix-typography", { key: 'f6b3985a6b8e2420e4d63a7032b1ff1f12f93679', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
                 secondary: this.variant === 'secondary',
                 titleOverflow: true,
-            } }, this.headerTitle), h("div", { key: '1a846985aeb4a94d9524d1666a271c9c145095a6', class: "headerSlot" }, h("slot", { key: '25543ed73b45c08a9b50912362376fb9fc1906cd', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '288fe9e598a20b6dac48f0a2024c094b6680dbb3', format: 'h6', "text-color": 'soft', class: {
+            } }, this.headerTitle), h("div", { key: '9b1a9f865955f4b02a23a528d61e54959a8992d1', class: "headerSlot" }, h("slot", { key: '8d7d21906e9042de89123de9489b2cd8d8db25b5', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '2b29f3ebde503fa328c10bad48ba5b98455d8a31', format: 'h6', "text-color": 'soft', class: {
                 subtitle: this.variant === 'secondary',
                 titleOverflow: true,
-            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '8e393c872c9332878140746709d4ec57cd3f2a8d', class: "buttons" }, h("slot", { key: 'be658a281dd351bb609ef0f347da991288672fb7' }))));
+            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '0a558d5e3c40ab3e5ebd77c1ff8e0e316e263658', class: "buttons" }, h("slot", { key: 'f54687cd38db7f152f3495beec362f0dc82e2bef' }))));
     }
     static get is() { return "ix-content-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '5b0d3b6ab2e0f7fc79378a854c60e3635e8ab692', style: style }, h("slot", { key: 'fc224d72d60566ddb1ba52ae6457e7458a56cccf' })));
+        return (h(Host, { key: 'af7e2134d1e6a448e96a0a414c3766f51088fb54', style: style }, h("slot", { key: 'a20d56f4601d818ff1d2e7cad497a0facd09c44e' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class CssGrid {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (h(Host, { key: '90eb8b6d89365b75ca151c8f8aa06e8c0ca8d8e9', style: style }, h("slot", { key: 'bbaf70a779b756872793a86ae24e247909ef0b96' })));
+        return (h(Host, { key: '491581fede3e8163cdf43cca11f597b98c5bfe32', style: style }, h("slot", { key: 'ddd975c6bfea2c4abfc3b69d8d0d895a69823756' })));
     }
     static get is() { return "ix-css-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/custom-field/custom-field.js

@@ -63,7 +63,7 @@ export class CustomField {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '58b6b1c90f21d49345286996f1089fb9f0f383f9' }, h("ix-field-wrapper", { key: '13f416719110d2ed029164837d67c01cf81e782e', 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: '94fa34d216ef723f2d8c5d685c359233eb10fb93' }))));
+        return (h(Host, { key: '4194f7081c66e42f9376cf0c8004a705bc053f0b' }, h("ix-field-wrapper", { key: '55a70e2a6500a6945f819004c9b910d7d7decd2b', 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: '8a54f90dc2db37f9a21f2c52f7b4721dbb7acc67' }))));
     }
     static get is() { return "ix-custom-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-dropdown/date-dropdown.css

@@ -206,7 +206,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
   min-width: 8rem;
   min-height: 2rem;
   max-height: 2rem;

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

@@ -231,13 +231,13 @@ export class DateDropdown extends Mixin(...DefaultMixins) {
     }
     render() {
         const ariaLabel = this.inheritAriaAttributes['aria-label'] || this.getButtonLabel();
-        return (h(Host, { key: '04bd340613c20abbe3b836dab11637d7991fd295', onFocusout: (event) => {
+        return (h(Host, { key: '22f023b7eebe6aeb1d1fb43e6fd9fca761fbb654', onFocusout: (event) => {
                 const relatedTarget = event.relatedTarget;
                 if (!relatedTarget) {
                     return;
                 }
                 this.closeDropdown();
-            }, role: "presentation" }, h("ix-button", { key: 'a95f89b7d276e96aebd318e2d8ca100d113d599a', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '45614c12ee610cda3ddf8cbc740a0df76ed33cc0', focusTrapOptions: {
+            }, role: "presentation" }, h("ix-button", { key: '79990d758b39d7f8438d7333f1c148f94665f157', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '04df9639b41dc3084e0a035e39441a64fb5398aa', focusTrapOptions: {
                 excludeElements: true,
                 trapFocusInShadowDom: true,
             }, focusHost: this.hostElement, id: "date-dropdown", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, onShowChanged: async ({ detail: show }) => {
@@ -251,18 +251,18 @@ export class DateDropdown extends Mixin(...DefaultMixins) {
                         datePicker?.focus();
                     });
                 }
-            } }, h("div", { key: '074b28feb93dea7482763f380870b0755a752419', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: '25983a11b1ac61f12b4bbd140871bae70b3a813f', class: {
+            } }, h("div", { key: '23f80678526a96c98c84130b820932ac449bfdb6', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: 'e0ca957c06b3bf7ab910687958d9744e1bccba5e', class: {
                 'quick-selection': true,
                 'border-right': this.selectedDateRangeId === 'custom',
             } }, this.dateRangeOptions.map((dateRangeOption) => (h(BaseButton, { disabled: false, iconOnly: false, iconOval: false, selected: false, loading: false, type: "button", variant: "subtle-tertiary", onClick: () => this.onRangeListSelect(dateRangeOption.id), ariaAttributes: {
                 'aria-label': `${dateRangeOption.label}: ${dateRangeOption.from} to ${dateRangeOption.to}`,
-            } }, dateRangeOption.label))))), h("div", { key: '1090e03e941d7a3914e3d4e3f3850bebe195f2ec', class: "picker-wrapper" }, h("ix-date-picker", { key: 'fd864d0454c857db7016e3d2ed9322617fbc79eb', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, dateRangeOption.label))))), h("div", { key: '47498278df33744c548709315f7e4f88b946c1cb', class: "picker-wrapper" }, h("ix-date-picker", { key: '7d2f12fcc2cd5018edfec3aa387f5ede6704bd04', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = {
                     ...e.detail,
                     id: 'custom',
                 };
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'bdd9ca166ed48d1e0599e5e9b0da38ac6f3c1b18', class: "pull-right" }, h("ix-button", { key: '3fd556de5401f53c83804665669c0c9f42ce6821', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'b1b223d1116fdd455887e985aa8906c24de5b990', class: "pull-right" }, h("ix-button", { key: 'f788cee56c6aefaa3de91cabad89c01499d1b036', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                     this.closeDropdown();

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

@@ -27,6 +27,7 @@ import { makeRef } from "../utils/make-ref";
 import { DefaultMixins } from "../utils/internal/component";
 import { InputPickerMixin, } from "../utils/internal/mixins/input/input-picker.mixin";
 import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
+import { forceTabIndex } from "../utils/a11y";
 /**
  * @form-ready
  *
@@ -310,7 +311,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                 this.emitValidityStateChangeIfChanged();
             }, onKeyDown: (event) => this.handleInputKeyDown(event), style: {
                 textAlign: this.textAlignment,
-            } }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { tabindex: -1, ref: (ref) => (ref.tabIndex = -1), "aria-label": this.ariaLabelCalendarButton, "data-testid": "open-calendar", class: { 'calendar-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconCalendar, onClick: (event) => this.onCalenderClick(event) }))));
+            } }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { tabindex: -1, ref: (ref) => forceTabIndex(ref, -1), "aria-label": this.ariaLabelCalendarButton, "data-testid": "open-calendar", class: { 'calendar-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconCalendar, onClick: (event) => this.onCalenderClick(event) }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -349,7 +350,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateUnparsable);
-        return (h(Host, { key: 'af47e79c993c4001a8c697b4bfa3b71ddf9203c5', class: {
+        return (h(Host, { key: 'cd25d18346e36dce13464172417c605bb4883275', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, onFocusout: (e) => {
@@ -359,7 +360,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                     return;
                 }
                 this.closeDropdown();
-            } }, h("ix-field-wrapper", { key: 'f0dae49752dcad20893c2a5bbfc1adf3f4b5cf0d', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: 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: '835e7a2a80089aaf8c1837640750984433213ae9', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: 'e594e88d3f5629dfe9701eea33fffb714a402252', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: 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: '06f1a86337a9f3b03c7d06011b27375ff619a72f', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
             }, focusTrapOptions: {
                 targetElement: this.datepickerRef,
@@ -367,7 +368,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
             }, callbackFocusElement: async () => {
                 this.datepickerRef.current?.focusActiveDay();
                 return true;
-            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-date-picker", { key: '07e0853b98afa498819fe3b4c8a87915368f0be6', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: this.from ?? '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-date-picker", { key: 'dc2237c371745ce1734af52ae8497f8f5276d9c7', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: this.from ?? '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
                 const { from } = event.detail;
                 this.onInput(from);
                 if (this.initialValue !== from) {

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

@@ -360,4 +360,8 @@
   top: 0;
   height: 1px;
   width: 50px;
+}
+:host .month-selector,
+:host .year-selector {
+  --ix-button-padding: 0 0.25rem;
 }

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

@@ -681,14 +681,14 @@ export class DatePicker extends Mixin(...DefaultMixins) {
     intersectStart = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     intersectEnd = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     render() {
-        return (h(Host, { key: '24023290f0be6f05b07f49a8dd4b4250691d4786', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
+        return (h(Host, { key: '3a758d5378cce782272d54ed210f854e1be9bee4', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
                 if (hasKeyboardMode()) {
                     this.changeFocusedDay();
                 }
-            } }, h("ix-date-time-card", { key: '8b027dc4451810fff9a6206494fd3a3929d06c88', corners: this.corners, embedded: this.embedded }, h("div", { key: 'fdcce83484f260288adb734b499b51abb30a7caa', class: "header", slot: "header" }, h("ix-icon-button", { key: 'c7a6149d7ccd508a6bde054894416dbb18c6980d', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: '0615b2bca767f539a87aef439c63a4b71ccfa5a7', class: "selector" }, h("ix-dropdown-button", { key: '30ba87301cbf3beceb9ad1276f04f4980b615ef8', focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
+            } }, h("ix-date-time-card", { key: 'fcdc8c2d76a536bd25328bae925cfbff49dd5e0f', corners: this.corners, embedded: this.embedded }, h("div", { key: '93a206ed565efbce5401e10a8f23aa6ac3a61f69', class: "header", slot: "header" }, h("ix-icon-button", { key: 'f05099c413c1c0c9537aec0bcd8aaddbdd6cad51', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: 'f1b99b9ac1efc8048caab32a1d47873e04075f57', class: "selector" }, h("ix-dropdown-button", { key: '260c713c94550e0e0b61abf9920d20f61881342c', class: "month-selector", focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
                 // Need to stop event propagation to trigger initial focus handling of the calendar days
                 event.stopPropagation();
-            } }, h("ix-typography", { key: 'fe2144b20ce35fafcb481373880cea356b569a43', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: 'b1da89f7258e6e19ff82a9aea226d546d1a765c8', focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
+            } }, h("ix-typography", { key: '793f53297fe36421acfddfa5a863eacdfe6d9cfb', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: '110d9b7237d5a99e30fd740f2d5113a80b5662e8', class: "year-selector", focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
                 // Need to stop event propagation to trigger initial focus handling of the calendar days
                 event.stopPropagation();
                 if (event.detail) {
@@ -710,10 +710,10 @@ export class DatePicker extends Mixin(...DefaultMixins) {
                     this.intersectStart.disconnect();
                     this.intersectEnd.disconnect();
                 }
-            } }, h("div", { key: 'c691f17e0b907711728489764a4ae194bb54da2c', class: "infinite-scrolling-spacer" }, h("div", { key: 'c19074e1f348c3e900d44ba71afb1f2aee5fe863', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: '1c5ca1280e23bf1f8375495145fb9030cbbc0973', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: '1801c9bfe5d160d44ce4c3036877ddf7c0fd504b', class: "infinite-scrolling-spacer" }, h("div", { key: '4991dac359e092b5bed9b64527d72e4981471af0', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: 'ad36cae3ccbd6a03cffe61e082a3dd74ee08116c', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '2c1c1ffdb2e58307661b8a65823994a135d51823', role: "grid", class: {
+            } }, h("div", { key: '1ef79a11c880ceda187e4275af1921cb230f1716', class: "infinite-scrolling-spacer" }, h("div", { key: '2d9fc10794f8efe1a8aef837008fb3a0ebe2ca29', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: '152c681624d375241d55c641b8013a2ce8b9874d', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: 'a8770b507077d201df514f35a46d71f3771289df', class: "infinite-scrolling-spacer" }, h("div", { key: 'e14c2e5bec16bab3d08268ae6bc61303e26355da', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '16b7fd43d4d514b628a4ac90f54c0dcd54380fd3', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '869b001d286f35e721e31afa4546865f3ed02d1c', role: "grid", class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, h("div", { key: '32d6045a99385719068593f29ff1766727290546', role: "row" }, this.showWeekNumbers && (h("div", { key: '5b8842263324526d660e7f96b3da2d86f5cdb0cc', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
+            } }, h("div", { key: 'b95a4e9f19c16ae42ac8e1396f43cedcc829893d', role: "row" }, this.showWeekNumbers && (h("div", { key: '5552fb1ecbfb5f71c07b29e838f146662edf9e9e', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
             return (h("div", { role: "row" }, this.showWeekNumbers && (h("div", { class: "calendar-item week-number", role: "rowheader" }, week.weekNumber)), week.dayNumbers.map((day) => {
                 return day ? (h("div", { role: "gridcell", "aria-selected": this.getUtilitiesBasedOnDay(day).isSelected()
                         ? 'true'
@@ -728,10 +728,10 @@ export class DatePicker extends Mixin(...DefaultMixins) {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, autofocus: this.getUtilitiesBasedOnDay(day).isToday(), onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${day} ${Info.months()[this.selectedMonth]} ${this.selectedYear}` }, day)) : (h("div", { role: "gridcell" }));
             })));
-        })), h("div", { key: '194191ba4ba4d80cea105eb3b1ec5bdda9f040a7', class: {
+        })), h("div", { key: 'fddd1c1fc28e5f285551bc7a197c3ddc022e7bcb', class: {
                 button: true,
                 hidden: this.singleSelection || this.embedded,
-            } }, h("ix-button", { key: 'dcfeaf1772943b610a39aadaf6282c307913e020', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, h("ix-button", { key: '636a74b44e1e626b618d2c86bb1c5093c82e82e3', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, 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

@@ -42,11 +42,11 @@ export class DateTimeCard {
         };
     }
     render() {
-        return (h(Host, { key: '9a9b328c1d278112a8e210bdc37985dbe67d48fc' }, h("div", { key: 'bd95d23284c701589095190af6e7d197dec93700', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '42a727cd5e778e17e889011da459bf81f9242283', class: "header-container" }, h("div", { key: '46144e13fca52e580c252363e5e742d51436371f', class: "header" }, h("slot", { key: '7cad9585fdf33653186f46d22132cf6480356b20', name: "header" })), h("div", { key: '83a64b078b5902764bf08e5b002bcaa5f37d2ce9', class: "separator" }))), h("div", { key: '03ffcb6a96370bf556e57413fca28fad57b2c155', class: {
+        return (h(Host, { key: '2c99b24d79ebec2d725f97129fe3f342c522d079' }, h("div", { key: '5e2a5de64db6ef617518205fceb9bfa8d589aa23', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '03a4337b9d32f39e6269139f4daa7abc0be03782', class: "header-container" }, h("div", { key: '6ece0fe49bd23f36cef66adca6ebcff1889f7337', class: "header" }, h("slot", { key: '9119418fcc90d838f5cb91e424fb19c30b53fe55', name: "header" })), h("div", { key: '5ac0ad42605f8f4ca4352494f55e663e001e3188', class: "separator" }))), h("div", { key: 'a9d30cbca8fff9cb3821c7643054654e855750cb', class: {
                 content: true,
                 'content--time-picker': this.timePickerAppearance,
                 'content--no-padding': this.noPadding,
-            } }, h("slot", { key: '2cbfe2f27f5a449adf329a2872cddac1ba8b687d' })), this.hasFooter && (h("div", { key: '13c6595028d939e22eb01cb65190f51a304553a0', class: "footer-container" }, h("div", { key: '626e82bbb3cdc612c8c0769fd98513da7f45968f', class: "separator" }), h("div", { key: '35e2bd253a846915d9fcd4adb1b1d78839614a4c', class: "footer" }, h("slot", { key: '597304726e19fbf3ac6eaa765d4944595cc07c5c', name: "footer" })))))));
+            } }, h("slot", { key: '6054b36f5cd386adde31aa4d7faa1fb63848a146' })), this.hasFooter && (h("div", { key: '60e9f4ec42a71ce72e32ad698acf0bcee6913b46', class: "footer-container" }, h("div", { key: '9c9b0a086adee3d0c0224e45f9c1ef0d37c3f9ba', class: "separator" }), h("div", { key: '59d1fac830d3632d3da09dd0c8183a83a619c9c3', class: "footer" }, h("slot", { key: '73a026a1015c6b900cea1dc0423cc616b7a3cd17', name: "footer" })))))));
     }
     static get is() { return "ix-date-time-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -489,10 +489,10 @@ export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateTimeUnparsable);
-        return (h(Host, { key: '71e43042e770959dbc22198d9444e9ea7c6f17fc', class: {
+        return (h(Host, { key: 'e3798b039b41158b1cf0c93f82f5aae2394b60b8', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '3da77d1b86370fd5cd75ecfb4ef3b23694ade8cb', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '3a5066da2b6fbd59a90ffe8a818b26a4a0631fa0', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: '42e309eb2cab84b15a3053afb1d66018b62110cf', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '5451e2a2275efe4558db30041b49b78ac203305a', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
                 this.show = event.detail;
             }, focusTrapOptions: {
                 targetElement: this.datetimePickerRef,
@@ -504,7 +504,7 @@ export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                     datePickerElement?.focusActiveDay();
                 }
                 return true;
-            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '0960ed4b9e3a5f5b5f230de9f2bafad1ea84d6f5', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '3a469a3a476293d90dc7133feb94e9967c6d54bd', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
     }
     static get is() { return "ix-datetime-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -246,9 +246,9 @@ export class DatetimePicker {
     }
     render() {
         const { minTime, maxTime } = this.getEffectiveTimeConstraints();
-        return (h(Host, { key: '4a7b3d01b9001bd34b6c8cf357d5de34f7b326c7' }, h("ix-date-time-card", { key: 'c54fffa1efadf7fedf270a5d29a241cb244ae35b', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '3d5496ac783718cec38643defe04ea9cf296714a', class: "no-padding" }, h("ix-row", { key: '61b4864d048b3c0e79218d892a2810a7673f4c75', class: "row-separator" }, h("ix-col", { key: '92844a4c2caa6837c50e29207495a5f51c236056', class: "col-separator" }, h("ix-date-picker", { key: '88611176a321e3cd369e2b4b6e4c594806c299ec', 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, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'acc965fc6992fb5afd79e9174cbc1ed30f09fb22' }, h("ix-time-picker", { key: '042cd14c98a3f7ea2c330ef55889f4cfc6c7017c', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'f625f88c84a0d294fe94836b11e46f17018c4228', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: 'b4f1d140c91a3f2a46724fc9a5fcb601c263f8af', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
+        return (h(Host, { key: '0eb6ec0e18a9794f023b8dd6dee89640b9a0a948' }, h("ix-date-time-card", { key: 'e45f91528b04c803324da4af217ebf7eda31dba0', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '4cade86af3e6a77563e528d92d52c1d86079d0f9', class: "no-padding" }, h("ix-row", { key: '657adbd57b8334398f171b5aebf6e63cbc03b2af', class: "row-separator" }, h("ix-col", { key: '02d019f2a71c6c1c8cfa716a486acd7ed844c622', class: "col-separator" }, h("ix-date-picker", { key: 'efb6483f6528cec9660913bca6b51d907c59dd3f', 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, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'e0884bbeabca263427ed98d26febb94b9d90cf91' }, h("ix-time-picker", { key: '9b9088f1ed6568028ab41a7f9732e537a1438359', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'ad8dacb09da1525749481373191078dc1b85ba60', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '1124f92c6f59f14c74385f587f665537bd6cb9e2', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Divider {
     render() {
-        return h(Host, { key: '2353ffd7afdc669190af6a4ee6f405c38ac117de' });
+        return h(Host, { key: 'eb2dfcf5c516b8b1469282e06edf116e63c7d66a' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }