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

package/dist/es/utils/calendar-common.js

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

package/dist/es/utils/notification-common.d.ts

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

package/dist/es-dev/base/dds-element.js

@@ -92,7 +92,7 @@ const _DDSElement = class _DDSElement extends LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.4.1";
+_DDSElement.version = "1.5.0";
 let DDSElement = _DDSElement;
 export {
   DDSElement

package/dist/es-dev/base/dds-navigable.d.ts

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

package/dist/es-dev/base/index.d.ts

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

package/dist/es-dev/components/accordion/daikin-accordion.d.ts

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

package/dist/es-dev/components/accordion/daikin-accordion.js

@@ -1,8 +1,9 @@
+import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.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";
@@ -16,9 +17,19 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaAccordion = cva(["w-full"], {
+  variants: {
+    border: {
+      vertical: ["border-y border-ddt-color-divider"],
+      all: ["border border-ddt-color-divider"],
+      none: []
+    }
+  }
+});
 let DaikinAccordion = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this.border = "vertical";
     this.openItems = [];
     this.exclusive = false;
   }
@@ -56,7 +67,7 @@ let DaikinAccordion = class extends DDSElement {
     }
   }
   render() {
-    return html`<div class="w-full">
+    return html`<div class=${cvaAccordion({ border: this.border })}>
       <slot
         @accordion-move-focus=${this._handleMoveFocus}
         @toggle=${this._handleToggle}
@@ -72,15 +83,27 @@ DaikinAccordion.styles = css`
       min-width: 10rem;
     }
 
-    ::slotted(daikin-accordion-item) {
+    :host(:not([border="none"])) ::slotted(daikin-accordion-item) {
       --divider-top-display: block;
-      --divider-bottom-display: none;
     }
 
-    ::slotted(daikin-accordion-item:last-child) {
-      --divider-bottom-display: block;
+    :host(:not([border="none"])) ::slotted(daikin-accordion-item:first-child) {
+      --divider-top-display: none;
     }
   `;
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "border",
+    fallbackValue: "vertical",
+    isAllowedValue: oneOf([
+      "vertical",
+      "all",
+      "none"
+    ])
+  })
+], DaikinAccordion.prototype, "border", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], DaikinAccordion.prototype, "openItems", 2);

package/dist/es-dev/components/accordion-item/daikin-accordion-item.js

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

package/dist/es-dev/components/avatar/daikin-avatar.d.ts

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaWrapper: (props?: ({
     type?: "button" | "icon" | "link" | null | undefined;
@@ -19,7 +19,7 @@ type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
  * <daikin-avatar></daikin-avatar>
  * ```
  */
-export declare class DaikinAvatar extends DDSElement {
+export declare class DaikinAvatar extends DDSElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Replace the wrapping element.
@@ -52,8 +52,18 @@ export declare class DaikinAvatar extends DDSElement {
      * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
     avatarAriaExpanded: "true" | "false" | "undefined" | null;
-    private _focusableElement;
+    private readonly _focusableElement;
     constructor();
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button or link.

package/dist/es-dev/components/avatar/daikin-avatar.js

@@ -26,7 +26,7 @@ const cvaWrapper = cva(
     "overflow-hidden",
     "box-border",
     "size-full",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
@@ -51,10 +51,10 @@ const cvaWrapper = cva(
         link: [
           "link-enabled:bg-ddt-color-common-neutral-default",
           "link-enabled:text-ddt-color-common-surface-default",
-          "link-enabled:hover:bg-ddt-color-common-neutral-hover",
-          "link-enabled:hover:text-ddt-color-common-surface-hover",
-          "link-enabled:active:bg-ddt-color-common-neutral-press",
-          "link-enabled:active:text-ddt-color-common-surface-press",
+          "hover:link-enabled:bg-ddt-color-common-neutral-hover",
+          "hover:link-enabled:text-ddt-color-common-surface-hover",
+          "active:link-enabled:bg-ddt-color-common-neutral-press",
+          "active:link-enabled:text-ddt-color-common-surface-press",
           "link-disabled:bg-ddt-color-common-disabled",
           "link-disabled:text-ddt-color-common-surface-default"
         ]
@@ -76,10 +76,28 @@ let DaikinAvatar = class extends DDSElement {
       }
     });
   }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null || this.disabled || this.type !== "link") {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
   render() {
     const icon = html`
       <span
-        class="i-daikin-profile"
+        class="icon-[daikin--profile] size-10"
       >
       </span>
     </daikin-icon>`;

package/dist/es-dev/components/badge/daikin-badge.js

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

package/dist/es-dev/components/breadcrumb/daikin-breadcrumb.js

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

package/dist/es-dev/components/breadcrumb-item/daikin-breadcrumb-item.d.ts

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
 /**
  * The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
  *
@@ -20,8 +20,8 @@ import { DDSElement } from "../../base/index.js";
  * </daikin-breadcrumb-item>
  * ```
  */
-export declare class DaikinBreadcrumbItem extends DDSElement {
-    static styles: import('lit').CSSResult;
+export declare class DaikinBreadcrumbItem extends DDSElement implements DDSNavigable {
+    static readonly styles: import('lit').CSSResult;
     /**
      * Specify link href.
      */
@@ -51,6 +51,26 @@ export declare class DaikinBreadcrumbItem extends DDSElement {
      * @private
      */
     appendDivider: boolean;
+    /**
+     * The aria-haspopup of the breadcrumb item when `variant="ellipsis"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `breadcrumbAriaHaspopup="menu"`.
+     */
+    breadcrumbAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of breadcrumb item when `variant="ellipsis"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    breadcrumbAriaExpanded: "true" | "false" | "undefined" | null;
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/es-dev/components/breadcrumb-item/daikin-breadcrumb-item.js

@@ -29,7 +29,7 @@ const LINK_CLASS_NAME = cva([
   "hover:bg-ddt-color-common-surface-brand-hover",
   "active:text-ddt-color-link-text-press",
   "active:bg-ddt-color-common-surface-brand-press",
-  "focus-visible:outline",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "focus-visible:outline-offset-2"
@@ -41,6 +41,26 @@ let DaikinBreadcrumbItem = class extends DDSElement {
     this.target = null;
     this.showVisited = false;
     this.appendDivider = false;
+    this.breadcrumbAriaHaspopup = null;
+    this.breadcrumbAriaExpanded = null;
+  }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null || this.variant !== "normal") {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: this.target
+    };
   }
   render() {
     const link = this.variant === "normal" ? html`<daikin-link
@@ -54,6 +74,8 @@ let DaikinBreadcrumbItem = class extends DDSElement {
               type="button"
               class=${LINK_CLASS_NAME}
               aria-label="Show more items"
+              aria-haspopup=${ifDefined(this.breadcrumbAriaHaspopup)}
+              aria-expanded=${ifDefined(this.breadcrumbAriaExpanded)}
             >
               ...
             </button>` : html`<a
@@ -100,6 +122,20 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], DaikinBreadcrumbItem.prototype, "appendDivider", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-haspopup"
+  })
+], DaikinBreadcrumbItem.prototype, "breadcrumbAriaHaspopup", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-expanded"
+  })
+], DaikinBreadcrumbItem.prototype, "breadcrumbAriaExpanded", 2);
 DaikinBreadcrumbItem = __decorateClass([
   ddsElement("daikin-breadcrumb-item")
 ], DaikinBreadcrumbItem);

