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

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

@@ -10,6 +10,8 @@ const ddsFormElement = require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const clickOutside = require("../../controllers/click-outside.cjs");
+const customReadonly = require("../../controllers/custom-readonly.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const isSimpleKey = require("../../utils/is-simple-key.cjs");
@@ -27,16 +29,12 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaButton = classVarianceAuthority.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",
@@ -49,13 +47,7 @@ const cvaButton = classVarianceAuthority.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: {
@@ -81,8 +73,41 @@ const cvaButton = classVarianceAuthority.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 = {
@@ -104,6 +129,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.readonly = false;
     this.required = false;
     this.error = false;
     this.open = false;
@@ -113,6 +139,26 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     this._label = null;
     this._initialUpdateCompleted = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
+    this._readonlyController = new customReadonly.CustomReadonlyController(this, {
+      isReadonly: () => this.readonly,
+      isDisabled: () => this.disabled,
+      blockedKeys: [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "Enter",
+        " "
+      ]
+    });
+    this._clickOutsideController = new clickOutside.ClickOutsideController(
+      this,
+      this._onClickOutside
+    );
     this._willBeFocusedByPress = false;
     this._lastFocusedItem = null;
     this._dropdownRef = ref_js.createRef();
@@ -126,6 +172,23 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       }
     );
   }
+  get _isMenuOpen() {
+    return this.open && !this.disabled && !this.readonly;
+  }
+  _syncSingleOpenState() {
+    const root = this.getRootNode();
+    const activeDropdown = exports.DaikinDropdown._activeOpenByRoot.get(root);
+    if (this._isMenuOpen) {
+      if (activeDropdown && activeDropdown !== this && activeDropdown.open) {
+        activeDropdown.open = false;
+      }
+      exports.DaikinDropdown._activeOpenByRoot.set(root, this);
+      return;
+    }
+    if (activeDropdown === this) {
+      exports.DaikinDropdown._activeOpenByRoot.delete(root);
+    }
+  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -184,17 +247,29 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
    * @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.
@@ -212,6 +287,15 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     }
   }
   _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();
@@ -278,7 +362,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     }
   }
   _handlePointerUp() {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     this._willBeFocusedByPress = false;
@@ -288,7 +372,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       event.stopPropagation();
-      if (this.disabled) {
+      if (this.disabled || this.readonly) {
         return;
       }
       this.open = !this.open;
@@ -319,22 +403,24 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     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 lit.html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref_js.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" : lit.nothing}
+        aria-controls=${this._isMenuOpen ? "dropdown-items" : lit.nothing}
         aria-required=${this.required}
         aria-haspopup="listbox"
         @pointerup=${this._handlePointerUp}
@@ -342,15 +428,20 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
         @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()}
@@ -368,8 +459,10 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     // 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>`;
   }
   /**
@@ -390,6 +483,9 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       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) {
@@ -401,12 +497,18 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
   }
   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();
@@ -414,7 +516,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     }
     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",
@@ -433,6 +535,10 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       this._updateItemsSelectable();
     }
   }
+  disconnectedCallback() {
+    this._syncSingleOpenState();
+    super.disconnectedCallback();
+  }
   /**
    * This method is used by `daikin-input-group` to reflect it's attributes to this component.
    * @private
@@ -440,11 +546,13 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
   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;
   }
 };
+exports.DaikinDropdown._activeOpenByRoot = /* @__PURE__ */ new WeakMap();
 exports.DaikinDropdown.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
@@ -453,6 +561,27 @@ exports.DaikinDropdown.styles = lit.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%;
     }
@@ -463,6 +592,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "required", 2);

package/dist/cjs/components/dropdown/daikin-dropdown.d.cts

@@ -19,6 +19,7 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * @fires toggle - A custom event emitted when the dropdown menu opens or closes.
  *
  * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *
