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

package/dist/cjs-dev/components/index.cjs

@@ -18,6 +18,10 @@ const daikinCheckboxGroup = require("./checkbox-group/daikin-checkbox-group.cjs"
 const daikinChip = require("./chip/daikin-chip.cjs");
 const daikinCombobox = require("./combobox/daikin-combobox.cjs");
 const daikinDatePicker = require("./date-picker/daikin-date-picker.cjs");
+const daikinDivider = require("./divider/daikin-divider.cjs");
+const daikinDrawer = require("./drawer/daikin-drawer.cjs");
+const daikinDrawerFooter = require("./drawer-footer/daikin-drawer-footer.cjs");
+const daikinDrawerHeader = require("./drawer-header/daikin-drawer-header.cjs");
 const daikinDropdown = require("./dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./dropdown-item/daikin-dropdown-item.cjs");
 const daikinEmptyState = require("./empty-state/daikin-empty-state.cjs");
@@ -63,6 +67,9 @@ const daikinTooltip = require("./tooltip/daikin-tooltip.cjs");
 const daikinTree = require("./tree/daikin-tree.cjs");
 const daikinTreeItem = require("./tree-item/daikin-tree-item.cjs");
 const daikinTreeSection = require("./tree-section/daikin-tree-section.cjs");
+const daikinVerticalNavigation = require("./vertical-navigation/daikin-vertical-navigation.cjs");
+const daikinVerticalNavigationItem = require("./vertical-navigation-item/daikin-vertical-navigation-item.cjs");
+const daikinVerticalNavigationMenuItem = require("./vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.cjs");
 Object.defineProperty(exports, "DaikinAccordion", {
   enumerable: true,
   get: () => daikinAccordion.DaikinAccordion
@@ -136,6 +143,22 @@ Object.defineProperty(exports, "DaikinDatePicker", {
   enumerable: true,
   get: () => daikinDatePicker.DaikinDatePicker
 });
+Object.defineProperty(exports, "DaikinDivider", {
+  enumerable: true,
+  get: () => daikinDivider.DaikinDivider
+});
+Object.defineProperty(exports, "DaikinDrawer", {
+  enumerable: true,
+  get: () => daikinDrawer.DaikinDrawer
+});
+Object.defineProperty(exports, "DaikinDrawerFooter", {
+  enumerable: true,
+  get: () => daikinDrawerFooter.DaikinDrawerFooter
+});
+Object.defineProperty(exports, "DaikinDrawerHeader", {
+  enumerable: true,
+  get: () => daikinDrawerHeader.DaikinDrawerHeader
+});
 Object.defineProperty(exports, "DaikinDropdown", {
   enumerable: true,
   get: () => daikinDropdown.DaikinDropdown
@@ -328,3 +351,15 @@ Object.defineProperty(exports, "DaikinTreeSection", {
   enumerable: true,
   get: () => daikinTreeSection.DaikinTreeSection
 });
+Object.defineProperty(exports, "DaikinVerticalNavigation", {
+  enumerable: true,
+  get: () => daikinVerticalNavigation.DaikinVerticalNavigation
+});
+Object.defineProperty(exports, "DaikinVerticalNavigationItem", {
+  enumerable: true,
+  get: () => daikinVerticalNavigationItem.DaikinVerticalNavigationItem
+});
+Object.defineProperty(exports, "DaikinVerticalNavigationMenuItem", {
+  enumerable: true,
+  get: () => daikinVerticalNavigationMenuItem.DaikinVerticalNavigationMenuItem
+});

package/dist/cjs-dev/components/index.d.cts

@@ -16,6 +16,10 @@ export * from "./checkbox-group/index.cjs";
 export * from "./chip/index.cjs";
 export * from "./combobox/index.cjs";
 export * from "./date-picker/index.cjs";
+export * from "./divider/index.cjs";
+export * from "./drawer/index.cjs";
+export * from "./drawer-footer/index.cjs";
+export * from "./drawer-header/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
 export * from "./empty-state/index.cjs";
@@ -61,3 +65,6 @@ export * from "./tooltip/index.cjs";
 export * from "./tree/index.cjs";
 export * from "./tree-item/index.cjs";
 export * from "./tree-section/index.cjs";
+export * from "./vertical-navigation/index.cjs";
+export * from "./vertical-navigation-item/index.cjs";
+export * from "./vertical-navigation-menu-item/index.cjs";

package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.cjs

@@ -31,7 +31,6 @@ const cvaContainer = classVarianceAuthority.cva(
     "bg-ddt-color-common-background-default",
     "p-4",
     "overflow-hidden",
-    "font-daikinSerif",
     "transition",
     "box-border",
     "before:size-6",
@@ -96,14 +95,9 @@ const cvaTextContent = classVarianceAuthority.cva(["flex"], {
 const TITLE_CLASS_NAME = classVarianceAuthority.cva([
   "slotted:inline-block",
   "font-bold",
-  "leading-[130%]",
   "slotted:natural-break"
 ])();
-const DESCRIPTION_CLASS_NAME = classVarianceAuthority.cva([
-  "inline-block",
-  "leading-[130%]",
-  "natural-break"
-])();
+const DESCRIPTION_CLASS_NAME = classVarianceAuthority.cva(["inline-block", "natural-break"])();
 exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);

package/dist/cjs-dev/components/input-group/daikin-input-group.cjs

@@ -20,7 +20,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold", "leading-[130%]"], {
+const cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold"], {
   variants: {
     disabled: {
       false: [],
@@ -29,7 +29,7 @@ const cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold"
   }
 });
 const cvaHelper = classVarianceAuthority.cva(
-  ["flex", "gap-1", "items-center", "leading-[130%]", "text-sm"],
+  ["flex", "gap-1", "items-center", "text-(length:--dds-font-size-350)"],
   {
     variants: {
       type: {
@@ -54,15 +54,18 @@ const cvaHelper = classVarianceAuthority.cva(
     }
   }
 );
-const cvaCounter = classVarianceAuthority.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 = classVarianceAuthority.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"]
+      }
     }
   }
-});
+);
 exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
@@ -135,13 +138,15 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
     };
     return lit.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 ? lit.html`<span class=${cvaLabel({ disabled: this.disabled })}>
                 ${this.label}
               </span>` : lit.nothing}
