@siemens/ix 4.4.0 → 5.1.0

package/dist/cjs/ix-date-input.cjs.entry.js

@@ -1,20 +1,25 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
 var datetime = require('./datetime-CfABwu7I.js');
-var input_fc = require('./input.fc-BIQRswZt.js');
-var validation = require('./validation-DF9UXqHB.js');
-var pickerInput_util = require('./picker-input.util-DJNAVluZ.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
-require('./a11y-DldCLr8D.js');
+var input_fc = require('./input.fc-DM-hX3xb.js');
+var inputPicker_mixin = require('./input-picker.mixin-Cf82jV-C.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var component = require('./component-DgA9FH-W.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+var validation = require('./validation-DJaUH-UR.js');
 require('./mutation-observer-DE0YMfYu.js');
 require('./rwd.util-GTn-vgCJ.js');
 require('./anime.esm-AXTM6yn_.js');
-require('./animation-D5wGQwTg.js');
-require('./dropdown-controller-BLOjtc6w.js');
+require('./animation-hxDbANsw.js');
+require('./dropdown-controller-kBwdbfGD.js');
+require('./path-utils-CQKWhbQW.js');
+require('./focus-utilities-5SZMxJg4.js');
+require('./shadow-dom-BL5F7RFW.js');
+require('./index-B4J4JK0P.js');
 
-const dateInputCss = () => `input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea:not([rows]){height:3.25rem}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:var(--theme-input--border-thickness)}:host .end-container{right:calc(var(--theme-input--border-thickness) + 0.125rem)}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host .input-wrapper:hover input:not(:disabled):not(:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-wrapper:hover input:not(:disabled):not(:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input{width:100%;height:100%}:host .calendar-hidden{display:none}:host(.readonly) input{pointer-events:none}`;
+const dateInputCss = () => `input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea:not([rows]){height:3.25rem}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:var(--theme-input--border-thickness)}:host .end-container{right:0.25rem}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:calc(0.5rem - 0.25rem)}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:calc(0.25rem - 0.25rem)}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:calc(0rem - 0.25rem)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host .input-wrapper:hover input:not(:disabled):not(:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-wrapper:hover input:not(:disabled):not(:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input{width:100%;height:100%}:host .calendar-hidden{display:none}:host(.readonly) input{pointer-events:none}`;
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -34,8 +39,9 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const DateInput = class {
+const DateInput = class extends index.Mixin(...component.DefaultMixins, inputPicker_mixin.InputPickerMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.valueChange = index.createEvent(this, "valueChange", 6);
         this.validityStateChange = index.createEvent(this, "validityStateChange", 7);
@@ -49,102 +55,172 @@ const DateInput = class {
             this.formInternals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.formInternals;
         }
-        /**
-         * Value of the input element.
-         */
-        this.value = '';
-        /**
-         * The earliest date that can be selected by the date input/picker.
-         * If not set there will be no restriction.
-         */
-        this.minDate = '';
-        /**
-         * The latest date that can be selected by the date input/picker.
-         * If not set there will be no restriction.
-         */
-        this.maxDate = '';
-        /**
-         * Date format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.format = 'yyyy/LL/dd';
-        /**
-         * ARIA label for the calendar icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelCalendarButton = 'Open calendar';
-        /**
-         * Readonly attribute.
-         */
-        this.readonly = false;
-        /**
-         * Disabled attribute.
-         */
-        this.disabled = false;
-        /**
-         * I18n string for the error message when the date is not parsable.
-         */
-        this.i18nErrorDateUnparsable = 'Date is not valid';
-        /**
-         * Shows week numbers displayed on the left side of the date picker.
-         *
-         * @since 3.0.0
-         */
-        this.showWeekNumbers = false;
-        /**
-         * The index of which day to start the week on, based on the Locale#weekdays array.
-         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday.
-         */
-        this.weekStartIndex = 0;
-        /**
-         * ARIA label for the previous month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelPreviousMonthButton = 'Previous month';
-        /**
-         * ARIA label for the next month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelNextMonthButton = 'Next month';
-        /**
-         * If false, pressing Enter will submit the form (if inside a form).
-         * Set to true to suppress submit on Enter.
-         */
-        this.suppressSubmitOnEnter = false;
-        /**
-         * Text alignment within the date input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
-         */
-        this.textAlignment = 'start';
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.show = false;
-        this.from = null;
-        this.isInputInvalid = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.focus = false;
-        this.slotStartRef = makeRef.makeRef();
-        this.slotEndRef = makeRef.makeRef();
-        this.datepickerRef = makeRef.makeRef();
-        this.inputElementRef = makeRef.makeRef();
-        this.dropdownElementRef = makeRef.makeRef();
-        /** @internal */
-        this.touched = false;
-        /** @internal */
-        this.validityTracker = input_fc.createPickerValidityStateTracker();
     }
+    get hostElement() { return index.getElement(this); }
+    formInternals;
+    /**
+     * Name of the input element.
+     */
+    name;
+    /**
+     * Placeholder of the input element.
+     */
+    placeholder;
+    /**
+     * Value of the input element.
+     */
+    value = '';
     watchValuePropHandler(newValue) {
         this.onInput(newValue);
     }
+    /**
+     * The earliest date that can be selected by the date input/picker.
+     * If not set there will be no restriction.
+     */
+    minDate = '';
+    /**
+     * The latest date that can be selected by the date input/picker.
+     * If not set there will be no restriction.
+     */
+    maxDate = '';
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     * The locale is used to translate the labels for weekdays and months.
+     * It also determines the default order of weekdays based on the locale's conventions.
+     * When the locale changes, the weekday labels are rotated according to the `weekStartIndex`.
+     * It does not affect the values returned by methods and events.
+     */
+    locale;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    format = 'yyyy/LL/dd';
+    /**
+     * Required attribute.
+     */
+    required;
+    /**
+     * Helper text below the input field.
+     */
+    helperText;
+    /**
+     * Label of the input field.
+     */
+    label;
+    /**
+     * ARIA label for the calendar icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     *
+     * @since 3.2.0
+     */
+    ariaLabelCalendarButton = 'Open calendar';
+    /**
+     * Error text below the input field.
+     */
+    invalidText;
+    /**
+     * Readonly attribute.
+     */
+    readonly = false;
+    /**
+     * Disabled attribute.
+     */
+    disabled = false;
+    /**
+     * Info text below the input field.
+     */
+    infoText;
+    /**
+     * Warning text below the input field.
+     */
+    warningText;
+    /**
+     * Valid text below the input field.
+     */
+    validText;
+    /**
+     * Show text as tooltip.
+     */
+    showTextAsTooltip;
+    /**
+     * I18n string for the error message when the date is not parsable.
+     */
+    i18nErrorDateUnparsable = 'Date is not valid';
+    /**
+     * Shows week numbers displayed on the left side of the date picker.
+     *
+     * @since 3.0.0
+     */
+    showWeekNumbers = false;
+    /**
+     * The index of which day to start the week on, based on the Locale#weekdays array.
+     * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday.
+     */
+    weekStartIndex = 0;
+    /**
+     * ARIA label for the previous month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelPreviousMonthButton = 'Previous month';
+    /**
+     * ARIA label for the next month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelNextMonthButton = 'Next month';
+    /**
+     * If false, pressing Enter will submit the form (if inside a form).
+     * Set to true to suppress submit on Enter.
+     */
+    suppressSubmitOnEnter = false;
+    /**
+     * Text alignment within the date input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+     */
+    textAlignment = 'start';
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Value change event. Emitted when the input value changes.
+     */
+    valueChange;
+    /**
+     * Validation state change event. Emitted when the validation state changes.
+     */
+    validityStateChange;
+    /** @internal */
+    ixFocus;
+    /** @internal */
+    ixBlur;
+    /**
+     * Change event. Emitted when the date input loses focus and the value has changed.
+     *
+     * @since 4.4.0
+     */
+    ixChange;
+    show = false;
+    from = null;
+    isInputInvalid = false;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    focus = false;
+    slotStartRef = makeRef.makeRef();
+    slotEndRef = makeRef.makeRef();
+    datepickerRef = makeRef.makeRef();
+    inputElementRef = makeRef.makeRef();
+    dropdownElementRef = makeRef.makeRef();
+    classObserver;
+    initialValue;
+    invalidReason;
+    touched = false;
+    validityTracker = input_fc.createPickerValidityStateTracker();
+    disposableChangesAndVisibilityObservers;
     updateFormInternalValue(value) {
         if (value) {
             this.formInternals.setFormValue(value);
@@ -174,9 +250,8 @@ const DateInput = class {
         input_fc.adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputElementRef.current);
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.destroy();
-        (_b = this.disposableChangesAndVisibilityObservers) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.classObserver?.destroy();
+        this.disposableChangesAndVisibilityObservers?.();
     }
     watchValue() {
         this.from = this.value;
@@ -190,7 +265,6 @@ const DateInput = class {
         return Promise.resolve(this.formInternals.form);
     }
     async onInput(value) {
-        var _a;
         this.value = value;
         if (!value) {
             this.isInputInvalid = false;
@@ -208,37 +282,38 @@ const DateInput = class {
         const maxDate = datetime.DateTime.fromFormat(this.maxDate, this.format);
         this.isInputInvalid = !date.isValid || date < minDate || date > maxDate;
         if (this.isInputInvalid) {
-            this.invalidReason = (_a = date.invalidReason) !== null && _a !== void 0 ? _a : undefined;
+            this.invalidReason = date.invalidReason ?? undefined;
             this.from = undefined;
         }
         else {
             this.updateFormInternalValue(value);
             this.closeDropdown();
+            if (component.hasKeyboardMode()) {
+                this.inputElementRef.current?.focus();
+            }
         }
         this.emitValidityStateChangeIfChanged();
         this.valueChange.emit(value);
     }
     onCalenderClick(event) {
-        pickerInput_util.handleIconClick(event, this.show, () => this.openDropdown(), this.inputElementRef);
+        inputPicker_mixin.handleIconClick(event, this.show, () => this.openDropdown(), this.inputElementRef);
     }
     async openDropdown() {
-        return pickerInput_util.openDropdown(this.dropdownElementRef);
+        return inputPicker_mixin.openDropdown(this.dropdownElementRef);
     }
     async closeDropdown() {
-        return pickerInput_util.closeDropdown(this.dropdownElementRef);
+        return inputPicker_mixin.closeDropdown(this.dropdownElementRef);
     }
     checkClassList() {
         this.isInvalid = this.hostElement.classList.contains('ix-invalid');
     }
     handleInputKeyDown(event) {
-        input_fc.onEnterKeyChangeEmit(event, this, this.value);
         input_fc.handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
     }
     renderInput() {
-        var _a;
-        return (index.h("div", { class: "input-wrapper" }, index.h(input_fc.SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h("input", { autoComplete: "off", class: {
+        return (index.h("div", { class: "input-wrapper" }, index.h(input_fc.SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h("input", { "aria-haspopup": "true", autoComplete: "off", class: {
                 'is-invalid': this.isInputInvalid,
-            }, disabled: this.disabled, readOnly: this.readonly, readonly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: (_a = this.value) !== null && _a !== void 0 ? _a : '', placeholder: this.placeholder, name: this.name, onInput: (event) => {
+            }, disabled: this.disabled, readOnly: this.readonly, readonly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: this.value ?? '', placeholder: this.placeholder, name: this.name, onInput: (event) => {
                 const target = event.target;
                 this.onInput(target.value);
             }, onClick: (event) => {
@@ -247,16 +322,14 @@ const DateInput = class {
                     event.preventDefault();
                 }
             }, onFocus: async () => {
-                this.initialValue = this.value;
-                this.openDropdown();
                 this.ixFocus.emit();
             }, onBlur: () => {
-                input_fc.onInputBlurWithChange(this, this.inputElementRef.current, this.value);
                 this.touched = true;
+                input_fc.onInputBlurWithChange(this, this.inputElementRef.current, this.value);
                 this.emitValidityStateChangeIfChanged();
             }, onKeyDown: (event) => this.handleInputKeyDown(event), style: {
                 textAlign: this.textAlignment,
-            } }), index.h(input_fc.SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { "data-testid": "open-calendar", class: { 'calendar-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: index$1.iconCalendar, onClick: (event) => this.onCalenderClick(event), "aria-label": this.ariaLabelCalendarButton }))));
+            } }), index.h(input_fc.SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { tabindex: -1, ref: (ref) => a11y.forceTabIndex(ref, -1), "aria-label": this.ariaLabelCalendarButton, "data-testid": "open-calendar", class: { 'calendar-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: index$1.iconCalendar, onClick: (event) => this.onCalenderClick(event) }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -269,7 +342,7 @@ const DateInput = class {
     }
     /** @internal */
     getValidityState() {
-        return Promise.resolve(pickerInput_util.createValidityState(this.isInputInvalid, !!this.required, this.value));
+        return Promise.resolve(inputPicker_mixin.createValidityState(this.isInputInvalid, !!this.required, this.value));
     }
     /**
      * Get the native input element
@@ -290,15 +363,30 @@ const DateInput = class {
     isTouched() {
         return Promise.resolve(this.touched);
     }
+    getPickerElement() {
+        return this.dropdownElementRef;
+    }
     render() {
-        var _a;
         const invalidText = validation.getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateUnparsable);
-        return (index.h(index.Host, { key: 'a188d09b1e24447e3fbc5a7a09c6e34042548a8c', class: {
+        return (index.h(index.Host, { key: 'cd25d18346e36dce13464172417c605bb4883275', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.h("ix-field-wrapper", { key: 'c50fde9b3aee7a2645a70fd3bb090471f633d6a9', 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()), index.h("ix-dropdown", { key: '7a95a993e629b158905a32c1538e96a2d6275799', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            }, onFocusout: (e) => {
+                const relatedTarget = e.relatedTarget;
+                // Related target might be null during rerenders, which would cause the dropdown to close unexpectedly
+                if (!relatedTarget) {
+                    return;
+                }
+                this.closeDropdown();
+            } }, index.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()), index.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;
-            } }, index.h("ix-date-picker", { key: '7375826a1d3df9751f387422db39206bc4fd4837', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+            }, focusTrapOptions: {
+                targetElement: this.datepickerRef,
+                trapFocusInShadowDom: true,
+            }, callbackFocusElement: async () => {
+                this.datepickerRef.current?.focusActiveDay();
+                return true;
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, index.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) {
@@ -307,8 +395,8 @@ const DateInput = class {
                 }
             }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, embedded: true }))));
     }
+    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "value": [{
                 "watchValuePropHandler": 0