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

package/dist/es/components/text-area/daikin-text-area.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,39 +20,43 @@ const cvaTextArea = 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"],
@@ -58,7 +65,7 @@ const cvaTextArea = cva(
     }
   }
 );
-let DaikinTextArea = class extends LitElement {
+let DaikinTextArea = class extends DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -109,8 +116,12 @@ let DaikinTextArea = class extends 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;
@@ -158,7 +169,7 @@ __decorateClass([
   state()
 ], DaikinTextArea.prototype, "_label", 2);
 DaikinTextArea = __decorateClass([
-  customElement("daikin-text-area")
+  ddsElement("daikin-text-area")
 ], DaikinTextArea);
 export {
   DaikinTextArea

package/dist/es/components/text-field/daikin-text-field.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * 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.js";
  * <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/es/components/text-field/daikin-text-field.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,6 +22,7 @@ const cvaInput = cva(
     "items-center",
     "w-full",
     "h-full",
+    "bg-ddt-color-common-background-default",
     "relative",
     "px-2",
     "rounded",
@@ -28,31 +32,33 @@ const cvaInput = 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"],
@@ -74,13 +80,13 @@ const cvaIcon = 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"]
       }
     }
   }
 );
-let DaikinTextField = class extends LitElement {
+let DaikinTextField = class extends DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -157,6 +163,10 @@ let DaikinTextField = class extends 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;
@@ -216,7 +226,7 @@ __decorateClass([
   state()
 ], DaikinTextField.prototype, "_hasRightIcon", 2);
 DaikinTextField = __decorateClass([
-  customElement("daikin-text-field")
+  ddsElement("daikin-text-field")
 ], DaikinTextField);
 export {
   DaikinTextField

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

@@ -0,0 +1,69 @@
+import { DDSElement } from "../../base/index.js";
+import { MergeVariantProps } from "../../type-utils.js";
+import { cvaContainer, cvaContent, cvaTimestamp } from "../../utils/notification-common.js";
+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/es/components/toast-notification/daikin-toast-notification.js

@@ -0,0 +1,95 @@
+import { css, unsafeCSS, html, nothing } 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 { TOAST_ANIMATION_DURATION, cvaContainer, cvaContent, cvaTitle, cvaDescription, cvaTimestamp, formatDate } 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) => {
+  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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let DaikinToastNotification = class extends 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 html`<div
+      class=${cvaContainer({ variant: "toast", status: this.status })}
+      role="alert"
+    >
+      <div class=${cvaContent({ layout: this.layout })}>
+        <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
+        <slot
+          class=${cvaDescription({ layout: this.layout })}
+          name="description"
+        ></slot>
+        ${this.timestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
+              >${formatDate(this.timestamp)}</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}
+    </div>`;
+  }
+};
+DaikinToastNotification.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+
+      --ddc-toast-animation-duration: ${unsafeCSS(TOAST_ANIMATION_DURATION)}ms;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinToastNotification.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinToastNotification.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinToastNotification.prototype, "layout", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToastNotification.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Object, reflect: true, attribute: false })
+], DaikinToastNotification.prototype, "timestamp", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinToastNotification.prototype, "duration", 2);
+DaikinToastNotification = __decorateClass([
+  ddsElement("daikin-toast-notification")
+], DaikinToastNotification);
+export {
+  DaikinToastNotification
+};

package/dist/es/components/toast-notification/index.d.ts

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

package/dist/es/components/toast-notification/index.js

@@ -0,0 +1,4 @@
+import { DaikinToastNotification } from "./daikin-toast-notification.js";
+export {
+  DaikinToastNotification
+};

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.d.ts

