@daikin-oss/design-system-web-components 0.6.0 → 0.7.0

package/dist/es/components/input-group/daikin-input-group.js

@@ -1,4 +1,3 @@
-import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
@@ -17,41 +16,42 @@ const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-5"], {
   variants: {
     disabled: {
       false: [],
-      true: ["text-system-state-disabled"]
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
 const cvaHelper = cva(
-  ["flex", "gap-1", "items-center", "leading-5", "text-sm"],
+  ["flex", "gap-1", "items-center", "min-h-5", "leading-5", "text-sm"],
   {
     variants: {
       type: {
         helper: [],
-        helperDisabled: ["text-system-state-disabled"],
+        helperDisabled: ["text-ddt-color-common-disabled"],
         error: [
-          "text-system-state-error-active",
+          "text-ddt-color-common-danger-default",
           "font-bold",
           "before:size-4",
-          "before:i-daikin-status-error"
+          "before:i-daikin-status-error",
+          "before:flex-none"
+        ],
+        textareaLimitExceedError: [
+          "text-ddt-color-common-danger-default",
+          "font-bold",
+          "before:size-4",
+          "before:i-daikin-status-error",
+          "before:flex-none"
         ],
         none: ["hidden"]
       }
     }
   }
 );
-const cvaCounter = cva(["text-sm", "font-bold"], {
+const cvaCounter = cva(["text-sm", "font-bold", "ml-auto"], {
   variants: {
-    disabled: {
-      false: ["text-system-element-text-secondary"],
-      true: ["text-system-state-disabled"]
-    }
-  }
-});
-const cvaCounterValueLength = cva([], {
-  variants: {
-    error: {
-      false: [],
-      true: ["text-system-state-error-active"]
+    variant: {
+      normal: ["text-ddt-color-common-text-secondary"],
+      disabled: ["text-ddt-color-common-disabled"],
+      error: ["text-ddt-color-common-danger-default"]
     }
   }
 });
@@ -64,8 +64,12 @@ let DaikinInputGroup = class extends LitElement {
     this.error = null;
     this.disabled = false;
     this.textareaMaxCount = null;
+    this.textareaLimitExceedError = null;
     this._textareaCount = null;
   }
+  get textareaLimitExceeded() {
+    return this.textareaMaxCount != null && this._textareaCount != null && this.textareaMaxCount < this._textareaCount;
+  }
   _handleSlotChange() {
     this._reflectSlotProperties();
     const textarea = this._textareas[0];
@@ -82,40 +86,41 @@ let DaikinInputGroup = class extends LitElement {
     }
   }
   render() {
-    const helperType = this.error && !this.disabled ? "error" : this.helper ? this.disabled ? "helperDisabled" : "helper" : "none";
+    const helperTextVariant = (() => {
+      if (this.textareaLimitExceeded && !!this.textareaLimitExceedError && !this.disabled) {
+        return "textareaLimitExceedError";
+      } else if (!!this.error && !this.disabled) {
+        return "error";
+      } else if (!!this.helper && this.disabled) {
+        return "helperDisabled";
+      } else if (this.helper) {
+        return "helper";
+      } else {
+        return "none";
+      }
+    })();
     const helperText = {
-      error: this.error,
       helper: this.helper,
       helperDisabled: this.helper,
+      error: this.error,
+      textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
-    }[helperType];
+    }[helperTextVariant];
     return html`<fieldset class="content" ?disabled=${this.disabled}>
       <label
-        class="flex flex-col justify-center gap-2 w-full text-system-element-text-primary font-daikinSerif"
+        class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
       >
-        <div class="flex justify-between items-center gap-2">
-          <div class="flex items-center gap-1 font-bold">
-            ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
-                  ${this.label}
-                </span>` : nothing}
-            ${this.required && !this.disabled ? html`<span class="text-system-state-error-active text-xs">
-                  ${this.required}
-                </span>` : nothing}
-          </div>
-          ${this.textareaMaxCount != null && this._textareaCount != null ? html`
-                <span class=${cvaCounter({ disabled: this.disabled })}>
-                  <span
-                    class=${cvaCounterValueLength({
-      error: this.textareaMaxCount < this._textareaCount
-    })}
-                    >${this._textareaCount}</span
-                  ><span>/</span><span>${this.textareaMaxCount}</span>
-                </span>
-              ` : nothing}
+        <div class="flex items-center gap-1 font-bold">
+          ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                ${this.label}
+              </span>` : nothing}
+          ${this.required && !this.disabled ? html`<span class="text-ddt-color-common-danger-default text-xs">
+                ${this.required}
+              </span>` : nothing}
         </div>
         <span
-          class=${cvaHelper({ type: helperType })}
-          aria-live=${helperType === "error" ? "polite" : "off"}
+          class=${cvaHelper({ type: helperTextVariant })}
+          aria-live=${helperTextVariant === "error" ? "polite" : "off"}
         >
           ${helperText}
         </span>
@@ -123,6 +128,12 @@ let DaikinInputGroup = class extends LitElement {
           @slotchange=${this._handleSlotChange}
           @input=${this._handleInput}
         ></slot>
+        ${this.textareaMaxCount != null && this._textareaCount != null ? html`<span
+              class=${cvaCounter({
+      variant: this.disabled ? "disabled" : this.textareaLimitExceeded ? "error" : "normal"
+    })}
+              >${this._textareaCount}/${this.textareaMaxCount}</span
+            >` : nothing}
       </label>
     </fieldset>`;
   }
@@ -134,8 +145,6 @@ DaikinInputGroup.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --input-group-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
-
       display: block;
       width: 100%;
     }
@@ -158,6 +167,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], DaikinInputGroup.prototype, "textareaMaxCount", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "textarea-limit-exceed-error"
+  })
+], DaikinInputGroup.prototype, "textareaLimitExceedError", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-text-area" })
 ], DaikinInputGroup.prototype, "_textareas", 2);

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

