@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-col_4.cjs.entry.js

@@ -1,11 +1,13 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 var breakpoints = require('./breakpoints-C5ZrUCbZ.js');
-var index$1 = require('./index-DIYO-Liy.js');
 var datetime = require('./datetime-CfABwu7I.js');
-var listener = require('./listener-BShKJBRB.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
+var component = require('./component-CYtonfpw.js');
+var listener = require('./listener-BafrcTaM.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var timePickerConstraints = require('./time-picker-constraints-CxGhm1qV.js');
+require('./focus-utilities-yx7wWjEO.js');
 
 const colCss = () => `:host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}: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}`;
 
@@ -13,6 +15,23 @@ const Col = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    static Breakpoints = ['', 'sm', 'md', 'lg'];
+    /**
+     * Size of the column
+     */
+    size;
+    /**
+     * Size of the column for sm screens
+     */
+    sizeSm;
+    /**
+     * Size of the column for md screens
+     */
+    sizeMd;
+    /**
+     * Size of the column for lg screens
+     */
+    sizeLg;
     onResize() {
         index.forceUpdate(this);
     }
@@ -64,13 +83,293 @@ const Col = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '552bf87dd4905b2cfc67dbda7c33e1edf89a9cf8', style: Object.assign({}, this.getColumnSizeStyling()) }, index.h("slot", { key: '293331e4b2de069f550f0d47e1525228e49fc159' })));
+        return (index.h(index.Host, { key: '92516eb3dfd8c82f3edd51707861615729ae0d45', style: {
+                ...this.getColumnSizeStyling(),
+            } }, index.h("slot", { key: '43e5c2cf90ba0f62a01bc47f22420c9d102fd7c4' })));
     }
 };
-Col.Breakpoints = ['', 'sm', 'md', 'lg'];
 Col.style = colCss();
 
