@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

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

@@ -6,12 +6,17 @@ const daikinAvatar = require("./avatar/daikin-avatar.cjs");
 const daikinBreadcrumb = require("./breadcrumb/daikin-breadcrumb.cjs");
 const daikinBreadcrumbItem = require("./breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./button/daikin-button.cjs");
+const daikinCalendar = require("./calendar/daikin-calendar.cjs");
 const daikinCard = require("./card/daikin-card.cjs");
 const daikinCardFooter = require("./card-footer/daikin-card-footer.cjs");
 const daikinCardHeader = require("./card-header/daikin-card-header.cjs");
 const daikinCarousel = require("./carousel/daikin-carousel.cjs");
 const daikinCarouselItem = require("./carousel-item/daikin-carousel-item.cjs");
 const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
+const daikinCheckboxGroup = require("./checkbox-group/daikin-checkbox-group.cjs");
+const daikinChip = require("./chip/daikin-chip.cjs");
+const daikinCombobox = require("./combobox/daikin-combobox.cjs");
+const daikinDatePicker = require("./date-picker/daikin-date-picker.cjs");
 const daikinDropdown = require("./dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./dropdown-item/daikin-dropdown-item.cjs");
 const daikinIcon = require("./icon/daikin-icon.cjs");
@@ -22,12 +27,19 @@ const daikinLink = require("./link/daikin-link.cjs");
 const daikinList = require("./list/daikin-list.cjs");
 const daikinListItem = require("./list-item/daikin-list-item.cjs");
 const daikinLoading = require("./loading/daikin-loading.cjs");
+const daikinLogo = require("./logo/daikin-logo.cjs");
+const daikinMenu = require("./menu/daikin-menu.cjs");
+const daikinModal = require("./modal/daikin-modal.cjs");
+const daikinModalFooter = require("./modal-footer/daikin-modal-footer.cjs");
+const daikinModalHeader = require("./modal-header/daikin-modal-header.cjs");
 const daikinPagination = require("./pagination/daikin-pagination.cjs");
 const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./progress-indicator/daikin-progress-indicator.cjs");
 const daikinProgressIndicatorItem = require("./progress-indicator-item/daikin-progress-indicator-item.cjs");
 const daikinRadio = require("./radio/daikin-radio.cjs");
+const daikinRadioGroup = require("./radio-group/daikin-radio-group.cjs");
 const daikinSelect = require("./select/daikin-select.cjs");
+const daikinSlider = require("./slider/daikin-slider.cjs");
 const daikinTab = require("./tab/daikin-tab.cjs");
 const daikinTabPanels = require("./tab-panels/daikin-tab-panels.cjs");
 const daikinTable = require("./table/daikin-table.cjs");
