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

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

@@ -1,450 +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 ifDefined_js = require("lit/directives/if-defined.js");
-const repeat_js = require("lit/directives/repeat.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 floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
-const tailwind = require("../../tailwind.css.cjs");
-const isSimpleKey = require("../../utils/is-simple-key.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 cvaInput = classVarianceAuthority.cva(
-  [
-    "flex",
-    "justify-between",
-    "items-center",
-    "gap-2",
-    "w-full",
-    "h-full",
-    "min-h-(--dds-input-height)",
-    "bg-ddt-color-common-background-default",
-    "pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)*2+var(--dds-icon)*2)]",
-    "rounded-sm",
-    "overflow-hidden",
-    "text-left",
-    "relative",
-    "outline-solid",
-    "outline-1",
-    "-outline-offset-1",
-    "whitespace-nowrap",
-    "text-ellipsis",
-    "text-ddt-color-common-text-primary",
-    "placeholder:text-ddt-color-common-text-secondary",
-    "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",
-    "disabled:placeholder:text-ddt-color-common-disabled",
-    "enabled:after:text-ddt-color-common-text-primary",
-    "disabled:after:text-ddt-color-common-disabled",
-    "enabled:hover:bg-ddt-color-common-surface-hover",
-    "enabled:active:bg-ddt-color-common-surface-press"
-  ],
-  {
-    variants: {
-      error: {
-        false: [
-          "[--color-base:var(--dds-color-common-neutral-default)]",
-          "hover:[--color-base:var(--dds-color-common-neutral-hover)]",
-          "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["[--color-base:var(--dds-color-common-danger-default)]"]
-      },
-      hasLeftIcon: {
-        false: ["pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]"],
-        true: [
-          "pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]"
-        ]
-      }
-    }
-  }
-);
-const cvaOption = classVarianceAuthority.cva(
-  [
-    "flex",
-    "items-center",
-    "gap-1",
-    "size-full",
-    "min-h-(--dds-input-height)",
-    "py-[calc(var(--dds-padding-30)+0.09375rem)]",
-    "px-(--dds-padding-30)",
-    "text-left",
-    "text-(length:--dds-font-size-label-text)",
-    "relative",
-    "data-focus:outline-solid",
-    "data-focus:outline-2",
-    "data-focus:-outline-offset-2",
-    "data-focus:outline-ddt-color-common-border-focus"
-  ],
-  {
-    variants: {
-      selected: {
-        false: [
-          "[--color-primary:var(--dds-color-common-background-default)]",
-          "hover:[--color-primary:var(--dds-color-common-surface-hover)]",
-          "active:[--color-primary:var(--dds-color-common-surface-press)]"
-        ],
-        true: [
-          "[--color-primary:var(--dds-color-common-surface-selected-default)]",
-          "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-(--dds-icon)",
-          "pr-[calc((var(--dds-padding-10))+var(--dds-icon)+var(--dds-padding-30))]",
-          "after:absolute",
-          "after:right-(--dds-padding-30)",
-          "after:top-1/2",
-          "after:-translate-y-1/2"
-        ]
-      },
-      disabled: {
-        false: [
-          "text-ddt-color-common-text-primary",
-          "bg-(--color-primary)",
-          "cursor-pointer"
-        ],
-        true: [
-          "text-ddt-color-common-disabled",
-          "bg-ddt-color-common-background-default"
-        ]
-      }
-    }
-  }
-);
-const cvaArrow = classVarianceAuthority.cva(
-  [
-    "icon-[daikin--chevron-down]",
-    "size-(--dds-icon)",
-    "shrink-0",
-    "z-10",
-    "pointer-events-auto"
-  ],
-  {
-    variants: {
-      open: {
-        false: [],
-        true: ["scale-y-[-1]"]
-      },
-      disabled: {
-        false: ["cursor-pointer", "text-ddt-color-common-text-primary"],
-        true: ["text-ddt-color-common-disabled", "pointer-events-none"]
-      }
-    }
-  }
-);
-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`
-        );
-      }
-    })
-  ]
+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");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+let lit_directives_repeat_js = require("lit/directives/repeat.js");
+let _floating_ui_dom = require("@floating-ui/dom");
+//#region src/components/combobox/daikin-combobox.ts
+var cvaInput = (0, class_variance_authority.cva)([
+	"flex",
+	"justify-between",
+	"items-center",
+	"gap-2",
+	"w-full",
+	"h-full",
+	"min-h-(--dds-input-height)",
+	"bg-ddt-color-common-background-default",
+	"pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)*2+var(--dds-icon)*2)]",
+	"rounded-sm",
+	"overflow-hidden",
+	"text-left",
+	"relative",
+	"outline-solid",
+	"outline-1",
+	"-outline-offset-1",
+	"whitespace-nowrap",
+	"text-ellipsis",
+	"text-ddt-color-common-text-primary",
+	"placeholder:text-ddt-color-common-text-secondary",
+	"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",
+	"disabled:placeholder:text-ddt-color-common-disabled",
+	"enabled:after:text-ddt-color-common-text-primary",
+	"disabled:after:text-ddt-color-common-disabled",
+	"enabled:hover:bg-ddt-color-common-surface-hover",
+	"enabled:active:bg-ddt-color-common-surface-press"
+], { variants: {
+	error: {
+		false: [
+			"[--color-base:var(--dds-color-common-neutral-default)]",
+			"hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+			"focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
+		],
+		true: ["[--color-base:var(--dds-color-common-danger-default)]"]
+	},
+	hasLeftIcon: {
+		false: ["pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]"],
+		true: ["pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]"]
+	}
+} });
+var cvaOption = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"gap-1",
+	"size-full",
+	"min-h-(--dds-input-height)",
+	"py-[calc(var(--dds-padding-30)+0.09375rem)]",
+	"px-(--dds-padding-30)",
+	"text-left",
+	"text-(length:--dds-font-size-label-text)",
+	"relative",
+	"data-focus:outline-solid",
+	"data-focus:outline-2",
+	"data-focus:-outline-offset-2",
+	"data-focus:outline-ddt-color-common-border-focus"
+], { variants: {
+	selected: {
+		false: [
+			"[--color-primary:var(--dds-color-common-background-default)]",
+			"hover:[--color-primary:var(--dds-color-common-surface-hover)]",
+			"active:[--color-primary:var(--dds-color-common-surface-press)]"
+		],
+		true: [
+			"[--color-primary:var(--dds-color-common-surface-selected-default)]",
+			"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-(--dds-icon)",
+			"pr-[calc((var(--dds-padding-10))+var(--dds-icon)+var(--dds-padding-30))]",
+			"after:absolute",
+			"after:right-(--dds-padding-30)",
+			"after:top-1/2",
+			"after:-translate-y-1/2"
+		]
+	},
+	disabled: {
+		false: [
+			"text-ddt-color-common-text-primary",
+			"bg-(--color-primary)",
+			"cursor-pointer"
+		],
+		true: ["text-ddt-color-common-disabled", "bg-ddt-color-common-background-default"]
+	}
+} });
+var cvaArrow = (0, class_variance_authority.cva)([
+	"icon-[daikin--chevron-down]",
+	"size-(--dds-icon)",
+	"shrink-0",
+	"z-10",
+	"pointer-events-auto"
+], { variants: {
+	open: {
+		false: [],
+		true: ["scale-y-[-1]"]
+	},
+	disabled: {
+		false: ["cursor-pointer", "text-ddt-color-common-text-primary"],
+		true: ["text-ddt-color-common-disabled", "pointer-events-none"]
+	}
+} });
+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`);
+		} })
+	]
 };
