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

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

@@ -40,7 +40,8 @@ const _DDSElement = class _DDSElement extends lit.LitElement {
     return {
       get() {
         const orgValue = orgDescriptor.get.call(this);
-        return orgValue === void 0 ? fallbackValue : orgValue;
+        const resolvedFallbackValue = typeof fallbackValue === "function" ? fallbackValue(this) : fallbackValue;
+        return orgValue === void 0 ? resolvedFallbackValue : orgValue;
       },
       set(value) {
         const isValid = isAllowedValue == null || value != null && isAllowedValue(value);
@@ -84,6 +85,6 @@ const _DDSElement = class _DDSElement extends lit.LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.5.2";
+_DDSElement.version = "1.6.0";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs/base/dds-form-element.d.cts

@@ -8,6 +8,7 @@ export declare class DDSFormElement extends DDSElement {
     name: string;
     /**
      * The form value, submitted as a name/value pair when submitting the form.
+     * To keep external state in sync, listen to the `change` event.
      */
     value: string;
     /**

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

@@ -36,14 +36,14 @@ export type DDSPropertyDeclaration<Type = unknown, TypeHint = unknown> = Propert
     /** Property reflects to attribute (required for fallback) */
     reflect: true;
     /** Default value to use when property is undefined */
-    fallbackValue: Type;
+    fallbackValue: Type | ((instance: Element) => Type);
     /** No validation function specified */
     isAllowedValue?: undefined;
 } | {
     /** Property reflects to attribute (required for fallback) */
     reflect: true;
     /** Default value to use when property is undefined */
-    fallbackValue: Type;
+    fallbackValue: Type | ((instance: Element) => Type);
     /** Function to validate if a value is allowed for this property */
     isAllowedValue: (value: Type) => boolean;
 });

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

@@ -45,6 +45,7 @@ exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
       this.openItems = opened ? [...this.openItems, targetValue] : this.openItems.filter((item) => item != targetValue);
     }
     this._reflectItemOpen();
+    this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   _reflectItemOpen() {
     for (const item of this._items) {

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

@@ -6,6 +6,8 @@ import { DDSElement } from "../../base/index.cjs";
  * Hierarchy:
  * - `daikin-accordion` > `daikin-accordion-item`
  *
+ * @fires change - A custom event emitted when the open state of the accordion changes. The updated `openItems` can be read from the event target.
+ *
  * @slot - A slot for the accordion items. Place `daikin-accordion-item` elements here.
  *
  * @example
@@ -46,6 +48,8 @@ export declare class DaikinAccordion extends DDSElement {
     /**
      * A list of the names of the open items.
      * If `exclusive` is true, the number of elements is 0 or 1.
+     * When the user toggles an accordion item, this property is updated and a `change` event is emitted.
+     * When controlling this property externally, listen to the `change` event and read the updated `openItems` from the component to keep your state in sync.
      */
     openItems: string[];
     /**

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

@@ -24,7 +24,7 @@ const cvaSummary = classVarianceAuthority.cva(
     "flex",
     "justify-between",
     "items-center",
-    "gap-2",
+    "gap-3",
     "w-full",
     "min-h-12",
     "p-3",
@@ -37,7 +37,8 @@ const cvaSummary = classVarianceAuthority.cva(
     "after:size-6",
     "after:transition-all",
     "after:icon-[daikin--chevron-down]",
-    "after:flex-none"
+    "after:flex-none",
+    "after:self-start"
   ],
   {
     variants: {
@@ -59,14 +60,17 @@ const cvaSummary = classVarianceAuthority.cva(
     }
   }
 );
-const cvaContent = classVarianceAuthority.cva(["grid", "duration-250", "ease-in-out"], {
-  variants: {
-    open: {
-      false: ["grid-rows-[0fr]"],
-      true: ["grid-rows-[1fr]"]
+const cvaContent = classVarianceAuthority.cva(
+  ["grid", "duration-250", "ease-in-out", "leading-normal"],
+  {
+    variants: {
+      open: {
+        false: ["grid-rows-[0fr]"],
+        true: ["grid-rows-[1fr]"]
+      }
     }
   }
-});
+);
 exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
@@ -102,9 +106,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
   }
   render() {
     const open = !this.disabled && this.open;
-    return lit.html`<div
-      class="w-full text-ddt-color-common-text-primary font-daikinSerif"
-    >
+    return lit.html`<div class="w-full text-ddt-color-common-text-primary">
       <button
         id="summary"
         type="button"

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

@@ -39,7 +39,7 @@ export declare class DaikinAccordionItem extends DDSElement {
     /**
      * Whether the accordion item is open.
      * Ignored if `disabled` is `true`.
-     * Controlled by `daikin-accordion`.
+     * Controlled by `daikin-accordion`. When using standalone (outside `daikin-accordion`) and controlling this property externally, listen to the `toggle` event and toggle `open` in your state to keep it in sync.
      */
     open: boolean;
     /**

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

@@ -18,7 +18,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaBadge = classVarianceAuthority.cva(["absolute", "rounded-full"], {
+const cvaBadge = classVarianceAuthority.cva(["rounded-full"], {
   variants: {
     type: {
       number: [
@@ -27,19 +27,20 @@ const cvaBadge = classVarianceAuthority.cva(["absolute", "rounded-full"], {
         "px-1",
         "text-[10px]",
         "font-normal",
-        "font-daikinSerif",
         "text-white",
         "flex",
         "items-center",
         "justify-center",
-        "-top-0.5",
-        "-right-0.5",
         "before:content-[attr(data-count)]",
         "before:leading-none",
         "before:whitespace-nowrap",
         "data-[count=0]:hidden"
       ],
-      dot: ["w-2", "h-2", "top-1", "right-1"]
+      dot: []
+    },
+    size: {
+      medium: [],
+      large: []
     },
     color: {
       negative: ["bg-ddt-color-common-danger-default"],
@@ -47,8 +48,34 @@ const cvaBadge = classVarianceAuthority.cva(["absolute", "rounded-full"], {
       warning: ["bg-ddt-color-common-warning"],
       positive: ["bg-ddt-color-common-success"],
       information: ["bg-ddt-color-common-information"]
+    },
+    mode: {
+      anchored: ["absolute"],
+      standalone: []
     }
-  }
+  },
+  compoundVariants: [
+    {
+      type: "dot",
+      size: "medium",
+      class: ["size-2"]
+    },
+    {
+      type: "dot",
+      size: "large",
+      class: ["size-3"]
+    },
+    {
+      mode: "anchored",
+      type: "number",
+      class: ["-top-0.5", "-right-0.5"]
+    },
+    {
+      mode: "anchored",
+      type: "dot",
+      class: ["top-1", "right-1"]
+    }
+  ]
 });
 const DEFAULT_MAX_COUNT = "99";
 exports.DaikinBadge = class DaikinBadge extends ddsElement.DDSElement {
@@ -92,6 +119,21 @@ exports.DaikinBadge = class DaikinBadge extends ddsElement.DDSElement {
    * - The slot wraps the icon button.
    */
   render() {
+    if (this.mode === "standalone") {
+      return lit.html`
+        <span
+          role="presentation"
+          data-count=${this._count}
+          class=${cvaBadge({
+        type: this.type,
+        size: this.size,
+        color: this.color,
+        mode: this.mode
+      })}
+          ?hidden=${this.invisible}
+        ></span>
+      `;
+    }
     return lit.html`
       <slot></slot>
       <span
@@ -99,7 +141,9 @@ exports.DaikinBadge = class DaikinBadge extends ddsElement.DDSElement {
         data-count=${this._count}
         class=${cvaBadge({
       type: this.type,
-      color: this.color
+      size: this.size,
+      color: this.color,
+      mode: this.mode
     })}
         ?hidden=${this.invisible}
       ></span>
@@ -111,6 +155,11 @@ exports.DaikinBadge.styles = lit.css`
 
     :host {
       display: inline-flex;
+    }
+
+    /* Use :not([mode="standalone"]) so that the default anchored behavior
+       applies even when the mode attribute is absent */
+    :host(:not([mode="standalone"])) {
       position: relative;
     }
 
@@ -126,6 +175,22 @@ __decorateClass([
     isAllowedValue: ddsProperty.oneOf(["number", "dot"])
   })
 ], exports.DaikinBadge.prototype, "type", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "anchored",
+    isAllowedValue: ddsProperty.oneOf(["anchored", "standalone"])
+  })
+], exports.DaikinBadge.prototype, "mode", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: ddsProperty.oneOf(["medium", "large"])
+  })
+], exports.DaikinBadge.prototype, "size", 2);
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinBadge.prototype, "count", 2);

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

