@siemens/ix 5.0.0 → 5.1.1

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

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

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

@@ -578,19 +578,19 @@ export class CategoryFilter {
         return 'color-primary';
     }
     render() {
-        return (h(Host, { key: 'c73d0e566104b724e94d5126d32d6d3dd9020723' }, h("form", { key: 'c0ca80946c151d79cc1e7133c6d81722e4edc443', ref: (el) => (this.formElement = el) }, h("div", { key: 'e3279f329d8d75d6927e237927d45b12c61ba902', "read-only": this.readonly, class: {
+        return (h(Host, { key: '85dbdb78b8e91f24bd024a7f807981c1be021949' }, h("form", { key: 'c7bbb49d432f280a07decbe120f73d6c797d8cc7', ref: (el) => (this.formElement = el) }, h("div", { key: '0564d4922c264f58cdbd27da56913b09fc7ab9a5', "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: '1a674e8c6c2d3a2422007281d3bde814018778d3', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: '31860c9a24615800bfef45f36cafeefef9ceca3e', class: "token-container" }, h("div", { key: 'a049e7e8b4efdb7ea0e4aa9faa57c95e8d6efe41', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '3807f9bee30d44bcca3a8aefda6889958f5fa781', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'eee8f5b467efe653a186361cd6db76a6a92bdb15', class: "token-container" }, h("div", { key: 'd82c1963974f8213fab1b90473d8f0c883306281', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { 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("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, this.categories[this.category]?.label)), h("input", { key: 'b27adcc9da01d9a20064c8166d35d66107ba28ac', class: {
+            } }, this.categories[this.category]?.label)), h("input", { key: 'bb6d42b5691fa761ed9f8196edce521e5e5e04aa', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder, ...this.a11yAttributes, "aria-label": this.ariaLabelFilterInput }))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: this.textInput?.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));

package/dist/collection/components/checkbox/checkbox.css

@@ -74,6 +74,14 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
+:host .checkbox-button {
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 :host button {
   all: unset;
   display: inline-flex;
@@ -86,7 +94,6 @@
   height: 1.125rem;
   min-height: 1.125rem;
   max-height: 1.125rem;
-  margin-right: 0.5rem;
 }
 :host button:disabled {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
@@ -102,13 +109,15 @@
 :host label {
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--theme-space-0);
   width: 100%;
   height: 100%;
   cursor: pointer;
 }
-:host ix-typography {
-  margin-top: 0.125rem;
+
+:host(.label-less) ix-typography {
+  display: none;
 }
 
 :host button {

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

@@ -20,8 +20,10 @@ 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
+ * @slot default - Checkbox label.
  */
 export class Checkbox {
     hostElement;
@@ -69,6 +71,8 @@ export class Checkbox {
      */
     ixBlur;
     touched = false;
+    hasDefaultSlotElements = false;
+    defaultSlotElement;
     inputRef = makeRef((checkboxRef) => {
         checkboxRef.checked = this.checked;
     });
@@ -86,6 +90,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 +126,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: '35812b8dead64c244b7a52eb16928bad8d7ab3ac', "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: '95d7ed9fcd59474b6978819a9b7c97ba80ba26fd' }, h("input", { key: 'cf9c3545c17df102d35900d5243c1f1c50f18c6f', "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: 'bd5a04e233b741022ee5398b13d60db12a5fd128', class: "checkbox-button" }, h("button", { key: 'ab34c031e430e2f867288961d6e2aad70bd0efff', 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: '1de00db72c4eb6c2d259eead82e76e07ec10922b', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '781bb2d36b1e5b006fea618ad39b0af0a2000b21', onSlotchange: () => this.updateDefaultSlotElements(), ref: (element) => (this.defaultSlotElement = element) })))));
     }
     static get is() { return "ix-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -276,6 +290,11 @@ export class Checkbox {
             }
         };
     }
+    static get states() {
+        return {
+            "hasDefaultSlotElements": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "checkedChange",

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

@@ -13,6 +13,7 @@ import { HookValidationLifecycle, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 /**
  * @form-ready
+ * @slot default - Checkboxes displayed in the group.
  */
 export class CheckboxGroup {
     hostElement;
@@ -102,10 +103,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: 'd6718d48f2596083126ff7d697c1defea55d5a03', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: 'dc0cdf907e3aed04ba33dd10802af6cad2621d58', 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: '95782aa76994a8867fa31a7f4ba3a5c5fa8811bb', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '1b90032207b05a058e5639e08c997269a683b504' })))));
+            } }, h("slot", { key: 'f0c035b2293f104bdd57bcebb392c2d9fdca9c56' })))));
     }
     static get is() { return "ix-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,6 +13,9 @@ import { DefaultMixins } from "../utils/internal/component";
 import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { makeRef } from "../utils/make-ref";
 import { CHIP_VARIANTS } from "./chip.types";
+/**
+ * @slot default - Chip label.
+ */
 export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -152,14 +155,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: '074e1b8df0edfe5db620b313070c952d94fb6764', 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: '4f3be99387f137357324a14e4b66c60c61e95c36', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: '37c9d95256b2d0b1567cb6d9679cfedc319ae32a', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: '44b27264ee46a492016c92085f2ca13370ba311f', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '05c6d7f19b9132c120e99110c76181557cb82c64', 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: '303f4abb9ae0bff1d823d9a8960767df237282a6', class: "slot-container" }, h("slot", { key: '8918f352f8e7e73e8b9c1276025b9a440058173f' })))), showClose && (h("button", { key: '56f34dccef82fc49349dd0b323cd84f25ab3c401', 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: '6bc6e05f59525c5819b95805fd95be372af1ec65', 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

@@ -8,6 +8,9 @@
  */
 import { forceUpdate, h, Host } from "@stencil/core";
 import { matchBreakpoint } from "../utils/breakpoints";
+/**
+ * @slot default - Column content.
+ */
 export class Col {
     static Breakpoints = ['', 'sm', 'md', 'lg'];
     /**
@@ -77,9 +80,9 @@ export class Col {
         };
     }
     render() {
-        return (h(Host, { key: '92516eb3dfd8c82f3edd51707861615729ae0d45', style: {
+        return (h(Host, { key: '6cb1bfd2e52e79b9904cbed20b2e6f8ba09b5945', style: {
                 ...this.getColumnSizeStyling(),
-            } }, h("slot", { key: '43e5c2cf90ba0f62a01bc47f22420c9d102fd7c4' })));
+            } }, h("slot", { key: 'd3bcb1164a364e62f23200fc06d49e8f2a5c72ae' })));
     }
     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

@@ -10,6 +10,7 @@ import { h, Host } from "@stencil/core";
 import { hasSlottedElements } from "../utils/shadow-dom";
 /**
  * @slot header - Display content at the top of the content page
+ * @slot default - Main page content.
  */
 export class Content {
     hostElement;
@@ -18,12 +19,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: '94c6e2d97d8194e53a2084003dc128037795da39' }, h("div", { key: '3bca63790f8f524bc807b7745effcfe6091efec4', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: 'ea93135ea0b4a1e7a20a159446280ceb24aa4b01', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: 'b362b15e253b4e714b1d6f8c631e00d6a01f5668', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '90c0076e390d2a7b9a5c7be22ba05fba1e2302bf', class: "content" }, h("slot", { key: 'aff4024b33c30f527a951df5656d105847c87fe6' }))));
+            } })), h("div", { key: '9e774c3fa07536e14f377d3188632e9fbb548d29', class: "content" }, h("slot", { key: '48301d9bc95492ee103a7a3d4767009147888994' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ import { iconArrowLeft } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
 /**
  * @slot header - Content to be placed in the header area next to the title
- * @slot - Default slot for action buttons or other content
+ * @slot default - Default slot for action buttons or other content
  */
 export class ContentHeader {
     /**
@@ -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: '7aff9412995ceff09f9e01cbe258702fd102ea75' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: 'ee525ee229cdb39d8095189634bdd98c97a71a55', class: "titleGroup" }, h("div", { key: '15262bbc2565c60fbccf52284c926e3d71147337', class: "headerTitleRow" }, h("ix-typography", { key: 'e3c3a23df25528b96f22c4144a8a3e1d5cfea603', 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: '0faeabfcaa745ad3ae69ea1643767d5ba07f3ac9', class: "headerSlot" }, h("slot", { key: '569da58b7ae972574bb52b4a201d8a8f9e89bfc4', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '38ce3d985ce6ac069ee1a47dcf999b9f7c1ec6af', 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: 'b792938f171aa505945a8da026303ebef1ba9837', class: "buttons" }, h("slot", { key: '68eb9f74a2120f9b62742b34735792cdf67530aa' }))));
     }
     static get is() { return "ix-content-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,6 +9,7 @@
 import { h, Host } from "@stencil/core";
 /**
  * @internal
+ * @slot default - Grid item content.
  */
 export class CssGridItem {
     /**
@@ -18,7 +19,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: '0bc3ae81663d5b1993c95f06958bcd77e24180a7', style: style }, h("slot", { key: '62c78222da5bfa19d981cb30394f6e1d093b322b' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,6 +18,7 @@ const mediaQueryCollection = [
 ];
 /**
  * @internal
+ * @slot default - Grid items arranged by the configured template.
  */
 export class CssGrid {
     /**
@@ -79,7 +80,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: 'f528bf6c3a8915c642c42fb56aa230a95234770c', style: style }, h("slot", { key: 'd9520b70898f2c51bf5c3527d709cb109b403cf5' })));
     }
     static get is() { return "ix-css-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,6 +18,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Host, h } from "@stencil/core";
 import { HookValidationLifecycle, } from "../utils/input";
+/**
+ * @slot default - The form control.
+ */
 export class CustomField {
     hostElement;
     /**
@@ -63,7 +66,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: '4e412bdb503dd54f56dcf6039c98ef6b1d90fc99' }, h("ix-field-wrapper", { key: '948a67bba4457bc92b497ec2a9f8354a46d88928', 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: '32074e9825ad42e3ca9d991775e9093db97b5ef7' }))));
     }
     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.css

@@ -516,6 +516,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host(.disabled) input,
 :host(.disabled) textarea {
   pointer-events: none;
+  color: var(--theme-input--color--disabled);
 }
 
 :host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {

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.css

@@ -514,6 +514,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host(.disabled) input,
 :host(.disabled) textarea {
   pointer-events: none;
+  color: var(--theme-input--color--disabled);
 }
 
 :host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {

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"; }