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

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

@@ -36,20 +36,22 @@ const cvaInput = cva(
     "py-3",
     "pl-4",
     "pr-16",
-    "rounded",
+    "rounded-sm",
     "overflow-hidden",
     "font-daikinSerif",
     "text-left",
     "leading-[130%]",
     "relative",
-    "outline",
+    "outline-solid",
     "outline-1",
     "-outline-offset-1",
     "whitespace-nowrap",
     "text-ellipsis",
+    "text-ddt-color-common-text-primary",
+    "placeholder:text-ddt-color-common-text-secondary",
     "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",
     "enabled:after:text-ddt-color-common-text-primary",
@@ -61,15 +63,11 @@ const cvaInput = cva(
     variants: {
       error: {
         false: [
-          "var-color-ddt-color-common-neutral-default/color-base",
-          "hover:var-color-ddt-color-common-neutral-hover/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)]",
+          "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
         ],
-        true: ["var-color-ddt-color-common-danger-default/color-base"]
-      },
-      placeholder: {
-        false: ["text-ddt-color-common-text-primary"],
-        true: ["text-ddt-color-common-text-secondary"]
+        true: ["[--color-base:var(--dds-color-common-danger-default)]"]
       }
     }
   }
@@ -86,24 +84,24 @@ const cvaOption = cva(
     "leading-[130%]",
     "text-left",
     "relative",
-    "data-[focus]:outline",
-    "data-[focus]:outline-2",
-    "data-[focus]:-outline-offset-2",
-    "data-[focus]:outline-ddt-color-common-border-focus"
+    "data-focus:outline-solid",
+    "data-focus:outline-2",
+    "data-focus:-outline-offset-2",
+    "data-focus:outline-ddt-color-common-border-focus"
   ],
   {
     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",
           "pr-10",
           "after:absolute",
@@ -115,7 +113,7 @@ const cvaOption = cva(
       disabled: {
         false: [
           "text-ddt-color-common-text-primary",
-          "bg-[--color-primary]",
+          "bg-(--color-primary)",
           "cursor-pointer"
         ],
         true: [
@@ -128,9 +126,9 @@ const cvaOption = cva(
 );
 const cvaArrow = cva(
   [
-    "i-daikin-chevron-down",
+    "icon-[daikin--chevron-down]",
     "size-6",
-    "flex-shrink-0",
+    "shrink-0",
     "z-10",
     "pointer-events-auto"
   ],
@@ -424,8 +422,7 @@ let DaikinCombobox = class extends DDSFormElement {
       <div class="w-full relative">
         <input
           class=${cvaInput({
-      error: this.error,
-      placeholder: !this.value || this.value.length === 0
+      error: this.error
     })}
           role="combobox"
           name=${ifDefined(this.getBackingProperty("name"))}
@@ -450,7 +447,7 @@ let DaikinCombobox = class extends DDSFormElement {
           class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
         >
           ${!!this.value && !!this.value.length ? html`<daikin-icon-button
-                class="size-6 flex-shrink-0"
+                class="size-6 shrink-0"
                 color="neutral"
                 variant="ghost"
                 ?disabled=${this.disabled}
@@ -459,7 +456,7 @@ let DaikinCombobox = class extends DDSFormElement {
                 @click=${this._handleClearClick}
                 @focusout=${this._handleFocusOut}
               >
-                <span class="i-daikin-close"></span>
+                <span class="icon-[daikin--close] size-6"></span>
               </daikin-icon-button>` : nothing}
           <span
             class=${cvaArrow({ open: this.open, disabled: this.disabled })}
@@ -475,7 +472,7 @@ let DaikinCombobox = class extends DDSFormElement {
         id="combobox-items"
         popover="manual"
         tabindex="-1"
-        class="flex flex-col overflow-hidden rounded border border-ddt-color-divider floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] opacity-1 transition-[opacity] max-w-min"
+        class="flex flex-col overflow-hidden rounded-sm border border-ddt-color-divider floating-unready:hidden absolute left-(--floating-x,0) top-(--floating-y,0) min-w-(--floating-width) max-h-50 max-w-min"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >

package/dist/es/components/date-picker/daikin-date-picker.js

@@ -57,25 +57,25 @@ const cvaField = 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"
@@ -84,10 +84,10 @@ const cvaField = 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)]"]
       }
     }
   }
@@ -540,7 +540,7 @@ let DaikinDatePicker = class extends DDSFormElement {
         max=${formatDateForProperty(max)}
         default-value=${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/es/components/dropdown/daikin-dropdown.js

@@ -35,22 +35,22 @@ const cvaButton = 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",
@@ -71,12 +71,12 @@ const cvaButton = 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"],
@@ -350,7 +350,7 @@ let DaikinDropdown = class extends DDSFormElement {
         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/es/components/dropdown-item/daikin-dropdown-item.js

@@ -30,7 +30,7 @@ const cvaOption = 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"
@@ -39,15 +39,15 @@ const cvaOption = 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"
         ]
@@ -55,7 +55,7 @@ const cvaOption = cva(
       disabled: {
         false: [
           "text-ddt-color-common-text-primary",
-          "bg-[--color-primary]",
+          "bg-(--color-primary)",
           "cursor-pointer"
         ],
         true: [
@@ -122,7 +122,7 @@ let DaikinDropdownItem = class extends DDSElement {
           @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/es/components/empty-state/daikin-empty-state.d.ts

@@ -0,0 +1,34 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * 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/es/components/empty-state/daikin-empty-state.js

@@ -0,0 +1,50 @@
+import { unsafeCSS, css, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import "lit/decorators.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let DaikinEmptyState = class extends DDSElement {
+  render() {
+    return 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>`;
+  }
+};
+DaikinEmptyState.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+    }
+  `;
+DaikinEmptyState = __decorateClass([
+  ddsElement("daikin-empty-state")
+], DaikinEmptyState);
+export {
+  DaikinEmptyState
+};

package/dist/es/components/empty-state/index.d.ts

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

package/dist/es/components/empty-state/index.js

@@ -0,0 +1,4 @@
+import { DaikinEmptyState } from "./daikin-empty-state.js";
+export {
+  DaikinEmptyState
+};

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

@@ -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/es/components/icon/daikin-icon.js

@@ -33,7 +33,7 @@ const cvaIcon = 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`
     },
@@ -41,18 +41,11 @@ const cvaIcon = 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
     }
@@ -87,6 +80,7 @@ let DaikinIcon = class extends DDSElement {
         defaultColor: staticIcon.color,
         class: staticIcon.class
       };
+      console.log(this._iconData);
       return;
     }
     try {

package/dist/es/components/icon/icons.json.d.ts

@@ -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/es/components/icon/icons.json.js

@@ -1,4 +1,4 @@
-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/es/components/icon-button/daikin-icon-button.d.ts

@@ -1,4 +1,4 @@
-import { DDSFormSubmitElement } from "../../base/index.js";
+import { DDSFormSubmitElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 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.