@siemens/ix 4.4.0 → 5.1.0

package/dist/esm/ix-time-input.entry.js

@@ -1,18 +1,25 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { I as iconClock } from './index-BBzEV-f4.js';
+import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { N as iconClock } from './index-DgUGsIlh.js';
 import { D as DateTime } from './datetime-D1WplX1z.js';
-import { c as createPickerValidityStateTracker, o as onEnterKeyChangeEmit, h as handleSubmitOnEnterKeydown, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, d as onInputBlurWithChange, e as SlotStart, f as emitPickerValidityState } from './input.fc-C1ytwpkt.js';
-import { H as HookValidationLifecycle, c as createClassMutationObserver, g as getValidationText } from './validation-CTBekLDe.js';
-import { h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from './picker-input.util-D1uMJUKN.js';
-import { m as makeRef } from './make-ref-bcj7UEIC.js';
-import './a11y-DAzBNVe7.js';
+import { c as createPickerValidityStateTracker, j as onEnterKeyChangeEmit, h as handleSubmitOnEnterKeydown, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, o as onInputBlurWithChange, d as SlotStart, e as emitPickerValidityState } from './input.fc-CE3kP-L_.js';
+import { g as getTimePickerConstraintBounds, i as isWithinTimePickerConstraints } from './time-picker-constraints-Bsg2RskF.js';
+import { I as InputPickerMixin, h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from './input-picker.mixin-DudWFH-e.js';
+import { D as DefaultMixins } from './component-DqJSHc3A.js';
+import { m as makeRef } from './make-ref-Djkc69iv.js';
+import { r as requestAnimationFrameNoNgZone } from './requestAnimationFrame-BEuV0Xpe.js';
+import { f as forceTabIndex } from './a11y-C21npbUc.js';
+import { c as createClassMutationObserver, g as getValidationText, H as HookValidationLifecycle } from './validation-VVt5EFy0.js';
 import './mutation-observer-CX81WQtk.js';
-import './rwd.util-pXYAoEyc.js';
+import './rwd.util-JJddxCCh.js';
 import './anime.esm-DhE1t8Qh.js';
-import './animation-BLaucX4x.js';
-import './dropdown-controller-D3K9vmFp.js';
+import './animation-DNIQ2C1K.js';
+import './dropdown-controller-Jfg3ZWk6.js';
+import './path-utils-CNLoALIl.js';
+import './focus-utilities-6ZxKp7Jn.js';
+import './shadow-dom-BClJdFQP.js';
+import './index-XBTykBKS.js';
 
-const timeInputCss = () => `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 .time-icon-hidden{display:none}:host(.readonly) input{pointer-events:none}.input-wrapper{position:relative}`;
+const timeInputCss = () => `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 .time-icon-hidden{display:none}:host(.readonly) input{pointer-events:none}.input-wrapper{position:relative}`;
 
 /*
  * SPDX-FileCopyrightText: 2025 Siemens AG
@@ -32,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 TimeInput = class {
+const TimeInput = class extends Mixin(...DefaultMixins, InputPickerMixin) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.valueChange = createEvent(this, "valueChange", 6);
         this.validityStateChange = createEvent(this, "validityStateChange", 7);
@@ -47,114 +55,208 @@ const TimeInput = class {
             this.formInternals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.formInternals;
         }
-        /**
-         * Value of the input element.
-         */
-        this.value = '';
-        /**
-         * Format of time string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.format = 'TT';
-        /**
-         * Readonly attribute.
-         */
-        this.readonly = false;
-        /**
-         * Disabled attribute.
-         */
-        this.disabled = false;
-        /**
-         * I18n string for the error message when the time is not parsable.
-         */
-        this.i18nErrorTimeUnparsable = 'Time is not valid';
-        /**
-         * Interval for hour selection.
-         */
-        this.hourInterval = 1;
-        /**
-         * Interval for minute selection.
-         */
-        this.minuteInterval = 1;
-        /**
-         * Interval for second selection.
-         */
-        this.secondInterval = 1;
-        /**
-         * Interval for millisecond selection.
-         */
-        this.millisecondInterval = 100;
-        /**
-         * Text of the time picker confirm button.
-         */
-        this.i18nSelectTime = 'Confirm';
-        /**
-         * Text for the time picker top label.
-         */
-        this.i18nTime = 'Time';
-        /**
-         * Text for the time picker hour column header.
-         */
-        this.i18nHourColumnHeader = 'hr';
-        /**
-         * Text for the time picker minute column header.
-         */
-        // eslint-disable-next-line @stencil-community/decorators-style
-        this.i18nMinuteColumnHeader = 'min';
-        /**
-         * Text for the time picker second column header.
-         */
-        // eslint-disable-next-line @stencil-community/decorators-style
-        this.i18nSecondColumnHeader = 'sec';
-        /**
-         * Text for the time picker millisecond column header.
-         */
-        // eslint-disable-next-line @stencil-community/decorators-style
-        this.i18nMillisecondColumnHeader = 'ms';
-        /**
-         * If false, pressing Enter will submit the form (if inside a form).
-         * Set to true to suppress submit on Enter.
-         */
-        this.suppressSubmitOnEnter = false;
-        /**
-         * Hides the header of the picker.
-         *
-         * @since 4.0.0
-         */
-        this.hideHeader = false;
-        /**
-         * Text alignment within the time 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.time = null;
-        this.isInputInvalid = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.focus = false;
-        this.slotStartRef = makeRef();
-        this.slotEndRef = makeRef();
-        this.timePickerRef = makeRef();
-        this.inputElementRef = makeRef();
-        this.dropdownElementRef = makeRef();
-        /** @internal */
-        this.touched = false;
-        /** @internal */
-        this.validityTracker = createPickerValidityStateTracker();
     }
+    get hostElement() { return 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);
     }
