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

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

@@ -8,6 +8,8 @@ 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 { ClickOutsideController } from "../../controllers/click-outside.js";
+import { CustomReadonlyController } from "../../controllers/custom-readonly.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
@@ -25,16 +27,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaButton = cva(
   [
     "flex",
-    "justify-between",
     "items-center",
-    "gap-2",
+    "gap-(--dds-gap-10)",
     "w-full",
-    "h-full",
-    "min-h-12",
+    "h-(--dds-input-height)",
     "bg-ddt-color-common-background-default",
-    "py-3",
-    "pl-4",
-    "pr-3",
+    "px-(--dds-padding-30)",
     "rounded-sm",
     "overflow-hidden",
     "text-left",
@@ -47,13 +45,7 @@ const cvaButton = cva(
     "focus-visible:-outline-offset-2",
     "enabled:outline-(--color-base)",
     "disabled:text-ddt-color-common-disabled",
-    "disabled:outline-ddt-color-common-disabled",
-    "after:icon-[daikin--chevron-down]",
-    "after:size-6",
-    "after:flex-none",
-    "after:ml-auto",
-    "enabled:after:text-ddt-color-common-text-primary",
-    "disabled:after:text-ddt-color-common-disabled"
+    "disabled:outline-ddt-color-common-disabled"
   ],
   {
     variants: {
@@ -79,8 +71,41 @@ const cvaButton = cva(
       placeholder: {
         false: ["text-ddt-color-common-text-primary"],
         true: ["text-ddt-color-common-text-secondary"]
+      },
+      readonly: {
+        false: [],
+        true: ["cursor-default"]
+      },
+      disabled: {
+        false: [],
+        true: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        class: [
+          "after:icon-[daikin--chevron-down]",
+          "after:size-(--dds-icon)",
+          "after:flex-none",
+          "after:ml-auto",
+          "enabled:after:text-ddt-color-common-text-primary",
+          "disabled:after:text-ddt-color-common-disabled"
+        ]
+      },
+      {
+        readonly: true,
+        disabled: true,
+        class: [
+          "after:icon-[daikin--chevron-down]",
+          "after:size-(--dds-icon)",
+          "after:flex-none",
+          "after:ml-auto",
+          "enabled:after:text-ddt-color-common-text-primary",
+          "disabled:after:text-ddt-color-common-disabled"
+        ]
+      }
+    ]
   }
 );
 const floatingPositionOptions = {
@@ -102,6 +127,7 @@ let DaikinDropdown = class extends DDSFormElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.readonly = false;
     this.required = false;
     this.error = false;
     this.open = false;
@@ -111,6 +137,26 @@ let DaikinDropdown = class extends DDSFormElement {
     this._label = null;
     this._initialUpdateCompleted = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+    this._readonlyController = new CustomReadonlyController(this, {
+      isReadonly: () => this.readonly,
+      isDisabled: () => this.disabled,
+      blockedKeys: [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "Enter",
+        " "
+      ]
+    });
+    this._clickOutsideController = new ClickOutsideController(
+      this,
+      this._onClickOutside
+    );
     this._willBeFocusedByPress = false;
     this._lastFocusedItem = null;
     this._dropdownRef = createRef();
@@ -124,6 +170,23 @@ let DaikinDropdown = class extends DDSFormElement {
       }
     );
   }
+  get _isMenuOpen() {
+    return this.open && !this.disabled && !this.readonly;
+  }
+  _syncSingleOpenState() {
+    const root = this.getRootNode();
+    const activeDropdown = DaikinDropdown._activeOpenByRoot.get(root);
+    if (this._isMenuOpen) {
+      if (activeDropdown && activeDropdown !== this && activeDropdown.open) {
+        activeDropdown.open = false;
+      }
+      DaikinDropdown._activeOpenByRoot.set(root, this);
+      return;
+    }
+    if (activeDropdown === this) {
+      DaikinDropdown._activeOpenByRoot.delete(root);
+    }
+  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -182,17 +245,29 @@ let DaikinDropdown = class extends DDSFormElement {
    * @param value The value of selected option.
    */
   _handleSelectOption(value) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.value = value;
     this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
     this.dispatchEvent(new Event("change"));
   }
   _handleFocusOut(event) {
-    if (!event.relatedTarget && !this._willBeFocusedByPress) {
-      if (!this.multiple && this._lastFocusedItem) {
-        this._handleSelectOption(this._lastFocusedItem.value);
-      }
-      this.open = false;
+    const relatedTarget = event.relatedTarget;
+    const movedFocusWithinSelf = !!relatedTarget && (this.contains(relatedTarget) || this.renderRoot.contains(relatedTarget));
+    if (movedFocusWithinSelf || this._willBeFocusedByPress) {
+      return;
+    }
+    this._closeDropdownByBlur();
+  }
+  _closeDropdownByBlur() {
+    this.open = false;
+  }
+  _onClickOutside() {
+    if (!this.open || this.disabled || this._willBeFocusedByPress) {
+      return;
     }
+    this._closeDropdownByBlur();
   }
   /**
    * Removes the last selected option.
@@ -210,6 +285,15 @@ let DaikinDropdown = class extends DDSFormElement {
     }
   }
   _handleKeyDown(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    if (event.key === "Tab" && event.shiftKey && this.open) {
+      event.preventDefault();
+      this._closeDropdownByBlur();
+      this.focus();
+      return;
+    }
     if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -276,7 +360,7 @@ let DaikinDropdown = class extends DDSFormElement {
     }
   }
   _handlePointerUp() {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     this._willBeFocusedByPress = false;
@@ -286,7 +370,7 @@ let DaikinDropdown = class extends DDSFormElement {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       event.stopPropagation();
-      if (this.disabled) {
+      if (this.disabled || this.readonly) {
         return;
       }
       this.open = !this.open;
@@ -317,22 +401,24 @@ let DaikinDropdown = class extends DDSFormElement {
     this._updateItemsSelectable();
   }
   render() {
-    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : this.value ? `Selected: ${this.value}` : "Open dropdown";
+    const fallbackLabel = this._isMenuOpen ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : this.value ? `Selected: ${this.value}` : "Open dropdown";
     return html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref(this._dropdownRef)}
         id="dropdown-button"
         type="button"
         class=${cvaButton({
-      open: this.open,
+      open: this._isMenuOpen,
       error: this.error,
+      disabled: this.disabled,
+      readonly: this.readonly,
       placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
         aria-label=${`${this._label ?? ""} ${fallbackLabel}`}
-        aria-expanded=${this.open && !this.disabled}
+        aria-expanded=${this._isMenuOpen}
         aria-disabled=${this.disabled}
-        aria-controls=${this.open ? "dropdown-items" : nothing}
+        aria-controls=${this._isMenuOpen ? "dropdown-items" : nothing}
         aria-required=${this.required}
         aria-haspopup="listbox"
         @pointerup=${this._handlePointerUp}
@@ -340,15 +426,20 @@ let DaikinDropdown = class extends DDSFormElement {
         @keydown=${this._handleButtonKeyDown}
         ${this._autoUpdateController.refReference()}
       >
-        <span class="truncate">
+        <slot
+          name="left-icon"
+          class="slotted:shrink-0 size-(--dds-icon) slotted:size-(--dds-icon)"
+        ></slot>
+        <span class="truncate pl-(--dds-space-100)">
           ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? this.selectedOptions.length === 1 ? `one item selected` : `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
         </span>
       </button>
       <div
         id="dropdown-items"
         role="listbox"
-        popover="manual"
+        .popover=${"manual"}
         class="flex flex-col overflow-hidden floating-unready:hidden absolute left-(--floating-x,0) top-(--floating-y,0) min-w-(--floating-width) max-h-50 border border-ddt-color-divider rounded-sm max-w-min"
+        tabindex="-1"
         aria-labelledby="dropdown-button"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
@@ -366,8 +457,10 @@ let DaikinDropdown = 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._isMenuOpen
     )}
+      ${// Ensure open dropdown is closed even when focusout/relatedTarget is unreliable across browsers.
+    this._clickOutsideController.directive(this._isMenuOpen)}
     </div>`;
   }
   /**
@@ -388,6 +481,9 @@ let DaikinDropdown = class extends DDSFormElement {
       this._initialUpdateCompleted = true;
       return;
     }
+    if ((changedProperties.has("open") || changedProperties.has("readonly")) && this.readonly && this.open) {
+      this.open = false;
+    }
     const hasChangedValue = changedProperties.has("value");
     const hasChangedSelectedOptions = changedProperties.has("selectedOptions");
     if (hasChangedValue && !hasChangedSelectedOptions) {
@@ -399,12 +495,18 @@ let DaikinDropdown = class extends DDSFormElement {
   }
   updated(changedProperties) {
     var _a;
+    this._readonlyController.setTarget(
+      this._button
+    );
+    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
+      this._syncSingleOpenState();
+    }
     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._isMenuOpen
       );
       if (changedProperties.get("open") && !this.open && !this.disabled) {
         this.focus();
@@ -412,7 +514,7 @@ let DaikinDropdown = 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",
@@ -431,6 +533,10 @@ let DaikinDropdown = class extends DDSFormElement {
       this._updateItemsSelectable();
     }
   }
+  disconnectedCallback() {
+    this._syncSingleOpenState();
+    super.disconnectedCallback();
+  }
   /**
    * This method is used by `daikin-input-group` to reflect it's attributes to this component.
    * @private
@@ -438,11 +544,13 @@ let DaikinDropdown = 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;
   }
 };
+DaikinDropdown._activeOpenByRoot = /* @__PURE__ */ new WeakMap();
 DaikinDropdown.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
@@ -451,6 +559,27 @@ DaikinDropdown.styles = css`
       width: 100%;
     }
 
+    :host([readonly]:not([disabled])) button {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) button:hover,
+    :host([readonly]:not([disabled])) button:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) button:focus-visible {
+      --color-base: var(--dds-color-common-border-focus);
+    }
+
+    :host([readonly][error]:not([disabled])) button,
+    :host([readonly][error]:not([disabled])) button:hover,
+    :host([readonly][error]:not([disabled])) button:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
+
     ::slotted {
       width: 100%;
     }
@@ -461,6 +590,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinDropdown.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinDropdown.prototype, "required", 2);

package/dist/es/components/dropdown-item/daikin-dropdown-item.js

@@ -25,8 +25,8 @@ const cvaOption = cva(
     "items-center",
     "gap-1",
     "size-full",
-    "min-h-12",
     "text-left",
+    "text-(length:--dds-font-size-label-text)",
     "relative",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
@@ -46,7 +46,7 @@ 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",
+          "after:size-(--dds-icon)",
           "after:flex-none"
         ]
       },
@@ -62,8 +62,13 @@ const cvaOption = cva(
         ]
       },
       multiple: {
-        false: ["justify-between", "p-3"],
-        true: ["after:hidden"]
+        false: ["justify-between", "p-(--dds-padding-30)"],
+        true: [
+          "after:hidden",
+          "py-(--dds-padding-20)",
+          "pl-(--dds-padding-20)",
+          "pr-(--dds-padding-30)"
+        ]
       }
     }
   }
@@ -120,7 +125,7 @@ let DaikinDropdownItem = class extends DDSElement {
           @mousedown=${this._handleMousedown}
         >
           <daikin-checkbox
-            class="size-full part-label:p-2 part-label:cursor-pointer"
+            class="size-full part-label:cursor-pointer"
             check-state=${this.selected ? "checked" : "unchecked"}
             tabindex="-1"
             ?disabled=${this.disabled}
@@ -138,7 +143,9 @@ let DaikinDropdownItem = class extends DDSElement {
           ?disabled=${this.disabled}
           @click=${this._handleClick}
         >
-          <slot></slot>
+          <span class="mt-[0.09375rem] mb-[0.09375rem]">
+            <slot></slot>
+          </span>
         </button>`;
   }
   /**

package/dist/es/components/icon-button/daikin-icon-button.d.ts

@@ -22,6 +22,8 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  *
  * @slot - A slot for an icon. Place a daikin-icon element or something similar.
  *
+ * @csspart icon-button - CSS styles applied to the `icon-button` part target the internal `<button>` element.
+ *
  * @example
  *
  * ```js

package/dist/es/components/icon-button/daikin-icon-button.js

@@ -158,6 +158,7 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
     if (this.type === "link") {
       const linkDisabled = this.disabled || this.href == null;
       return html`<a
+        part="icon-button"
         class=${iconButtonCN}
         href=${ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
         tabindex=${ifDefined(this.getBackingProperty("buttonTabIndex"))}
@@ -172,6 +173,7 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
     }
     return html`
       <button
+        part="icon-button"
         class=${iconButtonCN}
         type=${this.type}
         tabindex=${ifDefined(this.getBackingProperty("buttonTabIndex"))}

package/dist/es/components/index.js

@@ -57,7 +57,7 @@ import { DaikinTag } from "./tag/daikin-tag.js";
 import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
 import { DaikinTextMaskedField } from "./text-masked-field/daikin-text-masked-field.js";
-import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, from24HourFormat, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, to24HourFormat, tryParseTimeFromUIValue } from "./time-picker/daikin-time-picker.js";
+import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, timeValueToUI, tryParseTimeFromUIValue, uiToTimeValue } from "./time-picker/daikin-time-picker.js";
 import { DaikinToastNotification } from "./toast-notification/daikin-toast-notification.js";
 import { DaikinToastNotificationManager } from "./toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
@@ -144,12 +144,12 @@ export {
   defaultFilterFn,
   formatPartsForUI,
   formatTimeForUI,
-  from24HourFormat,
   getTimeItemInSelection,
   iconList,
   isTimeOutOfRange,
   isValidValueTime,
   parsePartsFromUIValue,
-  to24HourFormat,
-  tryParseTimeFromUIValue
+  timeValueToUI,
+  tryParseTimeFromUIValue,
+  uiToTimeValue
 };

package/dist/es/components/input-group/daikin-input-group.d.ts

@@ -139,6 +139,11 @@ import { DDSElement } from "../../base/index.js";
  */
 export declare class DaikinInputGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * Orientation of the input group.
+     * Possible values are `"vertical"` and `"horizontal"`.
+     */
+    orientation: "vertical" | "horizontal";
     /**
      * Label text displayed at the top of the field.
      */
@@ -167,6 +172,11 @@ export declare class DaikinInputGroup extends DDSElement {
      * Reflected in `disabled` attribute of the input control in the slot.
      */
     disabled: boolean;
+    /**
+     * Whether the field is readonly.
+     * Reflected in `readonly` attribute of the input control in the slot.
+     */
+    readonly: boolean;
     /**
      * The maximum number of characters that can be input into the text area.
      * If set, a counter will be displayed at the bottom of the text area.