@daikin-oss/design-system-web-components 1.4.1 → 1.5.0

package/dist/es/components/icon-button/daikin-icon-button.js

@@ -27,51 +27,51 @@ const cvaIconButton = cva(
     "size-full",
     "font-daikinSerif",
     "font-bold",
-    "rounded",
+    "rounded-sm",
     "p-1",
     "tracking-wide",
     "text-nowrap",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus",
-    "var-color-transparent/color-secondary",
-    "link-disabled:var-color-ddt-color-common-disabled/color-primary"
+    "[--color-secondary:transparent]",
+    "link-disabled:[--color-primary:var(--dds-color-common-disabled)]"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-ddt-color-common-brand-default/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-brand-hover/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-surface-brand-hover/color-secondary",
-          "link-enabled:active:var-color-ddt-color-common-brand-press/color-primary",
-          "link-enabled:active:var-color-ddt-color-common-surface-brand-press/color-secondary"
+          "link-enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+          "hover:link-enabled:[--color-primary:var(--dds-color-common-brand-hover)]",
+          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+          "active:link-enabled:[--color-primary:var(--dds-color-common-brand-press)]",
+          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-press)]"
         ],
         neutral: [
-          "link-enabled:var-color-ddt-color-common-neutral-default/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
-          "link-enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
-          "link-enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary"
+          "link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+          "hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
+          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
+          "active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
+          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
         ],
         danger: [
-          "link-enabled:var-color-ddt-color-common-danger-default/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-danger-hover/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-surface-danger-hover/color-secondary",
-          "link-enabled:active:var-color-ddt-color-common-danger-press/color-primary",
-          "link-enabled:active:var-color-ddt-color-common-surface-danger-press/color-secondary"
+          "link-enabled:[--color-primary:var(--dds-color-common-danger-default)]",
+          "hover:link-enabled:[--color-primary:var(--dds-color-common-danger-hover)]",
+          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-hover)]",
+          "active:link-enabled:[--color-primary:var(--dds-color-common-danger-press)]",
+          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-press)]"
         ]
       },
       variant: {
-        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-(--color-primary)"],
         outline: [
           "border",
-          "text-[--color-primary]",
-          "bg-[--color-secondary]",
-          "border-[--color-primary]"
+          "text-(--color-primary)",
+          "bg-(--color-secondary)",
+          "border-(--color-primary)"
         ],
-        ghost: ["text-[--color-primary]", "bg-[--color-secondary]"]
+        ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
       }
     }
   }