+    /**
+     * Format of time string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    format = 'TT';
+    /**
+     * Earliest selectable time (`format` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    minTime;
+    /**
+     * Latest selectable time (`format` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    maxTime;
+    watchMinTimePropHandler() {
+        this.revalidateCurrentValue();
+    }
+    watchMaxTimePropHandler() {
+        this.revalidateCurrentValue();
+    }
+    /**
+     * Required attribute.
+     */
+    required;
+    /**
+     * Helper text below the input field.
+     */
+    helperText;
+    /**
+     * Label of the input field.
+     */
+    label;
+    /**
+     * 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 time is not parsable.
+     */
+    i18nErrorTimeUnparsable = 'Time is not valid';
+    /**
+     * Interval for hour selection.
+     */
+    hourInterval = 1;
+    /**
+     * Interval for minute selection.
+     */
+    minuteInterval = 1;
+    /**
+     * Interval for second selection.
+     */
+    secondInterval = 1;
+    /**
+     * Interval for millisecond selection.
+     */
+    millisecondInterval = 100;
+    /**
+     * Text of the time picker confirm button.
+     */
+    i18nSelectTime = 'Confirm';
+    /**
+     * Text for the time picker top label.
+     */
+    i18nTime = 'Time';
+    /**
+     * Text for the time picker hour column header.
+     */
+    i18nHourColumnHeader = 'hr';
+    /**
+     * Text for the time picker minute column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nMinuteColumnHeader = 'min';
+    /**
+     * Text for the time picker second column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nSecondColumnHeader = 'sec';
+    /**
+     * Text for the time picker millisecond column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nMillisecondColumnHeader = 'ms';
+    /**
+     * If false, pressing Enter will submit the form (if inside a form).
+     * Set to true to suppress submit on Enter.
+     */
+    suppressSubmitOnEnter = false;
+    /**
+     * Hides the header of the picker.
+     *
+     * @since 4.0.0
+     */
+    hideHeader = false;
+    /**
+     * Text alignment within the time 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;
+    /**
+     * ARIA label for the time picker toggle button
+     * Will be set as aria-label for the nested HTML button element
+     *
+     * @since 5.0.0
+     */
+    ariaLabelTimeToggleButton = 'Toggle time picker';
+    /**
+     * 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 time input loses focus and the value has changed.
+     *
+     * @since 4.4.0
+     */
+    ixChange;
+    show = false;
+    time = null;
+    isInputInvalid = false;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    focus = false;
+    slotStartRef = makeRef();
+    slotEndRef = makeRef();
+    timePickerRef = makeRef();
+    inputElementRef = makeRef();
+    dropdownElementRef = makeRef();
+    classObserver;
+    initialValue;
+    invalidReason;
+    touched = false;
+    validityTracker = createPickerValidityStateTracker();
+    disposableChangesAndVisibilityObservers;
     handleInputKeyDown(event) {
+        if (event.key === 'ArrowDown') {
+            this.show = true;
+            requestAnimationFrameNoNgZone(() => {
+                const focusableTimeButton = this.timePickerRef.current?.shadowRoot?.querySelector('button[tabindex="0"]');
+                focusableTimeButton?.focus();
+            });
+        }
         onEnterKeyChangeEmit(event, this, this.value);
         handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
     }