-const datePickerCss = () => `:host{display:block;position:relative;max-width:21rem}: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 .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);box-shadow:inset 0 0 0 1px var(--theme-color-inv-contrast-text);background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected);font-weight:var(--theme-font-weight-bold)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:var(--theme-ms-0);line-height:143%;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}`;
+const layoutGridCss = () => `:host{--ix-layout-grid-gutter:24px;display:block;flex:1 1 0%;width:100%;padding-left:calc(var(--ix-layout-grid-gutter) * 0.5);padding-right:calc(var(--ix-layout-grid-gutter) * 0.5)}:host(.no-margin){padding-left:0;padding-right:0}`;
+
+const LayoutGrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * The grid will not have any horizontal padding
+     */
+    noMargin = false;
+    /**
+     * Grid gap
+     */
+    gap = '24';
+    /**
+     * Overwrite the default number of columns. Choose between 2 and 12 columns.
+     */
+    columns = 12;
+    render() {
+        return (index.h(index.Host, { key: 'ad1e96a96876525cbe9da91c13786d914bb3ce6b', class: {
+                'no-margin': this.noMargin,
+            }, style: {
+                '--ix-layout-grid-columns': `${this.columns}`,
+                '--ix-layout-grid-gutter': `${this.gap}px`,
+            } }, index.h("slot", { key: '6eb10f5be8cc7aa38e19e38b33d2b5c07e1fe421' })));
+    }
+};
+LayoutGrid.style = layoutGridCss();
+
+const rowCss = () => `:host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}`;
+
+const Row = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '88036865546dd8f57cac8099b7bef38d6420c722' }, index.h("slot", { key: '948ec4b33c9f03caa4feec78d76f397bd320d045' })));
+    }
+};
+Row.style = rowCss();
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Builds the discrete values shown in each time-picker column.
+ */
+function buildTimePickerColumnNumberArrays(intervals, timeRef) {
+    const { hourInterval, minuteInterval, secondInterval, millisecondInterval } = intervals;
+    let hourNumbers;
+    if (timeRef === undefined) {
+        hourNumbers = Array.from({ length: Math.ceil(24 / hourInterval) }, (_, i) => i * hourInterval);
+    }
+    else {
+        hourNumbers = Array.from({ length: Math.ceil(12 / hourInterval) }, (_, i) => i * hourInterval + 1).filter((hour) => hour <= 12);
+    }
+    const minuteNumbers = Array.from({ length: Math.ceil(60 / minuteInterval) }, (_, i) => i * minuteInterval);
+    const secondNumbers = Array.from({ length: Math.ceil(60 / secondInterval) }, (_, i) => i * secondInterval);
+    const millisecondsNumbers = Array.from({ length: Math.ceil(1000 / millisecondInterval) }, (_, i) => i * millisecondInterval);
+    return { hourNumbers, minuteNumbers, secondNumbers, millisecondsNumbers };
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function maxValueForNonHourUnit(unit) {
+    switch (unit) {
+        case 'minute':
+        case 'second':
+            return 59;
+        case 'millisecond':
+            return 999;
+        case 'hour':
+            return 23;
+    }
+}
+function mapHourColumnValue(rawValue, timeRef) {
+    if (timeRef === 'PM') {
+        return {
+            value: rawValue === 12 ? 12 : rawValue + 12,
+            maxValue: 23,
+        };
+    }
+    if (timeRef === 'AM') {
+        return {
+            value: rawValue === 12 ? 0 : rawValue,
+            maxValue: 11,
+        };
+    }
+    return { value: rawValue, maxValue: 23 };
+}
+/**
+ * Applies a raw column value to a base time (including 12h rules).
+ */
+function computeTimeWithRawUnitValue(baseTime, unit, rawValue, timeRef) {
+    let value;
+    let maxValue;
+    if (unit === 'hour') {
+        const mapped = mapHourColumnValue(rawValue, timeRef);
+        value = mapped.value;
+        maxValue = mapped.maxValue;
+    }
+    else {
+        value = rawValue;
+        maxValue = maxValueForNonHourUnit(unit);
+    }
+    if (value > maxValue) {
+        value = maxValue;
+    }
+    else if (value < 0) {
+        value = 0;
+    }
+    try {
+        return baseTime.set({
+            [unit]: value,
+        });
+    }
+    catch {
+        return null;
+    }
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function formatTimePickerUnitValue(unit, value) {
+    if (unit === 'millisecond') {
+        return value.toString().padStart(3, '0');
+    }
+    return value < 10 ? `0${value}` : value.toString();
+}
+function getTimePickerColumnSeparator(currentIndex, descriptors) {
+    if (currentIndex + 1 < descriptors.length) {
+        const nextUnit = descriptors[currentIndex + 1].unit;
+        return nextUnit === 'millisecond' ? '.' : ':';
+    }
+    return ':';
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Luxon format patterns used to decide which time-picker columns are shown.
+ */
+const LUXON_FORMAT_PATTERNS = {
+    // h, hh, H, HH and various time formats that include hours
+    hours: /\b[Hh]\b|HH|hh|H{3,4}|h{3,4}|t|tt|ttt|tttt|T|TT|TTT|TTTT/,
+    // m, mm and time formats that include minutes
+    minutes: /\bm\b|mm|t|tt|ttt|tttt|T|TT|TTT|TTTT/,
+    // s, ss and time formats that include seconds
+    seconds: /\bs\b|ss|tt|ttt|tttt|TT|TTT|TTTT/,
+    // S–SSS, u–uuu (fractional seconds); ttt/tttt/TTT/TTTT include sub-second parts
+    milliseconds: /S{1,3}|u{1,3}|[tT]{3,4}/,
+};
+/**
+ * Whether the Luxon format string uses 12-hour clock semantics for the picker.
+ */
+function isFormat12Hour(format) {
+    // Remove any text that's inside quotes (literal text in Luxon format strings)
+    let cleanFormat = '';
+    let inQuote = false;
+    for (const char of format) {
+        if (char === "'") {
+            inQuote = !inQuote;
+        }
+        else if (!inQuote) {
+            cleanFormat += char;
+        }
+    }
+    // Check for specific 12-hour format tokens
+    // Case-sensitive matching to distinguish between 'h' and 'H'
+    return /[hat]/.test(cleanFormat);
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function getCandidateRangeForUnit(unit, candidate) {
+    if (!candidate.isValid) {
+        return null;
+    }
+    if (unit === 'hour') {
+        return {
+            start: candidate.startOf('hour'),
+            end: candidate.endOf('hour'),
+        };
+    }
+    if (unit === 'minute') {
+        return {
+            start: candidate.set({ second: 0, millisecond: 0 }),
+            end: candidate.set({ second: 59, millisecond: 999 }),
+        };
+    }
+    if (unit === 'second') {
+        return {
+            start: candidate.set({ millisecond: 0 }),
+            end: candidate.set({ millisecond: 999 }),
+        };
+    }
+    return {
+        start: candidate,
+        end: candidate,
+    };
+}
+function isSelectableForUnitWithinBounds(unit, candidate, bounds) {
+    const candidateRange = getCandidateRangeForUnit(unit, candidate);
+    if (!candidateRange) {
+        return false;
+    }
+    const { min, max } = bounds;
+    const { start, end } = candidateRange;
+    if (min && end < min) {
+        return false;
+    }
+    if (max && start > max) {
+        return false;
+    }
+    return true;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Moves one step in a ring over `values`, skipping entries where `canSelect`
+ * is false (same algorithm as {@link TimePicker#stepFocusedValue}).
+ *
+ * @returns the next selectable value, or `null` if `values` is empty or no entry is selectable.
+ */
+function findNextSelectableRingValue(values, currentValue, direction, canSelect) {
+    if (!values.length) {
+        return null;
+    }
+    let idx = values.indexOf(currentValue);
+    if (idx === -1) {
+        // Start "before" first or "after" last so the first loop advance lands on an array edge.
+        idx = direction === 1 ? -1 : values.length;
+    }
+    for (const _ of values) {
+        idx = (idx + direction + values.length) % values.length;
+        const candidate = values[idx];
+        if (canSelect(candidate)) {
+            return candidate;
+        }
+    }
+    return null;
+}
+
+const timePickerCss = () => `.ix-form-control,.ix-form-control-plaintext{color:var(--theme-input--color);border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control[type=number]{text-align:right}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}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:block;position:relative;width:-moz-fit-content;width:fit-content}: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 .standaloneAppearance{box-shadow:none}:host .hidden{display:none}:host .header{display:flex;align-items:center;justify-content:center;height:2rem}:host .clock{display:flex;justify-content:center;align-items:start}:host .clock .flex{display:flex;height:100%;align-items:start}:host .clock .flex .columns{display:flex;flex-direction:column;align-items:center;justify-content:space-around}:host .clock .flex .columns .column-header{height:2.5rem;width:2.5rem;line-height:2.5rem;text-align:center;color:var(--theme-color-soft-text);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .clock .flex .column-separator{display:flex;align-items:center;justify-content:center;min-height:100%;margin-top:3rem;width:0.5rem}:host .clock .element-list{list-style-type:none;overflow:auto;padding:0.0625rem;margin:-0.0625rem;max-height:15.75rem}:host .clock .element-list button{all:unset}:host .clock .element-list .element-container{box-sizing:border-box;width:2.5rem;height:2.5rem;margin-bottom:0.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--theme-color-primary)}:host .clock .element-list .element-container:hover:not(.disabled){background-color:var(--theme-datepicker-day--background--hover)}:host .clock .element-list .element-container:focus-visible{box-shadow:0 0 0 1px var(--theme-color-focus-bdr)}:host .clock .element-list .element-container.disabled{cursor:default}:host .clock .element-list .element-container.disabled:not(.selected){color:var(--theme-color-weak-text)}:host .clock .element-list .element-container:not(.selected).disabled:hover,:host .clock .element-list .element-container:not(.selected).disabled:active{background-color:transparent}:host .clock .element-list .element-container.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);font-weight:var(--theme-font-weight-bold)}:host .clock .element-list .element-container.selected:hover:not(.disabled){background-color:var(--theme-datepicker-day--background--selected-hover)}:host .clock .element-list .element-container.selected:focus-visible{border:0.0625rem solid var(--theme-color-inv-contrast-text)}:host .clock .element-list .element-container.selected.disabled{background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .clock .element-list .element-list-padding{width:2.5rem;height:13.125rem;min-height:13.125rem}:host .clock div.element-list{scrollbar-width:none;-ms-overflow-style:none}:host .clock div.element-list::-webkit-scrollbar{display:none}:host .footer{display:flex;justify-content:space-between;gap:0.5rem;flex-wrap:wrap}:host .footer .confirm-button{margin-left:auto}:host .footer--compact{flex-direction:column;align-items:center}:host .footer--compact .confirm-button{margin-left:initial}:host .default-space{margin-left:1rem}:host .text-align{text-align:center}`;
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -90,579 +389,894 @@ 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 DatePicker = class {
+const HOUR_INTERVAL_DEFAULT = 1;
+const MINUTE_INTERVAL_DEFAULT = 1;
+const SECOND_INTERVAL_DEFAULT = 1;
+const MILLISECOND_INTERVAL_DEFAULT = 100;
+const CONFIRM_BUTTON_DEFAULT = 'Confirm';
+const HEADER_DEFAULT = 'Time';
+const FORMATTED_TIME_EMPTY = {
+    hour: '',
+    minute: '',
+    second: '',
+    millisecond: '',
+};
+const TimePicker = class extends index.Mixin(...component.DefaultMixins) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
-        this.dateChange = index.createEvent(this, "dateChange", 7);
-        this.dateRangeChange = index.createEvent(this, "dateRangeChange", 7);
-        this.dateSelect = index.createEvent(this, "dateSelect", 7);
-        /**
-         * Date format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.format = 'yyyy/LL/dd';
-        /**
-         * If true, disables date range selection (from/to).
-         */
-        this.singleSelection = false;
-        /**
-         * Corner style.
-         */
-        this.corners = 'rounded';
-        /**
-         * The earliest date that can be selected by the date picker.
-         * If not set there will be no restriction.
-         */
-        this.minDate = '';
-        /**
-         * The latest date that can be selected by the date picker.
-         * If not set there will be no restriction.
-         */
-        this.maxDate = '';
-        /**
-         * Text of the date select button.
-         */
-        this.i18nDone = 'Done';
-        /**
-         * 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';
-        /**
-         * 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;
-        /**
-         * Shows week numbers displayed on the left side of the date picker.
-         *
-         * @since 3.0.0
-         */
-        this.showWeekNumbers = false;
-        /** @internal */
-        this.embedded = false;
-        /** @internal */
-        this.today = datetime.DateTime.now().toISO();
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.selectedYear = 0;
-        this.tempYear = 0;
-        this.startYear = 0;
-        this.endYear = 0;
-        this.selectedMonth = 0;
-        this.tempMonth = 0;
-        this.dropdownButtonRef = makeRef.makeRef();
-        this.yearContainerRef = makeRef.makeRef();
-        this.firstMonthRef = makeRef.makeRef();
-        this.focusedDay = 1;
-        this.isDayFocus = false;
-        this.monthChangedFromFocus = false;
-        this.DAYS_IN_WEEK = 7;
-        this.calendar = [];
-    }
-    watchFromPropHandler(newValue) {
+        this.timeSelect = index.createEvent(this, "timeSelect", 7);
+        this.timeChange = index.createEvent(this, "timeChange", 7);
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Format of time string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     * Note: Formats that combine date and time (like f or F) are not supported. Timestamp tokens x and X are not supported either.
+     */
+    format = 'TT';
+    watchFormatIntervalPropHandler(newValue) {
         if (!newValue) {
-            this.currFromDate = undefined;
             return;
         }
-        const date = this.parseDateString(newValue);
-        if (date) {
-            this.currFromDate = date;
-            this.updateSelectedYearMonth(date);
+        this.initPicker();
+        this.updateScrollPositions();
+    }
+    /**
+     * Corner style.
+     */
+    corners = 'rounded';
+    /**
+     * Embedded style (for use in other components).
+     */
+    embedded = false;
+    /**
+     * @internal Temporary prop needed until datetime-picker is reworked for new design.
+     */
+    dateTimePickerAppearance = false;
+    /**
+     * Hides the header of the picker.
+     *
+     * @since 3.2.0
+     */
+    hideHeader = false;
+    /**
+     * Interval for hour selection.
+     *
+     * @since 3.2.0
+     */
+    hourInterval = HOUR_INTERVAL_DEFAULT;
+    watchHourIntervalPropHandler(newValue) {
+        if (Number.isInteger(newValue) &&
+            newValue >= 0 &&
+            newValue <= (this.timeRef ? 12 : 23)) {
+            this.setTimePickerDescriptors();
+            return;
         }
+        this.printIntervalError('hour', newValue);
+        this.hourInterval = HOUR_INTERVAL_DEFAULT;
     }
-    watchToPropHandler(newValue) {
-        if (!newValue) {
-            this.currToDate = undefined;
+    /**
+     * Interval for minute selection.
+     *
+     * @since 3.2.0
+     */
+    minuteInterval = MINUTE_INTERVAL_DEFAULT;
+    watchMinuteIntervalPropHandler(newValue) {
+        if (newValue >= 0 && newValue <= 59) {
+            this.setTimePickerDescriptors();
+            return;
+        }
+        this.printIntervalError('minute', newValue);
+        this.minuteInterval = MINUTE_INTERVAL_DEFAULT;
+    }
+    /**
+     * Interval for second selection.
+     *
+     * @since 3.2.0
+     */
+    secondInterval = SECOND_INTERVAL_DEFAULT;
+    watchSecondIntervalPropHandler(newValue) {
+        if (newValue >= 0 && newValue <= 59) {
+            this.setTimePickerDescriptors();
             return;
         }
-        const date = this.parseDateString(newValue);
-        if (date) {
-            this.currToDate = date;
-            this.updateSelectedYearMonth(date);
+        this.printIntervalError('second', newValue);
+        this.secondInterval = SECOND_INTERVAL_DEFAULT;
+    }
+    /**
+     * Interval for millisecond selection.
+     *
+     * @since 3.2.0
+     */
+    millisecondInterval = MILLISECOND_INTERVAL_DEFAULT;
+    watchMillisecondIntervalPropHandler(newValue) {
+        if (newValue >= 0 && newValue <= 999) {
+            this.setTimePickerDescriptors();
+            return;
         }
+        this.printIntervalError('millisecond', newValue);
+        this.millisecondInterval = MILLISECOND_INTERVAL_DEFAULT;
+    }
+    printIntervalError(intervalName, value) {
+        console.error(`Value ${value} is not valid for ${intervalName}-interval. Falling back to default.`);
     }
-    onLocaleChange() {
-        this.setTranslations();
+    warnIfConstraintTimeInvalid(prop, value, omitUnparsableWarning) {
+        const trimmed = value?.trim();
+        if (!trimmed) {
+            return;
+        }
+        const parsed = datetime.DateTime.fromFormat(trimmed, this.format);
+        if (parsed.isValid) {
+            return;
+        }
+        if (omitUnparsableWarning) {
+            return;
+        }
+        const detail = [parsed.invalidReason, parsed.invalidExplanation]
+            .filter(Boolean)
+            .join(': ');
+        console.warn(`[ix-time-picker] ${prop}="${trimmed}" does not match format "${this.format}". ` +
+            'The constraint is ignored until the value matches `format`.' +
+            (detail ? ` (${detail})` : ''));
+    }
+    warnIfConstraintRangeInverted(minValue, maxValue) {
+        const minTrimmed = minValue?.trim();
+        const maxTrimmed = maxValue?.trim();
+        if (!minTrimmed || !maxTrimmed) {
+            return;
+        }
+        const minParsed = datetime.DateTime.fromFormat(minTrimmed, this.format);
+        const maxParsed = datetime.DateTime.fromFormat(maxTrimmed, this.format);
+        if (!minParsed.isValid || !maxParsed.isValid) {
+            return;
+        }
+        if (minParsed > maxParsed) {
+            console.warn(`[ix-time-picker] minTime="${minTrimmed}" is later than maxTime="${maxTrimmed}" for format "${this.format}". ` +
+                'Both constraints are ignored.');
+        }
+    }
+    warnConstraintTimesIfInvalid(options) {
+        const omit = options?.omitUnparsableConstraintWarnings ?? false;
+        this.warnIfConstraintTimeInvalid('minTime', this.minTime, omit);
+        this.warnIfConstraintTimeInvalid('maxTime', this.maxTime, omit);
+        this.warnIfConstraintRangeInverted(this.minTime, this.maxTime);
     }
     /**
-     * Get the currently selected date or range. The object returned contains `from` and `to` properties.
-     * The property strings are formatted according to the `format` property and not affected by the `locale` property.
-     * The locale applied is always `en-US`.
+     * Selected time value.
+     * Format has to match the `format` property.
      */
-    async getCurrentDate() {
-        var _a, _b, _c, _d;
-        const _from = ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.isValid)
-            ? (_b = this.currFromDate) === null || _b === void 0 ? void 0 : _b.toFormat(this.format)
-            : undefined;
-        const _to = ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.isValid)
-            ? (_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.toFormat(this.format)
-            : undefined;
-        if (!this.singleSelection) {
-            return {
-                from: _from,
-                to: _to,
-            };
+    time;
+    watchTimePropHandler(newValue) {
+        if (newValue === undefined || newValue === '') {
+            this._time = this.getDefaultTime();
+            return;
+        }
+        const timeFormat = datetime.DateTime.fromFormat(newValue, this.format);
+        if (!timeFormat.isValid) {
+            throw new Error('Format is not supported or not correct');
+        }
+        this._time = timeFormat;
+    }
+    /** 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.warnConstraintTimesIfInvalid();
+        this.syncKeyboardFocusWithConstraints();
+    }
+    watchMaxTimePropHandler() {
+        this.warnConstraintTimesIfInvalid();
+        this.syncKeyboardFocusWithConstraints();
+    }
+    /**
+     * Get default time value
+     * @returns DateTime.now() for empty state (no selection)
+     */
+    getDefaultTime() {
+        return datetime.DateTime.now();
+    }
+    /**
+     * Text of the time confirm button.
+     */
+    i18nConfirmTime = CONFIRM_BUTTON_DEFAULT;
+    /**
+     * Text for the top header.
+     */
+    i18nHeader = HEADER_DEFAULT;
+    /**
+     * Text for the hour column header.
+     */
+    i18nHourColumnHeader = 'hr';
+    /**
+     * Text for the minute column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nMinuteColumnHeader = 'min';
+    /**
+     * Text for the second column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nSecondColumnHeader = 'sec';
+    /**
+     * Text for the millisecond column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nMillisecondColumnHeader = 'ms';
+    /**
+     * Time event. Emitted when the user confirms the selected time.
+     */
+    timeSelect;
+    /**
+     * Time change event. Emitted when the selected time changes while interacting with the picker.
+     */
+    timeChange;
+    /**
+     * Get the current time based on the wanted format
+     */
+    async getCurrentTime() {
+        return this._time?.toFormat(this.format);
+    }
+    _time;
+    onTimeChange() {
+        const formattedTimeOld = this.formattedTime;
+        this.setTimeRef();
+        this.formattedTime = this.getFormattedTime();
+        this.updateScrollPositions(formattedTimeOld);
+    }
+    timeRef;
+    formattedTime = FORMATTED_TIME_EMPTY;
+    timePickerDescriptors = [];
+    isUnitFocused = false;
+    focusedUnit = 'hour';
+    focusedValue = 0;
+    visibilityObserver;
+    focusScrollAlignment = 'start';
+    componentWillLoad() {
+        this.initPicker();
+    }
+    initPicker() {
+        let parsedTime;
+        let timePropDoesNotMatchFormat = false;
+        if (this.time) {
+            parsedTime = datetime.DateTime.fromFormat(this.time, this.format);
+            if (!parsedTime.isValid) {
+                timePropDoesNotMatchFormat = true;
+                console.error(`Invalid time format. The configured format does not match the format of the passed time. ${parsedTime.invalidReason}: ${parsedTime.invalidExplanation}`);
+                parsedTime = this.getDefaultTime();
+            }
+        }
+        else {
+            parsedTime = this.getDefaultTime();
+        }
+        this._time = parsedTime;
+        this.setTimeRef();
+        this.formattedTime = this.getFormattedTime();
+        this.setTimePickerDescriptors();
+        this.setInitialFocusedValueAndUnit();
+        this.watchHourIntervalPropHandler(this.hourInterval);
+        this.watchMinuteIntervalPropHandler(this.minuteInterval);
+        this.watchSecondIntervalPropHandler(this.secondInterval);
+        this.watchMillisecondIntervalPropHandler(this.millisecondInterval);
+        this.warnConstraintTimesIfInvalid({
+            omitUnparsableConstraintWarnings: timePropDoesNotMatchFormat,
+        });
+    }
+    componentDidLoad() {
+        super.componentDidLoad?.();
+        this.updateScrollPositions();
+        this.setupVisibilityObserver();
+    }
+    componentDidRender() {
+        if (!this.isUnitFocused) {
+            return;
+        }
+        const elementContainer = this.getElementContainer(this.focusedUnit, this.focusedValue);
+        const elementList = this.getElementList(this.focusedUnit);
+        if (!elementContainer) {
+            return;
+        }
+        if (component.hasKeyboardMode()) {
+            const active = this.hostElement.shadowRoot?.activeElement;
+            if (active !== elementContainer) {
+                elementContainer.focus({ preventScroll: true });
+            }
+        }
+        if (!this.isElementVisible(elementContainer, elementList)) {
+            this.scrollElementIntoView(elementContainer, elementList, this.focusScrollAlignment);
+        }
+    }
+    disconnectedCallback() {
+        if (this.visibilityObserver) {
+            this.visibilityObserver.disconnect();
         }
-        return {
-            from: _from,
-            to: undefined,
-        };
     }
-    handleKeyUp(event) {
-        if (!this.isDayFocus) {
+    handleKeyDown(event) {
+        if (!this.isUnitFocused) {
             return;
         }
-        let _focusedDay = this.focusedDay;
+        let shouldPreventDefault = true;
         switch (event.key) {
-            case 'ArrowLeft':
-                _focusedDay--;
-                break;
-            case 'ArrowRight':
-                _focusedDay++;
+            case 'Tab':
+                shouldPreventDefault = false;
+                this.isUnitFocused = false;
                 break;
             case 'ArrowUp':
-                _focusedDay = _focusedDay - 7;
+                this.focusScrollAlignment = 'start';
+                this.stepFocusedValue(-1);
                 break;
             case 'ArrowDown':
-                _focusedDay = _focusedDay + 7;
+                this.focusScrollAlignment = 'end';
+                this.stepFocusedValue(1);
+                break;
+            case 'Enter':
+            case ' ': {
+                const { bounds } = this.getUnitSelectionContext();
+                const base = this.buildCandidateBaseBeforeUnit(this.focusedUnit);
+                if (this.canSelectUnitValue(this.focusedUnit, this.focusedValue, bounds, base)) {
+                    this.select(this.focusedUnit, this.focusedValue);
+                }
                 break;
+            }
             default:
                 return;
         }
-        if (_focusedDay > this.getDaysInCurrentMonth()) {
-            _focusedDay = _focusedDay - this.getDaysInCurrentMonth();
-            this.changeToAdjacentMonth(1);
-            this.monthChangedFromFocus = true;
-        }
-        else if (_focusedDay < 1) {
-            this.changeToAdjacentMonth(-1);
-            _focusedDay = _focusedDay + this.getDaysInCurrentMonth();
-            this.monthChangedFromFocus = true;
+        if (shouldPreventDefault) {
+            event.preventDefault();
         }
-        this.focusedDay = _focusedDay;
-    }
-    getDaysInCurrentMonth() {
-        return (datetime.DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0);
     }
-    getDateTimeNow() {
-        return datetime.DateTime.fromISO(this.today);
-    }
-    parseDateString(dateString) {
-        const date = datetime.DateTime.fromFormat(dateString, this.format);
-        if (!date.isValid) {
-            console.error(date.invalidExplanation);
-            return undefined;
+    onUnitCellBlur(unit, event) {
+        const relatedTarget = event.relatedTarget;
+        const relatedUnit = relatedTarget?.dataset?.elementContainerId?.split('-')[0];
+        const movingWithinSameColumn = relatedUnit === unit;
+        // Check if column lost focus to scroll back to selected value
+        if (relatedTarget && !movingWithinSameColumn) {
+            if (relatedUnit !== unit) {
+                this.elementListScrollToTop(unit, Number(this.formattedTime[unit]), 'smooth');
+            }
+        }
+        // Still within this column (e.g. roving focus between cells)
+        if (movingWithinSameColumn) {
+            return;
         }
-        return date;
+        this.isUnitFocused = false;
+        const focusedValue = this.resolvePreservedFocusedValueOnColumnBlur(unit);
+        this.focusedValue = focusedValue;
+        this.updateDescriptorFocusedValue(unit, focusedValue);
     }
-    updateSelectedYearMonth(date) {
-        this.selectedYear = date.year;
-        this.selectedMonth = date.month - 1;
+    onUnitCellFocus(unit, value) {
+        this.isUnitFocused = true;
+        this.focusedUnit = unit;
+        this.focusedValue = value;
+        this.updateDescriptorFocusedValue(unit, value);
     }
-    onDayBlur() {
-        this.isDayFocus = false;
+    getElementList(unit) {
+        return this.hostElement.shadowRoot?.querySelector(`[data-element-list-id="${unit}"]`);
     }
-    onDayFocus() {
-        this.isDayFocus = true;
+    getElementContainer(unit, number) {
+        return this.hostElement.shadowRoot?.querySelector(`[data-element-container-id="${unit}-${number}"]`);
     }
-    componentWillLoad() {
-        var _a, _b, _c, _d;
-        this.setTranslations();
-        this.currFromDate = this.from
-            ? datetime.DateTime.fromFormat(this.from, this.format)
-            : undefined;
-        this.currToDate = this.to
-            ? datetime.DateTime.fromFormat(this.to, this.format)
-            : undefined;
-        const year = (_b = (_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : this.getDateTimeNow().year;
-        this.startYear = year - 5;
-        this.endYear = year + 5;
-        this.selectedMonth =
-            ((_d = (_c = this.currFromDate) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : this.getDateTimeNow().month) - 1;
-        this.selectedYear = year;
-        this.tempMonth = this.selectedMonth;
-        this.tempYear = this.selectedYear;
-    }
-    componentWillRender() {
-        this.calculateCalendar();
+    isElementVisible(element, container) {
+        const elementRect = element.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        return (elementRect.top >= containerRect.top &&
+            elementRect.bottom <= containerRect.bottom);
     }
-    componentDidRender() {
-        if (!this.monthChangedFromFocus && !this.isDayFocus) {
+    scrollElementIntoView(element, container, alignment) {
+        const SCROLL_BUFFER = 1;
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        if (alignment === 'end') {
+            container.scrollTop +=
+                elementRect.bottom - containerRect.bottom + SCROLL_BUFFER;
+        }
+        else {
+            container.scrollTop +=
+                elementRect.top - containerRect.top - SCROLL_BUFFER;
+        }
+    }
+    setInitialFocusedValueAndUnit() {
+        const firstVisibleDescriptor = this.timePickerDescriptors.find((descriptor) => !descriptor.hidden);
+        if (!firstVisibleDescriptor) {
             return;
         }
-        const dayElem = this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);
-        dayElem.focus();
+        this.focusedValue = this.getConstrainedFocusedValueForUnit(firstVisibleDescriptor.unit, firstVisibleDescriptor.numberArray);
+        this.focusedUnit = firstVisibleDescriptor.unit;
     }
-    setTranslations() {
-        this.dayNames = this.rotateWeekDayNames(datetime.Info.weekdays('long', {
-            locale: this.locale,
-        }), this.weekStartIndex);
-        this.monthNames = datetime.Info.months('long', {
-            locale: this.locale,
+    setupVisibilityObserver() {
+        const dropdown = shadowDom.closestPassShadow(this.hostElement, 'ix-dropdown');
+        if (!dropdown) {
+            return;
+        }
+        this.visibilityObserver = new MutationObserver((mutations) => this.mutationObserverCallback(mutations));
+        this.visibilityObserver.observe(dropdown, {
+            attributes: true,
+            attributeFilter: ['class', 'style'],
         });
     }
-    /**
-     * Rotate the WeekdayNames array.
-     * Based on the position that should be the new 0-index.
-     */
-    rotateWeekDayNames(weekdays, index) {
-        const clone = [...weekdays];
-        if (index === 0) {
-            return clone;
-        }
-        index = -index;
-        const len = weekdays.length;
-        clone.push(...clone.splice(0, ((-index % len) + len) % len));
-        return clone;
-    }
-    async onDone() {
-        const date = await this.getCurrentDate();
-        this.dateSelect.emit(date);
-    }
-    calculateCalendar() {
-        const calendar = [];
-        const month = datetime.DateTime.utc(this.selectedYear, this.selectedMonth + 1);
-        const monthStart = month.startOf('month');
-        const monthEnd = month.endOf('month');
-        let startWeek = monthStart.weekNumber;
-        let endWeek = monthEnd.weekNumber;
-        let monthStartWeekDayIndex = monthStart.weekday - 1;
-        let monthEndWeekDayIndex = monthEnd.weekday - 1;
-        if (this.weekStartIndex !== 0) {
-            // Find the positions where to start/stop counting the day-numbers based on which day the week starts
-            const weekdays = datetime.Info.weekdays();
-            const monthStartWeekDayName = weekdays[monthStart.weekday];
-            monthStartWeekDayIndex = this.dayNames.findIndex((d) => d === monthStartWeekDayName);
-            const monthEndWeekDayName = weekdays[monthEnd.weekday];
-            monthEndWeekDayIndex = this.dayNames.findIndex((d) => d === monthEndWeekDayName);
-        }
-        let correctLastWeek = false;
-        if (endWeek === 1) {
-            endWeek = monthEnd.weeksInWeekYear + 1;
-            correctLastWeek = true;
-        }
-        let correctFirstWeek = false;
-        if (startWeek === monthStart.weeksInWeekYear) {
-            startWeek = 1;
-            endWeek++;
-            correctFirstWeek = true;
-        }
-        let currDayNumber = 1;
-        for (let weekIndex = startWeek; weekIndex <= endWeek && currDayNumber <= 31; weekIndex++) {
-            const daysArr = [];
-            for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {
-                // Display empty cells until the calender starts/has ended
-                if ((weekIndex === startWeek && j < monthStartWeekDayIndex) ||
-                    (weekIndex === endWeek && j > monthEndWeekDayIndex)) {
-                    daysArr.push(undefined);
-                }
-                else {
-                    daysArr.push(currDayNumber++);
-                }
+    mutationObserverCallback(mutations) {
+        for (const mutation of mutations) {
+            if (mutation.type !== 'attributes') {
+                continue;
             }
-            if (correctFirstWeek || correctLastWeek) {
-                if (weekIndex === 1) {
-                    calendar.push({
-                        weekNumber: monthStart.weeksInWeekYear,
-                        dayNumbers: daysArr,
-                    });
-                }
-                else if (weekIndex === monthEnd.weekNumber) {
-                    calendar.push({
-                        weekNumber: 1,
-                        dayNumbers: daysArr,
-                    });
-                }
-                else {
-                    calendar.push({
-                        weekNumber: weekIndex - 1,
-                        dayNumbers: daysArr,
-                    });
+            const dropdown = mutation.target;
+            if (!dropdown.classList.contains('show')) {
+                // keep picker in sync with input
+                if (this.time) {
+                    const timeFormat = datetime.DateTime.fromFormat(this.time, this.format);
+                    if (timeFormat.isValid) {
+                        this._time = datetime.DateTime.fromFormat(this.time, this.format);
+                        this.setInitialFocusedValueAndUnit();
+                    }
                 }
                 continue;
             }
-            calendar.push({
-                weekNumber: weekIndex,
-                dayNumbers: daysArr,
-            });
+            const elementsReady = this.areElementsRendered();
+            if (!elementsReady) {
+                continue;
+            }
+            this.updateScrollPositions();
         }
-        this.calendar = calendar;
     }
-    selectTempYear(event, year) {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        this.tempYear = year;
+    areElementsRendered() {
+        const elementLists = this.hostElement.shadowRoot?.querySelectorAll('.element-list');
+        if (!elementLists || elementLists.length === 0) {
+            return false;
+        }
+        return Array.from(elementLists).some((list) => list.offsetHeight > 0);
     }
-    focusMonth() {
-        var _a;
-        (_a = this.firstMonthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    getFormattedTime() {
+        if (!this._time) {
+            return FORMATTED_TIME_EMPTY;
+        }
+        return {
+            hour: this.timeRef !== undefined
+                ? this._time.toFormat('h')
+                : this._time.toFormat('H'),
+            minute: this._time.toFormat('m'),
+            second: this._time.toFormat('s'),
+            millisecond: this._time.toFormat('S'),
+        };
     }
-    infiniteScrollYears() {
-        const yearContainer = this.yearContainerRef.current;
-        if (!yearContainer) {
+    changeTimeReference(newTimeRef) {
+        if (this.timeRef === newTimeRef) {
             return;
         }
-        const scroll = yearContainer.scrollTop;
-        const maxScroll = yearContainer.scrollHeight;
-        const atTop = scroll === 0;
-        const atBottom = Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;
-        const limit = 200;
-        if (this.endYear - this.startYear > limit)
+        if (!this._time) {
+            this._time = datetime.DateTime.now().startOf('day');
+        }
+        const previousTime = this._time;
+        const previousRef = this.timeRef;
+        this.timeRef = newTimeRef;
+        const currentHour = this._time.hour;
+        if (newTimeRef === 'PM' && currentHour < 12) {
+            this._time = this._time.plus({ hours: 12 });
+        }
+        else if (newTimeRef === 'AM' && currentHour >= 12) {
+            this._time = this._time.minus({ hours: 12 });
+        }
+        if (!this.isWithinTimeConstraints(this._time)) {
+            this._time = previousTime;
+            this.timeRef = previousRef;
+            return;
+        }
+        this.timeChange.emit(this._time.toFormat(this.format));
+    }
+    /** `_time` or “now” (constraints, AM/PM, confirm). */
+    referenceOrNow() {
+        return this._time ?? datetime.DateTime.now();
+    }
+    setTimeRef() {
+        const uses12HourFormat = isFormat12Hour(this.format);
+        if (!uses12HourFormat) {
+            this.timeRef = undefined;
+            return;
+        }
+        const clock = this.referenceOrNow();
+        this.timeRef = clock.hour >= 12 ? 'PM' : 'AM';
+    }
+    getConstraintBounds(referenceClock) {
+        const baseDay = (referenceClock ?? this.referenceOrNow()).startOf('day');
+        return timePickerConstraints.getTimePickerConstraintBounds(this.minTime, this.maxTime, this.format, baseDay);
+    }
+    /** Bounds and `selectionBase` from {@link referenceOrNow}. */
+    getUnitSelectionContext() {
+        const referenceClock = this.referenceOrNow();
+        return {
+            bounds: this.getConstraintBounds(referenceClock),
+            selectionBase: this._time ?? referenceClock.startOf('day'),
+        };
+    }
+    isWithinTimeConstraints(candidate) {
+        const { min, max } = this.getConstraintBounds();
+        return timePickerConstraints.isWithinTimePickerConstraints(candidate, min, max);
+    }
+    canSelectUnitValue(unit, rawValue, bounds, selectionBase) {
+        const base = selectionBase ?? this._time ?? datetime.DateTime.now().startOf('day');
+        const effectiveBounds = bounds ?? this.getConstraintBounds();
+        if (unit === 'hour' &&
+            timePickerConstraints.hasActiveTimePickerConstraints(effectiveBounds.min, effectiveBounds.max)) {
+            const dayStart = base.startOf('day');
+            const hourStart = computeTimeWithRawUnitValue(dayStart, 'hour', rawValue, this.timeRef);
+            if (!hourStart) {
+                return false;
+            }
+            const hourEnd = hourStart.set({
+                minute: 59,
+                second: 59,
+                millisecond: 999,
+            });
+            return timePickerConstraints.timeOfDayRangeIntersectsInclusiveBounds(hourStart, hourEnd, effectiveBounds.min, effectiveBounds.max);
+        }
+        const candidate = computeTimeWithRawUnitValue(base, unit, rawValue, this.timeRef);
+        if (!candidate) {
+            return false;
+        }
+        if (bounds) {
+            return this.isSelectableForUnitWithinBounds(unit, candidate, bounds);
+        }
+        return this.isWithinTimeConstraints(candidate);
+    }
+    isSelectableForUnitWithinBounds(unit, candidate, bounds) {
+        return isSelectableForUnitWithinBounds(unit, candidate, bounds);
+    }
+    /** Provisional `unit` for cross-column base: roving cell, earlier descriptors, else displayed digits. */
+    getProvisionalRawValue(unit) {
+        if (this.focusedUnit === unit) {
+            return this.focusedValue;
+        }
+        const order = this.timePickerDescriptors.map((d) => d.unit);
+        const iFocused = order.indexOf(this.focusedUnit);
+        const iUnit = order.indexOf(unit);
+        if (iUnit !== -1 && iFocused !== -1 && iUnit < iFocused) {
+            const d = this.timePickerDescriptors.find((x) => x.unit === unit);
+            if (d) {
+                return d.focusedValue;
+            }
+        }
+        const raw = this.formattedTime?.[unit];
+        if (raw === '' || raw === undefined) {
+            return 0;
+        }
+        return Number(raw);
+    }
+    /** Base time for `canSelect`/`select` on `targetUnit`: committed hour; mid-columns via {@link getProvisionalRawValue}. */
+    buildCandidateBaseBeforeUnit(targetUnit) {
+        const { selectionBase } = this.getUnitSelectionContext();
+        const order = this.timePickerDescriptors.map((d) => d.unit);
+        const targetIndex = order.indexOf(targetUnit);
+        if (targetIndex <= 0) {
+            return selectionBase;
+        }
+        let base = this._time ?? selectionBase;
+        for (let i = 1; i < targetIndex; i++) {
+            const unit = order[i];
+            if (unit === undefined) {
+                continue;
+            }
+            const raw = this.getProvisionalRawValue(unit);
+            const next = computeTimeWithRawUnitValue(base, unit, raw, this.timeRef);
+            if (next) {
+                base = next;
+            }
+        }
+        return base;
+    }
+    getConstrainedFocusedValueForUnitWithBase(unit, numberArray, baseBeforeUnit) {
+        const { bounds } = this.getUnitSelectionContext();
+        const pickFirstSelectable = () => {
+            const found = numberArray.find((n) => this.canSelectUnitValue(unit, n, bounds, baseBeforeUnit));
+            return found ?? null;
+        };
+        const selected = Number(this.formattedTime[unit]);
+        if (!numberArray.includes(selected)) {
+            return pickFirstSelectable() ?? numberArray[0];
+        }
+        if (this.canSelectUnitValue(unit, selected, bounds, baseBeforeUnit)) {
+            return selected;
+        }
+        return pickFirstSelectable() ?? numberArray[0];
+    }
+    getConstrainedFocusedValueForUnit(unit, numberArray) {
+        return this.getConstrainedFocusedValueForUnitWithBase(unit, numberArray, this.buildCandidateBaseBeforeUnit(unit));
+    }
+    resolvePreservedFocusedValueOnColumnBlur(unit) {
+        const arr = this.getNumberArrayForUnit(unit);
+        const { bounds } = this.getUnitSelectionContext();
+        const base = this.buildCandidateBaseBeforeUnit(unit);
+        const current = this.focusedValue;
+        if (arr.includes(current) &&
+            this.canSelectUnitValue(unit, current, bounds, base)) {
+            return current;
+        }
+        return this.getConstrainedFocusedValueForUnit(unit, arr);
+    }
+    syncKeyboardFocusWithConstraints() {
+        if (!this.timePickerDescriptors.length) {
             return;
-        if (atTop) {
-            const first = yearContainer.firstElementChild;
-            this.startYear -= 5;
-            yearContainer.scrollTo(0, first.offsetTop);
+        }
+        for (const d of this.timePickerDescriptors) {
+            const next = this.getConstrainedFocusedValueForUnit(d.unit, d.numberArray);
+            if (next !== d.focusedValue) {
+                this.updateDescriptorFocusedValue(d.unit, next);
+            }
+        }
+        const arr = this.getNumberArrayForUnit(this.focusedUnit);
+        if (arr.length) {
+            const nextFocused = this.getConstrainedFocusedValueForUnit(this.focusedUnit, arr);
+            if (nextFocused !== this.focusedValue) {
+                this.focusedValue = nextFocused;
+            }
+        }
+    }
+    findFirstSelectableInUnit(unit) {
+        const arr = this.getNumberArrayForUnit(unit);
+        const { bounds } = this.getUnitSelectionContext();
+        const base = this.buildCandidateBaseBeforeUnit(unit);
+        const found = arr.find((n) => this.canSelectUnitValue(unit, n, bounds, base));
+        return found ?? null;
+    }
+    getColumnTabStopValue(unit) {
+        const d = this.timePickerDescriptors.find((x) => x.unit === unit);
+        const arr = d?.numberArray ?? [];
+        if (!d || !arr.length) {
+            return null;
+        }
+        const { bounds } = this.getUnitSelectionContext();
+        const base = this.buildCandidateBaseBeforeUnit(unit);
+        const candidate = d.focusedValue;
+        if (arr.includes(candidate) &&
+            this.canSelectUnitValue(unit, candidate, bounds, base)) {
+            return candidate;
+        }
+        return this.findFirstSelectableInUnit(unit);
+    }
+    stepFocusedValue(direction) {
+        const unit = this.focusedUnit;
+        const arr = this.getNumberArrayForUnit(unit);
+        const { bounds } = this.getUnitSelectionContext();
+        const base = this.buildCandidateBaseBeforeUnit(unit);
+        const next = findNextSelectableRingValue(arr, this.focusedValue, direction, (candidate) => this.canSelectUnitValue(unit, candidate, bounds, base));
+        if (next === null) {
             return;
         }
-        if (atBottom) {
-            const last = yearContainer.lastElementChild;
-            this.endYear += 5;
-            yearContainer.scrollTo(0, last.offsetTop);
+        this.focusedValue = next;
+        this.updateDescriptorFocusedValue(unit, next);
+    }
+    isConfirmDisabled() {
+        const referenceClock = this.referenceOrNow();
+        const { min, max } = this.getConstraintBounds(referenceClock);
+        if (!timePickerConstraints.hasActiveTimePickerConstraints(min, max)) {
+            return false;
         }
+        return !timePickerConstraints.isWithinTimePickerConstraints(referenceClock, min, max);
     }
-    selectMonth(month) {
-        this.selectedMonth = month;
-        this.selectedYear = this.tempYear;
-        this.tempMonth = month;
-        const dropdown = this.hostElement.shadowRoot.querySelector('ix-dropdown');
-        if (dropdown) {
-            dropdown.show = false;
+    setTimePickerDescriptors() {
+        const { hourNumbers, minuteNumbers, secondNumbers, millisecondsNumbers } = buildTimePickerColumnNumberArrays({
+            hourInterval: this.hourInterval,
+            minuteInterval: this.minuteInterval,
+            secondInterval: this.secondInterval,
+            millisecondInterval: this.millisecondInterval,
+        }, this.timeRef);
+        const { selectionBase } = this.getUnitSelectionContext();
+        const columns = [
+            {
+                unit: 'hour',
+                header: this.i18nHourColumnHeader,
+                hidden: !LUXON_FORMAT_PATTERNS.hours.test(this.format),
+                numberArray: hourNumbers,
+            },
+            {
+                unit: 'minute',
+                header: this.i18nMinuteColumnHeader,
+                hidden: !LUXON_FORMAT_PATTERNS.minutes.test(this.format),
+                numberArray: minuteNumbers,
+            },
+            {
+                unit: 'second',
+                header: this.i18nSecondColumnHeader,
+                hidden: !LUXON_FORMAT_PATTERNS.seconds.test(this.format),
+                numberArray: secondNumbers,
+            },
+            {
+                unit: 'millisecond',
+                header: this.i18nMillisecondColumnHeader,
+                hidden: !LUXON_FORMAT_PATTERNS.milliseconds.test(this.format),
+                numberArray: millisecondsNumbers,
+            },
+        ];
+        let base = selectionBase;
+        const descriptors = [];
+        for (const col of columns) {
+            if (col.hidden) {
+                continue;
+            }
+            const focusedValue = this.getConstrainedFocusedValueForUnitWithBase(col.unit, col.numberArray, base);
+            descriptors.push({
+                unit: col.unit,
+                header: col.header,
+                hidden: false,
+                numberArray: col.numberArray,
+                focusedValue,
+            });
+            const next = computeTimeWithRawUnitValue(base, col.unit, focusedValue, this.timeRef);
+            if (next) {
+                base = next;
+            }
         }
+        this.timePickerDescriptors = descriptors;
     }
-    changeToAdjacentMonth(number) {
-        if (this.selectedMonth + number < 0) {
-            this.selectedYear--;
-            this.selectedMonth = 11;
+    getNumberArrayForUnit(unit) {
+        const descriptor = this.timePickerDescriptors.find((descriptor) => descriptor.unit === unit);
+        return descriptor ? descriptor.numberArray : [];
+    }
+    isSelected(unit, number) {
+        return this.formattedTime[unit] === String(number);
+    }
+    /** Roving tabindex: one tab stop per column; active column only the focused cell has `tabindex=0`. */
+    getUnitCellTabIndex(unit, number) {
+        const { bounds } = this.getUnitSelectionContext();
+        const base = this.buildCandidateBaseBeforeUnit(unit);
+        const cellIsSelectable = this.canSelectUnitValue(unit, number, bounds, base);
+        if (!cellIsSelectable) {
+            return -1;
         }
-        else if (this.selectedMonth + number > 11) {
-            this.selectedYear++;
-            this.selectedMonth = 0;
+        if (this.isUnitFocused && this.focusedUnit === unit) {
+            return this.focusedValue === number ? 0 : -1;
         }
-        else {
-            this.selectedMonth += number;
+        const stop = this.getColumnTabStopValue(unit);
+        if (stop === null) {
+            return -1;
         }
+        return stop === number ? 0 : -1;
     }
-    selectDay(selectedDay, target) {
-        if (target.classList.contains('disabled')) {
+    select(unit, number) {
+        if (this.isSelected(unit, number)) {
             return;
         }
-        const date = datetime.DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, selectedDay));
-        if (this.singleSelection || this.currFromDate === undefined) {
-            this.currFromDate = date;
-            this.onDateChange();
+        const { bounds } = this.getUnitSelectionContext();
+        const base = this.buildCandidateBaseBeforeUnit(unit);
+        if (!this.canSelectUnitValue(unit, number, bounds, base)) {
             return;
         }
-        // Reset the range selection
-        if (this.currToDate !== undefined) {
-            this.currFromDate = date;
-            this.currToDate = undefined;
-            this.onDateChange();
+        const candidate = computeTimeWithRawUnitValue(base, unit, number, this.timeRef);
+        if (!candidate) {
             return;
         }
-        // Swap from/to if the second date is before the current date
-        if (date < this.currFromDate) {
-            this.currToDate = this.currFromDate;
-            this.currFromDate = date;
-            this.onDateChange();
+        if (this._time && candidate.toMillis() === this._time.toMillis()) {
             return;
         }
-        // Set the range normally
-        this.currToDate = date;
-        this.onDateChange();
+        this._time = candidate;
+        this.elementListScrollToTop(unit, number, 'smooth');
+        this.timeChange.emit(this._time.toFormat(this.format));
     }
-    onDateChange() {
-        this.getCurrentDate().then((date) => {
-            this.dateChange.emit(date);
-            if (!this.singleSelection) {
-                this.dateRangeChange.emit(date);
-            }
-        });
+    updateDescriptorFocusedValue(unit, value) {
+        const descriptorIndex = this.timePickerDescriptors.findIndex((d) => d.unit === unit);
+        if (descriptorIndex !== -1) {
+            this.timePickerDescriptors = [
+                ...this.timePickerDescriptors.slice(0, descriptorIndex),
+                {
+                    ...this.timePickerDescriptors[descriptorIndex],
+                    focusedValue: value,
+                },
+                ...this.timePickerDescriptors.slice(descriptorIndex + 1),
+            ];
+        }
     }
-    getDayClasses(day) {
-        var _a, _b, _c;
-        const todayObj = this.getDateTimeNow();
-        const selectedDayObj = datetime.DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
-        return {
-            'calendar-item': true,
-            'empty-day': day === undefined,
-            today: todayObj.hasSame(selectedDayObj, 'day'),
-            selected: !!(((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
-                ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day'))),
-            range: !!(this.currFromDate &&
-                selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&
-                this.currToDate !== undefined &&
-                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day'))),
-            disabled: !this.isWithinMinMaxDate(selectedDayObj),
-        };
+    elementListScrollToTop(unit, number, scrollBehaviour) {
+        const elementList = this.getElementList(unit);
+        const elementContainer = this.getElementContainer(unit, number);
+        if (elementList && elementContainer) {
+            const elementListHeight = elementList.clientHeight;
+            const elementContainerHeight = elementContainer.clientHeight;
+            // Offset which is used to adjust the scroll position to account for margins, elements being hidden, etc.
+            let scrollPositionOffset = 11;
+            if (this.hideHeader) {
+                // 56 + 1 --> height of the header container and separator
+                scrollPositionOffset -= 57;
+            }
+            const scrollPosition = elementContainer.offsetTop -
+                elementListHeight / 2 +
+                elementContainerHeight -
+                scrollPositionOffset;
+            elementList.scrollTo({
+                top: scrollPosition,
+                behavior: scrollBehaviour,
+            });
+        }
     }
-    isWithinMinMaxYear(year) {
-        const minDateYear = this.minDate
-            ? datetime.DateTime.fromFormat(this.minDate, this.format).year
-            : undefined;
-        const maxDateYear = this.maxDate
-            ? datetime.DateTime.fromFormat(this.maxDate, this.format).year
-            : undefined;
-        const isBefore = minDateYear ? year < minDateYear : false;
-        const isAfter = maxDateYear ? year > maxDateYear : false;
-        return !isBefore && !isAfter;
-    }
-    isWithinMinMaxMonth(month) {
-        const minDateObj = this.minDate
-            ? datetime.DateTime.fromFormat(this.minDate, this.format)
-            : undefined;
-        const maxDateObj = this.maxDate
-            ? datetime.DateTime.fromFormat(this.maxDate, this.format)
-            : undefined;
-        const minDateMonth = minDateObj === null || minDateObj === void 0 ? void 0 : minDateObj.month;
-        const maxDateMonth = maxDateObj === null || maxDateObj === void 0 ? void 0 : maxDateObj.month;
-        const isBefore = minDateMonth
-            ? this.tempYear === minDateObj.year && month < minDateMonth
-            : false;
-        const isAfter = maxDateMonth
-            ? this.tempYear === maxDateObj.year && month > maxDateMonth
-            : false;
-        return !isBefore && !isAfter;
-    }
-    isWithinMinMaxDate(date) {
-        const _minDate = this.minDate
-            ? datetime.DateTime.fromFormat(this.minDate, this.format)
-            : undefined;
-        const _maxDate = this.maxDate
-            ? datetime.DateTime.fromFormat(this.maxDate, this.format)
-            : undefined;
-        const isBefore = _minDate
-            ? date.startOf('day') < _minDate.startOf('day')
-            : false;
-        const isAfter = _maxDate
-            ? date.startOf('day') > _maxDate.startOf('day')
-            : false;
-        return !isBefore && !isAfter;
-    }
-    renderYears() {
-        const rows = [];
-        for (let year = this.startYear; year <= this.endYear; year++) {
-            rows.push(index.h("div", { key: year, class: {
-                    arrowYear: true,
-                    'month-dropdown-item': true,
-                    'disabled-item': !this.isWithinMinMaxYear(year),
-                }, onClick: (event) => this.selectTempYear(event, year), onKeyUp: (event) => {
-                    if (event.key === 'Enter') {
-                        this.tempYear = year;
-                        this.focusMonth();
-                    }
-                }, tabIndex: 0 }, index.h("ix-icon", { class: {
-                    hidden: this.tempYear !== year,
-                    arrowPosition: true,
-                }, name: index$1.iconChevronRightSmall, size: "12" }), index.h("div", { style: { 'min-width': 'max-content' } }, `${year}`)));
+    /**
+     * Updates all scroll positions of the time picker elements
+     * Updates only the elements that have changed if `formattedTimeOld` is provided
+     */
+    updateScrollPositions(formattedTimeOld = undefined) {
+        for (const key in this.formattedTime) {
+            const unitKey = key;
+            if (!formattedTimeOld ||
+                this.formattedTime[unitKey] !== formattedTimeOld[unitKey]) {
+                this.elementListScrollToTop(unitKey, Number(this.formattedTime[unitKey]), 'instant');
+            }
         }
-        return rows;
+    }
+    formatUnitValue(unit, value) {
+        return formatTimePickerUnitValue(unit, value);
+    }
+    getColumnSeparator(currentIndex) {
+        return getTimePickerColumnSeparator(currentIndex, this.timePickerDescriptors);
     }
     render() {
-        return (index.h(index.Host, { key: '98ea6b7a88faa52ff75b8bba1cb2c9e22c4e73e8' }, index.h("ix-date-time-card", { key: 'e16c7a978263147e3e6b4a71f32d934eddf06d2c', corners: this.corners, embedded: this.embedded }, index.h("div", { key: 'b96e24b6b2d1876c9e10be3791a8a7417d83a380', class: "header", slot: "header" }, index.h("ix-icon-button", { key: '10ca5417cb64bb25679269f4608868d057cb9f54', onClick: () => this.changeToAdjacentMonth(-1), icon: index$1.iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), index.h("div", { key: '9a286af048e16def6e92bb5aaeef56ca63eeb819', class: "selector" }, index.h("ix-button", { key: '9c95aef10ee98999301b796562109b62ab460328', variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, index.h("span", { key: '87f8874169536008fc5a95ebb5f27c2d90c74013', class: "capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), index.h("ix-dropdown", { key: '03b7ee75c45fbf966782b6685956ca16f1b9ea7d', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start", enableTopLayer: this.enableTopLayer }, index.h("div", { key: '6ebe9445e018d9ea0d8ea234ffe04bd5b7c756d6', class: "wrapper" }, index.h("div", { key: '560f769508c69c1ca7ae836f657d6b2a9a0f54dc', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), index.h("div", { key: '8a933460c220113a5bfe96d8b59948c43095e073', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index$2) => (index.h("div", { key: month, ref: (ref) => {
-                if (month === this.monthNames[0]) {
-                    this.firstMonthRef(ref);
-                }
-            }, class: {
-                arrowYear: true,
-                'month-dropdown-item': true,
-                selected: this.tempYear === this.selectedYear &&
-                    this.tempMonth === index$2,
-                'disabled-item': !this.isWithinMinMaxMonth(index$2),
-            }, onClick: () => this.selectMonth(index$2), onKeyUp: (event) => event.key === 'Enter' && this.selectMonth(index$2), tabIndex: 0 }, index.h("ix-icon", { class: {
-                hidden: this.tempYear !== this.selectedYear ||
-                    this.tempMonth !== index$2,
-                checkPosition: true,
-            }, name: index$1.iconSingleCheck, size: "16" }), index.h("div", null, index.h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), index.h("ix-icon-button", { key: 'd183b81face1835095ebf6b0f0b741f3bd177434', onClick: () => this.changeToAdjacentMonth(1), icon: index$1.iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), index.h("div", { key: '747249d090059b0beea2d522efaafa0e816bd9b5', class: {
-                grid: true,
-                'grid--show-week-numbers': this.showWeekNumbers,
-            } }, this.showWeekNumbers && index.h("div", { key: '30566707d9ad58aea828bc579abb42fab5078d4e', class: "calendar-item week-day" }), this.dayNames.map((name) => (index.h("div", { key: name, class: "calendar-item week-day" }, index.h("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
-            return (index.h(index.Fragment, null, this.showWeekNumbers && (index.h("div", { class: "calendar-item week-number" }, week.weekNumber)), week.dayNumbers.map((day) => {
-                return day ? (index.h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
-                        const target = e.currentTarget;
-                        this.selectDay(day, target);
-                    }, onKeyUp: (e) => {
-                        const target = e.currentTarget;
-                        if (e.key === 'Enter') {
-                            this.selectDay(day, target);
-                        }
-                    }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${this.selectedMonth}: ${day}` }, day)) : (index.h("div", null));
-            })));
-        })), index.h("div", { key: '2b9a45684c662329a1e6e16062f5710d62112210', class: {
-                button: true,
-                hidden: this.singleSelection || this.embedded,
-            } }, index.h("ix-button", { key: '35de7243b5de0016794880b7287a96b60dc2676c', onClick: () => this.onDone() }, this.i18nDone)))));
+        const { bounds } = this.getUnitSelectionContext();
+        return (index.h(index.Host, { key: '148f502158a23cb3653c1f062a69cff199e93fdc' }, index.h("ix-date-time-card", { key: '5612a12cfb0a8b3c55c3491fcae620d63fa0bbd7', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, index.h("div", { key: '80c1720b837cc3cef4fb4590f68dfe1ab23b8370', class: "header", slot: "header" }, index.h("ix-typography", { key: '087b23019ec2213c3a23b0c1c08da2328af144be', format: "body" }, this.i18nHeader)), index.h("div", { key: '1c4c0a0ca82ae0633fbecd5ed9453493c7b9cf98', class: "clock" }, this.timePickerDescriptors.map((descriptor, index$1) => {
+            return (index.h("div", { class: "flex" }, index.h("div", { class: { columns: true, hidden: descriptor.hidden }, hidden: descriptor.hidden }, index.h("div", { class: "column-header", title: descriptor.header }, descriptor.header), index.h("div", { role: "listbox", "aria-label": descriptor.header, "data-element-list-id": descriptor.unit, class: "element-list", tabindex: -1 }, descriptor.numberArray.map((number) => {
+                const cellTabIndex = this.getUnitCellTabIndex(descriptor.unit, number);
+                const disabled = !this.canSelectUnitValue(descriptor.unit, number, bounds, this.buildCandidateBaseBeforeUnit(descriptor.unit));
+                const selected = this.isSelected(descriptor.unit, number);
+                return (index.h("button", { role: "option", "aria-selected": selected ? 'true' : 'false', "data-element-container-id": `${descriptor.unit}-${number}`, class: {
+                        selected,
+                        'element-container': true,
+                        disabled,
+                    }, disabled: disabled, onClick: () => {
+                        this.select(descriptor.unit, number);
+                    }, onFocus: () => this.onUnitCellFocus(descriptor.unit, number), onBlur: (e) => this.onUnitCellBlur(descriptor.unit, e), "aria-label": `${descriptor.header}: ${number}`, tabindex: cellTabIndex }, this.formatUnitValue(descriptor.unit, number)));
+            }), index.h("div", { class: "element-list-padding" }))), index$1 !== this.timePickerDescriptors.length - 1 && (index.h("div", { class: {
+                    'column-separator': true,
+                    hidden: descriptor.hidden,
+                } }, this.getColumnSeparator(index$1)))));
+        }), this.timeRef && (index.h("div", { key: 'aee3e153f67ba1365ff56d36a72d1d5561d30e2a', class: "flex" }, index.h("div", { key: 'd18821a7a032522e161fdd1e74a5812d2111a6ae', class: "column-separator" }), index.h("div", { key: '57db4e6409de2fbf5d13647304af280866845695', class: "columns" }, index.h("div", { key: 'd60b46a2bc28606c7708eb3dbccee6fe76df8cc5', class: "column-header", title: "AM/PM" }), index.h("div", { key: '2d33c518b011e25fb334cd8e1f1efa9b79cd35ff', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, index.h("button", { key: '0ee352467596e646e3afc588ccaa80cad649c551', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
+                selected: this.timeRef === 'AM',
+                'element-container': true,
+            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), index.h("button", { key: '3c207b5fb9f759a101ce7d1959f93cbfda487274', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
+                selected: this.timeRef === 'PM',
+                'element-container': true,
+            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), index.h("div", { key: 'fc56aa00e3d0280045272303181d49fbcf473bc6', class: {
+                footer: true,
+                'footer--compact': this.timePickerDescriptors.length <= 2,
+            }, slot: "footer" }, index.h("ix-button", { key: '1c2361d8241d53b5f902f203b43a8bf768f8d1af', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
+                this.timeSelect.emit(this._time?.toFormat(this.format));
+            } }, this.i18nConfirmTime)))));
     }
-    get hostElement() { return index.getElement(this); }
+    static get delegatesFocus() { return true; }
     static get watchers() { return {
-        "from": [{
-                "watchFromPropHandler": 0
+        "format": [{
+                "watchFormatIntervalPropHandler": 0
+            }],
+        "hourInterval": [{
+                "watchHourIntervalPropHandler": 0
+            }],
+        "minuteInterval": [{
+                "watchMinuteIntervalPropHandler": 0
+            }],
+        "secondInterval": [{
+                "watchSecondIntervalPropHandler": 0
+            }],
+        "millisecondInterval": [{
+                "watchMillisecondIntervalPropHandler": 0
             }],
-        "to": [{
-                "watchToPropHandler": 0
+        "time": [{
+                "watchTimePropHandler": 0
             }],
-        "locale": [{
-                "onLocaleChange": 0
+        "minTime": [{
+                "watchMinTimePropHandler": 0
+            }],
+        "maxTime": [{
+                "watchMaxTimePropHandler": 0
+            }],
+        "_time": [{
+                "onTimeChange": 0
             }]
     }; }
 };
 __decorate([
     listener.OnListener('keydown')
-], DatePicker.prototype, "handleKeyUp", null);
-DatePicker.style = datePickerCss();
-
-const layoutGridCss = () => `:host{--ix-layout-grid-gutter:24px;display:block;flex:1 1 0%;width:100%;padding-left:calc(var(--ix-layout-grid-gutter) * 0.5);padding-right:calc(var(--ix-layout-grid-gutter) * 0.5)}:host(.no-margin){padding-left:0;padding-right:0}`;
-
-const LayoutGrid = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * The grid will not have any horizontal padding
-         */
-        this.noMargin = false;
-        /**
-         * Grid gap
-         */
-        this.gap = '24';
-        /**
-         * Overwrite the default number of columns. Choose between 2 and 12 columns.
-         */
-        this.columns = 12;
-    }
-    render() {
-        return (index.h(index.Host, { key: '7ca75d3fb578d30d3b8e3d5d4455123ee7344456', class: {
-                'no-margin': this.noMargin,
-            }, style: {
-                '--ix-layout-grid-columns': `${this.columns}`,
-                '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, index.h("slot", { key: '566e2bf1294f8780e4aedb8e2874bd2f216d3712' })));
-    }
-};
-LayoutGrid.style = layoutGridCss();
-
-const rowCss = () => `:host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}`;
-
-const Row = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'f38fd53867857b85a1b2d618125c81bba478cdac' }, index.h("slot", { key: '1fbd414a8c0bb275dcdc88a0e4ff54e944212739' })));
-    }
-};
-Row.style = rowCss();
+], TimePicker.prototype, "handleKeyDown", null);
+TimePicker.style = timePickerCss();
 
 exports.ix_col = Col;
-exports.ix_date_picker = DatePicker;
 exports.ix_layout_grid = LayoutGrid;
 exports.ix_row = Row;
+exports.ix_time_picker = TimePicker;