@daikin-oss/design-system-web-components 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @daikin-oss/design-system-web-components
 
+## 0.5.0
+
+### Minor Changes
+
+- [#80](https://github.com/dsv-rp/DDS/pull/80) [`108e3c1`](https://github.com/dsv-rp/DDS/commit/108e3c152e7ad0589f34eb32f6f0345ec167fb73) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tab: The `tablist` CSS part has been removed since we started providing default styles. (DDS-1430)
+  Tab: Updated appearance. (DDS-1430)
+
+- [#86](https://github.com/dsv-rp/DDS/pull/86) [`923224e`](https://github.com/dsv-rp/DDS/commit/923224e8f90b34c58e9cd32d88d42b6bb9a4b233) Thanks [@poetrainy](https://github.com/poetrainy)! - Radio: Update appearance. (DDS-1350)
+  Checkbox: Update appearance. (DDS-1288)
+  Toggle: Update appearance. (DDS-1374)
+  Accordion: Update appearance. (DDS-1414)
+  List: Update appearance. (DDS-1414)
+
+- [#74](https://github.com/dsv-rp/DDS/pull/74) [`3151097`](https://github.com/dsv-rp/DDS/commit/3151097362d40e58e18e70914c5dd2ee83f6c430) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tooltip: The `closeOnClick` attribute has been removed. (DDS-1501)
+  **BREAKING CHANGE** Tooltip: The `trigger` and `tooltip` CSS parts have been removed. (DDS-1501)
+  **BREAKING CHANGE** Tooltip: The `tooltip` slot has been renamed to `description`. (DDS-1501)
+  Tooltip: The `trigger` attribute now accepts value of `"click"`. (DDS-1501)
+  Tooltip: The `popover-value` attribute has been added. (DDS-1501)
+
+- [#64](https://github.com/dsv-rp/DDS/pull/64) [`d0c031d`](https://github.com/dsv-rp/DDS/commit/d0c031d28a6eeac5043546ee01209e86c9f5fc2a) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Text Area: Renamed Textarea (`daikin-textarea`) to Text Area (`daikin-text-area`). (DDS-1327)
+  **BREAKING CHANGE** Text Area: The `maxlength` attribute have been removed. (DDS-1327)
+  **BREAKING CHANGE** Input Group: The `textareaCounter` attribute has been removed and the `textareaMaxCount` attribute has been added. (DDS-1327)
+  Text Area: The `resizable`, `name` and `error` attributes has been added. (DDS-1327)
+  Text Area: Updated appearance. (DDS-1327)
+
+- [#62](https://github.com/dsv-rp/DDS/pull/62) [`94d6548`](https://github.com/dsv-rp/DDS/commit/94d65484625bebb2f17f023bb55b565d29d8c972) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Text Field: Renamed Text Input to Text Field. (DDS-1325)
+  **BREAKING CHANGE** Input Group: The value accepted by `required` attribute has been changed from `boolean` to `string` (DDS-1325)
+  Text Field: The `left-icon` and `right-icon` slots have been accepted. (DDS-1325)
+  Text Field: Updated appearance. (DDS-1325)
+  Input Group: Updated appearance. (DDS-1325)
+
+### Patch Changes
+
+- [#25](https://github.com/dsv-rp/DDS/pull/25) [`2a59211`](https://github.com/dsv-rp/DDS/commit/2a592110b5e5b1aaf23060832403acba21336845) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Dropdown Component.
+
+- [#65](https://github.com/dsv-rp/DDS/pull/65) [`c72d763`](https://github.com/dsv-rp/DDS/commit/c72d76356cb42c36b3c782a12654e95790ecc837) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add radio group component. (DDS-1361)
+
+- [#83](https://github.com/dsv-rp/DDS/pull/83) [`9eae0b8`](https://github.com/dsv-rp/DDS/commit/9eae0b866bbff612c33b8920e9dda95835007dc1) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Select Component. (DDS-1566)
+
+- [#47](https://github.com/dsv-rp/DDS/pull/47) [`32ed03c`](https://github.com/dsv-rp/DDS/commit/32ed03cdb2cafb562c57776ac136a3f7be90d8c3) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Progress Indicator Component. (DDS-921)
+
 ## 0.4.0
 
 ### Minor Changes

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

@@ -16,21 +16,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
   _handleMoveFocus(event) {
     const moveOffset = event.detail.direction === "up" ? -1 : 1;
-    const items = this._items;
+    const items = this._items.filter(({ disabled }) => !disabled);
     const activeElement = document.activeElement;
     const focusedItemIndex = activeElement ? items.findIndex((item) => item === activeElement) : -1;
     if (focusedItemIndex < 0) {
       return;
     }
-    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
-      index = Math.sign(index % items.length) === -1 ? items.length - 1 : index % items.length;
-      const item = items[index];
-      if (item.disabled) {
-        continue;
-      }
-      item.focus();
-      break;
-    }
+    const nextItem = items[(focusedItemIndex + moveOffset + items.length) % items.length];
+    nextItem.focus();
   }
   render() {
     return lit.html`<div class="w-full">

package/dist/cjs/components/accordion-item/daikin-accordion-item.cjs

@@ -23,13 +23,11 @@ const cvaSummary = classVarianceAuthority.cva(
     "gap-2",
     "w-full",
     "min-h-12",
-    "py-3",
-    "pr-3",
-    "pl-4",
+    "p-3",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-daikinBlue-700",
+    "focus-visible:outline-system-state-focus",
     "after:size-6",
     "after:transition-all",
     "after:i-daikin-chevron-down"
@@ -42,11 +40,14 @@ const cvaSummary = classVarianceAuthority.cva(
       },
       disabled: {
         false: [
-          "hover:bg-daikinNeutral-100",
           "cursor-pointer",
-          "active:bg-daikinNeutral-200"
+          "hover:bg-system-background-surface-hover",
+          "active:bg-system-background-surface-press"
         ],
-        true: ["text-daikinNeutral-200", "after:text-daikinNeutral-200"]
+        true: [
+          "text-system-state-disabled",
+          "after:text-system-state-disabled"
+        ]
       }
     }
   }
@@ -128,7 +129,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
     const detailsOpen = !this.disabled && this._detailsOpen;
     const open = !this.disabled && this.open;
     return lit.html`<details
-      class="flex w-full bg-white font-daikinSerif overflow-clip"
+      class="flex w-full text-system-element-text-primary font-daikinSerif overflow-clip"
       ?open=${detailsOpen}
       ?data-open=${open}
       aria-disabled=${this.disabled}
@@ -152,7 +153,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
         aria-labelledby="summary"
         ?hidden=${this.disabled}
       >
-        <div class="pt-2 pr-3 pb-3 pl-4">
+        <div class="pt-2 px-3 pb-3">
           <slot></slot>
         </div>
       </div>
@@ -179,11 +180,11 @@ exports.DaikinAccordionItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --divider-top-display: none;
-      --divider-bottom-display: none;
-
       display: block;
       position: relative;
+
+      --divider-top-display: none;
+      --divider-bottom-display: none;
     }
 
     :host::before {
@@ -191,7 +192,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-top-display, none);
       width: 100%;
       height: 1px;
-      background: #828282;
+      background: #828282; /* system-element-divider-primary */
       position: absolute;
       top: 0;
     }
@@ -201,7 +202,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-bottom-display, none);
       width: 100%;
       height: 1px;
-      background: #828282;
+      background: #828282; /* system-element-divider-primary */
       position: absolute;
       bottom: 0;
     }

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

@@ -32,30 +32,30 @@ const cvaButton = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
-    "focus-visible:outline-[#0081C0]",
+    "focus-visible:outline-system-state-focus",
     "var-color-transparent/color-secondary",
-    "link-disabled:var-color-daikinNeutral-400/color-primary"
+    "link-disabled:var-color-system-state-disabled/color-primary"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-daikinBlue-500/color-primary",
-          "link-enabled:hover:var-color-[#0081C0]/color-primary",
-          "link-enabled:hover:var-color-[#DDF3FC]/color-secondary",
-          "link-enabled:active:var-color-[#00689A]/color-primary",
-          "link-enabled:active:var-color-[#BBE7F9]/color-secondary"
+          "link-enabled:var-color-system-state-primary-active/color-primary",
+          "link-enabled:hover:var-color-system-state-primary-hover/color-primary",
+          "link-enabled:hover:var-color-system-state-primary-surface-hover/color-secondary",
+          "link-enabled:active:var-color-system-state-primary-press/color-primary",
+          "link-enabled:active:var-color-system-state-primary-surface-press/color-secondary"
         ],
         danger: [
-          "link-enabled:var-color-[#D80C18]/color-primary",
-          "link-enabled:hover:var-color-[#B90A15]/color-primary",
-          "link-enabled:hover:var-color-[#FDD9DB]/color-secondary",
-          "link-enabled:active:var-color-[#9A0911]/color-primary",
-          "link-enabled:active:var-color-[#FBB3B7]/color-secondary"
+          "link-enabled:var-color-system-state-error-active/color-primary",
+          "link-enabled:hover:var-color-system-state-error-hover/color-primary",
+          "link-enabled:hover:var-color-system-state-error-surface-hover/color-secondary",
+          "link-enabled:active:var-color-system-state-error-press/color-primary",
+          "link-enabled:active:var-color-system-state-error-surface-press/color-secondary"
         ]
       },
       variant: {
-        fill: ["text-white", "bg-[--color-primary]"],
+        fill: ["text-system-element-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",

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

@@ -17,13 +17,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "block",
   "size-4",
-  "relative",
-  "bg-white",
-  "border-daikinNeutral-600",
+  "border-system-state-neutral-active",
   "border-2",
   "rounded-sm",
+  "relative",
   "appearance-none",
-  "before:text-white",
+  "before:text-system-element-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
@@ -31,37 +30,39 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "indeterminate:before:i-daikin-checkbox-indeterminate",
   "indeterminate:before:size-2.5",
   "focus-visible:outline",
-  "focus-visible:outline-1",
-  "focus-visible:outline-offset-1",
-  "focus-visible:outline-daikinBlue-700",
-  "enabled:group-hover:border-daikinNeutral-400",
-  "enabled:group-active:border-daikinNeutral-700",
-  "enabled:checked:border-daikinBlue-500",
-  "enabled:checked:bg-daikinBlue-500",
-  "enabled:checked:group-hover:bg-daikinBlue-300",
-  "enabled:checked:group-hover:border-daikinBlue-300",
-  "enabled:checked:group-hover:before:text-white",
-  "enabled:checked:group-active:bg-daikinBlue-600",
-  "enabled:checked:group-active:border-daikinBlue-600",
-  "enabled:checked:group-active:before:text-white",
-  "enabled:indeterminate:bg-daikinBlue-500",
-  "enabled:indeterminate:border-daikinBlue-500",
-  "enabled:indeterminate:group-hover:bg-daikinBlue-300",
-  "enabled:indeterminate:group-hover:border-daikinBlue-300",
-  "enabled:indeterminate:group-hover:before:text-white",
-  "enabled:indeterminate:group-active:bg-daikinBlue-600",
-  "enabled:indeterminate:group-active:border-daikinBlue-600",
-  "enabled:indeterminate:group-active:before:text-white",
-  "disabled:border-daikinNeutral-200",
-  "disabled:bg-white",
-  "disabled:checked:bg-daikinNeutral-200",
-  "disabled:indeterminate:bg-daikinNeutral-200"
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-2",
+  "focus-visible:outline-system-state-focus",
+  "enabled:group-hover:border-system-state-neutral-hover",
+  "enabled:group-hover:bg-system-background-surface-hover",
+  "enabled:group-active:border-system-state-neutral-press",
+  "enabled:group-active:bg-system-background-surface-press",
+  "enabled:checked:border-system-state-primary-active",
+  "enabled:checked:bg-system-state-primary-active",
+  "enabled:checked:group-hover:bg-system-state-primary-hover",
+  "enabled:checked:group-hover:border-system-state-primary-hover",
+  "enabled:checked:group-hover:before:text-system-element-text-inverse",
+  "enabled:checked:group-active:bg-system-state-primary-press",
+  "enabled:checked:group-active:border-system-state-primary-press",
+  "enabled:checked:group-active:before:text-system-element-text-inverse",
+  "enabled:indeterminate:bg-system-state-primary-active",
+  "enabled:indeterminate:border-system-state-primary-active",
+  "enabled:indeterminate:group-hover:bg-system-state-primary-hover",
+  "enabled:indeterminate:group-hover:border-system-state-primary-hover",
+  "enabled:indeterminate:group-hover:before:text-system-element-text-inverse",
+  "enabled:indeterminate:group-active:bg-system-state-primary-press",
+  "enabled:indeterminate:group-active:border-system-state-primary-press",
+  "enabled:indeterminate:group-active:before:text-system-element-text-inverse",
+  "disabled:border-system-state-disabled",
+  "disabled:bg-system-element-text-inverse",
+  "disabled:checked:bg-system-state-disabled",
+  "disabled:indeterminate:bg-system-state-disabled"
 ])();
-const cvaLabel = classVarianceAuthority.cva([], {
+const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
   variants: {
     disabled: {
-      false: [],
-      true: ["text-daikinNeutral-200"]
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
     }
   }
 });
@@ -102,7 +103,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
   }
   render() {
     return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
-      <div class="p-2">
+      <span class="p-2">
         <input
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
@@ -115,7 +116,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
           @change=${this._handleChange}
           @click=${this._handleClick}
         />
-      </div>
+      </span>
       <span
         class=${cvaLabel({
       disabled: this.disabled

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

@@ -0,0 +1,367 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dom = require("@floating-ui/dom");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const clickOutside = require("../../controllers/click-outside.cjs");
+const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
+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 cvaButton = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "w-full",
+    "h-full",
+    "min-h-12",
+    "bg-white",
+    "p-3",
+    "border",
+    "border-[--color-base]",
+    "rounded-md",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "text-left",
+    "leading-5",
+    "relative",
+    "outline",
+    "outline-0",
+    "-outline-offset-2",
+    "focus-visible:outline-2",
+    "focus-visible:outline-[--color-focus]",
+    "disabled:text-system-state-disabled",
+    "disabled:border-system-state-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",
+    "enabled:after:text-system-element-text-primary",
+    "disabled:after:text-system-state-disabled"
+  ],
+  {
+    variants: {
+      open: {
+        false: [
+          "enabled:hover:bg-system-background-surface-hover",
+          "enabled:active:bg-system-background-surface-press"
+        ],
+        true: ["enabled:bg-system-background-surface-press"]
+      },
+      error: {
+        false: [
+          "var-color-system-state-neutral-active/color-base",
+          "var-color-system-state-focus/color-focus"
+        ],
+        true: [
+          "var-color-system-state-error-active/color-base",
+          "var-color-system-state-error-active/color-focus"
+        ]
+      },
+      placeholder: {
+        false: ["text-system-element-text-primary"],
+        true: ["text-system-element-text-secondary"]
+      }
+    }
+  }
+);
+const floatingPositionOptions = {
+  placement: "bottom",
+  middleware: [
+    dom.flip({ fallbackStrategy: "initialPlacement" }),
+    dom.offset({ mainAxis: 0 }),
+    dom.size({
+      apply({ rects, elements }) {
+        elements.floating.style.setProperty(
+          "--floating-width",
+          `${rects.reference.width}px`
+        );
+      }
+    })
+  ]
+};
+exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.label = null;
+    this.value = null;
+    this.placeholder = "";
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.open = false;
+    this._hasSelectedItem = false;
+    this._selectedItemLabel = "";
+    this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
+    this._clickOutsideController = new clickOutside.ClickOutsideController(
+      this,
+      this._onClickOutside
+    );
+    this._lastFocusedItem = null;
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.value);
+  }
+  _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) => {
+        var _a;
+        return !item.disabled && ((_a = item.textContent) == null ? void 0 : _a.toLowerCase().startsWith(prefix.toLowerCase()));
+      }
+    );
+    if (!items.length) {
+      this.open = true;
+      return;
+    }
+    const activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const nextItem = items[(focusedItemIndex + 1) % items.length];
+    if (this.open) {
+      nextItem.focus();
+    } else {
+      this._lastFocusedItem = nextItem;
+      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 activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? items.findIndex((item) => item.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;
+      }
+      item.focus();
+      break;
+    }
+  }
+  _handleKeyDown(event) {
+    const printableCharacter = event.key.trim().length === 1 ? event.key : null;
+    if (printableCharacter) {
+      event.preventDefault();
+      this._searchItem(printableCharacter);
+      return;
+    }
+    const operation = {
+      ArrowDown: "down",
+      ArrowUp: "up",
+      Escape: "close"
+    }[event.key];
+    switch (operation) {
+      case "down":
+      case "up":
+        event.preventDefault();
+        this._moveFocus(operation === "up" ? -1 : 1);
+        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;
+    }
+    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.
+   */
+  _handleFocusIn(event) {
+    const target = event.target;
+    if (!target || !this._items.includes(target)) {
+      return;
+    }
+    this._lastFocusedItem = target;
+  }
+  /**
+   * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+   * The dropdown 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() {
+    const items = this._items;
+    const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
+    item == null ? void 0 : item.focus();
+  }
+  render() {
+    return lit.html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
+      <button
+        type="button"
+        class=${cvaButton({
+      open: this.open,
+      error: this.error,
+      placeholder: !this._hasSelectedItem
+    })}
+        ?disabled=${this.disabled}
+        role="combobox"
+        aria-label=${this.label ?? ""}
+        aria-expanded=${this.open && !this.disabled}
+        aria-disabled=${this.disabled}
+        aria-controls="dropdown-items"
+        aria-autocomplete="list"
+        aria-required=${this.required}
+        @click=${this._handleClick}
+        ${this._autoUpdateController.refReference()}
+      >
+        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+      </button>
+      <div
+        id="dropdown-items"
+        popover
+        class="floating-unready:hidden min-w-[--floating-width] max-h-[200px] overflow-y-auto m-0 p-0 absolute left-[--floating-x,0] top-[--floating-y,0] right-auto bottom-auto opacity-1 transition-[opacity] rounded-[4px] shadow-dropdown"
+        aria-label=${this.label ?? ""}
+        role="listbox"
+        @floating-ready=${this._handleFloatingReady}
+        ${this._autoUpdateController.refFloating()}
+      >
+        <slot
+          @select=${this._handleSelect}
+          @focusin=${this._handleFocusIn}
+        ></slot>
+      </div>
+      ${// Activate auto update only when the dropdown is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    this._autoUpdateController.directive(
+      floatingPositionOptions,
+      this.open && !this.disabled
+    )}
+      ${// Listen to click outside only when the dropdown is open.
+    this._clickOutsideController.directive(this.open && !this.disabled)}
+    </div>`;
+  }
+  focus(options) {
+    var _a;
+    (_a = this._button) == null ? void 0 : _a.focus(options);
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("value")) {
+      this._updateFormValue();
+      this._reflectItemsAndLabel();
+    }
+    if (changedProperties.has("open") || changedProperties.has("disabled")) {
+      (_a = this._popover) == null ? void 0 : _a.togglePopover(this.open && !this.disabled);
+      if (changedProperties.get("open") && !this.open && !this.disabled) {
+        this.focus();
+      }
+    }
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this.label = inputGroup.label;
+  }
+};
+exports.DaikinDropdown.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ::slotted {
+      width: 100%;
+    }
+  `;
+exports.DaikinDropdown.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinDropdown.prototype, "label", 2);
+__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);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-dropdown-item" })
+], exports.DaikinDropdown.prototype, "_items", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinDropdown.prototype, "_button", 2);
+__decorateClass([
+  decorators_js.query("div[popover]")
+], exports.DaikinDropdown.prototype, "_popover", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDropdown.prototype, "_hasSelectedItem", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDropdown.prototype, "_selectedItemLabel", 2);
+exports.DaikinDropdown = __decorateClass([
+  decorators_js.customElement("daikin-dropdown")
+], exports.DaikinDropdown);