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

package/dist/cjs-dev/components/drawer/daikin-drawer.cjs

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const guard_js = require("lit/directives/guard.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const blockScroll = require("../../controllers/block-scroll.cjs");
+const focusTrap = require("../../controllers/focus-trap.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaPanel = classVarianceAuthority.cva(
+  [
+    "flex",
+    "flex-col",
+    "justify-between",
+    "gap-4",
+    "z-10000",
+    "overflow-hidden",
+    "p-4",
+    "bg-ddt-color-common-background-default",
+    "transition-transform",
+    "duration-300",
+    "ease-in-out"
+  ],
+  {
+    variants: {
+      placement: {
+        top: [
+          "w-full",
+          "xl:min-h-[min(20rem,calc(100%-5rem))]",
+          "md:max-h-[calc(100%-5rem)]",
+          "md:min-h-[min(15rem,calc(100%-5rem))]",
+          "min-h-[min(12.5rem,calc(100%-3rem))]",
+          "max-h-[calc(100%-3rem)]",
+          "h-fit"
+        ],
+        right: [
+          "h-full",
+          "xl:min-w-[min(20rem,calc(100%-5rem))]",
+          "md:max-w-[calc(100%-5rem)]",
+          "md:min-w-[min(15rem,calc(100%-5rem))]",
+          "min-w-[min(12.5rem,calc(100%-3rem))]",
+          "max-w-[calc(100%-3rem)]",
+          "w-fit"
+        ],
+        bottom: [
+          "w-full",
+          "xl:min-h-[min(20rem,calc(100%-5rem))]",
+          "md:max-h-[calc(100%-5rem)]",
+          "md:min-h-[min(15rem,calc(100%-5rem))]",
+          "min-h-[min(12.5rem,calc(100%-3rem))]",
+          "max-h-[calc(100%-3rem)]",
+          "h-fit"
+        ],
+        left: [
+          "h-full",
+          "xl:min-w-[min(20rem,calc(100%-5rem))]",
+          "md:max-w-[calc(100%-5rem)]",
+          "md:min-w-[min(15rem,calc(100%-5rem))]",
+          "min-w-[min(12.5rem,calc(100%-3rem))]",
+          "max-w-[calc(100%-3rem)]",
+          "w-fit"
+        ]
+      },
+      open: {
+        true: ["translate-x-0", "translate-y-0"],
+        false: []
+      }
+    },
+    compoundVariants: [
+      { placement: "bottom", open: false, class: "translate-y-full" },
+      { placement: "top", open: false, class: "-translate-y-full" },
+      { placement: "left", open: false, class: "-translate-x-full" },
+      { placement: "right", open: false, class: "translate-x-full" }
+    ]
+  }
+);
+const cvaBackDrop = classVarianceAuthority.cva(
+  [
+    "flex",
+    "fixed",
+    "inset-0",
+    "z-9999",
+    "overflow-clip",
+    "bg-ddt-color-common-background-overlay",
+    "transition-opacity",
+    "duration-300",
+    "ease-in-out"
+  ],
+  {
+    variants: {
+      open: {
+        true: ["opacity-100"],
+        false: ["opacity-0", "pointer-events-none"]
+      },
+      placement: {
+        top: ["items-start"],
+        right: ["justify-end"],
+        bottom: ["items-end"],
+        left: ["justify-start"]
+      }
+    }
+  }
+);
+exports.DaikinDrawer = class DaikinDrawer extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.drawerAriaLabel = null;
+    this._blockScrollController = new blockScroll.BlockScrollController(this);
+    this._handleClose = () => {
+      if (!this.open) {
+        return;
+      }
+      this.open = false;
+      this.dispatchEvent(
+        new CustomEvent("close", { composed: true, bubbles: true })
+      );
+    };
+    this._focusTrapController = new focusTrap.FocusTrapController(
+      this,
+      this._handleClose
+    );
+    this._handleBackdropClick = (event) => {
+      if (event.target === event.currentTarget) {
+        this._handleClose();
+      }
+    };
+  }
+  render() {
+    return lit.html`<div
+        class=${cvaBackDrop({ open: this.open, placement: this.placement })}
+        ?inert=${!this.open}
+        aria-hidden=${ifDefined_js.ifDefined(!this.open ? "true" : void 0)}
+        @click=${this._handleBackdropClick}
+      >
+        <div
+          part="drawer"
+          class=${cvaPanel({ placement: this.placement, open: this.open })}
+          role=${this.drawerRole}
+          aria-modal=${ifDefined_js.ifDefined(this.open ? "true" : void 0)}
+          aria-label=${ifDefined_js.ifDefined(this.drawerAriaLabel ?? void 0)}
+          ${this._focusTrapController.refContainer()}
+        >
+          <slot
+            class="text-ddt-color-common-text-primary"
+            @close-drawer=${this._handleClose}
+          ></slot>
+        </div>
+      </div>
+      ${guard_js.guard(
+      [this.open],
+      () => (
+        // open change will trigger the re-rendering and directive.
+        // Pass handleOutsideClick=false: the backdrop's @click handler closes
+        // the drawer directly. Letting focus-trap handle outside clicks causes
+        // iOS Safari to redirect the tap (it moves focus on pointerdown before
+        // the synthesized click fires, stealing the event from the backdrop).
+        this._focusTrapController.directive(this.open, false, false)
+      )
+    )}
+      ${guard_js.guard(
+      [this.open],
+      () => this._blockScrollController.directive(this.open)
+    )}`;
+  }
+};
+exports.DaikinDrawer.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    ::slotted(*) {
+      flex-grow: 1;
+      min-height: 0;
+    }
+
+    ::slotted(daikin-drawer-header),
+    ::slotted(daikin-drawer-footer) {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinDrawer.prototype, "open", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "drawer-role",
+    fallbackValue: "dialog",
+    isAllowedValue: ddsProperty.oneOf([
+      "dialog",
+      "alertdialog"
+    ])
+  })
+], exports.DaikinDrawer.prototype, "drawerRole", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "drawer-aria-label" })
+], exports.DaikinDrawer.prototype, "drawerAriaLabel", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "right",
+    isAllowedValue: ddsProperty.oneOf([
+      "top",
+      "right",
+      "bottom",
+      "left"
+    ])
+  })
+], exports.DaikinDrawer.prototype, "placement", 2);
+exports.DaikinDrawer = __decorateClass([
+  decorators.ddsElement("daikin-drawer")
+], exports.DaikinDrawer);

