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

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

@@ -17,7 +17,7 @@ const cvaTimestamp = classVarianceAuthority.cva(
   [
     "text-ddt-color-common-text-secondary",
     "text-xs",
-    "leading-[130%]",
+    "leading-[1.3]",
     "whitespace-nowrap"
   ],
   {

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

@@ -38,7 +38,8 @@ const _DDSElement = class _DDSElement extends 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);
@@ -82,7 +83,7 @@ const _DDSElement = class _DDSElement extends LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.5.2";
+_DDSElement.version = "1.6.0-next.0";
 let DDSElement = _DDSElement;
 export {
   DDSElement

package/dist/es/base/dds-form-element.d.ts

@@ -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/es/base/dds-property.d.ts

@@ -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/es/components/accordion/daikin-accordion.d.ts

@@ -6,6 +6,8 @@ import { DDSElement } from "../../base/index.js";
  * 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/es/components/accordion/daikin-accordion.js

@@ -43,6 +43,7 @@ let DaikinAccordion = class extends 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/es/components/accordion-item/daikin-accordion-item.d.ts

@@ -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/es/components/accordion-item/daikin-accordion-item.js

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

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

@@ -2,7 +2,7 @@ import { DDSElement } from "../../base/index.js";
 /**
  * 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.js";
  * ```
  *
  * ```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.js";
  *     </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/es/components/badge/daikin-badge.js

@@ -16,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaBadge = cva(["absolute", "rounded-full"], {
+const cvaBadge = cva(["rounded-full"], {
   variants: {
     type: {
       number: [
@@ -25,19 +25,20 @@ const cvaBadge = 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"],
@@ -45,8 +46,34 @@ const cvaBadge = 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";
 let DaikinBadge = class extends DDSElement {
@@ -90,6 +117,21 @@ let DaikinBadge = class extends DDSElement {
    * - The slot wraps the icon button.
    */
   render() {
+    if (this.mode === "standalone") {
+      return 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 html`
       <slot></slot>
       <span
@@ -97,7 +139,9 @@ let DaikinBadge = class extends 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>
@@ -109,6 +153,11 @@ DaikinBadge.styles = 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;
     }
 
@@ -124,6 +173,22 @@ __decorateClass([
     isAllowedValue: oneOf(["number", "dot"])
   })
 ], DaikinBadge.prototype, "type", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "anchored",
+    isAllowedValue: oneOf(["anchored", "standalone"])
+  })
+], DaikinBadge.prototype, "mode", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: oneOf(["medium", "large"])
+  })
+], DaikinBadge.prototype, "size", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinBadge.prototype, "count", 2);

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

@@ -34,6 +34,7 @@ import { DDSElement } from "../../base/index.js";
  *   <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/es/components/breadcrumb-item/daikin-breadcrumb-item.js

@@ -20,10 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LINK_CLASS_NAME = cva([
-  "font-daikinSerif",
   "font-normal",
-  "text-base",
-  "leading-[130%]",
   "relative",
   "text-ddt-color-link-text-default",
   "hover:text-ddt-color-link-text-hover",
@@ -91,7 +88,7 @@ let DaikinBreadcrumbItem = class extends DDSElement {
             >
               ...
             </button>` : 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(this.target)}

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

@@ -4,10 +4,10 @@ import { MergeVariantProps } from "../../type-utils.js";
 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/es/components/button/daikin-button.js

@@ -24,12 +24,10 @@ const cvaButton = 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",
@@ -66,9 +64,9 @@ const cvaButton = 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: [
@@ -242,7 +240,7 @@ DaikinButton.styles = css`
 
     :host([size="large"]) {
       min-width: 4.25em;
-      height: 4.5rem;
+      height: 4rem;
     }
   `;
 __decorateClass([

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

@@ -5,6 +5,7 @@ import { DDSElement } from "../../base/index.js";
  *
  * @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/es/components/calendar/daikin-calendar.js

@@ -183,11 +183,13 @@ let DaikinCalendar = class extends 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 = cloneDate(date);
     this.value = formatDateForProperty(clampDate(date, this._min, this._max));
+    this.dispatchEvent(new Event("view-change", { bubbles: true }));
     this._emitSelecting();
   }
   _handleCalendarKeyDown(event) {
@@ -448,7 +450,7 @@ let DaikinCalendar = class extends DDSElement {
       day: this._createDatePicker
     }[view].call(this, renderState);
     return 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/es/components/card-header/daikin-card-header.js

@@ -17,7 +17,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaTitle = cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-base",
   "leading-[1.3]",
   "not-italic",
@@ -27,7 +26,6 @@ const cvaTitle = cva([
 const cvaDescription = cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-sm",
   "leading-normal",
   "not-italic",

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

@@ -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/es/components/carousel-item/daikin-carousel-item.js

@@ -28,7 +28,7 @@ let DaikinCarouselItem = class extends DDSElement {
   }
   render() {
     return 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}
@@ -40,12 +40,12 @@ let DaikinCarouselItem = class extends DDSElement {
       >
         <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/es/components/checkbox/daikin-checkbox.d.ts

@@ -7,7 +7,7 @@ import { DDSFormElement } from "../../base/index.js";
  *
  * @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/es/components/checkbox/daikin-checkbox.js

@@ -18,6 +18,17 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaWrapper = cva(
+  ["group", "flex", "gap-2", "items-center", "size-full"],
+  {
+    variants: {
+      disabled: {
+        false: ["cursor-pointer"],
+        true: []
+      }
+    }
+  }
+);
 const CHECKBOX_CLASS_NAME = cva([
   "block",
   "size-4",
@@ -44,6 +55,7 @@ const CHECKBOX_CLASS_NAME = 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",
@@ -82,6 +94,15 @@ let DaikinCheckbox = class extends DDSFormElement {
     this.disabledByParent = false;
     this._inputRef = 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
@@ -109,7 +130,7 @@ let DaikinCheckbox = class extends DDSFormElement {
   }
   _handleClick(event) {
     var _a;
-    if (this.disabled) {
+    if (this._disabled) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -122,9 +143,8 @@ let DaikinCheckbox = class extends DDSFormElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const disabled = this.disabled || this.disabledByParent;
     return html`<label
-      class="group flex gap-2 items-center size-full font-daikinSerif"
+      class=${cvaWrapper({ disabled: this._disabled })}
       part="label"
       @click=${this._handleClick}
     >
@@ -134,7 +154,7 @@ let DaikinCheckbox = class extends DDSFormElement {
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${ifDefined(this.getBackingProperty("name"))}
-          ?disabled=${disabled}
+          ?disabled=${this._disabled}
           aria-label=${this._labelHidden ? this.label : nothing}
           .checked=${this.checked}
           .indeterminate=${this.checkState === "indeterminate"}
@@ -144,7 +164,7 @@ let DaikinCheckbox = class extends DDSFormElement {
       </span>
       <slot
         class=${cvaLabel({
-      disabled,
+      disabled: this._disabled,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}

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

@@ -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;
     /**

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

@@ -50,9 +50,7 @@ const cvaInputChipIcon = cva(["icon-size-4", "slotted:flex-none"], {
 });
 const cvaInputChipText = cva(
   [
-    "text-sm",
-    "font-daikinSerif",
-    "leading-[130%]",
+    "text-(length:--dds-font-size-350)",
     "px-1",
     "mr-0.5",
     "overflow-hidden",
@@ -165,7 +163,7 @@ const cvaFilterChipWrapper = cva(
   }
 );
 const cvaFilterChipText = 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: {