@daikin-oss/design-system-web-components 1.0.0 → 1.1.0

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

@@ -119,6 +119,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
   render() {
     return lit.html`<label
       class="group flex gap-2 items-center size-full font-daikinSerif"
+      part="label"
       @click=${this._handleClick}
     >
       <span class="p-2">

package/dist/cjs-dev/components/checkbox/daikin-checkbox.d.cts

@@ -7,6 +7,10 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="checkbox">` element.
  *
+ * @slot - A slot for the checkbox label content.
+ *
+ * @csspart label - Change the style of checkbox label.
+ *
  * @example
  *
  * ```js

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

@@ -5,12 +5,14 @@ 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 ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.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) => {
@@ -24,36 +26,34 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaButton = classVarianceAuthority.cva(
   [
     "flex",
+    "justify-between",
     "items-center",
     "gap-2",
     "w-full",
     "h-full",
     "min-h-12",
     "bg-ddt-color-common-background-default",
-    "p-3",
-    "border",
-    "border-[--color-base]",
+    "py-3",
+    "pl-4",
+    "pr-3",
     "rounded",
     "overflow-hidden",
     "font-daikinSerif",
     "text-left",
-    "leading-5",
+    "leading-[130%]",
     "relative",
     "outline",
-    "outline-0",
-    "-outline-offset-2",
+    "outline-1",
+    "-outline-offset-1",
     "focus-visible:outline-2",
-    "focus-visible:outline-[--color-focus]",
+    "focus-visible:-outline-offset-2",
+    "enabled:outline-[--color-base]",
     "disabled:text-ddt-color-common-disabled",
-    "disabled:border-ddt-color-common-disabled",
+    "disabled:outline-ddt-color-common-disabled",
     "after:i-daikin-dropdown-chevron-down",
-    "after:w-6",
-    "after:h-6",
-    "after:absolute",
-    "after:m-auto",
-    "after:top-0",
-    "after:bottom-0",
-    "after:right-3",
+    "after:size-6",
+    "after:flex-none",
+    "after:ml-auto",
     "enabled:after:text-ddt-color-common-text-primary",
     "disabled:after:text-ddt-color-common-disabled"
   ],
@@ -64,17 +64,19 @@ const cvaButton = classVarianceAuthority.cva(
           "enabled:hover:bg-ddt-color-common-surface-hover",
           "enabled:active:bg-ddt-color-common-surface-press"
         ],
-        true: ["enabled:bg-ddt-color-common-surface-press"]
+        true: [
+          "enabled:bg-ddt-color-common-surface-press",
+          "after:scale-y-[-1]"
+        ]
       },
       error: {
         false: [
           "var-color-ddt-color-common-neutral-default/color-base",
-          "var-color-ddt-color-common-border-focus/color-focus"
+          "hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "active:var-color-ddt-color-common-neutral-press/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-base"
         ],
-        true: [
-          "var-color-ddt-color-common-danger-default/color-base",
-          "var-color-ddt-color-common-danger-default/color-focus"
-        ]
+        true: ["var-color-ddt-color-common-danger-default/color-base"]
       },
       placeholder: {
         false: ["text-ddt-color-common-text-primary"],
@@ -108,37 +110,31 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     this.required = false;
     this.error = false;
     this.open = false;
+    this.multiple = false;
+    this.selectedOptions = [];
+    this.maxLabels = null;
     this._label = null;
-    this._hasSelectedItem = false;
-    this._selectedItemLabel = "";
+    this._initialUpdateCompleted = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._clickOutsideController = new clickOutside.ClickOutsideController(
       this,
       this._onClickOutside
     );
     this._lastFocusedItem = null;
+    this._dropdownRef = ref_js.createRef();
   }
-  _updateFormValue() {
-    this._internals.setFormValue(this.value);
+  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) ?? "";
+      }
+    );
   }
   _onClickOutside() {
     this.open = false;
   }
-  _reflectItemsAndLabel() {
-    const items = this._items;
-    const selectedItem = items.find((item) => item.value === this.value);
-    for (const item of items) {
-      item.selected = item === selectedItem;
-    }
-    this._hasSelectedItem = !!selectedItem;
-    this._selectedItemLabel = (selectedItem == null ? void 0 : selectedItem.textContent) ?? "";
-  }
-  _handleClick() {
-    if (this.disabled) {
-      return;
-    }
-    this.open = !this.open;
-  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -160,13 +156,6 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
       this.open = true;
     }
   }
-  _handleKeyDownEscape() {
-    if (this.open) {
-      this.open = false;
-    } else {
-      this.value = null;
-    }
-  }
   _moveFocus(moveOffset) {
     if (!this.open) {
       this.open = true;
@@ -188,7 +177,56 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
       break;
     }
   }
+  _updateFormValue() {
+    this._internals.setFormValue(JSON.stringify(this.value));
+  }
+  _updateItemsSelectable() {
+    for (const item of this._items) {
+      item.selectable = this.multiple;
+    }
+  }
+  _updateValueBySelectedOptions() {
+    this.value = this.selectedOptions.at(-1) ?? null;
+  }
+  _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) {
+    this.value = value;
+    this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+  }
+  /**
+   * 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) ?? null;
+    } else {
+      this.selectedOptions = [];
+      this.value = null;
+    }
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
   _handleKeyDown(event) {
+    if (!isSimpleKey.isSimpleKeyEvent(event)) {
+      return;
+    }
     const printableCharacter = event.key.trim().length === 1 ? event.key : null;
     if (printableCharacter) {
       event.preventDefault();
@@ -212,19 +250,12 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
         break;
     }
   }
-  /**
-   * Handle `select` event from `daikin-dropdown-item`.
-   */
-  _handleSelect(event) {
-    const target = event.target;
-    if (!target || !this._items.includes(target)) {
-      return;
+  _handleKeyDownEscape() {
+    if (this.open) {
+      this.open = false;
+    } else {
+      this._removeLastSelection();
     }
-    this._hasSelectedItem = true;
-    this._selectedItemLabel = target.textContent ?? "";
-    this.value = target.value;
-    this.open = false;
-    this.dispatchEvent(new Event("change"));
   }
   /**
    * Handle `focusin` event to remember last focused item.
@@ -246,14 +277,28 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
     item == null ? void 0 : item.focus();
   }
+  /**
+   * Handle `select` event from `daikin-dropdown-item`.
+   */
+  _handleSelect(event) {
+    this._handleSelectOption(event.target.value);
+    if (!this.multiple) {
+      this.open = false;
+    }
+    this.dispatchEvent(new Event("change"));
+  }
+  _handleSlotChange() {
+    this._updateItemsSelectable();
+  }
   render() {
     return lit.html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
       <button
+        ${ref_js.ref(this._dropdownRef)}
         type="button"
         class=${cvaButton({
       open: this.open,
       error: this.error,
-      placeholder: !this._hasSelectedItem
+      placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
         role="combobox"
@@ -266,18 +311,19 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
         @click=${this._handleClick}
         ${this._autoUpdateController.refReference()}
       >
-        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+        ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
       </button>
       <div
         id="dropdown-items"
         popover
-        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] overflow-y-auto opacity-1 transition-[opacity] rounded shadow-dropdown"
+        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded"
         aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
         role="listbox"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
         <slot
+          @slotchange=${this._handleSlotChange}
           @select=${this._handleSelect}
           @focusin=${this._handleFocusIn}
         ></slot>
@@ -300,11 +346,29 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     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;
+    }
+    const hasChangedValue = changedProperties.has("value");
+    const hasChangedSelectedOptions = changedProperties.has("selectedOptions");
+    if (hasChangedValue && !hasChangedSelectedOptions) {
+      this._updateSelectedOptionsByValue();
+    }
+    if (!hasChangedValue && hasChangedSelectedOptions) {
+      this._updateValueBySelectedOptions();
+    }
+  }
   updated(changedProperties) {
     var _a;
     if (changedProperties.has("value")) {
       this._updateFormValue();
-      this._reflectItemsAndLabel();
     }
     if (changedProperties.has("open") || changedProperties.has("disabled")) {
       (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
@@ -314,6 +378,15 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
         this.focus();
       }
     }
+    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();
+    }
   }
   /**
    * This method is used by `daikin-input-group` to reflect it's attributes to this component.
@@ -358,6 +431,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "multiple", 2);
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinDropdown.prototype, "selectedOptions", 2);
+__decorateClass([
+  decorators_js.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);
@@ -367,12 +449,6 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinDropdown.prototype, "_label", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinDropdown.prototype, "_hasSelectedItem", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinDropdown.prototype, "_selectedItemLabel", 2);
 exports.DaikinDropdown = __decorateClass([
   decorators.ddsElement("daikin-dropdown")
 ], exports.DaikinDropdown);

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

@@ -34,6 +34,9 @@ export declare class DaikinDropdown extends DDSElement {
     /**
      * Form value of the dropdown.
      * `null` if not selected.
+     *
+     * If `multiple` is `true`, please use `selectedOptions` instead.
+     * If multiple selection is enabled, the value set to this property will be one of the selected items, and it is not possible to predict which value will be set.
      */
     value: string | null;
     /**
@@ -56,6 +59,22 @@ export declare class DaikinDropdown extends DDSElement {
      * Whether the dropdown menu is opened.
      */
     open: boolean;
+    /**
+     * Whether the dropdown menu is supports multiple selections.
+     */
+    multiple: boolean;
+    /**
+     * An array of `value` s for the currently selected option.
+     *
+     * This can be used regardless of the value of `multiple`, but if `multiple` is `true`, always use this instead of `value`.
+     * If `multiple` is `false`, the second and subsequent items will be deleted.
+     */
+    selectedOptions: string[];
+    /**
+     * Specifies the maximum number of items to display without omission in the label when `multiple` is `true`.
+     * Specify `null` to display all selected items without omission.
+     */
+    maxLabels: number | null;
     private readonly _items;
     private _button;
     /**
@@ -63,8 +82,8 @@ export declare class DaikinDropdown extends DDSElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
-    private _hasSelectedItem;
-    private _selectedItemLabel;
+    private get _selectionLabels();
+    private _initialUpdateCompleted;
     private _autoUpdateController;
     private _clickOutsideController;
     /**
@@ -72,18 +91,32 @@ export declare class DaikinDropdown extends DDSElement {
      * The next time the dropdown opens, the focus will be moved to this element.
      */
     private _lastFocusedItem;
-    private _updateFormValue;
+    private _dropdownRef;
     private _onClickOutside;
-    private _reflectItemsAndLabel;
-    private _handleClick;
     private _searchItem;
-    private _handleKeyDownEscape;
     private _moveFocus;
-    private _handleKeyDown;
+    private _updateFormValue;
+    private _updateItemsSelectable;
+    private _updateValueBySelectedOptions;
+    private _updateSelectedOptionsByValue;
     /**
-     * Handle `select` event from `daikin-dropdown-item`.
+     * 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.
      */
-    private _handleSelect;
+    private _handleSelectOption;
+    /**
+     * 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.
+     */
+    private _removeLastSelection;
+    private _handleClick;
+    private _handleKeyDown;
+    private _handleKeyDownEscape;
     /**
      * Handle `focusin` event to remember last focused item.
      */
@@ -94,12 +127,18 @@ export declare class DaikinDropdown extends DDSElement {
      * 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.
      */
     private _handleFloatingReady;
+    /**
+     * Handle `select` event from `daikin-dropdown-item`.
+     */
+    private _handleSelect;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button.
      * @param options focus options
      */
     focus(options?: FocusOptions): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.

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

@@ -7,6 +7,8 @@ const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+const isSimilarToClick = require("../../utils/is-similar-to-click.cjs");
+require("../checkbox/daikin-checkbox.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -21,35 +23,49 @@ const cvaOption = classVarianceAuthority.cva(
   [
     "flex",
     "items-center",
-    "justify-between",
-    "w-full",
+    "gap-1",
+    "size-full",
     "min-h-12",
-    "text-ddt-color-common-text-primary",
-    "bg-ddt-color-common-background-default",
-    "p-3",
     "font-daikinSerif",
-    "leading-5",
+    "leading-[130%]",
     "text-left",
+    "relative",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-ddt-color-common-border-focus",
-    "disabled:text-ddt-color-common-disabled"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       selected: {
         false: [
-          "enabled:hover:bg-ddt-color-common-surface-hover",
-          "enabled:active:bg-ddt-color-common-surface-press"
+          "var-color-ddt-color-common-background-default/color-primary",
+          "hover:var-color-ddt-color-common-surface-hover/color-primary",
+          "active:var-color-ddt-color-common-surface-press/color-primary"
         ],
         true: [
-          "enabled:bg-ddt-color-common-surface-selected-default",
-          "enabled:hover:bg-ddt-color-common-surface-selected-hover",
-          "enabled:active:bg-ddt-color-common-surface-selected-press",
+          "var-color-ddt-color-common-surface-selected-default/color-primary",
+          "hover:var-color-ddt-color-common-surface-selected-hover/color-primary",
+          "active:var-color-ddt-color-common-surface-selected-press/color-primary",
           "after:i-daikin-dropdown-check",
-          "after:size-6"
+          "after:size-6",
+          "after:flex-none"
         ]
+      },
+      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"
+        ]
+      },
+      multiple: {
+        false: ["justify-between", "p-3"],
+        true: ["after:hidden"]
       }
     }
   }
@@ -60,30 +76,72 @@ exports.DaikinDropdownItem = class DaikinDropdownItem extends ddsElement.DDSElem
     this.value = "";
     this.disabled = false;
     this.selected = false;
+    this.selectable = false;
   }
-  _handleClick() {
-    if (this.disabled) {
+  _handleClick(event) {
+    if (this.disabled || event.target.tagName === "DAIKIN-CHECKBOX") {
       return;
     }
-    this.dispatchEvent(
-      new Event("select", {
-        bubbles: true
-      })
-    );
+    this._emitSelect();
+    event.preventDefault();
+  }
+  _handleChange(event) {
+    this._emitSelect();
+    event.preventDefault();
+  }
+  _handleKeydown(event) {
+    if (!isSimilarToClick.isSimilarToClick(event.key) || this.disabled) {
+      return;
+    }
+    this._emitSelect();
+    event.preventDefault();
+  }
+  _handleMousedown(event) {
+    if (event.detail === 2) {
+      event.preventDefault();
+    }
+  }
+  _emitSelect() {
+    this.dispatchEvent(new Event("select", { bubbles: true }));
   }
   render() {
-    return lit.html`<button
-      type="button"
-      class=${cvaOption({ selected: this.selected })}
-      data-value=${this.value}
-      role="option"
-      aria-selected=${this.selected}
-      tabindex="-1"
-      ?disabled=${this.disabled}
-      @click=${this._handleClick}
-    >
-      <slot></slot>
-    </button>`;
+    const optionClassName = cvaOption({
+      selected: this.selected,
+      disabled: this.disabled,
+      multiple: this.selectable
+    });
+    return this.selectable ? lit.html`<span
+          class=${optionClassName}
+          data-value=${this.value}
+          role="option"
+          aria-selected=${this.selected}
+          tabindex="-1"
+          aria-disabled=${this.disabled}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeydown}
+          @mousedown=${this._handleMousedown}
+        >
+          <daikin-checkbox
+            class="size-full part-[label]:p-2 part-[label]:cursor-pointer"
+            check-state=${this.selected ? "checked" : "unchecked"}
+            tabindex="-1"
+            ?disabled=${this.disabled}
+            @change=${this._handleChange}
+          >
+            <slot></slot>
+          </daikin-checkbox>
+        </span>` : lit.html`<button
+          type="button"
+          class=${optionClassName}
+          data-value=${this.value}
+          role="option"
+          aria-selected=${this.selected}
+          tabindex="-1"
+          ?disabled=${this.disabled}
+          @click=${this._handleClick}
+        >
+          <slot></slot>
+        </button>`;
   }
   /**
    * Focuses on the inner button.
@@ -91,7 +149,7 @@ exports.DaikinDropdownItem = class DaikinDropdownItem extends ddsElement.DDSElem
    */
   focus(options) {
     var _a;
-    (_a = this._button) == null ? void 0 : _a.focus(options);
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
   }
 };
 exports.DaikinDropdownItem.styles = lit.css`
@@ -112,8 +170,11 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "selected", 2);
 __decorateClass([
-  decorators_js.query("button")
-], exports.DaikinDropdownItem.prototype, "_button", 2);
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdownItem.prototype, "selectable", 2);
+__decorateClass([
+  decorators_js.query("button,span[role=option]")
+], exports.DaikinDropdownItem.prototype, "_focusableElement", 2);
 exports.DaikinDropdownItem = __decorateClass([
   decorators.ddsElement("daikin-dropdown-item")
 ], exports.DaikinDropdownItem);

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

@@ -34,8 +34,13 @@ export declare class DaikinDropdownItem extends DDSElement {
      * Set automatically by `daikin-dropdown` component.
      */
     selected: boolean;
-    private _button;
+    selectable: boolean;
+    private _focusableElement;
     private _handleClick;
+    private _handleChange;
+    private _handleKeydown;
+    private _handleMousedown;
+    private _emitSelect;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button.