@@ -36,6 +48,8 @@ const daikinTableHeaderCell = require("./table-header-cell/daikin-table-header-c
 const daikinTabs = require("./tabs/daikin-tabs.cjs");
 const daikinTextArea = require("./text-area/daikin-text-area.cjs");
 const daikinTextField = require("./text-field/daikin-text-field.cjs");
+const daikinTextMaskedField = require("./text-masked-field/daikin-text-masked-field.cjs");
+const daikinTimePicker = require("./time-picker/daikin-time-picker.cjs");
 const daikinToastNotification = require("./toast-notification/daikin-toast-notification.cjs");
 const daikinToastNotificationManager = require("./toast-notification-manager/daikin-toast-notification-manager.cjs");
 const daikinToggle = require("./toggle/daikin-toggle.cjs");
@@ -67,6 +81,10 @@ Object.defineProperty(exports, "DaikinButton", {
   enumerable: true,
   get: () => daikinButton.DaikinButton
 });
+Object.defineProperty(exports, "DaikinCalendar", {
+  enumerable: true,
+  get: () => daikinCalendar.DaikinCalendar
+});
 Object.defineProperty(exports, "DaikinCard", {
   enumerable: true,
   get: () => daikinCard.DaikinCard
@@ -91,6 +109,23 @@ Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
 });
+Object.defineProperty(exports, "DaikinCheckboxGroup", {
+  enumerable: true,
+  get: () => daikinCheckboxGroup.DaikinCheckboxGroup
+});
+Object.defineProperty(exports, "DaikinChip", {
+  enumerable: true,
+  get: () => daikinChip.DaikinChip
+});
+Object.defineProperty(exports, "DaikinCombobox", {
+  enumerable: true,
+  get: () => daikinCombobox.DaikinCombobox
+});
+exports.defaultFilterFn = daikinCombobox.defaultFilterFn;
+Object.defineProperty(exports, "DaikinDatePicker", {
+  enumerable: true,
+  get: () => daikinDatePicker.DaikinDatePicker
+});
 Object.defineProperty(exports, "DaikinDropdown", {
   enumerable: true,
   get: () => daikinDropdown.DaikinDropdown
@@ -132,6 +167,26 @@ Object.defineProperty(exports, "DaikinLoading", {
   enumerable: true,
   get: () => daikinLoading.DaikinLoading
 });
+Object.defineProperty(exports, "DaikinLogo", {
+  enumerable: true,
+  get: () => daikinLogo.DaikinLogo
+});
+Object.defineProperty(exports, "DaikinMenu", {
+  enumerable: true,
+  get: () => daikinMenu.DaikinMenu
+});
+Object.defineProperty(exports, "DaikinModal", {
+  enumerable: true,
+  get: () => daikinModal.DaikinModal
+});
+Object.defineProperty(exports, "DaikinModalFooter", {
+  enumerable: true,
+  get: () => daikinModalFooter.DaikinModalFooter
+});
+Object.defineProperty(exports, "DaikinModalHeader", {
+  enumerable: true,
+  get: () => daikinModalHeader.DaikinModalHeader
+});
 Object.defineProperty(exports, "DaikinPagination", {
   enumerable: true,
   get: () => daikinPagination.DaikinPagination
@@ -152,10 +207,18 @@ Object.defineProperty(exports, "DaikinRadio", {
   enumerable: true,
   get: () => daikinRadio.DaikinRadio
 });
+Object.defineProperty(exports, "DaikinRadioGroup", {
+  enumerable: true,
+  get: () => daikinRadioGroup.DaikinRadioGroup
+});
 Object.defineProperty(exports, "DaikinSelect", {
   enumerable: true,
   get: () => daikinSelect.DaikinSelect
 });
+Object.defineProperty(exports, "DaikinSlider", {
+  enumerable: true,
+  get: () => daikinSlider.DaikinSlider
+});
 Object.defineProperty(exports, "DaikinTab", {
   enumerable: true,
   get: () => daikinTab.DaikinTab
@@ -188,6 +251,24 @@ Object.defineProperty(exports, "DaikinTextField", {
   enumerable: true,
   get: () => daikinTextField.DaikinTextField
 });
+Object.defineProperty(exports, "DaikinTextMaskedField", {
+  enumerable: true,
+  get: () => daikinTextMaskedField.DaikinTextMaskedField
+});
+Object.defineProperty(exports, "DaikinTimePicker", {
+  enumerable: true,
+  get: () => daikinTimePicker.DaikinTimePicker
+});
+exports.calcDigitInput = daikinTimePicker.calcDigitInput;
+exports.formatPartsForUI = daikinTimePicker.formatPartsForUI;
+exports.formatTimeForUI = daikinTimePicker.formatTimeForUI;
+exports.from24HourFormat = daikinTimePicker.from24HourFormat;
+exports.getTimeItemInSelection = daikinTimePicker.getTimeItemInSelection;
+exports.isTimeOutOfRange = daikinTimePicker.isTimeOutOfRange;
+exports.isValidValueTime = daikinTimePicker.isValidValueTime;
+exports.parsePartsFromUIValue = daikinTimePicker.parsePartsFromUIValue;
+exports.to24HourFormat = daikinTimePicker.to24HourFormat;
+exports.tryParseTimeFromUIValue = daikinTimePicker.tryParseTimeFromUIValue;
 Object.defineProperty(exports, "DaikinToastNotification", {
   enumerable: true,
   get: () => daikinToastNotification.DaikinToastNotification

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

@@ -4,12 +4,17 @@ export * from "./avatar/index.cjs";
 export * from "./breadcrumb/index.cjs";
 export * from "./breadcrumb-item/index.cjs";
 export * from "./button/index.cjs";
+export * from "./calendar/index.cjs";
 export * from "./card/index.cjs";
 export * from "./card-footer/index.cjs";
 export * from "./card-header/index.cjs";
 export * from "./carousel/index.cjs";
 export * from "./carousel-item/index.cjs";
 export * from "./checkbox/index.cjs";
+export * from "./checkbox-group/index.cjs";
+export * from "./chip/index.cjs";
+export * from "./combobox/index.cjs";
+export * from "./date-picker/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
 export * from "./icon/index.cjs";
@@ -20,12 +25,19 @@ export * from "./link/index.cjs";
 export * from "./list/index.cjs";
 export * from "./list-item/index.cjs";
 export * from "./loading/index.cjs";
+export * from "./logo/index.cjs";
+export * from "./menu/index.cjs";
+export * from "./modal/index.cjs";
+export * from "./modal-footer/index.cjs";
+export * from "./modal-header/index.cjs";
 export * from "./pagination/index.cjs";
 export * from "./progress-bar/index.cjs";
 export * from "./progress-indicator/index.cjs";
 export * from "./progress-indicator-item/index.cjs";
 export * from "./radio/index.cjs";
+export * from "./radio-group/index.cjs";
 export * from "./select/index.cjs";
+export * from "./slider/index.cjs";
 export * from "./tab/index.cjs";
 export * from "./tab-panels/index.cjs";
 export * from "./table/index.cjs";
@@ -34,6 +46,8 @@ export * from "./table-header-cell/index.cjs";
 export * from "./tabs/index.cjs";
 export * from "./text-area/index.cjs";
 export * from "./text-field/index.cjs";
+export * from "./text-masked-field/index.cjs";
+export * from "./time-picker/index.cjs";
 export * from "./toast-notification/index.cjs";
 export * from "./toast-notification-manager/index.cjs";
 export * from "./toggle/index.cjs";

package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.cjs

@@ -7,6 +7,7 @@ const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const notificationCommon = require("../../utils/notification-common.cjs");
+require("../icon-button/daikin-icon-button.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -36,30 +37,24 @@ exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsEle
     const formattedTimestamp = this.timestamp ? notificationCommon.formatDate(this.timestamp) : null;
     return lit.html`<aside
       class=${notificationCommon.cvaContainer({ variant: "inline", status: this.status })}
-      role="status"
     >
       <div class=${notificationCommon.cvaContent({ layout: this.layout })}>
         <slot class=${notificationCommon.cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot
-          class=${notificationCommon.cvaDescription({ layout: this.layout })}
-          name="description"
-        ></slot>
+        <slot class=${notificationCommon.cvaDescription({ layout: this.layout })}></slot>
         ${formattedTimestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
               >${formattedTimestamp}</span
             >` : lit.nothing}
       </div>
       <slot name="action" class="flex-none"></slot>
-      ${this.closable ? lit.html`
-            <daikin-icon-button
-              variant="ghost"
-              button-aria-label="Close"
-              @click=${this._handleClickClose}
-            >
-              <span
-                class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-cross"
-              ></span>
-            </daikin-icon-button>
-          ` : lit.nothing}
+      ${this.closable ? lit.html`<daikin-icon-button
+            variant="ghost"
+            button-aria-label="Close"
+            @click=${this._handleClickClose}
+          >
+            <span
+              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-close"
+            ></span>
+          </daikin-icon-button>` : lit.nothing}
     </aside>`;
   }
 };
@@ -76,10 +71,10 @@ exports.DaikinInlineNotification.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinInlineNotification.prototype, "status", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinInlineNotification.prototype, "layout", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })

package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.d.cts

@@ -6,10 +6,12 @@ import { ToastNotificationVariantProps } from "../toast-notification/index.cjs";
  * An inline notification appears within the content of the application, usually embedded directly within a page or section.
  * Inline notification is more persistent than toast notification and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
  *
+ * @tokenImports ../../utils/notification-common.ts
+ *
  * @fires close - A custom event emitted when a user clicks the close button.
  *
+ * @slot A slot for the inline notification description content.
  * @slot title - A slot for the title content.
- * @slot description - A slot for the description content.
  *
  * @example
  *

package/dist/cjs-dev/components/input-group/daikin-input-group.cjs

@@ -36,14 +36,14 @@ const cvaHelper = classVarianceAuthority.cva(
           "text-ddt-color-common-danger-default",
           "font-bold",
           "before:size-4",
-          "before:i-daikin-status-error",
+          "before:i-daikin-error",
           "before:flex-none"
         ],
         textareaLimitExceedError: [
           "text-ddt-color-common-danger-default",
           "font-bold",
           "before:size-4",
-          "before:i-daikin-status-error",
+          "before:i-daikin-error",
           "before:flex-none"
         ],
         none: ["hidden"]
@@ -111,7 +111,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
       textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
     }[helperTextVariant];
-    return lit.html`<fieldset class="content" ?disabled=${this.disabled}>
+    return lit.html`<fieldset class="contents" ?disabled=${this.disabled}>
       <label
         class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
       >
@@ -184,7 +184,7 @@ __decorateClass([
 ], exports.DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({
-    selector: "daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-field,daikin-text-area"
+    selector: "daikin-checkbox-group,daikin-combobox,daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-area,daikin-text-field,daikin-time-picker"
   })
 ], exports.DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

package/dist/cjs-dev/components/input-group/daikin-input-group.d.cts

@@ -5,11 +5,15 @@ import { DDSElement } from "../../base/index.cjs";
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
+ * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
+ * - `daikin-input-group` > `daikin-combobox`
+ * - `daikin-input-group` > `daikin-date-picker`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
  * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-text-area`
  * - `daikin-input-group` > `daikin-text-field`
+ * - `daikin-input-group` > `daikin-time-picker`
  *
  * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
@@ -18,13 +22,51 @@ import { DDSElement } from "../../base/index.cjs";
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
  * <!-- Import the following as necessary. -->
+ * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
- * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/select/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-area/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
+ * import "@daikin-oss/design-system-web-components/components/time-picker/index.js";
+ * ```
+ *
+ * With Checkbox Group:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-checkbox-group>
+ *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ *   </daikin-checkbox-group>
+ * </daikin-input-group>
+ * ```
+ *
+ * With Combobox:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-combobox></daikin-combobox>
+ * </daikin-input-group>
+ *
+ * <script>
+ *   const combobox = document.querySelector("daikin-combobox");
+ *   combobox.items = ["Apple", "Banana", "Cherry"];
+ * </script>
+ * ```
+ *
+ * With Date Picker:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-date-picker></daikin-date-picker>
+ * </daikin-input-group>
  * ```
  *
  * With Dropdown:
@@ -86,6 +128,13 @@ import { DDSElement } from "../../base/index.cjs";
  *   <daikin-text-area value="Content of TextArea"></daikin-text-area>
  * </daikin-input-group>
  * ```
+ *
+ * With Time Picker:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-time-picker></daikin-time-picker>
+ * </daikin-input-group>
  * ```
  */
 export declare class DaikinInputGroup extends DDSElement {

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

@@ -1,24 +1,96 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+require("../list-item/daikin-list-item.cjs");
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators2.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators2[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 exports.DaikinList = class DaikinList extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.listRole = "list";
+  }
+  _reflectSlotProperties() {
+    for (const daikinListItem of this._listItems) {
+      daikinListItem.listItemRole = this.listRole === "menu" ? "menuitem" : "listitem";
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
+  handleKeyDown(event) {
+    const direction = {
+      ArrowDown: "down",
+      ArrowUp: "up",
+      Home: "home",
+      End: "end"
+    }[event.key];
+    if (!direction) {
+      return;
+    }
+    event.preventDefault();
+    const listItems = this._listItems.filter(({ disabled }) => !disabled);
+    const activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? listItems.findIndex((item) => item === activeElement) : -1;
+    if (focusedItemIndex < 0) {
+      return;
+    }
+    if (direction === "home") {
+      const nextItem2 = listItems[0];
+      nextItem2.focus();
+      return;
+    }
+    if (direction === "end") {
+      const nextItem2 = listItems[listItems.length - 1];
+      nextItem2.focus();
+      return;
+    }
+    const moveOffset = direction === "up" ? -1 : 1;
+    const nextItem = listItems[(focusedItemIndex + moveOffset + listItems.length) % listItems.length];
+    nextItem.focus();
+  }
   render() {
-    return lit.html`<div role="list">
-      <slot></slot>
+    return lit.html`<div role=${this.listRole}>
+      <slot
+        @keydown=${this.handleKeyDown}
+        @slotchange=${this._handleSlotChange}
+      ></slot>
     </div>`;
   }
+  /**
+   * Focuses on the first list item in the slot.
+   * @private
+   */
+  focusFirstItem() {
+    this._listItems[0].focus();
+  }
 };
+exports.DaikinList.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinList.prototype, "listRole", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-list-item" })
+], exports.DaikinList.prototype, "_listItems", 2);
 exports.DaikinList = __decorateClass([
   decorators.ddsElement("daikin-list")
 ], exports.DaikinList);

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

@@ -4,6 +4,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * Hierarchy:
  * - `daikin-list` > `daikin-list-item`
+ * - `daikin-menu` > `daikin-list` > `daikin-list-item`
  *
  * @slot - A slot for the list items. Place `daikin-list-item` elements here.
  *
@@ -23,7 +24,22 @@ import { DDSElement } from "../../base/index.cjs";
  * ```
  */
 export declare class DaikinList extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The ARIA `role` of the component.
+     * Controlled by the `daikin-menu` component if used within it.
+     */
+    listRole: "list" | "menu";
+    private readonly _listItems;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
+    private handleKeyDown;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the first list item in the slot.
+     * @private
+     */
+    focusFirstItem(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
@@ -43,7 +43,19 @@ const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-le
     }
   }
 });
-const cvaIcon = classVarianceAuthority.cva(["icon-size-6"], {
+const WRAPPER = classVarianceAuthority.cva([
+  "group",
+  "flex",
+  "justify-between",
+  "items-center",
+  "w-full",
+  "min-h-12",
+  "p-3",
+  "text-left",
+  "relative",
+  "break-all"
+])();
+const cvaIcon = classVarianceAuthority.cva(["icon-size-6", "slotted:flex-none"], {
   variants: {
     position: {
       left: [],
@@ -59,6 +71,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
   constructor() {
     super();
     this.type = "button";
+    this.listItemRole = "listitem";
     this.href = null;
     this.disabled = false;
     this.addEventListener("click", (event) => {
@@ -84,7 +97,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}
       >
-        <span class="block -ml-1"></span>
+        <span class="flex-none block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;
@@ -102,10 +115,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
         </a>`,
       text: () => lit.html`<span class=${INNER_CN}>${content}</span>`
     }[this.type]();
-    return lit.html`<div
-      class="group flex justify-between items-center w-full min-h-12 p-3 text-left relative"
-      role="listitem"
-    >
+    return lit.html`<div class=${WRAPPER} role=${this.listItemRole}>
       ${list}
       <slot
         name="action"
@@ -133,10 +143,18 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
 };
 exports.DaikinListItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinListItem.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinListItem.prototype, "listItemRole", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinListItem.prototype, "href", 2);
@@ -149,3 +167,5 @@ __decorateClass([
 exports.DaikinListItem = __decorateClass([
   decorators.ddsElement("daikin-list-item")
 ], exports.DaikinListItem);
+const DaikinListItem2 = exports.DaikinListItem;
+exports.default = DaikinListItem2;

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

@@ -2,15 +2,16 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
  *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ * - `daikin-menu` > `daikin-list` > `daikin-list-item`
+ *
  * The following types are available:
  *
  * - `button`: Uses `<button>` tag.
  * - `link`: Uses `<a>` tag.
  * - `text`: Uses `<span>` tag.
  *
- * Hierarchy:
- * - `daikin-list` > `daikin-list-item`
- *
  * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event). Suppressed if `disabled` is true.
  *
  * @slot - A slot for the list item label content.
@@ -37,6 +38,11 @@ export declare class DaikinListItem extends DDSElement {
      * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
      */
     type: "button" | "link" | "text";
+    /**
+     * The ARIA `role` of the component.
+     * Controlled by the `daikin-list` component.
+     */
+    listItemRole: "listitem" | "menuitem";
     /**
      * Link `href`.
      * Only used if the `type` is `"link"`.

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

@@ -54,7 +54,6 @@ exports.DaikinLoading = class DaikinLoading extends lit.LitElement {
     return lit.html`<div
       class=${cvaLoadingContainer({ background: this.background })}
       role="progressbar"
-      aria-busy="true"
       aria-label="Loading"
     >
       <div class="size-fit rotate-45">
@@ -68,6 +67,7 @@ exports.DaikinLoading.styles = lit.css`
 
     :host {
       display: block;
+      user-select: none;
     }
 
     :host([size="small"]) {

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

@@ -21,6 +21,7 @@ export declare class DaikinLoading extends LitElement {
     size: "small" | "medium";
     /**
      * Variant of the loading.
+     * When the loading component is used against a similar background color, the spinning icon might be difficult to distinguish. To address this, we provide a variant of the icon that includes its own background area, ensuring visibility in such scenarios.
      */
     background: boolean;
     render(): import('lit-html').TemplateResult<1>;