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

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

@@ -22,23 +22,29 @@ var __decorateClass = (decorators, target, key, kind) => {
 const PANEL = 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 = cva(
   [
     "fixed",
     "flex",
-    "px-4",
     "inset-0",
-    "z-[9999]",
+    "z-9999",
     "items-center",
     "justify-center",
     "bg-black/50"
@@ -72,6 +78,7 @@ let DaikinModal = class extends DDSElement {
   render() {
     return html`<div class=${cvaBackDrop({ open: this.open })}>
         <div
+          part="modal"
           class=${PANEL}
           role=${this.modalRole}
           aria-modal=${ifDefined(this.open ? "true" : void 0)}

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

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

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

package/dist/es/components/navigation/index.d.ts

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

package/dist/es/components/navigation/index.js

@@ -0,0 +1,4 @@
+import { DaikinNavigation } from "./daikin-navigation.js";
+export {
+  DaikinNavigation
+};

package/dist/es/components/navigation-item/daikin-navigation-item.d.ts

@@ -0,0 +1,89 @@
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
+/**
+ * The navigation item component is a child element within the `daikin-navigation` component.
+ * It represents a single navigational action and is rendered as a link or button, depending on configuration.
+ * This component is responsible for displaying the specific content within the navigation and allowing users to navigate to the associated target.
+ *
+ * Hierarchy:
+ * - `daikin-navigation` > `daikin-navigation-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<a>` or `<button>` element. Suppressed if `disabled` is true or when rendered as a link (`type="link"`) without an `href`.
+ *
+ * @slot - A slot for the navigation item content.
+ * @slot left-icon - A slot for the left icon.
+ *
+ * @cssprop [--chevron-rotation=0deg] - The rotation angle of the chevron icon. This can be used to indicate the open or closed state of a menu. When used within a `daikin-menu` component, this property is automatically controlled by the menu to rotate the chevron icon when the menu is opened or closed, so you don't need to specify it explicitly.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/navigation-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-navigation-item>
+ *   Navigation content
+ * </daikin-navigation-item>
+ * ```
+ */
+export declare class DaikinNavigationItem extends DDSElement implements DDSNavigable {
+    static readonly styles: import('lit').CSSResult;
+    constructor();
+    /**
+     * Type of the navigation item.
+     * - `"link"`: A regular navigation item that is rendered as a link (`<a>`). Use this for navigation items that directly link to other pages or sections.
+     * - `"menu"`: A navigation item that is rendered as a button (`<button>`) and is intended to trigger a dropdown menu. Use this for navigation items that open a menu with additional options.
+     *
+     * @default "link"
+     */
+    type: "link" | "menu";
+    /**
+     * Whether the navigation item is disabled.
+     * When set to `true`, the navigation item is rendered in a disabled state
+     * and does not respond to user interaction or navigation.
+     */
+    disabled: boolean;
+    /**
+     * Whether the navigation item is the current item.
+     * If this is set to `true`, the navigation item will be highlighted as the current item.
+     */
+    current: boolean;
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.
+     */
+    href: string | null;
+    /**
+     * The aria-haspopup of the navigation item when `type="menu"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `navigationItemAriaHaspopup="menu"`.
+     */
+    navigationItemAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of the navigation item when `type="menu"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    navigationItemAriaExpanded: "true" | "false" | "undefined" | null;
+    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 button or link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-navigation-item": DaikinNavigationItem;
+    }
+}

package/dist/es/components/navigation-item/daikin-navigation-item.js

@@ -0,0 +1,220 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html, nothing } from "lit";
+import { query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaBaseClasses = [
+  "flex",
+  "relative",
+  "gap-1",
+  "justify-center",
+  "items-center",
+  "min-h-12",
+  "px-8",
+  "pt-2",
+  "pb-3",
+  "font-daikinSerif",
+  "text-base",
+  "leading-[130%]",
+  "font-bold",
+  "focus-visible:outline-hidden",
+  "focus-visible:before:absolute",
+  "focus-visible:before:-inset-1",
+  "focus-visible:before:z-1",
+  "focus-visible:before:border-2",
+  "focus-visible:before:border-ddt-color-common-border-focus",
+  "text-(--color-primary)",
+  "bg-(--color-secondary)"
+];
+const cvaBaseVariants = {
+  variants: {
+    current: {
+      false: [
+        "link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+        "hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
+        "active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
+        "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
+        "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
+      ],
+      true: [
+        "link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+        "hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
+        "active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
+        "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+        "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-press)]",
+        "after:h-1",
+        "after:absolute",
+        "after:inset-0",
+        "after:top-auto",
+        "after:bg-ddt-color-common-brand-default"
+      ]
+    },
+    disabled: {
+      false: [],
+      true: [
+        "text-ddt-color-common-disabled",
+        "after:text-ddt-color-common-disabled",
+        "after:bg-ddt-color-common-disabled"
+      ]
+    }
+  }
+};
+const cvaLinkItem = cva(cvaBaseClasses, cvaBaseVariants);
+const cvaMenuItem = cva(cvaBaseClasses, cvaBaseVariants);
+let DaikinNavigationItem = class extends DDSElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.current = false;
+    this.href = null;
+    this.navigationItemAriaHaspopup = null;
+    this.navigationItemAriaExpanded = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  /**
+   * _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.type === "menu" || this.href == null || this.disabled) {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
+  render() {
+    switch (this.type) {
+      case "link": {
+        const linkDisabled = this.disabled || this.href == null;
+        return html`
+          <div role="listitem">
+            <a
+              href=${ifDefined(!linkDisabled ? this.href : void 0)}
+              class=${cvaLinkItem({
+          current: this.current,
+          disabled: linkDisabled
+        })}
+              role=${linkDisabled ? "link" : nothing}
+              aria-current=${ifDefined(this.current ? "page" : void 0)}
+              aria-disabled=${ifDefined(linkDisabled ? "true" : void 0)}
+              ><slot
+                name="left-icon"
+                class="icon-size-6 slotted:flex-none"
+              ></slot
+              ><span class="px-1"><slot class="text-nowrap"></slot></span
+            ></a>
+          </div>
+        `;
+      }
+      case "menu":
+        return html`
+          <div role="listitem">
+            <button
+              type="button"
+              class=${cvaMenuItem({
+          current: this.current,
+          disabled: this.disabled
+        })}
+              aria-current=${ifDefined(this.current ? "page" : void 0)}
+              aria-expanded=${ifDefined(this.navigationItemAriaExpanded)}
+              aria-haspopup=${ifDefined(this.navigationItemAriaHaspopup)}
+              ?disabled=${this.disabled}
+            >
+              <slot
+                name="left-icon"
+                class="icon-size-6 slotted:flex-none"
+              ></slot
+              ><span class="px-1"><slot class="text-nowrap"></slot></span
+              ><span
+                class="icon-[daikin--chevron-down] size-6 flex-none rotate-(--chevron-rotation)"
+              ></span>
+            </button>
+          </div>
+        `;
+    }
+  }
+  /**
+   * Focuses on the inner button or link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+DaikinNavigationItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: fit-content;
+
+      --chevron-rotation: 0deg;
+    }
+  `;
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "link",
+    isAllowedValue: oneOf(["link", "menu"])
+  })
+], DaikinNavigationItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinNavigationItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinNavigationItem.prototype, "current", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinNavigationItem.prototype, "href", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "navigation-item-aria-haspopup"
+  })
+], DaikinNavigationItem.prototype, "navigationItemAriaHaspopup", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "navigation-item-aria-expanded"
+  })
+], DaikinNavigationItem.prototype, "navigationItemAriaExpanded", 2);
+__decorateClass([
+  query("a,button")
+], DaikinNavigationItem.prototype, "_focusableElement", 2);
+DaikinNavigationItem = __decorateClass([
+  ddsElement("daikin-navigation-item")
+], DaikinNavigationItem);
+export {
+  DaikinNavigationItem
+};

