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

package/dist/cjs/utils/calendar-common.cjs

@@ -8,10 +8,10 @@ const cvaIconButton = classVarianceAuthority.cva(
   {
     variants: {
       intent: {
-        previous: ["size-5", "i-daikin-chevron-left"],
-        next: ["size-5", "i-daikin-chevron-right"],
-        calender: ["size-6", "i-daikin-calendar"],
-        pulldown: ["size-6", "i-daikin-pulldown-down"]
+        previous: ["size-5", "icon-[daikin--chevron-left]"],
+        next: ["size-5", "icon-[daikin--chevron-right]"],
+        calender: ["size-6", "icon-[daikin--calendar]"],
+        pulldown: ["size-6", "icon-[daikin--pulldown-down]"]
       },
       rotate: {
         default: [],
@@ -41,15 +41,19 @@ function isSameYearMonth(a, b) {
 function formatDateForProperty(date) {
   return `${String(date.getUTCFullYear()).padStart(4, "0")}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`;
 }
+function getTodayForProperty() {
+  const date = /* @__PURE__ */ new Date();
+  return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
 function parseDateFromProperty(value) {
-  return new Date(value);
+  return /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
 }
 function tryParseDateFromProperty(value) {
   if (!/^\d\d\d\d-\d\d-\d\d$/.test(value)) {
     return null;
   }
-  const date = new Date(value);
-  if (isNaN(date.getTime())) {
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  if (Number.isNaN(date.getTime())) {
     return null;
   }
   return date;
@@ -78,7 +82,7 @@ function createDateClamped(year, month, date) {
   return newDate;
 }
 function getDateByMonthOffsetClamped(base, monthOffset) {
-  const newDate = new Date(base.getTime());
+  const newDate = new Date(base);
   const expectedMonth = ((base.getUTCMonth() + monthOffset) % 12 + 12) % 12;
   newDate.setUTCMonth(base.getUTCMonth() + monthOffset);
   if (newDate.getUTCMonth() !== expectedMonth) {
@@ -90,8 +94,8 @@ function calcWeeksOnCalendar(year, month) {
   const firstDateOfMonth = createDateClamped(year, month, 1);
   const lastDateOfMonth = createDateClamped(year, month, 31);
   const currentMonthDates = lastDateOfMonth.getUTCDate() - firstDateOfMonth.getUTCDate() + 1;
-  const prevMonthDates = firstDateOfMonth.getDay();
-  const nextMonthDates = 6 - lastDateOfMonth.getDay();
+  const prevMonthDates = firstDateOfMonth.getUTCDay();
+  const nextMonthDates = 6 - lastDateOfMonth.getUTCDay();
   const dates = [
     // Days of the previous month to fill columns
     Array.from({ length: prevMonthDates }, (_, index) => {
@@ -148,6 +152,7 @@ exports.createDateClamped = createDateClamped;
 exports.cvaIconButton = cvaIconButton;
 exports.formatDateForProperty = formatDateForProperty;
 exports.getDateByMonthOffsetClamped = getDateByMonthOffsetClamped;
+exports.getTodayForProperty = getTodayForProperty;
 exports.isDateOutOfRange = isDateOutOfRange;
 exports.isMonthOutOfRange = isMonthOutOfRange;
 exports.isSameYearMonth = isSameYearMonth;

package/dist/cjs/utils/calendar-common.d.cts

@@ -17,15 +17,20 @@ export declare function isMonthOutOfRange(base: Date, min: Date, max: Date): boo
  */
 export declare function isSameYearMonth(a: Date, b: Date): boolean;
 /**
- * Stringify the date in YYYY-MM-DD format.
+ * Stringify the _UTC_ date in YYYY-MM-DD format.
  */
 export declare function formatDateForProperty(date: Date): string;
 /**
- * Parses the date in YYYY-MM-DD format and returns UTC date.
+ * Returns today's date as a string in the format 'YYYY-MM-DD'.
+ * Uses _local_ timezone to determine the current date.
+ */
+export declare function getTodayForProperty(): string;
+/**
+ * Parses the date in YYYY-MM-DD format and returns _UTC_ date.
  */
 export declare function parseDateFromProperty(value: string): Date;
 /**
- * Try parsing the date in YYYY-MM-DD format and returns UTC date if available.
+ * Try parsing the date in YYYY-MM-DD format and returns _UTC_ date if available.
  */
 export declare function tryParseDateFromProperty(value: string): Date | null;
 /**

package/dist/cjs/utils/notification-common.d.cts

@@ -2,5 +2,5 @@
 export declare const TOAST_ANIMATION_DURATION = 200;
 export declare function formatDate(date: Date): string | null;
 export declare const cvaTimestamp: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
+    layout?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/cjs-dev/base/dds-element.cjs

@@ -94,6 +94,6 @@ const _DDSElement = class _DDSElement extends lit.LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.4.1";
+_DDSElement.version = "1.5.0";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs-dev/base/dds-navigable.d.cts

@@ -0,0 +1,16 @@
+/**
+ * Describes a navigation destination for DDS components.
+ */
+export interface NavigationTarget {
+    /** The destination URL. */
+    href: string;
+    /** The target browsing context, or null for default behavior. */
+    target: string | null;
+}
+/**
+ * Interface for DDS components that provide navigation capabilities.
+ */
+export interface DDSNavigable extends HTMLElement {
+    /** Returns the navigation target derived from the element state. */
+    getDDSNavigationTarget(): NavigationTarget | null;
+}

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

@@ -1,5 +1,6 @@
 export * from "./dds-element.cjs";
 export * from "./dds-form-element.cjs";
+export * from "./dds-navigable.cjs";
 export * from "./dds-property.cjs";
 export * from "./decorators.cjs";
 export * from "./define.cjs";

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
@@ -18,9 +19,19 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaAccordion = classVarianceAuthority.cva(["w-full"], {
+  variants: {
+    border: {
+      vertical: ["border-y border-ddt-color-divider"],
+      all: ["border border-ddt-color-divider"],
+      none: []
+    }
+  }
+});
 exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this.border = "vertical";
     this.openItems = [];
     this.exclusive = false;
   }
@@ -58,7 +69,7 @@ exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
     }
   }
   render() {
-    return lit.html`<div class="w-full">
+    return lit.html`<div class=${cvaAccordion({ border: this.border })}>
       <slot
         @accordion-move-focus=${this._handleMoveFocus}
         @toggle=${this._handleToggle}
@@ -74,15 +85,27 @@ exports.DaikinAccordion.styles = lit.css`
       min-width: 10rem;
     }
 
-    ::slotted(daikin-accordion-item) {
+    :host(:not([border="none"])) ::slotted(daikin-accordion-item) {
       --divider-top-display: block;
-      --divider-bottom-display: none;
     }
 
-    ::slotted(daikin-accordion-item:last-child) {
-      --divider-bottom-display: block;
+    :host(:not([border="none"])) ::slotted(daikin-accordion-item:first-child) {
+      --divider-top-display: none;
     }
   `;
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "border",
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "vertical",
+      "all",
+      "none"
+    ])
+  })
+], exports.DaikinAccordion.prototype, "border", 2);
 __decorateClass([
   ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinAccordion.prototype, "openItems", 2);

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

@@ -1,4 +1,9 @@
 import { DDSElement } from "../../base/index.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaAccordion: (props?: ({
+    border?: "vertical" | "all" | "none" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AccordionVariantProps = MergeVariantProps<typeof cvaAccordion>;
 /**
  * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
  * Currently it only provides appropriate styles for individual accordion items.
@@ -34,6 +39,15 @@ import { DDSElement } from "../../base/index.cjs";
  */
 export declare class DaikinAccordion extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * The border type of the accordion.
+     * - `vertical`: Display the top and bottom border style.
+     * - `all`: Box border style.
+     * - `none`: No border style.
+     *
+     * @default "vertical"
+     */
+    border: AccordionVariantProps["border"];
     /**
      * A list of the names of the open items.
      * If `exclusive` is true, the number of elements is 0 or 1.

package/dist/cjs-dev/components/accordion-item/daikin-accordion-item.cjs

@@ -30,13 +30,13 @@ const cvaSummary = classVarianceAuthority.cva(
     "p-3",
     "natural-break",
     "text-left",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus",
     "after:size-6",
     "after:transition-all",
-    "after:i-daikin-chevron-down",
+    "after:icon-[daikin--chevron-down]",
     "after:flex-none"
   ],
   {
@@ -59,7 +59,7 @@ const cvaSummary = classVarianceAuthority.cva(
     }
   }
 );
-const cvaContent = classVarianceAuthority.cva(["grid", "duration-[250ms]", "ease-in-out"], {
+const cvaContent = classVarianceAuthority.cva(["grid", "duration-250", "ease-in-out"], {
   variants: {
     open: {
       false: ["grid-rows-[0fr]"],
@@ -128,7 +128,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
         role="region"
         class=${cvaContent({ open })}
         aria-labelledby="summary"
-        ?hidden=${!open}
+        ?inert=${!open}
       >
         <div class="overflow-hidden">
           <div class="pt-2 px-3 pb-3">

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

@@ -28,7 +28,7 @@ const cvaWrapper = classVarianceAuthority.cva(
     "overflow-hidden",
     "box-border",
     "size-full",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
@@ -53,10 +53,10 @@ const cvaWrapper = classVarianceAuthority.cva(
         link: [
           "link-enabled:bg-ddt-color-common-neutral-default",
           "link-enabled:text-ddt-color-common-surface-default",
-          "link-enabled:hover:bg-ddt-color-common-neutral-hover",
-          "link-enabled:hover:text-ddt-color-common-surface-hover",
-          "link-enabled:active:bg-ddt-color-common-neutral-press",
-          "link-enabled:active:text-ddt-color-common-surface-press",
+          "hover:link-enabled:bg-ddt-color-common-neutral-hover",
+          "hover:link-enabled:text-ddt-color-common-surface-hover",
+          "active:link-enabled:bg-ddt-color-common-neutral-press",
+          "active:link-enabled:text-ddt-color-common-surface-press",
           "link-disabled:bg-ddt-color-common-disabled",
           "link-disabled:text-ddt-color-common-surface-default"
         ]
@@ -78,10 +78,28 @@ exports.DaikinAvatar = class DaikinAvatar extends ddsElement.DDSElement {
       }
     });
   }
+  /**
+   * _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 icon = lit.html`
       <span
-        class="i-daikin-profile"
+        class="icon-[daikin--profile] size-10"
       >
       </span>
     </daikin-icon>`;

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaWrapper: (props?: ({
     type?: "button" | "icon" | "link" | null | undefined;
@@ -19,7 +19,7 @@ type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
  * <daikin-avatar></daikin-avatar>
  * ```
  */
-export declare class DaikinAvatar extends DDSElement {
+export declare class DaikinAvatar extends DDSElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Replace the wrapping element.
@@ -52,8 +52,18 @@ export declare class DaikinAvatar extends DDSElement {
      * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
     avatarAriaExpanded: "true" | "false" | "undefined" | null;
-    private _focusableElement;
+    private readonly _focusableElement;
     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/badge/daikin-badge.cjs

@@ -32,8 +32,8 @@ const cvaBadge = classVarianceAuthority.cva(["absolute", "rounded-full"], {
         "flex",
         "items-center",
         "justify-center",
-        "-top-[2px]",
-        "-right-[2px]",
+        "-top-0.5",
+        "-right-0.5",
         "before:content-[attr(data-count)]",
         "before:leading-none",
         "before:whitespace-nowrap",

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

@@ -70,11 +70,6 @@ exports.DaikinBreadcrumb = class DaikinBreadcrumb extends ddsElement.DDSElement
 };
 exports.DaikinBreadcrumb.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
   `;
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-visited" })

package/dist/cjs-dev/components/breadcrumb-item/daikin-breadcrumb-item.cjs

@@ -31,7 +31,7 @@ const LINK_CLASS_NAME = classVarianceAuthority.cva([
   "hover:bg-ddt-color-common-surface-brand-hover",
   "active:text-ddt-color-link-text-press",
   "active:bg-ddt-color-common-surface-brand-press",
-  "focus-visible:outline",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "focus-visible:outline-offset-2"
@@ -43,6 +43,26 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
     this.target = null;
     this.showVisited = false;
     this.appendDivider = false;
+    this.breadcrumbAriaHaspopup = null;
+    this.breadcrumbAriaExpanded = 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 || this.variant !== "normal") {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: this.target
+    };
   }
   render() {
     const link = this.variant === "normal" ? lit.html`<daikin-link
@@ -56,6 +76,8 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
               type="button"
               class=${LINK_CLASS_NAME}
               aria-label="Show more items"
+              aria-haspopup=${ifDefined_js.ifDefined(this.breadcrumbAriaHaspopup)}
+              aria-expanded=${ifDefined_js.ifDefined(this.breadcrumbAriaExpanded)}
             >
               ...
             </button>` : lit.html`<a
@@ -102,6 +124,20 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-haspopup"
+  })
+], exports.DaikinBreadcrumbItem.prototype, "breadcrumbAriaHaspopup", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-expanded"
+  })
+], exports.DaikinBreadcrumbItem.prototype, "breadcrumbAriaExpanded", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
   decorators.ddsElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 /**
  * The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
  *
@@ -20,8 +20,8 @@ import { DDSElement } from "../../base/index.cjs";
  * </daikin-breadcrumb-item>
  * ```
  */
-export declare class DaikinBreadcrumbItem extends DDSElement {
-    static styles: import('lit').CSSResult;
+export declare class DaikinBreadcrumbItem extends DDSElement implements DDSNavigable {
+    static readonly styles: import('lit').CSSResult;
     /**
      * Specify link href.
      */
@@ -51,6 +51,26 @@ export declare class DaikinBreadcrumbItem extends DDSElement {
      * @private
      */
     appendDivider: boolean;
+    /**
+     * The aria-haspopup of the breadcrumb item when `variant="ellipsis"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `breadcrumbAriaHaspopup="menu"`.
+     */
+    breadcrumbAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of breadcrumb item when `variant="ellipsis"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    breadcrumbAriaExpanded: "true" | "false" | "undefined" | null;
+    /**
+     * _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/button/daikin-button.cjs

@@ -28,44 +28,44 @@ const cvaButton = classVarianceAuthority.cva(
     "size-full",
     "font-daikinSerif",
     "font-bold",
-    "rounded",
+    "rounded-sm",
     "tracking-wide",
     "text-nowrap",
     "leading-[130%]",
-    "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)]"
         ],
         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)"]
       },
       size: {
         small: ["px-2", "text-sm"],
@@ -104,6 +104,24 @@ exports.DaikinButton = class DaikinButton extends ddsFormElement.DDSFormSubmitEl
       }
     });
   }
+  /**
+   * _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 className = cvaButton({
       variant: this.variant,

package/dist/cjs-dev/components/button/daikin-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 cvaButton: (props?: ({
@@ -35,7 +35,7 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
  * </daikin-button>
  * ```
  */
-export declare class DaikinButton extends DDSFormSubmitElement {
+export declare class DaikinButton extends DDSFormSubmitElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -91,8 +91,18 @@ export declare class DaikinButton extends DDSFormSubmitElement {
      * This is useful when the button is part of a composite widget and accessible via other keys.
      */
     buttonTabIndex: number;
-    private _focusableElement;
+    private readonly _focusableElement;
     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.