@daikin-oss/design-system-web-components 1.3.2 → 1.4.0-next.1

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -128,8 +129,6 @@ const cvaShowPasswordIcon = classVarianceAuthority.cva(["icon-size-6"], {
 exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.type = "text";
-    this.placeholder = null;
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -339,29 +338,23 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
         role=${ifDefined_js.ifDefined(role)}
         type=${type}
         inputmode=${ifDefined_js.ifDefined(inputMode)}
-        placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        minlength=${ifDefined_js.ifDefined(this.minlength ?? void 0)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength ?? void 0)}
+        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+        placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+        minlength=${ifDefined_js.ifDefined(this.minlength)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
         step=${ifDefined_js.ifDefined(
       this.type === "number" && this.step != null ? (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.step
       ) : void 0
     )}
-        pattern=${ifDefined_js.ifDefined(this.pattern ?? void 0)}
+        pattern=${ifDefined_js.ifDefined(this.pattern)}
         autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined_js.ifDefined(this.autocomplete)}
-        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-        aria-valuemin=${ifDefined_js.ifDefined(
-      this.type === "number" && this.min != null ? this.min : void 0
-    )}
-        aria-valuemax=${ifDefined_js.ifDefined(
-      this.type === "number" && this.max != null ? this.max : void 0
-    )}
-        aria-valuenow=${ifDefined_js.ifDefined(
-      this.type === "number" ? this.value : void 0
-    )}
+        aria-label=${ifDefined_js.ifDefined(this._label)}
+        aria-valuemin=${this.type === "number" && this.min != null ? this.min : lit.nothing}
+        aria-valuemax=${this.type === "number" && this.max != null ? this.max : lit.nothing}
+        aria-valuenow=${this.type === "number" ? this.value : lit.nothing}
         .value=${this.value}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -409,46 +402,50 @@ exports.DaikinTextField.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "text" })
 ], exports.DaikinTextField.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinTextField.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextField.prototype, "minlength", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextField.prototype, "maxlength", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "step", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "pattern", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: ""
+  })
 ], exports.DaikinTextField.prototype, "autocomplete", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-password" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-password" })
 ], exports.DaikinTextField.prototype, "showPassword", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -10,6 +10,13 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * - `daikin-text-field` (can be used solely)
  * - `daikin-input-group` > `daikin-text-field`
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
  * @fires toggle - Emitted when the user toggles the password mask.
@@ -50,12 +57,14 @@ export declare class DaikinTextField extends DDSFormElement {
      * - `"email"`: Email input with optional left and right icon slots.
      * - `"tel"`: Telephone input with optional left and right icon slots.
      * - `"search"`: Search input with built-in search icon and clear button when value is present.
+     *
+     * @default "text"
      */
     type: "text" | "number" | "password" | "email" | "tel" | "search";
     /**
      * Placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Whether the text field is readonly.
      */
@@ -103,7 +112,7 @@ export declare class DaikinTextField extends DDSFormElement {
     /**
      * Value of `autocomplete` attribute of the internal `<input>`.
      */
-    autocomplete?: HTMLInputElement["autocomplete"];
+    autocomplete: HTMLInputElement["autocomplete"];
     /**
      * When `type="password"`, whether to display the password with a black dot or as text.
      */

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

@@ -8,6 +8,7 @@ const ifDefined_js = require("lit/directives/if-defined.js");
 const ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -92,7 +93,6 @@ const cvaIcon = classVarianceAuthority.cva(
 exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -207,14 +207,13 @@ exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormEleme
       rightIcon
     })}
         type="text"
-        placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        minlength=${ifDefined_js.ifDefined(this.minlength ?? void 0)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength ?? void 0)}
-        pattern=${ifDefined_js.ifDefined(this.pattern ?? void 0)}
-        autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined_js.ifDefined(this.autocomplete)}
-        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+        placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+        minlength=${ifDefined_js.ifDefined(this.minlength)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+        pattern=${ifDefined_js.ifDefined(this.pattern)}
+        autocomplete=${ifDefined_js.ifDefined(this.getBackingProperty("autocomplete"))}
+        aria-label=${ifDefined_js.ifDefined(this._label)}
         .value=${this.value}
         ?data-empty=${!this._unmaskedValue}
         ?disabled=${this.disabled}
@@ -266,34 +265,38 @@ exports.DaikinTextMaskedField.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinTextMaskedField.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "minlength", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "maxlength", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "pattern", 2);
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinTextMaskedField.prototype, "mask", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: ""
+  })
 ], exports.DaikinTextMaskedField.prototype, "autocomplete", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -12,6 +12,13 @@ export type { FactoryOpts, InputMask };
  * - `daikin-text-masked-field` (can be used solely)
  * - `daikin-input-group` > `daikin-text-masked-field`
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
  *
