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

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

@@ -1,10 +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 { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
+import { isSimilarToClick } from "../../utils/is-similar-to-click.js";
+import "../checkbox/daikin-checkbox.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,35 +21,49 @@ const cvaOption = 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"]
       }
     }
   }
@@ -58,30 +74,72 @@ let DaikinDropdownItem = class extends DDSElement {
     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(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 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 ? 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>` : 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.
@@ -89,7 +147,7 @@ let DaikinDropdownItem = class extends DDSElement {
    */
   focus(options) {
     var _a;
-    (_a = this._button) == null ? void 0 : _a.focus(options);
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
   }
 };
 DaikinDropdownItem.styles = css`
@@ -110,8 +168,11 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinDropdownItem.prototype, "selected", 2);
 __decorateClass([
-  query("button")
-], DaikinDropdownItem.prototype, "_button", 2);
+  property({ type: Boolean, reflect: true })
+], DaikinDropdownItem.prototype, "selectable", 2);
+__decorateClass([
+  query("button,span[role=option]")
+], DaikinDropdownItem.prototype, "_focusableElement", 2);
 DaikinDropdownItem = __decorateClass([
   ddsElement("daikin-dropdown-item")
 ], DaikinDropdownItem);

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,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/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 }, "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

@@ -1,14 +1,18 @@
 export * from "./accordion/index.js";
 export * from "./accordion-item/index.js";
+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";
@@ -18,12 +22,19 @@ export * from "./input-group/index.js";
 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

@@ -1,14 +1,18 @@
 import { DaikinAccordion } from "./accordion/daikin-accordion.js";
 import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
+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";
@@ -18,12 +22,19 @@ import { DaikinInputGroup } from "./input-group/daikin-input-group.js";
 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";
@@ -42,15 +53,19 @@ import { DaikinTreeSection } from "./tree-section/daikin-tree-section.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
+  DaikinAvatar,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCalendar,
   DaikinCard,
   DaikinCardFooter,
   DaikinCardHeader,
   DaikinCarousel,
   DaikinCarouselItem,
   DaikinCheckbox,
+  DaikinCheckboxGroup,
+  DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
@@ -60,12 +75,19 @@ export {
   DaikinLink,
   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