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

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

@@ -1,11 +1,13 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
-import { property } from "lit/decorators.js";
+import { unsafeCSS, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { iconRegistry } from "../../icon-registry.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { icons } from "./icons.json.js";
+import iconsJson from "./icons.json.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,47 +18,164 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const iconList = Object.keys(icons);
-const iconClassMap = Object.fromEntries(
-  Object.entries(icons).map(([name, object]) => [name, object.class])
+const { icons } = iconsJson;
+const iconList = Object.keys(icons).filter(
+  (key) => key !== "logo-positive" && key !== "logo-negative"
 );
-const cvaIcon = cva(["block"], {
+function svgToDataUrl(svg) {
+  const encoded = encodeURIComponent(svg).replaceAll("'", "%27");
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+const cvaIcon = cva(["inline-flex size-full"], {
   variants: {
-    icon: iconClassMap,
     color: {
       black: ["text-ddt-color-common-background-overlay"],
       white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
+    },
+    mode: {
+      inline: [],
+      mask: [
+        "bg-current",
+        "[mask-size:100%_100%]",
+        "[-webkit-mask-size:100%_100%]",
+        "[mask-repeat:no-repeat]",
+        "[-webkit-mask-repeat:no-repeat]",
+        "[mask-image:var(--svg)]",
+        "[-webkit-mask-image:var(--svg)]"
+      ],
+      background: [
+        "bg-no-repeat",
+        "bg-[length:100%_100%]",
+        "bg-[image:var(--svg)]"
+      ],
+      static: []
+      // for static icons from icons.json
     }
   }
 });
 let DaikinIcon = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this.registry = iconRegistry;
     this.icon = null;
     this.color = "default";
     this.size = "current";
+    this._iconData = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadIcon().catch((error) => {
+      {
+        console.warn(
+          `Error loading icon${this.icon ? ` "${this.icon}"` : ""} in <${this.tagName.toLowerCase()}>:`,
+          error
+        );
+      }
+    });
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("icon")) {
+      this.loadIcon().catch((error) => {
+        {
+          console.warn(
+            `Error loading icon${this.icon ? ` "${this.icon}"` : ""} in <${this.tagName.toLowerCase()}>:`,
+            error
+          );
+        }
+      });
+    }
+  }
+  async loadIcon() {
+    if (!this.icon) {
+      this._iconData = null;
+      return;
+    }
+    const staticIcon = icons[this.icon];
+    if (staticIcon) {
+      this._iconData = {
+        mode: "static",
+        defaultColor: staticIcon.color,
+        class: staticIcon.class
+      };
+      return;
+    }
+    try {
+      const iconData = await this.registry.getIcon(this.icon);
+      if (true) {
+        if (!iconData) {
+          console.warn(`Icon "${this.icon}" not found in registry`);
+        }
+      }
+      this._iconData = iconData;
+    } catch (error) {
+      {
+        console.warn(`Failed to load custom icon "${this.icon}":`, error);
+      }
+      this._iconData = null;
+    }
   }
   render() {
-    var _a;
-    const defaultColor = (_a = icons[this.icon ?? ""]) == null ? void 0 : _a.color;
     {
       if (!this.icon) {
-        console.warn("icon property is not specified");
-      } else if (!(this.icon in icons)) {
-        console.warn(`There is no icon named "${this.icon}".`);
-      } else if (this.color === "default" && !defaultColor) {
+        console.warn("icon property is not specified for daikin-icon");
+      }
+    }
+    if (!this.icon) {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })}
+        title="Unknown icon"
+      ></span>`;
+    }
+    if (!this._iconData) {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "inline"
+      })}
+        title=${this.icon || "Unknown icon"}
+      ></span>`;
+    }
+    const defaultColor = this._iconData.defaultColor;
+    {
+      if (this.color === "default" && !defaultColor) {
         console.warn(`The icon "${this.icon}" does not have a default color.`);
       }
     }
+    if (this._iconData.mode === "static") {
+      return html`<span
+        class="${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })} ${this._iconData.class}"
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+      ></span>`;
+    }
+    const mode = this._iconData.mode ?? "mask";
+    if (mode === "inline") {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode
+      })}
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+        >${unsafeHTML(this._iconData.svg)}</span
+      >`;
+    }
+    const svgDataUrl = svgToDataUrl(this._iconData.svg);
     return html`<span
       class=${cvaIcon({
-      icon: this.icon,
-      color: this.color
+      color: this.color,
+      mode
     })}
