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

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

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

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

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

@@ -24,23 +24,29 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const PANEL = classVarianceAuthority.cva([
   "flex",
   "flex-col",
+  "justify-between",
   "gap-4",
-  "top-[50%]",
-  "left-[50%]",
-  "w-full",
-  "sm:max-w-[50%]",
-  "z-[10000]",
+  "size-fit",
+  "z-10000",
+  "overflow-hidden",
   "p-4",
   "rounded-lg",
-  "bg-ddt-color-common-background-default"
+  "bg-ddt-color-common-background-default",
+  "min-w-80",
+  "xl:max-w-[calc(100%-10rem)]",
+  "md:max-w-[calc(100%-8rem)]",
+  "max-w-[calc(100%-2rem)]",
+  "min-h-61",
+  "xl:max-h-[calc(100vh-8rem)]",
+  "md:max-h-[calc(100vh-6rem)]",
+  "max-h-[calc(100vh-3rem)]"
 ])();
 const cvaBackDrop = classVarianceAuthority.cva(
   [
     "fixed",
     "flex",
-    "px-4",
     "inset-0",
-    "z-[9999]",
+    "z-9999",
     "items-center",
     "justify-center",
     "bg-black/50"
@@ -74,6 +80,7 @@ exports.DaikinModal = class DaikinModal extends ddsElement.DDSElement {
   render() {
     return lit.html`<div class=${cvaBackDrop({ open: this.open })}>
         <div
+          part="modal"
           class=${PANEL}
           role=${this.modalRole}
           aria-modal=${ifDefined_js.ifDefined(this.open ? "true" : void 0)}

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.DaikinNavigation = class DaikinNavigation extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.navigationAriaLabel = null;
+  }
+  render() {
+    return lit.html`<nav aria-label=${ifDefined_js.ifDefined(this.navigationAriaLabel)}>
+      <div role="list" class="w-full flex px-8">
+        <slot></slot>
+      </div>
+    </nav>`;
+  }
+};
+exports.DaikinNavigation.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "navigation-aria-label" })
+], exports.DaikinNavigation.prototype, "navigationAriaLabel", 2);
+exports.DaikinNavigation = __decorateClass([
+  decorators.ddsElement("daikin-navigation")
+], exports.DaikinNavigation);

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

@@ -0,0 +1,56 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * The navigation serves as the primary navigation component, acting as the global anchor point that defines the site's high-level information architecture.
+ * The navigation component is used as the parent element that organizes and manages the overall structure of the navigation.
+ * Currently it only provides appropriate styles for individual navigation items.
+ *
+ * Hierarchy:
+ * - `daikin-navigation` > `daikin-navigation-item`
+ *
+ * @slot - A slot for the navigation items. Place `daikin-navigation-item` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/navigation/index.js";
+ * import "@daikin-oss/design-system-web-components/components/navigation-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/menu/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-navigation>
+ *   <daikin-navigation-item href="#" current>
+ *     Navigation content 1
+ *   </daikin-navigation-item>
+ *   <daikin-menu placement="bottom-start">
+ *     <daikin-navigation-item type="menu">
+ *       Navigation content 2
+ *     </daikin-navigation-item>
+ *     <daikin-list slot="menu" class="max-w-40">
+ *       <daikin-list-item href="#" type="link">Menu item 1</daikin-list-item>
+ *       <daikin-list-item href="#" type="link">Menu item 2</daikin-list-item>
+ *       <daikin-list-item href="#" type="link">Menu item 3</daikin-list-item>
+ *     </daikin-list>
+ *   </daikin-menu>
+ *   <daikin-navigation-item href="#">
+ *     Navigation content 3
+ *   </daikin-navigation-item>
+ * </daikin-navigation>
+ * ```
+ */
+export declare class DaikinNavigation extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The aria-label of the navigation.
+     */
+    navigationAriaLabel: string | null;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-navigation": DaikinNavigation;
+    }
+}
+export default DaikinNavigation;

package/dist/cjs/components/navigation/index.cjs

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

package/dist/cjs/components/navigation/index.d.cts

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