@@ -14,31 +14,20 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LINK_CLASS_NAME = cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "gap-0.5",
-  "size-fit",
   "font-daikinSerif",
-  "rounded-[1px]",
   "relative",
-  "link-enabled:text-system-state-link-active",
-  "link-enabled:hover:text-system-state-link-hover",
-  "link-enabled:hover:bg-system-state-link-surface-hover",
-  "link-enabled:active:text-system-state-link-press",
-  "link-disabled:text-system-state-disabled",
-  "focus-visible:outline-none",
-  "focus-visible:before:block",
-  "focus-visible:before:rounded-none",
-  "focus-visible:before:absolute",
-  "focus-visible:before:inset-[-1px]",
-  "focus-visible:before:outline",
-  "focus-visible:before:outline-system-state-focus",
-  "focus-visible:before:outline-2",
-  "after:h-[1px]",
-  "after:absolute",
-  "after:inset-[auto_0_0_0]",
-  "after:bg-current"
+  "border-b",
+  "border-b-current",
+  "link-enabled:text-ddt-color-link-text-default",
+  "link-enabled:hover:text-ddt-color-link-text-hover",
+  "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
+  "link-enabled:active:text-ddt-color-link-text-press",
+  "link-enabled:active:bg-ddt-color-common-surface-brand-press",
+  "link-disabled:text-ddt-color-common-disabled",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "focus-visible:outline-offset-1"
 ])();
 let DaikinLink = class extends LitElement {
   constructor() {
@@ -49,43 +38,36 @@ let DaikinLink = class extends LitElement {
     this.showVisited = false;
   }
   render() {
-    return html`
-      <a
-        class=${LINK_CLASS_NAME}
-        href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
-        target=${ifDefined(this.target ?? void 0)}
-        aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
-      >
-        <slot name="left-icon" class="icon-size-4"></slot>
-        <slot></slot>
-        <slot name="right-icon" class="icon-size-4"></slot>
-      </a>
-    `;
+    return html`<a
+      class=${LINK_CLASS_NAME}
+      href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+      target=${ifDefined(this.target ?? void 0)}
+      aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+      ><span class="inline-flex mr-[0.125rem] align-sub">
+        <slot name="left-icon" class="icon-size-4"
+          ><span class="-mr-[0.125rem]"></span></slot></span
+      ><slot></slot
+      ><span class="inline-flex ml-[0.125rem] align-sub"
+        ><slot name="right-icon" class="icon-size-4"
+          ><span class="-ml-[0.125rem]"></span></slot></span
+    ></a>`;
   }
 };
 DaikinLink.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
-    :host {
-      display: block;
-      width: fit-content;
-      height: fit-content;
-    }
-
     :host([show-visited]:not([disabled])) a:visited {
-      color: #5c2365; /* system-state-visited-active */
-    }
-
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      color: #4a1c51; /* system-state-visited-hover */
+      color: var(--dds-color-link-text-visited-default);
     }
 
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      background-color: #f0ddf3; /* system-state-visited-hover */
+    :host([show-visited]:not([disabled])) a:visited:hover {
+      color: var(--dds-color-link-text-visited-hover);
+      background-color: var(--dds-color-link-surface-visited-hover);
     }
 