-      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      style=${`--default-color:${defaultColor ?? "#000000"};--svg:${svgDataUrl}`}
       role="presentation"
     ></span>`;
   }
@@ -65,7 +184,7 @@ DaikinIcon.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
       width: var(--ddc-icon-size, 100%);
       height: var(--ddc-icon-size, 100%);
     }
@@ -86,6 +205,9 @@ DaikinIcon.styles = css`
       --ddc-icon-size: 24px;
     }
   `;
+__decorateClass([
+  property({ attribute: false })
+], DaikinIcon.prototype, "registry", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "icon", 2);
@@ -95,6 +217,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "size", 2);
+__decorateClass([
+  state()
+], DaikinIcon.prototype, "_iconData", 2);
 DaikinIcon = __decorateClass([
   ddsElement("daikin-icon")
 ], DaikinIcon);

package/dist/es-dev/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

package/dist/es-dev/components/icon/icons.json.js

@@ -1,4 +1,8 @@
-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 } };
+const iconsJson = {
+  icons
+};
 export {
+  iconsJson as default,
   icons
 };

package/dist/es-dev/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,24 @@ 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;
+    /**
+     * Size of the button.
+     * - `s`: 32px * 32px
+     * - `m`: 48px * 48px
+     *
+     * Default is `s`.
+     */
+    size: "s" | "m";
     private _button;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/es-dev/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,18 @@ let DaikinIconButton = class extends DDSElement {
     this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
+    this.buttonAriaHaspopup = null;
+    this.buttonAriaExpanded = null;
+    this.size = "s";
     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 +124,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>
@@ -134,8 +145,14 @@ DaikinIconButton.styles = css`
 
     :host {
       display: inline-block;
-      width: 2rem;
-      height: 2rem;
+      width: var(--ddc-icon-button-size, 2rem);
+      height: var(--ddc-icon-button-size, 2rem);
+    }
+    :host([size="s"]) {
+      --ddc-icon-button-size: 2rem; /* 32px */
+    }
+    :host([size="m"]) {
+      --ddc-icon-button-size: 3rem; /* 48px */
     }
   `;
 __decorateClass([
@@ -159,6 +176,15 @@ __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([
+  property({ type: String, reflect: true })
+], DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   query("button")
 ], DaikinIconButton.prototype, "_button", 2);

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

@@ -4,12 +4,17 @@ 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 "./chip/index.js";
+export * from "./combobox/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 +25,19 @@ 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 "./radio-group/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";
@@ -34,6 +46,8 @@ export * from "./table-header-cell/index.js";
 export * from "./tabs/index.js";
 export * from "./text-area/index.js";
 export * from "./text-field/index.js";
+export * from "./text-masked-field/index.js";
+export * from "./time-picker/index.js";
 export * from "./toast-notification/index.js";
 export * from "./toast-notification-manager/index.js";
 export * from "./toggle/index.js";

package/dist/es-dev/components/index.js

@@ -4,12 +4,17 @@ 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 { DaikinChip } from "./chip/daikin-chip.js";
+import { DaikinCombobox, defaultFilterFn } from "./combobox/daikin-combobox.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 +25,19 @@ 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 { DaikinRadioGroup } from "./radio-group/daikin-radio-group.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";
@@ -34,6 +46,8 @@ import { DaikinTableHeaderCell } from "./table-header-cell/daikin-table-header-c
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
 import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
+import { DaikinTextMaskedField } from "./text-masked-field/daikin-text-masked-field.js";
+import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, from24HourFormat, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, to24HourFormat, tryParseTimeFromUIValue } from "./time-picker/daikin-time-picker.js";
 import { DaikinToastNotification } from "./toast-notification/daikin-toast-notification.js";
 import { DaikinToastNotificationManager } from "./toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
@@ -48,12 +62,17 @@ export {
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCalendar,
   DaikinCard,
   DaikinCardFooter,
   DaikinCardHeader,
   DaikinCarousel,
   DaikinCarouselItem,
   DaikinCheckbox,
+  DaikinCheckboxGroup,
+  DaikinChip,
+  DaikinCombobox,
+  DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
@@ -64,12 +83,19 @@ export {
   DaikinList,
   DaikinListItem,
   DaikinLoading,
+  DaikinLogo,
+  DaikinMenu,
+  DaikinModal,
+  DaikinModalFooter,
+  DaikinModalHeader,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
   DaikinProgressIndicatorItem,
   DaikinRadio,
+  DaikinRadioGroup,
   DaikinSelect,
+  DaikinSlider,
   DaikinTab,
   DaikinTabPanels,
   DaikinTable,
@@ -78,6 +104,8 @@ export {
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,
+  DaikinTextMaskedField,
+  DaikinTimePicker,
   DaikinToastNotification,
   DaikinToastNotificationManager,
   DaikinToggle,
@@ -85,6 +113,17 @@ export {
   DaikinTree,
   DaikinTreeItem,
   DaikinTreeSection,
+  calcDigitInput,
   cvaTreeChildren,
-  iconList
+  defaultFilterFn,
+  formatPartsForUI,
+  formatTimeForUI,
+  from24HourFormat,
+  getTimeItemInSelection,
+  iconList,
+  isTimeOutOfRange,
+  isValidValueTime,
+  parsePartsFromUIValue,
+  to24HourFormat,
+  tryParseTimeFromUIValue
 };

package/dist/es-dev/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-dev/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 })