@@ -40,7 +47,7 @@ export declare class DaikinTextMaskedField extends DDSFormElement {
     /**
      * Placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Whether the text masked field is readonly.
      */
@@ -97,7 +104,7 @@ export declare class DaikinTextMaskedField extends DDSFormElement {
     /**
      * Value of `autocomplete` attribute of the internal `<input>`.
      */
-    autocomplete?: HTMLInputElement["autocomplete"];
+    autocomplete: HTMLInputElement["autocomplete"];
     private _unmaskedValue;
     /**
      * The label text used as the value of aria-label.

package/dist/cjs-dev/components/time-picker/daikin-time-picker.cjs

@@ -7,6 +7,7 @@ const ifDefined_js = require("lit/directives/if-defined.js");
 const ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -157,7 +158,7 @@ const cvaField = classVarianceAuthority.cva(
     "bg-ddt-color-common-background-default",
     "p-3",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -190,13 +191,9 @@ const cvaField = classVarianceAuthority.cva(
 exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = "hh:mm";
-    this.min = DEFAULT_MIN_TIME;
-    this.max = DEFAULT_MAX_TIME;
     this.disabled = false;
     this.required = false;
     this.error = false;
-    this.minutesStep = "1";
     this._label = null;
     this._inputValue = "";
     this._currentSelection = "hour";
@@ -204,6 +201,22 @@ exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSForm
     this._timeInputElement = ref_js.createRef();
     this._hourDigitIndex = 0;
   }
+  /**
+   * Returns the value to be displayed in the input field.
+   * - If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display.
+   * - If the current input value is not valid or meridiem is empty, returns the raw input value.
+   * - Otherwise, returns null.
+   */
+  get _value() {
+    if (isValidValueTime(this.value)) {
+      const { time } = from24HourFormat(this.value);
+      return time;
+    }
+    if (this._timeValue && !isValidValueTime(this._timeValue) || this._meridiem === "") {
+      return this._timeValue;
+    }
+    return null;
+  }
   /**
    * Returns the value to display in the input field (from _inputValue state).
    */
@@ -472,9 +485,9 @@ exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSForm
         ${ref_js.ref(this._timeInputElement)}
         class=${cvaField({ error: this.error })}
         type="text"
-        placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-        name=${this.name}
-        .value=${this._timeValue}
+        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+        placeholder=${this.placeholder}
+        .value=${this._value ?? ""}
         ?disabled=${this.disabled}
         ?required=${this.required}
         @change=${this._handleChange}
@@ -511,10 +524,13 @@ exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSForm
       }
     }
     if (changedProperties.has("value")) {
-      this._syncMeridiemWithValue();
-      if (this.value) {
-        const { time } = from24HourFormat(this.value);
-        this._inputValue = time;
+      if (isValidValueTime(this.value)) {
+        this._syncMeridiemWithValue();
+        if (isTimeOutOfRange(this.value, this.min, this.max)) {
+          this.error = true;
+        } else {
+          this.error = false;
+        }
       }
     }
   }
@@ -545,25 +561,30 @@ exports.DaikinTimePicker.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "hh:mm" })
 ], exports.DaikinTimePicker.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: DEFAULT_MIN_TIME })
 ], exports.DaikinTimePicker.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: DEFAULT_MAX_TIME })
 ], exports.DaikinTimePicker.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTimePicker.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTimePicker.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTimePicker.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "minutes-step" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "minutes-step",
