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

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

@@ -18,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-[130%]"], {
+const cvaLabel = cva(["flex", "items-center", "font-bold"], {
   variants: {
     disabled: {
       false: [],
@@ -27,7 +27,7 @@ const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-[130%]"], {
   }
 });
 const cvaHelper = cva(
-  ["flex", "gap-1", "items-center", "leading-[130%]", "text-sm"],
+  ["flex", "gap-1", "items-center", "text-(length:--dds-font-size-350)"],
   {
     variants: {
       type: {
@@ -52,15 +52,18 @@ const cvaHelper = cva(
     }
   }
 );
-const cvaCounter = cva(["text-sm", "font-bold", "ml-auto"], {
-  variants: {
-    variant: {
-      normal: ["text-ddt-color-common-text-secondary"],
-      disabled: ["text-ddt-color-common-disabled"],
-      error: ["text-ddt-color-common-danger-default"]
+const cvaCounter = cva(
+  ["text-(length:--dds-font-size-350)", "font-bold", "ml-auto"],
+  {
+    variants: {
+      variant: {
+        normal: ["text-ddt-color-common-text-secondary"],
+        disabled: ["text-ddt-color-common-disabled"],
+        error: ["text-ddt-color-common-danger-default"]
+      }
     }
   }
-});
+);
 let DaikinInputGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
@@ -133,13 +136,15 @@ let DaikinInputGroup = class extends DDSElement {
     };
     return html`<fieldset class="contents" ?disabled=${this.disabled}>
       <label
-        class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
+        class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary"
       >
         <div class="flex items-center flex-wrap gap-1 font-bold">
           ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
                 ${this.label}
               </span>` : nothing}
-          ${this.required && !this.disabled ? html`<span class="text-ddt-color-common-danger-default text-xs">
+          ${this.required && !this.disabled ? html`<span
+                class="text-ddt-color-common-danger-default text-(length:--dds-font-size-300)"
+              >
                 ${this.required}
               </span>` : nothing}
         </div>

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

@@ -18,31 +18,35 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const LINK_CLASS_NAME = cva([
-  "font-daikinSerif",
-  "leading-[130%]",
-  "relative",
-  "natural-break",
-  "link-enabled:text-ddt-color-link-text-default",
-  "hover:link-enabled:text-ddt-color-link-text-hover",
-  "hover:link-enabled:bg-ddt-color-common-surface-brand-hover",
-  "active:link-enabled:text-ddt-color-link-text-press",
-  "active:link-enabled:bg-ddt-color-common-surface-brand-press",
-  "link-disabled:text-ddt-color-common-disabled",
-  "focus-visible:outline-solid",
-  "focus-visible:outline-2",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "focus-visible:outline-offset-2"
-])();
+const cvaLinkWrapper = cva(
+  [
+    "relative",
+    "natural-break",
+    "link-enabled:text-ddt-color-link-text-default",
+    "hover:link-enabled:text-ddt-color-link-text-hover",
+    "hover:link-enabled:bg-ddt-color-common-surface-brand-hover",
+    "active:link-enabled:text-ddt-color-link-text-press",
+    "active:link-enabled:bg-ddt-color-common-surface-brand-press",
+    "link-disabled:text-ddt-color-common-disabled",
+    "focus-visible:outline-solid",
+    "focus-visible:outline-2",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "focus-visible:outline-offset-2"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["text-(length:--dds-font-size-350)"],
+        medium: []
+      }
+    }
+  }
+);
 const cvaContent = cva([], {
   variants: {
     noUnderline: {
       true: [],
       false: ["border-b", "border-b-current"]
-    },
-    size: {
-      small: ["text-sm"],
-      medium: ["text-base"]
     }
   }
 });
@@ -86,15 +90,14 @@ let DaikinLink = class extends DDSElement {
   render() {
     return html`<a
       ${ref(this._anchorRef)}
-      class=${LINK_CLASS_NAME}
+      class=${cvaLinkWrapper({ size: this.size })}
       href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
       target=${ifDefined(this.target ?? void 0)}
       aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
       ><span class="inline-flex mr-0.5 align-sub">
         <slot name="left-icon" class="icon-size-4"
           ><span class="-mr-0.5"></span></slot></span
-      ><span
-        class=${cvaContent({ noUnderline: this.noUnderline, size: this.size })}
+      ><span class=${cvaContent({ noUnderline: this.noUnderline })}
         ><slot></slot></span
       ><span class="inline-flex ml-0.5 align-sub"
         ><slot name="right-icon" class="icon-size-4"

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

@@ -30,6 +30,14 @@ export declare class DaikinList extends DDSElement {
      * Controlled by the `daikin-menu` component if used within it.
      */
     listRole: "list" | "menu";
+    /**
+     * The border style of the list.
+     * - `none`: No border style.
+     * - `underline`: Underline border style.
+     *
+     * @default "none"
+     */
+    border: "none" | "underline";
     private readonly _listItems;
     private _reflectSlotProperties;
     private _handleSlotChange;

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

@@ -2,7 +2,7 @@ import { unsafeCSS, css, html } from "lit";
 import { queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -87,10 +87,22 @@ DaikinList.styles = css`
       display: inline-block;
       width: 100%;
     }
+
+    :host([border="underline"]) ::slotted(daikin-list-item) {
+      --divider-bottom-display: block;
+    }
   `;
 __decorateClass([
   property({ type: String, attribute: false })
 ], DaikinList.prototype, "listRole", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "none",
+    isAllowedValue: oneOf(["none", "underline"])
+  })
+], DaikinList.prototype, "border", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-list-item" })
 ], DaikinList.prototype, "_listItems", 2);

package/dist/es/components/list-item/daikin-list-item.js

@@ -20,22 +20,29 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const INNER_CN = cva([
   "text-left",
+  // Hover/active background overlay
   "before:absolute",
   "before:inset-0",
   "before:w-full",
   "before:h-full",
+  // Focus ring overlay (separate from hover bg so it can be raised above the divider)
+  "after:absolute",
+  "after:inset-0",
+  "after:w-full",
+  "after:h-full",
   "focus-visible:outline-hidden",
-  "focus-visible:before:outline-solid",
-  "focus-visible:before:outline-2",
-  "focus-visible:before:-outline-offset-2",
-  "focus-visible:before:outline-ddt-color-common-border-focus",
+  "focus-visible:after:outline-solid",
+  "focus-visible:after:outline-2",
+  "focus-visible:after:-outline-offset-2",
+  "focus-visible:after:outline-ddt-color-common-border-focus",
+  "focus-visible:after:z-1",
   // For buttons and links
   "not-active:group-hover:link-enabled:before:bg-ddt-color-common-surface-hover",
   "active:link-enabled:before:bg-ddt-color-common-surface-press",
   // For text
   "group-hover:[&:not(a,button)]:before:bg-ddt-color-common-surface-hover"
 ])();
-const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
+const cvaContent = cva(["block", "pl-2", "pr-3", "mt-0.5", "text-left"], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
@@ -47,7 +54,7 @@ const WRAPPER = cva([
   "group",
   "flex",
   "justify-between",
-  "items-center",
+  "items-start",
   "w-full",
   "min-h-12",
   "p-3",
@@ -109,7 +116,7 @@ let DaikinListItem = class extends DDSElement {
   }
   render() {
     const disabled = this._disabled;
-    const content = html`<span class="flex items-center w-full relative">
+    const content = html`<span class="flex items-start w-full relative">
       <slot
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}
@@ -142,7 +149,7 @@ let DaikinListItem = class extends DDSElement {
       ${list}
       <slot
         name="action"
-        class="flex items-center gap-3"
+        class="flex items-start gap-3"
         @click=${this._handleClickAction}
       >
         <slot
@@ -168,8 +175,22 @@ DaikinListItem.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: block;
+      position: relative;
       width: 100%;
+
+      --divider-bottom-display: none;
+    }
+
+    :host::after {
+      content: "";
+      display: var(--divider-bottom-display, none);
+      position: absolute;
+      inset: 0;
+      top: auto;
+      width: 100%;
+      height: 1px;
+      background: var(--dds-color-divider);
     }
   `;
 __decorateClass([

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

@@ -6,7 +6,7 @@ import { DaikinButton } from "../button/index.js";
 import { DaikinIconButton } from "../icon-button/index.js";
 import { DaikinNavigationItem } from "../navigation-item/index.js";
 /**
- * A menu component is used to show list information when a user interacts with an element.
+ * A menu component displays a floating list of actions or options when a user interacts with a trigger element.
  *
  * Hierarchy:
  * - `daikin-menu` > `daikin-list` > `daikin-list-item`
@@ -19,7 +19,7 @@ import { DaikinNavigationItem } from "../navigation-item/index.js";
  *
  * @cssprop [--ddc-menu-spacing=0px] - Spacing between the menu and the trigger.
  *
- * @csspart menu - CSS styles applied to the `menu` part target the internal `<span>` element wrapping the list.
+ * @csspart menu - Targets the internal `<span>` element wrapping the list. This is typically used to control the menu's width. For example, you can allow the menu to automatically fit its content width by default, while enforcing a minimum width of 200px and max width of 400px: `daikin-menu::part(menu) { min-width: 200px; max-width: 400px; }`
  *
  * @example
  *
@@ -31,6 +31,7 @@ import { DaikinNavigationItem } from "../navigation-item/index.js";
  * ```
  *
  * ```html
+ * <!-- Menu width can be set on the slotted <daikin-list slot="menu">, or via daikin-menu::part(menu). -->
  * <daikin-menu>
  *   <daikin-button>Click me</daikin-button>
  *   <daikin-list slot="menu" style="width: 256px">
@@ -55,12 +56,17 @@ export declare class DaikinMenu extends DDSElement {
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     /**
      * Whether the menu is open.
+     * 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;
     /**
      * Specify the value of the popover attribute in the Popover API.
-     * - `auto`: Clicking on a trigger element will open a menu, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple menu 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 menu 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 menu 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"
      */
@@ -70,11 +76,15 @@ export declare class DaikinMenu extends DDSElement {
      * - `click`: The menu is displayed when the mouse clicks on the trigger element, and hidden when you click on it again. (default)
      * - `manual`: The menu does not respond to user interaction. Use this to control the menu programmatically.
      *
+     * When controlling `open` manually, use `trigger="manual"` (do not use other trigger values).
+     *
      * @default "click"
      */
     trigger: "click" | "manual";
     private _autoUpdateController;
     private _hostStyles;
+    /** The user's original inline `display` style, saved before we override it with `"contents"`. `null` means we have not overridden it. */
+    private _originalDisplayStyle;
     /**
      * Controls whether the floating-ui `flip()` and `shift()` middleware are active.
      *
@@ -86,6 +96,11 @@ export declare class DaikinMenu extends DDSElement {
      * Both middlewares are disabled when the trigger element is a `daikin-navigation-item`.
      */
     private _staticPlacement;
+    /**
+     * Whether the trigger element is a `daikin-navigation-item`.
+     * When true, the host is made layout-transparent (`display: contents`) and internal wrapper/trigger styles are adjusted so the navigation item sizes correctly within parent flex layouts.
+     */
+    private _isLayoutTransparent;
     /**
      * Exposes the trigger element contained within the menu to the outside of the component.
      *
@@ -110,8 +125,11 @@ export declare class DaikinMenu extends DDSElement {
      */
     private _reflectDynamicProperties;
     private _handleSlotChange;
+    private _toggleOpenState;
+    private _isElementDisabled;
+    private _isTriggerDisabled;
+    private _handleTriggerPointerUp;
     private _handleTriggerClick;
-    private _handleTouchEnd;
     /**
      * Handles click events on the menu-item.
      * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.

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

@@ -35,12 +35,31 @@ const cvaMenu = cva([
   "py-2",
   "border",
   "rounded-lg",
-  "font-daikinSerif",
   "absolute",
   "floating-unready:hidden",
   "bg-ddt-color-common-background-default",
   "border-ddt-color-divider"
 ]);
+const cvaWrapper = cva(["relative"], {
+  variants: {
+    isLayoutTransparent: {
+      true: ["inline-flex"],
+      false: [
+        "inline-block",
+        "text-ddt-color-common-text-primary",
+        "font-daikinSerif"
+      ]
+    }
+  }
+});
+const cvaTrigger = cva([], {
+  variants: {
+    isLayoutTransparent: {
+      true: ["flex"],
+      false: []
+    }
+  }
+});
 const DEFAULT_MENU_SPACING = "0px";
 let DaikinMenu = class extends DDSElement {
   constructor() {
@@ -48,7 +67,9 @@ let DaikinMenu = class extends DDSElement {
     this.open = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient ? window.getComputedStyle(this) : null;
+    this._originalDisplayStyle = null;
     this._staticPlacement = false;
+    this._isLayoutTransparent = false;
   }
   static registerCSSCustomProperties() {
     if (!isClient) {
@@ -87,6 +108,11 @@ let DaikinMenu = class extends DDSElement {
    */
   _reflectStaticProperties() {
     this._staticPlacement = false;
+    this._isLayoutTransparent = false;
+    if (this._originalDisplayStyle !== null) {
+      this.style.display = this._originalDisplayStyle;
+      this._originalDisplayStyle = null;
+    }
     for (const control of this._controls) {
       if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
         control.buttonAriaHaspopup = "menu";
@@ -94,11 +120,16 @@ let DaikinMenu = class extends DDSElement {
         control.avatarAriaHaspopup = "menu";
       } else if (control instanceof DaikinNavigationItem && control.type === "menu") {
         control.navigationItemAriaHaspopup = "menu";
-        this._staticPlacement = true;
       } else if (control instanceof DaikinBreadcrumbItem) {
         control.breadcrumbAriaHaspopup = "menu";
       }
     }
+    if (this.triggerElement instanceof DaikinNavigationItem && this.triggerElement.type === "menu") {
+      this._staticPlacement = true;
+      this._isLayoutTransparent = true;
+      this._originalDisplayStyle = this.style.display;
+      this.style.display = "contents";
+    }
     for (const daikinList of this._lists) {
       daikinList.listRole = "menu";
     }
@@ -123,20 +154,55 @@ let DaikinMenu = class extends DDSElement {
   _handleSlotChange() {
     this._reflectStaticProperties();
   }
-  _handleTriggerClick(event) {
-    if (this.trigger !== "click") return;
-    event.preventDefault();
+  _toggleOpenState() {
     this.open = !this.open;
     if (this.open) {
       setTimeout(() => {
-        this._lists[0].focusFirstItem();
+        var _a;
+        (_a = this._lists[0]) == null ? void 0 : _a.focusFirstItem();
       });
     }
   }
-  _handleTouchEnd(event) {
+  _isElementDisabled(element) {
+    const maybeDisabled = element;
+    if (typeof maybeDisabled.disabled === "boolean" && maybeDisabled.disabled) {
+      return true;
+    }
+    if (element.hasAttribute("disabled")) {
+      return true;
+    }
+    return element.getAttribute("aria-disabled") === "true";
+  }
+  _isTriggerDisabled(event) {
+    if (event) {
+      for (const target of event.composedPath()) {
+        if (target === this || target === this.renderRoot || target === window) {
+          continue;
+        }
+        if (target instanceof Element && this._isElementDisabled(target)) {
+          return true;
+        }
+      }
+    }
+    const trigger = this.triggerElement;
+    return trigger instanceof Element ? this._isElementDisabled(trigger) : false;
+  }
+  _handleTriggerPointerUp(event) {
     if (this.trigger !== "click") return;
+    if (!event.isPrimary || event.button !== 0) return;
+    if (this._isTriggerDisabled(event)) return;
     event.preventDefault();
-    this.open = !this.open;
+    this._toggleOpenState();
+  }
+  _handleTriggerClick(event) {
+    if (this.trigger !== "click") return;
+    if (this._isTriggerDisabled(event)) return;
+    if (event.detail !== 0) {
+      event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    this._toggleOpenState();
   }
   /**
    * Handles click events on the menu-item.
@@ -162,12 +228,17 @@ let DaikinMenu = class extends DDSElement {
       10
     );
     return html`<div
-      class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
+      id="wrapper"
+      class=${cvaWrapper({ isLayoutTransparent: this._isLayoutTransparent })}
     >
-      <div id="trigger" ${this._autoUpdateController.refReference()}>
+      <div
+        id="trigger"
+        class=${cvaTrigger({ isLayoutTransparent: this._isLayoutTransparent })}
+        ${this._autoUpdateController.refReference()}
+      >
         <slot
+          @pointerup=${this._handleTriggerPointerUp}
           @click=${this._handleTriggerClick}
-          @touchend=${this._handleTouchEnd}
           @slotchange=${this._handleSlotChange}
         ></slot>
       </div>
@@ -272,6 +343,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DaikinMenu.prototype, "_staticPlacement", 2);
+__decorateClass([
+  state()
+], DaikinMenu.prototype, "_isLayoutTransparent", 2);
 DaikinMenu = __decorateClass([
   ddsElement("daikin-menu")
 ], DaikinMenu);

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

@@ -2,6 +2,29 @@ import { DDSElement } from "../../base/index.js";
 /**
  * `daikin-modal` is an interactive overlay that appears on top of the main content to prompt user input or display important information, temporarily blocking interaction with the rest of the page. It's crucial for capturing user attention and guiding specific actions.
  *
+ * ### Scroll Lock
+ *
+ * When the modal is open, it sets the CSS custom property `--ddc-scroll-lock: hidden` on the `<html>` element and removes it when the modal is closed.
+ * To enable scroll locking, add the following CSS. If you use a custom scroll container instead of `body`, replace the selector accordingly:
+ *
+ * ```css
+ * body {
+ *   overflow: var(--ddc-scroll-lock, auto);
+ * }
+ * ```
+ *
+ * When no modal is open, `--ddc-scroll-lock` is absent and the fallback value (`auto`) takes effect.
+ * When a modal opens, it is set to `hidden`, locking scroll on every element that uses it.
+ *
+ * ## Multiple modals or drawers
+ *
+ * If multiple `daikin-modal` or `daikin-drawer` instances are open at the same time, the component tracks them with an internal reference count.
+ * `--ddc-scroll-lock` is only removed from `<html>` once **every** open modal or drawer has been closed - closing one modal or drawer while others remain open will not unlock scroll.
+ * This means your CSS declaration requires no extra logic to handle concurrent modals or drawers correctly.
+ *
+ * > **Note:** The `--ddc-scroll-lock` property is set on `<html>` and inherits through the entire document,
+ * > so the CSS declaration above works on any element regardless of its position in the DOM tree.
+ *
  * Hierarchy:
  * - `daikin-modal` > `daikin-modal-header`
  * - `daikin-modal` > `daikin-modal-footer`
@@ -37,6 +60,7 @@ export declare class DaikinModal extends DDSElement {
     static styles: import('lit').CSSResult;
     /**
      * Whether the modal is open.
+     * When controlling this property externally, listen to the `close` event and set your state to `false` to keep it in sync.
      */
     open: boolean;
     /**
@@ -49,6 +73,7 @@ export declare class DaikinModal extends DDSElement {
      * The aria-label of the modal.
      */
     modalAriaLabel: string | null;
+    private readonly _blockScrollController;
     /**
      * If this property set by `true`, you can't close modal by clicking outside of modal or Escape key.
      * In this case, please ensure you provide users with a method to close the modal, such as a close button in the header or a close button in the footer.

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

@@ -7,6 +7,7 @@ import "../../base/dds-form-element.js";
 import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { BlockScrollController } from "../../controllers/block-scroll.js";
 import { FocusTrapController } from "../../controllers/focus-trap.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
@@ -47,7 +48,7 @@ const cvaBackDrop = cva(
     "z-9999",
     "items-center",
     "justify-center",
-    "bg-black/50"
+    "bg-ddt-color-common-background-overlay"
   ],
   {
     variants: {
@@ -63,6 +64,7 @@ let DaikinModal = class extends DDSElement {
     super(...arguments);
     this.open = false;
     this.modalAriaLabel = null;
+    this._blockScrollController = new BlockScrollController(this);
     this.persistent = false;
     this._handleClose = () => {
       this.open = false;
@@ -97,11 +99,26 @@ let DaikinModal = class extends DDSElement {
         // open or persistent change will trigger the re-rendering and directive.
         this._focusTrapController.directive(this.open, this.persistent)
       )
+    )}
+      ${guard(
+      [this.open],
+      () => this._blockScrollController.directive(this.open)
     )}`;
   }
 };
 DaikinModal.styles = css`
     ${unsafeCSS(tailwindStyles)}
+
+    ::slotted(*) {
+      flex-grow: 1;
+      min-height: 0;
+    }
+
+    ::slotted(daikin-modal-header),
+    ::slotted(daikin-modal-footer) {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
   `;
 __decorateClass([
   property({ type: Boolean, reflect: true })

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

@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 let DaikinModalFooter = class extends DDSElement {
   render() {
-    return html`<div class="flex flex-wrap justify-end w-full gap-4">
+    return html`<div class="flex flex-wrap justify-end w-full gap-x-4 gap-y-3">
       <slot></slot>
     </div>`;
   }

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

@@ -22,7 +22,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaTitle = cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-xl",
   "leading-[1.3]",
   "not-italic",
@@ -31,7 +30,6 @@ const cvaTitle = cva([
 const cvaDescription = cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-base",
   "leading-normal",
   "not-italic",

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

@@ -24,6 +24,7 @@ import { DDSElement } from "../../base/index.js";
  *   <daikin-navigation-item href="#" current>
  *     Navigation content 1
  *   </daikin-navigation-item>
+ *   <!-- Menu width can be set on the slotted <daikin-list slot="menu">, or via daikin-menu::part(menu). See the menu documentation for details. -->
  *   <daikin-menu placement="bottom-start">
  *     <daikin-navigation-item type="menu">
  *       Navigation content 2

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

@@ -34,7 +34,8 @@ DaikinNavigation.styles = css`
 
     :host {
       display: flex;
-      width: 100%;
+      min-width: 100%;
+      width: max-content;
     }
   `;
 __decorateClass([