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

package/dist/THIRDPARTY.txt

@@ -0,0 +1 @@
+No third-party libraries are included in the final bundle, so the list appears empty.

package/dist/cjs/base/dds-element.cjs

@@ -84,6 +84,6 @@ const _DDSElement = class _DDSElement extends lit.LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.4.1";
+_DDSElement.version = "1.5.0";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs/base/dds-navigable.d.cts

@@ -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/cjs/base/index.d.cts

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
@@ -18,9 +19,19 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaAccordion = classVarianceAuthority.cva(["w-full"], {
+  variants: {
+    border: {
+      vertical: ["border-y border-ddt-color-divider"],
+      all: ["border border-ddt-color-divider"],
+      none: []
+    }
+  }
+});
 exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this.border = "vertical";
     this.openItems = [];
     this.exclusive = false;
   }
@@ -51,7 +62,7 @@ exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
     }
   }
   render() {
-    return lit.html`<div class="w-full">
+    return lit.html`<div class=${cvaAccordion({ border: this.border })}>
       <slot
         @accordion-move-focus=${this._handleMoveFocus}
         @toggle=${this._handleToggle}
@@ -67,15 +78,27 @@ exports.DaikinAccordion.styles = lit.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([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "border",
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "vertical",
+      "all",
+      "none"
+    ])
+  })
+], exports.DaikinAccordion.prototype, "border", 2);
 __decorateClass([
   ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinAccordion.prototype, "openItems", 2);

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

@@ -1,4 +1,9 @@
 import { DDSElement } from "../../base/index.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
+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.cjs";
  */
 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/cjs/components/accordion-item/daikin-accordion-item.cjs

@@ -30,13 +30,13 @@ const cvaSummary = classVarianceAuthority.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"
   ],
   {
@@ -59,7 +59,7 @@ const cvaSummary = classVarianceAuthority.cva(
     }
   }
 );
-const cvaContent = classVarianceAuthority.cva(["grid", "duration-[250ms]", "ease-in-out"], {
+const cvaContent = classVarianceAuthority.cva(["grid", "duration-250", "ease-in-out"], {
   variants: {
     open: {
       false: ["grid-rows-[0fr]"],
@@ -128,7 +128,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
         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/cjs/components/avatar/daikin-avatar.cjs

@@ -28,7 +28,7 @@ const cvaWrapper = classVarianceAuthority.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"
@@ -53,10 +53,10 @@ const cvaWrapper = classVarianceAuthority.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"
         ]
@@ -78,10 +78,28 @@ exports.DaikinAvatar = class DaikinAvatar extends ddsElement.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 = lit.html`
       <span
-        class="i-daikin-profile"
+        class="icon-[daikin--profile] size-10"
       >
       </span>
     </daikin-icon>`;

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 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/cjs/components/badge/daikin-badge.cjs

@@ -32,8 +32,8 @@ const cvaBadge = classVarianceAuthority.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/cjs/components/breadcrumb/daikin-breadcrumb.cjs

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

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

@@ -31,7 +31,7 @@ const LINK_CLASS_NAME = classVarianceAuthority.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"
@@ -43,6 +43,26 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
     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" ? lit.html`<daikin-link
@@ -56,6 +76,8 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
               type="button"
               class=${LINK_CLASS_NAME}
               aria-label="Show more items"
+              aria-haspopup=${ifDefined_js.ifDefined(this.breadcrumbAriaHaspopup)}
+              aria-expanded=${ifDefined_js.ifDefined(this.breadcrumbAriaExpanded)}
             >
               ...
             </button>` : lit.html`<a
@@ -102,6 +124,20 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-haspopup"
+  })
+], exports.DaikinBreadcrumbItem.prototype, "breadcrumbAriaHaspopup", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-expanded"
+  })
+], exports.DaikinBreadcrumbItem.prototype, "breadcrumbAriaExpanded", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
   decorators.ddsElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);