-          ${this.required && !this.disabled ? lit.html`<span class="text-ddt-color-common-danger-default text-xs">
+          ${this.required && !this.disabled ? lit.html`<span
+                class="text-ddt-color-common-danger-default text-(length:--dds-font-size-300)"
+              >
                 ${this.required}
               </span>` : lit.nothing}
         </div>

package/dist/cjs-dev/components/link/daikin-link.cjs

@@ -20,31 +20,35 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const LINK_CLASS_NAME = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.cva([], {
   variants: {
     noUnderline: {
       true: [],
       false: ["border-b", "border-b-current"]
-    },
-    size: {
-      small: ["text-sm"],
-      medium: ["text-base"]
     }
   }
 });
@@ -88,15 +92,14 @@ exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
   render() {
     return lit.html`<a
       ${ref_js.ref(this._anchorRef)}
-      class=${LINK_CLASS_NAME}
+      class=${cvaLinkWrapper({ size: this.size })}
       href=${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
       target=${ifDefined_js.ifDefined(this.target ?? void 0)}
       aria-disabled=${ifDefined_js.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/cjs-dev/components/list/daikin-list.cjs

@@ -89,10 +89,22 @@ exports.DaikinList.styles = lit.css`
       display: inline-block;
       width: 100%;
     }
+
+    :host([border="underline"]) ::slotted(daikin-list-item) {
+      --divider-bottom-display: block;
+    }
   `;
 __decorateClass([
   ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinList.prototype, "listRole", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "none",
+    isAllowedValue: ddsProperty.oneOf(["none", "underline"])
+  })
+], exports.DaikinList.prototype, "border", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-list-item" })
 ], exports.DaikinList.prototype, "_listItems", 2);

package/dist/cjs-dev/components/list/daikin-list.d.cts

@@ -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/cjs-dev/components/list-item/daikin-list-item.cjs

@@ -22,22 +22,29 @@ var __decorateClass = (decorators2, target, key, kind) => {
 };
 const INNER_CN = classVarianceAuthority.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 = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-left"], {