@@ -97,6 +97,24 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
       }
     });
   }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null || this.disabled || this.type !== "link") {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
   render() {
     const iconButtonCN = cvaIconButton({
       variant: this.variant,

package/dist/es/components/index.d.ts

@@ -18,6 +18,7 @@ export * from "./combobox/index.js";
 export * from "./date-picker/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
+export * from "./empty-state/index.js";
 export * from "./icon/index.js";
 export * from "./icon-button/index.js";
 export * from "./inline-notification/index.js";
@@ -31,6 +32,8 @@ export * from "./menu/index.js";
 export * from "./modal/index.js";
 export * from "./modal-footer/index.js";
 export * from "./modal-header/index.js";
+export * from "./navigation/index.js";
+export * from "./navigation-item/index.js";
 export * from "./pagination/index.js";
 export * from "./progress-bar/index.js";
 export * from "./progress-indicator/index.js";
@@ -46,6 +49,7 @@ export * from "./table/index.js";
 export * from "./table-cell/index.js";
 export * from "./table-header-cell/index.js";
 export * from "./tabs/index.js";
+export * from "./tag/index.js";
 export * from "./text-area/index.js";
 export * from "./text-field/index.js";
 export * from "./text-masked-field/index.js";

package/dist/es/components/index.js

@@ -18,6 +18,7 @@ import { DaikinCombobox, defaultFilterFn } from "./combobox/daikin-combobox.js";
 import { DaikinDatePicker } from "./date-picker/daikin-date-picker.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
+import { DaikinEmptyState } from "./empty-state/daikin-empty-state.js";
 import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
 import { DaikinIconButton } from "./icon-button/daikin-icon-button.js";
 import { DaikinInlineNotification } from "./inline-notification/daikin-inline-notification.js";
@@ -31,6 +32,8 @@ import { DaikinMenu } from "./menu/daikin-menu.js";
 import { DaikinModal } from "./modal/daikin-modal.js";
 import { DaikinModalFooter } from "./modal-footer/daikin-modal-footer.js";
 import { DaikinModalHeader } from "./modal-header/daikin-modal-header.js";
+import { DaikinNavigation } from "./navigation/daikin-navigation.js";
+import { DaikinNavigationItem } from "./navigation-item/daikin-navigation-item.js";
 import { DaikinPagination } from "./pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./progress-indicator/daikin-progress-indicator.js";
@@ -46,6 +49,7 @@ import { DaikinTable } from "./table/daikin-table.js";
 import { DaikinTableCell } from "./table-cell/daikin-table-cell.js";
 import { DaikinTableHeaderCell } from "./table-header-cell/daikin-table-header-cell.js";
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
+import { DaikinTag } from "./tag/daikin-tag.js";
 import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
 import { DaikinTextMaskedField } from "./text-masked-field/daikin-text-masked-field.js";
@@ -78,6 +82,7 @@ export {
   DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
+  DaikinEmptyState,
   DaikinIcon,
   DaikinIconButton,
   DaikinInlineNotification,
@@ -91,6 +96,8 @@ export {
   DaikinModal,
   DaikinModalFooter,
   DaikinModalHeader,
+  DaikinNavigation,
+  DaikinNavigationItem,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
@@ -106,6 +113,7 @@ export {
   DaikinTableCell,
   DaikinTableHeaderCell,
   DaikinTabs,
+  DaikinTag,
   DaikinTextArea,
   DaikinTextField,
   DaikinTextMaskedField,

package/dist/es/components/inline-notification/daikin-inline-notification.js

@@ -42,31 +42,34 @@ const cvaContainer = cva(
           "rounded-lg",
           "border",
           "border-ddt-color-divider",
-          "translate-x-[--move-offset-x,0]",
-          "translate-y-[--move-offset-y,0]",
-          "opacity-[--opacity,1]",
+          "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))]"
+          "duration-(--transition-duration,var(--ddc-toast-animation-duration,0ms))"
         ],
         inline: []
       },
       status: {
         positive: [
           "before:text-ddt-color-common-success",
-          "before:i-daikin-success"
+          "before:icon-[daikin--success]"
         ],
         negative: [
           "before:text-ddt-color-common-danger-default",
-          "before:i-daikin-error"
+          "before:icon-[daikin--error]"
         ],
         warning: [
           "before:text-ddt-color-common-warning",
-          "before:i-daikin-warning"
+          "before:icon-[daikin--warning]"
+        ],
+        alarm: [
+          "before:text-ddt-color-common-alarm",
+          "before:icon-[daikin--alarm]"
         ],
-        alarm: ["before:text-ddt-color-common-alarm", "before:i-daikin-alarm"],
         information: [
           "before:text-ddt-color-common-information",
-          "before:i-daikin-information"
+          "before:icon-[daikin--information]"
         ]
       }
     }
@@ -133,7 +136,7 @@ let DaikinInlineNotification = class extends DDSElement {
             @click=${this._handleClickClose}
           >
             <span
-              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-close"
+              class="flex size-6 text-ddt-color-common-text-secondary relative icon-[daikin--close]"
             ></span>
           </daikin-icon-button>` : nothing}
     </aside>`;

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

@@ -37,14 +37,14 @@ const cvaHelper = cva(
           "text-ddt-color-common-danger-default",
           "font-bold",
           "before:size-4",
-          "before:i-daikin-error",
+          "before:icon-[daikin--error]",
           "before:flex-none"
         ],
         textareaLimitExceedError: [
           "text-ddt-color-common-danger-default",
           "font-bold",
           "before:size-4",
-          "before:i-daikin-error",
+          "before:icon-[daikin--error]",
           "before:flex-none"
         ],
         none: ["hidden"]

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
 /**
  * The link component uses the standard HTML <a> tag. Unlike the link used in the button component, it provides the style of the text as it is.
  *
@@ -16,7 +16,7 @@ import { DDSElement } from "../../base/index.js";
  * </daikin-link>
  * ```
  */
-export declare class DaikinLink extends DDSElement {
+export declare class DaikinLink extends DDSElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Link `href`.
@@ -45,6 +45,16 @@ export declare class DaikinLink extends DDSElement {
      * Whether or not to display an underline.
      */
     noUnderline: boolean;
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -19,19 +19,20 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const LINK_CLASS_NAME = cva([
   "font-daikinSerif",
+  "leading-[130%]",
   "relative",
   "link-enabled:text-ddt-color-link-text-default",
-  "link-enabled:hover:text-ddt-color-link-text-hover",
-  "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
-  "link-enabled:active:text-ddt-color-link-text-press",
-  "link-enabled:active:bg-ddt-color-common-surface-brand-press",
+  "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",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "focus-visible:outline-offset-2"
 ])();
-const cvaContent = cva(["leading-[130%]"], {
+const cvaContent = cva([], {
   variants: {
     noUnderline: {
       true: [],
@@ -53,21 +54,39 @@ let DaikinLink = class extends DDSElement {
     this.size = "medium";
     this.noUnderline = false;
   }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null || this.disabled) {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: this.target
+    };
+  }
   render() {
     return html`<a
       class=${LINK_CLASS_NAME}
       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.125rem] align-sub">
+      ><span class="inline-flex mr-0.5 align-sub">
         <slot name="left-icon" class="icon-size-4"
-          ><span class="-mr-[0.125rem]"></span></slot></span
+          ><span class="-mr-0.5"></span></slot></span
       ><span
         class=${cvaContent({ noUnderline: this.noUnderline, size: this.size })}
         ><slot></slot></span
-      ><span class="inline-flex ml-[0.125rem] align-sub"
+      ><span class="inline-flex ml-0.5 align-sub"
         ><slot name="right-icon" class="icon-size-4"
-          ><span class="-ml-[0.125rem]"></span></slot></span
+          ><span class="-ml-0.5"></span></slot></span
     ></a>`;
   }
 };

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
 /**
  * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
  *
@@ -31,7 +31,7 @@ import { DDSElement } from "../../base/index.js";
  * <daikin-list-item>List item label</daikin-list-item>
  * ```
  */
-export declare class DaikinListItem extends DDSElement {
+export declare class DaikinListItem extends DDSElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Type of the list item.
@@ -58,10 +58,20 @@ export declare class DaikinListItem extends DDSElement {
      * Ignored if the `type` is `"text"`.
      */
     disabled: boolean;
-    private _focusableElement;
+    private readonly _focusableElement;
     private get _disabled();
     private _handleClickAction;
     constructor();
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button or link.

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

@@ -24,16 +24,16 @@ const INNER_CN = cva([
   "before:inset-0",
   "before:w-full",
   "before:h-full",
-  "focus-visible:outline-none",
-  "focus-visible:before:outline",
+  "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",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-ddt-color-common-surface-hover",
-  "link-enabled:before:active:bg-ddt-color-common-surface-press",
+  "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
-  "[&:not(a,button)]:before:group-hover:bg-ddt-color-common-surface-hover"
+  "group-hover:[&:not(a,button)]:before:bg-ddt-color-common-surface-hover"
 ])();
 const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
   variants: {
@@ -89,6 +89,24 @@ let DaikinListItem = class extends DDSElement {
   _handleClickAction(event) {
     event.stopPropagation();
   }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null || this.disabled || this.type !== "link") {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
   render() {
     const disabled = this._disabled;
     const content = html`<span class="flex items-center w-full relative">

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

@@ -22,7 +22,7 @@ const cvaLoadingContainer = cva(
     variants: {
       background: {
         false: ["bg-transparent"],
-        true: ["bg-ddt-color-common-background-default", "rounded"]
+        true: ["bg-ddt-color-common-background-default", "rounded-sm"]
       }
     }
   }
@@ -40,7 +40,7 @@ const cvaLoading = cva(
   {
     variants: {
       size: {
-        small: ["size-[1.125rem]", "border-2"],
+        small: ["size-4.5", "border-2"],
         medium: ["size-9", "border-4"]
       }
     }

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
 /**
  * The logo is a UI element that represents a brand, company or service. It serves as a visual identifier, helping users recognize and navigate within a specific application or website.
  *
@@ -18,7 +18,7 @@ import { DDSElement } from "../../base/index.js";
  * </div>
  * ```
  */
-export declare class DaikinLogo extends DDSElement {
+export declare class DaikinLogo extends DDSElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Link `href`.
@@ -43,7 +43,17 @@ export declare class DaikinLogo extends DDSElement {
      * @default "positive"
      */
     mode: "positive" | "negative";
-    private _focusableElement;
+    private readonly _focusableElement;
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner link.

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

@@ -32,15 +32,15 @@ const cvaWrapper = cva(
       type: {
         logo: [],
         link: [
-          "focus-visible:outline",
+          "focus-visible:outline-solid",
           "focus-visible:outline-2",
           "focus-visible:outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus"
         ]
       },
       mode: {
-        positive: ["i-daikin-logo-positive"],
-        negative: ["i-daikin-logo-negative"]
+        positive: ["icon-[daikin--logo-positive]"],
+        negative: ["icon-[daikin--logo-negative]"]
       }
     }
   }
@@ -51,8 +51,26 @@ let DaikinLogo = class extends DDSElement {
     this.href = null;
     this.target = null;
   }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null) {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: this.target
+    };
+  }
   render() {
-    if (!this.href) {
+    if (this.href == null) {
       return html`<span
         class=${cvaWrapper({ type: "logo", mode: this.mode })}
         role="img"

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

@@ -4,6 +4,7 @@ import { DaikinAvatar } from "../avatar/index.js";
 import { DaikinBreadcrumbItem } from "../breadcrumb-item/index.js";
 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.
  *
@@ -82,10 +83,11 @@ export declare class DaikinMenu extends DDSElement {
      * - `<daikin-icon-button>`
      * - `<daikin-avatar>`
      * - `<daikin-breadcrumb-item>`
+     * - `<daikin-navigation-item>`
      *
      * Returns the first matching element from the slot.
      */
-    get triggerElement(): DaikinAvatar | DaikinButton | DaikinIconButton | DaikinBreadcrumbItem | null;
+    get triggerElement(): DaikinAvatar | DaikinButton | DaikinIconButton | DaikinBreadcrumbItem | DaikinNavigationItem | null;
     /**
      * Reflects static attributes (e.g. ARIA roles) to slot components.
      * These are typically set once when the slot changes and do not change frequently.

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

@@ -17,6 +17,7 @@ import { DaikinBreadcrumbItem } from "../breadcrumb-item/daikin-breadcrumb-item.
 import { DaikinButton } from "../button/daikin-button.js";
 import { DaikinIconButton } from "../icon-button/daikin-icon-button.js";
 import DaikinListItem from "../list-item/daikin-list-item.js";
+import { DaikinNavigationItem } from "../navigation-item/daikin-navigation-item.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,8 +29,8 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const cvaMenu = cva([
-  "left-[--floating-x,0]",
-  "top-[--floating-y,0]",
+  "left-(--floating-x,0)",
+  "top-(--floating-y,0)",
   "w-max",
   "py-2",
   "border",
@@ -67,12 +68,13 @@ let DaikinMenu = class extends DDSElement {
    * - `<daikin-icon-button>`
    * - `<daikin-avatar>`
    * - `<daikin-breadcrumb-item>`
+   * - `<daikin-navigation-item>`
    *
    * Returns the first matching element from the slot.
    */
   get triggerElement() {
     for (const control of this._controls) {
-      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button" || control instanceof DaikinAvatar && control.type === "button" || control instanceof DaikinBreadcrumbItem) {
+      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button" || control instanceof DaikinAvatar && control.type === "button" || control instanceof DaikinBreadcrumbItem || control instanceof DaikinNavigationItem && control.type === "menu") {
         return control;
       }
     }
@@ -88,6 +90,10 @@ let DaikinMenu = class extends DDSElement {
         control.buttonAriaHaspopup = "menu";
       } else if (control instanceof DaikinAvatar && control.type === "button") {
         control.avatarAriaHaspopup = "menu";
+      } else if (control instanceof DaikinNavigationItem && control.type === "menu") {
+        control.navigationItemAriaHaspopup = "menu";
+      } else if (control instanceof DaikinBreadcrumbItem) {
+        control.breadcrumbAriaHaspopup = "menu";
       }
     }
     for (const daikinList of this._lists) {
@@ -104,6 +110,10 @@ let DaikinMenu = class extends DDSElement {
         control.buttonAriaExpanded = `${this.open}`;
       } else if (control instanceof DaikinAvatar && control.type === "button") {
         control.avatarAriaExpanded = `${this.open}`;
+      } else if (control instanceof DaikinNavigationItem && control.type === "menu") {
+        control.navigationItemAriaExpanded = `${this.open}`;
+      } else if (control instanceof DaikinBreadcrumbItem) {
+        control.breadcrumbAriaExpanded = `${this.open}`;
       }
     }
   }
@@ -199,13 +209,17 @@ DaikinMenu.styles = css`
 
       --ddc-menu-spacing: ${unsafeCSS(DEFAULT_MENU_SPACING)};
     }
+
+    :host([open]) ::slotted(daikin-navigation-item) {
+      --chevron-rotation: 180deg;
+    }
   `;
 __decorateClass([
   queryAssignedElements({ slot: "menu", selector: "daikin-list" })
 ], DaikinMenu.prototype, "_lists", 2);
 __decorateClass([
   queryAssignedElements({
-    selector: "daikin-button,daikin-icon-button,daikin-avatar,daikin-breadcrumb-item"
+    selector: "daikin-button,daikin-icon-button,daikin-avatar,daikin-breadcrumb-item,daikin-navigation-item"
   })
 ], DaikinMenu.prototype, "_controls", 2);
 __decorateClass([

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

@@ -10,6 +10,8 @@ import { DDSElement } from "../../base/index.js";
  *
  * @fires close - A custom event emitted when a user clicks the close button in the header.
  *
+ * @csspart modal - CSS styles applied to the modal panel container. By default, the panel uses content-based sizing (`size-fit`) and is clamped by responsive min/max width and height constraints so it does not touch the viewport edges. Use `::part(modal)` to customize its width, height, or padding; the built-in min/max constraints remain in effect unless you override them with more specific rules.
+ *
  * @example
  *
  * ```js