@@ -2,7 +2,7 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * A badge is used to display notification counts, status indicators, or small dots in the UI—commonly for message alerts or status marking.
  *
- * @slot - A slot for anchoring element. Place `daikin-icon-button` here.
+ * @slot - A slot for anchoring element. Place `daikin-icon-button` here. This slot is only applicable when mode is "anchored". For standalone badges, do not include any content in the slot.
  *
  * @example
  *
@@ -13,8 +13,9 @@ import { DDSElement } from "../../base/index.cjs";
  * ```
  *
  * ```html
- * <daikin-badge count="42" max-count="999" color="negative">
- *   <daikin-icon-button variant="ghost" size="m" buttonAriaLabel="42 unread notifications">
+ * <!-- Anchored badge example -->
+ * <daikin-badge type="number" count="42" max-count="999" color="negative">
+ *   <daikin-icon-button variant="ghost" size="m" button-aria-label="42 unread notifications">
  *     <daikin-icon
  *       class="w-8 h-8"
  *       icon="notification"
@@ -24,6 +25,10 @@ import { DDSElement } from "../../base/index.cjs";
  *     </daikin-icon>
  *   </daikin-icon-button>
  * </daikin-badge>
+ *
+ * <!-- Standalone badge example -->
+ * <daikin-badge type="number" count="42" max-count="999" color="negative" mode="standalone"></daikin-badge>
+ * <daikin-badge type="dot" color="positive" mode="standalone"></daikin-badge>
  * ```
  */
 export declare class DaikinBadge extends DDSElement {
@@ -36,10 +41,26 @@ export declare class DaikinBadge extends DDSElement {
      * @default "dot"
      */
     type: "number" | "dot";
+    /**
+     * Badge mode.
+     * - "anchored": The badge is anchored to a parent element.
+     * - "standalone": The badge is displayed independently. You can use this mode to display badges without an anchor, such as in a header or toolbar.
+     *
+     * @default "anchored"
+     */
+    mode: "anchored" | "standalone";
+    /**
+     * Badge size.
+     * - "medium": Displays a medium-sized badge.
+     * - "large": Displays a large-sized badge. When type="number", this will not change the badge size.
+     *
+     * @default "medium"
+     */
+    size: "medium" | "large";
     /**
      * The numeric content displayed in the badge.
      * Only effective when type="number".
-     * Accepts a string or null; will be parsed as a number internally.
+     * Accepts a string (A half-width numeric string that can be parsed into a number.) or null; will be parsed as a number internally.
      *
      * @example "5"
      */

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

@@ -34,6 +34,7 @@ import { DDSElement } from "../../base/index.cjs";
  *   <daikin-breadcrumb-item href="#">
  *     Breadcrumb item 1
  *   </daikin-breadcrumb-item>
+ *   <!-- 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">

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

@@ -22,10 +22,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
   return result;
 };
 const LINK_CLASS_NAME = classVarianceAuthority.cva([
-  "font-daikinSerif",
   "font-normal",
-  "text-base",
-  "leading-[130%]",
   "relative",
   "text-ddt-color-link-text-default",
   "hover:text-ddt-color-link-text-hover",
@@ -93,7 +90,7 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
             >
               ...
             </button>` : lit.html`<a
-              class="text-base leading-[130%] align-middle font-daikinSerif text-ddt-color-common-text-primary"
+              class="align-middle text-ddt-color-common-text-primary"
               aria-disabled="true"
               aria-current="true"
               target=${ifDefined_js.ifDefined(this.target)}

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

@@ -26,12 +26,10 @@ const cvaButton = classVarianceAuthority.cva(
     "justify-center",
     "items-center",
     "size-full",
-    "font-daikinSerif",
     "font-bold",
     "rounded-sm",
     "tracking-wide",
     "text-nowrap",
-    "leading-[130%]",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
@@ -68,9 +66,9 @@ const cvaButton = classVarianceAuthority.cva(
         ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
       },
       size: {
-        small: ["text-sm"],
-        medium: ["text-base"],
-        large: ["text-xl"]
+        small: ["text-(length:--dds-font-size-350)"],
+        medium: [],
+        large: ["text-(length:--dds-font-size-500)"]
       }
     },
     compoundVariants: [
@@ -244,7 +242,7 @@ exports.DaikinButton.styles = lit.css`
 
     :host([size="large"]) {
       min-width: 4.25em;
-      height: 4.5rem;
+      height: 4rem;
     }
   `;
 __decorateClass([

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

@@ -4,10 +4,10 @@ import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaButton: (props?: ({
     color?: "default" | "danger" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    size?: "medium" | "large" | "small" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const cvaIcon: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
+    size?: "medium" | "large" | "small" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
 /**

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

@@ -185,11 +185,13 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
   }
   _handleMonthClick() {
     this.view = this.view != "year" ? "year" : "month";
+    this.dispatchEvent(new Event("view-change", { bubbles: true }));
   }
   _handleYearAndMonthPickerClick(date) {
     this.view = this.view === "year" ? "month" : "day";
     this._viewDate = calendarCommon.cloneDate(date);
     this.value = calendarCommon.formatDateForProperty(calendarCommon.clampDate(date, this._min, this._max));
+    this.dispatchEvent(new Event("view-change", { bubbles: true }));
     this._emitSelecting();
   }
   _handleCalendarKeyDown(event) {
@@ -450,7 +452,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-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"
+      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"
     >
       <div class="flex justify-between items-center pl-4 pr-3">
         <div class="flex items-center gap-2">

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

@@ -5,6 +5,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @fires select - Fires when the date is selected.
  * @fires selecting - Fires when the year or month is selected.
+ * @fires view-change - _Internal use._ Fires when the calendar view changes between day, month, and year picker.
  *
  * @example
  *
@@ -20,6 +21,7 @@ export declare class DaikinCalendar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The current value of the input, submitted as a name/value pair with form data.
+     * When controlling this property externally, listen to the `select` event and read the updated `value` from the component to keep your state in sync.
      */
     value: string;
     /**

package/dist/cjs/components/card-header/daikin-card-header.cjs

@@ -19,7 +19,6 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaTitle = classVarianceAuthority.cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-base",
   "leading-[1.3]",
   "not-italic",
@@ -29,7 +28,6 @@ const cvaTitle = classVarianceAuthority.cva([
 const cvaDescription = classVarianceAuthority.cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-sm",
   "leading-normal",
   "not-italic",

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

@@ -33,6 +33,7 @@ export declare class DaikinCarousel extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The index number of the content currently being displayed.
+     * When controlling this property externally, listen to the `select` event and read the updated `currentIndex` from the component to keep your state in sync.
      */
     currentIndex: number;
     private readonly _items;

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

@@ -30,7 +30,7 @@ exports.DaikinCarouselItem = class DaikinCarouselItem extends ddsElement.DDSElem
   }
   render() {
     return lit.html`<div
