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

package/dist/es/components/combobox/daikin-combobox.js

@@ -31,11 +31,9 @@ const cvaInput = cva(
     "gap-2",
     "w-full",
     "h-full",
-    "min-h-12",
+    "min-h-(--dds-input-height)",
     "bg-ddt-color-common-background-default",
-    "py-3",
-    "pl-4",
-    "pr-16",
+    "pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)*2+var(--dds-icon)*2)]",
     "rounded-sm",
     "overflow-hidden",
     "text-left",
@@ -52,6 +50,7 @@ const cvaInput = cva(
     "enabled:outline-(--color-base)",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
+    "disabled:placeholder:text-ddt-color-common-disabled",
     "enabled:after:text-ddt-color-common-text-primary",
     "disabled:after:text-ddt-color-common-disabled",
     "enabled:hover:bg-ddt-color-common-surface-hover",
@@ -66,6 +65,12 @@ const cvaInput = cva(
           "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
         ],
         true: ["[--color-base:var(--dds-color-common-danger-default)]"]
+      },
+      hasLeftIcon: {
+        false: ["pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]"],
+        true: [
+          "pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]"
+        ]
       }
     }
   }
@@ -76,9 +81,11 @@ const cvaOption = cva(
     "items-center",
     "gap-1",
     "size-full",
-    "min-h-12",
-    "p-3",
+    "min-h-(--dds-input-height)",
+    "py-[calc(var(--dds-padding-30)+0.09375rem)]",
+    "px-(--dds-padding-30)",
     "text-left",
+    "text-(length:--dds-font-size-label-text)",
     "relative",
     "data-focus:outline-solid",
     "data-focus:outline-2",
@@ -98,10 +105,10 @@ const cvaOption = cva(
           "hover:[--color-primary:var(--dds-color-common-surface-selected-hover)]",
           "active:[--color-primary:var(--dds-color-common-surface-selected-press)]",
           "after:icon-[daikin--dropdown-check]",
-          "after:size-6",
-          "pr-10",
+          "after:size-(--dds-icon)",
+          "pr-[calc((var(--dds-padding-10))+var(--dds-icon)+var(--dds-padding-30))]",
           "after:absolute",
-          "after:right-3",
+          "after:right-(--dds-padding-30)",
           "after:top-1/2",
           "after:-translate-y-1/2"
         ]
@@ -123,7 +130,7 @@ const cvaOption = cva(
 const cvaArrow = cva(
   [
     "icon-[daikin--chevron-down]",
-    "size-6",
+    "size-(--dds-icon)",
     "shrink-0",
     "z-10",
     "pointer-events-auto"
@@ -185,17 +192,22 @@ let DaikinCombobox = class extends DDSFormElement {
     this.required = false;
     this.error = false;
     this.open = false;
+    this.readonly = false;
     this.items = [];
     this._viewItems = [];
     this._currentFocusItemIndex = null;
     this.filter = defaultFilterFn;
     this._label = null;
+    this._hasLeftIcon = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._clickOutsideController = new ClickOutsideController(
       this,
       this._onClickOutside
     );
   }
+  get _isPopupOpen() {
+    return this.open && !this.disabled && !this.readonly;
+  }
   _onClickOutside() {
     this._closePopup();
   }
@@ -243,6 +255,10 @@ let DaikinCombobox = class extends DDSFormElement {
     this.open = false;
     this._currentFocusItemIndex = null;
   }
+  _handleLeftIconSlotChange(event) {
+    const slot = event.target;
+    this._hasLeftIcon = slot.assignedElements().length > 0;
+  }
   _handleFocusOut(event) {
     if (this.open && // ignore if focusing within the component, especially to the menu items
     // or menu item will be destroyed before click event is handled
@@ -251,7 +267,7 @@ let DaikinCombobox = class extends DDSFormElement {
     }
   }
   _handleClick() {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     this._autoUpdateController.setTriggerContext({
@@ -270,6 +286,9 @@ let DaikinCombobox = class extends DDSFormElement {
     this._handleClick();
   }
   _handleClickItem(item) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     const value = getItemValue(item);
     this.value = value;
     this.open = false;
@@ -287,6 +306,9 @@ let DaikinCombobox = class extends DDSFormElement {
     );
   }
   _handleKeyDown(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -370,6 +392,9 @@ let DaikinCombobox = class extends DDSFormElement {
    * Clears the current value and triggers form value update.
    */
   _handleClearClick() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.value = "";
     this.dispatchEvent(
       new Event("input", {
@@ -395,6 +420,9 @@ let DaikinCombobox = class extends DDSFormElement {
    * Updates the value, applies filtering, and opens dropdown if matches are found.
    */
   _handleInput(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.value = event.target.value;
     this._synchronizeShowItems("filtered");
     this.open = this._viewItems.length > 0;
@@ -404,6 +432,9 @@ let DaikinCombobox = class extends DDSFormElement {
    * Dispatches a custom change event when the input value changes and loses focus.
    */
   _handleChange() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.dispatchEvent(
       new Event("change", {
         bubbles: true
@@ -416,19 +447,30 @@ let DaikinCombobox = class extends DDSFormElement {
         >${`${this._viewItems.length} available results`}</span
       >
       <div class="w-full relative">
+        <div
+          class="absolute left-(--dds-padding-30) top-1/2 -translate-y-1/2 flex items-center pointer-events-none z-10 ${this.disabled ? "text-ddt-color-common-disabled" : "text-ddt-color-common-text-primary"}"
+        >
+          <slot
+            name="left-icon"
+            class="slotted:size-(--dds-icon)"
+            @slotchange=${this._handleLeftIconSlotChange}
+          ></slot>
+        </div>
         <input
           class=${cvaInput({
-      error: this.error
+      error: this.error,
+      hasLeftIcon: this._hasLeftIcon
     })}
           role="combobox"
           name=${ifDefined(this.getBackingProperty("name"))}
           placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
           .value=${this.value}
           ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
           aria-label=${ifDefined(this._label)}
-          aria-expanded=${this.open && !this.disabled}
+          aria-expanded=${this._isPopupOpen}
           aria-disabled=${this.disabled}
-          aria-controls=${this.open ? "combobox-items" : nothing}
+          aria-controls=${this._isPopupOpen ? "combobox-items" : nothing}
           aria-autocomplete="list"
           aria-required=${this.required}
           aria-haspopup="listbox"
@@ -440,33 +482,36 @@ let DaikinCombobox = class extends DDSFormElement {
           ${this._autoUpdateController.refReference()}
         />
         <div
-          class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
+          class="absolute right-(--dds-padding-30) top-1/2 -translate-y-1/2 flex items-center gap-1"
         >
-          ${!!this.value && !!this.value.length ? html`<daikin-icon-button
-                class="size-6 shrink-0"
+          ${!!this.value && !!this.value.length && !this.readonly ? html`<daikin-icon-button
+                class="size-(--dds-icon) shrink-0 part-icon-button:p-(--dds-padding-10)!"
                 color="neutral"
                 variant="ghost"
-                ?disabled=${this.disabled}
+                ?disabled=${this.disabled || this.readonly}
                 button-aria-label="Clear"
                 button-tabindex="-1"
                 @click=${this._handleClearClick}
                 @focusout=${this._handleFocusOut}
               >
-                <span class="icon-[daikin--close] size-6"></span>
+                <span class="icon-[daikin--close] size-(--dds-icon)"></span>
               </daikin-icon-button>` : nothing}
-          <span
-            class=${cvaArrow({ open: this.open, disabled: this.disabled })}
-            role="img"
-            aria-label=${this.open ? "Close" : "Open"}
-            @mousedown=${this._handleArrowClick}
-            @keydown=${this._handleKeyDown}
-          >
-          </span>
+          ${this.readonly && !this.disabled ? nothing : html`<span
+                class=${cvaArrow({
+      open: this._isPopupOpen,
+      disabled: this.disabled
+    })}
+                role="img"
+                aria-label=${this._isPopupOpen ? "Close" : "Open"}
+                @mousedown=${this._handleArrowClick}
+                @keydown=${this._handleKeyDown}
+              >
+              </span>`}
         </div>
       </div>
       <div
         id="combobox-items"
-        popover="manual"
+        .popover=${"manual"}
         tabindex="-1"
         class="flex flex-col overflow-hidden rounded-sm border border-ddt-color-divider floating-unready:hidden absolute left-(--floating-x,0) top-(--floating-y,0) min-w-(--floating-width) max-h-50 max-w-min"
         @floating-ready=${this._handleFloatingReady}
@@ -506,10 +551,10 @@ let DaikinCombobox = class extends DDSFormElement {
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     this._autoUpdateController.directive(
       floatingPositionOptions,
-      this.open && !this.disabled
+      this._isPopupOpen
     )}
       ${// Listen to click outside only when the combobox is open.
-    this._clickOutsideController.directive(this.open && !this.disabled)}
+    this._clickOutsideController.directive(this._isPopupOpen)}
     </div>`;
   }
   /**
@@ -520,6 +565,11 @@ let DaikinCombobox = class extends DDSFormElement {
     var _a;
     (_a = this._input) == null ? void 0 : _a.focus(options);
   }
+  willUpdate(changedProperties) {
+    if ((changedProperties.has("open") || changedProperties.has("readonly")) && this.readonly && this.open) {
+      this.open = false;
+    }
+  }
   updated(changedProperties) {
     var _a;
     if (changedProperties.has("items")) {
@@ -528,9 +578,9 @@ let DaikinCombobox = class extends DDSFormElement {
     if (changedProperties.has("value")) {
       this._updateFormValue();
     }
-    if (changedProperties.has("open") || changedProperties.has("disabled")) {
+    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
       (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
-        this.open && !this.disabled
+        this._isPopupOpen
       );
       if (changedProperties.get("open") && !this.open && !this.disabled) {
         this.focus();
@@ -538,7 +588,7 @@ let DaikinCombobox = class extends DDSFormElement {
     }
     if (changedProperties.has("open")) {
       const wasOpen = changedProperties.get("open");
-      if (wasOpen !== void 0) {
+      if (wasOpen !== void 0 && wasOpen !== this.open) {
         this.dispatchEvent(
           new ToggleEvent("toggle", {
             oldState: wasOpen ? "open" : "closed",
@@ -559,6 +609,7 @@ let DaikinCombobox = class extends DDSFormElement {
   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;
@@ -572,6 +623,27 @@ DaikinCombobox.styles = css`
       width: 100%;
     }
 
+    :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);
+    }
+
     ::slotted {
       width: 100%;
     }
@@ -591,6 +663,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCombobox.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCombobox.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], DaikinCombobox.prototype, "items", 2);
@@ -609,6 +684,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DaikinCombobox.prototype, "_label", 2);
+__decorateClass([
+  state()
+], DaikinCombobox.prototype, "_hasLeftIcon", 2);
 DaikinCombobox = __decorateClass([
   ddsElement("daikin-combobox")
 ], DaikinCombobox);

package/dist/es/components/date-picker/daikin-date-picker.d.ts

@@ -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;