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

package/dist/es/components/dropdown/daikin-dropdown.js

@@ -1,16 +1,18 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ClickOutsideController } from "../../controllers/click-outside.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
+import "../dropdown-item/daikin-dropdown-item.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -43,6 +45,7 @@ const cvaButton = cva(
     "outline",
     "outline-1",
     "-outline-offset-1",
+    "break-all",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "enabled:outline-[--color-base]",
@@ -98,11 +101,9 @@ const floatingPositionOptions = {
     })
   ]
 };
-let DaikinDropdown = class extends DDSElement {
+let DaikinDropdown = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = null;
     this.placeholder = "";
     this.disabled = false;
     this.required = false;
@@ -159,24 +160,17 @@ let DaikinDropdown = class extends DDSElement {
       this.open = true;
       return;
     }
-    const items = this._items;
+    const items = this._items.filter(({ disabled }) => !disabled);
     const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const focusedItemIndex = activeElement ? items.findIndex((item2) => item2.contains(activeElement)) : -1;
     if (focusedItemIndex === -1) {
       moveOffset = 1;
     }
-    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
-      index = (index + items.length) % items.length;
-      const item = items[index];
-      if (item.disabled) {
-        continue;
-      }
-      item.focus();
-      break;
-    }
+    const item = items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))];
+    item.focus();
   }
   _updateFormValue() {
-    this._internals.setFormValue(JSON.stringify(this.value));
+    this.setFormValue(this.value);
   }
   _updateItemsSelectable() {
     for (const item of this._items) {
@@ -184,7 +178,7 @@ let DaikinDropdown = class extends DDSElement {
     }
   }
   _updateValueBySelectedOptions() {
-    this.value = this.selectedOptions.at(-1) ?? null;
+    this.value = this.selectedOptions.at(-1) ?? "";
   }
   _updateSelectedOptionsByValue() {
     this.selectedOptions = this.value ? [this.value] : [];
@@ -200,6 +194,14 @@ let DaikinDropdown = class extends DDSElement {
     this.value = value;
     this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
   }
+  _handleFocusOut(event) {
+    if (!event.relatedTarget) {
+      if (!this.multiple && this._lastFocusedItem) {
+        this._handleSelectOption(this._lastFocusedItem.value);
+      }
+      this.open = false;
+    }
+  }
   /**
    * Removes the last selected option.
    *
@@ -209,10 +211,10 @@ let DaikinDropdown = class extends DDSElement {
   _removeLastSelection() {
     if (this.multiple) {
       this.selectedOptions = this.selectedOptions.slice(0, -1);
-      this.value = this.selectedOptions.at(-1) ?? null;
+      this.value = this.selectedOptions.at(-1) ?? "";
     } else {
       this.selectedOptions = [];
-      this.value = null;
+      this.value = "";
     }
   }
   _handleClick() {
@@ -222,6 +224,16 @@ let DaikinDropdown = class extends DDSElement {
     this.open = !this.open;
   }
   _handleKeyDown(event) {
+    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.open = true;
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this.open = false;
+      }
+      return;
+    }
     if (!isSimpleKeyEvent(event)) {
       return;
     }
@@ -234,6 +246,8 @@ let DaikinDropdown = class extends DDSElement {
     const operation = {
       ArrowDown: "down",
       ArrowUp: "up",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
       Escape: "close"
     }[event.key];
     switch (operation) {
@@ -242,6 +256,11 @@ let DaikinDropdown = class extends DDSElement {
         event.preventDefault();
         this._moveFocus(operation === "up" ? -1 : 1);
         break;
+      case "pageDown":
+      case "pageUp":
+        event.preventDefault();
+        this._moveFocus(operation === "pageUp" ? -10 : 10);
+        break;
       case "close":
         event.preventDefault();
         this._handleKeyDownEscape();
@@ -306,15 +325,18 @@ let DaikinDropdown = class extends DDSElement {
         aria-controls="dropdown-items"
         aria-autocomplete="list"
         aria-required=${this.required}
+        aria-haspopup="listbox"
         @click=${this._handleClick}
         ${this._autoUpdateController.refReference()}
       >
-        ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
+        <span class="truncate">
+          ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? this.selectedOptions.length === 1 ? `one item selected` : `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
+        </span>
       </button>
       <div
         id="dropdown-items"
         popover
-        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded"
+        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded max-w-min break-all"
         aria-label=${ifDefined(this._label ?? void 0)}
         role="listbox"
         @floating-ready=${this._handleFloatingReady}
@@ -324,6 +346,7 @@ let DaikinDropdown = class extends DDSElement {
           @slotchange=${this._handleSlotChange}
           @select=${this._handleSelect}
           @focusin=${this._handleFocusIn}
+          @focusout=${this._handleFocusOut}
         ></slot>
       </div>
       ${// Activate auto update only when the dropdown is open.
@@ -410,10 +433,6 @@ DaikinDropdown.styles = css`
       width: 100%;
     }
   `;
-DaikinDropdown.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinDropdown.prototype, "value", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinDropdown.prototype, "placeholder", 2);

package/dist/es/components/dropdown-item/daikin-dropdown-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

package/dist/es/components/icon/daikin-icon.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

package/dist/es/components/icon/icons.json.d.ts

@@ -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,14 +40,6 @@ declare const _default: {
       "class": "i-daikin-pagination-chevron-right",
       "color": "#414141"
     },
-    "error": {
-      "class": "i-daikin-status-error",
-      "color": "#FF4949"
-    },
-    "cross": {
-      "class": "i-daikin-cross",
-      "color": null
-    },
     "profile": {
       "class": "i-daikin-profile",
       "color": null
@@ -63,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/es/components/icon/icons.json.js

@@ -1,4 +1,4 @@
-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 }, "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 } };
+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 } };
 export {
   icons
 };

package/dist/es/components/icon-button/daikin-icon-button.d.ts

@@ -1,6 +1,6 @@
-import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 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/es/components/icon-button/daikin-icon-button.js

@@ -1,11 +1,12 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -74,7 +75,7 @@ const cvaIconButton = cva(
     }
   }
 );
-let DaikinIconButton = class extends DDSElement {
+let DaikinIconButton = class extends DDSFormSubmitElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -84,10 +85,17 @@ let DaikinIconButton = class extends 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() {
@@ -115,6 +123,8 @@ let DaikinIconButton = class extends DDSElement {
         type=${this.type}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
+        aria-haspopup=${ifDefined(this.buttonAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined(this.buttonAriaExpanded ?? void 0)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -159,6 +169,12 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true, attribute: "button-role" })
 ], DaikinIconButton.prototype, "buttonRole", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+], DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], DaikinIconButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
   query("button")
 ], DaikinIconButton.prototype, "_button", 2);

package/dist/es/components/index.d.ts

@@ -4,12 +4,15 @@ export * from "./avatar/index.js";
 export * from "./breadcrumb/index.js";
 export * from "./breadcrumb-item/index.js";
 export * from "./button/index.js";
+export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./card-footer/index.js";
 export * from "./card-header/index.js";
 export * from "./carousel/index.js";
 export * from "./carousel-item/index.js";
 export * from "./checkbox/index.js";
+export * from "./checkbox-group/index.js";
+export * from "./date-picker/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
 export * from "./icon/index.js";
@@ -20,12 +23,18 @@ export * from "./link/index.js";
 export * from "./list/index.js";
 export * from "./list-item/index.js";
 export * from "./loading/index.js";
+export * from "./logo/index.js";
+export * from "./menu/index.js";
+export * from "./modal/index.js";
+export * from "./modal-footer/index.js";
+export * from "./modal-header/index.js";
 export * from "./pagination/index.js";
 export * from "./progress-bar/index.js";
 export * from "./progress-indicator/index.js";
 export * from "./progress-indicator-item/index.js";
 export * from "./radio/index.js";
 export * from "./select/index.js";
+export * from "./slider/index.js";
 export * from "./tab/index.js";
 export * from "./tab-panels/index.js";
 export * from "./table/index.js";

package/dist/es/components/index.js

@@ -4,12 +4,15 @@ import { DaikinAvatar } from "./avatar/daikin-avatar.js";
 import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.js";
+import { DaikinCalendar } from "./calendar/daikin-calendar.js";
 import { DaikinCard } from "./card/daikin-card.js";
 import { DaikinCardFooter } from "./card-footer/daikin-card-footer.js";
 import { DaikinCardHeader } from "./card-header/daikin-card-header.js";
 import { DaikinCarousel } from "./carousel/daikin-carousel.js";
 import { DaikinCarouselItem } from "./carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
+import { DaikinCheckboxGroup } from "./checkbox-group/daikin-checkbox-group.js";
+import { DaikinDatePicker } from "./date-picker/daikin-date-picker.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
 import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
@@ -20,12 +23,18 @@ import { DaikinLink } from "./link/daikin-link.js";
 import { DaikinList } from "./list/daikin-list.js";
 import { DaikinListItem } from "./list-item/daikin-list-item.js";
 import { DaikinLoading } from "./loading/daikin-loading.js";
+import { DaikinLogo } from "./logo/daikin-logo.js";
+import { DaikinMenu } from "./menu/daikin-menu.js";
+import { DaikinModal } from "./modal/daikin-modal.js";
+import { DaikinModalFooter } from "./modal-footer/daikin-modal-footer.js";
+import { DaikinModalHeader } from "./modal-header/daikin-modal-header.js";
 import { DaikinPagination } from "./pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./progress-indicator/daikin-progress-indicator.js";
 import { DaikinProgressIndicatorItem } from "./progress-indicator-item/daikin-progress-indicator-item.js";
 import { DaikinRadio } from "./radio/daikin-radio.js";
 import { DaikinSelect } from "./select/daikin-select.js";
+import { DaikinSlider } from "./slider/daikin-slider.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
 import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
 import { DaikinTable } from "./table/daikin-table.js";
@@ -48,12 +57,15 @@ export {
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCalendar,
   DaikinCard,
   DaikinCardFooter,
   DaikinCardHeader,
   DaikinCarousel,
   DaikinCarouselItem,
   DaikinCheckbox,
+  DaikinCheckboxGroup,
+  DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
@@ -64,12 +76,18 @@ export {
   DaikinList,
   DaikinListItem,
   DaikinLoading,
+  DaikinLogo,
+  DaikinMenu,
+  DaikinModal,
+  DaikinModalFooter,
+  DaikinModalHeader,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
   DaikinProgressIndicatorItem,
   DaikinRadio,
   DaikinSelect,
+  DaikinSlider,
   DaikinTab,
   DaikinTabPanels,
   DaikinTable,

package/dist/es/components/inline-notification/daikin-inline-notification.d.ts

@@ -6,10 +6,12 @@ import { ToastNotificationVariantProps } from "../toast-notification/index.js";
  * 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/es/components/inline-notification/daikin-inline-notification.js

@@ -1,10 +1,11 @@
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { formatDate, cvaContainer, cvaContent, cvaTitle, cvaDescription, cvaTimestamp } from "../../utils/notification-common.js";
+import "../icon-button/daikin-icon-button.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -34,30 +35,24 @@ let DaikinInlineNotification = class extends DDSElement {
     const formattedTimestamp = this.timestamp ? formatDate(this.timestamp) : null;
     return html`<aside
       class=${cvaContainer({ variant: "inline", status: this.status })}
-      role="status"
     >
       <div class=${cvaContent({ layout: this.layout })}>
         <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot
-          class=${cvaDescription({ layout: this.layout })}
-          name="description"
-        ></slot>
+        <slot class=${cvaDescription({ layout: this.layout })}></slot>
         ${formattedTimestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
               >${formattedTimestamp}</span
             >` : nothing}
       </div>
       <slot name="action" class="flex-none"></slot>
-      ${this.closable ? 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>
-          ` : nothing}
+      ${this.closable ? 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>` : nothing}
     </aside>`;
   }
 };
@@ -74,10 +69,10 @@ DaikinInlineNotification.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinInlineNotification.prototype, "status", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinInlineNotification.prototype, "layout", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es/components/input-group/daikin-input-group.d.ts

@@ -5,6 +5,7 @@ import { DDSElement } from "../../base/index.js";
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
+ * - `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`
@@ -18,6 +19,7 @@ import { DDSElement } from "../../base/index.js";
  * ```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/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";
@@ -27,6 +29,14 @@ import { DDSElement } from "../../base/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
  * ```
  *
+ * With Date Picker:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-date-picker></daikin-date-picker>
+ * </daikin-input-group>
+ * ```
+ *
  * With Dropdown:
  *
  * ```html
@@ -57,6 +67,18 @@ import { DDSElement } from "../../base/index.js";
  * </daikin-input-group>
  * ```
  *
+ * 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 Select:
  *
  * ```html