-    :host([show-visited]:not([disabled])) a:active:visited {
-      color: #37153d; /* system-state-visited-press */
+    :host([show-visited]:not([disabled])) a:visited:active {
+      color: var(--dds-color-link-text-visited-press);
+      background-color: var(--dds-color-link-surface-visited-press);
     }
   `;
 __decorateClass([

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

@@ -23,18 +23,18 @@ const INNER_CN = cva([
   "focus-visible:before:outline",
   "focus-visible:before:outline-2",
   "focus-visible:before:-outline-offset-2",
-  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-ddt-color-common-border-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
-  "link-enabled:before:active:bg-system-background-surface-press",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-ddt-color-common-surface-hover",
+  "link-enabled:before:active:bg-ddt-color-common-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
+  "[&:not(a,button)]:before:group-hover:bg-ddt-color-common-surface-hover"
 ])();
 const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
@@ -45,8 +45,8 @@ const cvaIcon = cva(["icon-size-6"], {
       right: ["pointer-events-none"]
     },
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });

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

@@ -1,4 +1,3 @@
-import { colorFeedbackPositive, colorFeedbackWarning, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
@@ -15,7 +14,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const cvaContainer = cva(
-  ["flex", "box-border", "bg-white", "overflow-hidden", "font-daikinSerif"],
+  [
+    "flex",
+    "box-border",
+    "bg-ddt-color-common-background-default",
+    "overflow-hidden",
+    "font-daikinSerif"
+  ],
   {
     variants: {
       variant: {
@@ -28,11 +33,11 @@ const cvaContainer = cva(
         inline: []
       },
       status: {
-        positive: ["border-[--colorFeedbackPositive]"],
-        negative: ["border-[--colorFeedbackNegative]"],
-        warning: ["border-[--colorFeedbackWarning]"],
-        alarm: ["border-[--colorFeedbackAlarm]"],
-        information: ["border-[--colorFeedbackInformation]"]
+        positive: ["border-ddt-color-common-success"],
+        negative: ["border-ddt-color-common-danger-default"],
+        warning: ["border-ddt-color-common-warning"],
+        alarm: ["border-ddt-color-common-alarm"],
+        information: ["border-ddt-color-common-information"]
       }
     },
     defaultVariants: {
@@ -49,26 +54,26 @@ const cvaIconContainer = cva(
     "items-center",
     "w-[2.75rem]",
     "after:size-6",
-    "after:text-white"
+    "after:text-ddt-color-common-background-default"
   ],
   {
     variants: {
       status: {
         positive: [
-          "bg-[--colorFeedbackPositive]",
+          "bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         negative: [
-          "bg-[--colorFeedbackNegative]",
+          "bg-ddt-color-common-danger-default",
           "after:i-daikin-status-negative"
         ],
         warning: [
-          "bg-[--colorFeedbackWarning]",
+          "bg-ddt-color-common-warning",
           "after:i-daikin-status-warning"
         ],
-        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
+        alarm: ["bg-ddt-color-common-alarm", "after:i-daikin-status-alarm"],
         information: [
-          "bg-[--colorFeedbackInformation]",
+          "bg-ddt-color-common-information",
           "after:i-daikin-status-information"
         ]
       }
@@ -158,12 +163,6 @@ DaikinNotification.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
-      --colorFeedbackWarning: ${unsafeCSS(colorFeedbackWarning)};
-      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
-      --colorFeedbackAlarm: #f68c54;
-      --colorFeedbackInformation: #0097e0;
-
       display: block;
     }
 

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

@@ -32,20 +32,20 @@ const cvaPageButton = cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-1",
-    "focus-visible:outline-[#0081C0]"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       active: {
         true: [
-          "text-daikinBlue-500",
-          "focus-visible:text-daikinBlue-500",
+          "text-ddt-color-common-brand-default",
+          "focus-visible:text-ddt-color-common-brand-default",
           "font-bold",
-          "hover:text-[#0081C0]",
-          "hover:bg-[#DDF3FC]",
-          "active:text-[#00689A]",
-          "active:bg-[#BBE7F9]",
-          "after:bg-daikinBlue-500",
+          "hover:text-ddt-color-common-border-focus",
+          "hover:bg-ddt-color-common-surface-selected-default",
+          "active:text-ddt-color-common-brand-press",
+          "active:bg-ddt-color-common-surface-selected-press",
+          "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
           "after:h-1",
           "after:absolute",
@@ -53,13 +53,12 @@ const cvaPageButton = cva(
           "after:top-auto"
         ],
         false: [
-          "text-inherit",
           "font-normal",
-          "text-daikinNeutral-700",
-          "active:bg-daikinNeutral-100",
-          "active:text-daikinNeutral-800",
-          "hover:bg-[#F2F2F2]",
-          "hover:text-[#515151]"
+          "text-ddt-color-common-neutral-default",
+          "active:bg-ddt-color-common-surface-neutral-press",
+          "active:text-ddt-color-common-text-primary",
+          "hover:bg-ddt-color-common-surface-neutral-hover",
+          "hover:text-ddt-color-common-neutral-hover"
         ]
       }
     }
@@ -67,7 +66,6 @@ const cvaPageButton = cva(
 );
 const cvaEllipsis = cva([
   "relative",
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -79,10 +77,10 @@ const cvaEllipsis = cva([
   "text-base",
   "not-italic",
   "font-normal",
-  "leading-6"
+  "leading-6",
+  "text-ddt-color-common-neutral-default"
 ]);
 const cvaChevronButton = cva([
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -90,21 +88,21 @@ const cvaChevronButton = cva([
   "justify-center",
   "w-12",
   "h-12",
-  "text-[#515151]",
+  "text-ddt-color-common-neutral-default",
   "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
   "leading-6",
-  "enabled:hover:bg-[#F2F2F2]",
-  "enabled:hover:text-daikinNeutral-800",
-  "enabled:active:bg-daikinNeutral-100",
-  "enabled:active:text-daikinNeutral-900",
-  "disabled:!text-daikinNeutral-400",
+  "enabled:hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:hover:text-ddt-color-common-neutral-hover",
+  "enabled:active:bg-ddt-color-common-surface-neutral-press",
+  "enabled:active:text-ddt-color-common-neutral-press",
+  "disabled:!text-ddt-color-common-disabled",
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-1",
-  "focus-visible:outline-[#0081C0]"
+  "focus-visible:outline-ddt-color-common-border-focus"
 ]);
 let DaikinPagination = class extends LitElement {
   constructor() {

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = cva(
   [
     "w-full",
-    "bg-daikinNeutral-200",
+    "bg-ddt-color-common-disabled",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -26,14 +26,17 @@ const cvaBar = cva(
   {
     variants: {
       variant: {
-        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
-        completed: ["after:w-full", "after:bg-daikinGreen-500"],
+        inprogress: [
+          "after:w-[--bar-width]",
+          "after:bg-ddt-color-common-brand-default"
+        ],
+        completed: ["after:w-full", "after:bg-ddt-color-common-success"],
         indeterminate: [
           "after:w-1/2",
-          "after:bg-daikinBlue-500",
+          "after:bg-ddt-color-common-brand-default",
           "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
         ],
-        error: ["after:w-full", "after:bg-daikinRed-500"]
+        error: ["after:w-full", "after:bg-ddt-color-common-danger-default"]
       },
       size: {
         medium: ["h-1"],
@@ -43,20 +46,27 @@ const cvaBar = cva(
   }
 );
 const cvaBarContainer = cva(
-  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  [
+    "flex",
+    "justify-between",
+    "items-center",
+    "text-ddt-color-common-text-primary",
+    "leading-5",
+    "font-bold"
+  ],
   {
     variants: {
       variant: {
         inprogress: [],
         completed: [
           "after:size-4",
-          "after:text-daikinGreen-500",
+          "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
-          "after:text-daikinRed-500",
+          "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
       }
@@ -66,10 +76,10 @@ const cvaBarContainer = cva(
 const cvaHelper = cva(["text-sm"], {
   variants: {
     variant: {
-      inprogress: [],
-      completed: [],
-      indeterminate: [],
-      error: ["text-daikinRed-500", "font-bold"]
+      inprogress: ["text-ddt-color-common-text-primary"],
+      completed: ["text-ddt-color-common-text-primary"],
+      indeterminate: ["text-ddt-color-common-text-primary"],
+      error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {
       false: ["hidden"],

package/dist/es/components/progress-indicator/daikin-progress-indicator.js

@@ -1,4 +1,3 @@
-import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { css, unsafeCSS, LitElement, html } from "lit";
 import { property, queryAssignedElements, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -35,7 +34,7 @@ let DaikinProgressIndicator = class extends LitElement {
   }
   render() {
     return html`<div
-      class="flex justify-stretch items-start w-full font-daikinSerif"
+      class="flex justify-stretch items-start gap-2 w-full font-daikinSerif"
       role="list"
     >
       <slot @slotchange=${this._handleSlotChange}></slot>
@@ -54,10 +53,6 @@ DaikinProgressIndicator.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --progress-indicator-border-color-error: ${unsafeCSS(
-  colorFeedbackNegative
-)};
-
       display: block;
       width: 100%;
     }

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -20,17 +20,18 @@ const cvaContainer = cva(
     "flex-col",
     "gap-1",
     "w-full",
-    "text-system-element-text-primary",
-    "pt-1",
+    "text-ddt-color-common-text-primary",
+    "pt-2",
     "border-t-[0.25rem]",
-    "font-daikinSerif"
+    "font-daikinSerif",
+    "leading-[130%]"
   ],
   {
     variants: {
       status: {
-        unfinished: ["border-system-state-disabled"],
-        inprogress: ["border-system-state-primary-active"],
-        finished: ["border-system-state-primary-active"]
+        unfinished: ["border-ddt-color-common-disabled"],
+        inprogress: ["border-ddt-color-common-brand-default"],
+        finished: ["border-ddt-color-common-brand-default"]
       }
     }
   }
@@ -43,22 +44,21 @@ let DaikinProgressIndicatorItem = class extends LitElement {
   }
   render() {
     return html`<div
-      class=${cvaContainer({
-      status: this.status
-    })}
+      class=${cvaContainer({ status: this.status })}
       role="listitem"
       aria-current=${ifDefined(this.current ? "step" : void 0)}
     >
-      <div class="flex items-center gap-2 font-bold leading-5">
+      <div class="flex justify-between gap-1 font-bold">
         <slot></slot>
         ${this.status === "finished" ? html`
               <span
-                class="size-4 i-daikin-status-success text-system-state-primary-active"
+                role="img"
+                class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
                 aria-label="Completed"
               ></span>
             ` : nothing}
       </div>
-      <slot name="description" class="text-sm leading-[1.1rem]"></slot>
+      <slot name="description" class="text-sm"></slot>
     </div>`;
   }
 };