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

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

@@ -3,7 +3,7 @@ import { unsafeCSS, css, nothing, html } from "lit";
 import { queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -18,16 +18,51 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = cva(["flex", "items-center", "font-bold"], {
-  variants: {
-    disabled: {
-      false: [],
-      true: ["text-ddt-color-common-disabled"]
+const cvaLayout = cva(
+  ["flex", "w-full", "text-ddt-color-common-text-primary"],
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col", "justify-center", "gap-(--dds-gap-20)"],
+        horizontal: ["flex-row", "gap-6"]
+      }
+    }
+  }
+);
+const cvaContentArea = cva(
+  ["flex", "flex-col", "gap-(--dds-gap-20)", "natural-break"],
+  {
+    variants: {
+      orientation: {
+        vertical: [],
+        horizontal: ["w-50", "shrink-0"]
+      }
     }
   }
-});
+);
+const cvaLabel = cva(
+  [
+    "flex",
+    "items-center",
+    "font-bold",
+    "text-(length:--dds-font-size-label-text)"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [],
+        true: ["text-ddt-color-common-disabled"]
+      }
+    }
+  }
+);
 const cvaHelper = cva(
-  ["flex", "gap-1", "items-center", "text-(length:--dds-font-size-350)"],
+  [
+    "flex",
+    "gap-1",
+    "items-center",
+    "text-(length:--dds-font-size-helper-text)"
+  ],
   {
     variants: {
       type: {
@@ -53,7 +88,7 @@ const cvaHelper = cva(
   }
 );
 const cvaCounter = cva(
-  ["text-(length:--dds-font-size-350)", "font-bold", "ml-auto"],
+  ["text-(length:--dds-font-size-helper-text)", "font-bold", "ml-auto"],
   {
     variants: {
       variant: {
@@ -72,6 +107,7 @@ let DaikinInputGroup = class extends DDSElement {
     this.required = null;
     this.error = null;
     this.disabled = false;
+    this.readonly = false;
     this.textareaMaxCount = null;
     this.textareaLimitExceedError = null;
     this._textareaCount = null;
@@ -120,6 +156,7 @@ let DaikinInputGroup = class extends DDSElement {
         case "error":
         case "textareaLimitExceedError":
           return html`<daikin-status-message
+            class="part-status-message:text-(length:--dds-font-size-helper-text)"
             status="negative"
             status-message-role="alert"
             size="small"
@@ -135,30 +172,37 @@ let DaikinInputGroup = class extends DDSElement {
       }
     };
     return html`<fieldset class="contents" ?disabled=${this.disabled}>
-      <label
-        class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary"
-      >
-        <div class="flex items-center flex-wrap 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-(length:--dds-font-size-300)"
-              >
-                ${this.required}
-              </span>` : nothing}
+      <label class=${cvaLayout({ orientation: this.orientation })}>
+        <div class=${cvaContentArea({ orientation: this.orientation })}>
+          <div class="flex items-center flex-wrap gap-(--dds-gap-10) 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-(length:--dds-font-size-300)"
+                >
+                  ${this.required}
+                </span>` : nothing}
+          </div>
+          ${formatHelperText(helperTextVariant, helperText)}
         </div>
-        ${formatHelperText(helperTextVariant, helperText)}
-        <slot
-          @slotchange=${this._handleSlotChange}
-          @input=${this._handleInput}
-        ></slot>
-        ${this.textareaMaxCount != null && this._textareaCount != null ? html`<span
-              class=${cvaCounter({
+        ${this.textareaMaxCount != null ? html`<div class="flex flex-col gap-2 w-full min-w-0">
+              <slot
+                @slotchange=${this._handleSlotChange}
+                @input=${this._handleInput}
+              ></slot>
+              ${this._textareaCount != null ? html`<div class="flex">
+                    <span
+                      class=${cvaCounter({
       variant: this.disabled ? "disabled" : this.textareaLimitExceeded ? "error" : "normal"
     })}
-              >${this._textareaCount}/${this.textareaMaxCount}</span
-            >` : nothing}
+                      >${this._textareaCount}/${this.textareaMaxCount}</span
+                    >
+                  </div>` : nothing}
+            </div>` : html`<slot
+              @slotchange=${this._handleSlotChange}
+              @input=${this._handleInput}
+            ></slot>`}
       </label>
     </fieldset>`;
   }
@@ -174,6 +218,17 @@ DaikinInputGroup.styles = css`
       width: 100%;
     }
   `;
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: oneOf([
+      "vertical",
+      "horizontal"
+    ])
+  })
+], DaikinInputGroup.prototype, "orientation", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "label", 2);
@@ -189,6 +244,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinInputGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinInputGroup.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], DaikinInputGroup.prototype, "textareaMaxCount", 2);
@@ -204,7 +262,7 @@ __decorateClass([
 ], DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   queryAssignedElements({
-    selector: "daikin-checkbox-group,daikin-combobox,daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-area,daikin-text-field,daikin-time-picker"
+    selector: "daikin-checkbox-group,daikin-combobox,daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-area,daikin-text-field,daikin-time-picker,daikin-text-masked-field"
   })
 ], DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

package/dist/es/components/list-item/daikin-list-item.d.ts

@@ -29,6 +29,15 @@ import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js"
  *
  * ```html
  * <daikin-list-item>List item label</daikin-list-item>
+ * <!-- With description -->
+ * <daikin-list-item>
+ *   <div class="flex flex-col gap-0.5">
+ *     <span>List item label</span>
+ *     <span class="text-xs text-(--dds-color-common-text-secondary)">
+ *       Description
+ *     </span>
+ *   </div>
+ * </daikin-list-item>
  * ```
  */
 export declare class DaikinListItem extends DDSElement implements DDSNavigable {

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

@@ -42,27 +42,38 @@ const INNER_CN = cva([
   // For text
   "group-hover:[&:not(a,button)]:before:bg-ddt-color-common-surface-hover"
 ])();
-const cvaContent = cva(["block", "pl-2", "pr-3", "mt-0.5", "text-left"], {
-  variants: {
-    disabled: {
-      false: ["text-ddt-color-common-text-primary"],
-      true: ["text-ddt-color-common-disabled"]
+const cvaContent = cva(
+  [
+    "block",
+    "pt-(--dds-padding-05)",
+    "pl-(--dds-space-100)",
+    "pr-(--dds-space-300)",
+    "pb-px",
+    "text-left"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
+      }
     }
   }
-});
+);
 const WRAPPER = cva([
   "group",
   "flex",
   "justify-between",
   "items-start",
+  "p-(--dds-padding-30)",
   "w-full",
-  "min-h-12",
-  "p-3",
+  "p-(--dds-padding-30)",
+  "text-(length:--dds-font-size-label-text)",
   "text-left",
   "relative",
   "natural-break"
 ])();
-const cvaIcon = cva(["icon-size-6", "slotted:flex-none"], {
+const cvaIcon = cva(["icon-size-token", "slotted:flex-none"], {
   variants: {
     position: {
       left: [],
@@ -116,7 +127,7 @@ let DaikinListItem = class extends DDSElement {
   }
   render() {
     const disabled = this._disabled;
-    const content = html`<span class="flex items-start w-full relative">
+    const content = html`<span class="flex items-start w-full relative gap-1">
       <slot
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}

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

@@ -37,8 +37,8 @@ export declare class DaikinLogo extends DDSElement implements DDSNavigable {
      */
     logoAriaLabel: string | null;
     /**
-     * Specify the the logo mode.
-     * Notice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.
+     * Specify the logo mode.
+     * Notice: "negative" mode can only be used in dark mode.
      *
      * @default "positive"
      */

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

@@ -100,7 +100,7 @@ DaikinLogo.styles = css`
     :host {
       display: inline-flex;
       width: 171px;
-      aspect-ratio: 171 / 37;
+      aspect-ratio: 171 / 36;
     }
   `;
 __decorateClass([

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

@@ -32,7 +32,7 @@ const cvaMenu = cva([
   "left-(--floating-x,0)",
   "top-(--floating-y,0)",
   "w-max",
-  "py-2",
+  "py-(--dds-padding-20)",
   "border",
   "rounded-lg",
   "absolute",
@@ -246,7 +246,7 @@ let DaikinMenu = class extends DDSElement {
         id="menu"
         part="menu"
         class=${cvaMenu()}
-        popover=${this.popoverValue}
+        .popover=${this.popoverValue}
         @click=${this._handleClick}
         @beforetoggle=${this._handleBeforeToggle}
         @toggle=${this._handleToggle}

package/dist/es/components/modal-header/daikin-modal-header.d.ts

@@ -6,6 +6,7 @@ import { DDSElement } from "../../base/index.js";
  * - `daikin-modal` > `daikin-modal-header`
  *
  * @slot description - An optional slot for description.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the title. Place a `daikin-icon` element or something similar.
  * @slot - A slot for modal title.
  *
  * @example

package/dist/es/components/modal-header/daikin-modal-header.js

@@ -50,10 +50,16 @@ let DaikinModalHeader = class extends DDSElement {
     );
   }
   render() {
-    return html`<div class="flex w-full gap-2">
-      <div class="flex-1 flex flex-col pt-0.5 gap-2 natural-break">
-        <slot class=${cvaTitle}></slot>
-        <slot name="description" class=${cvaDescription}></slot>
+    return html`<div class="flex w-full gap-2 justify-between">
+      <div class="flex flex-row gap-1 pt-0.5">
+        <slot
+          name="left-icon"
+          class="flex-none icon-size-6 text-ddt-color-common-text-primary"
+        ></slot>
+        <div class="flex-1 flex flex-col gap-2 natural-break">
+          <slot class=${cvaTitle}></slot>
+          <slot name="description" class=${cvaDescription}></slot>
+        </div>
       </div>
       ${this.withCloseButton ? html`<div class="flex-none">
             <daikin-icon-button

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

@@ -43,6 +43,15 @@ import { DDSElement } from "../../base/index.js";
  */
 export declare class DaikinNavigation extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * The horizontal padding of all navigation items in the navigation.
+     * - `wide`: 2rem;
+     * - `narrow`: 1rem;
+     * - `medium`: 1.5rem;
+     *
+     * @default "wide"
+     */
+    horizontalPadding?: "wide" | "narrow" | "medium";
     /**
      * The aria-label of the navigation.
      */

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

@@ -2,7 +2,7 @@ import { unsafeCSS, css, html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -36,8 +36,29 @@ DaikinNavigation.styles = css`
       display: flex;
       min-width: 100%;
       width: max-content;
+
+      --ddc-navigation-horizontal-padding: 2rem;
+    }
+    :host([horizontal-padding="medium"]) {
+      --ddc-navigation-horizontal-padding: 1.5rem;
+    }
+    :host([horizontal-padding="narrow"]) {
+      --ddc-navigation-horizontal-padding: 1rem;
     }
   `;
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "wide",
+    isAllowedValue: oneOf([
+      "wide",
+      "narrow",
+      "medium"
+    ]),
+    attribute: "horizontal-padding"
+  })
+], DaikinNavigation.prototype, "horizontalPadding", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "navigation-aria-label" })
 ], DaikinNavigation.prototype, "navigationAriaLabel", 2);

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

@@ -23,13 +23,11 @@ const cvaBaseClasses = [
   "relative",
   "h-full",
   "w-full",
-  "gap-1",
   "justify-center",
   "items-center",
-  "min-h-12",
-  "px-8",
-  "pt-2",
-  "pb-3",
+  "px-(--ddc-navigation-horizontal-padding,2rem)",
+  "py-(--dds-padding-30)",
+  "text-(length:--dds-font-size-label-text)",
   "font-bold",
   "focus-visible:outline-hidden",
   "focus-visible:before:absolute",
@@ -73,8 +71,14 @@ const cvaBaseVariants = {
     }
   }
 };
