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

package/dist/cjs-dev/components/table-header-cell/daikin-table-header-cell.cjs

@@ -3,13 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -23,7 +26,7 @@ const cvaHeaderCell = classVarianceAuthority.cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-system-element-text-primary",
+    "text-ddt-color-common-text-primary",
     "font-bold"
   ],
   {
@@ -36,22 +39,21 @@ const cvaHeaderCell = classVarianceAuthority.cva(
       sortable: {
         false: [],
         true: [
-          "hover:bg-system-background-surface-hover",
-          "active:bg-system-background-surface-press",
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press",
           "focus-visible:outline",
           "focus-visible:outline-2",
           "focus-visible:-outline-offset-2",
-          "focus-visible:outline-system-state-focus",
+          "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
           "after:size-6",
-          "after:text-system-element-text-primary",
           "after:i-daikin-sort"
         ]
       }
     }
   }
 );
-exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends lit.LitElement {
+exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.alignment = "left";
@@ -89,5 +91,5 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "sortable", 2);
 exports.DaikinTableHeaderCell = __decorateClass([
-  decorators_js.customElement("daikin-table-header-cell")
+  decorators.ddsElement("daikin-table-header-cell")
 ], exports.DaikinTableHeaderCell);

package/dist/cjs-dev/components/table-header-cell/daikin-table-header-cell.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaHeaderCell: (props?: ({
     alignment?: "right" | "left" | "center" | null | undefined;
@@ -22,13 +22,17 @@ type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/table-header-cell/index.js";
+ * ```
+ *
  * ```html
  * <daikin-table-header-cell slot="header:key">
  *   Table header cell label
  * </daikin-table-header-cell>
  * ```
  */
-export declare class DaikinTableHeaderCell extends LitElement {
+export declare class DaikinTableHeaderCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Alignment of cell contents.

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

@@ -2,22 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const scroller = require("./scroller.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.DaikinTabs = class DaikinTabs extends lit.LitElement {
+exports.DaikinTabs = class DaikinTabs extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
+    this.sizing = "stretch";
   }
   /**
    * Emits `beforechange` event if necessary and returns whether we should proceed.
@@ -92,6 +96,12 @@ exports.DaikinTabs = class DaikinTabs extends lit.LitElement {
     }
     scroller.scrollIntoViewOnlyParent(selectedTab);
   }
+  _updateTabStyle() {
+    const tabs = this._tabs;
+    for (const tab of tabs) {
+      tab.sizing = this.sizing;
+    }
+  }
   /**
    * Updates `daikin-tab-panels` component(s)' properties in the slot.
    *
@@ -180,7 +190,7 @@ exports.DaikinTabs = class DaikinTabs extends lit.LitElement {
   render() {
     return lit.html`
       <div
-        class="flex flex-nowrap w-full p-[3px] overflow-auto relative before:absolute before:h-[1px] before:inset-[3px] before:top-auto before:bg-system-element-divider-secondary"
+        class="flex flex-nowrap w-full p-1 overflow-auto relative before:absolute before:h-[1px] before:inset-1 before:top-auto before:bg-ddt-color-divider"
         role="tablist"
         @click=${this._handleTabClick}
         @keydown=${this._handleKeyDown}
@@ -191,11 +201,13 @@ exports.DaikinTabs = class DaikinTabs extends lit.LitElement {
     `;
   }
   updated(changedProperties) {
-    if (!changedProperties.has("value")) {
-      return;
+    if (changedProperties.has("value")) {
+      this._updateTabs();
+      this._updateTabPanels();
+    }
+    if (changedProperties.has("sizing")) {
+      this._updateTabStyle();
     }
-    this._updateTabs();
-    this._updateTabPanels();
   }
 };
 exports.DaikinTabs.styles = lit.css`
@@ -209,6 +221,9 @@ exports.DaikinTabs.styles = lit.css`
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTabs.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTabs.prototype, "sizing", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-tab" })
 ], exports.DaikinTabs.prototype, "_tabs", 2);
@@ -216,5 +231,5 @@ __decorateClass([
   decorators_js.queryAssignedElements({ slot: "panels", selector: "daikin-tab-panels" })
 ], exports.DaikinTabs.prototype, "_panelSwitchers", 2);
 exports.DaikinTabs = __decorateClass([
-  decorators_js.customElement("daikin-tabs")
+  decorators.ddsElement("daikin-tabs")
 ], exports.DaikinTabs);

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The tab group component manages a group of tabs and switches the content displayed using the panel switcher component.
  * It allows users to navigate between different sections of content by clicking on individual tabs.
@@ -38,12 +39,16 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-tabs>
  * ```
  */
-export declare class DaikinTabs extends LitElement {
+export declare class DaikinTabs extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * `value` of the currently selected tab (`daikin-tab`).
      */
     value: string;
+    /**
+     * Whether the tab width stretches or fits.
+     */
+    sizing: "stretch" | "fit";
     /**
      * Tab(s) in the default slot.
      */
@@ -77,6 +82,7 @@ export declare class DaikinTabs extends LitElement {
      * - the default slot's content is changed.
      */
     private _updateTabs;
+    private _updateTabStyle;
     /**
      * Updates `daikin-tab-panels` component(s)' properties in the slot.
      *

package/dist/cjs-dev/components/text-area/daikin-text-area.cjs

@@ -4,13 +4,16 @@ 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");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -19,39 +22,43 @@ const cvaTextArea = classVarianceAuthority.cva(
   [
     "w-full",
     "h-full",
+    "bg-ddt-color-common-background-default",
     "px-4",
     "py-3",
     "rounded",
     "font-daikinSerif",
     "outline",
     "outline-[--color-border]",
-    "outline-0",
-    "-outline-offset-2",
-    "placeholder:text-system-element-text-secondary",
+    "outline-1",
+    "-outline-offset-1",
+    "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
     "define-[--color-state-active,--color-state-focus,--color-base]/color-border",
     "border",
     "border-[--color-border]",
+    "enabled:text-ddt-color-common-text-primary",
+    "enabled:hover:bg-ddt-color-common-surface-hover",
+    "enabled:active:bg-ddt-color-common-surface-press",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "enabled:text-system-element-text-primary",
-    "enabled:hover:bg-system-background-surface-hover",
-    "enabled:active:bg-system-background-surface-press",
-    "focus-visible:outline-2",
-    "disabled:var-color-system-state-disabled/color-base",
-    "disabled:text-system-state-disabled",
-    "disabled:bg-white",
-    "disabled:placeholder:text-system-state-disabled"
+    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:bg-color-common-background-default",
+    "disabled:placeholder:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       error: {
         false: [
-          "enabled:var-color-system-state-neutral-active/color-base",
-          "focus-visible:var-color-system-state-focus/color-state-focus"
+          "enabled:var-color-ddt-color-common-neutral-default/color-base",
+          "enabled:hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "enabled:active:var-color-ddt-color-common-neutral-press/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
         ],
-        true: ["enabled:var-color-system-state-error-active/color-base"]
+        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
       },
       resize: {
         false: ["resize-none"],
@@ -60,7 +67,7 @@ const cvaTextArea = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinTextArea = class DaikinTextArea extends lit.LitElement {
+exports.DaikinTextArea = class DaikinTextArea extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -111,8 +118,12 @@ exports.DaikinTextArea = class DaikinTextArea extends lit.LitElement {
     }
     this._updateValue(this.value);
   }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
   reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && !!inputGroup.error;
+    const isError = !inputGroup.disabled && (!!inputGroup.error || !!inputGroup.textareaLimitExceeded);
     this.disabled = !!inputGroup.disabled;
     this.required = !!inputGroup.required;
     this.error = isError;
@@ -160,5 +171,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinTextArea.prototype, "_label", 2);
 exports.DaikinTextArea = __decorateClass([
-  decorators_js.customElement("daikin-text-area")
+  decorators.ddsElement("daikin-text-area")
 ], exports.DaikinTextArea);

package/dist/cjs-dev/components/text-area/daikin-text-area.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * The text area component is designed for multiline text input, similar to the HTML `<textarea>` tag.
@@ -23,7 +24,7 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * <daikin-text-area name="name"></daikin-text-area>
  * ```
  */
-export declare class DaikinTextArea extends LitElement {
+export declare class DaikinTextArea extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     static readonly formAssociated = true;
     private _internals;
@@ -73,6 +74,10 @@ export declare class DaikinTextArea extends LitElement {
     private _handleInput;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
     reflectInputGroup(inputGroup: DaikinInputGroup): void;
 }
 declare global {

package/dist/cjs-dev/components/text-field/daikin-text-field.cjs

@@ -4,13 +4,16 @@ 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");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -21,6 +24,7 @@ const cvaInput = classVarianceAuthority.cva(
     "items-center",
     "w-full",
     "h-full",
+    "bg-ddt-color-common-background-default",
     "relative",
     "px-2",
     "rounded",
@@ -30,31 +34,33 @@ const cvaInput = classVarianceAuthority.cva(
     "outline-[--color-border]",
     "outline-0",
     "-outline-offset-2",
-    "placeholder:text-system-element-text-secondary",
+    "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
     "define-[--color-state-focus,--color-base]/color-border",
     "border",
     "border-[--color-border]",
+    "enabled:text-ddt-color-common-text-primary",
+    "enabled:hover:bg-ddt-color-common-surface-hover",
+    "enabled:active:bg-ddt-color-common-surface-press",
+    "focus-visible:outline-2",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "enabled:text-system-element-text-primary",
-    "enabled:hover:bg-system-background-surface-hover",
-    "enabled:active:bg-system-background-surface-press",
-    "focus-visible:outline-2",
-    "disabled:var-color-system-state-disabled/color-base",
-    "disabled:text-system-state-disabled",
-    "disabled:bg-white",
-    "disabled:placeholder:text-system-state-disabled"
+    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:bg-ddt-color-common-background-default",
+    "disabled:placeholder:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       error: {
         false: [
-          "enabled:var-color-system-state-neutral-active/color-base",
-          "focus-visible:var-color-system-state-focus/color-state-focus"
+          "enabled:var-color-ddt-color-common-neutral-default/color-base",
+          "enabled:hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "enabled:active:var-color-ddt-color-common-neutral-press/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
         ],
-        true: ["enabled:var-color-system-state-error-active/color-base"]
+        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
       },
       leftIcon: {
         false: ["pl-4"],
@@ -76,13 +82,13 @@ const cvaIcon = classVarianceAuthority.cva(
         right: "right-3"
       },
       disabled: {
-        false: ["text-system-element-text-primary"],
-        true: ["text-system-state-disabled"]
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
       }
     }
   }
 );
-exports.DaikinTextField = class DaikinTextField extends lit.LitElement {
+exports.DaikinTextField = class DaikinTextField extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -159,6 +165,10 @@ exports.DaikinTextField = class DaikinTextField extends lit.LitElement {
     }
     this._internals.setFormValue(this.value);
   }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
@@ -218,5 +228,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinTextField.prototype, "_hasRightIcon", 2);
 exports.DaikinTextField = __decorateClass([
-  decorators_js.customElement("daikin-text-field")
+  decorators.ddsElement("daikin-text-field")
 ], exports.DaikinTextField);

package/dist/cjs-dev/components/text-field/daikin-text-field.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * The text field component is a UI element that allows users to input single-line text data.
@@ -26,7 +27,7 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * <daikin-text-field name="name"></daikin-text-field>
  * ```
  */
-export declare class DaikinTextField extends LitElement {
+export declare class DaikinTextField extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     static readonly formAssociated = true;
     private _internals;
@@ -85,6 +86,10 @@ export declare class DaikinTextField extends LitElement {
     private _handleInput;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
     reflectInputGroup(inputGroup: DaikinInputGroup): void;
 }
 declare global {

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

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+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) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.DaikinToastNotification = class DaikinToastNotification extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.status = "positive";
+    this.layout = "horizontal";
+    this.closable = false;
+    this.timestamp = null;
+    this.duration = null;
+  }
+  /**
+   * Emits a "close" event.
+   */
+  _handleClickClose(event) {
+    this.dispatchEvent(new Event("close", event));
+  }
+  render() {
+    return lit.html`<div
+      class=${notificationCommon.cvaContainer({ variant: "toast", status: this.status })}
+      role="alert"
+    >
+      <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>
+        ${this.timestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
+              >${notificationCommon.formatDate(this.timestamp)}</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}
+    </div>`;
+  }
+};
+exports.DaikinToastNotification.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+
+      --ddc-toast-animation-duration: ${lit.unsafeCSS(notificationCommon.TOAST_ANIMATION_DURATION)}ms;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinToastNotification.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinToastNotification.prototype, "status", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinToastNotification.prototype, "layout", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinToastNotification.prototype, "closable", 2);
+__decorateClass([
+  decorators_js.property({ type: Object, reflect: true, attribute: false })
+], exports.DaikinToastNotification.prototype, "timestamp", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinToastNotification.prototype, "duration", 2);
+exports.DaikinToastNotification = __decorateClass([
+  decorators.ddsElement("daikin-toast-notification")
+], exports.DaikinToastNotification);

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

@@ -0,0 +1,69 @@
+import { DDSElement } from "../../base/index.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { cvaContainer, cvaContent, cvaTimestamp } from "../../utils/notification-common.cjs";
+export type ToastNotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaContent | typeof cvaTimestamp>;
+/**
+ * The toast notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
+ *
+ * Toast notification displays a brief message that should appear temporarily at the edge of the screen, typically in the bottom or top corner.
+ * Toast notification is ideal for conveying transient information that does not require user interaction, such as success messages, warnings, or alerts.
+ *
+ * Hierarchy:
+ * - `daikin-toast-notification-manager` > `daikin-toast-notification`
+ *
+ * @fires close - A custom event emitted when a user clicks the close button.
+ *
+ * @slot A slot for the toast notification description content.
+ * @slot title - A slot for the toast notification title content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/toast-notification/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-toast-notification>
+ *   <span slot="title">ToastNotification title</span>
+ *   <span slot="description">ToastNotification description</span>
+ * </daikin-toast-notification>
+ * ```
+ */
+export declare class DaikinToastNotification extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Name of the toast notification.
+     */
+    name: string;
+    /**
+     * Status of the toast notification.
+     */
+    status: ToastNotificationVariantProps["status"];
+    /**
+     * Specify how to arrange the elements.
+     */
+    layout: ToastNotificationVariantProps["layout"];
+    /**
+     * Whether to display the close button.
+     */
+    closable: boolean;
+    /**
+     * The timestamp to display.
+     */
+    timestamp: Date | null;
+    /**
+     * Specify how long to display the toast (in msec).
+     * If `null` is specified, the toast will not be automatically closed.
+     */
+    duration: number | null;
+    /**
+     * Emits a "close" event.
+     */
+    private _handleClickClose;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-toast-notification": DaikinToastNotification;
+    }
+}

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinToastNotification = require("./daikin-toast-notification.cjs");
+Object.defineProperty(exports, "DaikinToastNotification", {
+  enumerable: true,
+  get: () => daikinToastNotification.DaikinToastNotification
+});

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

@@ -0,0 +1 @@
+export * from "./daikin-toast-notification.cjs";