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

package/dist/cjs-dev/components/icon-button/daikin-icon-button.cjs

@@ -29,51 +29,51 @@ const cvaIconButton = classVarianceAuthority.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)"]
       }
     }
   }
@@ -99,6 +99,24 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
       }
     });
   }
+  /**
+   * _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/cjs-dev/components/icon-button/daikin-icon-button.d.cts

@@ -1,4 +1,4 @@
-import { DDSFormSubmitElement } from "../../base/index.cjs";
+import { DDSFormSubmitElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaIconButton: (props?: ({
@@ -35,7 +35,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends DDSFormSubmitElement {
+export declare class DaikinIconButton extends DDSFormSubmitElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -97,8 +97,18 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
      * - `m`: 48px * 48px
      */
     size: "s" | "m";
-    private _button;
+    private readonly _button;
     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.

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

@@ -20,6 +20,7 @@ const daikinCombobox = require("./combobox/daikin-combobox.cjs");
 const daikinDatePicker = require("./date-picker/daikin-date-picker.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");
 const daikinIcon = require("./icon/daikin-icon.cjs");
 const daikinIconButton = require("./icon-button/daikin-icon-button.cjs");
 const daikinInlineNotification = require("./inline-notification/daikin-inline-notification.cjs");
@@ -33,6 +34,8 @@ const daikinMenu = require("./menu/daikin-menu.cjs");
 const daikinModal = require("./modal/daikin-modal.cjs");
 const daikinModalFooter = require("./modal-footer/daikin-modal-footer.cjs");
 const daikinModalHeader = require("./modal-header/daikin-modal-header.cjs");
+const daikinNavigation = require("./navigation/daikin-navigation.cjs");
+const daikinNavigationItem = require("./navigation-item/daikin-navigation-item.cjs");
 const daikinPagination = require("./pagination/daikin-pagination.cjs");
 const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./progress-indicator/daikin-progress-indicator.cjs");
@@ -48,6 +51,7 @@ const daikinTable = require("./table/daikin-table.cjs");
 const daikinTableCell = require("./table-cell/daikin-table-cell.cjs");
 const daikinTableHeaderCell = require("./table-header-cell/daikin-table-header-cell.cjs");
 const daikinTabs = require("./tabs/daikin-tabs.cjs");
+const daikinTag = require("./tag/daikin-tag.cjs");
 const daikinTextArea = require("./text-area/daikin-text-area.cjs");
 const daikinTextField = require("./text-field/daikin-text-field.cjs");
 const daikinTextMaskedField = require("./text-masked-field/daikin-text-masked-field.cjs");
@@ -140,6 +144,10 @@ Object.defineProperty(exports, "DaikinDropdownItem", {
   enumerable: true,
   get: () => daikinDropdownItem.DaikinDropdownItem
 });
