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

package/dist/cjs/components/date-picker/daikin-date-picker.cjs

@@ -59,25 +59,25 @@ const cvaField = classVarianceAuthority.cva(
     "bg-ddt-color-common-background-default",
     "pl-4",
     "pr-10",
-    "rounded",
+    "rounded-sm",
     "truncate",
-    "outline",
-    "outline-[--color-border]",
+    "outline-solid",
+    "outline-(--color-border)",
     "outline-0",
     "-outline-offset-2",
     "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "define-[--color-state-focus,--color-base]/color-border",
+    "[--color-border:var(--color-state-focus,var(--color-base))]",
     "border",
-    "border-[--color-border]",
+    "border-(--color-border)",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
     "enabled:text-ddt-color-common-text-primary",
     "enabled:hover:bg-ddt-color-common-surface-hover",
     "enabled:active:bg-ddt-color-common-surface-press",
     "focus-visible:outline-2",
-    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:[--color-base:var(--dds-color-common-disabled)]",
     "disabled:text-ddt-color-common-disabled",
     "disabled:bg-ddt-color-common-background-default",
     "disabled:placeholder:text-ddt-color-common-disabled"
@@ -86,10 +86,10 @@ const cvaField = classVarianceAuthority.cva(
     variants: {
       error: {
         false: [
-          "enabled:var-color-ddt-color-common-neutral-default/color-base",
-          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
+          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
         ],
-        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
+        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
       }
     }
   }
@@ -542,7 +542,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         max=${calendarCommon.formatDateForProperty(max)}
         default-value=${ifDefined_js.ifDefined(this.defaultValue)}
         popover="manual"
-        class="absolute left-[--floating-x,0] top-[--floating-y,0]"
+        class="absolute left-(--floating-x,0) top-(--floating-y,0)"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
         @selecting=${this._handleSelect}

package/dist/cjs/components/dropdown/daikin-dropdown.cjs

@@ -37,22 +37,22 @@ const cvaButton = classVarianceAuthority.cva(
     "py-3",
     "pl-4",
     "pr-3",
-    "rounded",
+    "rounded-sm",
     "overflow-hidden",
     "font-daikinSerif",
     "text-left",
     "leading-[130%]",
     "relative",
-    "outline",
+    "outline-solid",
     "outline-1",
     "-outline-offset-1",
     "natural-break",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "enabled:outline-[--color-base]",
+    "enabled:outline-(--color-base)",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
-    "after:i-daikin-chevron-down",
+    "after:icon-[daikin--chevron-down]",
     "after:size-6",
     "after:flex-none",
     "after:ml-auto",
@@ -73,12 +73,12 @@ const cvaButton = classVarianceAuthority.cva(
       },
       error: {
         false: [
-          "var-color-ddt-color-common-neutral-default/color-base",
-          "hover:var-color-ddt-color-common-neutral-hover/color-base",
-          "active:var-color-ddt-color-common-neutral-press/color-base",
-          "focus-visible:var-color-ddt-color-common-border-focus/color-base"
+          "[--color-base:var(--dds-color-common-neutral-default)]",
+          "hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+          "active:[--color-base:var(--dds-color-common-neutral-press)]",
+          "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
         ],
-        true: ["var-color-ddt-color-common-danger-default/color-base"]
+        true: ["[--color-base:var(--dds-color-common-danger-default)]"]
       },
       placeholder: {
         false: ["text-ddt-color-common-text-primary"],
@@ -352,7 +352,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
         id="dropdown-items"
         role="listbox"
         popover="manual"
-        class="flex flex-col overflow-hidden floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider opacity-1 transition-[opacity] rounded max-w-min"
+        class="flex flex-col overflow-hidden floating-unready:hidden absolute left-(--floating-x,0) top-(--floating-y,0) min-w-(--floating-width) max-h-50 border border-ddt-color-divider rounded-sm max-w-min"
         aria-labelledby="dropdown-button"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}

package/dist/cjs/components/dropdown-item/daikin-dropdown-item.cjs

@@ -32,7 +32,7 @@ const cvaOption = classVarianceAuthority.cva(
     "leading-[130%]",
     "text-left",
     "relative",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
@@ -41,15 +41,15 @@ const cvaOption = classVarianceAuthority.cva(
     variants: {
       selected: {
         false: [
-          "var-color-ddt-color-common-background-default/color-primary",
-          "hover:var-color-ddt-color-common-surface-hover/color-primary",
-          "active:var-color-ddt-color-common-surface-press/color-primary"
+          "[--color-primary:var(--dds-color-common-background-default)]",
+          "hover:[--color-primary:var(--dds-color-common-surface-hover)]",
+          "active:[--color-primary:var(--dds-color-common-surface-press)]"
         ],
         true: [
-          "var-color-ddt-color-common-surface-selected-default/color-primary",
-          "hover:var-color-ddt-color-common-surface-selected-hover/color-primary",
-          "active:var-color-ddt-color-common-surface-selected-press/color-primary",
-          "after:i-daikin-dropdown-check",
+          "[--color-primary:var(--dds-color-common-surface-selected-default)]",
+          "hover:[--color-primary:var(--dds-color-common-surface-selected-hover)]",
+          "active:[--color-primary:var(--dds-color-common-surface-selected-press)]",
+          "after:icon-[daikin--dropdown-check]",
           "after:size-6",
           "after:flex-none"
         ]
@@ -57,7 +57,7 @@ const cvaOption = classVarianceAuthority.cva(
       disabled: {
         false: [
           "text-ddt-color-common-text-primary",
-          "bg-[--color-primary]",
+          "bg-(--color-primary)",
           "cursor-pointer"
         ],
         true: [
@@ -124,7 +124,7 @@ exports.DaikinDropdownItem = class DaikinDropdownItem extends ddsElement.DDSElem
           @mousedown=${this._handleMousedown}
         >
           <daikin-checkbox
-            class="size-full part-[label]:p-2 part-[label]:cursor-pointer"
+            class="size-full part-label:p-2 part-label:cursor-pointer"
             check-state=${this.selected ? "checked" : "unchecked"}
             tabindex="-1"
             ?disabled=${this.disabled}

package/dist/cjs/components/empty-state/daikin-empty-state.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+require("lit/decorators.js");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = decorator(result) || result;
+  return result;
+};
+exports.DaikinEmptyState = class DaikinEmptyState extends ddsElement.DDSElement {
+  render() {
+    return lit.html`<div class="flex flex-col items-center justify-center gap-6">
+      <div class="flex flex-col items-center justify-center gap-1">
+        <slot
+          name="icon"
+          class="slotted:size-8 slotted:text-ddt-color-common-neutral-default"
+        ></slot>
+        <slot
+          name="title"
+          class="slotted:text-base slotted:font-bold slotted:natural-break slotted:text-center slotted:font-daikinSerif slotted:leading-[130%] slotted:text-ddt-color-common-text-primary"
+        ></slot>
+        <slot
+          name="description"
+          class="slotted:text-sm slotted:font-normal slotted:natural-break slotted:text-center slotted:font-daikinSerif slotted:leading-[150%] slotted:text-ddt-color-common-text-primary"
+          ><span class="-mt-1"></span
+        ></slot>
+      </div>
+      <slot name="action"></slot>
+    </div>`;
+  }
+};
+exports.DaikinEmptyState.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+    }
+  `;
+exports.DaikinEmptyState = __decorateClass([
+  decorators.ddsElement("daikin-empty-state")
+], exports.DaikinEmptyState);

package/dist/cjs/components/empty-state/daikin-empty-state.d.cts

@@ -0,0 +1,34 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * The empty-state component defines a text description for when there is no content to display, and allows for the integration of buttons to guide users toward their next action.
+ *
+ * This component is often used with:
+ * - `daikin-table`: To display an empty state when the table has no data.
+ * - `daikin-card`: To display an empty state within a card layout.
+ *
+ * You may also place it in any appropriate location according to the design guidelines.
+ *
+ * @slot icon - A slot for an icon to visually support the empty state's text description.
+ * @slot title - A slot for the title text of the empty state.
+ * @slot description - A slot for the description text providing more details about the empty state.
+ * @slot action - A slot for action elements such as buttons to guide the user's next steps.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/empty-state/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-empty-state></daikin-empty-state>
+ * ```
+ */
+export declare class DaikinEmptyState extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-empty-state": DaikinEmptyState;
+    }
+}

package/dist/cjs/components/empty-state/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinEmptyState = require("./daikin-empty-state.cjs");
+Object.defineProperty(exports, "DaikinEmptyState", {
+  enumerable: true,
+  get: () => daikinEmptyState.DaikinEmptyState
+});

package/dist/cjs/components/empty-state/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-empty-state.cjs";

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

@@ -35,7 +35,7 @@ const cvaIcon = classVarianceAuthority.cva(["inline-flex size-full"], {
     color: {
       black: ["text-ddt-color-common-background-overlay"],
       white: ["text-ddt-color-common-text-inverse"],
-      default: ["text-[--default-color]"],
+      default: ["text-(--default-color)"],
       current: []
       // uses `currentColor`
     },
@@ -43,18 +43,11 @@ const cvaIcon = classVarianceAuthority.cva(["inline-flex size-full"], {
       inline: [],
       mask: [
         "bg-current",
-        "[mask-size:100%_100%]",
-        "[-webkit-mask-size:100%_100%]",
-        "[mask-repeat:no-repeat]",
-        "[-webkit-mask-repeat:no-repeat]",
-        "[mask-image:var(--svg)]",
-        "[-webkit-mask-image:var(--svg)]"
-      ],
-      background: [
-        "bg-no-repeat",
-        "bg-[length:100%_100%]",
-        "bg-[image:var(--svg)]"
+        "mask-size-[100%_100%]",
+        "mask-no-repeat",
+        "mask-(--svg)"
       ],
+      background: ["bg-no-repeat", "bg-size-[100%_100%]", "bg-(image:--svg)"],
       static: []
       // for static icons from icons.json
     }
@@ -89,6 +82,7 @@ exports.DaikinIcon = class DaikinIcon extends ddsElement.DDSElement {
         defaultColor: staticIcon.color,
         class: staticIcon.class
       };
+      console.log(this._iconData);
       return;
     }
     try {

package/dist/cjs/components/icon/daikin-icon.d.cts

@@ -90,6 +90,10 @@ declare const icons: {
         class: string;
         color: null;
     };
+    check: {
+        class: string;
+        color: null;
+    };
 };
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;

package/dist/cjs/components/icon/icons.json.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null }, "notification": { "class": "i-daikin-notification", "color": null }, "neutral": { "class": "i-daikin-neutral", "color": null }, "download": { "class": "i-daikin-download", "color": null } };
+const icons = { "logo-positive": { "class": "icon-[daikin--logo-positive]", "color": null }, "logo-negative": { "class": "icon-[daikin--logo-negative]", "color": null }, "alarm": { "class": "icon-[daikin--alarm]", "color": null }, "close": { "class": "icon-[daikin--close]", "color": "#a0a0a0" }, "information": { "class": "icon-[daikin--information]", "color": null }, "error": { "class": "icon-[daikin--error]", "color": null }, "success": { "class": "icon-[daikin--success]", "color": null }, "warning": { "class": "icon-[daikin--warning]", "color": null }, "pagination-chevron-left": { "class": "icon-[daikin--pagination-chevron-left]", "color": "#414141" }, "pagination-chevron-right": { "class": "icon-[daikin--pagination-chevron-right]", "color": "#414141" }, "profile": { "class": "icon-[daikin--profile]", "color": null }, "chevron-up": { "class": "icon-[daikin--chevron-up]", "color": null }, "chevron-down": { "class": "icon-[daikin--chevron-down]", "color": null }, "chevron-left": { "class": "icon-[daikin--chevron-left]", "color": null }, "chevron-right": { "class": "icon-[daikin--chevron-right]", "color": null }, "sort": { "class": "icon-[daikin--sort]", "color": null }, "negative": { "class": "icon-[daikin--error]", "color": null }, "positive": { "class": "icon-[daikin--success]", "color": null }, "cross": { "class": "icon-[daikin--close]", "color": null }, "notification": { "class": "icon-[daikin--notification]", "color": null }, "neutral": { "class": "icon-[daikin--neutral]", "color": null }, "download": { "class": "icon-[daikin--download]", "color": null }, "check": { "class": "icon-[daikin--check]", "color": null } };
 const iconsJson = {
   icons
 };

package/dist/cjs/components/icon/icons.json.d.cts

@@ -1,91 +1,95 @@
 declare const _default: {
   "icons": {
     "logo-positive": {
-      "class": "i-daikin-logo-positive",
+      "class": "icon-[daikin--logo-positive]",
       "color": null
     },
     "logo-negative": {
-      "class": "i-daikin-logo-negative",
+      "class": "icon-[daikin--logo-negative]",
       "color": null
     },
     "alarm": {
-      "class": "i-daikin-alarm",
+      "class": "icon-[daikin--alarm]",
       "color": null
     },
     "close": {
-      "class": "i-daikin-close",
+      "class": "icon-[daikin--close]",
       "color": "#a0a0a0"
     },
     "information": {
-      "class": "i-daikin-information",
+      "class": "icon-[daikin--information]",
       "color": null
     },
     "error": {
-      "class": "i-daikin-error",
+      "class": "icon-[daikin--error]",
       "color": null
     },
     "success": {
-      "class": "i-daikin-success",
+      "class": "icon-[daikin--success]",
       "color": null
     },
     "warning": {
-      "class": "i-daikin-warning",
+      "class": "icon-[daikin--warning]",
       "color": null
     },
     "pagination-chevron-left": {
-      "class": "i-daikin-pagination-chevron-left",
+      "class": "icon-[daikin--pagination-chevron-left]",
       "color": "#414141"
     },
     "pagination-chevron-right": {
-      "class": "i-daikin-pagination-chevron-right",
+      "class": "icon-[daikin--pagination-chevron-right]",
       "color": "#414141"
     },
     "profile": {
-      "class": "i-daikin-profile",
+      "class": "icon-[daikin--profile]",
       "color": null
     },
     "chevron-up": {
-      "class": "i-daikin-chevron-up",
+      "class": "icon-[daikin--chevron-up]",
       "color": null
     },
     "chevron-down": {
-      "class": "i-daikin-chevron-down",
+      "class": "icon-[daikin--chevron-down]",
       "color": null
     },
     "chevron-left": {
-      "class": "i-daikin-chevron-left",
+      "class": "icon-[daikin--chevron-left]",
       "color": null
     },
     "chevron-right": {
-      "class": "i-daikin-chevron-right",
+      "class": "icon-[daikin--chevron-right]",
       "color": null
     },
     "sort": {
-      "class": "i-daikin-sort",
+      "class": "icon-[daikin--sort]",
       "color": null
     },
     "negative": {
-      "class": "i-daikin-error",
+      "class": "icon-[daikin--error]",
       "color": null
     },
     "positive": {
-      "class": "i-daikin-success",
+      "class": "icon-[daikin--success]",
       "color": null
     },
     "cross": {
-      "class": "i-daikin-close",
+      "class": "icon-[daikin--close]",
       "color": null
     },
     "notification": {
-      "class": "i-daikin-notification",
+      "class": "icon-[daikin--notification]",
       "color": null
     },
     "neutral": {
-      "class": "i-daikin-neutral",
+      "class": "icon-[daikin--neutral]",
       "color": null
     },
     "download": {
-      "class": "i-daikin-download",
+      "class": "icon-[daikin--download]",
+      "color": null
+    },
+    "check": {
+      "class": "icon-[daikin--check]",
       "color": null
     }
   }

package/dist/cjs/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/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/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