package/dist/cjs/components/breadcrumb-item/daikin-breadcrumb-item.d.cts

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 /**
  * 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.cjs";
  * </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/cjs/components/button/daikin-button.cjs

@@ -28,44 +28,44 @@ const cvaButton = classVarianceAuthority.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"],
@@ -104,6 +104,24 @@ exports.DaikinButton = class DaikinButton extends ddsFormElement.DDSFormSubmitEl
       }
     });
   }
+  /**
+   * _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,

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

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

@@ -54,18 +54,18 @@ const cvaContentButton = classVarianceAuthority.cva(
     "justify-center",
     "rounded-full",
     "text-sm",
-    "outline",
+    "outline-solid",
     "outline-2",
     "outline-offset-2",
     "outline-transparent",
     "focus-visible:outline-ddt-color-common-border-focus",
-    "enabled:bg-[var(--color-primary)]",
+    "enabled:bg-(--color-primary)",
     "disabled:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       date: {
-        false: ["w-[calc((100%_-_3rem)/3)]", "h-8", "px-2"],
+        false: ["w-[calc((100%-3rem)/3)]", "h-8", "px-2"],
         true: ["size-8"]
       },
       variant: {
@@ -73,14 +73,14 @@ const cvaContentButton = classVarianceAuthority.cva(
           "enabled:text-ddt-color-common-neutral-default",
           "enabled:hover:text-ddt-color-common-neutral-hover",
           "enabled:active:text-ddt-color-common-neutral-press",
-          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
-          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+          "enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
         ],
         selected: [
           "enabled:text-ddt-color-common-text-inverse",
-          "var-color-ddt-color-common-brand-default/color-primary",
-          "hover:var-color-ddt-color-common-brand-hover/color-primary",
-          "active:var-color-ddt-color-common-brand-press/color-primary"
+          "[--color-primary:var(--dds-color-common-brand-default)]",
+          "hover:[--color-primary:var(--dds-color-common-brand-hover)]",
+          "active:[--color-primary:var(--dds-color-common-brand-press)]"
         ],
         today: [
           "enabled:text-ddt-color-common-neutral-default",
@@ -88,15 +88,15 @@ const cvaContentButton = classVarianceAuthority.cva(
           "enabled:active:text-ddt-color-common-neutral-press",
           "enabled:border",
           "enabled:border-ddt-color-common-neutral-default",
-          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
-          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+          "enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
         ]
       }
     }
   }
 );
 function getToday() {
-  return calendarCommon.normalizeDate(/* @__PURE__ */ new Date());
+  return calendarCommon.parseDateFromProperty(calendarCommon.getTodayForProperty());
 }
 function getNextFocusDateByKey(date, event) {
   const cloned = calendarCommon.cloneDate(date);
@@ -450,7 +450,7 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
       day: this._createDatePicker
     }[view].call(this, renderState);
     return lit.html`<div
-      class="flex items-stretch flex-col gap-2 w-[17.5rem] h-max pt-3 bg-ddt-color-common-background-default outline outline-1 -outline-offset-1 outline-ddt-color-divider rounded font-daikinSerif"
+      class="flex items-stretch flex-col gap-2 w-70 h-max pt-3 bg-ddt-color-common-background-default outline-solid outline-1 -outline-offset-1 outline-ddt-color-divider rounded-sm font-daikinSerif"
     >
       <div class="flex justify-between items-center pl-4 pr-3">
         <div class="flex items-center gap-2">

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

@@ -5,6 +5,7 @@ import { DDSElement } from "../../base/index.cjs";
  * Hierarchy:
  * - `daikin-card` > `daikin-card-header`
  * - `daikin-card` > `daikin-card-footer`
+ * - `daikin-card` > `daikin-empty-state`
  *
  * @slot - A slot for card header, body, card footer. Place `daikin-card-header`, custom body content, `daikin-card-footer` here in order.
  *

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

@@ -35,8 +35,8 @@ const cvaButton = classVarianceAuthority.cva(
   {
     variants: {
       intent: {
-        previous: ["i-daikin-chevron-left"],
-        next: ["i-daikin-chevron-right"]
+        previous: ["icon-[daikin--chevron-left]"],
+        next: ["icon-[daikin--chevron-right]"]
       }
     }
   }
@@ -58,7 +58,7 @@ const INDICATOR_CLASS_NAME = classVarianceAuthority.cva([
   "aria-selected:after:bg-ddt-color-common-brand-default",
   "aria-selected:after:absolute",
   "aria-selected:after:rounded-full",
-  "aria-selected:focus-visible:after:outline",
+  "aria-selected:focus-visible:after:outline-solid",
   "aria-selected:focus-visible:after:outline-1",
   "aria-selected:focus-visible:after:outline-offset-1",
   "aria-selected:focus-visible:after:outline-ddt-color-common-border-focus"
@@ -145,11 +145,11 @@ exports.DaikinCarousel = class DaikinCarousel extends ddsElement.DDSElement {
           <span class=${cvaButton({ intent: "previous" })}></span>
         </daikin-icon-button>
         <div
-          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus [container-type:inline-size]"
+          class="w-full overflow-clip relative focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus @container"
           aria-live="polite"
         >
           <div
-            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-(--ddc-transition-duration)"
           >
             <slot
               class="slotted:w-[calc(100%/var(--total))]"