package/dist/es/components/navigation-item/index.d.ts

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

package/dist/es/components/navigation-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinNavigationItem } from "./daikin-navigation-item.js";
+export {
+  DaikinNavigationItem
+};

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

@@ -35,9 +35,9 @@ const cvaPageButton = cva(
     "not-italic",
     "leading-6",
     "bg-clip-content",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
-    "focus-visible:outline-offset-[-2px]",
+    "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
@@ -104,10 +104,10 @@ const cvaChevronButton = cva([
   "enabled:hover:text-ddt-color-common-neutral-hover",
   "enabled:active:bg-ddt-color-common-surface-neutral-press",
   "enabled:active:text-ddt-color-common-neutral-press",
-  "disabled:!text-ddt-color-common-disabled",
-  "focus-visible:outline",
+  "disabled:text-ddt-color-common-disabled",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
-  "focus-visible:outline-offset-[-2px]",
+  "focus-visible:-outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus"
 ]);
 let DaikinPagination = class extends DDSElement {
@@ -151,7 +151,7 @@ let DaikinPagination = class extends DDSElement {
           ?disabled=${this.current === 1}
           @click=${() => this._gotoOffset(-1)}
         >
-          <span class="i-daikin-pagination-chevron-left w-4 h-4"></span>
+          <span class="icon-[daikin--pagination-chevron-left] w-4 h-4"></span>
         </button>
         ${repeat(
       pageArray,
@@ -195,7 +195,7 @@ let DaikinPagination = class extends DDSElement {
           ?disabled=${this.current === this.total}
           @click=${() => this._gotoOffset(1)}
         >
-          <span class="i-daikin-pagination-chevron-right w-4 h-4"></span>
+          <span class="icon-[daikin--pagination-chevron-right] w-4 h-4"></span>
         </button>
       </div>
     `;

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -31,7 +31,7 @@ const cvaBar = cva(
     variants: {
       variant: {
         inprogress: [
-          "after:w-[--bar-width]",
+          "after:w-(--bar-width)",
           "after:bg-ddt-color-common-brand-default"
         ],
         completed: ["after:w-full", "after:bg-ddt-color-common-success"],
@@ -66,14 +66,14 @@ const cvaBarContainer = cva(
           "after:size-4",
           "after:flex-none",
           "after:bg-ddt-color-common-success",
-          "after:i-daikin-success"
+          "after:icon-[daikin--success]"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
           "after:flex-none",
           "after:text-ddt-color-common-danger-default",
-          "after:i-daikin-error"
+          "after:icon-[daikin--error]"
         ]
       }
     }

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -25,7 +25,7 @@ const cvaContainer = cva(
     "w-full",
     "text-ddt-color-common-text-primary",
     "pt-2",
-    "border-t-[0.25rem]",
+    "border-t-4",
     "font-daikinSerif"
   ],
   {
@@ -54,7 +54,7 @@ let DaikinProgressIndicatorItem = class extends DDSElement {
       ${this.status === "finished" ? html`
             <span
               role="img"
-              class="flex-none size-4 i-daikin-success text-ddt-color-common-brand-default"
+              class="flex-none size-4 icon-[daikin--success] text-ddt-color-common-brand-default"
               aria-label="Completed"
             ></span>
           ` : nothing}

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

@@ -26,20 +26,20 @@ const RADIO_CLASS_NAME = cva([
   "rounded-full",
   "relative",
   "appearance-none",
-  "focus-visible:outline",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "unchecked:border-2",
   "enabled:unchecked:border-ddt-color-common-neutral-default",
-  "enabled:unchecked:group-hover:border-ddt-color-common-neutral-hover",
-  "enabled:unchecked:group-active:border-ddt-color-common-neutral-press",
-  "enabled:unchecked:group-hover:bg-ddt-color-common-surface-neutral-hover",
-  "enabled:unchecked:group-active:bg-ddt-color-common-surface-neutral-press",
+  "group-hover:unchecked:enabled:border-ddt-color-common-neutral-hover",
+  "group-active:unchecked:enabled:border-ddt-color-common-neutral-press",
+  "group-hover:unchecked:enabled:bg-ddt-color-common-surface-neutral-hover",
+  "group-active:unchecked:enabled:bg-ddt-color-common-surface-neutral-press",
   "checked:border-[5px]",
   "enabled:checked:border-ddt-color-common-brand-default",
-  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
-  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+  "group-active:checked:enabled:border-ddt-color-common-brand-press",
   "disabled:border-ddt-color-common-disabled"
 ])();
 const cvaLabel = cva([], {

package/dist/es/components/radio-group/daikin-radio-group.d.ts

@@ -3,7 +3,7 @@ import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 declare const cvaRadioGroup: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RadioGroupProps = MergeVariantProps<typeof cvaRadioGroup>;
 /**