package/dist/es-dev/components/button/daikin-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 cvaButton: (props?: ({
@@ -35,7 +35,7 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
  * </daikin-button>
  * ```
  */
-export declare class DaikinButton extends DDSFormSubmitElement {
+export declare class DaikinButton extends DDSFormSubmitElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -91,8 +91,18 @@ export declare class DaikinButton extends DDSFormSubmitElement {
      * This is useful when the button is part of a composite widget and accessible via other keys.
      */
     buttonTabIndex: number;
-    private _focusableElement;
+    private readonly _focusableElement;
     constructor();
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button or link.

package/dist/es-dev/components/button/daikin-button.js

@@ -26,44 +26,44 @@ const cvaButton = cva(
     "size-full",
     "font-daikinSerif",
     "font-bold",
-    "rounded",
+    "rounded-sm",
     "tracking-wide",
     "text-nowrap",
     "leading-[130%]",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus",
-    "var-color-transparent/color-secondary",
-    "link-disabled:var-color-ddt-color-common-disabled/color-primary"
+    "[--color-secondary:transparent]",
+    "link-disabled:[--color-primary:var(--dds-color-common-disabled)]"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-ddt-color-common-brand-default/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-brand-hover/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-surface-brand-hover/color-secondary",
-          "link-enabled:active:var-color-ddt-color-common-brand-press/color-primary",
-          "link-enabled:active:var-color-ddt-color-common-surface-brand-press/color-secondary"
+          "link-enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+          "hover:link-enabled:[--color-primary:var(--dds-color-common-brand-hover)]",
+          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+          "active:link-enabled:[--color-primary:var(--dds-color-common-brand-press)]",
+          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-press)]"
         ],
         danger: [
-          "link-enabled:var-color-ddt-color-common-danger-default/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-danger-hover/color-primary",
-          "link-enabled:hover:var-color-ddt-color-common-surface-danger-hover/color-secondary",
-          "link-enabled:active:var-color-ddt-color-common-danger-press/color-primary",
-          "link-enabled:active:var-color-ddt-color-common-surface-danger-press/color-secondary"
+          "link-enabled:[--color-primary:var(--dds-color-common-danger-default)]",
+          "hover:link-enabled:[--color-primary:var(--dds-color-common-danger-hover)]",
+          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-hover)]",
+          "active:link-enabled:[--color-primary:var(--dds-color-common-danger-press)]",
+          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-press)]"
         ]
       },
       variant: {
-        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-(--color-primary)"],
         outline: [
           "border",
-          "text-[--color-primary]",
-          "bg-[--color-secondary]",
-          "border-[--color-primary]"
+          "text-(--color-primary)",
+          "bg-(--color-secondary)",
+          "border-(--color-primary)"
         ],
-        ghost: ["text-[--color-primary]", "bg-[--color-secondary]"]
+        ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
       },
       size: {
         small: ["px-2", "text-sm"],
@@ -102,6 +102,24 @@ let DaikinButton = class extends DDSFormSubmitElement {
       }
     });
   }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.href == null || this.disabled || this.type !== "link") {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
   render() {
     const className = cvaButton({
       variant: this.variant,