package/dist/cjs-dev/components/drawer/daikin-drawer.d.cts

@@ -0,0 +1,91 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-drawer` is an overlay panel that slides in from the edge of the screen. It is used to display content without navigating away from the current page, providing a smooth user experience. The drawer can be placed at the top, right, bottom, or left of the screen and can contain a header, body, and footer. When the drawer is open, it traps focus within itself and prevents background content from scrolling.
+ *
+ * ### Scroll Lock
+ *
+ * When the drawer is open, it sets the CSS custom property `--ddc-scroll-lock: hidden` on the `<html>` element and removes it when the drawer is closed.
+ * To enable scroll locking, add the following CSS. If you use a custom scroll container instead of `body`, replace the selector accordingly:
+ *
+ * ```css
+ * body {
+ *   overflow: var(--ddc-scroll-lock, auto);
+ * }
+ * ```
+ *
+ * When no drawer is open, `--ddc-scroll-lock` is absent and the fallback value (`auto`) takes effect.
+ * When a drawer opens, it is set to `hidden`, locking scroll on every element that uses it.
+ *
+ * ## Multiple drawers and modals
+ *
+ * If multiple `daikin-drawer` or `daikin-modal` instances are open at the same time, the component tracks them with an internal reference count.
+ * `--ddc-scroll-lock` is only removed from `<html>` once **every** open drawer or modal has been closed — closing one drawer or modal while others remain open will not unlock scroll.
+ * This means your CSS declaration requires no extra logic to handle concurrent drawers or modals correctly.
+ *
+ * > **Note:** The `--ddc-scroll-lock` property is set on `<html>` and inherits through the entire document,
+ * > so the CSS declaration above works on any element regardless of its position in the DOM tree.
+ *
+ * Hierarchy:
+ * - `daikin-drawer` > `daikin-drawer-header`
+ * - `daikin-drawer` > `daikin-drawer-footer`
+ *
+ * @slot - A slot for drawer header, body, drawer footer. Place `daikin-drawer-header`, custom body content, `daikin-drawer-footer` here in order.
+ *
+ * @fires close - A custom event emitted when the drawer is closed, including when a user clicks the header close button, clicks the backdrop, or dismisses the drawer with the Escape key.
+ *
+ * @csspart drawer - CSS styles applied to the drawer panel container. By default, the panel uses content-based content width fit or height fit and is clamped by responsive min/max width and height constraints so it does not touch the viewport edges. Use `::part(drawer)` to customize its width, height, or padding; the built-in min/max constraints remain in effect unless you override them with more specific rules.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/drawer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/drawer-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/drawer-header/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-drawer>
+ *   <daikin-drawer-header>
+ *     <span>Drawer Title</span>
+ *   </daikin-drawer-header>
+ *   <p>Drawer body.</p>
+ *   <daikin-drawer-footer>
+ *     <daikin-button size="small">Button</daikin-button>
+ *   </daikin-drawer-footer>
+ * </daikin-drawer>
+ * ```
+ */
+export declare class DaikinDrawer extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the drawer is open.
+     * When controlling this property externally, listen to the `close` event and set your state to `false` to keep it in sync.
+     */
+    open: boolean;
+    /**
+     * ARIA role of the drawer. Choose the appropriate role for your drawer based on its usage scenario.
+     *
+     * @default "dialog"
+     */
+    drawerRole: "dialog" | "alertdialog";
+    /**
+     * The aria-label of the drawer.
+     */
+    drawerAriaLabel: string | null;
+    /**
+     * The placement of the drawer. The default value is `right`, which means the drawer will slide in from the right side of the screen. You can set it to `top`, `bottom`, or `left` to have the drawer slide in from the corresponding side.
+     * Note: The slide-in animation is based on CSS transform, so it can still work when the drawer is placed at the top or bottom of the screen, providing a smooth user experience.
+     * @default "right"
+     */
+    placement: "top" | "right" | "bottom" | "left";
+    private readonly _blockScrollController;
+    private readonly _handleClose;
+    private readonly _focusTrapController;
+    private readonly _handleBackdropClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-drawer": DaikinDrawer;
+    }
+}

