@daikin-oss/design-system-web-components 1.5.2 → 1.6.0

package/dist/es-dev/components/navigation-item/daikin-navigation-item.js

@@ -21,6 +21,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBaseClasses = [
   "flex",
   "relative",
+  "h-full",
+  "w-full",
   "gap-1",
   "justify-center",
   "items-center",
@@ -28,9 +30,6 @@ const cvaBaseClasses = [
   "px-8",
   "pt-2",
   "pb-3",
-  "font-daikinSerif",
-  "text-base",
-  "leading-[130%]",
   "font-bold",
   "focus-visible:outline-hidden",
   "focus-visible:before:absolute",
@@ -113,7 +112,7 @@ let DaikinNavigationItem = class extends DDSElement {
       case "link": {
         const linkDisabled = this.disabled || this.href == null;
         return html`
-          <div role="listitem">
+          <div role="listitem" class="h-full">
             <a
               href=${ifDefined(!linkDisabled ? this.href : void 0)}
               class=${cvaLinkItem({
@@ -127,14 +126,14 @@ let DaikinNavigationItem = class extends DDSElement {
                 name="left-icon"
                 class="icon-size-6 slotted:flex-none"
               ></slot
-              ><span class="px-1"><slot class="text-nowrap"></slot></span
+              ><span class="px-1 natural-break text-left"><slot></slot></span
             ></a>
           </div>
         `;
       }
       case "menu":
         return html`
-          <div role="listitem">
+          <div role="listitem" class="h-full">
             <button
               type="button"
               class=${cvaMenuItem({
@@ -150,7 +149,7 @@ let DaikinNavigationItem = class extends DDSElement {
                 name="left-icon"
                 class="icon-size-6 slotted:flex-none"
               ></slot
-              ><span class="px-1"><slot class="text-nowrap"></slot></span
+              ><span class="px-1 natural-break text-left"><slot></slot></span
               ><span
                 class="icon-[daikin--chevron-down] size-6 flex-none rotate-(--chevron-rotation)"
               ></span>

package/dist/es-dev/components/pagination/daikin-pagination.d.ts

@@ -2,7 +2,8 @@ import { DDSElement } from "../../base/index.js";
 /**
  * The pagination component is used to navigate through a list of items that are divided into multiple pages.
  *
- * @fires change - Emitted when the current page number is changed.
+ * @fires before-change - _Cancellable._ A custom event emitted before the current page changes. The pending page number is available as `event.detail.page`. If cancelled, the page will not change.
+ * @fires change - A custom event emitted when the current page number is changed.
  *
  * @example
  *
@@ -19,6 +20,8 @@ export declare class DaikinPagination extends DDSElement {
     /**
      * The current page number, starting at 1.
      * Must be greater than 0 and less than or equal to `this.total`.
+     * To keep external state in sync, listen to the `change` event.
+     * To cancel a page change before it happens, listen to the `before-change` event and call `event.preventDefault()`.
      */
     current: number;
     /**

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

@@ -30,7 +30,6 @@ const cvaPageButton = cva(
     "min-w-12",
     "min-h-12",
     "p-1",
-    "font-daikinSerif",
     "text-base",
     "not-italic",
     "leading-6",
@@ -79,7 +78,6 @@ const cvaEllipsis = cva([
   "justify-center",
   "w-12",
   "h-12",
-  "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
@@ -95,7 +93,6 @@ const cvaChevronButton = cva([
   "w-12",
   "h-12",
   "text-ddt-color-common-neutral-default",
-  "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
@@ -118,12 +115,22 @@ let DaikinPagination = class extends DDSElement {
     this.window = 5;
   }
   _goto(page) {
-    this.current = this.current = Math.max(Math.min(page, this.total), 1);
+    const newPage = Math.max(Math.min(page, this.total), 1);
+    if (!this.dispatchEvent(
+      new CustomEvent("before-change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: { page: newPage }
+      })
+    )) {
+      return;
+    }
+    this.current = newPage;
     this.dispatchEvent(
       new Event("change", {
         bubbles: true,
-        composed: true,
-        cancelable: true
+        composed: true
       })
     );
   }

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

@@ -55,7 +55,6 @@ const cvaBarContainer = cva(
     "justify-between",
     "items-center",
     "text-ddt-color-common-text-primary",
-    "leading-[130%]",
     "font-bold",
     "natural-break"
   ],
@@ -80,7 +79,7 @@ const cvaBarContainer = cva(
     }
   }
 );
-const cvaHelper = cva(["text-sm", "leading-[130%]", "natural-break"], {
+const cvaHelper = cva(["text-(length:--dds-font-size-350)", "natural-break"], {
   variants: {
     variant: {
       inprogress: ["text-ddt-color-common-text-secondary"],
@@ -129,7 +128,7 @@ let DaikinProgressBar = class extends DDSElement {
   }
   render() {
     const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
-    return html`<div class="flex flex-col gap-2 w-full font-daikinSerif">
+    return html`<div class="flex flex-col gap-2 w-full">
       <div class=${cvaBarContainer({ variant: this.variant })}>
         <slot></slot>
       </div>

package/dist/es-dev/components/progress-indicator/daikin-progress-indicator.d.ts

@@ -16,16 +16,16 @@ import { DDSElement } from "../../base/index.js";
  * ```
  *
  * ```html
- * <daikin-progress-indicator>
- *   <daikin-progress-indicator-item state="unfinished">
+ * <daikin-progress-indicator currentItem="1">
+ *   <daikin-progress-indicator-item>
  *     Title 1
  *     <span slot="description">Description 1</span>
  *   </daikin-progress-indicator-item>
- *   <daikin-progress-indicator-item state="inprogress">
+ *   <daikin-progress-indicator-item>
  *     Title 2
  *     <span slot="description">Description 2</span>
  *   </daikin-progress-indicator-item>
- *   <daikin-progress-indicator-item state="finished">
+ *   <daikin-progress-indicator-item>
  *     Title 3
  *     <span slot="description">Description 3</span>
  *   </daikin-progress-indicator-item>

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

@@ -32,7 +32,7 @@ let DaikinProgressIndicator = class extends DDSElement {
   }
   render() {
     return html`<div
-      class="flex justify-stretch items-start gap-2 w-full font-daikinSerif"
+      class="flex justify-stretch items-start gap-2 w-full"
       role="list"
     >
       <slot @slotchange=${this._handleSlotChange}></slot>

package/dist/es-dev/components/progress-indicator-item/daikin-progress-indicator-item.d.ts

@@ -22,7 +22,7 @@ type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
  * ```
  *
  * ```html
- * <daikin-progress-indicator-item state="unfinished">
+ * <daikin-progress-indicator-item>
  *   Progress indicator label
  *   <span slot="description">Progress indicator description</span>
  * </daikin-progress-indicator-item>

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

@@ -25,8 +25,7 @@ const cvaContainer = cva(
     "w-full",
     "text-ddt-color-common-text-primary",
     "pt-2",
-    "border-t-4",
-    "font-daikinSerif"
+    "border-t-4"
   ],
   {
     variants: {
@@ -48,13 +47,16 @@ let DaikinProgressIndicatorItem = class extends DDSElement {
     )}
     >
       <div class="flex flex-col gap-1 w-full overflow-auto natural-break">
-        <slot class="font-bold leading-[130%]"></slot>
-        <slot name="description" class="text-sm leading-[130%]"></slot>
+        <span class="font-bold"><slot></slot></span>
+        <slot
+          class="text-(length:--dds-font-size-350)"
+          name="description"
+        ></slot>
       </div>
       ${this.status === "finished" ? html`
             <span
               role="img"
-              class="flex-none size-4 icon-[daikin--success] text-ddt-color-common-brand-default"
+              class="flex-none size-4 icon-[daikin--success] text-ddt-color-common-brand-default mt-0.5"
               aria-label="Completed"
             ></span>
           ` : nothing}

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

@@ -44,6 +44,7 @@ export declare class DaikinRadio extends DDSFormElement {
     labelPosition: "right" | "hidden";
     /**
      * Specify the radio button checked state.
+     * To keep external state in sync, listen to the `change` event.
      */
     checked: boolean;
     /**

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

@@ -18,6 +18,17 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaWrapper = cva(
+  ["group", "flex", "gap-2", "items-center", "size-full"],
+  {
+    variants: {
+      disabled: {
+        false: ["cursor-pointer"],
+        true: []
+      }
+    }
+  }
+);
 const RADIO_CLASS_NAME = cva([
   "flex",
   "justify-center",
@@ -31,6 +42,7 @@ const RADIO_CLASS_NAME = cva([
   "focus-visible:outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "unchecked:border-2",
+  "enabled:cursor-pointer",
   "enabled:unchecked:border-ddt-color-common-neutral-default",
   "group-hover:unchecked:enabled:border-ddt-color-common-neutral-hover",
   "group-active:unchecked:enabled:border-ddt-color-common-neutral-press",
@@ -70,7 +82,7 @@ let DaikinRadio = class extends DDSFormElement {
   }
   _handleClick(event) {
     var _a;
-    if (this.disabled) {
+    if (this.disabled || this.disabledByParent) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -90,7 +102,7 @@ let DaikinRadio = class extends DDSFormElement {
   render() {
     const disabled = this.disabled || this.disabledByParent;
     return html`<label
-      class="group flex gap-2 items-center size-full font-daikinSerif"
+      class=${cvaWrapper({ disabled })}
       @click=${this._handleClick}
     >
       <span class="p-2">

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

@@ -48,7 +48,8 @@ export declare class DaikinRadioGroup extends DDSElement {
     name: string;
     /**
      * `value` of the currently selected radio.
-     * See {@link DaikinRadio.value}.
+     * See the `value` property of `daikin-radio`.
+     * To keep external state in sync, listen to the `change` event.
      */
     value: string;
     /**

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

@@ -35,7 +35,9 @@ let DaikinRadioGroup = class extends DDSElement {
     this.disabled = false;
     this._label = null;
     this._handleRadioChange = (event) => {
+      event.stopPropagation();
       this.value = event.target.value;
+      this.dispatchEvent(new Event("change"));
     };
   }
   _reflectSlotProperties() {

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

@@ -42,7 +42,6 @@ const cvaSelect = cva(
     "slotted-select:pl-4!",
     "slotted-select:pr-12!",
     "slotted-select:text-base!",
-    "slotted-select:font-daikinSerif!",
     "slotted-select:border!",
     "slotted-select:border-(--color-base)!",
     "slotted-select:rounded-sm!",

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

@@ -9,7 +9,7 @@ import { DDSFormElement } from "../../base/index.js";
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A retargeted event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="range">` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

package/dist/es-dev/components/slider/daikin-slider.js

@@ -19,6 +19,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaWrapper = cva(["relative", "w-full", "h-6"], {
+  variants: {
+    disabled: {
+      false: ["cursor-pointer"],
+      true: []
+    }
+  }
+});
 const cvaSliderThumb = cva(
   [
     "absolute",
@@ -34,7 +42,6 @@ const cvaSliderThumb = cva(
     variants: {
       disabled: {
         false: [
-          "cursor-pointer",
           "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
           "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
           "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
@@ -76,11 +83,14 @@ let DaikinSlider = class extends DDSFormElement {
     this._thumbRef = createRef();
     this.value = this.min;
   }
-  _updateFormValue() {
+  _updateFormValue(emitEvents) {
     if (this.disabled) {
       return;
     }
     this.setFormValue(this.value);
+    if (!emitEvents) {
+      return;
+    }
     this.dispatchEvent(
       new Event("change", {
         bubbles: true,
@@ -205,7 +215,7 @@ let DaikinSlider = class extends DDSFormElement {
     return html`
       <span
         ${ref(this._sliderRef)}
-        class="w-full h-6 relative"
+        class=${cvaWrapper({ disabled: this.disabled })}
         style="--slider-ratio:${progress}%"
         @mousedown=${this._startDrag}
         @touchstart=${this._startTouch}
@@ -235,7 +245,7 @@ let DaikinSlider = class extends DDSFormElement {
     if (!changedProperties.has("value")) {
       return;
     }
-    this._updateFormValue();
+    this._updateFormValue(changedProperties.get("value") !== void 0);
   }
 };
 DaikinSlider.styles = css`

package/dist/es-dev/components/status-message/daikin-status-message.js

@@ -20,11 +20,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaWrapper = cva(
   [
     "flex",
+    "relative",
     "items-center",
     "size-full",
-    "font-daikinSerif",
     "font-normal",
-    "leading-[130%]",
     "gap-1",
     "natural-break",
     "before:content-['']",
@@ -33,8 +32,8 @@ const cvaWrapper = cva(
   {
     variants: {
       size: {
-        small: ["before:size-4", "text-sm"],
-        medium: ["before:size-6", "text-base"]
+        small: ["before:size-4", "text-(length:--dds-font-size-350)"],
+        medium: ["before:size-6"]
       },
       status: {
         neutral: [

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

@@ -26,9 +26,7 @@ const cvaTab = cva(
     "px-4",
     "pt-2",
     "pb-3",
-    "leading-[130%]",
     "text-center",
-    "font-daikinSerif",
     "tracking-wide",
     "relative",
     "focus-visible:outline-hidden",

package/dist/es-dev/components/table/daikin-table.d.ts

@@ -120,6 +120,7 @@ export declare class DaikinTable<T extends {
     sortable: boolean;
     /**
      * An array of `id` values for the selected rows.
+     * When controlling this property externally, listen to the `change-check` event and read the updated `selection` from the component to keep your state in sync.
      */
     selection: string[];
     /**
@@ -127,6 +128,7 @@ export declare class DaikinTable<T extends {
      * Used with the `order` property to determine which column is sorted and in which direction.
      *
      * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
+     * When controlling `sort` and `order` externally, listen to the `change-sort` event and read the updated `sort` and `order` from the component to keep your state in sync.
      */
     sort: keyof T | null;
     /**

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

@@ -187,7 +187,7 @@ let DaikinTable = class extends DDSElement {
             </slot>
           </td>`
     );
-    return html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
+    return html`<div class="flex flex-col gap-6 w-full">
       <table
         ${ref(this._tableRef)}
         class="w-full group"

package/dist/es-dev/components/tabs/daikin-tabs.d.ts

@@ -43,6 +43,7 @@ export declare class DaikinTabs extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * `value` of the currently selected tab (`daikin-tab`).
+     * When controlling this property externally, listen to the `change` event and read the updated `value` from the component to keep your state in sync.
      */
     value: string;
     /**

package/dist/es-dev/components/tag/daikin-tag.js

@@ -69,7 +69,7 @@ let DaikinTag = class extends DDSElement {
         class=${cvaWrapper()}
       >
         <span
-          class="text-ddt-color-common-text-primary p-2 text-sm leading-[130%] font-daikinSerif natural-break"
+          class="text-ddt-color-common-text-primary p-2 text-(length:--dds-font-size-350) natural-break"
         >
           <slot></slot>
         </span>

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

@@ -15,7 +15,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @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 `<textarea>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

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

@@ -27,7 +27,6 @@ const cvaTextArea = cva(
     "px-4",
     "py-3",
     "rounded-sm",
-    "font-daikinSerif",
     "outline-solid",
     "outline-(--color-border)",
     "outline-1",

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

@@ -15,7 +15,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

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

@@ -34,7 +34,6 @@ const cvaInput = cva(
     "relative",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",

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

@@ -17,7 +17,7 @@ export type { FactoryOpts, InputMask };
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

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

@@ -30,7 +30,6 @@ const cvaInput = cva(
     "relative",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",

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

@@ -73,7 +73,7 @@ export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeIte
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A custom event emitted when the value of component changed. Validation errors will not trigger this event.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when user type value to input area and change the value of component. change dropdown or validation errors will not trigger this event.

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

@@ -485,7 +485,7 @@ let DaikinTimePicker = class extends DDSFormElement {
     return html`<div
       role="group"
       aria-label=${ifDefined(this._label ?? void 0)}
-      class="flex flex-row h-full gap-2 font-daikinSerif"
+      class="flex flex-row h-full gap-2"
     >
       <input
         ${ref(this._timeInputElement)}

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

@@ -29,7 +29,6 @@ const cvaContainer = cva(
     "bg-ddt-color-common-background-default",
     "p-4",
     "overflow-hidden",
-    "font-daikinSerif",
     "transition",
     "box-border",
     "before:size-6",
@@ -78,7 +77,7 @@ const cvaContent = cva(["flex", "items-center", "w-full"], {
     }
   }
 });
-const cvaTitle = cva(["font-bold", "leading-[130%]"], {
+const cvaTitle = cva(["font-bold"], {
   variants: {
     layout: {
       vertical: ["natural-break"],
@@ -86,7 +85,7 @@ const cvaTitle = cva(["font-bold", "leading-[130%]"], {
     }
   }
 });
-const cvaDescription = cva(["inline-block", "leading-[130%]"], {
+const cvaDescription = cva(["inline-block"], {
   variants: {
     layout: {
       vertical: ["natural-break"],

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

@@ -29,6 +29,7 @@ export declare class DaikinToggle extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Whether the toggle switch is turned on.
+     * To keep external state in sync, listen to the `change` event.
      */
     checked: boolean;
     /**

package/dist/es-dev/components/tooltip/daikin-tooltip.d.ts

@@ -54,6 +54,9 @@ export declare class DaikinTooltip extends DDSElement {
     color: TooltipVariantProps["color"];
     /**
      * Whether the tooltip is open.
+     * When controlling this property manually, make sure to:
+     * - Set `trigger="manual"`.
+     * - Either set `popover-value="manual"`, or listen to the `toggle` event and sync your state based on `event.newState`.
      */
     open: boolean;
     /**
@@ -64,8 +67,10 @@ export declare class DaikinTooltip extends DDSElement {
     description: string;
     /**
      * 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.
+     * - `auto`: Enables the browser's native popover behavior, such as closing on outside click or when the Esc key is pressed. Only one `auto` popover can remain open at a time.
+     * - `manual`: Disables automatic light-dismiss behavior. The tooltip will not close on outside click or when the Esc key is pressed, and multiple `manual` popovers can remain open at the same time.
+     *
+     * When controlling `open` manually, either set `popover-value="manual"` or listen to the `toggle` event and sync your state based on `event.newState`.
      *
      * @default "auto"
      */
@@ -76,6 +81,8 @@ export declare class DaikinTooltip extends DDSElement {
      * - `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.
      *
+     * When controlling `open` manually, use `trigger="manual"` (do not use other trigger values).
+     *
      * @default "hover"
      */
     trigger: "hover" | "click" | "manual";

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

@@ -26,12 +26,10 @@ const cvaTooltip = cva(
     "left-(--floating-x,0)",
     "top-(--floating-y,0)",
     "w-max",
-    "text-sm",
+    "text-(length:--dds-font-size-350)",
     "p-2",
-    "leading-[130%]",
     "border",
     "rounded-sm",
-    "font-daikinSerif",
     "absolute",
     "floating-unready:hidden"
   ],
@@ -122,7 +120,7 @@ let DaikinTooltip = class extends DDSElement {
       10
     );
     return html`<div
-      class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
+      class="relative inline-block text-ddt-color-common-text-primary"
     >
       <div
         id="trigger"

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

@@ -8,6 +8,8 @@ import { DDSElement } from "../../base/index.js";
  * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
  * - `daikin-tree` > `daikin-tree-item`
  *
+ * @fires change - A custom event emitted when the selection changes due to user interaction. The updated `selectedItems` can be read from the event target.
+ *
  * @slot - A slot for tree sections and tree items. Place `daikin-tree-section` or `daikin-tree-item` elements here.
  *
  * @example
@@ -39,6 +41,8 @@ export declare class DaikinTree extends DDSElement {
     selectable: boolean;
     /**
      * The values of the currently selected tree sections or items.
+     * When `selectable` is `true`, this property is updated and a `change` event is emitted when the user clicks.
+     * When controlling this property externally, listen to the `change` event and read the updated `selectedItems` from the component to keep your state in sync.
      * 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.
      */