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

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

@@ -85,6 +85,6 @@ const _DDSElement = class _DDSElement extends lit.LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.6.0";
+_DDSElement.version = "2.0.0-next.2";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

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

@@ -24,17 +24,18 @@ const cvaSummary = classVarianceAuthority.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",
@@ -61,7 +62,13 @@ const cvaSummary = classVarianceAuthority.cva(
   }
 );
 const cvaContent = classVarianceAuthority.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: {
@@ -122,7 +129,15 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
         @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_js.ref(this._contentRef)}
@@ -130,10 +145,12 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
         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/cjs/components/accordion-item/daikin-accordion-item.d.cts

@@ -11,6 +11,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @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/cjs/components/breadcrumb/daikin-breadcrumb.d.cts

@@ -37,7 +37,7 @@ import { DDSElement } from "../../base/index.cjs";
  *   <!-- 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/cjs/components/breadcrumb-item/daikin-breadcrumb-item.cjs

@@ -78,9 +78,10 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
             target=${ifDefined_js.ifDefined(this.target)}
             ?no-underline=${true}
             ?show-visited=${this.showVisited}
-          >
-            <slot></slot>
-          </daikin-link>` : this.variant === "ellipsis" ? lit.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" ? lit.html`<button
               ${ref_js.ref(this._focusableRef)}
               type="button"
               class=${LINK_CLASS_NAME}
