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

package/dist/cjs-dev/components/date-picker/daikin-date-picker.d.cts

@@ -0,0 +1,105 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
+/**
+ * The date picker component provides a date selection function that can be combined with forms. This component uses `daikin-calendar` internally (users do not need to nest this).
+ *
+ * @fires select - Fires when the date is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-date-picker></daikin-date-picker>
+ * ```
+ */
+export declare class DaikinDatePicker extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * Whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text field is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether or not to display error states.
+     * Ignored if the `disabled` is `true`.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    error: boolean;
+    /**
+     * Whether the date picker is open.
+     */
+    open: boolean;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _currentSelection;
+    private _autoUpdateController;
+    private _dateInputElement;
+    private _calendarElement;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    private get _viewDate();
+    private get _open();
+    private _openCalendar;
+    private _emitSelect;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleChange;
+    private _handleMouseUp;
+    private _handleKeyDown;
+    private _handleBeforeInput;
+    private _handleSelect;
+    private _handleToggle;
+    private _updateValue;
+    private _updateInputSelection;
+    private _updateSelection;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-date-picker": DaikinDatePicker;
+    }
+}

package/dist/cjs-dev/components/date-picker/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinDatePicker = require("./daikin-date-picker.cjs");
+Object.defineProperty(exports, "DaikinDatePicker", {
+  enumerable: true,
+  get: () => daikinDatePicker.DaikinDatePicker
+});

package/dist/cjs-dev/components/date-picker/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-date-picker.cjs";

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

@@ -5,12 +5,16 @@ 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 ddsElement = require("../../base/dds-element.cjs");
+const ref_js = require("lit/directives/ref.js");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.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");
+require("../dropdown-item/daikin-dropdown-item.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -24,36 +28,35 @@ 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",
+    "break-all",
     "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 +67,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"],
@@ -98,47 +103,39 @@ const floatingPositionOptions = {
     })
   ]
 };
-exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
+exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = null;
     this.placeholder = "";
     this.disabled = false;
     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,35 +157,88 @@ 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;
       return;
     }
-    const items = this._items;
+    const items = this._items.filter(({ disabled }) => !disabled);
     const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const focusedItemIndex = activeElement ? items.findIndex((item2) => item2.contains(activeElement)) : -1;
     if (focusedItemIndex === -1) {
       moveOffset = 1;
     }
-    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
-      index = (index + items.length) % items.length;
-      const item = items[index];
-      if (item.disabled) {
-        continue;
+    const item = items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))];
+    item.focus();
+  }
+  _updateFormValue() {
+    this.setFormValue(this.value);
+  }
+  _updateItemsSelectable() {
+    for (const item of this._items) {
+      item.selectable = this.multiple;
+    }
+  }
+  _updateValueBySelectedOptions() {
+    this.value = this.selectedOptions.at(-1) ?? "";
+  }
+  _updateSelectedOptionsByValue() {
+    this.selectedOptions = this.value ? [this.value] : [];
+  }
+  /**
+   * Handling for when an option is selected.
+   * If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
+   * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
+   *
+   * @param value The value of selected option.
+   */
+  _handleSelectOption(value) {
+    this.value = value;
+    this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+  }
+  _handleFocusOut(event) {
+    if (!event.relatedTarget) {
+      if (!this.multiple && this._lastFocusedItem) {
+        this._handleSelectOption(this._lastFocusedItem.value);
       }
-      item.focus();
-      break;
+      this.open = false;
     }
   }
+  /**
+   * Removes the last selected option.
+   *
+   * If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
+   * If multiple selection is disabled, directly empty the selected options.
+   */
+  _removeLastSelection() {
+    if (this.multiple) {
+      this.selectedOptions = this.selectedOptions.slice(0, -1);
+      this.value = this.selectedOptions.at(-1) ?? "";
+    } else {
+      this.selectedOptions = [];
+      this.value = "";
+    }
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
   _handleKeyDown(event) {
+    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.open = true;
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this.open = false;
+      }
+      return;
+    }
+    if (!isSimpleKey.isSimpleKeyEvent(event)) {
+      return;
+    }
     const printableCharacter = event.key.trim().length === 1 ? event.key : null;
     if (printableCharacter) {
       event.preventDefault();
@@ -198,6 +248,8 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     const operation = {
       ArrowDown: "down",
       ArrowUp: "up",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
       Escape: "close"
     }[event.key];
     switch (operation) {
@@ -206,25 +258,23 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
         event.preventDefault();
         this._moveFocus(operation === "up" ? -1 : 1);
         break;
+      case "pageDown":
+      case "pageUp":
+        event.preventDefault();
+        this._moveFocus(operation === "pageUp" ? -10 : 10);
+        break;
       case "close":
         event.preventDefault();
         this._handleKeyDownEscape();
         break;
     }
   }
-  /**
-   * 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 +296,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"
@@ -263,23 +327,28 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
         aria-controls="dropdown-items"
         aria-autocomplete="list"
         aria-required=${this.required}
+        aria-haspopup="listbox"
         @click=${this._handleClick}
         ${this._autoUpdateController.refReference()}
       >
-        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+        <span class="truncate">
+          ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? this.selectedOptions.length === 1 ? `one item selected` : `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
+        </span>
       </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 max-w-min break-all"
         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}
+          @focusout=${this._handleFocusOut}
         ></slot>
       </div>
       ${// Activate auto update only when the dropdown is open.
@@ -300,11 +369,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 +401,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.
@@ -339,10 +435,6 @@ exports.DaikinDropdown.styles = lit.css`
       width: 100%;
     }
   `;
-exports.DaikinDropdown.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinDropdown.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinDropdown.prototype, "placeholder", 2);
@@ -358,6 +450,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 +468,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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * A dropdown list component.
@@ -27,15 +27,8 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * </daikin-dropdown>
  * ```
  */
-export declare class DaikinDropdown extends DDSElement {
+export declare class DaikinDropdown extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    /**
-     * Form value of the dropdown.
-     * `null` if not selected.
-     */
-    value: string | null;
     /**
      * Placeholder text of the dropdown.
      */
@@ -56,6 +49,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 +72,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 +81,33 @@ 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;
+    private _handleFocusOut;
+    /**
+     * 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 +118,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.