@@ -36,6 +37,7 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * ```
  */
 export declare class DaikinDropdown extends DDSFormElement {
+    private static _activeOpenByRoot;
     static readonly styles: import('lit').CSSResult;
     /**
      * Placeholder text of the dropdown.
@@ -45,6 +47,10 @@ export declare class DaikinDropdown extends DDSFormElement {
      * Whether the dropdown is disabled.
      */
     disabled: boolean;
+    /**
+     * Whether the dropdown is readonly.
+     */
+    readonly: boolean;
     /**
      * Whether the dropdown is required.
      */
@@ -84,6 +90,8 @@ export declare class DaikinDropdown extends DDSFormElement {
     private get _selectionLabels();
     private _initialUpdateCompleted;
     private _autoUpdateController;
+    private readonly _readonlyController;
+    private _clickOutsideController;
     private _willBeFocusedByPress;
     /**
      * Last focused dropdown item.
@@ -91,6 +99,8 @@ export declare class DaikinDropdown extends DDSFormElement {
      */
     private _lastFocusedItem;
     private _dropdownRef;
+    private get _isMenuOpen();
+    private _syncSingleOpenState;
     private _searchItem;
     private _moveFocus;
     private _updateFormValue;
@@ -106,6 +116,8 @@ export declare class DaikinDropdown extends DDSFormElement {
      */
     private _handleSelectOption;
     private _handleFocusOut;
+    private _closeDropdownByBlur;
+    private _onClickOutside;
     /**
      * Removes the last selected option.
      *
@@ -141,6 +153,7 @@ export declare class DaikinDropdown extends DDSFormElement {
     focus(options?: FocusOptions): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.
      * @private

package/dist/cjs/components/dropdown-item/daikin-dropdown-item.cjs

@@ -27,8 +27,8 @@ const cvaOption = classVarianceAuthority.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",
@@ -48,7 +48,7 @@ const cvaOption = classVarianceAuthority.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"
         ]
       },
@@ -64,8 +64,13 @@ const cvaOption = classVarianceAuthority.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)"
+        ]
       }
     }
   }
@@ -122,7 +127,7 @@ exports.DaikinDropdownItem = class DaikinDropdownItem extends ddsElement.DDSElem
           @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}
@@ -140,7 +145,9 @@ exports.DaikinDropdownItem = class DaikinDropdownItem extends ddsElement.DDSElem
           ?disabled=${this.disabled}
           @click=${this._handleClick}
         >
-          <slot></slot>
+          <span class="mt-[0.09375rem] mb-[0.09375rem]">
+            <slot></slot>
+          </span>
         </button>`;
   }
   /**

package/dist/cjs/components/icon-button/daikin-icon-button.cjs

@@ -160,6 +160,7 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
     if (this.type === "link") {
       const linkDisabled = this.disabled || this.href == null;
       return lit.html`<a
+        part="icon-button"
         class=${iconButtonCN}
         href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
         tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
@@ -174,6 +175,7 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
     }
     return lit.html`
       <button
+        part="icon-button"
         class=${iconButtonCN}
         type=${this.type}
         tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}

package/dist/cjs/components/icon-button/daikin-icon-button.d.cts

@@ -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/cjs/components/index.cjs

@@ -315,13 +315,13 @@ Object.defineProperty(exports, "DaikinTimePicker", {
 exports.calcDigitInput = daikinTimePicker.calcDigitInput;
 exports.formatPartsForUI = daikinTimePicker.formatPartsForUI;
 exports.formatTimeForUI = daikinTimePicker.formatTimeForUI;
-exports.from24HourFormat = daikinTimePicker.from24HourFormat;
 exports.getTimeItemInSelection = daikinTimePicker.getTimeItemInSelection;
 exports.isTimeOutOfRange = daikinTimePicker.isTimeOutOfRange;
 exports.isValidValueTime = daikinTimePicker.isValidValueTime;
 exports.parsePartsFromUIValue = daikinTimePicker.parsePartsFromUIValue;
-exports.to24HourFormat = daikinTimePicker.to24HourFormat;
+exports.timeValueToUI = daikinTimePicker.timeValueToUI;
 exports.tryParseTimeFromUIValue = daikinTimePicker.tryParseTimeFromUIValue;
+exports.uiToTimeValue = daikinTimePicker.uiToTimeValue;
 Object.defineProperty(exports, "DaikinToastNotification", {
   enumerable: true,
   get: () => daikinToastNotification.DaikinToastNotification