@daikin-oss/design-system-web-components 1.3.0 → 1.4.0-next.0

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

@@ -6,6 +6,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const guard_js = require("lit/directives/guard.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
@@ -94,19 +95,27 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
     this._reflectStaticProperties();
   }
   _handleTriggerClick(event) {
-    if (this.trigger === "click") {
-      event.preventDefault();
-      this.open = !this.open;
-      if (this.open) {
-        setTimeout(() => {
-          this._lists[0].focusFirstItem();
-        });
-      }
+    if (this.trigger !== "click") return;
+    event.preventDefault();
+    this.open = !this.open;
+    if (this.open) {
+      setTimeout(() => {
+        this._lists[0].focusFirstItem();
+      });
     }
   }
+  _handleTouchEnd(event) {
+    if (this.trigger !== "click") return;
+    event.preventDefault();
+    this.open = !this.open;
+  }
+  /**
+   * Handles click events on the menu-item.
+   * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
+   */
   _handleClick(event) {
     event.preventDefault();
-    if (event.target instanceof daikinListItem.default && !event.target.disabled) {
+    if (event.target instanceof daikinListItem.default && !event.target.disabled && this.popoverValue === "auto") {
       this.open = false;
     }
   }
@@ -133,7 +142,10 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         aria-describedby="menu"
         ${this._autoUpdateController.refReference()}
       >
-        <slot @click=${this._handleTriggerClick}></slot>
+        <slot
+          @click=${this._handleTriggerClick}
+          @touchend=${this._handleTouchEnd}
+        ></slot>
       </div>
       <span
         id="menu"

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

@@ -45,7 +45,7 @@ export declare class DaikinMenu extends DDSElement {
      * Specifies the initial position of the menu relative to the trigger.
      * However, if there isn't enough space in the specified direction, the menu will automatically adjust its direction.
      */
-    placement: "top" | "bottom" | "left" | "right";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     /**
      * Whether the menu is open.
      */
@@ -76,6 +76,11 @@ export declare class DaikinMenu extends DDSElement {
     private _reflectDynamicProperties;
     private _handleSlotChange;
     private _handleTriggerClick;
+    private _handleTouchEnd;
+    /**
+     * Handles click events on the menu-item.
+     * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
+     */
     private _handleClick;
     private _handleBeforeToggle;
     private _handleToggle;

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const guard_js = require("lit/directives/guard.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const focusTrap = require("../../controllers/focus-trap.cjs");

package/dist/cjs-dev/components/modal-footer/daikin-modal-footer.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

package/dist/cjs-dev/components/modal-header/daikin-modal-header.cjs

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -138,9 +139,10 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
       this.current,
       this.window
     );
+    const landmarkLabel = this.ariaLabel || "Pagination";
     return lit.html`
       <div
-        aria-label="Pagination"
+        aria-label=${landmarkLabel}
         role="navigation"
         class="inline-flex flex-wrap"
       >

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.cjs

@@ -4,6 +4,7 @@ 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

package/dist/cjs-dev/components/progress-indicator/daikin-progress-indicator.cjs

@@ -3,6 +3,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

package/dist/cjs-dev/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -5,6 +5,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -52,7 +53,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       this.status === "inprogress" ? "step" : void 0
     )}
     >
-      <div class="flex flex-col gap-1 w-full">
+      <div class="flex flex-col gap-1 w-full overflow-auto">
         <slot class="font-bold leading-[130%]"></slot>
         <slot name="description" class="text-sm leading-[130%]"></slot>
       </div>
@@ -72,7 +73,7 @@ exports.DaikinProgressIndicatorItem.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      min-width: 9rem;
+      min-width: 5rem;
     }
   `;
 __decorateClass([

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

@@ -5,9 +5,9 @@ const lit = require("lit");
 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,4 +1,4 @@
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } from "../../base/index.cjs";
 /**
  * The radio button component is a UI element that allows users to select one options from a set of choices.
  * It functions similarly to the HTML `<input type="radio">` tag. \

package/dist/cjs-dev/components/radio-group/daikin-radio-group.cjs

@@ -5,6 +5,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -4,6 +4,7 @@ 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -4,15 +4,18 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
+require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const sliderUtils = require("./slider-utils.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;
@@ -259,5 +262,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinSlider.prototype, "_dragging", 2);
 exports.DaikinSlider = __decorateClass([
-  decorators_js.customElement("daikin-slider")
+  decorators.ddsElement("daikin-slider")
 ], exports.DaikinSlider);

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } from "../../base/index.cjs";
 /**
  * The slider component is a control that allows users to input numerical values within a specific range intuitively.
  * It functions similarly to the HTML `<input type="range">` tag, allows you to set the range of values.

package/dist/cjs-dev/components/status-message/daikin-status-message.cjs

@@ -0,0 +1,110 @@
+"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 ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-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 = (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;
+};
+const cvaWrapper = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "size-full",
+    "font-daikinSerif",
+    "font-normal",
+    "leading-[130%]",
+    "gap-1",
+    "break-all",
+    "before:content-['']",
+    "before:flex-none"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["before:size-4", "text-sm", "h-[18px]"],
+        medium: ["before:size-6", "text-base", "h-6"]
+      },
+      status: {
+        neutral: [
+          "text-ddt-color-common-text-primary",
+          "before:i-daikin-neutral",
+          "before:text-ddt-color-common-disabled"
+        ],
+        positive: [
+          "text-ddt-color-common-text-primary",
+          "before:i-daikin-success",
+          "before:text-ddt-color-common-success"
+        ],
+        negative: [
+          "text-ddt-color-common-danger-default",
+          "before:i-daikin-error",
+          "before:text-ddt-color-common-danger-default"
+        ],
+        warning: [
+          "text-ddt-color-common-text-primary",
+          "before:i-daikin-warning",
+          "before:text-ddt-color-common-warning"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinStatusMessage = class DaikinStatusMessage extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "medium";
+    this.status = "positive";
+    this.statusMessageRole = null;
+    this.screenReaderText = null;
+  }
+  render() {
+    return lit.html`
+      <div
+        class=${cvaWrapper({ status: this.status, size: this.size })}
+        role=${ifDefined_js.ifDefined(this.statusMessageRole ?? void 0)}
+      >
+        ${this.screenReaderText ? lit.html`<span class="sr-only">${this.screenReaderText}</span>` : lit.nothing}
+        <span>
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+exports.DaikinStatusMessage.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinStatusMessage.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinStatusMessage.prototype, "status", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "status-message-role" })
+], exports.DaikinStatusMessage.prototype, "statusMessageRole", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "screen-reader-text" })
+], exports.DaikinStatusMessage.prototype, "screenReaderText", 2);
+exports.DaikinStatusMessage = __decorateClass([
+  decorators.ddsElement("daikin-status-message")
+], exports.DaikinStatusMessage);

package/dist/cjs-dev/components/status-message/daikin-status-message.d.cts

@@ -0,0 +1,51 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * A status message is a concise UI component for displaying status feedback, notifications, or contextual information to users. It typically indicates success, warning, error, or other states, helping users quickly understand the current state or important updates in the interface.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/status-message/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-status-message>description</daikin-status-message>
+ * ```
+ */
+export declare class DaikinStatusMessage extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Sets the size of the status message component.
+     * - "small": Compact status message style.
+     * - "medium": Default status message style.
+     */
+    size: "small" | "medium";
+    /**
+     * Specifies the status of the message.
+     * - "neutral": Neutral or incomplete status.
+     * - "positive": Success or confirmation status.
+     * - "negative": Error or failure status.
+     * - "warning": Warning or caution status.
+     */
+    status: "neutral" | "positive" | "negative" | "warning";
+    /**
+     * Sets the ARIA role of the status message component.
+     * - "[alert](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role)": Indicates an important message that requires user attention.
+     * - "[status](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role)": Indicates an advisory message that provides feedback or updates.
+     * - `null` (default): No specific ARIA role, meaning the message content will not be announced automatically when it changes.
+     */
+    statusMessageRole: "alert" | "status" | null;
+    /**
+     * Provides an alternative text for screen readers that is read by assistive technologies but not displayed visually.
+     *
+     * e.g. If you use the message component for a password validation status (ensure the statusMessageRole is `status`), you might do the following:
+     * When the user inputs an 8-character password, set the status to `positive` and update the screenReaderText to "Met,". This allows the screen reader to announce the full updated message, such as "Met, minimum 8 characters".
+     */
+    screenReaderText: string | null;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-status-message": DaikinStatusMessage;
+    }
+}

package/dist/cjs-dev/components/status-message/index.cjs

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

package/dist/cjs-dev/components/status-message/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-status-message.cjs";

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

@@ -4,6 +4,7 @@ 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

package/dist/cjs-dev/components/tab-panels/daikin-tab-panels.cjs

@@ -4,6 +4,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -7,6 +7,7 @@ const ifDefined_js = require("lit/directives/if-defined.js");
 const ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -37,12 +38,12 @@ const cvaRow = classVarianceAuthority.cva(
     variants: {
       selected: {
         false: [
-          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-hover",
+          "group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-hover",
           "data-[hover]:bg-ddt-color-common-surface-hover"
         ],
         true: [
           "bg-ddt-color-common-surface-selected-default",
-          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-selected-hover",
+          "group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-selected-hover",
           "data-[hover]:bg-ddt-color-common-surface-selected-hover"
         ]
       }

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

@@ -4,6 +4,7 @@ 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -4,6 +4,7 @@ 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -3,6 +3,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -5,9 +5,9 @@ const lit = require("lit");
 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } 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.

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

@@ -5,9 +5,9 @@ const lit = require("lit");
 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const isSimpleKey = require("../../utils/is-simple-key.cjs");
 require("../icon-button/daikin-icon-button.cjs");

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

@@ -1,5 +1,5 @@
 import { PropertyValues, TemplateResult } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } 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.

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

@@ -7,9 +7,9 @@ const decorators_js = require("lit/decorators.js");
 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,6 +1,6 @@
 import { InputMask, FactoryOpts } from 'imask';
 import { PropertyValues, TemplateResult } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 export type { FactoryOpts, InputMask };
 /**

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

@@ -5,16 +5,19 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 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 decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 require("../dropdown-item/daikin-dropdown-item.cjs");
 require("../dropdown/daikin-dropdown.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;
@@ -154,7 +157,7 @@ const cvaField = classVarianceAuthority.cva(
     "bg-ddt-color-common-background-default",
     "p-3",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -575,7 +578,7 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinTimePicker.prototype, "_meridiem", 2);
 exports.DaikinTimePicker = __decorateClass([
-  decorators_js.customElement("daikin-time-picker")
+  decorators.ddsElement("daikin-time-picker")
 ], exports.DaikinTimePicker);
 exports.calcDigitInput = calcDigitInput;
 exports.formatPartsForUI = formatPartsForUI;

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } from "../../base/index.cjs";
 import { default as DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
 /**
  * Represents the hour and minute parts of a time value.

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

@@ -3,6 +3,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -50,7 +50,10 @@ export declare class DaikinToastNotification extends DDSElement {
      */
     closable: boolean;
     /**
-     * The timestamp to display.
+     * The timestamp to display. Accepts a Date object and displays it in YYYY/MM/DD format.
+     *
+     * @example
+     * element.timestamp = new Date();
      */
     timestamp: Date | null;
     /**

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

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");