+const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "mt-0.5", "text-left"], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
@@ -49,7 +56,7 @@ const WRAPPER = classVarianceAuthority.cva([
   "group",
   "flex",
   "justify-between",
-  "items-center",
+  "items-start",
   "w-full",
   "min-h-12",
   "p-3",
@@ -111,7 +118,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
   }
   render() {
     const disabled = this._disabled;
-    const content = lit.html`<span class="flex items-center w-full relative">
+    const content = lit.html`<span class="flex items-start w-full relative">
       <slot
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}
@@ -144,7 +151,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
       ${list}
       <slot
         name="action"
-        class="flex items-center gap-3"
+        class="flex items-start gap-3"
         @click=${this._handleClickAction}
       >
         <slot
@@ -170,8 +177,22 @@ exports.DaikinListItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :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/cjs-dev/components/menu/daikin-menu.cjs

@@ -37,12 +37,31 @@ const cvaMenu = classVarianceAuthority.cva([
   "py-2",
   "border",
   "rounded-lg",
-  "font-daikinSerif",
   "absolute",
   "floating-unready:hidden",
   "bg-ddt-color-common-background-default",
   "border-ddt-color-divider"
 ]);
+const cvaWrapper = classVarianceAuthority.cva(["relative"], {
+  variants: {
+    isLayoutTransparent: {
+      true: ["inline-flex"],
+      false: [
+        "inline-block",
+        "text-ddt-color-common-text-primary",
+        "font-daikinSerif"
+      ]
+    }
+  }
+});
+const cvaTrigger = classVarianceAuthority.cva([], {
+  variants: {
+    isLayoutTransparent: {
+      true: ["flex"],
+      false: []
+    }
+  }
+});
 const DEFAULT_MENU_SPACING = "0px";
 exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
   constructor() {
@@ -50,7 +69,9 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
     this.open = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
+    this._originalDisplayStyle = null;
     this._staticPlacement = false;
+    this._isLayoutTransparent = false;
   }
   static registerCSSCustomProperties() {
     if (!isClient.isClient) {
@@ -89,6 +110,11 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.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.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button") {
         control.buttonAriaHaspopup = "menu";
@@ -96,11 +122,16 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         control.avatarAriaHaspopup = "menu";
       } else if (control instanceof daikinNavigationItem.DaikinNavigationItem && control.type === "menu") {
         control.navigationItemAriaHaspopup = "menu";
-        this._staticPlacement = true;
       } else if (control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem) {
         control.breadcrumbAriaHaspopup = "menu";
       }
     }
+    if (this.triggerElement instanceof daikinNavigationItem.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";
     }
@@ -125,20 +156,55 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.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.
@@ -164,12 +230,17 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
       10
     );
     return lit.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>
@@ -274,6 +345,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinMenu.prototype, "_staticPlacement", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinMenu.prototype, "_isLayoutTransparent", 2);
 exports.DaikinMenu = __decorateClass([
   decorators.ddsElement("daikin-menu")
 ], exports.DaikinMenu);

package/dist/cjs-dev/components/menu/daikin-menu.d.cts

@@ -6,7 +6,7 @@ import { DaikinButton } from "../button/index.cjs";
 import { DaikinIconButton } from "../icon-button/index.cjs";
 import { DaikinNavigationItem } from "../navigation-item/index.cjs";
 /**
- * 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.cjs";
  *
  * @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.cjs";
  * ```
  *
  * ```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/cjs-dev/components/modal/daikin-modal.cjs

@@ -9,6 +9,7 @@ require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const blockScroll = require("../../controllers/block-scroll.cjs");
 const focusTrap = require("../../controllers/focus-trap.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
@@ -49,7 +50,7 @@ const cvaBackDrop = classVarianceAuthority.cva(
     "z-9999",
     "items-center",
     "justify-center",
-    "bg-black/50"
+    "bg-ddt-color-common-background-overlay"
   ],
   {
     variants: {
@@ -65,6 +66,7 @@ exports.DaikinModal = class DaikinModal extends ddsElement.DDSElement {
     super(...arguments);
     this.open = false;
     this.modalAriaLabel = null;
+    this._blockScrollController = new blockScroll.BlockScrollController(this);
     this.persistent = false;
     this._handleClose = () => {
       this.open = false;
@@ -99,11 +101,26 @@ exports.DaikinModal = class DaikinModal extends ddsElement.DDSElement {
         // open or persistent change will trigger the re-rendering and directive.
         this._focusTrapController.directive(this.open, this.persistent)
       )
+    )}
+      ${guard_js.guard(
+      [this.open],
+      () => this._blockScrollController.directive(this.open)
     )}`;
   }
 };
 exports.DaikinModal.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
+
+    ::slotted(*) {
+      flex-grow: 1;
+      min-height: 0;
+    }
+
+    ::slotted(daikin-modal-header),
+    ::slotted(daikin-modal-footer) {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
   `;
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })