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

package/dist/es/components/menu/daikin-menu.js

@@ -4,6 +4,7 @@ import { unsafeCSS, css, html } from "lit";
 import { queryAssignedElements, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
@@ -92,19 +93,27 @@ let DaikinMenu = class extends 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 && !event.target.disabled) {
+    if (event.target instanceof DaikinListItem && !event.target.disabled && this.popoverValue === "auto") {
       this.open = false;
     }
   }
@@ -131,7 +140,10 @@ let DaikinMenu = class extends 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/es/components/modal/daikin-modal.js

@@ -4,6 +4,7 @@ import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { FocusTrapController } from "../../controllers/focus-trap.js";

package/dist/es/components/modal-footer/daikin-modal-footer.js

@@ -1,5 +1,6 @@
 import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/modal-header/daikin-modal-header.js

@@ -3,6 +3,7 @@ import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/pagination/daikin-pagination.js

@@ -4,6 +4,7 @@ import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -136,9 +137,10 @@ let DaikinPagination = class extends DDSElement {
       this.current,
       this.window
     );
+    const landmarkLabel = this.ariaLabel || "Pagination";
     return html`
       <div
-        aria-label="Pagination"
+        aria-label=${landmarkLabel}
         role="navigation"
         class="inline-flex flex-wrap"
       >

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/progress-indicator/daikin-progress-indicator.js

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -3,6 +3,7 @@ import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -50,7 +51,7 @@ let DaikinProgressIndicatorItem = class extends DDSElement {
       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>
@@ -70,7 +71,7 @@ DaikinProgressIndicatorItem.styles = css`
     :host {
       display: block;
       width: 100%;
-      min-width: 9rem;
+      min-width: 5rem;
     }
   `;
 __decorateClass([

package/dist/es/components/radio/daikin-radio.d.ts

@@ -1,4 +1,4 @@
-import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DDSFormElement } from "../../base/index.js";
 /**
  * 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/es/components/radio/daikin-radio.js

@@ -3,9 +3,9 @@ import { unsafeCSS, css, nothing, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/es/components/radio-group/daikin-radio-group.js

@@ -3,6 +3,7 @@ import { unsafeCSS, css, html } from "lit";
 import { queryAssignedElements, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/select/daikin-select.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/slider/daikin-slider.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DDSFormElement } from "../../base/index.js";
 /**
  * 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/es/components/slider/daikin-slider.js

@@ -1,8 +1,11 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { getValueFromRatio, getValueByKeydown } from "./slider-utils.js";
 var __defProp = Object.defineProperty;
@@ -257,7 +260,7 @@ __decorateClass([
   state()
 ], DaikinSlider.prototype, "_dragging", 2);
 DaikinSlider = __decorateClass([
-  customElement("daikin-slider")
+  ddsElement("daikin-slider")
 ], DaikinSlider);
 export {
   DaikinSlider

package/dist/es/components/status-message/daikin-status-message.d.ts

@@ -0,0 +1,51 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * 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/es/components/status-message/daikin-status-message.js

@@ -0,0 +1,111 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-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;
+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 cvaWrapper = 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"
+        ]
+      }
+    }
+  }
+);
+let DaikinStatusMessage = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "medium";
+    this.status = "positive";
+    this.statusMessageRole = null;
+    this.screenReaderText = null;
+  }
+  render() {
+    return html`
+      <div
+        class=${cvaWrapper({ status: this.status, size: this.size })}
+        role=${ifDefined(this.statusMessageRole ?? void 0)}
+      >
+        ${this.screenReaderText ? html`<span class="sr-only">${this.screenReaderText}</span>` : nothing}
+        <span>
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+DaikinStatusMessage.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinStatusMessage.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinStatusMessage.prototype, "status", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "status-message-role" })
+], DaikinStatusMessage.prototype, "statusMessageRole", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "screen-reader-text" })
+], DaikinStatusMessage.prototype, "screenReaderText", 2);
+DaikinStatusMessage = __decorateClass([
+  ddsElement("daikin-status-message")
+], DaikinStatusMessage);
+export {
+  DaikinStatusMessage
+};

package/dist/es/components/status-message/index.d.ts

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

package/dist/es/components/status-message/index.js

@@ -0,0 +1,4 @@
+import { DaikinStatusMessage } from "./daikin-status-message.js";
+export {
+  DaikinStatusMessage
+};

package/dist/es/components/tab/daikin-tab.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/tab-panels/daikin-tab-panels.js

@@ -2,6 +2,7 @@ import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/table/daikin-table.js

@@ -5,6 +5,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -35,12 +36,12 @@ const cvaRow = 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/es/components/table-cell/daikin-table-cell.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/table-header-cell/daikin-table-header-cell.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/tabs/daikin-tabs.js

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DDSFormElement } from "../../base/index.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * The text area component is designed for multiline text input, similar to the HTML `<textarea>` tag.

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

@@ -3,9 +3,9 @@ import { unsafeCSS, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

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

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

@@ -3,9 +3,9 @@ import { unsafeCSS, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
 import "../icon-button/daikin-icon-button.js";

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

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

package/dist/es/components/text-masked-field/daikin-text-masked-field.js

@@ -5,9 +5,9 @@ import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/es/components/time-picker/daikin-time-picker.d.ts

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

package/dist/es/components/time-picker/daikin-time-picker.js

@@ -1,9 +1,12 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../dropdown-item/daikin-dropdown-item.js";
 import "../dropdown/daikin-dropdown.js";
@@ -152,7 +155,7 @@ const cvaField = cva(
     "bg-ddt-color-common-background-default",
     "p-3",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -561,7 +564,7 @@ __decorateClass([
   state()
 ], DaikinTimePicker.prototype, "_meridiem", 2);
 DaikinTimePicker = __decorateClass([
-  customElement("daikin-time-picker")
+  ddsElement("daikin-time-picker")
 ], DaikinTimePicker);
 export {
   DaikinTimePicker,

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

@@ -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/es/components/toast-notification/daikin-toast-notification.js

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -3,6 +3,7 @@ import { unsafeCSS, css, 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 "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DDSFormElement } from "../../base/index.js";
 /**
  * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
  * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.

package/dist/es/components/toggle/daikin-toggle.js

@@ -2,9 +2,9 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import "../../base/dds-element.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/es/components/tooltip/daikin-tooltip.js

@@ -4,6 +4,7 @@ import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";

package/dist/es/components/tree/daikin-tree.d.ts

@@ -38,8 +38,9 @@ export declare class DaikinTree extends DDSElement {
      */
     selectable: boolean;
     /**
-     * The value of the currently selected tree section or tree item.
+     * The values of the currently selected tree sections or items.
      * Even if `selectable` is `false`, you can still set this property yourself.
+     * See the `value` property of the `daikin-tree-section` and `daikin-tree-item` components.
      */
     selectedItems: string[];
     private readonly _children;