@daikin-oss/design-system-web-components 1.5.1 → 1.5.2-next.0

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

@@ -1,9 +1,4 @@
 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.
@@ -47,7 +42,7 @@ export declare class DaikinAccordion extends DDSElement {
      *
      * @default "vertical"
      */
-    border: AccordionVariantProps["border"];
+    border: "vertical" | "all" | "none";
     /**
      * 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,4 +1,3 @@
-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";
@@ -17,15 +16,6 @@ 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);
@@ -67,7 +57,7 @@ let DaikinAccordion = class extends DDSElement {
     }
   }
   render() {
-    return html`<div class=${cvaAccordion({ border: this.border })}>
+    return html`<div class="w-full">
       <slot
         @accordion-move-focus=${this._handleMoveFocus}
         @toggle=${this._handleToggle}
@@ -81,6 +71,34 @@ DaikinAccordion.styles = css`
 
     :host {
       min-width: 10rem;
+      position: relative;
+    }
+
+    :host([border="vertical"])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      inset: 0px;
+      border-top: 1px solid var(--dds-color-divider) !important;
+      border-bottom: 1px solid var(--dds-color-divider) !important;
+      z-index: 1;
+      isolation: isolate;
+      pointer-events: none;
+    }
+
+    :host([border="all"])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      inset: 0px;
+      border: 1px solid var(--dds-color-divider) !important;
+      z-index: 1;
+      isolation: isolate;
+      pointer-events: none;
     }
 
     :host(:not([border="none"])) ::slotted(daikin-accordion-item) {

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

@@ -159,6 +159,9 @@ DaikinAccordionItem.styles = css`
     :host::before {
       content: "";
       display: var(--divider-top-display, none);
+      position: absolute;
+      inset: 0;
+      bottom: auto;
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
@@ -167,6 +170,9 @@ DaikinAccordionItem.styles = css`
     :host::after {
       content: "";
       display: var(--divider-bottom-display, none);
+      position: absolute;
+      inset: 0;
+      top: auto;
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);

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

@@ -60,6 +60,13 @@ export declare class DaikinBreadcrumb extends DDSElement {
      * Whether or not to change the color of visited links.
      */
     showVisited: boolean;
+    /**
+     * The aria-label of the breadcrumb.
+     * It's recommended to provide a more specific aria-label for the breadcrumb, especially when there are multiple breadcrumb components on the same page, to help users distinguish between them.
+     *
+     * @default "Breadcrumb"
+     */
+    breadcrumbAriaLabel: string;
     private readonly _items;
     private readonly _menus;
     private _rafId;

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

@@ -56,7 +56,10 @@ let DaikinBreadcrumb = class extends DDSElement {
     this._updateBreadcrumbs();
   }
   render() {
-    return html`<nav class="inline-block" aria-label="Breadcrumbs">
+    return html`<nav
+      class="inline-block"
+      aria-label=${this.breadcrumbAriaLabel}
+    >
       <div class="inline-block" role="list">
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
@@ -72,6 +75,14 @@ DaikinBreadcrumb.styles = css`
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], DaikinBreadcrumb.prototype, "showVisited", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-label",
+    fallbackValue: "Breadcrumb"
+  })
+], DaikinBreadcrumb.prototype, "breadcrumbAriaLabel", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], DaikinBreadcrumb.prototype, "_items", 2);

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

@@ -61,6 +61,12 @@ export declare class DaikinBreadcrumbItem extends DDSElement implements DDSNavig
      * 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;
+    private readonly _focusableRef;
+    /**
+     * Focuses on the inner focusable element.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     /**
      * _Internal use._
      * Returns the navigation target information.

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

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
 import { property, oneOf } from "../../base/dds-property.js";
@@ -43,6 +44,15 @@ let DaikinBreadcrumbItem = class extends DDSElement {
     this.appendDivider = false;
     this.breadcrumbAriaHaspopup = null;
     this.breadcrumbAriaExpanded = null;
+    this._focusableRef = createRef();
+  }
+  /**
+   * Focuses on the inner focusable element.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
   }
   /**
    * _Internal use._
@@ -64,6 +74,7 @@ let DaikinBreadcrumbItem = class extends DDSElement {
   }
   render() {
     const link = this.variant === "normal" ? html`<daikin-link
+            ${ref(this._focusableRef)}
             href=${ifDefined(this.href)}
             target=${ifDefined(this.target)}
             ?no-underline=${true}
@@ -71,6 +82,7 @@ let DaikinBreadcrumbItem = class extends DDSElement {
           >
             <slot></slot>
           </daikin-link>` : this.variant === "ellipsis" ? html`<button
+              ${ref(this._focusableRef)}
               type="button"
               class=${LINK_CLASS_NAME}
               aria-label="Show more items"

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

@@ -66,11 +66,58 @@ const cvaButton = cva(
         ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
       },
       size: {
-        small: ["px-2", "text-sm"],
-        medium: ["px-3", "text-base"],
-        large: ["px-4", "text-xl"]
+        small: ["text-sm"],
+        medium: ["text-base"],
+        large: ["text-xl"]
       }
-    }
+    },
+    compoundVariants: [
+      {
+        size: "small",
+        variant: "fill",
+        class: "px-2"
+      },
+      {
+        size: "small",
+        variant: "ghost",
+        class: "px-2"
+      },
+      {
+        size: "small",
+        variant: "outline",
+        class: "px-1.75"
+      },
+      {
+        size: "medium",
+        variant: "fill",
+        class: "px-3"
+      },
+      {
+        size: "medium",
+        variant: "ghost",
+        class: "px-3"
+      },
+      {
+        size: "medium",
+        variant: "outline",
+        class: "px-2.75"
+      },
+      {
+        size: "large",
+        variant: "fill",
+        class: "px-4"
+      },
+      {
+        size: "large",
+        variant: "ghost",
+        class: "px-4"
+      },
+      {
+        size: "large",
+        variant: "outline",
+        class: "px-3.75"
+      }
+    ]
   }
 );
 const cvaIcon = cva(["slotted:flex-none"], {

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

@@ -22,15 +22,14 @@ const cvaContainer = cva(
     "flex-col",
     "gap-4",
     "size-full",
-    "p-3",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
   ],
   {
     variants: {
       outline: {
-        true: ["border", "border-ddt-color-divider"],
-        false: []
+        true: ["border", "border-ddt-color-divider", "p-2.75"],
+        false: ["p-3"]
       }
     }
   }

package/dist/es-dev/components/card-header/daikin-card-header.js

@@ -21,7 +21,8 @@ const cvaTitle = cva([
   "text-base",
   "leading-[1.3]",
   "not-italic",
-  "font-bold"
+  "font-bold",
+  "natural-break"
 ])();
 const cvaDescription = cva([
   "flex-none",
@@ -30,7 +31,8 @@ const cvaDescription = cva([
   "text-sm",
   "leading-normal",
   "not-italic",
-  "font-normal"
+  "font-normal",
+  "natural-break"
 ])();
 let DaikinCardHeader = class extends DDSElement {
   render() {

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

@@ -59,6 +59,12 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     disabledByParent: boolean;
+    private readonly _inputRef;
+    /**
+     * Focuses on the inner checkbox.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     get checked(): boolean;
     private get _labelHidden();
     /**

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

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
 import { property, oneOf } from "../../base/dds-property.js";
@@ -62,7 +63,7 @@ const CHECKBOX_CLASS_NAME = cva([
   "disabled:checked:bg-ddt-color-common-disabled",
   "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
-const cvaLabel = cva([], {
+const cvaLabel = cva(["natural-break"], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
@@ -79,6 +80,15 @@ let DaikinCheckbox = class extends DDSFormElement {
     super(...arguments);
     this.disabled = false;
     this.disabledByParent = false;
+    this._inputRef = createRef();
+  }
+  /**
+   * Focuses on the inner checkbox.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
   }
   get checked() {
     return this.checkState === "checked";
@@ -120,6 +130,7 @@ let DaikinCheckbox = class extends DDSFormElement {
     >
       <span class="p-2">
         <input
+          ${ref(this._inputRef)}
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${ifDefined(this.getBackingProperty("name"))}

package/dist/es-dev/components/date-picker/daikin-date-picker.d.ts

@@ -104,6 +104,11 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _updateInputSelection;
     private _updateSelection;
     label: string | null;
+    /**
+     * Focuses on the inner date input.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

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

@@ -491,6 +491,14 @@ let DaikinDatePicker = class extends DDSFormElement {
       this._currentSelection = itemInfo.type;
     }
   }
+  /**
+   * Focuses on the inner date input.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._dateInputElement.value) == null ? void 0 : _a.focus(options);
+  }
   render() {
     const min = this._min;
     const max = this._max;

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

@@ -4,6 +4,7 @@ import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaIconButton: (props?: ({
     color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
+    size?: "s" | "m" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
 /**

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

@@ -28,7 +28,6 @@ const cvaIconButton = cva(
     "font-daikinSerif",
     "font-bold",
     "rounded-sm",
-    "p-1",
     "tracking-wide",
     "text-nowrap",
     "focus-visible:outline-solid",
@@ -72,8 +71,44 @@ const cvaIconButton = cva(
           "border-(--color-primary)"
         ],
         ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
+      },
+      size: {
+        s: [],
+        m: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        size: "s",
+        variant: "fill",
+        class: "p-1"
+      },
+      {
+        size: "s",
+        variant: "ghost",
+        class: "p-1"
+      },
+      {
+        size: "s",
+        variant: "outline",
+        class: "p-0.75"
+      },
+      {
+        size: "m",
+        variant: "fill",
+        class: "p-2"
+      },
+      {
+        size: "m",
+        variant: "ghost",
+        class: "p-2"
+      },
+      {
+        size: "m",
+        variant: "outline",
+        class: "p-1.75"
+      }
+    ]
   }
 );
 let DaikinIconButton = class extends DDSFormSubmitElement {
@@ -118,7 +153,8 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
   render() {
     const iconButtonCN = cvaIconButton({
       variant: this.variant,
-      color: this.color
+      color: this.color,
+      size: this.size
     });
     if (this.type === "link") {
       const linkDisabled = this.disabled || this.href == null;

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

@@ -45,6 +45,12 @@ export declare class DaikinLink extends DDSElement implements DDSNavigable {
      * Whether or not to display an underline.
      */
     noUnderline: boolean;
+    private readonly _anchorRef;
+    /**
+     * Focuses on the inner anchor.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     /**
      * _Internal use._
      * Returns the navigation target information.

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

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
 import { property } from "../../base/dds-property.js";
@@ -21,6 +22,7 @@ const LINK_CLASS_NAME = cva([
   "font-daikinSerif",
   "leading-[130%]",
   "relative",
+  "natural-break",
   "link-enabled:text-ddt-color-link-text-default",
   "hover:link-enabled:text-ddt-color-link-text-hover",
   "hover:link-enabled:bg-ddt-color-common-surface-brand-hover",
@@ -53,6 +55,15 @@ let DaikinLink = class extends DDSElement {
     this.showVisited = false;
     this.size = "medium";
     this.noUnderline = false;
+    this._anchorRef = createRef();
+  }
+  /**
+   * Focuses on the inner anchor.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._anchorRef.value) == null ? void 0 : _a.focus(options);
   }
   /**
    * _Internal use._
@@ -74,6 +85,7 @@ let DaikinLink = class extends DDSElement {
   }
   render() {
     return html`<a
+      ${ref(this._anchorRef)}
       class=${LINK_CLASS_NAME}
       href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
       target=${ifDefined(this.target ?? void 0)}

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

@@ -75,6 +75,17 @@ export declare class DaikinMenu extends DDSElement {
     trigger: "click" | "manual";
     private _autoUpdateController;
     private _hostStyles;
+    /**
+     * Controls whether the floating-ui `flip()` and `shift()` middleware are active.
+     *
+     * - **`flip()`** — When there is insufficient space on the side specified by `placement`, the menu
+     *   is automatically repositioned to the opposite side (e.g. `bottom` → `top`).
+     * - **`shift()`** — Keeps the menu within the viewport by nudging it along the cross-axis when it
+     *   would otherwise overflow the screen edge.
+     *
+     * Both middlewares are disabled when the trigger element is a `daikin-navigation-item`.
+     */
+    private _staticPlacement;
     /**
      * Exposes the trigger element contained within the menu to the outside of the component.
      *

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

@@ -1,7 +1,7 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements, state } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
@@ -48,6 +48,7 @@ let DaikinMenu = class extends DDSElement {
     this.open = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient ? window.getComputedStyle(this) : null;
+    this._staticPlacement = false;
   }
   static registerCSSCustomProperties() {
     if (!isClient) {
@@ -85,6 +86,7 @@ let DaikinMenu = class extends DDSElement {
    * These are typically set once when the slot changes and do not change frequently.
    */
   _reflectStaticProperties() {
+    this._staticPlacement = false;
     for (const control of this._controls) {
       if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
         control.buttonAriaHaspopup = "menu";
@@ -92,6 +94,7 @@ let DaikinMenu = class extends DDSElement {
         control.avatarAriaHaspopup = "menu";
       } else if (control instanceof DaikinNavigationItem && control.type === "menu") {
         control.navigationItemAriaHaspopup = "menu";
+        this._staticPlacement = true;
       } else if (control instanceof DaikinBreadcrumbItem) {
         control.breadcrumbAriaHaspopup = "menu";
       }
@@ -165,6 +168,7 @@ let DaikinMenu = class extends DDSElement {
         <slot
           @click=${this._handleTriggerClick}
           @touchend=${this._handleTouchEnd}
+          @slotchange=${this._handleSlotChange}
         ></slot>
       </div>
       <span
@@ -182,11 +186,13 @@ let DaikinMenu = class extends DDSElement {
       ${// Activate auto update only when the menu is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     guard(
-      [this.open, this.placement, spacing],
+      [this.open, this.placement, spacing, this._staticPlacement],
       () => this._autoUpdateController.directive(
         {
           placement: this.placement,
-          middleware: [offset({ mainAxis: spacing }), flip(), shift()]
+          // flip() and shift() are disabled when the trigger is a daikin-navigation-item
+          // (see _staticPlacement for the full explanation).
+          middleware: this._staticPlacement ? [offset({ mainAxis: spacing })] : [offset({ mainAxis: spacing }), flip(), shift()]
         },
         this.open
       )
@@ -263,6 +269,9 @@ __decorateClass([
     isAllowedValue: oneOf(["click", "manual"])
   })
 ], DaikinMenu.prototype, "trigger", 2);
+__decorateClass([
+  state()
+], DaikinMenu.prototype, "_staticPlacement", 2);
 DaikinMenu = __decorateClass([
   ddsElement("daikin-menu")
 ], DaikinMenu);

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

@@ -56,7 +56,8 @@ const cvaBarContainer = cva(
     "items-center",
     "text-ddt-color-common-text-primary",
     "leading-[130%]",
-    "font-bold"
+    "font-bold",
+    "natural-break"
   ],
   {
     variants: {
@@ -79,7 +80,7 @@ const cvaBarContainer = cva(
     }
   }
 );
-const cvaHelper = cva(["text-sm", "leading-[130%]"], {
+const cvaHelper = cva(["text-sm", "leading-[130%]", "natural-break"], {
   variants: {
     variant: {
       inprogress: ["text-ddt-color-common-text-secondary"],

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

@@ -47,7 +47,7 @@ let DaikinProgressIndicatorItem = class extends DDSElement {
       this.status === "inprogress" ? "step" : void 0
     )}
     >
-      <div class="flex flex-col gap-1 w-full overflow-auto">
+      <div class="flex flex-col gap-1 w-full overflow-auto natural-break">
         <slot class="font-bold leading-[130%]"></slot>
         <slot name="description" class="text-sm leading-[130%]"></slot>
       </div>

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

@@ -42,7 +42,7 @@ const RADIO_CLASS_NAME = cva([
   "group-active:checked:enabled:border-ddt-color-common-brand-press",
   "disabled:border-ddt-color-common-disabled"
 ])();
-const cvaLabel = cva([], {
+const cvaLabel = cva(["natural-break"], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],

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

@@ -72,6 +72,11 @@ export declare class DaikinSlider extends DDSFormElement {
     private _calcMousePositionRatio;
     private _startDrag;
     private _startTouch;
+    /**
+     * Focuses on the inner slider thumb.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }

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

@@ -192,6 +192,14 @@ let DaikinSlider = class extends DDSFormElement {
     (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
     this._handleDrag(event);
   }
+  /**
+   * Focuses on the inner slider thumb.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._thumbRef.value) == null ? void 0 : _a.focus(options);
+  }
   render() {
     const progress = this._progress;
     return html`