package/dist/cjs-dev/components/drawer/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinDrawer = require("./daikin-drawer.cjs");
+Object.defineProperty(exports, "DaikinDrawer", {
+  enumerable: true,
+  get: () => daikinDrawer.DaikinDrawer
+});

package/dist/cjs-dev/components/drawer/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-drawer.cjs";

package/dist/cjs-dev/components/drawer-footer/daikin-drawer-footer.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+require("lit/decorators.js");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = decorator(result) || result;
+  return result;
+};
+exports.DaikinDrawerFooter = class DaikinDrawerFooter extends ddsElement.DDSElement {
+  render() {
+    return lit.html`<div class="flex flex-wrap justify-end w-full gap-4">
+      <slot></slot>
+    </div>`;
+  }
+};
+exports.DaikinDrawerFooter.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+  `;
+exports.DaikinDrawerFooter = __decorateClass([
+  decorators.ddsElement("daikin-drawer-footer")
+], exports.DaikinDrawerFooter);

package/dist/cjs-dev/components/drawer-footer/daikin-drawer-footer.d.cts

@@ -0,0 +1,33 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-drawer-footer` is used to represent footer of the drawer component, and is used as a child element of the `daikin-drawer` component.
+ *
+ * Hierarchy:
+ * - `daikin-drawer` > `daikin-drawer-footer`
+ *
+ * @slot A slot for drawer footer action element. Place a `daikin-button` or `daikin-link` element here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/drawer-footer/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-drawer` component for complete example. -->
+ * <daikin-drawer-footer>
+ *  <daikin-button size="small" color="default">
+ *    Button
+ *  </daikin-button>
+ * </daikin-drawer-footer>
+ * ```
+ */
+export declare class DaikinDrawerFooter extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-drawer-footer": DaikinDrawerFooter;
+    }
+}