+    fallbackValue: "1"
+  })
 ], exports.DaikinTimePicker.prototype, "minutesStep", 2);
 __decorateClass([
   decorators_js.state()

package/dist/cjs-dev/components/time-picker/daikin-time-picker.d.cts

@@ -68,6 +68,13 @@ export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeIte
  * The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format.
  * Please note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format.
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A custom event emitted when the value of component changed. Validation errors will not trigger this event.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when user type value to input area and change the value of component. change dropdown or validation errors will not trigger this event.
  *
@@ -85,16 +92,22 @@ export declare class DaikinTimePicker extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Placeholder text.
+     *
+     * @default "hh:mm"
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.
      * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.
+     *
+     * @default "00:00"
      */
     min: string;
     /**
      * Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.
      * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.
+     *
+     * @default "23:59"
      */
     max: string;
     /**
@@ -111,12 +124,21 @@ export declare class DaikinTimePicker extends DDSFormElement {
     error: boolean;
     /**
      * Minutes step. Specify the step size for the minutes when using the up and down arrow keys.
+     *
+     * @default "1"
      */
     minutesStep: string;
     private _label;
     private _inputValue;
     private _currentSelection;
     private _meridiem;
+    /**
+     * Returns the value to be displayed in the input field.
+     * - If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display.
+     * - If the current input value is not valid or meridiem is empty, returns the raw input value.
+     * - Otherwise, returns null.
+     */
+    private get _value();
     private _timeInputElement;
     /**
      * Tracks the current digit index for hour input (0: first digit, 1: second digit).

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

@@ -1,9 +1,10 @@
 "use strict";
 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");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -19,11 +20,96 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaContainer = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "gap-3",
+    "w-full",
+    "h-full",
+    "text-ddt-color-common-text-primary",
+    "bg-ddt-color-common-background-default",
+    "p-4",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "transition",
+    "box-border",
+    "before:size-6",
+    "before:flex-none"
+  ],
+  {
+    variants: {
+      variant: {
+        toast: [
+          "rounded-lg",
+          "border",
+          "border-ddt-color-divider",
+          "translate-x-[--move-offset-x,0]",
+          "translate-y-[--move-offset-y,0]",
+          "opacity-[--opacity,1]",
+          "[pointer-events:var(--pointer-events,auto)]",
+          "[transition-duration:var(--transition-duration,var(--ddc-toast-animation-duration,0ms))]"
+        ],
+        inline: []
+      },
+      status: {
+        positive: [
+          "before:text-ddt-color-common-success",
+          "before:i-daikin-success"
+        ],
+        negative: [
+          "before:text-ddt-color-common-danger-default",
+          "before:i-daikin-error"
+        ],
+        warning: [
+          "before:text-ddt-color-common-warning",
+          "before:i-daikin-warning"
+        ],
+        alarm: ["before:text-ddt-color-common-alarm", "before:i-daikin-alarm"],
+        information: [
+          "before:text-ddt-color-common-information",
+          "before:i-daikin-information"
+        ]
+      }
+    }
+  }
+);
+const cvaContent = classVarianceAuthority.cva(["flex", "items-center", "w-full"], {
+  variants: {
+    layout: {
+      horizontal: ["gap-3", "overflow-hidden"],
+      vertical: ["items-stretch", "flex-col", "gap-1"]
+    }
+  }
+});
+const cvaTitle = classVarianceAuthority.cva(["slotted:inline-block", "font-bold", "leading-[130%]"], {
+  variants: {
+    layout: {
+      vertical: ["slotted:natural-break"],
+      horizontal: [
+        "slotted:whitespace-nowrap",
+        "slotted:overflow-hidden",
+        "slotted:overflow-ellipsis"
+      ]
+    }
+  }
+});
+const cvaDescription = classVarianceAuthority.cva(["inline-block", "leading-[130%]"], {
+  variants: {
+    layout: {
+      vertical: ["natural-break"],
+      horizontal: [
+        "whitespace-nowrap",
+        "overflow-hidden",
+        "overflow-ellipsis",
+        "flex-1"
+      ]
+    }
+  }
+});
 exports.DaikinToastNotification = class DaikinToastNotification extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.status = "positive";
     this.layout = "horizontal";
     this.closable = false;
     this.timestamp = null;
@@ -37,12 +123,12 @@ exports.DaikinToastNotification = class DaikinToastNotification extends ddsEleme
   }
   render() {
     return lit.html`<div
-      class=${notificationCommon.cvaContainer({ variant: "toast", status: this.status })}
+      class=${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 })}></slot>
+      <div class=${cvaContent({ layout: this.layout })}>
+        <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
+        <slot class=${cvaDescription({ layout: this.layout })}></slot>
         ${this.timestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
               >${notificationCommon.formatDate(this.timestamp)}</span
             >` : lit.nothing}
@@ -76,22 +162,41 @@ exports.DaikinToastNotification.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinToastNotification.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: ddsProperty.oneOf([
+      "positive",
+      "negative",
+      "warning",
+      "alarm",
+      "information"
+    ])
+  })
 ], exports.DaikinToastNotification.prototype, "status", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "horizontal",
+    isAllowedValue: ddsProperty.oneOf([
+      "horizontal",
+      "vertical"
+    ])
+  })
 ], exports.DaikinToastNotification.prototype, "layout", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinToastNotification.prototype, "closable", 2);
 __decorateClass([
-  decorators_js.property({ type: Object, reflect: true, attribute: false })
+  ddsProperty.property({ type: Object, reflect: true, attribute: false })
 ], exports.DaikinToastNotification.prototype, "timestamp", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinToastNotification.prototype, "duration", 2);
 exports.DaikinToastNotification = __decorateClass([
   decorators.ddsElement("daikin-toast-notification")