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

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

@@ -1,419 +1,384 @@
-import { flip, offset, size } from "@floating-ui/dom";
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
-import { queryAssignedElements, query, state } from "lit/decorators.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 { 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";
-import "../dropdown-item/daikin-dropdown-item.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 cvaButton = cva(
-  [
-    "flex",
-    "items-center",
-    "gap-(--dds-gap-10)",
-    "w-full",
-    "h-(--dds-input-height)",
-    "bg-ddt-color-common-background-default",
-    "px-(--dds-padding-30)",
-    "rounded-sm",
-    "overflow-hidden",
-    "text-left",
-    "relative",
-    "outline-solid",
-    "outline-1",
-    "-outline-offset-1",
-    "natural-break",
-    "focus-visible:outline-2",
-    "focus-visible:-outline-offset-2",
-    "enabled:outline-(--color-base)",
-    "disabled:text-ddt-color-common-disabled",
-    "disabled:outline-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      open: {
-        false: [
-          "enabled:hover:bg-ddt-color-common-surface-hover",
-          "enabled:active:bg-ddt-color-common-surface-press"
-        ],
-        true: [
-          "enabled:bg-ddt-color-common-surface-press",
-          "after:scale-y-[-1]"
-        ]
-      },
-      error: {
-        false: [
-          "[--color-base:var(--dds-color-common-neutral-default)]",
-          "hover:[--color-base:var(--dds-color-common-neutral-hover)]",
-          "active:[--color-base:var(--dds-color-common-neutral-press)]",
-          "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["[--color-base:var(--dds-color-common-danger-default)]"]
-      },
-      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 = {
-  placement: "bottom",
-  middleware: [
-    flip({ fallbackStrategy: "initialPlacement" }),
-    offset({ mainAxis: 0 }),
-    size({
-      apply({ rects, elements }) {
-        elements.floating.style.setProperty(
-          "--floating-width",
-          `${rects.reference.width}px`
-        );
-      }
-    })
-  ]
+import "../dropdown-item/index.js";
+import { CustomReadonlyController } from "../../controllers/custom-readonly.js";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { query, queryAssignedElements, state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { flip, offset, size } from "@floating-ui/dom";
+//#region src/components/dropdown/daikin-dropdown.ts
+var _DaikinDropdown;
+var cvaButton = cva([
+	"flex",
+	"items-center",
+	"gap-(--dds-gap-10)",
+	"w-full",
+	"h-(--dds-input-height)",
+	"bg-ddt-color-common-background-default",
+	"px-(--dds-padding-30)",
+	"rounded-sm",
+	"overflow-hidden",
+	"text-left",
+	"relative",
+	"outline-solid",
+	"outline-1",
+	"-outline-offset-1",
+	"natural-break",
+	"focus-visible:outline-2",
+	"focus-visible:-outline-offset-2",
+	"enabled:outline-(--color-base)",
+	"disabled:text-ddt-color-common-disabled",
+	"disabled:outline-ddt-color-common-disabled"
+], {
+	variants: {
+		open: {
+			false: ["enabled:hover:bg-ddt-color-common-surface-hover", "enabled:active:bg-ddt-color-common-surface-press"],
+			true: ["enabled:bg-ddt-color-common-surface-press", "after:scale-y-[-1]"]
+		},
+		error: {
+			false: [
+				"[--color-base:var(--dds-color-common-neutral-default)]",
+				"hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+				"active:[--color-base:var(--dds-color-common-neutral-press)]",
+				"focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
+			],
+			true: ["[--color-base:var(--dds-color-common-danger-default)]"]
+		},
+		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"
+		]
+	}]
+});
+var floatingPositionOptions = {
+	placement: "bottom",
+	middleware: [
+		flip({ fallbackStrategy: "initialPlacement" }),
+		offset({ mainAxis: 0 }),
+		size({ apply({ rects, elements }) {
+			elements.floating.style.setProperty("--floating-width", `${rects.reference.width}px`);
+		} })
+	]
 };
-let DaikinDropdown = class extends DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.readonly = false;
-    this.required = false;
-    this.error = false;
-    this.open = false;
-    this.multiple = false;
-    this.selectedOptions = [];
-    this.maxLabels = null;
-    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();
-  }
-  get _selectionLabels() {
-    const items = this._items;
-    return this.selectedOptions.map(
-      (value) => {
-        var _a;
-        return ((_a = items.find((item) => item.value === value)) == null ? void 0 : _a.textContent) ?? "";
-      }
-    );
-  }
-  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) => {
-        var _a;
-        return !item.disabled && ((_a = item.textContent) == null ? void 0 : _a.toLowerCase().startsWith(prefix.toLowerCase()));
-      }
-    );
-    if (!items.length) {
-      this.open = true;
-      return;
-    }
-    const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
-    const nextItem = items[(focusedItemIndex + 1) % items.length];
-    if (this.open) {
-      nextItem.focus();
-    } else {
-      this._lastFocusedItem = nextItem;
-      this.open = true;
-    }
-  }
-  _moveFocus(moveOffset) {
-    if (!this.open) {
-      this.open = true;
-      return;
-    }
-    const items = this._items.filter(({ disabled }) => !disabled);
-    const focusedItemIndex = items.findIndex(
-      (item2) => item2.matches(":focus-within")
-    );
-    if (focusedItemIndex === -1) {
-      moveOffset = 1;
-    }
-    const item = items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))];
-    item.focus();
-  }
-  _updateFormValue() {
-    this.setFormValue(this.value);
-  }
-  _updateItemsSelectable() {
-    for (const item of this._items) {
-      item.selectable = this.multiple;
-    }
-  }
-  _updateValueBySelectedOptions() {
-    this.value = this.selectedOptions.at(-1) ?? "";
-  }
-  _updateSelectedOptionsByValue() {
-    this.selectedOptions = this.value ? [this.value] : [];
-  }
-  /**
-   * Handling for when an option is selected.
-   * If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
-   * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
-   *
-   * @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) {
-    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.
-   *
-   * If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
-   * If multiple selection is disabled, directly empty the selected options.
-   */
-  _removeLastSelection() {
-    if (this.multiple) {
-      this.selectedOptions = this.selectedOptions.slice(0, -1);
-      this.value = this.selectedOptions.at(-1) ?? "";
-    } else {
-      this.selectedOptions = [];
-      this.value = "";
-    }
-  }
-  _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();
-        this.open = true;
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        this.open = false;
-      }
-      return;
-    }
-    if (!isSimpleKeyEvent(event)) {
-      return;
-    }
-    const printableCharacter = event.key.trim().length === 1 ? event.key : null;
-    if (printableCharacter) {
-      event.preventDefault();
-      this._searchItem(printableCharacter);
-      return;
-    }
-    const operation = {
-      ArrowDown: "down",
-      ArrowUp: "up",
-      PageDown: "pageDown",
-      PageUp: "pageUp",
-      Escape: "close"
-    }[event.key];
-    switch (operation) {
-      case "down":
-      case "up":
-        event.preventDefault();
-        this._moveFocus(operation === "up" ? -1 : 1);
-        break;
-      case "pageDown":
-      case "pageUp":
-        event.preventDefault();
-        this._moveFocus(operation === "pageUp" ? -10 : 10);
-        break;
-      case "close":
-        event.preventDefault();
-        this._handleKeyDownEscape();
-        break;
-    }
-  }
-  _handleKeyDownEscape() {
-    if (this.open) {
-      this.open = false;
-    } else {
-      this._removeLastSelection();
+var DaikinDropdown = class DaikinDropdown extends DDSFormElement {
+	static {
+		_DaikinDropdown = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.readonly = false;
+		this.required = false;
+		this.error = false;
+		this.open = false;
+		this.multiple = false;
+		this.selectedOptions = [];
+		this.maxLabels = null;
+		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();
+	}
+	static {
+		this._activeOpenByRoot = /* @__PURE__ */ new WeakMap();
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: 100%;
     }
-  }
-  /**
-   * Handle `focusin` event to remember last focused item.
-   */
-  _handleFocusIn(event) {
-    const target = event.target;
-    if (!target || !this._items.includes(target)) {
-      return;
+
+    :host([readonly]:not([disabled])) button {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-    this._lastFocusedItem = target;
-  }
-  _handlePointerDown() {
-    if (this.open) {
-      this._willBeFocusedByPress = true;
+
+    :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);
     }
-  }
-  _handlePointerUp() {
-    if (this.disabled || this.readonly) {
-      return;
+
+    :host([readonly]:not([disabled])) button:focus-visible {
+      --color-base: var(--dds-color-common-border-focus);
     }
-    this._willBeFocusedByPress = false;
-    this.open = !this.open;
-  }
-  _handleButtonKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.disabled || this.readonly) {
-        return;
-      }
-      this.open = !this.open;
+
+    :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);
     }
-  }
-  /**
-   * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
-   * The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.
-   * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
-   */
-  _handleFloatingReady() {
-    const items = this._items;
-    const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
-    setTimeout(() => {
-      item == null ? void 0 : item.focus();
-    }, 100);
-  }
-  /**
-   * Handle `select` event from `daikin-dropdown-item`.
-   */
-  _handleSelect(event) {
-    this._handleSelectOption(event.target.value);
-    if (!this.multiple) {
-      this.open = false;
+
+    ::slotted {
+      width: 100%;
     }
-  }
-  _handleSlotChange() {
-    this._updateItemsSelectable();
-  }
-  render() {
-    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}>
+  `;
+	}
+	get _selectionLabels() {
+		const items = this._items;
+		return this.selectedOptions.map((value) => items.find((item) => item.value === value)?.textContent ?? "");
+	}
+	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) => !item.disabled && item.textContent.toLowerCase().startsWith(prefix.toLowerCase()));
+		if (!items.length) {
+			this.open = true;
+			return;
+		}
+		const activeElement = document.activeElement;
+		const nextItem = items[((activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1) + 1) % items.length];
+		if (this.open) nextItem.focus();
+		else {
+			this._lastFocusedItem = nextItem;
+			this.open = true;
+		}
+	}
+	_moveFocus(moveOffset) {
+		if (!this.open) {
+			this.open = true;
+			return;
+		}
+		const items = this._items.filter(({ disabled }) => !disabled);
+		const focusedItemIndex = items.findIndex((item) => item.matches(":focus-within"));
+		if (focusedItemIndex === -1) moveOffset = 1;
+		items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))].focus();
+	}
+	_updateFormValue() {
+		this.setFormValue(this.value);
+	}
+	_updateItemsSelectable() {
+		for (const item of this._items) item.selectable = this.multiple;
+	}
+	_updateValueBySelectedOptions() {
+		this.value = this.selectedOptions.at(-1) ?? "";
+	}
+	_updateSelectedOptionsByValue() {
+		this.selectedOptions = this.value ? [this.value] : [];
+	}
+	/**
+	* Handling for when an option is selected.
+	* If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
+	* If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
+	*
+	* @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) {
+		const relatedTarget = event.relatedTarget;
+		if (!!relatedTarget && (this.contains(relatedTarget) || this.renderRoot.contains(relatedTarget)) || 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.
+	*
+	* If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
+	* If multiple selection is disabled, directly empty the selected options.
+	*/
+	_removeLastSelection() {
+		if (this.multiple) {
+			this.selectedOptions = this.selectedOptions.slice(0, -1);
+			this.value = this.selectedOptions.at(-1) ?? "";
+		} else {
+			this.selectedOptions = [];
+			this.value = "";
+		}
+	}
+	_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();
+				this.open = true;
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				this.open = false;
+			}
+			return;
+		}
+		if (!isSimpleKeyEvent(event)) return;
+		const printableCharacter = event.key.trim().length === 1 ? event.key : null;
+		if (printableCharacter) {
+			event.preventDefault();
+			this._searchItem(printableCharacter);
+			return;
+		}
+		const operation = {
+			ArrowDown: "down",
+			ArrowUp: "up",
+			PageDown: "pageDown",
+			PageUp: "pageUp",
+			Escape: "close"
+		}[event.key];
+		switch (operation) {
+			case "down":
+			case "up":
+				event.preventDefault();
+				this._moveFocus(operation === "up" ? -1 : 1);
+				break;
+			case "pageDown":
+			case "pageUp":
+				event.preventDefault();
+				this._moveFocus(operation === "pageUp" ? -10 : 10);
+				break;
+			case "close":
+				event.preventDefault();
+				this._handleKeyDownEscape();
+		}
+	}
+	_handleKeyDownEscape() {
+		if (this.open) this.open = false;
+		else this._removeLastSelection();
+	}
+	/**
+	* Handle `focusin` event to remember last focused item.
+	*/
+	_handleFocusIn(event) {
+		const target = event.target;
+		if (!target || !this._items.includes(target)) return;
+		this._lastFocusedItem = target;
+	}
+	_handlePointerDown() {
+		if (this.open) this._willBeFocusedByPress = true;
+	}
+	_handlePointerUp() {
+		if (this.disabled || this.readonly) return;
+		this._willBeFocusedByPress = false;
+		this.open = !this.open;
+	}
+	_handleButtonKeyDown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			if (this.disabled || this.readonly) return;
+			this.open = !this.open;
+		}
+	}
+	/**
+	* Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+	* The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.
+	* Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
+	*/
+	_handleFloatingReady() {
+		const items = this._items;
+		const item = items.find((item) => item === this._lastFocusedItem) ?? items.find((item) => item.value === this.value) ?? items.at(0);
+		setTimeout(() => {
+			item?.focus();
+		}, 100);
+	}
+	/**
+	* Handle `select` event from `daikin-dropdown-item`.
+	*/
+	_handleSelect(event) {
+		this._handleSelectOption(event.target.value);
+		if (!this.multiple) this.open = false;
+	}
+	_handleSlotChange() {
+		this._updateItemsSelectable();
+	}
+	render() {
+		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._isMenuOpen,
-      error: this.error,
-      disabled: this.disabled,
-      readonly: this.readonly,
-      placeholder: !this.selectedOptions.length
-    })}
+			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._isMenuOpen}
@@ -453,176 +418,109 @@ let DaikinDropdown = class extends DDSFormElement {
           ></slot>
         </div>
       </div>
-      ${// Activate auto update only when the dropdown is open.
-    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
-    this._autoUpdateController.directive(
-      floatingPositionOptions,
-      this._isMenuOpen
-    )}
-      ${// Ensure open dropdown is closed even when focusout/relatedTarget is unreliable across browsers.
-    this._clickOutsideController.directive(this._isMenuOpen)}
+      ${this._autoUpdateController.directive(floatingPositionOptions, this._isMenuOpen)}
+      ${this._clickOutsideController.directive(this._isMenuOpen)}
     </div>`;
-  }
-  /**
-   * Focuses on the inner button.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._button) == null ? void 0 : _a.focus(options);
-  }
-  willUpdate(changedProperties) {
-    if (!this._initialUpdateCompleted) {
-      if (!!this.selectedOptions.length && (!this.value || !this.selectedOptions.includes(this.value))) {
-        this._updateValueBySelectedOptions();
-      } else if (!!this.value && !this.selectedOptions.length) {
-        this.selectedOptions = [this.value];
-      }
-      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) {
-      this._updateSelectedOptionsByValue();
-    }
-    if (!hasChangedValue && hasChangedSelectedOptions) {
-      this._updateValueBySelectedOptions();
-    }
-  }
-  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") || changedProperties.has("readonly")) {
-      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
-        this._isMenuOpen
-      );
-      if (changedProperties.get("open") && !this.open && !this.disabled) {
-        this.focus();
-      }
-    }
-    if (changedProperties.has("open")) {
-      const wasOpen = changedProperties.get("open");
-      if (wasOpen !== void 0 && wasOpen !== this.open) {
-        this.dispatchEvent(
-          new ToggleEvent("toggle", {
-            oldState: wasOpen ? "open" : "closed",
-            newState: this.open ? "open" : "closed"
-          })
-        );
-      }
-    }
-    if (changedProperties.has("selectedOptions")) {
-      const items = this._items;
-      for (const item of items) {
-        item.selected = this.selectedOptions.includes(item.value);
-      }
-    }
-    if (changedProperties.has("multiple")) {
-      this._updateItemsSelectable();
-    }
-  }
-  disconnectedCallback() {
-    this._syncSingleOpenState();
-    super.disconnectedCallback();
-  }
-  /**
-   * 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;
-  }
-};
-DaikinDropdown._activeOpenByRoot = /* @__PURE__ */ new WeakMap();
-DaikinDropdown.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      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%;
-    }
-  `;
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "" })
-], DaikinDropdown.prototype, "placeholder", 2);
-__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);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDropdown.prototype, "error", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDropdown.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinDropdown.prototype, "multiple", 2);
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinDropdown.prototype, "selectedOptions", 2);
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "max-labels" })
-], DaikinDropdown.prototype, "maxLabels", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-dropdown-item" })
-], DaikinDropdown.prototype, "_items", 2);
-__decorateClass([
-  query("button")
-], DaikinDropdown.prototype, "_button", 2);
-__decorateClass([
-  state()
-], DaikinDropdown.prototype, "_label", 2);
-DaikinDropdown = __decorateClass([
-  ddsElement("daikin-dropdown")
-], DaikinDropdown);
-export {
-  DaikinDropdown
+	}
+	/**
+	* Focuses on the inner button.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._button?.focus(options);
+	}
+	willUpdate(changedProperties) {
+		if (!this._initialUpdateCompleted) {
+			if (!!this.selectedOptions.length && (!this.value || !this.selectedOptions.includes(this.value))) this._updateValueBySelectedOptions();
+			else if (!!this.value && !this.selectedOptions.length) this.selectedOptions = [this.value];
+			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) this._updateSelectedOptionsByValue();
+		if (!hasChangedValue && hasChangedSelectedOptions) this._updateValueBySelectedOptions();
+	}
+	updated(changedProperties) {
+		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") || changedProperties.has("readonly")) {
+			this._autoUpdateController.floatingElement?.togglePopover(this._isMenuOpen);
+			if (changedProperties.get("open") && !this.open && !this.disabled) this.focus();
+		}
+		if (changedProperties.has("open")) {
+			const wasOpen = changedProperties.get("open");
+			if (wasOpen !== void 0 && wasOpen !== this.open) this.dispatchEvent(new ToggleEvent("toggle", {
+				oldState: wasOpen ? "open" : "closed",
+				newState: this.open ? "open" : "closed"
+			}));
+		}
+		if (changedProperties.has("selectedOptions")) {
+			const items = this._items;
+			for (const item of items) item.selected = this.selectedOptions.includes(item.value);
+		}
+		if (changedProperties.has("multiple")) this._updateItemsSelectable();
+	}
+	disconnectedCallback() {
+		this._syncSingleOpenState();
+		super.disconnectedCallback();
+	}
+	/**
+	* 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: ""
+})], DaikinDropdown.prototype, "placeholder", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "readonly", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "required", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "error", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "open", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "multiple", void 0);
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinDropdown.prototype, "selectedOptions", void 0);
+__decorate([property$1({
+	type: Number,
+	reflect: true,
+	attribute: "max-labels"
+})], DaikinDropdown.prototype, "maxLabels", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-dropdown-item" })], DaikinDropdown.prototype, "_items", void 0);
+__decorate([query("button")], DaikinDropdown.prototype, "_button", void 0);
+__decorate([state()], DaikinDropdown.prototype, "_label", void 0);
+DaikinDropdown = _DaikinDropdown = __decorate([ddsElement("daikin-dropdown")], DaikinDropdown);
+//#endregion
+export { DaikinDropdown };