@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs-dev/utils/calendar-common.cjs

@@ -10,8 +10,12 @@ const cvaIconButton = classVarianceAuthority.cva(
       intent: {
         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]"]
+        calendar: ["size-[var(--dds-icon,24px)]", "icon-[daikin--calendar]"],
+        calender: ["size-[var(--dds-icon,24px)]", "icon-[daikin--calendar]"],
+        pulldown: [
+          "size-[var(--dds-icon,24px)]",
+          "icon-[daikin--pulldown-down]"
+        ]
       },
       rotate: {
         default: [],

package/dist/cjs-dev/utils/calendar-common.d.cts

@@ -1,7 +1,7 @@
 export declare const DEFAULT_MIN_DATE = "1900-01-01";
 export declare const DEFAULT_MAX_DATE = "2099-12-31";
 export declare const cvaIconButton: (props?: ({
-    intent?: "previous" | "next" | "calender" | "pulldown" | null | undefined;
+    intent?: "previous" | "next" | "calendar" | "calender" | "pulldown" | null | undefined;
     rotate?: "default" | "inverse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**

package/dist/cjs-dev/utils/extract-half-width-digits.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function extractHalfWidthDigits(composedText) {
+  return Array.from(
+    composedText.replace(
+      /[０-９]/g,
+      (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 65296 + 48)
+    )
+  ).filter((ch) => /^\d$/.test(ch));
+}
+exports.extractHalfWidthDigits = extractHalfWidthDigits;

package/dist/cjs-dev/utils/extract-half-width-digits.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Converts a string of composed IME text to an array of half-width digit characters.
+ *
+ * Full-width digits (U+FF10–U+FF19, e.g. "１２３") are converted to their half-width
+ * equivalents ("123"), and all non-digit characters are discarded.
+ *
+ * @param composedText - The raw string from a `CompositionEvent.data`.
+ * @returns An array of single half-width digit characters ("0"–"9").
+ *
+ * @example
+ * extractHalfWidthDigits("２０２５") // => ["2", "0", "2", "5"]
+ * extractHalfWidthDigits("abc")      // => []
+ * extractHalfWidthDigits("１2３")    // => ["1", "2", "3"]
+ */
+export declare function extractHalfWidthDigits(composedText: string): string[];

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

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

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

@@ -11,6 +11,7 @@ import { DDSElement } from "../../base/index.js";
  *
  * @slot - A slot for the accordion item content.
  * @slot summary - A slot for the accordion item summary content.
+ * @slot left-icon - A slot for an icon to be placed to the left of the summary text. Place `daikin-icon` or something similar.
  *
  * @cssprop [--divider-top-display=none] - The `display` property of the top divider. Must be either `block` or `none`. Set automatically by `daikin-accordion` component.
  * @cssprop [--divider-bottom-display=none] - The `display` property of the bottom divider. Must be either `block` or `none`. Set automatically by `daikin-accordion` component.

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

@@ -22,17 +22,18 @@ const cvaSummary = cva(
     "flex",
     "justify-between",
     "items-center",
-    "gap-3",
+    "gap-(--dds-padding-30)",
     "w-full",
-    "min-h-12",
-    "p-3",
+    "px-(--dds-padding-30)",
+    "py-(--dds-padding-30)",
+    "text-(length:--dds-font-size-label-text)",
     "natural-break",
     "text-left",
     "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:size-(--dds-icon)",
     "after:transition-all",
     "after:icon-[daikin--chevron-down]",
     "after:flex-none",
@@ -59,7 +60,13 @@ const cvaSummary = cva(
   }
 );
 const cvaContent = cva(
-  ["grid", "duration-250", "ease-in-out", "leading-normal"],
+  [
+    "grid",
+    "duration-250",
+    "ease-in-out",
+    "leading-normal",
+    "text-(length:--dds-font-size-label-text)"
+  ],
   {
     variants: {
       open: {
@@ -120,7 +127,15 @@ let DaikinAccordionItem = class extends DDSElement {
         @click=${this._handleSummaryClick}
         @keydown=${this._handleKeyDown}
       >
-        <slot name="summary"></slot>
+        <div class="flex items-start gap-1">
+          <slot
+            name="left-icon"
+            class="slotted:shrink-0 size-(--dds-icon) slotted:size-(--dds-icon)"
+          ></slot
+          ><span class="pl-(--dds-space-100) pt-(--dds-padding-05)"
+            ><slot name="summary"></slot
+          ></span>
+        </div>
       </button>
       <div
         ${ref(this._contentRef)}
@@ -128,10 +143,12 @@ let DaikinAccordionItem = class extends DDSElement {
         role="region"
         class=${cvaContent({ open })}
         aria-labelledby="summary"
-        ?inert=${!open}
+        .inert=${!open}
       >
         <div class="overflow-hidden">
-          <div class="pt-2 px-3 pb-3">
+          <div
+            class="pt-(--dds-padding-20) px-(--dds-padding-40) pb-(--dds-padding-30)"
+          >
             <slot class="slotted:natural-break"></slot>
           </div>
         </div>

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

@@ -37,7 +37,7 @@ import { DDSElement } from "../../base/index.js";
  *   <!-- Menu width can be set on the slotted <daikin-list slot="menu">, or via daikin-menu::part(menu). See the menu documentation for details. -->
  *   <daikin-menu placement="bottom-start">
  *     <daikin-breadcrumb-item></daikin-breadcrumb-item>
- *     <daikin-list list-role="menu" slot="menu" style="width: 10rem">
+ *     <daikin-list slot="menu" style="width: 10rem">
  *       <daikin-list-item type="link" href="#">
  *         Breadcrumb 2
  *       </daikin-list-item>

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

@@ -6,6 +6,7 @@ import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js"
  * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
  *
  * @slot - A slot for the breadcrumb item content.
+ * @slot left-icon - A slot for an icon to be placed to the left of the content. Place `daikin-icon` or something similar. This will only be displayed when `variant="normal"` or `variant="current"`.
  *
  * @example
  *

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

@@ -76,9 +76,10 @@ let DaikinBreadcrumbItem = class extends DDSElement {
             target=${ifDefined(this.target)}
             ?no-underline=${true}
             ?show-visited=${this.showVisited}
-          >
-            <slot></slot>
-          </daikin-link>` : this.variant === "ellipsis" ? html`<button
+            ><span slot="left-icon" class="inline-block -translate-y-px"
+              ><slot name="left-icon"></slot></span
+            ><slot></slot
+          ></daikin-link>` : this.variant === "ellipsis" ? html`<button
               ${ref(this._focusableRef)}
               type="button"
               class=${LINK_CLASS_NAME}
@@ -93,9 +94,11 @@ let DaikinBreadcrumbItem = class extends DDSElement {
               aria-current="true"
               target=${ifDefined(this.target)}
               role="link"
-            >
-              <slot></slot>
-            </a>`;
+              ><span class="inline-flex mr-0.5 align-sub -translate-y-px"
+                ><slot name="left-icon" class="icon-size-4"
+                  ><span class="-mr-0.5"></span></slot></span
+              ><slot></slot
+            ></a>`;
     const divider = this.appendDivider ? html`<span
           class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"

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

@@ -41,6 +41,12 @@ export declare class DaikinCalendar extends DDSElement {
      * If there is a `value` attribute, this is ignored.
      */
     defaultValue: string | null;
+    /**
+     * The locale used for calendar formatting.
+     * If not provided, the browser's default locale will be used.
+     * The component automatically adapts the calendar text to the user's locale. Currently, only English and Japanese are supported.
+     */
+    locale: "en" | "ja" | null;
     /**
      * _Internal use._
      *
@@ -60,6 +66,12 @@ export declare class DaikinCalendar extends DDSElement {
      * Used to set focus on a date that is not in the current view (year and month).
      */
     private _dateToBeFocused;
+    /**
+     * The locale used for calendar text.
+     * If not provided, the component uses the browser locale and falls back to English for unsupported locales.
+     * Currently, only English (`en`) and Japanese (`ja`) are supported.
+     */
+    private get _locale();
     private get _value();
     private get _min();
     private get _max();
@@ -83,6 +95,7 @@ export declare class DaikinCalendar extends DDSElement {
     private _handleYearAndMonthPickerClick;
     private _handleCalendarKeyDown;
     private _handleYearAndMonthPickerKeyDown;
+    private _createCalendarHeaderLabel;
     private _createYearAndMonthPickerContainer;
     private _createYearAndMonthPickerButton;
     private _createYearPicker;

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

@@ -22,29 +22,56 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const MONTHS = [
-  ["Jan", "January"],
-  ["Feb", "February"],
-  ["Mar", "March"],
-  ["Apr", "April"],
-  ["May", "May"],
-  ["Jun", "June"],
-  ["Jul", "July"],
-  ["Aug", "August"],
-  ["Sep", "September"],
-  ["Oct", "October"],
-  ["Nov", "November"],
-  ["Dec", "December"]
-];
-const DAYS = [
-  ["Sun", "Sunday"],
-  ["Mon", "Monday"],
-  ["Tue", "Tuesday"],
-  ["Wed", "Wednesday"],
-  ["Thu", "Thursday"],
-  ["Fri", "Friday"],
-  ["Sat", "Saturday"]
-];
+const MONTHS = {
+  en: [
+    ["Jan", "January"],
+    ["Feb", "February"],
+    ["Mar", "March"],
+    ["Apr", "April"],
+    ["May", "May"],
+    ["Jun", "June"],
+    ["Jul", "July"],
+    ["Aug", "August"],
+    ["Sep", "September"],
+    ["Oct", "October"],
+    ["Nov", "November"],
+    ["Dec", "December"]
+  ],
+  ja: [
+    ["1月", "1月"],
+    ["2月", "2月"],
+    ["3月", "3月"],
+    ["4月", "4月"],
+    ["5月", "5月"],
+    ["6月", "6月"],
+    ["7月", "7月"],
+    ["8月", "8月"],
+    ["9月", "9月"],
+    ["10月", "10月"],
+    ["11月", "11月"],
+    ["12月", "12月"]
+  ]
+};
+const DAYS = {
+  en: [
+    ["Sun", "Sunday"],
+    ["Mon", "Monday"],
+    ["Tue", "Tuesday"],
+    ["Wed", "Wednesday"],
+    ["Thu", "Thursday"],
+    ["Fri", "Friday"],
+    ["Sat", "Saturday"]
+  ],
+  ja: [
+    ["日", "日曜日"],
+    ["月", "月曜日"],
+    ["火", "火曜日"],
+    ["水", "水曜日"],
+    ["木", "木曜日"],
+    ["金", "金曜日"],
+    ["土", "土曜日"]
+  ]
+};
 const cvaContentButton = cva(
   [
     "flex",
@@ -127,11 +154,22 @@ let DaikinCalendar = class extends DDSElement {
     super(...arguments);
     this.value = "";
     this.defaultValue = null;
+    this.locale = null;
     this.view = "day";
     this._lastFocusedDate = null;
     this._dateToBeFocused = null;
     this._viewDate = getToday();
   }
+  /**
+   * The locale used for calendar text.
+   * If not provided, the component uses the browser locale and falls back to English for unsupported locales.
+   * Currently, only English (`en`) and Japanese (`ja`) are supported.
+   */
+  get _locale() {
+    const raw = String(this.locale ?? navigator.language);
+    const base = raw.split("-")[0].toLowerCase();
+    return base === "ja" ? "ja" : "en";
+  }
   get _value() {
     return tryParseDateFromProperty(this.value);
   }
@@ -246,6 +284,11 @@ let DaikinCalendar = class extends DDSElement {
     const newIndex = (focusedIndex + offset + buttons.length) % buttons.length;
     buttons[newIndex].focus();
   }
+  _createCalendarHeaderLabel(month, year) {
+    const locale = this._locale;
+    const monthLabel = MONTHS[locale][month][1];
+    return locale === "ja" ? `${year}年 ${monthLabel}` : `${monthLabel} ${year}`;
+  }
   _createYearAndMonthPickerContainer(children) {
     return html`<div class="w-full h-72">
       <div
@@ -332,7 +375,7 @@ let DaikinCalendar = class extends DDSElement {
     const focusableMonth = selectedMonth ?? todayMonth ?? (isSameYearMonth(min, viewDate) ? min.getUTCMonth() : 0);
     return this._createYearAndMonthPickerContainer(
       html`${repeat(
-        MONTHS,
+        MONTHS[this._locale],
         ([abbr]) => abbr,
         ([abbr, full], month) => {
           const date = createDateClamped(
@@ -381,7 +424,7 @@ let DaikinCalendar = class extends DDSElement {
     return html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
       <div class="flex gap-1 flex-wrap w-full px-4" role="row">
         ${repeat(
-      DAYS,
+      DAYS[this._locale],
       ([abbr]) => abbr,
       ([abbr, full]) => html`<div
               class="flex justify-center items-center size-8 text-ddt-color-common-text-secondary text-xs font-bold leading-[1.3]"
@@ -433,6 +476,7 @@ let DaikinCalendar = class extends DDSElement {
     const view = this.view;
     const year = viewDate.getUTCFullYear();
     const month = viewDate.getUTCMonth();
+    const headerLabel = this._createCalendarHeaderLabel(month, year);
     const pulldownLabel = {
       year: "Switch to month view",
       month: "Switch to year view",
@@ -458,7 +502,7 @@ let DaikinCalendar = class extends DDSElement {
             class="text-ddt-color-common-text-primary font-bold"
             aria-live="polite"
           >
-            ${`${MONTHS[month][1]} ${year}`}
+            ${headerLabel}
           </span>
           <daikin-icon-button
             type="button"
@@ -557,6 +601,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true, attribute: "default-value" })
 ], DaikinCalendar.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinCalendar.prototype, "locale", 2);
 __decorateClass([
   property({ type: String, attribute: false })
 ], DaikinCalendar.prototype, "view", 2);

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

@@ -53,6 +53,10 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * Specify the checkbox disabled state.
      */
     disabled: boolean;
+    /**
+     * Whether the checkbox is readonly.
+     */
+    readonly: boolean;
     /**
      * Specify the checkbox disabled state controlled by the parent component.
      * Controlled by `daikin-checkbox-group`.
@@ -60,6 +64,13 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     disabledByParent: boolean;
+    /**
+     * Specify the checkbox readonly state controlled by the parent component.
+     * Controlled by `daikin-checkbox-group`.
+     *
+     * @private
+     */
+    readonlyByParent: boolean;
     /**
      * The effective disabled state of the checkbox.
      * Returns `true` if either `disabled` or `disabledByParent` is `true`.
@@ -67,6 +78,13 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     private get _disabled();
+    /**
+     * The effective readonly state of the checkbox.
+     * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+     *
+     * @private
+     */
+    private get _readonly();
     private readonly _inputRef;
     /**
      * Focuses on the inner checkbox.