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

package/dist/cjs/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")

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

@@ -1,7 +1,14 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
-import { cvaContainer, cvaContent, cvaTimestamp } from "../../utils/notification-common.cjs";
+import { cvaTimestamp } from "../../utils/notification-common.cjs";
 export type ToastNotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaContent | typeof cvaTimestamp>;
+declare const cvaContainer: (props?: ({
+    variant?: "inline" | "toast" | null | undefined;
+    status?: "negative" | "alarm" | "warning" | "positive" | "information" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaContent: (props?: ({
+    layout?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * The toast notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
  *
@@ -39,6 +46,8 @@ export declare class DaikinToastNotification extends DDSElement {
     name: string;
     /**
      * Status of the toast notification.
+     *
+     * @default "positive"
      */
     status: ToastNotificationVariantProps["status"];
     /**
@@ -50,7 +59,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;
     /**
@@ -69,3 +81,4 @@ declare global {
         "daikin-toast-notification": DaikinToastNotification;
     }
 }
+export {};

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

@@ -6,6 +6,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -75,7 +76,6 @@ const cvaContainer = classVarianceAuthority.cva(
 exports.DaikinToastNotificationManager = class DaikinToastNotificationManager extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.position = "bottom-right";
     this._knownItemSet = /* @__PURE__ */ new Set();
     this._closedItemSet = /* @__PURE__ */ new WeakSet();
     this._containerRef = ref_js.createRef();
@@ -183,7 +183,19 @@ exports.DaikinToastNotificationManager.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "bottom-right",
+    isAllowedValue: ddsProperty.oneOf([
+      "top",
+      "top-left",
+      "top-right",
+      "bottom",
+      "bottom-left",
+      "bottom-right"
+    ])
+  })
 ], exports.DaikinToastNotificationManager.prototype, "position", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-toast-notification" })

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

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaContainer: (props?: ({
-    position?: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
+    position?: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ToastPosition = MergeVariantProps<typeof cvaContainer>["position"];
 /**
@@ -43,6 +43,8 @@ export declare class DaikinToastNotificationManager extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify where on the screen the toast will be displayed.
+     *
+     * @default "bottom-right"
      */
     position: ToastPosition;
     private readonly _items;

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

@@ -2,9 +2,10 @@
 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");
 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");
@@ -70,11 +71,11 @@ exports.DaikinToggle = class DaikinToggle extends ddsFormElement.DDSFormElement
     return lit.html`<input
       class=${TOGGLE_CLASS_NAME}
       type="checkbox"
-      name=${this.name}
-      .value=${this.value}
+      name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
       role="switch"
-      .checked=${this.checked}
       ?disabled=${this.disabled}
+      .checked=${this.checked}
+      .value=${this.value}
       @change=${this._handleChange}
     />`;
   }
@@ -92,10 +93,10 @@ exports.DaikinToggle.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinToggle.prototype, "checked", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinToggle.prototype, "disabled", 2);
 exports.DaikinToggle = __decorateClass([
   decorators.ddsElement("daikin-toggle")

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

@@ -6,6 +6,13 @@ import { DDSFormElement } from "../../base/index.cjs";
  * This component is ideal for scenarios where the binary choice has a significant or immediate effect, such as enabling or disabling a feature or setting.
  * Unlike `daikin-checkbox`, this component doesn't have a label and a "indeterminate" state.
  *
+ * @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 type="checkbox">` element.
  *
  * @example

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dom = require("@floating-ui/dom");
 const classVarianceAuthority = require("class-variance-authority");
 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
@@ -58,12 +58,7 @@ const DEFAULT_TOOLTIP_SPACING = "20px";
 exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.placement = "bottom";
-    this.color = "default";
     this.open = false;
-    this.description = "";
-    this.popoverValue = "auto";
-    this.trigger = "hover";
     this._willBeFocusedByPress = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
@@ -193,22 +188,52 @@ exports.DaikinTooltip.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "bottom",
+    isAllowedValue: ddsProperty.oneOf([
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ])
+  })
 ], exports.DaikinTooltip.prototype, "placement", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: ddsProperty.oneOf(["default", "inverse"])
+  })
 ], exports.DaikinTooltip.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTooltip.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinTooltip.prototype, "description", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: "popover-value" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "popover-value",
+    fallbackValue: "auto",
+    isAllowedValue: ddsProperty.oneOf(["auto", "manual"])
+  })
 ], exports.DaikinTooltip.prototype, "popoverValue", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "hover",
+    isAllowedValue: ddsProperty.oneOf([
+      "hover",
+      "click",
+      "manual"
+    ])
+  })
 ], exports.DaikinTooltip.prototype, "trigger", 2);
 exports.DaikinTooltip = __decorateClass([
   decorators.ddsElement("daikin-tooltip")

package/dist/cjs/components/tooltip/daikin-tooltip.d.cts

@@ -16,7 +16,7 @@ type TooltipVariantProps = MergeVariantProps<typeof cvaTooltip>;
  *
  * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger.
  *
- * @csspart tooltip - Change the style of tooltips.
+ * @csspart tooltip - CSS styles applied to the `tooltip` part target the internal `<span>` element wrapping the content. For instance, setting `max-width: 8rem;` on this part restricts the container's width, causing long text to wrap automatically.
  *
  * @example
  *
@@ -42,10 +42,14 @@ export declare class DaikinTooltip extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specifies the position of the tooltip relative to the trigger.
+     *
+     * @default "bottom"
      */
     placement: "top" | "bottom" | "left" | "right";
     /**
      * Specifies the tooltip theme.
+     *
+     * @default "default"
      */
     color: TooltipVariantProps["color"];
     /**
@@ -62,6 +66,8 @@ export declare class DaikinTooltip extends DDSElement {
      * Specify the value of the popover attribute in the Popover API.
      * - `auto`: Clicking on a trigger element will open a tooltip, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple tooltips at the same time.
      * - `manual`: No click operation is specified for the trigger element. It will not close even if the Esc button is pressed. Multiple tooltips can be opened at once.
+     *
+     * @default "auto"
      */
     popoverValue: "auto" | "manual";
     /**
@@ -69,6 +75,8 @@ export declare class DaikinTooltip extends DDSElement {
      * - `hover`: The tooltip is displayed when the mouse hovers over the trigger element, and hidden when the mouse is no longer hovering. (default)
      * - `click`: The tooltip is displayed when the mouse clicks on the trigger element, and hidden when you click on it again.
      * - `manual`: The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
+     *
+     * @default "hover"
      */
     trigger: "hover" | "click" | "manual";
     /**

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

@@ -4,6 +4,7 @@ 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");
@@ -96,10 +97,10 @@ exports.DaikinTree.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTree.prototype, "selectable", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTree.prototype, "selectedItems", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })

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

@@ -2,11 +2,11 @@
 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 ref_js = require("lit/directives/ref.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");
@@ -114,6 +114,7 @@ exports.DaikinTreeItem = class DaikinTreeItem extends ddsElement.DDSElement {
   render() {
     return lit.html`<div
       ${ref_js.ref(this._focusableRef)}
+      part="item"
       class=${cvaTreeChildren({
       disabled: this.disabled,
       selected: this._selected,
@@ -185,16 +186,16 @@ exports.DaikinTreeItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String })
 ], exports.DaikinTreeItem.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTreeItem.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTreeItem.prototype, "selected", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, attribute: false })
+  ddsProperty.property({ type: Number, attribute: false })
 ], exports.DaikinTreeItem.prototype, "level", 2);
 exports.DaikinTreeItem = __decorateClass([
   decorators.ddsElement("daikin-tree-item")

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

@@ -20,6 +20,8 @@ export declare const cvaTreeChildren: (props?: ({
  *
  * @slot - A slot for the tree item content.
  *
+ * @csspart item - CSS styles applied to the `item` part target the internal `<div>` element wrapping the content. For instance, setting `cursor: grab;` changes the hover cursor, signaling that the tree item is draggable.
+ *
  * @example
  *
  * ```js
@@ -33,7 +35,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 +47,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

@@ -6,6 +6,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -209,19 +210,19 @@ exports.DaikinTreeSection.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String })
 ], exports.DaikinTreeSection.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTreeSection.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTreeSection.prototype, "selected", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTreeSection.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, attribute: false })
+  ddsProperty.property({ type: Number, attribute: false })
 ], exports.DaikinTreeSection.prototype, "level", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })

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