@@ -95,9 +96,11 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
               aria-current="true"
               target=${ifDefined_js.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 ? lit.html`<span
           class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"

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

@@ -6,6 +6,7 @@ import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs
  * - `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/cjs/components/calendar/daikin-calendar.cjs

@@ -24,29 +24,56 @@ var __decorateClass = (decorators2, 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 = classVarianceAuthority.cva(
   [
     "flex",
@@ -129,11 +156,22 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.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 calendarCommon.tryParseDateFromProperty(this.value);
   }
@@ -248,6 +286,11 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.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 lit.html`<div class="w-full h-72">
       <div
@@ -334,7 +377,7 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
     const focusableMonth = selectedMonth ?? todayMonth ?? (calendarCommon.isSameYearMonth(min, viewDate) ? min.getUTCMonth() : 0);
     return this._createYearAndMonthPickerContainer(
       lit.html`${repeat_js.repeat(
-        MONTHS,
+        MONTHS[this._locale],
         ([abbr]) => abbr,
         ([abbr, full], month) => {
           const date = calendarCommon.createDateClamped(
@@ -383,7 +426,7 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
     return lit.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_js.repeat(
-      DAYS,
+      DAYS[this._locale],
       ([abbr]) => abbr,
       ([abbr, full]) => lit.html`<div
               class="flex justify-center items-center size-8 text-ddt-color-common-text-secondary text-xs font-bold leading-[1.3]"
@@ -435,6 +478,7 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.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",
@@ -460,7 +504,7 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
             class="text-ddt-color-common-text-primary font-bold"
             aria-live="polite"
           >
-            ${`${MONTHS[month][1]} ${year}`}
+            ${headerLabel}
           </span>
           <daikin-icon-button
             type="button"
@@ -559,6 +603,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, attribute: "default-value" })
 ], exports.DaikinCalendar.prototype, "defaultValue", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true })
+], exports.DaikinCalendar.prototype, "locale", 2);
 __decorateClass([
   ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinCalendar.prototype, "view", 2);

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

@@ -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/cjs/components/checkbox/daikin-checkbox.cjs

@@ -25,60 +25,159 @@ const cvaWrapper = classVarianceAuthority.cva(
   {
     variants: {
       disabled: {
-        false: ["cursor-pointer"],
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
         true: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      }
+    ]
+  }
+);
+const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva(
+  [
+    "block",
+    "size-4",
+    "rounded-xs",
+    "relative",
+    "appearance-none",
+    "before:absolute",
+    "before:m-auto",
+    "before:inset-0",
+    "focus-visible:outline-solid",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "disabled:border-ddt-color-common-disabled",
+    "disabled:bg-ddt-color-common-text-inverse",
+    "disabled:checked:bg-ddt-color-common-disabled",
+    "disabled:indeterminate:bg-ddt-color-common-disabled"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
+        true: []
+      },
+      checkState: {
+        unchecked: [],
+        checked: [],
+        indeterminate: []
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      },
+      {
+        readonly: false,
+        checkState: "unchecked",
+        class: [
+          "border-2",
+          "border-ddt-color-common-neutral-default",
+          "group-hover:enabled:border-ddt-color-common-neutral-hover",
+          "group-hover:enabled:bg-ddt-color-common-surface-hover",
+          "group-active:enabled:border-ddt-color-common-neutral-press",
+          "group-active:enabled:bg-ddt-color-common-surface-press"
+        ]
+      },
+      {
+        readonly: false,
+        checkState: "checked",
+        class: [
+          "border-2",
+          "before:text-ddt-color-common-text-inverse",
+          "before:icon-[daikin--checkbox-checked]",
+          "before:size-3",
+          "enabled:checked:border-ddt-color-common-brand-default",
+          "enabled:checked:bg-ddt-color-common-brand-default",
+          "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
+          "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+          "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
+          "group-active:checked:enabled:bg-ddt-color-common-brand-press",
+          "group-active:checked:enabled:border-ddt-color-common-brand-press",
+          "group-active:checked:enabled:before:text-ddt-color-common-text-inverse"
+        ]
+      },
+      {
+        readonly: false,
+        checkState: "indeterminate",
+        class: [
+          "border-2",
+          "before:text-ddt-color-common-text-inverse",
+          "before:icon-[daikin--checkbox-indeterminate]",
+          "before:size-2.5",
+          "enabled:indeterminate:bg-ddt-color-common-brand-default",
+          "enabled:indeterminate:border-ddt-color-common-brand-default",
+          "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
+          "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
+          "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
+          "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
+          "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
+          "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse"
+        ]
+      },
+      {
+        readonly: true,
+        checkState: "unchecked",
+        class: [
+          "border",
+          "border-ddt-color-common-disabled",
+          "bg-(--dds-color-common-surface-secondary)"
+        ]
+      },
+      {
+        readonly: true,
+        checkState: "checked",
+        class: [
+          "border",
+          "border-ddt-color-common-neutral-default",
+          "bg-(--dds-color-common-surface-secondary)",
+          "before:text-ddt-color-common-neutral-default",
+          "before:icon-[daikin--checkbox-checked]",
+          "before:size-3"
+        ]
+      },
+      {
+        readonly: true,
+        checkState: "indeterminate",
+        class: [
+          "border",
+          "border-ddt-color-common-neutral-default",
+          "bg-(--dds-color-common-surface-secondary)",
+          "before:text-ddt-color-common-neutral-default",
+          "before:icon-[daikin--checkbox-indeterminate]",
+          "before:size-2.5"
+        ]
+      }
+    ]
   }
 );
-const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
-  "block",
-  "size-4",
-  "border-ddt-color-common-neutral-default",
-  "border-2",
-  "rounded-xs",
-  "relative",
-  "appearance-none",
-  "before:text-ddt-color-common-text-inverse",
-  "before:absolute",
-  "before:m-auto",
-  "before:inset-0",
-  "checked:before:icon-[daikin--checkbox-checked]",
-  "checked:before:size-3",
-  "indeterminate:before:icon-[daikin--checkbox-indeterminate]",
-  "indeterminate:before:size-2.5",
-  "focus-visible:outline-solid",
-  "focus-visible:outline-2",
-  "focus-visible:outline-offset-2",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "group-hover:enabled:border-ddt-color-common-neutral-hover",
-  "group-hover:enabled:bg-ddt-color-common-surface-hover",
-  "group-active:enabled:border-ddt-color-common-neutral-press",
-  "group-active:enabled:bg-ddt-color-common-surface-press",
-  "enabled:checked:border-ddt-color-common-brand-default",
-  "enabled:checked:bg-ddt-color-common-brand-default",
-  "enabled:cursor-pointer",
-  "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
-  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
-  "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
-  "group-active:checked:enabled:bg-ddt-color-common-brand-press",
-  "group-active:checked:enabled:border-ddt-color-common-brand-press",
-  "group-active:checked:enabled:before:text-ddt-color-common-text-inverse",
-  "enabled:indeterminate:bg-ddt-color-common-brand-default",
-  "enabled:indeterminate:border-ddt-color-common-brand-default",
-  "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
-  "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
-  "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
-  "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
-  "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
-  "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
-  "disabled:border-ddt-color-common-disabled",
-  "disabled:bg-ddt-color-common-text-inverse",
-  "disabled:checked:bg-ddt-color-common-disabled",
-  "disabled:indeterminate:bg-ddt-color-common-disabled"
-])();
 const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
   variants: {
+    checkState: {
+      unchecked: [],
+      checked: [],
+      indeterminate: []
+    },
+    readonly: {
+      false: [],
+      true: []
+    },
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
       true: ["text-ddt-color-common-disabled"]
@@ -87,13 +186,24 @@ const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
       false: ["inline-block"],
       true: ["hidden"]
     }
-  }
+  },
+  compoundVariants: [
+    {
+      readonly: true,
+      checkState: "unchecked",
+      disabled: false,
+      hidden: false,
+      class: ["text-ddt-color-common-disabled!"]
+    }
+  ]
 });
 exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.readonly = false;
     this.disabledByParent = false;
+    this.readonlyByParent = false;
     this._inputRef = ref_js.createRef();
   }
   /**
@@ -105,6 +215,15 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
   get _disabled() {
     return this.disabled || this.disabledByParent;
   }
+  /**
+   * The effective readonly state of the checkbox.
+   * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+   *
+   * @private
+   */
+  get _readonly() {
+    return this.readonly || this.readonlyByParent;
+  }
   /**
    * Focuses on the inner checkbox.
    * @param options focus options
@@ -132,7 +251,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
   }
   _handleClick(event) {
     var _a;
-    if (this._disabled) {
+    if (this._disabled || this._readonly) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -140,20 +259,31 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
     }
   }
   _handleChange(event) {
+    if (this._readonly) {
+      event.preventDefault();
+      return;
+    }
     this.checkState = event.target.checked ? "checked" : "unchecked";
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
   }
   render() {
     return lit.html`<label
-      class=${cvaWrapper({ disabled: this._disabled })}
+      class=${cvaWrapper({
+      disabled: this._disabled,
+      readonly: this._readonly
+    })}
       part="label"
       @click=${this._handleClick}
     >
       <span class="p-2">
         <input
           ${ref_js.ref(this._inputRef)}
-          class=${CHECKBOX_CLASS_NAME}
+          class=${CHECKBOX_CLASS_NAME({
+      disabled: this._disabled,
+      readonly: this._readonly && !this._disabled,
+      checkState: this.checkState
+    })}
           type="checkbox"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
           ?disabled=${this._disabled}
@@ -167,6 +297,8 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
       <slot
         class=${cvaLabel({
       disabled: this._disabled,
+      readonly: this._readonly && !this._disabled,
+      checkState: this.checkState,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -216,9 +348,15 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
 ], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
+], exports.DaikinCheckbox.prototype, "readonlyByParent", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators.ddsElement("daikin-checkbox")
 ], exports.DaikinCheckbox);

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

@@ -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.