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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @daikin-oss/design-system-web-components
 
+## 1.1.0
+
+### Minor Changes
+
+- [#153](https://github.com/dsv-rp/DDS/pull/153) [`8fe1ed0`](https://github.com/dsv-rp/DDS/commit/8fe1ed0d692f9f85a2c173adeb2111b7715f9f61) Thanks [@poetrainy](https://github.com/poetrainy)! - Loading: Initial Implementation. (DDS-1716)
+
+- [#154](https://github.com/dsv-rp/DDS/pull/154) [`2ad908a`](https://github.com/dsv-rp/DDS/commit/2ad908a4bec6c42414c7427f9262b506aa153c0b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Avatar: Initial Implementation. (DDS-1880)
+
+- [#121](https://github.com/dsv-rp/DDS/pull/121) [`72c8153`](https://github.com/dsv-rp/DDS/commit/72c81538970bbd341e5ff6bd25b886cc5056ba42) Thanks [@poetrainy](https://github.com/poetrainy)! - Dropdown: The `multiple`, `selectedOptions` and `maxLabels` properties have been added. (DDS-1695)
+  Dropdown Item: The `selectable` property has been added. (DDS-1695)
+  Checkbox: The `label` CSS part has been added. (DDS-1695)
+
+### Patch Changes
+
+- [#165](https://github.com/dsv-rp/DDS/pull/165) [`d4895ec`](https://github.com/dsv-rp/DDS/commit/d4895eccd896abd6e2ff16b18f61e7acd9d5026f) Thanks [@yodas7](https://github.com/yodas7)! - Removed Provenance.
+
+- [#121](https://github.com/dsv-rp/DDS/pull/121) [`72c8153`](https://github.com/dsv-rp/DDS/commit/72c81538970bbd341e5ff6bd25b886cc5056ba42) Thanks [@poetrainy](https://github.com/poetrainy)! - Dropdown: Updated appearance. (DDS-1870)
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/base/dds-element.cjs

@@ -3,6 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const _DDSElement = class _DDSElement extends lit.LitElement {
 };
-_DDSElement.version = "1.0.0";
+_DDSElement.version = "1.1.0";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

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

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 tailwind = require("../../tailwind.css.cjs");
+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 cvaWrapper = classVarianceAuthority.cva(
+  [
+    "inline-block",
+    "rounded-full",
+    "relative",
+    "overflow-hidden",
+    "box-border",
+    "size-full",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      type: {
+        button: [
+          "enabled:bg-ddt-color-common-neutral-default",
+          "enabled:text-ddt-color-common-surface-default",
+          "enabled:hover:bg-ddt-color-common-neutral-hover",
+          "enabled:hover:text-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-neutral-press",
+          "enabled:active:text-ddt-color-common-surface-press",
+          "disabled:bg-ddt-color-common-disabled",
+          "disabled:text-ddt-color-common-surface-default"
+        ],
+        icon: [
+          "bg-ddt-color-common-neutral-default",
+          "text-ddt-color-common-surface-default"
+        ],
+        link: [
+          "link-enabled:bg-ddt-color-common-neutral-default",
+          "link-enabled:text-ddt-color-common-surface-default",
+          "link-enabled:hover:bg-ddt-color-common-neutral-hover",
+          "link-enabled:hover:text-ddt-color-common-surface-hover",
+          "link-enabled:active:bg-ddt-color-common-neutral-press",
+          "link-enabled:active:text-ddt-color-common-surface-press",
+          "link-disabled:bg-ddt-color-common-disabled",
+          "link-disabled:text-ddt-color-common-surface-default"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
+  constructor() {
+    super();
+    this.type = "icon";
+    this.href = null;
+    this.alt = null;
+    this.disabled = false;
+    this.avatarAriaHaspopup = null;
+    this.avatarAriaExpanded = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  render() {
+    const icon = lit.html`
+      <span
+        class="i-daikin-profile"
+      >
+      </span>
+    </daikin-icon>`;
+    if (this.type === "icon") {
+      return lit.html`<span
+        class=${cvaWrapper({ type: "icon" })}
+        role="figure"
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+      >
+        ${icon}
+      </span>`;
+    } else if (this.type === "button") {
+      return lit.html`<button
+        class=${cvaWrapper({ type: "button" })}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.avatarAriaExpanded ?? void 0)}
+        ?disabled=${this.disabled}
+      >
+        ${icon}
+      </button>`;
+    } else {
+      const linkDisabled = this.disabled || this.href == null;
+      return lit.html`<a
+        class=${cvaWrapper({ type: "link" })}
+        role=${ifDefined_js.ifDefined(linkDisabled ? "link" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
+      >
+        ${icon}
+      </a>`;
+    }
+  }
+  /**
+   * Focuses on the inner button or link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinAvatar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    :host {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "alt", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAvatar.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "avatar-aria-haspopup" })
+], exports.DaikinAvatar.prototype, "avatarAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "avatar-aria-expanded" })
+], exports.DaikinAvatar.prototype, "avatarAriaExpanded", 2);
+__decorateClass([
+  decorators_js.query("a,button")
+], exports.DaikinAvatar.prototype, "_focusableElement", 2);
+exports.DaikinAvatar = __decorateClass([
+  decorators_js.customElement("daikin-avatar")
+], exports.DaikinAvatar);

package/dist/cjs/components/avatar/daikin-avatar.d.cts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaWrapper: (props?: ({
+    type?: "button" | "icon" | "link" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
+/**
+ * The avatar is a UI element that represent a user
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/avatar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-avatar></daikin-avatar>
+ * ```
+ */
+export declare class DaikinAvatar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Replace the wrapping element.
+     */
+    type: AvatarVariantProps["type"];
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated type [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered type disabled state.
+     */
+    href: string | null;
+    /**
+     * Provides an accessible name of the avatar.
+     */
+    alt: string | null;
+    /**
+     * Specify the avatar disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The aria-haspopup of the avatar when `type="button"`.
+     */
+    avatarAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of avatar when `type="button"`.
+     */
+    avatarAriaExpanded: boolean | null;
+    private _focusableElement;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-avatar": DaikinAvatar;
+    }
+}
+export {};

package/dist/cjs/components/avatar/index.cjs

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

package/dist/cjs/components/avatar/index.d.cts

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

package/dist/cjs/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/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/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);