@@ -175,12 +277,6 @@ const TimeInput = class {
             }
         }
         this.onInput(this.value);
-        if (this.isInputInvalid) {
-            this.time = null;
-        }
-        else {
-            this.watchValue();
-        }
         this.checkClassList();
         this.updateFormInternalValue(this.value);
     }
@@ -188,12 +284,8 @@ const TimeInput = class {
         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);
-    }
-    watchValue() {
-        this.time = this.value;
+        this.classObserver?.destroy();
+        this.disposableChangesAndVisibilityObservers?.();
     }
     /** @internal */
     hasValidValue() {
@@ -203,8 +295,56 @@ const TimeInput = class {
     getAssociatedFormElement() {
         return Promise.resolve(this.formInternals.form);
     }
+    isWithinConfiguredBounds(parsed) {
+        const baseDay = parsed.startOf('day');
+        const { min, max } = getTimePickerConstraintBounds(this.minTime, this.maxTime, this.format, baseDay);
+        return isWithinTimePickerConstraints(parsed, min, max);
+    }
+    syncPickerTimeFromValue() {
+        const trimmed = this.value?.trim() ?? '';
+        if (!trimmed) {
+            this.time = null;
+            return;
+        }
+        const parsed = DateTime.fromFormat(trimmed, this.format);
+        if (!parsed.isValid) {
+            this.time = null;
+            return;
+        }
+        this.time = trimmed;
+    }
+    validateNonEmptyValue(value) {
+        if (!this.format) {
+            return null;
+        }
+        const time = DateTime.fromFormat(value, this.format);
+        if (time.isValid && this.isWithinConfiguredBounds(time)) {
+            return {
+                isInputInvalid: false,
+                invalidReason: undefined,
+            };
+        }
+        return {
+            isInputInvalid: true,
+            invalidReason: time.isValid
+                ? 'customError'
+                : (time.invalidReason ?? undefined),
+        };
+    }
+    revalidateCurrentValue() {
+        if (!this.value) {
+            return;
+        }
+        const validity = this.validateNonEmptyValue(this.value);
+        if (!validity) {
+            return;
+        }
+        this.isInputInvalid = validity.isInputInvalid;
+        this.invalidReason = validity.invalidReason;
+        this.emitValidityStateChangeIfChanged();
+        this.syncPickerTimeFromValue();
+    }
     async onInput(value) {
-        var _a;
         this.value = value;
         if (!value) {
             this.isInputInvalid = false;
@@ -212,29 +352,26 @@ const TimeInput = class {
             this.emitValidityStateChangeIfChanged();
             this.updateFormInternalValue(value);
             this.valueChange.emit(value);
+            this.syncPickerTimeFromValue();
             return;
         }
-        if (!this.format) {
+        const validity = this.validateNonEmptyValue(value);
+        if (!validity) {
+            this.syncPickerTimeFromValue();
             return;
         }
-        const time = DateTime.fromFormat(value, this.format);
-        if (time.isValid) {
-            this.isInputInvalid = false;
-            this.invalidReason = undefined;
-        }
-        else {
-            this.isInputInvalid = true;
-            this.invalidReason = (_a = time.invalidReason) !== null && _a !== void 0 ? _a : undefined;
-        }
+        this.isInputInvalid = validity.isInputInvalid;
+        this.invalidReason = validity.invalidReason;
         this.emitValidityStateChangeIfChanged();
         this.updateFormInternalValue(value);
         this.valueChange.emit(value);
+        this.syncPickerTimeFromValue();
     }
     onTimeIconClick(event) {
         handleIconClick(event, this.show, () => this.openDropdown(), this.inputElementRef);
     }
     async openDropdown() {
-        this.time = this.value;
+        this.syncPickerTimeFromValue();
         return openDropdown(this.dropdownElementRef);
     }
     async closeDropdown() {
@@ -244,7 +381,7 @@ const TimeInput = class {
         this.isInvalid = this.hostElement.classList.contains('ix-invalid');
     }
     renderInput() {
-        return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
+        return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { "aria-haspopup": "true", autoComplete: "off", class: {
                 'is-invalid': this.isInputInvalid,
             }, style: {
                 textAlign: this.textAlignment,
@@ -258,13 +395,12 @@ const TimeInput = class {
                 }
             }, onFocus: async () => {
                 this.initialValue = this.value;
-                this.openDropdown();
                 this.ixFocus.emit();
             }, onBlur: () => {
                 onInputBlurWithChange(this, this.inputElementRef.current, this.value);
                 this.touched = true;
                 this.emitValidityStateChangeIfChanged();
-            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": "Toggle time picker", "aria-expanded": this.show }))));
+            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { tabindex: -1, ref: (ref) => forceTabIndex(ref, -1), "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": this.ariaLabelTimeToggleButton, "aria-expanded": this.show }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -298,15 +434,22 @@ const TimeInput = class {
     isTouched() {
         return Promise.resolve(this.touched);
     }
+    getPickerElement() {
+        return this.dropdownElementRef;
+    }
     render() {
-        var _a;
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorTimeUnparsable);
-        return (h(Host, { key: 'bdc4ea4daa680cb86e068e89a85c24e677194894', class: {
+        return (h(Host, { key: 'ad852f1bdf16618d065d1fbab17420c11b3e5915', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '161d696e8e3b2e93d44bb2cd89227756803f72c0', 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: '509749521f08d008496d5b39357198cd7c65cd67', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            }, onFocusout: () => {
+                this.closeDropdown();
+            } }, h("ix-field-wrapper", { key: 'cf0d1f5e6fef2a1391ca1fb9b748eb7c75af3d18', 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: '51ba0327ea62439e121ffbc1f6aa8a6a69564481', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, h("ix-time-picker", { key: '00171df4b640293e1d8225f23aba117cff73dc47', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            }, focusTrapOptions: {
+                targetElement: this.timePickerRef,
+                trapFocusInShadowDom: true,
+            } }, h("ix-time-picker", { key: '9d994dfdd9b7d58ba305dcff031397a3486a5d64', ref: this.timePickerRef, format: this.format, time: this.time ?? '', minTime: this.minTime, maxTime: this.maxTime, hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 if (this.initialValue !== event.detail) {
                     this.ixChange.emit(event.detail);
@@ -315,13 +458,17 @@ const TimeInput = class {
                 this.show = false;
             } }))));
     }
+    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "watchValuePropHandler": 0
-            }, {
-                "watchValue": 0
+            }],
+        "minTime": [{
+                "watchMinTimePropHandler": 0
+            }],
+        "maxTime": [{
+                "watchMaxTimePropHandler": 0
             }]
     }; }
 };