@@ -0,0 +1,67 @@
+import { DDSElement } from "../../base/index.js";
+import { MergeVariantProps } from "../../type-utils.js";
+declare const cvaContainer: (props?: ({
+    position?: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ToastPosition = MergeVariantProps<typeof cvaContainer>["position"];
+/**
+ * The toast manager component manages the position and display state of notification toasts.
+ * Just place a notification toast in the slot and it will automatically be placed, stacked and animated.
+ *
+ * Hierarchy:
+ * - `daikin-toast-notification-manager` > `daikin-toast-notification`
+ *
+ * @fires close - A custom event emitted when a user clicks the close button. The toast manager does not remove toast elements, so you will need to remove the relevant toast element after receiving this event.
+ *
+ * @slot A slot for toasts. Place `daikin-toast-notification` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/toast-notification-manager/index.js";
+ * import "@daikin-oss/design-system-web-components/components/toast-notification/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-toast-notification-manager>
+ *   <daikin-toast-notification name="toast1">
+ *     <span slot="title">Toast title</span>
+ *     <span slot="description">Toast description</span>
+ *   </daikin-toast-notification>
+ *   <daikin-toast-notification name="toast2">
+ *     <span slot="title">Toast title</span>
+ *     <span slot="description">Toast description</span>
+ *   </daikin-toast-notification>
+ *   <daikin-toast-notification name="toast3">
+ *     <span slot="title">Toast title</span>
+ *     <span slot="description">Toast description</span>
+ *   </daikin-toast-notification>
+ * </daikin-toast-notification-manager>
+ * ```
+ */
+export declare class DaikinToastNotificationManager extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify where on the screen the toast will be displayed.
+     */
+    position: ToastPosition;
+    private readonly _items;
+    private _knownItemSet;
+    private _closedItemSet;
+    private _containerRef;
+    private get _positionY();
+    private get _sign();
+    private _close;
+    private _handleClose;
+    private _handleNewItem;
+    private _handleSlotchange;
+    private _scheduleRemoveToast;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-toast-notification-manager": DaikinToastNotificationManager;
+    }
+}
+export {};

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -0,0 +1,193 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.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 { TOAST_ANIMATION_DURATION } from "../../utils/notification-common.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, 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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const CONTAINER_TRANSITION_DURATION = "--container-transition-duration";
+const CONTAINER_MOVE_OFFSET_Y = "--container-move-offset-y";
+const TOAST_MOVE_OFFSET_X = "24px";
+const TOAST_MOVE_OFFSET_Y_TOP_SIGN = -1;
+const TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN = 1;
+const cvaContainer = cva(
+  [
+    "flex",
+    "gap-2",
+    "w-max",
+    "fixed",
+    "transition-transform",
+    "translate-y-[var(--container-move-offset-y,0)]",
+    "duration-[var(--container-transition-duration,200ms)]"
+  ],
+  {
+    variants: {
+      position: {
+        top: [
+          "items-center",
+          "flex-col",
+          "m-auto",
+          "top-4",
+          "left-0",
+          "right-0"
+        ],
+        "top-left": ["items-start", "flex-col", "top-4", "left-4"],
+        "top-right": ["items-end", "flex-col", "top-4", "right-4"],
+        bottom: [
+          "items-center",
+          "flex-col-reverse",
+          "m-auto",
+          "bottom-4",
+          "left-0",
+          "right-0"
+        ],
+        "bottom-left": [
+          "items-start",
+          "flex-col-reverse",
+          "bottom-4",
+          "left-4"
+        ],
+        "bottom-right": [
+          "items-end",
+          "flex-col-reverse",
+          "bottom-4",
+          "right-4"
+        ]
+      }
+    }
+  }
+);
+let DaikinToastNotificationManager = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.position = "bottom-right";
+    this._knownItemSet = /* @__PURE__ */ new Set();
+    this._closedItemSet = /* @__PURE__ */ new WeakSet();
+    this._containerRef = createRef();
+  }
+  get _positionY() {
+    return this.position.startsWith("top") ? "top" : "bottom";
+  }
+  get _sign() {
+    return this._positionY === "top" ? TOAST_MOVE_OFFSET_Y_TOP_SIGN : TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN;
+  }
+  _close(target) {
+    if (this._closedItemSet.has(target)) {
+      return;
+    }
+    this._closedItemSet.add(target);
+    const items = this._items;
+    const targetIndex = items.findIndex((item) => item === target);
+    if (targetIndex === -1) {
+      return;
+    }
+    const moveOffsetY = `calc(${0.5 * this._sign}rem + ${target.clientHeight * this._sign}px)`;
+    for (const [index, item] of items.entries()) {
+      item.style.removeProperty("--transition-duration");
+      if (index > targetIndex) {
+        item.style.setProperty("--move-offset-y", moveOffsetY);
+      }
+    }
+    target.style.setProperty("--move-offset-x", TOAST_MOVE_OFFSET_X);
+    target.style.setProperty("--opacity", "0");
+    target.style.setProperty("--pointer-events", "none");
+    setTimeout(() => {
+      for (const item of this._items) {
+        item.style.setProperty("--transition-duration", "0");
+        item.style.removeProperty("--move-offset-y");
+      }
+      target.hidden = true;
+      this.dispatchEvent(new CustomEvent("close", { detail: { target } }));
+    }, TOAST_ANIMATION_DURATION);
+  }
+  _handleClose(event) {
+    event.stopPropagation();
+    this._close(event.target);
+  }
+  _handleNewItem(newItem) {
+    const container = this._containerRef.value;
+    if (!container) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      newItem.style.setProperty("--opacity", "0");
+      container.style.setProperty(CONTAINER_TRANSITION_DURATION, "0");
+      container.style.setProperty(
+        CONTAINER_MOVE_OFFSET_Y,
+        `calc(${0.5 * this._sign}rem + ${newItem.clientHeight * this._sign}px)`
+      );
+      requestAnimationFrame(() => {
+        container.style.removeProperty(CONTAINER_TRANSITION_DURATION);
+        container.style.removeProperty(CONTAINER_MOVE_OFFSET_Y);
+        newItem.style.removeProperty("--opacity");
+        this._scheduleRemoveToast(newItem);
+      });
+    });
+  }
+  _handleSlotchange() {
+    const items = this._items;
+    const newItems = items.filter((item) => !this._knownItemSet.has(item));
+    this._knownItemSet = new Set(items);
+    for (const newItem of newItems) {
+      this._handleNewItem(newItem);
+    }
+  }
+  _scheduleRemoveToast(target) {
+    if (target.duration === null) {
+      return;
+    }
+    setTimeout(() => {
+      this._close(target);
+    }, target.duration);
+  }
+  render() {
+    return html`<aside
+      ${ref(this._containerRef)}
+      class=${cvaContainer({ position: this.position })}
+      popover="manual"
+    >
+      <slot
+        @close=${this._handleClose}
+        @slotchange=${this._handleSlotchange}
+      ></slot>
+    </aside>`;
+  }
+  firstUpdated() {
+    const container = this._containerRef.value;
+    if (container) {
+      container.showPopover();
+    }
+  }
+};
+DaikinToastNotificationManager.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinToastNotificationManager.prototype, "position", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-toast-notification" })
+], DaikinToastNotificationManager.prototype, "_items", 2);
+DaikinToastNotificationManager = __decorateClass([
+  ddsElement("daikin-toast-notification-manager")
+], DaikinToastNotificationManager);
+export {
+  DaikinToastNotificationManager
+};

package/dist/es/components/toast-notification-manager/index.d.ts

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

package/dist/es/components/toast-notification-manager/index.js

@@ -0,0 +1,4 @@
+import { DaikinToastNotificationManager } from "./daikin-toast-notification-manager.js";
+export {
+  DaikinToastNotificationManager
+};