-      class="flex flex-col flex-none gap-3 text-ddt-color-common-text-primary font-daikinSerif overflow-hidden"
+      class="flex flex-col flex-none gap-3 text-ddt-color-common-text-primary overflow-hidden"
       role="tabpanel"
       aria-label=${this.label}
       aria-hidden=${!this.active}
@@ -42,12 +42,12 @@ exports.DaikinCarouselItem = class DaikinCarouselItem extends ddsElement.DDSElem
       >
         <slot
           name="title"
-          class="leading-[130%] font-bold natural-break"
+          class="font-bold natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
         <slot
           name="description"
-          class="text-sm natural-break"
+          class="text-(length:--dds-font-size-350) leading-normal natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
       </div>

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

@@ -20,6 +20,17 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaWrapper = classVarianceAuthority.cva(
+  ["group", "flex", "gap-2", "items-center", "size-full"],
+  {
+    variants: {
+      disabled: {
+        false: ["cursor-pointer"],
+        true: []
+      }
+    }
+  }
+);
 const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "block",
   "size-4",
@@ -46,6 +57,7 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "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",
@@ -84,6 +96,15 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
     this.disabledByParent = false;
     this._inputRef = ref_js.createRef();
   }
+  /**
+   * The effective disabled state of the checkbox.
+   * Returns `true` if either `disabled` or `disabledByParent` is `true`.
+   *
+   * @private
+   */
+  get _disabled() {
+    return this.disabled || this.disabledByParent;
+  }
   /**
    * Focuses on the inner checkbox.
    * @param options focus options
@@ -111,7 +132,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
   }
   _handleClick(event) {
     var _a;
-    if (this.disabled) {
+    if (this._disabled) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -124,9 +145,8 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const disabled = this.disabled || this.disabledByParent;
     return lit.html`<label
-      class="group flex gap-2 items-center size-full font-daikinSerif"
+      class=${cvaWrapper({ disabled: this._disabled })}
       part="label"
       @click=${this._handleClick}
     >
@@ -136,7 +156,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
-          ?disabled=${disabled}
+          ?disabled=${this._disabled}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
           .checked=${this.checked}
           .indeterminate=${this.checkState === "indeterminate"}
@@ -146,7 +166,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
       </span>
       <slot
         class=${cvaLabel({
-      disabled,
+      disabled: this._disabled,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}

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

@@ -7,7 +7,7 @@ import { DDSFormElement } from "../../base/index.cjs";
  *
  * @attr form - The form the component belongs to.
  * @attr name - The form name, submitted as a name/value pair when submitting the form.
- * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  * @prop {String} formAttr - The form the component belongs to.
  * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
  * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
@@ -44,6 +44,7 @@ export declare class DaikinCheckbox extends DDSFormElement {
     labelPosition: "right" | "hidden";
     /**
      * Specify the checkbox checked state.
+     * To keep external state in sync, listen to the `change` event.
      *
      * @default "unchecked"
      */
