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

package/dist/es-dev/components/combobox/daikin-combobox.js

@@ -1,448 +1,384 @@
-import { flip, offset, size } from "@floating-ui/dom";
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
-import { state, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.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 { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
-import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.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 cvaInput = 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 = 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 = 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: [
-    flip({ fallbackStrategy: "initialPlacement" }),
-    offset({ mainAxis: 0 }),
-    size({
-      apply({ rects, elements }) {
-        elements.floating.style.setProperty(
-          "--floating-width",
-          `${rects.reference.width}px`
-        );
-      }
-    })
-  ]
+import { css, html, nothing, unsafeCSS } from "lit";
+import { query, state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { flip, offset, size } from "@floating-ui/dom";
+//#region src/components/combobox/daikin-combobox.ts
+var cvaInput = 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 = 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 = 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: [
+		flip({ fallbackStrategy: "initialPlacement" }),
+		offset({ mainAxis: 0 }),
+		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);
+	});
 }
-let DaikinCombobox = class extends 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 FloatingUIAutoUpdateController(this);
-    this._clickOutsideController = new 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 (!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 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 FloatingUIAutoUpdateController(this);
+		this._clickOutsideController = new ClickOutsideController(this, this._onClickOutside);
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(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 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 (!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 html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
       <span class="sr-only" aria-live="polite"
         >${`${this._viewItems.length} available results`}</span
       >
@@ -458,9 +394,9 @@ let DaikinCombobox = class extends DDSFormElement {
         </div>
         <input
           class=${cvaInput({
-      error: this.error,
-      hasLeftIcon: this._hasLeftIcon
-    })}
+			error: this.error,
+			hasLeftIcon: this._hasLeftIcon
+		})}
           role="combobox"
           name=${ifDefined(this.getBackingProperty("name"))}
           placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
@@ -498,9 +434,9 @@ let DaikinCombobox = class extends DDSFormElement {
               </daikin-icon-button>` : nothing}
           ${this.readonly && !this.disabled ? nothing : 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}
@@ -524,15 +460,15 @@ let DaikinCombobox = class extends DDSFormElement {
           role="listbox"
         >
           ${repeat(this._viewItems, (item, index) => {
-      const label = getItemLabel(item);
-      const value = getItemValue(item);
-      const disabled = isItemDisabled(item);
-      return html`<button
+			const label = getItemLabel(item);
+			const value = getItemValue(item);
+			const disabled = isItemDisabled(item);
+			return 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"
@@ -544,153 +480,87 @@ let DaikinCombobox = class extends DDSFormElement {
             >
               ${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;
-  }
-};
-DaikinCombobox.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :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([
-  property({ type: String, reflect: true, fallbackValue: "" })
-], DaikinCombobox.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCombobox.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCombobox.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCombobox.prototype, "error", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCombobox.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCombobox.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinCombobox.prototype, "items", 2);
-__decorateClass([
-  state()
-], DaikinCombobox.prototype, "_viewItems", 2);
-__decorateClass([
-  state()
-], DaikinCombobox.prototype, "_currentFocusItemIndex", 2);
-__decorateClass([
-  property({ attribute: false })
-], DaikinCombobox.prototype, "filter", 2);
-__decorateClass([
-  query("input")
-], DaikinCombobox.prototype, "_input", 2);
-__decorateClass([
-  state()
-], DaikinCombobox.prototype, "_label", 2);
-__decorateClass([
-  state()
-], DaikinCombobox.prototype, "_hasLeftIcon", 2);
-DaikinCombobox = __decorateClass([
-  ddsElement("daikin-combobox")
-], DaikinCombobox);
-export {
-  DaikinCombobox,
-  defaultFilterFn
+	}
+	/**
+	* 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;
+	}
 };
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinCombobox.prototype, "placeholder", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "required", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "error", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "open", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinCombobox.prototype, "readonly", void 0);
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinCombobox.prototype, "items", void 0);
+__decorate([state()], DaikinCombobox.prototype, "_viewItems", void 0);
+__decorate([state()], DaikinCombobox.prototype, "_currentFocusItemIndex", void 0);
+__decorate([property$1({ attribute: false })], DaikinCombobox.prototype, "filter", void 0);
+__decorate([query("input")], DaikinCombobox.prototype, "_input", void 0);
+__decorate([state()], DaikinCombobox.prototype, "_label", void 0);
+__decorate([state()], DaikinCombobox.prototype, "_hasLeftIcon", void 0);
+DaikinCombobox = __decorate([ddsElement("daikin-combobox")], DaikinCombobox);
+//#endregion
+export { DaikinCombobox, defaultFilterFn };