package/dist/cjs-dev/components/drawer-footer/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinDrawerFooter = require("./daikin-drawer-footer.cjs");
+Object.defineProperty(exports, "DaikinDrawerFooter", {
+  enumerable: true,
+  get: () => daikinDrawerFooter.DaikinDrawerFooter
+});

package/dist/cjs-dev/components/drawer-footer/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-drawer-footer.cjs";

package/dist/cjs-dev/components/drawer-header/daikin-drawer-header.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const ref_js = require("lit/directives/ref.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+require("../icon-button/daikin-icon-button.cjs");
+require("../icon/daikin-icon.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaTitle = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "text-(length:--dds-font-size-500)",
+  "not-italic",
+  "font-bold"
+])();
+exports.DaikinDrawerHeader = class DaikinDrawerHeader extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.withCloseButton = false;
+    this._closeButton = ref_js.createRef();
+  }
+  _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("close-drawer", {
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return lit.html`<div class="flex justify-between w-full gap-2 natural-break">
+      <div class="pr-8 pt-0.5">
+        <slot class=${cvaTitle}></slot>
+      </div>
+      ${this.withCloseButton ? lit.html`<daikin-icon-button
+            ${ref_js.ref(this._closeButton)}
+            variant="ghost"
+            color="neutral"
+            button-aria-label="Close"
+            class="flex-none size-8"
+            @click=${this._handleClick}
+          >
+            <daikin-icon icon="close" color="current"></daikin-icon>
+          </daikin-icon-button>` : lit.nothing}
+    </div>`;
+  }
+  /**
+   * Focuses on the header close button.
+   */
+  focusCloseButton() {
+    var _a;
+    (_a = this._closeButton.value) == null ? void 0 : _a.focus();
+  }
+};
+exports.DaikinDrawerHeader.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "with-close-button" })
+], exports.DaikinDrawerHeader.prototype, "withCloseButton", 2);
+exports.DaikinDrawerHeader = __decorateClass([
+  decorators.ddsElement("daikin-drawer-header")
+], exports.DaikinDrawerHeader);

package/dist/cjs-dev/components/drawer-header/daikin-drawer-header.d.cts