@@ -59,6 +60,13 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     disabledByParent: boolean;
+    /**
+     * The effective disabled state of the checkbox.
+     * Returns `true` if either `disabled` or `disabledByParent` is `true`.
+     *
+     * @private
+     */
+    private get _disabled();
     private readonly _inputRef;
     /**
      * Focuses on the inner checkbox.

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

@@ -52,9 +52,7 @@ const cvaInputChipIcon = classVarianceAuthority.cva(["icon-size-4", "slotted:fle
 });
 const cvaInputChipText = classVarianceAuthority.cva(
   [
-    "text-sm",
-    "font-daikinSerif",
-    "leading-[130%]",
+    "text-(length:--dds-font-size-350)",
     "px-1",
     "mr-0.5",
     "overflow-hidden",
@@ -167,7 +165,7 @@ const cvaFilterChipWrapper = classVarianceAuthority.cva(
   }
 );
 const cvaFilterChipText = classVarianceAuthority.cva(
-  ["text-sm", "font-daikinSerif", "leading-[130%]", "px-1", "mr-0.5"],
+  ["text-(length:--dds-font-size-350)", "px-1", "mr-0.5"],
   {
     variants: {
       checked: {

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

@@ -35,6 +35,7 @@ export declare class DaikinChip extends DDSElement {
     variant: "fill" | "outline";
     /**
      * Specify the chip is selected when type is "filter".
+     * When controlling this property externally, listen to the `select` event and update your state from `event.detail.checked` to keep it in sync.
      */
     checked: boolean;
     /**