@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/es-dev/components/time-picker/daikin-time-picker.js

@@ -1,655 +1,627 @@
-import { unsafeCSS, css, html } from "lit";
-import { state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import "../../base/dds-element.js";
+import { oneOf, property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import { extractHalfWidthDigits } from "../../utils/extract-half-width-digits.js";
 import "../dropdown-item/daikin-dropdown-item.js";
 import "../dropdown/daikin-dropdown.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const VALUE_TIME_REGEX = /^(?:[01][0-9]|2[0-3]):[0-5][0-9]$/;
-const DEFAULT_MIN_TIME = "00:00";
-const DEFAULT_MAX_TIME = "23:59";
+import { css, html, unsafeCSS } from "lit";
+import { state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/time-picker/daikin-time-picker.ts
+/**
+* 24-hour time format regex validation (00:00 ~ 23:59).
+*/
+var VALUE_TIME_REGEX = /^(?:[01][0-9]|2[0-3]):[0-5][0-9]$/;
+/** Default minimum time. */
+var DEFAULT_MIN_TIME = "00:00";
+/** Default maximum time. */
+var DEFAULT_MAX_TIME = "23:59";
 function uiToTimeValue(object) {
-  if (object.hourCycle === "h23") {
-    return formatTimeForUI(formatPartsForUI(object));
-  }
-  const [hour12, minute] = formatPartsForUI(object).split(":").map(Number);
-  const hour = hour12 % 12 + (object.meridiem === "PM" ? 12 : 0);
-  return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+	if (object.hourCycle === "h23") return formatTimeForUI(formatPartsForUI(object));
+	const [hour12, minute] = formatPartsForUI(object).split(":").map(Number);
+	return `${(hour12 % 12 + (object.meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
 }
 function timeValueToUI(time, hourCycle) {
-  const [hour24, minute] = time.split(":").map(Number);
-  if (hourCycle === "h23") {
-    return {
-      hourCycle: "h23",
-      hour: hour24.toString().padStart(2, "0"),
-      minute: minute.toString().padStart(2, "0"),
-      meridiem: null
-    };
-  }
-  const meridiem = hour24 >= 12 ? "PM" : "AM";
-  let hour12 = hour24 % 12;
-  if (hour12 === 0) hour12 = 12;
-  return {
-    hourCycle: "h12",
-    hour: hour12.toString().padStart(2, "0"),
-    minute: minute.toString().padStart(2, "0"),
-    meridiem
-  };
+	const [hour24, minute] = time.split(":").map(Number);
+	if (hourCycle === "h23") return {
+		hourCycle: "h23",
+		hour: hour24.toString().padStart(2, "0"),
+		minute: minute.toString().padStart(2, "0"),
+		meridiem: null
+	};
+	const meridiem = hour24 >= 12 ? "PM" : "AM";
+	let hour12 = hour24 % 12;
+	if (hour12 === 0) hour12 = 12;
+	return {
+		hourCycle: "h12",
+		hour: hour12.toString().padStart(2, "0"),
+		minute: minute.toString().padStart(2, "0"),
+		meridiem
+	};
 }
+/**
+* Validates if a time string matches the 24-hour format.
+*/
 function isValidValueTime(str) {
-  return VALUE_TIME_REGEX.test(str);
+	return VALUE_TIME_REGEX.test(str);
 }
+/**
+* Checks if a time is out of the given range.
+*/
 function isTimeOutOfRange(time, min, max) {
-  const toMinutes = (s) => {
-    const [h, m] = s.split(":").map(Number);
-    return h * 60 + m;
-  };
-  const v = toMinutes(time);
-  const vMin = toMinutes(min);
-  const vMax = toMinutes(max);
-  return v < vMin || v > vMax;
+	const toMinutes = (s) => {
+		const [h, m] = s.split(":").map(Number);
+		return h * 60 + m;
+	};
+	const v = toMinutes(time);
+	const vMin = toMinutes(min);
+	const vMax = toMinutes(max);
+	return v < vMin || v > vMax;
 }
-const TIME_ITEMS = [
-  {
-    type: "hour",
-    range: [0, 2]
-    // 0-2 exclusive, selects "hh"
-  },
-  {
-    type: "minute",
-    range: [3, 5]
-    // 3-5 exclusive, selects "mm"
-  }
-];
-const PLACEHOLDER_HOUR = "hh";
-const PLACEHOLDER_MINUTE = "mm";
-const PLACEHOLDER_ALL = formatPartsForUI({
-  hour: PLACEHOLDER_HOUR,
-  minute: PLACEHOLDER_MINUTE
+/**
+* Defines the index range for each part of the time string in the input.
+*
+* HH:MM format:
+* - Hour: positions 0-1 ([0,2))
+* - Minute: positions 3-4 ([3,5))
+* - Colon: position 2
+*/
+var TIME_ITEMS = [{
+	type: "hour",
+	range: [0, 2]
+}, {
+	type: "minute",
+	range: [3, 5]
+}];
+var PLACEHOLDER_HOUR = "hh";
+var PLACEHOLDER_MINUTE = "mm";
+var PLACEHOLDER_ALL = formatPartsForUI({
+	hour: PLACEHOLDER_HOUR,
+	minute: PLACEHOLDER_MINUTE
 });
-function formatPartsForUI({
-  hour,
-  minute
-}) {
-  return `${hour}:${minute}`;
+/**
+* Formats a time object as a UI display string (HH:MM).
+* The hour/minute values do not have to be valid.
+*/
+function formatPartsForUI({ hour, minute }) {
+	return `${hour}:${minute}`;
 }
+/**
+* Parses a UI time string (HH:MM) and returns an hour/minute object.
+* The result is not guaranteed to be valid.
+*/
 function parsePartsFromUIValue(value) {
-  const [hour, minute] = value.split(":");
-  return { hour: hour || "hh", minute: minute || "mm" };
+	const [hour, minute] = value.split(":");
+	return {
+		hour: hour || "hh",
+		minute: minute || "mm"
+	};
 }
+/**
+* Attempts to parse a valid time string from a UI value (HH:MM).
+* Returns null if invalid.
+*/
 function tryParseTimeFromUIValue(value) {
-  const { hour, minute } = parsePartsFromUIValue(value);
-  if (!/^(0\d|1\d|2[0-3])$/.test(hour) || !/^[0-5]\d$/.test(minute)) {
-    return null;
-  }
-  const formattedHour = hour !== "hh" ? hour.padStart(2, "0") : "hh";
-  const formattedMinute = minute !== "mm" ? minute.padStart(2, "0") : "mm";
-  const timeString = `${formattedHour}:${formattedMinute}`;
-  return timeString;
+	const { hour, minute } = parsePartsFromUIValue(value);
+	if (!/^(0\d|1\d|2[0-3])$/.test(hour) || !/^[0-5]\d$/.test(minute)) return null;
+	return `${hour !== "hh" ? hour.padStart(2, "0") : "hh"}:${minute !== "mm" ? minute.padStart(2, "0") : "mm"}`;
 }
+/**
+* Formats a valid time string as a UI display string (HH:MM).
+*/
 function formatTimeForUI(timeString) {
-  const [hour, minute] = timeString.split(":");
-  return formatPartsForUI({
-    hour: hour.padStart(2, "0"),
-    minute: minute.padStart(2, "0")
-  });
+	const [hour, minute] = timeString.split(":");
+	return formatPartsForUI({
+		hour: hour.padStart(2, "0"),
+		minute: minute.padStart(2, "0")
+	});
 }
+/**
+* Determines whether the current selection is on the hour or minute part.
+* Returns null if no match.
+*/
 function getTimeItemInSelection(selectionStart, selectionEnd) {
-  for (const { type, range } of TIME_ITEMS) {
-    if (selectionStart >= range[0] && selectionStart <= range[1] && selectionEnd >= range[0] && selectionEnd <= range[1]) {
-      return type;
-    }
-  }
-  return null;
+	for (const { type, range } of TIME_ITEMS) if (selectionStart >= range[0] && selectionStart <= range[1] && selectionEnd >= range[0] && selectionEnd <= range[1]) return type;
+	return null;
 }
+/**
+* Calculate digit key input, returns new time parts and whether input is complete.
+* @returns { parts, done } or null
+*/
 function calcDigitInput(parts, item, digit, hourDigitIndex, hourCycle) {
-  if (!/^\d$/.test(digit)) {
-    return null;
-  }
-  switch (item) {
-    case "hour": {
-      if (hourCycle === "h23") {
-        if (hourDigitIndex === 1) {
-          const firstDigit = parts.hour[1];
-          if (firstDigit === "2") {
-            if (["0", "1", "2", "3"].includes(digit)) {
-              return {
-                parts: { ...parts, hour: `2${digit}` },
-                done: true
-              };
-            }
-            return {
-              parts: { ...parts, hour: `0${digit}` },
-              done: true
-            };
-          }
-          if (firstDigit === "0" || firstDigit === "1") {
-            return {
-              parts: { ...parts, hour: `${firstDigit}${digit}` },
-              done: true
-            };
-          }
-        }
-        return {
-          parts: { ...parts, hour: `0${digit}` },
-          done: digit > "2"
-        };
-      }
-      if (parts.hour === "01" && ["0", "1", "2"].includes(digit)) {
-        return {
-          parts: { ...parts, hour: `1${digit}` },
-          done: true
-        };
-      }
-      if (parts.hour === "00") {
-        return {
-          parts: { ...parts, hour: `0${digit}` },
-          done: hourDigitIndex === 1
-        };
-      }
-      return {
-        parts: { ...parts, hour: `0${digit}` },
-        done: digit > "1"
-      };
-    }
-    case "minute": {
-      if (["01", "02", "03", "04", "05"].includes(parts.minute)) {
-        return {
-          parts: { ...parts, minute: `${parts.minute[1]}${digit}` },
-          done: true
-        };
-      }
-      return {
-        parts: { ...parts, minute: `0${digit}` },
-        done: digit > "5"
-      };
-    }
-  }
+	if (!/^\d$/.test(digit)) return null;
+	switch (item) {
+		case "hour":
+			if (hourCycle === "h23") {
+				if (hourDigitIndex === 1) {
+					const firstDigit = parts.hour[1];
+					if (firstDigit === "2") {
+						if ([
+							"0",
+							"1",
+							"2",
+							"3"
+						].includes(digit)) return {
+							parts: {
+								...parts,
+								hour: `2${digit}`
+							},
+							done: true
+						};
+						return {
+							parts: {
+								...parts,
+								hour: `0${digit}`
+							},
+							done: true
+						};
+					}
+					if (firstDigit === "0" || firstDigit === "1") return {
+						parts: {
+							...parts,
+							hour: `${firstDigit}${digit}`
+						},
+						done: true
+					};
+				}
+				return {
+					parts: {
+						...parts,
+						hour: `0${digit}`
+					},
+					done: digit > "2"
+				};
+			}
+			if (parts.hour === "01" && [
+				"0",
+				"1",
+				"2"
+			].includes(digit)) return {
+				parts: {
+					...parts,
+					hour: `1${digit}`
+				},
+				done: true
+			};
+			if (parts.hour === "00") return {
+				parts: {
+					...parts,
+					hour: `0${digit}`
+				},
+				done: hourDigitIndex === 1
+			};
+			return {
+				parts: {
+					...parts,
+					hour: `0${digit}`
+				},
+				done: digit > "1"
+			};
+		case "minute":
+			if ([
+				"01",
+				"02",
+				"03",
+				"04",
+				"05"
+			].includes(parts.minute)) return {
+				parts: {
+					...parts,
+					minute: `${parts.minute[1]}${digit}`
+				},
+				done: true
+			};
+			return {
+				parts: {
+					...parts,
+					minute: `0${digit}`
+				},
+				done: digit > "5"
+			};
+	}
 }
-const fieldBaseClass = [
-  "flex",
-  "items-center",
-  "size-full",
-  "w-[calc(var(--dds-space-1600)+var(--dds-space-600)+var(--dds-space-100)+var(--dds-space-050))]",
-  "bg-ddt-color-common-background-default",
-  "px-[calc(var(--dds-padding-30)+0.25rem)]",
-  "rounded-sm",
-  "truncate",
-  "outline-solid",
-  "outline-(--color-border)",
-  "outline-0",
-  "-outline-offset-2",
-  "placeholder:text-ddt-color-common-text-secondary",
-  "[--color-border:var(--color-state-focus,var(--color-base))]",
-  "border",
-  "border-(--color-border)",
-  "enabled:text-ddt-color-common-text-primary",
-  "enabled:hover:bg-ddt-color-common-surface-hover",
-  "enabled:active:bg-ddt-color-common-surface-press",
-  "focus-visible:outline-2",
-  "disabled:[--color-border:var(--dds-color-common-disabled)]",
-  "disabled:text-ddt-color-common-disabled",
-  "disabled:bg-ddt-color-common-background-default",
-  "disabled:placeholder:text-ddt-color-common-disabled"
+var fieldBaseClass = [
+	"flex",
+	"items-center",
+	"size-full",
+	"w-[calc(var(--dds-space-1600)+var(--dds-space-600)+var(--dds-space-100)+var(--dds-space-050))]",
+	"bg-ddt-color-common-background-default",
+	"px-[calc(var(--dds-padding-30)+0.25rem)]",
+	"rounded-sm",
+	"truncate",
+	"outline-solid",
+	"outline-(--color-border)",
+	"outline-0",
+	"-outline-offset-2",
+	"placeholder:text-ddt-color-common-text-secondary",
+	"[--color-border:var(--color-state-focus,var(--color-base))]",
+	"border",
+	"border-(--color-border)",
+	"enabled:text-ddt-color-common-text-primary",
+	"enabled:hover:bg-ddt-color-common-surface-hover",
+	"enabled:active:bg-ddt-color-common-surface-press",
+	"focus-visible:outline-2",
+	"disabled:[--color-border:var(--dds-color-common-disabled)]",
+	"disabled:text-ddt-color-common-disabled",
+	"disabled:bg-ddt-color-common-background-default",
+	"disabled:placeholder:text-ddt-color-common-disabled"
 ].join(" ");
 function getFieldClass(error) {
-  return [
-    fieldBaseClass,
-    error ? "enabled:[--color-base:var(--dds-color-common-danger-default)]" : "enabled:[--color-base:var(--dds-color-common-neutral-default)] focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
-  ].join(" ");
+	return [fieldBaseClass, error ? "enabled:[--color-base:var(--dds-color-common-danger-default)]" : "enabled:[--color-base:var(--dds-color-common-neutral-default)] focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"].join(" ");
 }
-let DaikinTimePicker = class extends DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.readonly = false;
-    this.required = false;
-    this.error = false;
-    this.hourCycle = "h12";
-    this.meridiemSingleOpen = true;
-    this._label = null;
-    this._inputValue = "";
-    this._currentSelection = "hour";
-    this._meridiem = "";
-    this._timeInputElement = createRef();
-    this._meridiemDropdown = createRef();
-    this._hourDigitIndex = 0;
-    this._preCompositionValue = "";
-    this._minuteDigitIndex = 0;
-  }
-  /**
-   * Returns the value to be displayed in the input field.
-   * - If the main value is a valid 24-hour time, returns a display string based on the selected hour cycle.
-   * - If the current input value is not valid or meridiem is empty, returns the raw input value.
-   * - Otherwise, returns null.
-   */
-  get _value() {
-    if (isValidValueTime(this.value)) {
-      const ui = timeValueToUI(this.value, this.hourCycle);
-      return formatPartsForUI({ hour: ui.hour, minute: ui.minute });
-    }
-    const needsMeridiem = this.hourCycle === "h12";
-    if (this._timeValue && // Show the raw input value when it is not a valid 24h time OR when the
-    // UI hour is "00" (intermediate 12h entry state). Without the "00" check,
-    // "00:xx" would be treated as valid 24h and the getter would return null,
-    // causing Lit to clear the input field.
-    (!isValidValueTime(this._timeValue) || parsePartsFromUIValue(this._timeValue).hour === "00") || needsMeridiem && this._meridiem === "") {
-      return this._timeValue;
-    }
-    return null;
-  }
-  /**
-   * Returns the value to display in the input field (from _inputValue state).
-   */
-  get _timeValue() {
-    return this._inputValue;
-  }
-  /**
-   * Syncs the AM/PM value with the current value (24-hour) if value changes externally.
-   */
-  _syncMeridiemWithValue() {
-    if (this.value) {
-      const ui = timeValueToUI(this.value, this.hourCycle);
-      this._meridiem = ui.meridiem ? ui.meridiem : "";
-    }
-  }
-  get _min() {
-    return this.min || DEFAULT_MIN_TIME;
-  }
-  get _max() {
-    return this.max || DEFAULT_MAX_TIME;
-  }
-  _convertZeroHourToTwelve() {
-    const minutes = this._inputValue.split(":")[1];
-    this._inputValue = `12:${minutes}`;
-    if (this._timeInputElement.value) {
-      this._timeInputElement.value.value = this._inputValue;
-    }
-  }
-  _handleFocusIn(event) {
-    const target = event.target;
-    this._updateInputSelection(target);
-    if (!this._inputValue) {
-      this._inputValue = PLACEHOLDER_ALL;
-    }
-  }
-  _handleFocusOut(event) {
-    const target = event.target;
-    if (target.value === PLACEHOLDER_ALL) {
-      this._inputValue = "";
-      target.value = "";
-    }
-    const allowZeroHour = this.hourCycle === "h23";
-    if (!allowZeroHour && target.value.startsWith("00")) {
-      this._convertZeroHourToTwelve();
-      this._updateValue();
-    }
-    this._hourDigitIndex = 0;
-    this._minuteDigitIndex = 0;
-  }
-  _handleChange(event) {
-    const target = event.target;
-    this._inputValue = target.value;
-    this._updateValue(event);
-  }
-  _handleMouseUp(event) {
-    var _a, _b;
-    event.preventDefault();
-    const selectionStart = ((_a = this._timeInputElement.value) == null ? void 0 : _a.selectionStart) ?? 0;
-    const selectionEnd = ((_b = this._timeInputElement.value) == null ? void 0 : _b.selectionEnd) ?? 0;
-    const timeItemInSelection = getTimeItemInSelection(
-      selectionStart,
-      selectionEnd
-    );
-    if (event.target.value === PLACEHOLDER_ALL && !timeItemInSelection) {
-      this._updateSelection("hour");
-      return;
-    }
-    if (timeItemInSelection) {
-      this._updateSelection(timeItemInSelection);
-    }
-  }
-  _handleDigitInput(parts, item, digit, hourDigitIndex, hourCycle) {
-    if (item === "hour") {
-      if (hourDigitIndex === 1) {
-        this._hourDigitIndex = 0;
-      } else {
-        this._hourDigitIndex = 1;
-      }
-      if (hourDigitIndex === 0) {
-        return {
-          parts: { ...parts, hour: `0${digit}` },
-          done: hourCycle === "h12" ? digit > "1" : digit > "2"
-        };
-      }
-    }
-    if (item === "minute") {
-      const minuteDigitIndex = this._minuteDigitIndex;
-      if (minuteDigitIndex === 1) {
-        this._minuteDigitIndex = 0;
-      } else {
-        this._minuteDigitIndex = 1;
-      }
-      if (minuteDigitIndex === 0) {
-        return {
-          parts: { ...parts, minute: `0${digit}` },
-          done: digit > "5"
-        };
-      }
-    }
-    return calcDigitInput(parts, item, digit, hourDigitIndex, this.hourCycle);
-  }
-  // Saves the input's display value when IME composition starts so that
-  // _handleCompositionEnd can restore it if the browser inserted raw IME text.
-  _handleCompositionStart(event) {
-    this._preCompositionValue = event.target.value;
-  }
-  // Handles compositionend to support full-width and half-width digit input via IME.
-  // Full-width digits are converted to half-width, then each digit is applied as if
-  // the user had typed them one by one using the existing calcDigitInput logic.
-  _handleCompositionEnd(event) {
-    if (this.readonly) {
-      return;
-    }
-    const target = event.target;
-    const composedText = event.data;
-    target.value = this._preCompositionValue || PLACEHOLDER_ALL;
-    this._inputValue = target.value;
-    const digits = extractHalfWidthDigits(composedText);
-    if (digits.length === 0) {
-      this._updateInputSelection(target);
-      this._updateValue();
-      return;
-    }
-    this._applyDigits(target, digits);
-  }
-  // Applies a sequence of digit characters to the input starting from the currently
-  // selected time item, then commits the result to this.value.
-  // Shared by _handleKeyDown (single digit) and _handleCompositionEnd (multiple digits).
-  _applyDigits(target, digits) {
-    let parts = parsePartsFromUIValue(target.value);
-    let currentItem = this._currentSelection;
-    for (const digit of digits) {
-      const currentIndex = TIME_ITEMS.findIndex(
-        ({ type }) => type === currentItem
-      );
-      if (currentIndex < 0) break;
-      const newState = this._handleDigitInput(
-        parts,
-        currentItem,
-        digit,
-        this._hourDigitIndex,
-        this.hourCycle
-      );
-      if (newState) {
-        parts = newState.parts;
-        if (newState.done) {
-          const nextIndex = Math.min(currentIndex + 1, TIME_ITEMS.length - 1);
-          currentItem = TIME_ITEMS[nextIndex].type;
-        }
-      }
-    }
-    const newVal = formatPartsForUI(parts);
-    this._inputValue = newVal;
-    target.value = newVal;
-    this._updateSelection(currentItem);
-    this._updateValue();
-  }
-  _handleKeyDown(event) {
-    if (this.readonly) {
-      return;
-    }
-    if (event.isComposing || event.key === "Process" || event.keyCode === 229) {
-      return;
-    }
-    const target = event.target;
-    const key = event.key;
-    const parts = parsePartsFromUIValue(target.value);
-    if (key === "Backspace" || key === "Delete") {
-      event.preventDefault();
-      const itemToRemove = this._currentSelection;
-      const placeholder = {
-        hour: PLACEHOLDER_HOUR,
-        minute: PLACEHOLDER_MINUTE
-      }[itemToRemove];
-      if (parts[itemToRemove] !== placeholder) {
-        const newVal = formatPartsForUI({
-          ...parts,
-          [itemToRemove]: placeholder
-        });
-        this._inputValue = newVal;
-        target.value = newVal;
-        this._updateSelection(itemToRemove);
-      }
-      this._updateValue();
-      return;
-    }
-    if (/^\d$/.test(key)) {
-      event.preventDefault();
-      this._applyDigits(target, [key]);
-      return;
-    }
-    const moveOffset = {
-      ArrowLeft: -1,
-      ArrowRight: 1
-    }[key];
-    if (moveOffset) {
-      event.preventDefault();
-      const currentIndex = TIME_ITEMS.findIndex(
-        ({ type }) => type === this._currentSelection
-      );
-      const newIndex = currentIndex >= 0 ? Math.min(
-        Math.max(currentIndex + moveOffset, 0),
-        TIME_ITEMS.length - 1
-      ) : 0;
-      this._updateSelection(TIME_ITEMS[newIndex].type);
-      return;
-    }
-    const countOffset = {
-      ArrowUp: 1,
-      ArrowDown: -1
-    }[key];
-    if (countOffset) {
-      event.preventDefault();
-      this._updateSelection(this._currentSelection);
-      this._updateTimeByOffset(countOffset);
-      return;
-    }
-    if (key.length <= 1) {
-      event.preventDefault();
-      return;
-    }
-  }
-  _updateTimeByOffset(offset) {
-    const target = this._timeInputElement.value;
-    if (!target) return;
-    const currentTime = target.value;
-    if (!currentTime) return;
-    const [hourStr, minuteStr] = currentTime.split(":");
-    let hour = parseInt(hourStr, 10);
-    let minute = parseInt(minuteStr, 10);
-    if (this._currentSelection === "hour") {
-      if (isNaN(hour)) hour = 0;
-      if (this.hourCycle === "h23") {
-        hour = (hour + offset + 24) % 24;
-      } else {
-        hour = (hour + offset + 11) % 12 + 1;
-      }
-    } else {
-      if (isNaN(minute)) minute = 0;
-      minute = (minute + offset * Number(this.minutesStep) + 60) % 60;
-    }
-    const newTime = `${isNaN(hour) ? "hh" : String(hour).padStart(2, "0")}:${isNaN(minute) ? "mm" : String(minute).padStart(2, "0")}`;
-    this._inputValue = formatTimeForUI(newTime);
-    target.value = this._inputValue;
-    this._updateSelection(this._currentSelection);
-    this._updateValue();
-  }
-  _handleBeforeInput(event) {
-    event.preventDefault();
-    if (!event.isComposing) {
-      this._updateSelection(this._currentSelection);
-    }
-  }
-  /**
-   * Updates the value in 24-hour format if the input is valid, while preserving the selected UI hour cycle.
-   */
-  _updateValue(event) {
-    const target = (event == null ? void 0 : event.target) || this._timeInputElement.value;
-    if (!target) return;
-    const allowZeroHour = this.hourCycle === "h23";
-    const needsMeridiem = this.hourCycle === "h12";
-    this._inputValue = target.value;
-    if (target.value === PLACEHOLDER_ALL) {
-      this.error = false;
-      this.value = "";
-      return;
-    }
-    if (needsMeridiem && this._meridiem === "") {
-      this.error = true;
-      this.value = "";
-      return;
-    }
-    const newTime = tryParseTimeFromUIValue(target.value);
-    const { hour: uiHour } = parsePartsFromUIValue(target.value);
-    if (!allowZeroHour && uiHour === "00") {
-      this.error = true;
-      this.value = "";
-      return;
-    }
-    const newValue = newTime != null ? uiToTimeValue(
-      this.hourCycle === "h23" ? {
-        hourCycle: "h23",
-        ...parsePartsFromUIValue(newTime),
-        meridiem: null
-      } : {
-        hourCycle: "h12",
-        ...parsePartsFromUIValue(newTime),
-        meridiem: this._meridiem
-      }
-    ) : "";
-    this.error = !newValue || isTimeOutOfRange(newValue, this._min, this._max);
-    const changed = newValue !== this.value;
-    this.value = newValue;
-    if (changed) {
-      if (newValue) {
-        this.dispatchEvent(
-          new Event("input", {
-            bubbles: true,
-            composed: true
-          })
-        );
-      }
-      this.dispatchEvent(
-        new Event("change", {
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-  _updateInputSelection(target) {
-    var _a;
-    if (target.value === "") {
-      target.value = PLACEHOLDER_ALL;
-    }
-    const itemInfo = TIME_ITEMS[0];
-    (_a = this._timeInputElement.value) == null ? void 0 : _a.setSelectionRange(
-      itemInfo.range[0],
-      itemInfo.range[1]
-    );
-    this._currentSelection = itemInfo.type;
-  }
-  _updateSelection(timeItem) {
-    var _a;
-    const selection = window.getSelection();
-    if (!selection) {
-      return;
-    }
-    const allowZeroHour = this.hourCycle === "h23";
-    const itemInfo = TIME_ITEMS.find(({ type }) => type === timeItem);
-    if (itemInfo) {
-      if (itemInfo.type === "minute") {
-        if (!allowZeroHour && this._inputValue.startsWith("00")) {
-          this._convertZeroHourToTwelve();
-        }
-        this._hourDigitIndex = 0;
-        if (this._currentSelection !== "minute") {
-          this._minuteDigitIndex = 0;
-        }
-      }
-      (_a = this._timeInputElement.value) == null ? void 0 : _a.setSelectionRange(
-        itemInfo.range[0],
-        itemInfo.range[1]
-      );
-      this._currentSelection = itemInfo.type;
-    }
-  }
-  _handleDropdownChange(event) {
-    if (this.readonly) {
-      return;
-    }
-    const target = event.target;
-    this._meridiem = target.value;
-    const input = this._timeInputElement.value;
-    if (input && input.value && tryParseTimeFromUIValue(input.value)) {
-      this._updateValue();
-    }
-  }
-  _closeMeridiemDropdown() {
-    const dropdown = this._meridiemDropdown.value;
-    if (!dropdown || !dropdown.open) {
-      return;
-    }
-    dropdown.open = false;
-  }
-  _handleMeridiemDropdownToggle(event) {
-    if (!this.meridiemSingleOpen) {
-      return;
+var DaikinTimePicker = class DaikinTimePicker extends DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.readonly = false;
+		this.required = false;
+		this.error = false;
+		this.hourCycle = "h12";
+		this.meridiemSingleOpen = true;
+		this._label = null;
+		this._inputValue = "";
+		this._currentSelection = "hour";
+		this._meridiem = "";
+		this._timeInputElement = createRef();
+		this._meridiemDropdown = createRef();
+		this._hourDigitIndex = 0;
+		this._preCompositionValue = "";
+		this._minuteDigitIndex = 0;
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: inline-flex;
+      align-items: center;
+      height: var(--dds-input-height, 3rem);
+      width: fit-content;
     }
-    const toggleEvent = event;
-    if (toggleEvent.newState !== "open") {
-      return;
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-    const root = this.getRootNode();
-    if (!(root instanceof Document || root instanceof ShadowRoot)) {
-      return;
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-    const peerTimePickers = root.querySelectorAll("daikin-time-picker");
-    for (const peerElement of peerTimePickers) {
-      if (peerElement === this) {
-        continue;
-      }
-      peerElement._closeMeridiemDropdown();
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
     }
-  }
-  /**
-   * Focuses on the inner time input.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._timeInputElement.value) == null ? void 0 : _a.focus(options);
-  }
-  render() {
-    const needsMeridiem = this.hourCycle === "h12";
-    return html`<div
+  `;
+	}
+	/**
+	* Returns the value to be displayed in the input field.
+	* - If the main value is a valid 24-hour time, returns a display string based on the selected hour cycle.
+	* - If the current input value is not valid or meridiem is empty, returns the raw input value.
+	* - Otherwise, returns null.
+	*/
+	get _value() {
+		if (isValidValueTime(this.value)) {
+			const ui = timeValueToUI(this.value, this.hourCycle);
+			return formatPartsForUI({
+				hour: ui.hour,
+				minute: ui.minute
+			});
+		}
+		const needsMeridiem = this.hourCycle === "h12";
+		if (this._timeValue && (!isValidValueTime(this._timeValue) || parsePartsFromUIValue(this._timeValue).hour === "00") || needsMeridiem && this._meridiem === "") return this._timeValue;
+		return null;
+	}
+	/**
+	* Returns the value to display in the input field (from _inputValue state).
+	*/
+	get _timeValue() {
+		return this._inputValue;
+	}
+	/**
+	* Syncs the AM/PM value with the current value (24-hour) if value changes externally.
+	*/
+	_syncMeridiemWithValue() {
+		if (this.value) {
+			const ui = timeValueToUI(this.value, this.hourCycle);
+			this._meridiem = ui.meridiem ? ui.meridiem : "";
+		}
+	}
+	get _min() {
+		return this.min || DEFAULT_MIN_TIME;
+	}
+	get _max() {
+		return this.max || DEFAULT_MAX_TIME;
+	}
+	_convertZeroHourToTwelve() {
+		const minutes = this._inputValue.split(":")[1];
+		this._inputValue = `12:${minutes}`;
+		if (this._timeInputElement.value) this._timeInputElement.value.value = this._inputValue;
+	}
+	_handleFocusIn(event) {
+		const target = event.target;
+		this._updateInputSelection(target);
+		if (!this._inputValue) this._inputValue = PLACEHOLDER_ALL;
+	}
+	_handleFocusOut(event) {
+		const target = event.target;
+		if (target.value === PLACEHOLDER_ALL) {
+			this._inputValue = "";
+			target.value = "";
+		}
+		if (!(this.hourCycle === "h23") && target.value.startsWith("00")) {
+			this._convertZeroHourToTwelve();
+			this._updateValue();
+		}
+		this._hourDigitIndex = 0;
+		this._minuteDigitIndex = 0;
+	}
+	_handleChange(event) {
+		const target = event.target;
+		this._inputValue = target.value;
+		this._updateValue(event);
+	}
+	_handleMouseUp(event) {
+		event.preventDefault();
+		const timeItemInSelection = getTimeItemInSelection(this._timeInputElement.value?.selectionStart ?? 0, this._timeInputElement.value?.selectionEnd ?? 0);
+		if (event.target.value === PLACEHOLDER_ALL && !timeItemInSelection) {
+			this._updateSelection("hour");
+			return;
+		}
+		if (timeItemInSelection) this._updateSelection(timeItemInSelection);
+	}
+	_handleDigitInput(parts, item, digit, hourDigitIndex, hourCycle) {
+		if (item === "hour") {
+			if (hourDigitIndex === 1) this._hourDigitIndex = 0;
+			else this._hourDigitIndex = 1;
+			if (hourDigitIndex === 0) return {
+				parts: {
+					...parts,
+					hour: `0${digit}`
+				},
+				done: hourCycle === "h12" ? digit > "1" : digit > "2"
+			};
+		}
+		if (item === "minute") {
+			const minuteDigitIndex = this._minuteDigitIndex;
+			if (minuteDigitIndex === 1) this._minuteDigitIndex = 0;
+			else this._minuteDigitIndex = 1;
+			if (minuteDigitIndex === 0) return {
+				parts: {
+					...parts,
+					minute: `0${digit}`
+				},
+				done: digit > "5"
+			};
+		}
+		return calcDigitInput(parts, item, digit, hourDigitIndex, this.hourCycle);
+	}
+	_handleCompositionStart(event) {
+		this._preCompositionValue = event.target.value;
+	}
+	_handleCompositionEnd(event) {
+		if (this.readonly) return;
+		const target = event.target;
+		const composedText = event.data;
+		target.value = this._preCompositionValue || PLACEHOLDER_ALL;
+		this._inputValue = target.value;
+		const digits = extractHalfWidthDigits(composedText);
+		if (digits.length === 0) {
+			this._updateInputSelection(target);
+			this._updateValue();
+			return;
+		}
+		this._applyDigits(target, digits);
+	}
+	_applyDigits(target, digits) {
+		let parts = parsePartsFromUIValue(target.value);
+		let currentItem = this._currentSelection;
+		for (const digit of digits) {
+			const currentIndex = TIME_ITEMS.findIndex(({ type }) => type === currentItem);
+			if (currentIndex < 0) break;
+			const newState = this._handleDigitInput(parts, currentItem, digit, this._hourDigitIndex, this.hourCycle);
+			if (newState) {
+				parts = newState.parts;
+				if (newState.done) currentItem = TIME_ITEMS[Math.min(currentIndex + 1, TIME_ITEMS.length - 1)].type;
+			}
+		}
+		const newVal = formatPartsForUI(parts);
+		this._inputValue = newVal;
+		target.value = newVal;
+		this._updateSelection(currentItem);
+		this._updateValue();
+	}
+	_handleKeyDown(event) {
+		if (this.readonly) return;
+		if (event.isComposing || event.key === "Process" || event.keyCode === 229) return;
+		const target = event.target;
+		const key = event.key;
+		const parts = parsePartsFromUIValue(target.value);
+		if (key === "Backspace" || key === "Delete") {
+			event.preventDefault();
+			const itemToRemove = this._currentSelection;
+			const placeholder = {
+				hour: PLACEHOLDER_HOUR,
+				minute: PLACEHOLDER_MINUTE
+			}[itemToRemove];
+			if (parts[itemToRemove] !== placeholder) {
+				const newVal = formatPartsForUI({
+					...parts,
+					[itemToRemove]: placeholder
+				});
+				this._inputValue = newVal;
+				target.value = newVal;
+				this._updateSelection(itemToRemove);
+			}
+			this._updateValue();
+			return;
+		}
+		if (/^\d$/.test(key)) {
+			event.preventDefault();
+			this._applyDigits(target, [key]);
+			return;
+		}
+		const moveOffset = {
+			ArrowLeft: -1,
+			ArrowRight: 1
+		}[key];
+		if (moveOffset) {
+			event.preventDefault();
+			const currentIndex = TIME_ITEMS.findIndex(({ type }) => type === this._currentSelection);
+			const newIndex = currentIndex >= 0 ? Math.min(Math.max(currentIndex + moveOffset, 0), TIME_ITEMS.length - 1) : 0;
+			this._updateSelection(TIME_ITEMS[newIndex].type);
+			return;
+		}
+		const countOffset = {
+			ArrowUp: 1,
+			ArrowDown: -1
+		}[key];
+		if (countOffset) {
+			event.preventDefault();
+			this._updateSelection(this._currentSelection);
+			this._updateTimeByOffset(countOffset);
+			return;
+		}
+		if (key.length <= 1) {
+			event.preventDefault();
+			return;
+		}
+	}
+	_updateTimeByOffset(offset) {
+		const target = this._timeInputElement.value;
+		if (!target) return;
+		const currentTime = target.value;
+		if (!currentTime) return;
+		const [hourStr, minuteStr] = currentTime.split(":");
+		let hour = parseInt(hourStr, 10);
+		let minute = parseInt(minuteStr, 10);
+		if (this._currentSelection === "hour") {
+			if (isNaN(hour)) hour = 0;
+			if (this.hourCycle === "h23") hour = (hour + offset + 24) % 24;
+			else hour = (hour + offset + 11) % 12 + 1;
+		} else {
+			if (isNaN(minute)) minute = 0;
+			minute = (minute + offset * Number(this.minutesStep) + 60) % 60;
+		}
+		const newTime = `${isNaN(hour) ? "hh" : String(hour).padStart(2, "0")}:${isNaN(minute) ? "mm" : String(minute).padStart(2, "0")}`;
+		this._inputValue = formatTimeForUI(newTime);
+		target.value = this._inputValue;
+		this._updateSelection(this._currentSelection);
+		this._updateValue();
+	}
+	_handleBeforeInput(event) {
+		event.preventDefault();
+		if (!event.isComposing) this._updateSelection(this._currentSelection);
+	}
+	/**
+	* Updates the value in 24-hour format if the input is valid, while preserving the selected UI hour cycle.
+	*/
+	_updateValue(event) {
+		const target = event?.target || this._timeInputElement.value;
+		if (!target) return;
+		const allowZeroHour = this.hourCycle === "h23";
+		const needsMeridiem = this.hourCycle === "h12";
+		this._inputValue = target.value;
+		if (target.value === PLACEHOLDER_ALL) {
+			this.error = false;
+			this.value = "";
+			return;
+		}
+		if (needsMeridiem && this._meridiem === "") {
+			this.error = true;
+			this.value = "";
+			return;
+		}
+		const newTime = tryParseTimeFromUIValue(target.value);
+		const { hour: uiHour } = parsePartsFromUIValue(target.value);
+		if (!allowZeroHour && uiHour === "00") {
+			this.error = true;
+			this.value = "";
+			return;
+		}
+		const newValue = newTime != null ? uiToTimeValue(this.hourCycle === "h23" ? {
+			hourCycle: "h23",
+			...parsePartsFromUIValue(newTime),
+			meridiem: null
+		} : {
+			hourCycle: "h12",
+			...parsePartsFromUIValue(newTime),
+			meridiem: this._meridiem
+		}) : "";
+		this.error = !newValue || isTimeOutOfRange(newValue, this._min, this._max);
+		const changed = newValue !== this.value;
+		this.value = newValue;
+		if (changed) {
+			if (newValue) this.dispatchEvent(new Event("input", {
+				bubbles: true,
+				composed: true
+			}));
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	_updateInputSelection(target) {
+		if (target.value === "") target.value = PLACEHOLDER_ALL;
+		const itemInfo = TIME_ITEMS[0];
+		this._timeInputElement.value?.setSelectionRange(itemInfo.range[0], itemInfo.range[1]);
+		this._currentSelection = itemInfo.type;
+	}
+	_updateSelection(timeItem) {
+		if (!window.getSelection()) return;
+		const allowZeroHour = this.hourCycle === "h23";
+		const itemInfo = TIME_ITEMS.find(({ type }) => type === timeItem);
+		if (itemInfo) {
+			if (itemInfo.type === "minute") {
+				if (!allowZeroHour && this._inputValue.startsWith("00")) this._convertZeroHourToTwelve();
+				this._hourDigitIndex = 0;
+				if (this._currentSelection !== "minute") this._minuteDigitIndex = 0;
+			}
+			this._timeInputElement.value?.setSelectionRange(itemInfo.range[0], itemInfo.range[1]);
+			this._currentSelection = itemInfo.type;
+		}
+	}
+	_handleDropdownChange(event) {
+		if (this.readonly) return;
+		const target = event.target;
+		this._meridiem = target.value;
+		const input = this._timeInputElement.value;
+		if (input && input.value && tryParseTimeFromUIValue(input.value)) this._updateValue();
+	}
+	_closeMeridiemDropdown() {
+		const dropdown = this._meridiemDropdown.value;
+		if (!dropdown || !dropdown.open) return;
+		dropdown.open = false;
+	}
+	_handleMeridiemDropdownToggle(event) {
+		if (!this.meridiemSingleOpen) return;
+		if (event.newState !== "open") return;
+		const root = this.getRootNode();
+		if (!(root instanceof Document || root instanceof ShadowRoot)) return;
+		const peerTimePickers = root.querySelectorAll("daikin-time-picker");
+		for (const peerElement of peerTimePickers) {
+			if (peerElement === this) continue;
+			peerElement._closeMeridiemDropdown();
+		}
+	}
+	/**
+	* Focuses on the inner time input.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._timeInputElement.value?.focus(options);
+	}
+	render() {
+		const needsMeridiem = this.hourCycle === "h12";
+		return html`<div
       role="group"
       aria-label=${ifDefined(this._label ?? void 0)}
       class="flex flex-row h-full gap-2 w-fit"
@@ -688,152 +660,97 @@ let DaikinTimePicker = class extends DDSFormElement {
             <daikin-dropdown-item value="PM">PM</daikin-dropdown-item>
           </daikin-dropdown>` : null}
     </div>`;
-  }
-  willUpdate(changedProperties) {
-    {
-      for (const prop of ["value", "min", "max"]) {
-        if (changedProperties.has(prop)) {
-          const val = this[prop];
-          if (val && !isValidValueTime(val)) {
-            console.warn(
-              `daikin-time-picker: Invalid time "${val}" specified for ${prop}`
-            );
-          }
-        }
-      }
-    }
-    if (changedProperties.has("hourCycle")) {
-      if (isValidValueTime(this.value)) {
-        this._syncMeridiemWithValue();
-      }
-      if (isValidValueTime(this.value)) {
-        this.error = isTimeOutOfRange(this.value, this.min, this.max);
-      }
-    }
-    if (changedProperties.has("value")) {
-      if (isValidValueTime(this.value)) {
-        if (this.hourCycle !== "h23") {
-          this._syncMeridiemWithValue();
-        }
-        if (isTimeOutOfRange(this.value, this.min, this.max)) {
-          this.error = true;
-        } else {
-          this.error = false;
-        }
-      }
-    }
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this.setFormValue(this.value);
-    }
-  }
-  /**
-   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
-   * @private
-   */
-  reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && !!inputGroup.error;
-    this.disabled = !!inputGroup.disabled;
-    this.readonly = !!inputGroup.readonly;
-    this.required = !!inputGroup.required;
-    this.error = isError;
-    this._label = inputGroup.label ?? null;
-  }
-};
-DaikinTimePicker.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: inline-flex;
-      align-items: center;
-      height: var(--dds-input-height, 3rem);
-      width: fit-content;
-    }
-
-    :host([readonly]:not([disabled])) input {
-      --color-base: var(--dds-color-common-surface-secondary);
-      background-color: var(--dds-color-common-surface-secondary);
-    }
-
-    :host([readonly]:not([disabled])) input:hover,
-    :host([readonly]:not([disabled])) input:active {
-      --color-base: var(--dds-color-common-surface-secondary);
-      background-color: var(--dds-color-common-surface-secondary);
-    }
-
-    :host([readonly][error]:not([disabled])) input,
-    :host([readonly][error]:not([disabled])) input:hover,
-    :host([readonly][error]:not([disabled])) input:active {
-      --color-base: var(--dds-color-common-danger-default);
-    }
-  `;
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "hh:mm" })
-], DaikinTimePicker.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: DEFAULT_MIN_TIME })
-], DaikinTimePicker.prototype, "min", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: DEFAULT_MAX_TIME })
-], DaikinTimePicker.prototype, "max", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTimePicker.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTimePicker.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTimePicker.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTimePicker.prototype, "error", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "hour-cycle",
-    fallbackValue: "h12",
-    isAllowedValue: oneOf(["h12", "h23"])
-  })
-], DaikinTimePicker.prototype, "hourCycle", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "minutes-step",
-    fallbackValue: "1"
-  })
-], DaikinTimePicker.prototype, "minutesStep", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "meridiem-single-open" })
-], DaikinTimePicker.prototype, "meridiemSingleOpen", 2);
-__decorateClass([
-  state()
-], DaikinTimePicker.prototype, "_label", 2);
-__decorateClass([
-  state()
-], DaikinTimePicker.prototype, "_inputValue", 2);
-__decorateClass([
-  state()
-], DaikinTimePicker.prototype, "_currentSelection", 2);
-__decorateClass([
-  state()
-], DaikinTimePicker.prototype, "_meridiem", 2);
-DaikinTimePicker = __decorateClass([
-  ddsElement("daikin-time-picker")
-], DaikinTimePicker);
-export {
-  DaikinTimePicker,
-  calcDigitInput,
-  formatPartsForUI,
-  formatTimeForUI,
-  getTimeItemInSelection,
-  isTimeOutOfRange,
-  isValidValueTime,
-  parsePartsFromUIValue,
-  timeValueToUI,
-  tryParseTimeFromUIValue,
-  uiToTimeValue
+	}
+	willUpdate(changedProperties) {
+		for (const prop of [
+			"value",
+			"min",
+			"max"
+		]) if (changedProperties.has(prop)) {
+			const val = this[prop];
+			if (val && !isValidValueTime(val)) console.warn(`daikin-time-picker: Invalid time "${val}" specified for ${prop}`);
+		}
+		if (changedProperties.has("hourCycle")) {
+			if (isValidValueTime(this.value)) this._syncMeridiemWithValue();
+			if (isValidValueTime(this.value)) this.error = isTimeOutOfRange(this.value, this.min, this.max);
+		}
+		if (changedProperties.has("value")) {
+			if (isValidValueTime(this.value)) {
+				if (this.hourCycle !== "h23") this._syncMeridiemWithValue();
+				if (isTimeOutOfRange(this.value, this.min, this.max)) this.error = true;
+				else this.error = false;
+			}
+		}
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("value")) this.setFormValue(this.value);
+	}
+	/**
+	* This method is used by `daikin-input-group` to reflect it's attributes to this component.
+	* @private
+	*/
+	reflectInputGroup(inputGroup) {
+		const isError = !inputGroup.disabled && !!inputGroup.error;
+		this.disabled = !!inputGroup.disabled;
+		this.readonly = !!inputGroup.readonly;
+		this.required = !!inputGroup.required;
+		this.error = isError;
+		this._label = inputGroup.label ?? null;
+	}
 };
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "hh:mm"
+})], DaikinTimePicker.prototype, "placeholder", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: DEFAULT_MIN_TIME
+})], DaikinTimePicker.prototype, "min", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: DEFAULT_MAX_TIME
+})], DaikinTimePicker.prototype, "max", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTimePicker.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTimePicker.prototype, "readonly", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTimePicker.prototype, "required", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTimePicker.prototype, "error", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "hour-cycle",
+	fallbackValue: "h12",
+	isAllowedValue: oneOf(["h12", "h23"])
+})], DaikinTimePicker.prototype, "hourCycle", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "minutes-step",
+	fallbackValue: "1"
+})], DaikinTimePicker.prototype, "minutesStep", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true,
+	attribute: "meridiem-single-open"
+})], DaikinTimePicker.prototype, "meridiemSingleOpen", void 0);
+__decorate([state()], DaikinTimePicker.prototype, "_label", void 0);
+__decorate([state()], DaikinTimePicker.prototype, "_inputValue", void 0);
+__decorate([state()], DaikinTimePicker.prototype, "_currentSelection", void 0);
+__decorate([state()], DaikinTimePicker.prototype, "_meridiem", void 0);
+DaikinTimePicker = __decorate([ddsElement("daikin-time-picker")], DaikinTimePicker);
+//#endregion
+export { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, timeValueToUI, tryParseTimeFromUIValue, uiToTimeValue };