+/**
+* Helper function to get label from item (string or object)
+*/
 function getItemLabel(item) {
-  return typeof item === "string" ? item : item.label;
+	return typeof item === "string" ? item : item.label;
 }
+/**
+* Helper function to get value from item (string or object)
+*/
 function getItemValue(item) {
-  if (typeof item === "string") {
-    return item;
-  }
-  return item.value ?? item.label;
+	if (typeof item === "string") return item;
+	return item.value ?? item.label;
 }
+/**
+* Helper function to check if item is disabled
+*/
 function isItemDisabled(item) {
-  return typeof item === "string" ? false : item.disabled ?? false;
+	return typeof item === "string" ? false : item.disabled ?? false;
 }
 function defaultFilterFn(items, value) {
-  if (!value) {
-    return items;
-  }
-  const searchValue = value.toLowerCase();
-  return items.filter((item) => {
-    const label = getItemLabel(item);
-    return label.toLowerCase().includes(searchValue);
-  });
+	if (!value) return items;
+	const searchValue = value.toLowerCase();
+	return items.filter((item) => {
+		return getItemLabel(item).toLowerCase().includes(searchValue);
+	});
 }
-exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.required = false;
-    this.error = false;
-    this.open = false;
-    this.readonly = false;
-    this.items = [];
-    this._viewItems = [];
-    this._currentFocusItemIndex = null;
-    this.filter = defaultFilterFn;
-    this._label = null;
-    this._hasLeftIcon = false;
-    this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
-    this._clickOutsideController = new clickOutside.ClickOutsideController(
-      this,
-      this._onClickOutside
-    );
-  }
-  get _isPopupOpen() {
-    return this.open && !this.disabled && !this.readonly;
-  }
-  _onClickOutside() {
-    this._closePopup();
-  }
-  _moveFocusByKeydown(moveOffset) {
-    if (!this.open) {
-      this._autoUpdateController.setTriggerContext({
-        trigger: "keyboard"
-      });
-      this._synchronizeShowItems();
-      this.open = true;
-      return;
-    }
-    const enabledItemsWithIndices = this._viewItems.map((item, index) => ({ item, originalIndex: index })).filter(({ item }) => !isItemDisabled(item));
-    if (!enabledItemsWithIndices.length) {
-      return;
-    }
-    const focusedItemIndex = this._currentFocusItemIndex;
-    if (focusedItemIndex === null) {
-      const targetItem = moveOffset > 0 ? enabledItemsWithIndices[0] : enabledItemsWithIndices[enabledItemsWithIndices.length - 1];
-      this._currentFocusItemIndex = targetItem.originalIndex;
-      return;
-    }
-    const currentEnabledIndex = enabledItemsWithIndices.findIndex(
-      ({ originalIndex }) => originalIndex === focusedItemIndex
-    );
-    if (currentEnabledIndex === -1) {
-      this._currentFocusItemIndex = enabledItemsWithIndices[0].originalIndex;
-      return;
-    }
-    let nextEnabledIndex;
-    if (Math.abs(moveOffset) === 1) {
-      nextEnabledIndex = (currentEnabledIndex + moveOffset + enabledItemsWithIndices.length) % enabledItemsWithIndices.length;
-    } else {
-      nextEnabledIndex = Math.min(
-        Math.max(currentEnabledIndex + moveOffset, 0),
-        enabledItemsWithIndices.length - 1
-      );
-    }
-    this._currentFocusItemIndex = enabledItemsWithIndices[nextEnabledIndex].originalIndex;
-  }
-  _updateFormValue() {
-    this.setFormValue(this.value);
-  }
-  _closePopup() {
-    this.open = false;
-    this._currentFocusItemIndex = null;
-  }
-  _handleLeftIconSlotChange(event) {
-    const slot = event.target;
-    this._hasLeftIcon = slot.assignedElements().length > 0;
-  }
-  _handleFocusOut(event) {
-    if (this.open && // ignore if focusing within the component, especially to the menu items
-    // or menu item will be destroyed before click event is handled
-    (!event.relatedTarget || !this.renderRoot.contains(event.relatedTarget))) {
-      this._closePopup();
-    }
-  }
-  _handleClick() {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    this._autoUpdateController.setTriggerContext({
-      trigger: "mouse"
-    });
-    this._synchronizeShowItems();
-    this.open = !this.open;
-    if (!this.open) {
-      this._currentFocusItemIndex = null;
-    }
-  }
-  _handleArrowClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-    this._handleClick();
-  }
-  _handleClickItem(item) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    const value = getItemValue(item);
-    this.value = value;
-    this.open = false;
-    this._currentFocusItemIndex = null;
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true
-      })
-    );
-  }
-  _handleKeyDown(event) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        this._autoUpdateController.setTriggerContext({
-          trigger: "mouse"
-        });
-        this._synchronizeShowItems();
-        this.open = true;
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        this._closePopup();
-      }
-      return;
-    }
-    if (event.key === "Enter" && this.open) {
-      const focusedItemIndex = this._currentFocusItemIndex;
-      if (focusedItemIndex !== null) {
-        const item = this._viewItems[focusedItemIndex];
-        if (item) {
-          this._handleClickItem(item);
-        }
-      }
-    }
-    if (!isSimpleKey.isSimpleKeyEvent(event)) {
-      return;
-    }
-    const operation = {
-      ArrowDown: "down",
-      ArrowUp: "up",
-      PageDown: "pageDown",
-      PageUp: "pageUp",
-      Escape: "close"
-    }[event.key];
-    switch (operation) {
-      case "down":
-      case "up":
-        event.preventDefault();
-        this._moveFocusByKeydown(operation === "up" ? -1 : 1);
-        break;
-      case "pageDown":
-      case "pageUp":
-        event.preventDefault();
-        this._moveFocusByKeydown(operation === "pageUp" ? -10 : 10);
-        break;
-      case "close":
-        event.preventDefault();
-        if (this.open) {
-          this._closePopup();
-        } else {
-          this._handleClearClick();
-        }
-        break;
-    }
-  }
-  /**
-   * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
-   * The combobox 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(event) {
-    const detail = event.detail;
-    const eventType = detail == null ? void 0 : detail.trigger;
-    if (eventType === "mouse") {
-      return;
+var DaikinCombobox = class DaikinCombobox extends require_dds_form_element.DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.required = false;
+		this.error = false;
+		this.open = false;
+		this.readonly = false;
+		this.items = [];
+		this._viewItems = [];
+		this._currentFocusItemIndex = null;
+		this.filter = defaultFilterFn;
+		this._label = null;
+		this._hasLeftIcon = false;
+		this._autoUpdateController = new require_floating_ui_auto_update.FloatingUIAutoUpdateController(this);
+		this._clickOutsideController = new require_click_outside.ClickOutsideController(this, this._onClickOutside);
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
     }
-    const firstEnabledIndex = this._viewItems.findIndex(
-      (item) => !isItemDisabled(item)
-    );
-    if (firstEnabledIndex === -1) {
-      return;
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-    if (this._currentFocusItemIndex !== null) {
-      return;
-    } else {
-      this._currentFocusItemIndex = firstEnabledIndex;
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-    this._autoUpdateController.clearTriggerContext();
-  }
-  /**
-   * Handles the clear button click event.
-   * Clears the current value and triggers form value update.
-   */
-  _handleClearClick() {
-    if (this.disabled || this.readonly) {
-      return;
+
+    :host([readonly]:not([disabled])) input:focus-visible {
+      --color-base: var(--dds-color-common-border-focus);
     }
-    this.value = "";
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true
-      })
-    );
-  }
-  /**
-   * Synchronizes the display items based on the current filter state.
-   * @param type - Whether to show all items or apply filtering
-   */
-  _synchronizeShowItems(type = "all") {
-    this._viewItems = type === "all" ? this.items : this.filter(this.items, this.value);
-  }
-  /**
-   * Handles input events from the combobox input field.
-   * Updates the value, applies filtering, and opens dropdown if matches are found.
-   */
-  _handleInput(event) {
-    if (this.disabled || this.readonly) {
-      return;
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
     }
-    this.value = event.target.value;
-    this._synchronizeShowItems("filtered");
-    this.open = this._viewItems.length > 0;
-  }
-  /**
-   * Handles change events from the combobox input field.
-   * Dispatches a custom change event when the input value changes and loses focus.
-   */
-  _handleChange() {
-    if (this.disabled || this.readonly) {
-      return;
+
+    ::slotted {
+      width: 100%;
     }
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true
-      })
-    );
-  }
-  render() {
-    return lit.html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
+  `;
+	}
+	get _isPopupOpen() {
+		return this.open && !this.disabled && !this.readonly;
+	}
+	_onClickOutside() {
+		this._closePopup();
+	}
+	_moveFocusByKeydown(moveOffset) {
+		if (!this.open) {
+			this._autoUpdateController.setTriggerContext({ trigger: "keyboard" });
+			this._synchronizeShowItems();
+			this.open = true;
+			return;
+		}
+		const enabledItemsWithIndices = this._viewItems.map((item, index) => ({
+			item,
+			originalIndex: index
+		})).filter(({ item }) => !isItemDisabled(item));
+		if (!enabledItemsWithIndices.length) return;
+		const focusedItemIndex = this._currentFocusItemIndex;
+		if (focusedItemIndex === null) {
+			const targetItem = moveOffset > 0 ? enabledItemsWithIndices[0] : enabledItemsWithIndices[enabledItemsWithIndices.length - 1];
+			this._currentFocusItemIndex = targetItem.originalIndex;
+			return;
+		}
+		const currentEnabledIndex = enabledItemsWithIndices.findIndex(({ originalIndex }) => originalIndex === focusedItemIndex);
+		if (currentEnabledIndex === -1) {
+			this._currentFocusItemIndex = enabledItemsWithIndices[0].originalIndex;
+			return;
+		}
+		let nextEnabledIndex;
+		if (Math.abs(moveOffset) === 1) nextEnabledIndex = (currentEnabledIndex + moveOffset + enabledItemsWithIndices.length) % enabledItemsWithIndices.length;
+		else nextEnabledIndex = Math.min(Math.max(currentEnabledIndex + moveOffset, 0), enabledItemsWithIndices.length - 1);
+		this._currentFocusItemIndex = enabledItemsWithIndices[nextEnabledIndex].originalIndex;
+	}
+	_updateFormValue() {
+		this.setFormValue(this.value);
+	}
+	_closePopup() {
+		this.open = false;
+		this._currentFocusItemIndex = null;
+	}
+	_handleLeftIconSlotChange(event) {
+		const slot = event.target;
+		this._hasLeftIcon = slot.assignedElements().length > 0;
+	}
+	_handleFocusOut(event) {
+		if (this.open && (!event.relatedTarget || !this.renderRoot.contains(event.relatedTarget))) this._closePopup();
+	}
+	_handleClick() {
+		if (this.disabled || this.readonly) return;
+		this._autoUpdateController.setTriggerContext({ trigger: "mouse" });
+		this._synchronizeShowItems();
+		this.open = !this.open;
+		if (!this.open) this._currentFocusItemIndex = null;
+	}
+	_handleArrowClick(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+		this._handleClick();
+	}
+	_handleClickItem(item) {
+		if (this.disabled || this.readonly) return;
+		const value = getItemValue(item);
+		this.value = value;
+		this.open = false;
+		this._currentFocusItemIndex = null;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	_handleKeyDown(event) {
+		if (this.disabled || this.readonly) return;
+		if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				this._autoUpdateController.setTriggerContext({ trigger: "mouse" });
+				this._synchronizeShowItems();
+				this.open = true;
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				this._closePopup();
+			}
+			return;
+		}
+		if (event.key === "Enter" && this.open) {
+			const focusedItemIndex = this._currentFocusItemIndex;
+			if (focusedItemIndex !== null) {
+				const item = this._viewItems[focusedItemIndex];
+				if (item) this._handleClickItem(item);
+			}
+		}
+		if (!require_is_simple_key.isSimpleKeyEvent(event)) return;
+		const operation = {
+			ArrowDown: "down",
+			ArrowUp: "up",
+			PageDown: "pageDown",
+			PageUp: "pageUp",
+			Escape: "close"
+		}[event.key];
+		switch (operation) {
+			case "down":
+			case "up":
+				event.preventDefault();
+				this._moveFocusByKeydown(operation === "up" ? -1 : 1);
+				break;
+			case "pageDown":
+			case "pageUp":
+				event.preventDefault();
+				this._moveFocusByKeydown(operation === "pageUp" ? -10 : 10);
+				break;
+			case "close":
+				event.preventDefault();
+				if (this.open) this._closePopup();
+				else this._handleClearClick();
+		}
+	}
+	/**
+	* Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+	* The combobox 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(event) {
+		if (event.detail?.trigger === "mouse") return;
+		const firstEnabledIndex = this._viewItems.findIndex((item) => !isItemDisabled(item));
+		if (firstEnabledIndex === -1) return;
+		if (this._currentFocusItemIndex !== null) return;
+		else this._currentFocusItemIndex = firstEnabledIndex;
+		this._autoUpdateController.clearTriggerContext();
+	}
+	/**
+	* Handles the clear button click event.
+	* Clears the current value and triggers form value update.
+	*/
+	_handleClearClick() {
+		if (this.disabled || this.readonly) return;
+		this.value = "";
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	/**
+	* Synchronizes the display items based on the current filter state.
+	* @param type - Whether to show all items or apply filtering
+	*/
+	_synchronizeShowItems(type = "all") {
+		this._viewItems = type === "all" ? this.items : this.filter(this.items, this.value);
+	}
+	/**
+	* Handles input events from the combobox input field.
+	* Updates the value, applies filtering, and opens dropdown if matches are found.
+	*/
+	_handleInput(event) {
+		if (this.disabled || this.readonly) return;
+		this.value = event.target.value;
+		this._synchronizeShowItems("filtered");
+		this.open = this._viewItems.length > 0;
+	}
+	/**
+	* Handles change events from the combobox input field.
+	* Dispatches a custom change event when the input value changes and loses focus.
+	*/
+	_handleChange() {
+		if (this.disabled || this.readonly) return;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	render() {
+		return lit.html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
       <span class="sr-only" aria-live="polite"
         >${`${this._viewItems.length} available results`}</span
       >
@@ -460,16 +394,16 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
         </div>
         <input
           class=${cvaInput({
-      error: this.error,
-      hasLeftIcon: this._hasLeftIcon
-    })}
+			error: this.error,
+			hasLeftIcon: this._hasLeftIcon
+		})}
           role="combobox"
-          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
-          placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+          name=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("name"))}
+          placeholder=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("placeholder"))}
           .value=${this.value}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
-          aria-label=${ifDefined_js.ifDefined(this._label)}
+          aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this._label)}
           aria-expanded=${this._isPopupOpen}
           aria-disabled=${this.disabled}
           aria-controls=${this._isPopupOpen ? "combobox-items" : lit.nothing}
@@ -500,9 +434,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
               </daikin-icon-button>` : lit.nothing}
           ${this.readonly && !this.disabled ? lit.nothing : lit.html`<span
                 class=${cvaArrow({
-      open: this._isPopupOpen,
-      disabled: this.disabled
-    })}
+			open: this._isPopupOpen,
+			disabled: this.disabled
+		})}
                 role="img"
                 aria-label=${this._isPopupOpen ? "Close" : "Open"}
                 @mousedown=${this._handleArrowClick}
@@ -522,19 +456,19 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
         <div
           tabindex="-1"
           class="flex-1 overflow-y-auto natural-break"
-          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+          aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this._label ?? void 0)}
           role="listbox"
         >
-          ${repeat_js.repeat(this._viewItems, (item, index) => {
-      const label = getItemLabel(item);
-      const value = getItemValue(item);
-      const disabled = isItemDisabled(item);
-      return lit.html`<button
+          ${(0, lit_directives_repeat_js.repeat)(this._viewItems, (item, index) => {
+			const label = getItemLabel(item);
+			const value = getItemValue(item);
+			const disabled = isItemDisabled(item);
+			return lit.html`<button
               type="button"
               class=${cvaOption({
-        selected: value === this.value,
-        disabled
-      })}
+				selected: value === this.value,
+				disabled
+			})}
               id=${`combobox-item-${index}`}
               data-value=${value}
               role="option"
@@ -546,150 +480,93 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
             >
               ${label}
             </button>`;
-    })}
+		})}
         </div>
       </div>
