@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs/components/date-picker/daikin-date-picker.cjs

@@ -16,6 +16,7 @@ const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.
 const focusTrap = require("../../controllers/focus-trap.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const calendarCommon = require("../../utils/calendar-common.cjs");
+const extractHalfWidthDigits = require("../../utils/extract-half-width-digits.cjs");
 const reDispatch = require("../../utils/re-dispatch.cjs");
 require("../calendar/daikin-calendar.cjs");
 require("../icon-button/daikin-icon-button.cjs");
@@ -30,18 +31,18 @@ var __decorateClass = (decorators2, target, key, kind) => {
   return result;
 };
 const dateTimeFormatPartsCache = /* @__PURE__ */ new Map();
-function getSafeDateTimeFormatParts(locale) {
+function getSafeDateTimeFormatParts(inputLocale) {
   const options = {
     year: "numeric",
     month: "numeric",
     day: "numeric"
   };
-  const key = locale ?? "__DEFAULT__";
+  const key = inputLocale ?? "__DEFAULT__";
   const cached = dateTimeFormatPartsCache.get(key);
   if (cached) return cached;
   try {
     const parts = new Intl.DateTimeFormat(
-      locale ?? void 0,
+      inputLocale ?? void 0,
       options
     ).formatToParts(0);
     dateTimeFormatPartsCache.set(key, parts);
@@ -52,8 +53,8 @@ function getSafeDateTimeFormatParts(locale) {
     return parts;
   }
 }
-function getDateOrderAndSeparator(locale) {
-  const parts = getSafeDateTimeFormatParts(locale ?? void 0);
+function getDateOrderAndSeparator(inputLocale) {
+  const parts = getSafeDateTimeFormatParts(inputLocale ?? void 0);
   const order = parts.filter(
     (p) => ["year", "month", "day"].includes(p.type)
   ).map((p) => p.type);
@@ -70,8 +71,8 @@ function getDateOrderAndSeparator(locale) {
   }
   return { order, sep };
 }
-function getDateItems(locale) {
-  const { order, sep } = getDateOrderAndSeparator(locale);
+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;
@@ -90,9 +91,10 @@ const cvaField = classVarianceAuthority.cva(
     "flex",
     "items-center",
     "size-full",
+    "min-h-(--dds-input-height)",
     "bg-ddt-color-common-background-default",
-    "pl-4",
-    "pr-10",
+    "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",
@@ -128,25 +130,25 @@ const cvaField = classVarianceAuthority.cva(
     }
   }
 );
-function parsePartsFromUIValue(value, locale) {
-  const { order, sep } = getDateOrderAndSeparator(locale);
+function parsePartsFromUIValue(value, inputLocale) {
+  const { order, sep } = getDateOrderAndSeparator(inputLocale);
   const parts = value.split(sep);
   return Object.fromEntries(
     order.map((key, i) => [key, parts[i] ?? ""])
   );
 }
-function formatPartsForUI(parts, locale) {
-  const { order, sep } = getDateOrderAndSeparator(locale);
+function formatPartsForUI(parts, inputLocale) {
+  const { order, sep } = getDateOrderAndSeparator(inputLocale);
   return order.map((k) => parts[k]).join(sep);
 }
-function getPlaceholderAll(locale) {
+function getPlaceholderAll(inputLocale) {
   return formatPartsForUI(
     { year: PLACEHOLDER_YEAR, month: PLACEHOLDER_MONTH, day: PLACEHOLDER_DAY },
-    locale
+    inputLocale
   );
 }
-function tryParseDateFromUIValue(value, locale) {
-  const { year, month, day } = parsePartsFromUIValue(value, locale);
+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.
@@ -160,18 +162,18 @@ function tryParseDateFromUIValue(value, locale) {
   }
   return date;
 }
-function formatDateForUI(date, locale) {
+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")
     },
-    locale
+    inputLocale
   );
 }
-function getDateItemInSelection(selectionStart, selectionEnd, locale) {
-  for (const { type, range } of getDateItems(locale)) {
+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;
     }
@@ -287,13 +289,19 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     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 floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._dateInputElement = ref_js.createRef();
     this._calendarElement = ref_js.createRef();
     this._calendarButtonElement = ref_js.createRef();
-    this._getLocale = () => this.locale ?? null;
+    this._getLocale = () => this.inputLocale ?? null;
     this._getDateItems = () => getDateItems(this._getLocale());
     this._parsePartsFromUIValue = (v) => parsePartsFromUIValue(v, this._getLocale());
     this._formatPartsForUI = (p) => formatPartsForUI(p, this._getLocale());
@@ -317,9 +325,29 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   static getDefaultPlaceholder(element) {
     return getPlaceholderAll(element._getLocale());
   }
-  get _value() {
+  get _dateValue() {
     return calendarCommon.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 calendarCommon.tryParseDateFromProperty(this.min) ?? calendarCommon.parseDateFromProperty(calendarCommon.DEFAULT_MIN_DATE);
   }
@@ -349,10 +377,11 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     const target = event.target;
     if (target.value === this._getPlaceholderAll()) {
       target.value = "";
+      this._inputValue = "";
     }
   }
   _handleChange(event) {
-    this._updateValue(event);
+    this._updateValue(event.target);
   }
   _handleMouseUp(event) {
     var _a, _b;
@@ -371,14 +400,104 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       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.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") {
+    if (key === "Backspace" || key === "Delete") {
       event.preventDefault();
       const itemToRemove = this._currentSelection;
       const placeholder = {
@@ -393,24 +512,12 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         });
         this._updateSelection(itemToRemove);
       }
-      this._updateValue(event);
+      this._updateValue(target);
       return;
     }
     if (/^\d$/.test(key)) {
       event.preventDefault();
-      const newState = handleDigitInput(parts, this._currentSelection, key);
-      if (newState) {
-        target.value = this._formatPartsForUI(newState.parts);
-        const items = this._getDateItems();
-        const currentIndex = items.findIndex(
-          ({ type }) => type === this._currentSelection
-        );
-        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, items.length - 1) : -1;
-        this._updateSelection(
-          newState.done && nextIndex >= 0 ? items[nextIndex].type : this._currentSelection
-        );
-      }
-      this._updateValue(event);
+      this._applyDigits(target, [key]);
       return;
     }
     const moveOffset = {
@@ -445,7 +552,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         target.value = this._formatPartsForUI(newParts);
         this._updateSelection(this._currentSelection);
       }
-      this._updateValue(event);
+      this._updateValue(target);
       return;
     }
     if (key.length <= 1) {
@@ -454,10 +561,15 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
   }
   // 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.
+  // 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();
-    this._updateInputSelection(event.target);
+    if (!event.isComposing) {
+      this._updateSelection(this._currentSelection);
+    }
   }
   _handleSelect(event) {
     event.stopPropagation();
@@ -467,8 +579,10 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     const target = this._dateInputElement.value;
     const value = calendarCommon.parseDateFromProperty(calendar.value);
+    const formattedForUI = this._formatDateForUI(value);
     this.value = calendarCommon.formatDateForProperty(value);
-    target.value = this._formatDateForUI(value);
+    target.value = formattedForUI;
+    this._inputValue = formattedForUI;
     this.error = false;
     if (event.type === "select") {
       this.open = false;
@@ -504,19 +618,46 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       }
     }
   }
-  _updateValue(event) {
-    const target = event.target;
+  /**
+   * 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 || calendarCommon.isDateOutOfRange(newDate, this._min, this._max)) {
+    if (!newDate) {
+      this.error = true;
+      this.value = "";
+      return;
+    }
+    const newValue = calendarCommon.formatDateForProperty(newDate);
+    if (calendarCommon.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 = calendarCommon.formatDateForProperty(newDate);
+    this.value = newValue;
     this.open = false;
     this._emitSelect();
   }
@@ -528,12 +669,16 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     if (target.value === "") {
       target.value = this._getPlaceholderAll();
+      this._inputValue = this._getPlaceholderAll();
     }
     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) {
@@ -544,6 +689,11 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     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]
@@ -576,28 +726,30 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
-          .value=${this._value ? this._formatDateForUI(this._value) : ""}
+          .value=${this._displayValue}
           @change=${this._handleChange}
+          @compositionstart=${this._handleCompositionStart}
+          @compositionend=${this._handleCompositionEnd}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
           @keydown=${this._handleKeyDown}
           @beforeinput=${this._handleBeforeInput}
           @mouseup=${this._handleMouseUp}
         />
-        <daikin-icon-button
-          ${ref_js.ref(this._calendarButtonElement)}
-          class="absolute top-0 bottom-0 right-2 m-auto"
-          type="button"
-          color="neutral"
-          variant="ghost"
-          button-aria-label="Open the date picker"
-          ?disabled=${this.disabled}
-          @pointerdown=${this._handlePointerDown}
-          @pointerup=${this._handlePointerUp}
-          @keydown=${this._handleCalendarKeyDown}
-        >
-          <span class=${calendarCommon.cvaIconButton({ intent: "calender" })}></span>
-        </daikin-icon-button>
+        ${this.readonly && !this.disabled ? lit.nothing : lit.html`<daikin-icon-button
+              ${ref_js.ref(this._calendarButtonElement)}
+              class="absolute size-(--dds-icon-button) top-0 bottom-0 right-2 m-auto"
+              type="button"
+              color="neutral"
+              variant="ghost"
+              button-aria-label="Open the date picker"
+              ?disabled=${this.disabled}
+              @pointerdown=${this._handlePointerDown}
+              @pointerup=${this._handlePointerUp}
+              @keydown=${this._handleCalendarKeyDown}
+            >
+              <span class=${calendarCommon.cvaIconButton({ intent: "calender" })}></span>
+            </daikin-icon-button>`}
         <span class="sr-only" aria-live="polite"
           >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
         </span>
@@ -606,11 +758,12 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         ${ref_js.ref(this._calendarElement)}
         ${this._focusTrapController.refContainer()}
         id="calendar"
-        value=${this._value ? calendarCommon.formatDateForProperty(this._value) : lit.nothing}
+        value=${this._dateValue ? calendarCommon.formatDateForProperty(this._dateValue) : lit.nothing}
         min=${calendarCommon.formatDateForProperty(min)}
         max=${calendarCommon.formatDateForProperty(max)}
         default-value=${ifDefined_js.ifDefined(this.defaultValue)}
-        popover="manual"
+        locale=${ifDefined_js.ifDefined(this.locale)}
+        .popover=${"manual"}
         class="absolute left-(--floating-x,0) top-(--floating-y,0)"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -673,6 +826,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   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;
@@ -684,7 +838,28 @@ exports.DaikinDatePicker.styles = lit.css`
     :host {
       display: flex;
       align-items: center;
-      height: 3rem;
+      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] {
@@ -729,6 +904,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinDatePicker.prototype, "locale", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "input-locale" })
+], exports.DaikinDatePicker.prototype, "inputLocale", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinDatePicker.prototype, "_label", 2);

package/dist/cjs/components/date-picker/daikin-date-picker.d.cts

@@ -73,19 +73,33 @@ export declare class DaikinDatePicker extends DDSFormElement {
      * If there is a `value` attribute, this is ignored.
      */
     defaultValue: string | null;
+    /**
+     * The locale used for date picker.
+     * If not provided, the browser's default locale will be used.
+     * Currently, only English and Japanese are supported.
+     * The locale determined by this property controls the language of the text inside the calendar popup.
+     *
+     * **Note**: The pre-filled input format (such as YYYY/MM/DD) is independent of this property and is dynamically configured according to the user's current device locale.
+     */
+    locale: "en" | "ja" | null;
     /**
      * The locale used for date formatting.
      * If not provided, the browser's default locale will be used. It is usually not necessary to specify it explicitly.
      *
      * @private
      */
-    locale: string | null;
+    inputLocale: string | null;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
     private _currentSelection;
+    private _preCompositionValue;
+    private _inputValue;
+    private _monthDigitIndex;
+    private _dayDigitIndex;
+    private _yearDigitIndex;
     private _autoUpdateController;
     private _dateInputElement;
     private _calendarElement;
@@ -98,7 +112,19 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _formatDateForUI;
     private _getPlaceholderAll;
     private _getDateItemInSelection;
-    private get _value();
+    private get _dateValue();
+    /**
+     * 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.
+     */
+    private get _displayValue();
     private get _min();
     private get _max();
     private get _viewDate();
@@ -111,6 +137,10 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _handleFocusOut;
     private _handleChange;
     private _handleMouseUp;
+    private _handleCompositionStart;
+    private _handleCompositionEnd;
+    private _applyDigitToPart;
+    private _applyDigits;
     private _handleKeyDown;
     private _handleBeforeInput;
     private _handleSelect;
@@ -118,6 +148,11 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _handlePointerUp;
     private _handleCalendarKeyDown;
     private _handleToggle;
+    /**
+     * Returns true if all date parts (year/month/day) in the input are filled with
+     * digits and no placeholder text (YYYY, MM, DD) remains.
+     */
+    private _isInputComplete;
     private _updateValue;
     private _updateInputSelection;
     private _updateSelection;

package/dist/cjs/components/drawer/daikin-drawer.cjs

@@ -144,7 +144,7 @@ exports.DaikinDrawer = class DaikinDrawer extends ddsElement.DDSElement {
   render() {
     return lit.html`<div
         class=${cvaBackDrop({ open: this.open, placement: this.placement })}
-        ?inert=${!this.open}
+        .inert=${!this.open}
         aria-hidden=${ifDefined_js.ifDefined(!this.open ? "true" : void 0)}
         @click=${this._handleBackdropClick}
       >