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

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

@@ -1,421 +1,384 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dom = require("@floating-ui/dom");
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ref_js = require("lit/directives/ref.js");
-require("../../base/dds-element.cjs");
-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");
-require("../dropdown-item/daikin-dropdown-item.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_dds_form_element = require("../../base/dds-form-element.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
+const require_click_outside = require("../../controllers/click-outside.cjs");
+const require_floating_ui_auto_update = require("../../controllers/floating-ui-auto-update.cjs");
+const require_is_simple_key = require("../../utils/is-simple-key.cjs");
+require("../dropdown-item/index.cjs");
+const require_custom_readonly = require("../../controllers/custom-readonly.cjs");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_ref_js = require("lit/directives/ref.js");
+let _floating_ui_dom = require("@floating-ui/dom");
+//#region src/components/dropdown/daikin-dropdown.ts
+var _DaikinDropdown;
+var cvaButton = (0, class_variance_authority.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: [
+		(0, _floating_ui_dom.flip)({ fallbackStrategy: "initialPlacement" }),
+		(0, _floating_ui_dom.offset)({ mainAxis: 0 }),
+		(0, _floating_ui_dom.size)({ apply({ rects, elements }) {
+			elements.floating.style.setProperty("--floating-width", `${rects.reference.width}px`);
+		} })
+	]
 };
-const cvaButton = classVarianceAuthority.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: [
-    dom.flip({ fallbackStrategy: "initialPlacement" }),
-    dom.offset({ mainAxis: 0 }),
-    dom.size({
-      apply({ rects, elements }) {
-        elements.floating.style.setProperty(
-          "--floating-width",
-          `${rects.reference.width}px`
-        );
-      }
-    })
-  ]
-};
-exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.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 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();
-  }
-  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 = 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) => {
-        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 (!isSimpleKey.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 require_dds_form_element.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 require_floating_ui_auto_update.FloatingUIAutoUpdateController(this);
+		this._readonlyController = new require_custom_readonly.CustomReadonlyController(this, {
+			isReadonly: () => this.readonly,
+			isDisabled: () => this.disabled,
+			blockedKeys: [
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown",
+				"Enter",
+				" "
+			]
+		});
+		this._clickOutsideController = new require_click_outside.ClickOutsideController(this, this._onClickOutside);
+		this._willBeFocusedByPress = false;
+		this._lastFocusedItem = null;
+		this._dropdownRef = (0, lit_directives_ref_js.createRef)();
+	}
+	static {
+		this._activeOpenByRoot = /* @__PURE__ */ new WeakMap();
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_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 lit.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 (!require_is_simple_key.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 lit.html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
-        ${ref_js.ref(this._dropdownRef)}
+        ${(0, lit_directives_ref_js.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}
@@ -455,173 +418,114 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
           ></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;
-  }
+	}
+	/**
+	* 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;
+	}
 };
-exports.DaikinDropdown._activeOpenByRoot = /* @__PURE__ */ new WeakMap();
-exports.DaikinDropdown.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :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([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
-], exports.DaikinDropdown.prototype, "placeholder", 2);
-__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);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinDropdown.prototype, "error", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinDropdown.prototype, "open", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinDropdown.prototype, "multiple", 2);
-__decorateClass([
-  ddsProperty.property({ type: Array, attribute: false })
-], exports.DaikinDropdown.prototype, "selectedOptions", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true, attribute: "max-labels" })
-], exports.DaikinDropdown.prototype, "maxLabels", 2);
-__decorateClass([
-  decorators_js.queryAssignedElements({ selector: "daikin-dropdown-item" })
-], exports.DaikinDropdown.prototype, "_items", 2);
-__decorateClass([
-  decorators_js.query("button")
-], exports.DaikinDropdown.prototype, "_button", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinDropdown.prototype, "_label", 2);
-exports.DaikinDropdown = __decorateClass([
-  decorators.ddsElement("daikin-dropdown")
-], exports.DaikinDropdown);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinDropdown.prototype, "placeholder", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "required", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "error", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "open", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinDropdown.prototype, "multiple", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Array,
+	attribute: false
+})], DaikinDropdown.prototype, "selectedOptions", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true,
+	attribute: "max-labels"
+})], DaikinDropdown.prototype, "maxLabels", void 0);
+require_decorate.default([(0, lit_decorators_js.queryAssignedElements)({ selector: "daikin-dropdown-item" })], DaikinDropdown.prototype, "_items", void 0);
+require_decorate.default([(0, lit_decorators_js.query)("button")], DaikinDropdown.prototype, "_button", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinDropdown.prototype, "_label", void 0);
+DaikinDropdown = _DaikinDropdown = require_decorate.default([require_decorators.ddsElement("daikin-dropdown")], DaikinDropdown);
+//#endregion
+Object.defineProperty(exports, "DaikinDropdown", {
+	enumerable: true,
+	get: function() {
+		return DaikinDropdown;
+	}
+});