+Object.defineProperty(exports, "DaikinEmptyState", {
+  enumerable: true,
+  get: () => daikinEmptyState.DaikinEmptyState
+});
 Object.defineProperty(exports, "DaikinIcon", {
   enumerable: true,
   get: () => daikinIcon.DaikinIcon
@@ -193,6 +201,14 @@ Object.defineProperty(exports, "DaikinModalHeader", {
   enumerable: true,
   get: () => daikinModalHeader.DaikinModalHeader
 });
+Object.defineProperty(exports, "DaikinNavigation", {
+  enumerable: true,
+  get: () => daikinNavigation.DaikinNavigation
+});
+Object.defineProperty(exports, "DaikinNavigationItem", {
+  enumerable: true,
+  get: () => daikinNavigationItem.DaikinNavigationItem
+});
 Object.defineProperty(exports, "DaikinPagination", {
   enumerable: true,
   get: () => daikinPagination.DaikinPagination
@@ -253,6 +269,10 @@ Object.defineProperty(exports, "DaikinTabs", {
   enumerable: true,
   get: () => daikinTabs.DaikinTabs
 });
+Object.defineProperty(exports, "DaikinTag", {
+  enumerable: true,
+  get: () => daikinTag.DaikinTag
+});
 Object.defineProperty(exports, "DaikinTextArea", {
   enumerable: true,
   get: () => daikinTextArea.DaikinTextArea

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

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

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

@@ -44,31 +44,34 @@ const cvaContainer = classVarianceAuthority.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]"
         ]
       }
     }
@@ -135,7 +138,7 @@ exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsEle
             @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>` : lit.nothing}
     </aside>`;

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

@@ -39,14 +39,14 @@ const cvaHelper = classVarianceAuthority.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/cjs-dev/components/link/daikin-link.cjs

@@ -21,19 +21,20 @@ var __decorateClass = (decorators2, target, key, kind) => {
 };
 const LINK_CLASS_NAME = classVarianceAuthority.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 = classVarianceAuthority.cva(["leading-[130%]"], {
+const cvaContent = classVarianceAuthority.cva([], {
   variants: {
     noUnderline: {
       true: [],
@@ -55,21 +56,39 @@ exports.DaikinLink = class DaikinLink extends ddsElement.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 lit.html`<a
       class=${LINK_CLASS_NAME}
       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.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/cjs-dev/components/link/daikin-link.d.cts

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 /**
  * 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.cjs";
  * </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/cjs-dev/components/list-item/daikin-list-item.cjs

@@ -26,16 +26,16 @@ const INNER_CN = classVarianceAuthority.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 = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-left"], {
   variants: {
@@ -91,6 +91,24 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.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 = lit.html`<span class="flex items-center w-full relative">

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 /**
  * 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.cjs";
  * <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/cjs-dev/components/loading/daikin-loading.cjs

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

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

@@ -34,15 +34,15 @@ const cvaWrapper = classVarianceAuthority.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]"]
       }
     }
   }
@@ -53,8 +53,26 @@ exports.DaikinLogo = class DaikinLogo extends ddsElement.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 lit.html`<span
         class=${cvaWrapper({ type: "logo", mode: this.mode })}
         role="img"

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 /**
  * 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.cjs";
  * </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/cjs-dev/components/menu/daikin-menu.cjs

@@ -19,6 +19,7 @@ const daikinBreadcrumbItem = require("../breadcrumb-item/daikin-breadcrumb-item.
 const daikinButton = require("../button/daikin-button.cjs");
 const daikinIconButton = require("../icon-button/daikin-icon-button.cjs");
 const daikinListItem = require("../list-item/daikin-list-item.cjs");
+const daikinNavigationItem = require("../navigation-item/daikin-navigation-item.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -30,8 +31,8 @@ var __decorateClass = (decorators2, target, key, kind) => {
   return result;
 };
 const cvaMenu = classVarianceAuthority.cva([
-  "left-[--floating-x,0]",
-  "top-[--floating-y,0]",
+  "left-(--floating-x,0)",
+  "top-(--floating-y,0)",
   "w-max",
   "py-2",
   "border",
@@ -69,12 +70,13 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.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.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button" || control instanceof daikinAvatar.DaikinAvatar && control.type === "button" || control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem) {
+      if (control instanceof daikinButton.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button" || control instanceof daikinAvatar.DaikinAvatar && control.type === "button" || control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem || control instanceof daikinNavigationItem.DaikinNavigationItem && control.type === "menu") {
         return control;
       }
     }
@@ -90,6 +92,10 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         control.buttonAriaHaspopup = "menu";
       } else if (control instanceof daikinAvatar.DaikinAvatar && control.type === "button") {
         control.avatarAriaHaspopup = "menu";
+      } else if (control instanceof daikinNavigationItem.DaikinNavigationItem && control.type === "menu") {
+        control.navigationItemAriaHaspopup = "menu";
+      } else if (control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem) {
+        control.breadcrumbAriaHaspopup = "menu";
       }
     }
     for (const daikinList of this._lists) {
@@ -106,6 +112,10 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         control.buttonAriaExpanded = `${this.open}`;
       } else if (control instanceof daikinAvatar.DaikinAvatar && control.type === "button") {
         control.avatarAriaExpanded = `${this.open}`;
+      } else if (control instanceof daikinNavigationItem.DaikinNavigationItem && control.type === "menu") {
+        control.navigationItemAriaExpanded = `${this.open}`;
+      } else if (control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem) {
+        control.breadcrumbAriaExpanded = `${this.open}`;
       }
     }
   }
@@ -201,13 +211,17 @@ exports.DaikinMenu.styles = lit.css`
 
       --ddc-menu-spacing: ${lit.unsafeCSS(DEFAULT_MENU_SPACING)};
     }
+
+    :host([open]) ::slotted(daikin-navigation-item) {
+      --chevron-rotation: 180deg;
+    }
   `;
 __decorateClass([
   decorators_js.queryAssignedElements({ slot: "menu", selector: "daikin-list" })
 ], exports.DaikinMenu.prototype, "_lists", 2);
 __decorateClass([
   decorators_js.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"
   })
 ], exports.DaikinMenu.prototype, "_controls", 2);
 __decorateClass([