-const cvaLinkItem = cva(cvaBaseClasses, cvaBaseVariants);
-const cvaMenuItem = cva(cvaBaseClasses, cvaBaseVariants);
+const cvaLinkItem = cva([...cvaBaseClasses, "gap-1"], cvaBaseVariants);
+const cvaMenuItem = cva(
+  [
+    ...cvaBaseClasses,
+    "gap-(--ddc-navigation-menu-item-gap,var(--dds-space-100))"
+  ],
+  cvaBaseVariants
+);
 let DaikinNavigationItem = class extends DDSElement {
   constructor() {
     super();
@@ -124,9 +128,10 @@ let DaikinNavigationItem = class extends DDSElement {
               aria-disabled=${ifDefined(linkDisabled ? "true" : void 0)}
               ><slot
                 name="left-icon"
-                class="icon-size-6 slotted:flex-none"
+                class="icon-size-token slotted:flex-none"
               ></slot
-              ><span class="px-1 natural-break text-left"><slot></slot></span
+              ><span class="px-1 natural-break text-left leading-normal"
+                ><slot></slot></span
             ></a>
           </div>
         `;
@@ -147,11 +152,12 @@ let DaikinNavigationItem = class extends DDSElement {
             >
               <slot
                 name="left-icon"
-                class="icon-size-6 slotted:flex-none"
+                class="icon-size-token slotted:flex-none"
               ></slot
-              ><span class="px-1 natural-break text-left"><slot></slot></span
+              ><span class="px-1 natural-break text-left leading-normal"
+                ><slot></slot></span
               ><span
-                class="icon-[daikin--chevron-down] size-6 flex-none rotate-(--chevron-rotation)"
+                class="icon-[daikin--chevron-down] size-(--dds-icon) flex-none rotate-(--chevron-rotation)"
               ></span>
             </button>
           </div>
@@ -173,8 +179,6 @@ DaikinNavigationItem.styles = css`
     :host {
       display: block;
       width: fit-content;
-
-      --chevron-rotation: 0deg;
     }
   `;
 __decorateClass([

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

@@ -35,6 +35,17 @@ export declare class DaikinPagination extends DDSElement {
      * If a value less than 5 is specified, it will be treated as 5.
      */
     window: number;
+    /**
+     * Size of the pagination.
+     *
+     * - `medium`: Default size. Page button min size is `48px`.
+     * - `small`: Compact size. Page button min size is `36px`.
+     *
+     * Page buttons grow horizontally when content gets wider while keeping horizontal padding.
+     *
+     * On mobile viewport (`<= 767px`), pagination is always rendered in the small size.
+     */
+    size: "small" | "medium";
     private _goto;
     private _gotoOffset;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -27,12 +27,13 @@ const cvaPageButton = cva(
     "relative",
     "items-center",
     "justify-center",
-    "min-w-12",
-    "min-h-12",
+    "min-w-[var(--ddc-pagination-item-size)]",
+    "min-h-[var(--ddc-pagination-item-size)]",
+    "h-[var(--ddc-pagination-item-size)]",
     "p-1",
-    "text-base",
+    "text-[length:var(--ddc-pagination-font-size)]",
     "not-italic",
-    "leading-6",
+    "leading-[var(--ddc-pagination-line-height)]",
     "bg-clip-content",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
@@ -52,9 +53,9 @@ const cvaPageButton = cva(
           "active:bg-ddt-color-common-surface-brand-press",
           "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
-          "after:h-1",
+          "after:h-[var(--ddc-pagination-active-indicator-size)]",
           "after:absolute",
-          "after:inset-1",
+          "after:inset-[var(--ddc-pagination-active-indicator-size)]",
           "after:top-auto"
         ],
         false: [
@@ -76,12 +77,14 @@ const cvaEllipsis = cva([
   "flex",
   "items-center",
   "justify-center",
-  "w-12",
-  "h-12",
-  "text-base",
+  "min-w-[var(--ddc-pagination-item-size)]",
+  "min-h-[var(--ddc-pagination-item-size)]",
+  "w-[var(--ddc-pagination-item-size)]",
+  "h-[var(--ddc-pagination-item-size)]",
+  "text-[length:var(--ddc-pagination-font-size)]",
   "not-italic",
   "font-normal",
-  "leading-6",
+  "leading-[var(--ddc-pagination-line-height)]",
   "text-ddt-color-common-neutral-default"
 ]);
 const cvaChevronButton = cva([
@@ -90,13 +93,15 @@ const cvaChevronButton = cva([
   "flex",
   "items-center",
   "justify-center",
-  "w-12",
-  "h-12",
+  "min-w-[var(--ddc-pagination-item-size)]",
+  "min-h-[var(--ddc-pagination-item-size)]",
+  "w-[var(--ddc-pagination-item-size)]",
+  "h-[var(--ddc-pagination-item-size)]",
   "text-ddt-color-common-neutral-default",
-  "text-base",
+  "text-[length:var(--ddc-pagination-font-size)]",
   "not-italic",
   "font-normal",
-  "leading-6",
+  "leading-[var(--ddc-pagination-line-height)]",
   "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",
@@ -113,6 +118,7 @@ let DaikinPagination = class extends DDSElement {
     this.current = 1;
     this.total = 1;
     this.window = 5;
+    this.size = "medium";
   }
   _goto(page) {
     const newPage = Math.max(Math.min(page, this.total), 1);
@@ -149,16 +155,18 @@ let DaikinPagination = class extends DDSElement {
       <div
         aria-label=${landmarkLabel}
         role="navigation"
-        class="inline-flex flex-wrap"
+        class="inline-flex flex-wrap max-w-full"
       >
         <button
           class=${cvaChevron}
           type="button"
           aria-label="Go to the previous page."
-          ?disabled=${this.current === 1}
+          ?disabled=${this.total <= 1 || this.current === 1}
           @click=${() => this._gotoOffset(-1)}
         >
-          <span class="icon-[daikin--pagination-chevron-left] w-4 h-4"></span>
+          <span
+            class="icon-[daikin--chevron-left] w-(--ddc-pagination-icon-size) h-(--ddc-pagination-icon-size)"
+          ></span>
         </button>
         ${repeat(
       pageArray,
@@ -199,10 +207,12 @@ let DaikinPagination = class extends DDSElement {
           type="button"
           class=${cvaChevron}
           aria-label="Go to the next page."
-          ?disabled=${this.current === this.total}
+          ?disabled=${this.total <= 1 || this.current === this.total}
           @click=${() => this._gotoOffset(1)}
         >
-          <span class="icon-[daikin--pagination-chevron-right] w-4 h-4"></span>
+          <span
+            class="icon-[daikin--chevron-right] w-(--ddc-pagination-icon-size) h-(--ddc-pagination-icon-size)"
+          ></span>
         </button>
       </div>
     `;
@@ -213,6 +223,29 @@ DaikinPagination.styles = css`
 
     :host {
       display: inline-flex;
+      --ddc-pagination-item-size: 3rem;
+      --ddc-pagination-font-size: 1rem;
+      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+      --ddc-pagination-active-indicator-size: 0.25rem;
+      --ddc-pagination-icon-size: 2rem;
+    }
+
+    :host([size="small"]) {
+      --ddc-pagination-item-size: 2.25rem;
+      --ddc-pagination-font-size: 0.875rem;
+      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+      --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
+      --ddc-pagination-icon-size: 1.5rem;
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        --ddc-pagination-item-size: 2.25rem;
+        --ddc-pagination-font-size: var(--text-sm);
+        --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+        --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
+        --ddc-pagination-icon-size: 1.5rem;
+      }
     }
   `;
 __decorateClass([
@@ -224,6 +257,14 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, reflect: true })
 ], DaikinPagination.prototype, "window", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: oneOf(["small", "medium"])
+  })
+], DaikinPagination.prototype, "size", 2);
 DaikinPagination = __decorateClass([
   ddsElement("daikin-pagination")
 ], DaikinPagination);

package/dist/es/components/progress-bar/daikin-progress-bar.d.ts

@@ -21,6 +21,7 @@ type ProgressBarVariantProps = MergeVariantProps<typeof cvaBar | typeof cvaHelpe
  * - `"error"`: In addition to `"inprogress"`, an error icon is added and the color becomes red. In this variant, the `value` is ignored and the bar always expands to the full width.
  *
  * @slot - A slot for label text displayed at the top of the progress bar.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *