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

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

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

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

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

package/dist/cjs-dev/components/icon/icons.json.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const icons = { "alarm": { "class": "i-daikin-status-alarm", "color": null }, "close": { "class": "i-daikin-notification-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-status-information", "color": null }, "negative": { "class": "i-daikin-status-negative", "color": null }, "positive": { "class": "i-daikin-status-positive", "color": null }, "warning": { "class": "i-daikin-status-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "error": { "class": "i-daikin-status-error", "color": "#FF4949" }, "cross": { "class": "i-daikin-cross", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null } };
+const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null } };
 exports.icons = icons;

package/dist/cjs-dev/components/icon/icons.json.d.cts

@@ -1,27 +1,35 @@
 declare const _default: {
   "icons": {
+    "logo-positive": {
+      "class": "i-daikin-logo-positive",
+      "color": null
+    },
+    "logo-negative": {
+      "class": "i-daikin-logo-negative",
+      "color": null
+    },
     "alarm": {
-      "class": "i-daikin-status-alarm",
+      "class": "i-daikin-alarm",
       "color": null
     },
     "close": {
-      "class": "i-daikin-notification-close",
+      "class": "i-daikin-close",
       "color": "#a0a0a0"
     },
     "information": {
-      "class": "i-daikin-status-information",
+      "class": "i-daikin-information",
       "color": null
     },
-    "negative": {
-      "class": "i-daikin-status-negative",
+    "error": {
+      "class": "i-daikin-error",
       "color": null
     },
-    "positive": {
-      "class": "i-daikin-status-positive",
+    "success": {
+      "class": "i-daikin-success",
       "color": null
     },
     "warning": {
-      "class": "i-daikin-status-warning",
+      "class": "i-daikin-warning",
       "color": null
     },
     "pagination-chevron-left": {
@@ -32,12 +40,8 @@ declare const _default: {
       "class": "i-daikin-pagination-chevron-right",
       "color": "#414141"
     },
-    "error": {
-      "class": "i-daikin-status-error",
-      "color": "#FF4949"
-    },
-    "cross": {
-      "class": "i-daikin-cross",
+    "profile": {
+      "class": "i-daikin-profile",
       "color": null
     },
     "chevron-up": {
@@ -59,6 +63,18 @@ declare const _default: {
     "sort": {
       "class": "i-daikin-sort",
       "color": null
+    },
+    "negative": {
+      "class": "i-daikin-error",
+      "color": null
+    },
+    "positive": {
+      "class": "i-daikin-success",
+      "color": null
+    },
+    "cross": {
+      "class": "i-daikin-close",
+      "color": null
     }
   }
 }

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

@@ -4,10 +4,11 @@ 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");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -76,7 +77,7 @@ const cvaIconButton = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement {
+exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -86,10 +87,17 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement
     this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
+    this.buttonAriaHaspopup = null;
+    this.buttonAriaExpanded = null;
     this.addEventListener("click", (event) => {
       if (this.disabled) {
         event.stopImmediatePropagation();
       }
+      if (this.type === "submit") {
+        this.requestSubmit();
+      } else if (this.type === "reset") {
+        this.reset();
+      }
     });
   }
   render() {
@@ -117,6 +125,8 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement
         type=${this.type}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
+        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded ?? void 0)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -161,6 +171,12 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
 ], exports.DaikinIconButton.prototype, "buttonRole", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+], exports.DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], exports.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinIconButton.prototype, "_button", 2);

package/dist/cjs-dev/components/icon-button/daikin-icon-button.d.cts

@@ -1,6 +1,6 @@
-import { DDSElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.cjs";
 declare const cvaIconButton: (props?: ({
     color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
@@ -32,7 +32,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends DDSElement {
+export declare class DaikinIconButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -65,6 +65,16 @@ export declare class DaikinIconButton extends DDSElement {
      * Optional ARIA role of the button.
      */
     buttonRole: ARIARole | null;
+    /**
+     * The aria-haspopup of the icon button when `type="button"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup="menu"`.
+     */
+    buttonAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of icon button when `type="button"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    buttonAriaExpanded: boolean | null;
     private _button;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

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

@@ -2,15 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const daikinAccordion = require("./accordion/daikin-accordion.cjs");
 const daikinAccordionItem = require("./accordion-item/daikin-accordion-item.cjs");
+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 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");
@@ -20,12 +24,19 @@ const daikinInputGroup = require("./input-group/daikin-input-group.cjs");
 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 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");
@@ -49,6 +60,10 @@ Object.defineProperty(exports, "DaikinAccordionItem", {
   enumerable: true,
   get: () => daikinAccordionItem.DaikinAccordionItem
 });
+Object.defineProperty(exports, "DaikinAvatar", {
+  enumerable: true,
+  get: () => daikinAvatar.DaikinAvatar
+});
 Object.defineProperty(exports, "DaikinBreadcrumb", {
   enumerable: true,
   get: () => daikinBreadcrumb.DaikinBreadcrumb
@@ -61,6 +76,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
@@ -85,6 +104,14 @@ Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
 });
+Object.defineProperty(exports, "DaikinCheckboxGroup", {
+  enumerable: true,
+  get: () => daikinCheckboxGroup.DaikinCheckboxGroup
+});
+Object.defineProperty(exports, "DaikinDatePicker", {
+  enumerable: true,
+  get: () => daikinDatePicker.DaikinDatePicker
+});
 Object.defineProperty(exports, "DaikinDropdown", {
   enumerable: true,
   get: () => daikinDropdown.DaikinDropdown
@@ -122,6 +149,30 @@ Object.defineProperty(exports, "DaikinListItem", {
   enumerable: true,
   get: () => daikinListItem.DaikinListItem
 });
+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
@@ -146,6 +197,10 @@ 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

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

@@ -1,14 +1,18 @@
 export * from "./accordion/index.cjs";
 export * from "./accordion-item/index.cjs";
+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 "./date-picker/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
 export * from "./icon/index.cjs";
@@ -18,12 +22,19 @@ export * from "./input-group/index.cjs";
 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 "./select/index.cjs";
+export * from "./slider/index.cjs";
 export * from "./tab/index.cjs";
 export * from "./tab-panels/index.cjs";
 export * from "./table/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-date-picker,daikin-dropdown,daikin-radio-group,daikin-checkbox-group,daikin-select,daikin-text-field,daikin-text-area"
   })
 ], exports.DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([