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

package/dist/cjs/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/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/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/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/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/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/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/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/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/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/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",
@@ -563,7 +566,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/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/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/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/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");

package/dist/cjs/components/toggle/daikin-toggle.cjs

@@ -4,9 +4,9 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.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/components/toggle/daikin-toggle.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 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/cjs/components/tooltip/daikin-tooltip.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");

package/dist/cjs/components/tree/daikin-tree.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/components/tree/daikin-tree.d.cts

@@ -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;

package/dist/cjs/components/tree-item/daikin-tree-item.cjs

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.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/components/tree-item/daikin-tree-item.d.cts

@@ -33,7 +33,9 @@ export declare const cvaTreeChildren: (props?: ({
 export declare class DaikinTreeItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Value of the tree item.
+     * An unique value within the tree.
+     * This value is used by the `daikin-tree` component to manage the selection target.
+     * While not required, you can use a value based on the hierarchy to ensure uniqueness. (For example, if the parent is "foo", use "foo.bar".)
      */
     value: string;
     /**
@@ -43,6 +45,9 @@ export declare class DaikinTreeItem extends DDSElement {
     /**
      * Whether the tree item is selected.
      * Controlled by `daikin-tree`.
+     * Do not specify this manually, as it will be overwritten by the `daikin-tree` component.
+     *
+     * @private
      */
     selected: boolean;
     /**

package/dist/cjs/components/tree-section/daikin-tree-section.cjs

@@ -5,6 +5,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.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/components/tree-section/daikin-tree-section.d.cts

@@ -36,7 +36,9 @@ import { DDSElement } from "../../base/index.cjs";
 export declare class DaikinTreeSection extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Value of the tree section.
+     * An unique value within the tree.
+     * This value is used by the `daikin-tree` component to manage the selection target.
+     * While not required, you can use a value based on the hierarchy to ensure uniqueness. (For example, if the parent is "foo", use "foo.bar".)
      */
     value: string;
     /**
@@ -46,6 +48,9 @@ export declare class DaikinTreeSection extends DDSElement {
     /**
      * Whether the tree item is selected.
      * Controlled by `daikin-tree`.
+     * Do not specify this manually, as it will be overwritten by the `daikin-tree` component.
+     *
+     * @private
      */
     selected: boolean;
     /**

package/dist/cjs/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const daikinAccordion = require("./components/accordion/daikin-accordion.cjs");
 const daikinAccordionItem = require("./components/accordion-item/daikin-accordion-item.cjs");
 const daikinAvatar = require("./components/avatar/daikin-avatar.cjs");
+const daikinBadge = require("./components/badge/daikin-badge.cjs");
 const daikinBreadcrumb = require("./components/breadcrumb/daikin-breadcrumb.cjs");
 const daikinBreadcrumbItem = require("./components/breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./components/button/daikin-button.cjs");
@@ -40,6 +41,7 @@ const daikinRadio = require("./components/radio/daikin-radio.cjs");
 const daikinRadioGroup = require("./components/radio-group/daikin-radio-group.cjs");
 const daikinSelect = require("./components/select/daikin-select.cjs");
 const daikinSlider = require("./components/slider/daikin-slider.cjs");
+const daikinStatusMessage = require("./components/status-message/daikin-status-message.cjs");
 const daikinTab = require("./components/tab/daikin-tab.cjs");
 const daikinTabPanels = require("./components/tab-panels/daikin-tab-panels.cjs");
 const daikinTable = require("./components/table/daikin-table.cjs");
@@ -70,6 +72,10 @@ Object.defineProperty(exports, "DaikinAvatar", {
   enumerable: true,
   get: () => daikinAvatar.DaikinAvatar
 });
+Object.defineProperty(exports, "DaikinBadge", {
+  enumerable: true,
+  get: () => daikinBadge.DaikinBadge
+});
 Object.defineProperty(exports, "DaikinBreadcrumb", {
   enumerable: true,
   get: () => daikinBreadcrumb.DaikinBreadcrumb
@@ -220,6 +226,10 @@ Object.defineProperty(exports, "DaikinSlider", {
   enumerable: true,
   get: () => daikinSlider.DaikinSlider
 });
+Object.defineProperty(exports, "DaikinStatusMessage", {
+  enumerable: true,
+  get: () => daikinStatusMessage.DaikinStatusMessage
+});
 Object.defineProperty(exports, "DaikinTab", {
   enumerable: true,
   get: () => daikinTab.DaikinTab