-      ${// Activate auto update only when the combobox is open.
-    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
-    this._autoUpdateController.directive(
-      floatingPositionOptions,
-      this._isPopupOpen
-    )}
-      ${// Listen to click outside only when the combobox is open.
-    this._clickOutsideController.directive(this._isPopupOpen)}
+      ${this._autoUpdateController.directive(floatingPositionOptions, this._isPopupOpen)}
+      ${this._clickOutsideController.directive(this._isPopupOpen)}
     </div>`;
-  }
-  /**
-   * Focuses on the input element.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._input) == null ? void 0 : _a.focus(options);
-  }
-  willUpdate(changedProperties) {
-    if ((changedProperties.has("open") || changedProperties.has("readonly")) && this.readonly && this.open) {
-      this.open = false;
-    }
-  }
-  updated(changedProperties) {
-    var _a;
-    if (changedProperties.has("items")) {
-      this._synchronizeShowItems();
-    }
-    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._isPopupOpen
-      );
-      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("_currentFocusItemIndex")) {
-      const focusedItem = this.renderRoot.querySelector("[data-focus]");
-      focusedItem == null ? void 0 : focusedItem.scrollIntoView({ block: "nearest" });
-    }
-  }
-  /**
-   * 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 input element.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._input?.focus(options);
+	}
+	willUpdate(changedProperties) {
+		if ((changedProperties.has("open") || changedProperties.has("readonly")) && this.readonly && this.open) this.open = false;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("items")) this._synchronizeShowItems();
+		if (changedProperties.has("value")) this._updateFormValue();
+		if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
+			this._autoUpdateController.floatingElement?.togglePopover(this._isPopupOpen);
+			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("_currentFocusItemIndex")) this.renderRoot.querySelector("[data-focus]")?.scrollIntoView({ block: "nearest" });
+	}
+	/**
+	* 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.DaikinCombobox.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    :host([readonly]:not([disabled])) input {
-      --color-base: var(--dds-color-common-surface-secondary);
-      background-color: var(--dds-color-common-surface-secondary);
-    }
-
-    :host([readonly]:not([disabled])) input:hover,
-    :host([readonly]:not([disabled])) input:active {
-      --color-base: var(--dds-color-common-surface-secondary);
-      background-color: var(--dds-color-common-surface-secondary);
-    }
-
-    :host([readonly]:not([disabled])) input:focus-visible {
-      --color-base: var(--dds-color-common-border-focus);
-    }
-
-    :host([readonly][error]:not([disabled])) input,
-    :host([readonly][error]:not([disabled])) input:hover,
-    :host([readonly][error]:not([disabled])) input:active {
-      --color-base: var(--dds-color-common-danger-default);
-    }
-
-    ::slotted {
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
-], exports.DaikinCombobox.prototype, "placeholder", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCombobox.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCombobox.prototype, "required", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCombobox.prototype, "error", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCombobox.prototype, "open", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCombobox.prototype, "readonly", 2);
-__decorateClass([
-  ddsProperty.property({ type: Array, attribute: false })
-], exports.DaikinCombobox.prototype, "items", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinCombobox.prototype, "_viewItems", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinCombobox.prototype, "_currentFocusItemIndex", 2);
-__decorateClass([
-  ddsProperty.property({ attribute: false })
-], exports.DaikinCombobox.prototype, "filter", 2);
-__decorateClass([
-  decorators_js.query("input")
-], exports.DaikinCombobox.prototype, "_input", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinCombobox.prototype, "_label", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinCombobox.prototype, "_hasLeftIcon", 2);
-exports.DaikinCombobox = __decorateClass([
-  decorators.ddsElement("daikin-combobox")
-], exports.DaikinCombobox);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinCombobox.prototype, "placeholder", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "required", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "error", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "open", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Array,
+	attribute: false
+})], DaikinCombobox.prototype, "items", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinCombobox.prototype, "_viewItems", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinCombobox.prototype, "_currentFocusItemIndex", void 0);
+require_decorate.default([require_dds_property.property({ attribute: false })], DaikinCombobox.prototype, "filter", void 0);
+require_decorate.default([(0, lit_decorators_js.query)("input")], DaikinCombobox.prototype, "_input", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinCombobox.prototype, "_label", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinCombobox.prototype, "_hasLeftIcon", void 0);
+DaikinCombobox = require_decorate.default([require_decorators.ddsElement("daikin-combobox")], DaikinCombobox);
+//#endregion
+Object.defineProperty(exports, "DaikinCombobox", {
+	enumerable: true,
+	get: function() {
+		return DaikinCombobox;
+	}
+});
 exports.defaultFilterFn = defaultFilterFn;