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

package/dist/es/components/date-picker/daikin-date-picker.js

@@ -1,716 +1,732 @@
-import { offset, flip, shift, size } from "@floating-ui/dom";
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
-import { state } from "lit/decorators.js";
-import { guard } from "lit/directives/guard.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import "../../base/dds-element.js";
+import { 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 } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { countDaysForYearMonth, cvaIconButton, formatDateForProperty, isDateOutOfRange, parseDateFromProperty, tryParseDateFromProperty } from "../../utils/calendar-common.js";
+import "../icon-button/daikin-icon-button.js";
+import "../calendar/daikin-calendar.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import { FocusTrapController } from "../../controllers/focus-trap.js";
-import tailwindStyles from "../../tailwind.css.js";
-import { tryParseDateFromProperty, parseDateFromProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, formatDateForProperty, isDateOutOfRange, cvaIconButton, countDaysForYearMonth } from "../../utils/calendar-common.js";
 import { extractHalfWidthDigits } from "../../utils/extract-half-width-digits.js";
 import { reDispatch } from "../../utils/re-dispatch.js";
-import "../calendar/daikin-calendar.js";
-import "../icon-button/daikin-icon-button.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 dateTimeFormatPartsCache = /* @__PURE__ */ new Map();
+import { css, html, nothing, unsafeCSS } from "lit";
+import { state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { flip, offset, shift, size } from "@floating-ui/dom";
+import { guard } from "lit/directives/guard.js";
+//#region src/components/date-picker/daikin-date-picker.ts
+var dateTimeFormatPartsCache = /* @__PURE__ */ new Map();
+/**
+* Gets the date format parts for the given inputLocale, using cache to optimize performance. If the inputLocale is invalid, it falls back to the default locale and caches the result under the requested key to avoid throwing errors on subsequent calls with the same invalid inputLocale.
+*/
 function getSafeDateTimeFormatParts(inputLocale) {
-  const options = {
-    year: "numeric",
-    month: "numeric",
-    day: "numeric"
-  };
-  const key = inputLocale ?? "__DEFAULT__";
-  const cached = dateTimeFormatPartsCache.get(key);
-  if (cached) return cached;
-  try {
-    const parts = new Intl.DateTimeFormat(
-      inputLocale ?? void 0,
-      options
-    ).formatToParts(0);
-    dateTimeFormatPartsCache.set(key, parts);
-    return parts;
-  } catch {
-    const parts = new Intl.DateTimeFormat(void 0, options).formatToParts(0);
-    dateTimeFormatPartsCache.set(key, parts);
-    return parts;
-  }
+	const options = {
+		year: "numeric",
+		month: "numeric",
+		day: "numeric"
+	};
+	const key = inputLocale ?? "__DEFAULT__";
+	const cached = dateTimeFormatPartsCache.get(key);
+	if (cached) return cached;
+	try {
+		const parts = new Intl.DateTimeFormat(inputLocale ?? void 0, options).formatToParts(0);
+		dateTimeFormatPartsCache.set(key, parts);
+		return parts;
+	} catch {
+		const parts = new Intl.DateTimeFormat(void 0, options).formatToParts(0);
+		dateTimeFormatPartsCache.set(key, parts);
+		return parts;
+	}
 }
+/**
+* Build date item metadata (type + selection ranges) based on the current inputLocale's
+* date order (e.g. MDY, DMY, YMD) and the separator used by Intl.
+*/
 function getDateOrderAndSeparator(inputLocale) {
-  const parts = getSafeDateTimeFormatParts(inputLocale ?? void 0);
-  const order = parts.filter(
-    (p) => ["year", "month", "day"].includes(p.type)
-  ).map((p) => p.type);
-  const literals = parts.filter((p) => p.type === "literal");
-  const sep = literals.length >= 2 && literals[0].value === literals[1].value ? literals[0].value : "/";
-  const requiredParts = ["year", "month", "day"];
-  const isValidOrder = order.length === 3 && requiredParts.every((part) => order.includes(part));
-  const isValidSep = sep.length > 0 && /^\D+$/.test(sep);
-  if (!isValidOrder || !isValidSep) {
-    return {
-      order: ["month", "day", "year"],
-      sep: "/"
-    };
-  }
-  return { order, sep };
+	const parts = getSafeDateTimeFormatParts(inputLocale ?? void 0);
+	const order = parts.filter((p) => [
+		"year",
+		"month",
+		"day"
+	].includes(p.type)).map((p) => p.type);
+	const literals = parts.filter((p) => p.type === "literal");
+	const sep = literals.length >= 2 && literals[0].value === literals[1].value ? literals[0].value : "/";
+	const isValidOrder = order.length === 3 && [
+		"year",
+		"month",
+		"day"
+	].every((part) => order.includes(part));
+	const isValidSep = sep.length > 0 && /^\D+$/.test(sep);
+	if (!isValidOrder || !isValidSep) return {
+		order: [
+			"month",
+			"day",
+			"year"
+		],
+		sep: "/"
+	};
+	return {
+		order,
+		sep
+	};
 }
+/**
+* The year, month, and day that make up the date string in the input field, and the
+* range (inclusive) that each item is included in, arranged in the order of the items.
+*
+* The order of the elements must be ascending in the range.
+*/
 function getDateItems(inputLocale) {
-  const { order, sep } = getDateOrderAndSeparator(inputLocale);
-  const lengths = { year: 4, month: 2, day: 2 };
-  const items = order.map((key, i) => {
-    const type = key;
-    const len = lengths[type];
-    const start = order.slice(0, i).reduce((sum, k) => sum + lengths[k], 0) + i * sep.length;
-    const end = start + len;
-    return { type, range: [start, end] };
-  });
-  return items;
+	const { order, sep } = getDateOrderAndSeparator(inputLocale);
+	const lengths = {
+		year: 4,
+		month: 2,
+		day: 2
+	};
+	return order.map((key, i) => {
+		const type = key;
+		const len = lengths[type];
+		const start = order.slice(0, i).reduce((sum, k) => sum + lengths[k], 0) + i * sep.length;
+		return {
+			type,
+			range: [start, start + len]
+		};
+	});
 }
-const PLACEHOLDER_YEAR = "YYYY";
-const PLACEHOLDER_MONTH = "MM";
-const PLACEHOLDER_DAY = "DD";
-const cvaField = cva(
-  [
-    "flex",
-    "items-center",
-    "size-full",
-    "min-h-(--dds-input-height)",
-    "bg-ddt-color-common-background-default",
-    "pl-[calc(var(--dds-padding-30)+0.25rem)]",
-    "pr-[calc((var(--dds-gap-10))+var(--dds-icon-button)+0.5rem)]",
-    "rounded-sm",
-    "truncate",
-    "outline-solid",
-    "outline-(--color-border)",
-    "outline-0",
-    "-outline-offset-2",
-    "placeholder:text-ddt-color-common-text-secondary",
-    // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
-    // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "[--color-border:var(--color-state-focus,var(--color-base))]",
-    "border",
-    "border-(--color-border)",
-    // Update `--color-base` depending on the state.
-    // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "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-base: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"
-  ],
-  {
-    variants: {
-      error: {
-        false: [
-          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
-          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
-      }
-    }
-  }
-);
+var PLACEHOLDER_YEAR = "YYYY";
+var PLACEHOLDER_MONTH = "MM";
+var PLACEHOLDER_DAY = "DD";
+var cvaField = cva([
+	"flex",
+	"items-center",
+	"size-full",
+	"min-h-(--dds-input-height)",
+	"bg-ddt-color-common-background-default",
+	"pl-[calc(var(--dds-padding-30)+0.25rem)]",
+	"pr-[calc((var(--dds-gap-10))+var(--dds-icon-button)+0.5rem)]",
+	"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-base: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"
+], { variants: { error: {
+	false: ["enabled:[--color-base:var(--dds-color-common-neutral-default)]", "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"],
+	true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
+} } });
+/**
+* Decomposes the date string displayed on the UI and returns it as an object.
+* The returned object may not necessarily be a valid date. It may contain strings such as YYYY or invalid dates such as 02/31.
+*/
 function parsePartsFromUIValue(value, inputLocale) {
-  const { order, sep } = getDateOrderAndSeparator(inputLocale);
-  const parts = value.split(sep);
-  return Object.fromEntries(
-    order.map((key, i) => [key, parts[i] ?? ""])
-  );
+	const { order, sep } = getDateOrderAndSeparator(inputLocale);
+	const parts = value.split(sep);
+	return Object.fromEntries(order.map((key, i) => [key, parts[i] ?? ""]));
 }
+/**
+* Formats the date parts object into a string format for display in the UI.
+* The object does not necessarily need to be a valid date. It can contain strings such as YYYY or invalid dates such as 02/31.
+*/
 function formatPartsForUI(parts, inputLocale) {
-  const { order, sep } = getDateOrderAndSeparator(inputLocale);
-  return order.map((k) => parts[k]).join(sep);
+	const { order, sep } = getDateOrderAndSeparator(inputLocale);
+	return order.map((k) => parts[k]).join(sep);
 }
 function getPlaceholderAll(inputLocale) {
-  return formatPartsForUI(
-    { year: PLACEHOLDER_YEAR, month: PLACEHOLDER_MONTH, day: PLACEHOLDER_DAY },
-    inputLocale
-  );
+	return formatPartsForUI({
+		year: PLACEHOLDER_YEAR,
+		month: PLACEHOLDER_MONTH,
+		day: PLACEHOLDER_DAY
+	}, inputLocale);
 }
+/**
+* Parses the date string on the UI and returns it as a `Date` (in UTC).
+* If the date string on the UI is not a valid date (contains a string such as YYYY or an invalid date such as 02/31), returns null.
+*/
 function tryParseDateFromUIValue(value, inputLocale) {
-  const { year, month, day } = parsePartsFromUIValue(value, inputLocale);
-  if (
-    // Prevent treating incomplete year entries (such as 0202) as valid.
-    // This also means that dates less than 1000 years ago cannot be handled.
-    !/^[1-9]\d\d\d$/.test(year) || !/^\d\d$/.test(month) || !/^\d\d$/.test(day)
-  ) {
-    return null;
-  }
-  const date = parseDateFromProperty(`${year}-${month}-${day}`);
-  if (date.getUTCFullYear() !== Number(year) || date.getUTCMonth() + 1 !== Number(month) || date.getUTCDate() !== Number(day)) {
-    return null;
-  }
-  return date;
+	const { year, month, day } = parsePartsFromUIValue(value, inputLocale);
+	if (!/^[1-9]\d\d\d$/.test(year) || !/^\d\d$/.test(month) || !/^\d\d$/.test(day)) return null;
+	const date = parseDateFromProperty(`${year}-${month}-${day}`);
+	if (date.getUTCFullYear() !== Number(year) || date.getUTCMonth() + 1 !== Number(month) || date.getUTCDate() !== Number(day)) return null;
+	return date;
 }
+/**
+* Formats the UTC `Date` as a date string in the UI.
+*/
 function formatDateForUI(date, inputLocale) {
-  return formatPartsForUI(
-    {
-      year: String(date.getUTCFullYear()).padStart(4, "0"),
-      month: String(date.getUTCMonth() + 1).padStart(2, "0"),
-      day: String(date.getUTCDate()).padStart(2, "0")
-    },
-    inputLocale
-  );
+	return formatPartsForUI({
+		year: String(date.getUTCFullYear()).padStart(4, "0"),
+		month: String(date.getUTCMonth() + 1).padStart(2, "0"),
+		day: String(date.getUTCDate()).padStart(2, "0")
+	}, inputLocale);
 }
+/**
+* Gets the type of date item (year, month, or day) that matches the selected range.
+* If there are no matching items, returns null.
+*/
 function getDateItemInSelection(selectionStart, selectionEnd, inputLocale) {
-  for (const { type, range } of getDateItems(inputLocale)) {
-    if (range[0] <= selectionStart && selectionStart <= range[1] && range[0] <= selectionEnd && selectionEnd <= range[1]) {
-      return type;
-    }
-  }
-  return null;
+	for (const { type, range } of getDateItems(inputLocale)) if (range[0] <= selectionStart && selectionStart <= range[1] && range[0] <= selectionEnd && selectionEnd <= range[1]) return type;
+	return null;
 }
+/**
+* Calculates state updates based on numeric key input.
+* If the year, month, and day should be updated, an object containing `parts` and `done` is returned.
+* `parts` stores the new year, month, and day objects.
+* If the input in the input field is complete and the next item should be moved to, `done` is set to true.
+* In the case of the last item (currently the year), even if done is true, there is no need to move to the next item.
+* If there is no need to update the state, null is returned.
+*/
 function handleDigitInput(parts, item, digit) {
-  switch (item) {
-    case "year": {
-      if (!parts.year.startsWith("0")) {
-        return {
-          parts: { ...parts, year: `000${digit}` },
-          done: false
-        };
-      }
-      const newYear = `${parts.year.slice(1)}${digit}`;
-      return {
-        parts: { ...parts, year: newYear },
-        done: !newYear.startsWith("0")
-      };
-    }
-    case "month":
-      if (parts.month === "01" && ["0", "1", "2"].includes(digit)) {
-        return {
-          parts: { ...parts, month: `1${digit}` },
-          done: true
-        };
-      }
-      if (digit !== "0") {
-        return {
-          parts: { ...parts, month: `0${digit}` },
-          done: digit !== "1"
-        };
-      }
-      break;
-    case "day":
-      if (["01", "02"].includes(parts.day) || parts.day === "03" && ["0", "1"].includes(digit)) {
-        return {
-          parts: {
-            ...parts,
-            day: `${parts.day.slice(1)}${digit}`
-          },
-          done: true
-        };
-      }
-      if (parts.day === "03" && digit === "3" || digit === "0") {
-        break;
-      }
-      return {
-        parts: { ...parts, day: `0${digit}` },
-        done: !["1", "2", "3"].includes(digit)
-      };
-  }
-  return null;
+	switch (item) {
+		case "year": {
+			if (!parts.year.startsWith("0")) return {
+				parts: {
+					...parts,
+					year: `000${digit}`
+				},
+				done: false
+			};
+			const newYear = `${parts.year.slice(1)}${digit}`;
+			return {
+				parts: {
+					...parts,
+					year: newYear
+				},
+				done: !newYear.startsWith("0")
+			};
+		}
+		case "month":
+			if (parts.month === "01" && [
+				"0",
+				"1",
+				"2"
+			].includes(digit)) return {
+				parts: {
+					...parts,
+					month: `1${digit}`
+				},
+				done: true
+			};
+			if (digit !== "0") return {
+				parts: {
+					...parts,
+					month: `0${digit}`
+				},
+				done: digit !== "1"
+			};
+			break;
+		case "day":
+			if (["01", "02"].includes(parts.day) || parts.day === "03" && ["0", "1"].includes(digit)) return {
+				parts: {
+					...parts,
+					day: `${parts.day.slice(1)}${digit}`
+				},
+				done: true
+			};
+			if (parts.day === "03" && digit === "3" || digit === "0") break;
+			return {
+				parts: {
+					...parts,
+					day: `0${digit}`
+				},
+				done: ![
+					"1",
+					"2",
+					"3"
+				].includes(digit)
+			};
+	}
+	return null;
 }
-function handleOffsetInput(parts, item, offset2, viewDate, minDate, maxDate) {
-  if (offset2 === 0) {
-    return null;
-  }
-  const year = Number(parts.year);
-  const month = Number(parts.month);
-  const maxDay = isFinite(month) ? countDaysForYearMonth(
-    isFinite(year) ? year : 2021,
-    // Assume not leap year
-    month - 1
-  ) : 31;
-  const { nanDefault, min, max, length } = {
-    year: {
-      nanDefault: viewDate == null ? void 0 : viewDate.getUTCFullYear(),
-      min: minDate.getUTCFullYear(),
-      max: maxDate.getUTCFullYear(),
-      length: 4
-    },
-    month: {
-      nanDefault: null,
-      min: 1,
-      max: 12,
-      length: 2
-    },
-    day: {
-      nanDefault: null,
-      min: 1,
-      max: maxDay,
-      length: 2
-    }
-  }[item];
-  const value = Number(parts[item]);
-  let newValue;
-  if (isFinite(value)) {
-    const withOffset = value + offset2;
-    newValue = min <= withOffset && withOffset <= max ? withOffset : (
-      // Wrap around
-      offset2 > 0 ? min : max
-    );
-  } else {
-    newValue = nanDefault ?? (offset2 > 0 ? min : max);
-  }
-  return {
-    ...parts,
-    [item]: String(Math.max(Math.min(newValue, max), min)).padStart(
-      length,
-      "0"
-    )
-  };
+/**
+* Calculates state updates based on offset.
+* If the year, month, and day should be updated, a new parts object is returned.
+* If there is no need to update the state, null is returned.
+*/
+function handleOffsetInput(parts, item, offset, viewDate, minDate, maxDate) {
+	if (offset === 0) return null;
+	const year = Number(parts.year);
+	const month = Number(parts.month);
+	const maxDay = isFinite(month) ? countDaysForYearMonth(isFinite(year) ? year : 2021, month - 1) : 31;
+	const { nanDefault, min, max, length } = {
+		year: {
+			nanDefault: viewDate?.getUTCFullYear(),
+			min: minDate.getUTCFullYear(),
+			max: maxDate.getUTCFullYear(),
+			length: 4
+		},
+		month: {
+			nanDefault: null,
+			min: 1,
+			max: 12,
+			length: 2
+		},
+		day: {
+			nanDefault: null,
+			min: 1,
+			max: maxDay,
+			length: 2
+		}
+	}[item];
+	const value = Number(parts[item]);
+	let newValue;
+	if (isFinite(value)) {
+		const withOffset = value + offset;
+		newValue = min <= withOffset && withOffset <= max ? withOffset : offset > 0 ? min : max;
+	} else newValue = nanDefault ?? (offset > 0 ? min : max);
+	return {
+		...parts,
+		[item]: String(Math.max(Math.min(newValue, max), min)).padStart(length, "0")
+	};
 }
-let DaikinDatePicker = class extends DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.readonly = false;
-    this.disabled = false;
-    this.required = false;
-    this.error = false;
-    this.open = false;
-    this.defaultValue = null;
-    this.locale = null;
-    this.inputLocale = null;
-    this._label = null;
-    this._currentSelection = "month";
-    this._preCompositionValue = "";
-    this._inputValue = "";
-    this._monthDigitIndex = 0;
-    this._dayDigitIndex = 0;
-    this._yearDigitIndex = 0;
-    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
-    this._dateInputElement = createRef();
-    this._calendarElement = createRef();
-    this._calendarButtonElement = createRef();
-    this._getLocale = () => this.inputLocale ?? null;
-    this._getDateItems = () => getDateItems(this._getLocale());
-    this._parsePartsFromUIValue = (v) => parsePartsFromUIValue(v, this._getLocale());
-    this._formatPartsForUI = (p) => formatPartsForUI(p, this._getLocale());
-    this._tryParseDateFromUIValue = (v) => tryParseDateFromUIValue(v, this._getLocale());
-    this._formatDateForUI = (d) => formatDateForUI(d, this._getLocale());
-    this._getPlaceholderAll = () => getPlaceholderAll(this._getLocale());
-    this._getDateItemInSelection = (s, e) => getDateItemInSelection(s, e, this._getLocale());
-    this._ignoreCloseByFocusTrap = false;
-    this._handleCloseCalendar = () => {
-      var _a;
-      if (this._ignoreCloseByFocusTrap) return;
-      this.open = false;
-      (_a = this._calendarButtonElement.value) == null ? void 0 : _a.focus();
-    };
-    this._focusTrapController = new FocusTrapController(
-      this,
-      this._handleCloseCalendar
-    );
-    this.label = null;
-  }
-  static getDefaultPlaceholder(element) {
-    return getPlaceholderAll(element._getLocale());
-  }
-  get _dateValue() {
-    return tryParseDateFromProperty(this.value);
-  }
-  /**
-   * Returns the string to bind to the <input> element's .value property.
-   *
-   * - When this.value holds a valid date, show the locale-formatted date.
-   * - When _inputValue contains partial or invalid content (placeholders / impossible
-   *   dates like 02/31), return it so the user's in-progress entry is preserved
-   *   across Lit re-renders.
-   * - Otherwise (e.g. this.value was cleared externally while _inputValue still
-   *   holds a now-stale complete valid date string) return "" so the CSS placeholder
-   *   text is visible instead.
-   */
-  get _displayValue() {
-    if (this._dateValue) {
-      return this._formatDateForUI(this._dateValue);
-    }
-    if (this._inputValue && !this._tryParseDateFromUIValue(this._inputValue)) {
-      return this._inputValue;
-    }
-    return "";
-  }
-  get _min() {
-    return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
-  }
-  get _max() {
-    return tryParseDateFromProperty(this.max) ?? parseDateFromProperty(DEFAULT_MAX_DATE);
-  }
-  get _viewDate() {
-    var _a;
-    return ((_a = this._calendarElement.value) == null ? void 0 : _a.viewDate) ?? null;
-  }
-  get _open() {
-    return this.open && !this.disabled && !this.readonly;
-  }
-  _emitSelect() {
-    this.dispatchEvent(
-      new Event("select", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  _handleFocusIn(event) {
-    const target = event.target;
-    this._updateInputSelection(target);
-  }
-  _handleFocusOut(event) {
-    const target = event.target;
-    if (target.value === this._getPlaceholderAll()) {
-      target.value = "";
-      this._inputValue = "";
-    }
-  }
-  _handleChange(event) {
-    this._updateValue(event.target);
-  }
-  _handleMouseUp(event) {
-    var _a, _b;
-    event.preventDefault();
-    const selectionStart = ((_a = this._dateInputElement.value) == null ? void 0 : _a.selectionStart) ?? 0;
-    const selectionEnd = ((_b = this._dateInputElement.value) == null ? void 0 : _b.selectionEnd) ?? 0;
-    const dateItemInSelection = this._getDateItemInSelection(
-      selectionStart,
-      selectionEnd
-    );
-    if (event.target.value === this._getPlaceholderAll() && !dateItemInSelection) {
-      this._updateSelection("month");
-      return;
-    }
-    if (dateItemInSelection) {
-      this._updateSelection(dateItemInSelection);
-    }
-  }
-  // 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;
-  }
-  // Handle 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 handleDigitInput logic.
-  _handleCompositionEnd(event) {
-    const target = event.target;
-    const composedText = event.data;
-    target.value = this._preCompositionValue || this._getPlaceholderAll();
-    const digits = extractHalfWidthDigits(composedText);
-    if (digits.length === 0) {
-      this._updateInputSelection(target);
-      this._updateValue(target);
-      return;
-    }
-    this._applyDigits(target, digits);
-  }
-  // Applies a single digit to the given date part, incorporating fresh-entry
-  // tracking for month and day. Extracted from _applyDigits to keep complexity low.
-  _applyDigitToPart(parts, item, digit) {
-    if (item === "month") {
-      const monthDigitIndex = this._monthDigitIndex;
-      if (monthDigitIndex === 0) {
-        this._monthDigitIndex = 1;
-        if (digit === "0") {
-          return { parts: { ...parts, month: "00" }, done: false };
-        }
-        return {
-          parts: { ...parts, month: `0${digit}` },
-          done: digit !== "1"
-        };
-      }
-      this._monthDigitIndex = 0;
-      if (parts.month === "00") {
-        if (digit === "0") return null;
-        return { parts: { ...parts, month: `0${digit}` }, done: true };
-      }
-    } else if (item === "day") {
-      const dayDigitIndex = this._dayDigitIndex;
-      if (dayDigitIndex === 0) {
-        this._dayDigitIndex = 1;
-        if (digit === "0") {
-          return { parts: { ...parts, day: "00" }, done: false };
-        }
-        return {
-          parts: { ...parts, day: `0${digit}` },
-          done: !["1", "2", "3"].includes(digit)
-        };
-      }
-      this._dayDigitIndex = 0;
-      if (parts.day === "00") {
-        if (digit === "0") return null;
-        return { parts: { ...parts, day: `0${digit}` }, done: true };
-      }
-    } else if (this._yearDigitIndex === 0) {
-      this._yearDigitIndex = 1;
-      return { parts: { ...parts, year: `000${digit}` }, done: false };
-    }
-    return handleDigitInput(parts, item, digit);
-  }
-  // Applies a sequence of digit characters to the input starting from the currently
-  // selected date item, then commits the result to this.value.
-  // Shared by _handleKeyDown (single digit) and _handleCompositionEnd (multiple digits).
-  _applyDigits(target, digits) {
-    const items = this._getDateItems();
-    let parts = this._parsePartsFromUIValue(target.value);
-    let currentItem = this._currentSelection;
-    for (const digit of digits) {
-      const currentIndex = items.findIndex(({ type }) => type === currentItem);
-      if (currentIndex < 0) break;
-      const newState = this._applyDigitToPart(parts, currentItem, digit);
-      if (!newState) continue;
-      parts = newState.parts;
-      if (!newState.done) continue;
-      const nextIndex = Math.min(currentIndex + 1, items.length - 1);
-      currentItem = items[nextIndex].type;
-      this._monthDigitIndex = 0;
-      this._dayDigitIndex = 0;
-      this._yearDigitIndex = 0;
-    }
-    target.value = this._formatPartsForUI(parts);
-    this._updateSelection(currentItem);
-    this._updateValue(target);
-  }
-  _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 = this._parsePartsFromUIValue(target.value);
-    if (key === "Backspace" || key === "Delete") {
-      event.preventDefault();
-      const itemToRemove = this._currentSelection;
-      const placeholder = {
-        year: PLACEHOLDER_YEAR,
-        month: PLACEHOLDER_MONTH,
-        day: PLACEHOLDER_DAY
-      }[itemToRemove];
-      if (parts[itemToRemove] !== placeholder) {
-        target.value = this._formatPartsForUI({
-          ...parts,
-          [itemToRemove]: placeholder
-        });
-        this._updateSelection(itemToRemove);
-      }
-      this._updateValue(target);
-      return;
-    }
-    if (/^\d$/.test(key)) {
-      event.preventDefault();
-      this._applyDigits(target, [key]);
-      return;
-    }
-    const moveOffset = {
-      ArrowLeft: -1,
-      ArrowRight: 1
-    }[key];
-    if (moveOffset) {
-      event.preventDefault();
-      const items = this._getDateItems();
-      const currentIndex = items.findIndex(
-        ({ type }) => type === this._currentSelection
-      );
-      const newIndex = currentIndex >= 0 ? Math.min(Math.max(currentIndex + moveOffset, 0), items.length - 1) : 0;
-      this._updateSelection(items[newIndex].type);
-      return;
-    }
-    const countOffset = {
-      ArrowUp: 1,
-      ArrowDown: -1
-    }[key];
-    if (countOffset) {
-      event.preventDefault();
-      const newParts = handleOffsetInput(
-        parts,
-        this._currentSelection,
-        countOffset,
-        this._viewDate,
-        this._min,
-        this._max
-      );
-      if (newParts) {
-        target.value = this._formatPartsForUI(newParts);
-        this._updateSelection(this._currentSelection);
-      }
-      this._updateValue(target);
-      return;
-    }
-    if (key.length <= 1) {
-      event.preventDefault();
-      return;
-    }
-  }
-  // Depending on the PC settings, a period may be entered when the space key is pressed repeatedly, so this is stopped.
-  // When this happens, the selection range changes, so this is also reset to the current item.
-  // Note: _updateInputSelection is intentionally NOT used here because it always moves focus to the
-  // first item, which would break IME input on non-first fields (e.g. compositionend would always
-  // edit the first date part instead of the one the user is on).
-  _handleBeforeInput(event) {
-    event.preventDefault();
-    if (!event.isComposing) {
-      this._updateSelection(this._currentSelection);
-    }
-  }
-  _handleSelect(event) {
-    event.stopPropagation();
-    const calendar = event.target;
-    if (!calendar.value) {
-      return;
-    }
-    const target = this._dateInputElement.value;
-    const value = parseDateFromProperty(calendar.value);
-    const formattedForUI = this._formatDateForUI(value);
-    this.value = formatDateForProperty(value);
-    target.value = formattedForUI;
-    this._inputValue = formattedForUI;
-    this.error = false;
-    if (event.type === "select") {
-      this.open = false;
-    }
-    this._emitSelect();
-  }
-  _handlePointerDown() {
-    this._ignoreCloseByFocusTrap = true;
-  }
-  _handlePointerUp() {
-    this._ignoreCloseByFocusTrap = false;
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    this.open = !this.open;
-  }
-  _handleCalendarKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.disabled || this.readonly) {
-        return;
-      }
-      this.open = !this.open;
-    }
-  }
-  _handleToggle(event) {
-    if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
-      this.open = event.newState === "open";
-      const calendar = this._calendarElement.value;
-      if (calendar) {
-        calendar.view = "day";
-      }
-    }
-  }
-  /**
-   * Returns true if all date parts (year/month/day) in the input are filled with
-   * digits and no placeholder text (YYYY, MM, DD) remains.
-   */
-  _isInputComplete(value) {
-    const parts = this._parsePartsFromUIValue(value);
-    return /^\d{4}$/.test(parts.year) && /^\d{2}$/.test(parts.month) && /^\d{2}$/.test(parts.day);
-  }
-  _updateValue(target) {
-    this._inputValue = target.value;
-    if (target.value === this._getPlaceholderAll()) {
-      this.error = false;
-      this.value = "";
-      return;
-    }
-    if (!this._isInputComplete(target.value)) {
-      this.error = true;
-      this.value = "";
-      return;
-    }
-    const newDate = this._tryParseDateFromUIValue(target.value);
-    if (!newDate) {
-      this.error = true;
-      this.value = "";
-      return;
+var DaikinDatePicker = class DaikinDatePicker extends DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.readonly = false;
+		this.disabled = false;
+		this.required = false;
+		this.error = false;
+		this.open = false;
+		this.defaultValue = null;
+		this.locale = null;
+		this.inputLocale = null;
+		this._label = null;
+		this._currentSelection = "month";
+		this._preCompositionValue = "";
+		this._inputValue = "";
+		this._monthDigitIndex = 0;
+		this._dayDigitIndex = 0;
+		this._yearDigitIndex = 0;
+		this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+		this._dateInputElement = createRef();
+		this._calendarElement = createRef();
+		this._calendarButtonElement = createRef();
+		this._getLocale = () => this.inputLocale ?? null;
+		this._getDateItems = () => getDateItems(this._getLocale());
+		this._parsePartsFromUIValue = (v) => parsePartsFromUIValue(v, this._getLocale());
+		this._formatPartsForUI = (p) => formatPartsForUI(p, this._getLocale());
+		this._tryParseDateFromUIValue = (v) => tryParseDateFromUIValue(v, this._getLocale());
+		this._formatDateForUI = (d) => formatDateForUI(d, this._getLocale());
+		this._getPlaceholderAll = () => getPlaceholderAll(this._getLocale());
+		this._getDateItemInSelection = (s, e) => getDateItemInSelection(s, e, this._getLocale());
+		this._ignoreCloseByFocusTrap = false;
+		this._handleCloseCalendar = () => {
+			if (this._ignoreCloseByFocusTrap) return;
+			this.open = false;
+			this._calendarButtonElement.value?.focus();
+		};
+		this._focusTrapController = new FocusTrapController(this, this._handleCloseCalendar);
+		this.label = null;
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: var(--dds-input-height, 3rem);
     }
-    const newValue = formatDateForProperty(newDate);
-    if (isDateOutOfRange(newDate, this._min, this._max)) {
-      this.error = true;
-      if (this.value !== newValue) {
-        this.value = newValue;
-        this._emitSelect();
-      }
-      return;
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-    if (!this.error && !this.open && this.value === newValue) {
-      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);
     }
-    this.error = false;
-    this.value = newValue;
-    this.open = false;
-    this._emitSelect();
-  }
-  _updateInputSelection(target) {
-    var _a;
-    const selection = window.getSelection();
-    if (!selection) {
-      return;
+
+    :host([readonly]:not([disabled])) input:focus-visible {
+      --color-base: var(--dds-color-common-border-focus);
     }
-    if (target.value === "") {
-      target.value = this._getPlaceholderAll();
-      this._inputValue = this._getPlaceholderAll();
+
+    :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);
     }
-    const itemInfo = this._getDateItems()[0];
-    (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
-      itemInfo.range[0],
-      itemInfo.range[1]
-    );
-    this._monthDigitIndex = 0;
-    this._dayDigitIndex = 0;
-    this._yearDigitIndex = 0;
-    this._currentSelection = itemInfo.type;
-  }
-  _updateSelection(dateItem) {
-    var _a;
-    const selection = window.getSelection();
-    if (!selection) {
-      return;
+
+    daikin-calendar[popover] {
+      display: none;
     }
-    const itemInfo = this._getDateItems().find(({ type }) => type === dateItem);
-    if (itemInfo) {
-      if (dateItem !== this._currentSelection) {
-        if (dateItem === "month") this._monthDigitIndex = 0;
-        if (dateItem === "day") this._dayDigitIndex = 0;
-        if (dateItem === "year") this._yearDigitIndex = 0;
-      }
-      (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
-        itemInfo.range[0],
-        itemInfo.range[1]
-      );
-      this._currentSelection = itemInfo.type;
+
+    daikin-calendar[popover]:popover-open {
+      display: flex;
     }
-  }
-  /**
-   * Focuses on the inner date input.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._dateInputElement.value) == null ? void 0 : _a.focus(options);
-  }
-  render() {
-    const min = this._min;
-    const max = this._max;
-    return html`<div
+  `;
+	}
+	static getDefaultPlaceholder(element) {
+		return getPlaceholderAll(element._getLocale());
+	}
+	get _dateValue() {
+		return tryParseDateFromProperty(this.value);
+	}
+	/**
+	* Returns the string to bind to the <input> element's .value property.
+	*
+	* - When this.value holds a valid date, show the locale-formatted date.
+	* - When _inputValue contains partial or invalid content (placeholders / impossible
+	*   dates like 02/31), return it so the user's in-progress entry is preserved
+	*   across Lit re-renders.
+	* - Otherwise (e.g. this.value was cleared externally while _inputValue still
+	*   holds a now-stale complete valid date string) return "" so the CSS placeholder
+	*   text is visible instead.
+	*/
+	get _displayValue() {
+		if (this._dateValue) return this._formatDateForUI(this._dateValue);
+		if (this._inputValue && !this._tryParseDateFromUIValue(this._inputValue)) return this._inputValue;
+		return "";
+	}
+	get _min() {
+		return tryParseDateFromProperty(this.min) ?? parseDateFromProperty("1900-01-01");
+	}
+	get _max() {
+		return tryParseDateFromProperty(this.max) ?? parseDateFromProperty("2099-12-31");
+	}
+	get _viewDate() {
+		return this._calendarElement.value?.viewDate ?? null;
+	}
+	get _open() {
+		return this.open && !this.disabled && !this.readonly;
+	}
+	_emitSelect() {
+		this.dispatchEvent(new Event("select", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_handleFocusIn(event) {
+		const target = event.target;
+		this._updateInputSelection(target);
+	}
+	_handleFocusOut(event) {
+		const target = event.target;
+		if (target.value === this._getPlaceholderAll()) {
+			target.value = "";
+			this._inputValue = "";
+		}
+	}
+	_handleChange(event) {
+		this._updateValue(event.target);
+	}
+	_handleMouseUp(event) {
+		event.preventDefault();
+		const selectionStart = this._dateInputElement.value?.selectionStart ?? 0;
+		const selectionEnd = this._dateInputElement.value?.selectionEnd ?? 0;
+		const dateItemInSelection = this._getDateItemInSelection(selectionStart, selectionEnd);
+		if (event.target.value === this._getPlaceholderAll() && !dateItemInSelection) {
+			this._updateSelection("month");
+			return;
+		}
+		if (dateItemInSelection) this._updateSelection(dateItemInSelection);
+	}
+	_handleCompositionStart(event) {
+		this._preCompositionValue = event.target.value;
+	}
+	_handleCompositionEnd(event) {
+		const target = event.target;
+		const composedText = event.data;
+		target.value = this._preCompositionValue || this._getPlaceholderAll();
+		const digits = extractHalfWidthDigits(composedText);
+		if (digits.length === 0) {
+			this._updateInputSelection(target);
+			this._updateValue(target);
+			return;
+		}
+		this._applyDigits(target, digits);
+	}
+	_applyDigitToPart(parts, item, digit) {
+		if (item === "month") {
+			if (this._monthDigitIndex === 0) {
+				this._monthDigitIndex = 1;
+				if (digit === "0") return {
+					parts: {
+						...parts,
+						month: "00"
+					},
+					done: false
+				};
+				return {
+					parts: {
+						...parts,
+						month: `0${digit}`
+					},
+					done: digit !== "1"
+				};
+			}
+			this._monthDigitIndex = 0;
+			if (parts.month === "00") {
+				if (digit === "0") return null;
+				return {
+					parts: {
+						...parts,
+						month: `0${digit}`
+					},
+					done: true
+				};
+			}
+		} else if (item === "day") {
+			if (this._dayDigitIndex === 0) {
+				this._dayDigitIndex = 1;
+				if (digit === "0") return {
+					parts: {
+						...parts,
+						day: "00"
+					},
+					done: false
+				};
+				return {
+					parts: {
+						...parts,
+						day: `0${digit}`
+					},
+					done: ![
+						"1",
+						"2",
+						"3"
+					].includes(digit)
+				};
+			}
+			this._dayDigitIndex = 0;
+			if (parts.day === "00") {
+				if (digit === "0") return null;
+				return {
+					parts: {
+						...parts,
+						day: `0${digit}`
+					},
+					done: true
+				};
+			}
+		} else if (this._yearDigitIndex === 0) {
+			this._yearDigitIndex = 1;
+			return {
+				parts: {
+					...parts,
+					year: `000${digit}`
+				},
+				done: false
+			};
+		}
+		return handleDigitInput(parts, item, digit);
+	}
+	_applyDigits(target, digits) {
+		const items = this._getDateItems();
+		let parts = this._parsePartsFromUIValue(target.value);
+		let currentItem = this._currentSelection;
+		for (const digit of digits) {
+			const currentIndex = items.findIndex(({ type }) => type === currentItem);
+			if (currentIndex < 0) break;
+			const newState = this._applyDigitToPart(parts, currentItem, digit);
+			if (!newState) continue;
+			parts = newState.parts;
+			if (!newState.done) continue;
+			currentItem = items[Math.min(currentIndex + 1, items.length - 1)].type;
+			this._monthDigitIndex = 0;
+			this._dayDigitIndex = 0;
+			this._yearDigitIndex = 0;
+		}
+		target.value = this._formatPartsForUI(parts);
+		this._updateSelection(currentItem);
+		this._updateValue(target);
+	}
+	_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 = this._parsePartsFromUIValue(target.value);
+		if (key === "Backspace" || key === "Delete") {
+			event.preventDefault();
+			const itemToRemove = this._currentSelection;
+			const placeholder = {
+				year: PLACEHOLDER_YEAR,
+				month: PLACEHOLDER_MONTH,
+				day: PLACEHOLDER_DAY
+			}[itemToRemove];
+			if (parts[itemToRemove] !== placeholder) {
+				target.value = this._formatPartsForUI({
+					...parts,
+					[itemToRemove]: placeholder
+				});
+				this._updateSelection(itemToRemove);
+			}
+			this._updateValue(target);
+			return;
+		}
+		if (/^\d$/.test(key)) {
+			event.preventDefault();
+			this._applyDigits(target, [key]);
+			return;
+		}
+		const moveOffset = {
+			ArrowLeft: -1,
+			ArrowRight: 1
+		}[key];
+		if (moveOffset) {
+			event.preventDefault();
+			const items = this._getDateItems();
+			const currentIndex = items.findIndex(({ type }) => type === this._currentSelection);
+			const newIndex = currentIndex >= 0 ? Math.min(Math.max(currentIndex + moveOffset, 0), items.length - 1) : 0;
+			this._updateSelection(items[newIndex].type);
+			return;
+		}
+		const countOffset = {
+			ArrowUp: 1,
+			ArrowDown: -1
+		}[key];
+		if (countOffset) {
+			event.preventDefault();
+			const newParts = handleOffsetInput(parts, this._currentSelection, countOffset, this._viewDate, this._min, this._max);
+			if (newParts) {
+				target.value = this._formatPartsForUI(newParts);
+				this._updateSelection(this._currentSelection);
+			}
+			this._updateValue(target);
+			return;
+		}
+		if (key.length <= 1) {
+			event.preventDefault();
+			return;
+		}
+	}
+	_handleBeforeInput(event) {
+		event.preventDefault();
+		if (!event.isComposing) this._updateSelection(this._currentSelection);
+	}
+	_handleSelect(event) {
+		event.stopPropagation();
+		const calendar = event.target;
+		if (!calendar.value) return;
+		const target = this._dateInputElement.value;
+		const value = parseDateFromProperty(calendar.value);
+		const formattedForUI = this._formatDateForUI(value);
+		this.value = formatDateForProperty(value);
+		target.value = formattedForUI;
+		this._inputValue = formattedForUI;
+		this.error = false;
+		if (event.type === "select") this.open = false;
+		this._emitSelect();
+	}
+	_handlePointerDown() {
+		this._ignoreCloseByFocusTrap = true;
+	}
+	_handlePointerUp() {
+		this._ignoreCloseByFocusTrap = false;
+		if (this.disabled || this.readonly) return;
+		this.open = !this.open;
+	}
+	_handleCalendarKeyDown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			if (this.disabled || this.readonly) return;
+			this.open = !this.open;
+		}
+	}
+	_handleToggle(event) {
+		if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
+			this.open = event.newState === "open";
+			const calendar = this._calendarElement.value;
+			if (calendar) calendar.view = "day";
+		}
+	}
+	/**
+	* Returns true if all date parts (year/month/day) in the input are filled with
+	* digits and no placeholder text (YYYY, MM, DD) remains.
+	*/
+	_isInputComplete(value) {
+		const parts = this._parsePartsFromUIValue(value);
+		return /^\d{4}$/.test(parts.year) && /^\d{2}$/.test(parts.month) && /^\d{2}$/.test(parts.day);
+	}
+	_updateValue(target) {
+		this._inputValue = target.value;
+		if (target.value === this._getPlaceholderAll()) {
+			this.error = false;
+			this.value = "";
+			return;
+		}
+		if (!this._isInputComplete(target.value)) {
+			this.error = true;
+			this.value = "";
+			return;
+		}
+		const newDate = this._tryParseDateFromUIValue(target.value);
+		if (!newDate) {
+			this.error = true;
+			this.value = "";
+			return;
+		}
+		const newValue = formatDateForProperty(newDate);
+		if (isDateOutOfRange(newDate, this._min, this._max)) {
+			this.error = true;
+			if (this.value !== newValue) {
+				this.value = newValue;
+				this._emitSelect();
+			}
+			return;
+		}
+		if (!this.error && !this.open && this.value === newValue) return;
+		this.error = false;
+		this.value = newValue;
+		this.open = false;
+		this._emitSelect();
+	}
+	_updateInputSelection(target) {
+		if (!window.getSelection()) return;
+		if (target.value === "") {
+			target.value = this._getPlaceholderAll();
+			this._inputValue = this._getPlaceholderAll();
+		}
+		const itemInfo = this._getDateItems()[0];
+		this._dateInputElement.value?.setSelectionRange(itemInfo.range[0], itemInfo.range[1]);
+		this._monthDigitIndex = 0;
+		this._dayDigitIndex = 0;
+		this._yearDigitIndex = 0;
+		this._currentSelection = itemInfo.type;
+	}
+	_updateSelection(dateItem) {
+		if (!window.getSelection()) return;
+		const itemInfo = this._getDateItems().find(({ type }) => type === dateItem);
+		if (itemInfo) {
+			if (dateItem !== this._currentSelection) {
+				if (dateItem === "month") this._monthDigitIndex = 0;
+				if (dateItem === "day") this._dayDigitIndex = 0;
+				if (dateItem === "year") this._yearDigitIndex = 0;
+			}
+			this._dateInputElement.value?.setSelectionRange(itemInfo.range[0], itemInfo.range[1]);
+			this._currentSelection = itemInfo.type;
+		}
+	}
+	/**
+	* Focuses on the inner date input.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._dateInputElement.value?.focus(options);
+	}
+	render() {
+		const min = this._min;
+		const max = this._max;
+		return html`<div
         class="size-full relative"
         ${this._autoUpdateController.refReference()}
       >
@@ -769,151 +785,96 @@ let DaikinDatePicker = class extends DDSFormElement {
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
-      ${// Activate auto update only when the tooltip is open.
-    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
-    guard(
-      [this.open],
-      () => this._autoUpdateController.directive(
-        {
-          placement: "bottom-start",
-          middleware: [
-            offset({ mainAxis: 0 }),
-            flip(),
-            shift(),
-            size({
-              apply({ availableHeight, elements }) {
-                Object.assign(elements.floating.style, {
-                  maxHeight: `${availableHeight}px`
-                });
-              }
-            })
-          ]
-        },
-        this.open
-      )
-    )}
-      ${guard(
-      [this.open],
-      () => this._focusTrapController.directive(this.open)
-    )}`;
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
-      this.open = this._open;
-    }
-    if (changedProperties.has("value")) {
-      if (tryParseDateFromProperty(this.value)) {
-        const newDate = parseDateFromProperty(this.value);
-        this.error = isDateOutOfRange(newDate, this._min, this._max);
-      }
-    }
-  }
-  updated(changedProperties) {
-    var _a;
-    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
-      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this._open);
-    }
-    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;
-  }
-};
-DaikinDatePicker.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: flex;
-      align-items: center;
-      height: var(--dds-input-height, 3rem);
-    }
-
-    :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]:not([disabled])) input:focus-visible {
-      --color-base: var(--dds-color-common-border-focus);
-    }
-
-    :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);
-    }
-
-    daikin-calendar[popover] {
-      display: none;
-    }
-
-    daikin-calendar[popover]:popover-open {
-      display: flex;
-    }
-  `;
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: DaikinDatePicker.getDefaultPlaceholder
-  })
-], DaikinDatePicker.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
-], DaikinDatePicker.prototype, "min", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
-], DaikinDatePicker.prototype, "max", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDatePicker.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDatePicker.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDatePicker.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDatePicker.prototype, "error", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDatePicker.prototype, "open", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "default-value" })
-], DaikinDatePicker.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinDatePicker.prototype, "locale", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "input-locale" })
-], DaikinDatePicker.prototype, "inputLocale", 2);
-__decorateClass([
-  state()
-], DaikinDatePicker.prototype, "_label", 2);
-__decorateClass([
-  state()
-], DaikinDatePicker.prototype, "_currentSelection", 2);
-DaikinDatePicker = __decorateClass([
-  ddsElement("daikin-date-picker")
-], DaikinDatePicker);
-export {
-  DaikinDatePicker
+      ${guard([this.open], () => this._autoUpdateController.directive({
+			placement: "bottom-start",
+			middleware: [
+				offset({ mainAxis: 0 }),
+				flip(),
+				shift(),
+				size({ apply({ availableHeight, elements }) {
+					Object.assign(elements.floating.style, { maxHeight: `${availableHeight}px` });
+				} })
+			]
+		}, this.open))}
+      ${guard([this.open], () => this._focusTrapController.directive(this.open))}`;
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) this.open = this._open;
+		if (changedProperties.has("value")) {
+			if (tryParseDateFromProperty(this.value)) {
+				const newDate = parseDateFromProperty(this.value);
+				this.error = isDateOutOfRange(newDate, this._min, this._max);
+			}
+		}
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) this._autoUpdateController.floatingElement?.togglePopover(this._open);
+		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;
+	}
 };
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: DaikinDatePicker.getDefaultPlaceholder
+})], DaikinDatePicker.prototype, "placeholder", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "1900-01-01"
+})], DaikinDatePicker.prototype, "min", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "2099-12-31"
+})], DaikinDatePicker.prototype, "max", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDatePicker.prototype, "readonly", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDatePicker.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDatePicker.prototype, "required", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDatePicker.prototype, "error", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDatePicker.prototype, "open", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "default-value"
+})], DaikinDatePicker.prototype, "defaultValue", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true
+})], DaikinDatePicker.prototype, "locale", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "input-locale"
+})], DaikinDatePicker.prototype, "inputLocale", void 0);
+__decorate([state()], DaikinDatePicker.prototype, "_label", void 0);
+__decorate([state()], DaikinDatePicker.prototype, "_currentSelection", void 0);
+DaikinDatePicker = __decorate([ddsElement("daikin-date-picker")], DaikinDatePicker);
+//#endregion
+export { DaikinDatePicker };