@@ -0,0 +1,41 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-drawer-header` is used to represent header of the drawer component, and is used as a child element of the `daikin-drawer` component.
+ *
+ * Hierarchy:
+ * - `daikin-drawer` > `daikin-drawer-header`
+ *
+ * @slot - A slot for drawer title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/drawer-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-drawer` component for complete example. -->
+ * <daikin-drawer-header>
+ *   <span>Drawer Title</span>
+ * </daikin-drawer-header>
+ * ```
+ */
+export declare class DaikinDrawerHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether to render the close button in the drawer header.
+     */
+    withCloseButton: boolean;
+    private _closeButton;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the header close button.
+     */
+    focusCloseButton(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-drawer-header": DaikinDrawerHeader;
+    }
+}

package/dist/cjs-dev/components/drawer-header/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinDrawerHeader = require("./daikin-drawer-header.cjs");
+Object.defineProperty(exports, "DaikinDrawerHeader", {
+  enumerable: true,
+  get: () => daikinDrawerHeader.DaikinDrawerHeader
+});

package/dist/cjs-dev/components/drawer-header/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-drawer-header.cjs";

package/dist/cjs-dev/components/dropdown/daikin-dropdown.cjs

@@ -39,9 +39,7 @@ const cvaButton = classVarianceAuthority.cva(
     "pr-3",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "text-left",
-    "leading-[130%]",
     "relative",
     "outline-solid",
     "outline-1",
@@ -414,6 +412,17 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
         this.focus();
       }
     }
+    if (changedProperties.has("open")) {
+      const wasOpen = changedProperties.get("open");
+      if (wasOpen !== void 0) {
+        this.dispatchEvent(
+          new ToggleEvent("toggle", {
+            oldState: wasOpen ? "open" : "closed",
+            newState: this.open ? "open" : "closed"
+          })
+        );
+      }
+    }
     if (changedProperties.has("selectedOptions")) {
       const items = this._items;
       for (const item of items) {

package/dist/cjs-dev/components/dropdown/daikin-dropdown.d.cts

@@ -13,9 +13,10 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A custom event emitted when a user selects a dropdown item.
+ * @fires toggle - A custom event emitted when the dropdown menu opens or closes.
  *
  * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.
  *
@@ -54,6 +55,7 @@ export declare class DaikinDropdown extends DDSFormElement {
     error: boolean;
     /**
      * Whether the dropdown menu is opened.
+     * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
     /**

package/dist/cjs-dev/components/dropdown-item/daikin-dropdown-item.cjs

@@ -28,8 +28,6 @@ const cvaOption = classVarianceAuthority.cva(
     "gap-1",
     "size-full",
     "min-h-12",
-    "font-daikinSerif",
-    "leading-[130%]",
     "text-left",
     "relative",
     "focus-visible:outline-solid",

package/dist/cjs-dev/components/empty-state/daikin-empty-state.cjs

@@ -25,11 +25,11 @@ exports.DaikinEmptyState = class DaikinEmptyState extends ddsElement.DDSElement
         ></slot>
         <slot
           name="title"
-          class="slotted:text-base slotted:font-bold slotted:natural-break slotted:text-center slotted:font-daikinSerif slotted:leading-[130%] slotted:text-ddt-color-common-text-primary"
+          class="slotted:font-bold slotted:natural-break slotted:text-center slotted:text-ddt-color-common-text-primary"
         ></slot>
         <slot
           name="description"
-          class="slotted:text-sm slotted:font-normal slotted:natural-break slotted:text-center slotted:font-daikinSerif slotted:leading-[150%] slotted:text-ddt-color-common-text-primary"
+          class="slotted:text-(length:--dds-font-size-350) slotted:font-normal slotted:natural-break slotted:text-center slotted:leading-normal slotted:text-ddt-color-common-text-primary"
           ><span class="-mt-1"></span
         ></slot>
       </div>

package/dist/cjs-dev/components/icon/daikin-icon.cjs

@@ -33,7 +33,7 @@ function svgToDataUrl(svg) {
 const cvaIcon = classVarianceAuthority.cva(["inline-flex size-full"], {
   variants: {
     color: {
-      black: ["text-ddt-color-common-background-overlay"],
+      black: ["text-black"],
       white: ["text-ddt-color-common-text-inverse"],
       default: ["text-(--default-color)"],
       current: []
@@ -94,7 +94,6 @@ exports.DaikinIcon = class DaikinIcon extends ddsElement.DDSElement {
         defaultColor: staticIcon.color,
         class: staticIcon.class
       };
-      console.log(this._iconData);
       return;
     }
     try {

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

@@ -27,7 +27,6 @@ const cvaIconButton = classVarianceAuthority.cva(
     "justify-center",
     "items-center",
     "size-full",
-    "font-daikinSerif",
     "font-bold",
     "rounded-sm",
     "tracking-wide",