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

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

@@ -17,12 +17,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "block",
   "size-4",
-  "border-system-state-neutral-active",
+  "border-ddt-color-common-neutral-default",
   "border-2",
   "rounded-sm",
   "relative",
   "appearance-none",
-  "before:text-system-element-text-inverse",
+  "before:text-ddt-color-common-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
@@ -32,37 +32,37 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-system-state-focus",
-  "enabled:group-hover:border-system-state-neutral-hover",
-  "enabled:group-hover:bg-system-background-surface-hover",
-  "enabled:group-active:border-system-state-neutral-press",
-  "enabled:group-active:bg-system-background-surface-press",
-  "enabled:checked:border-system-state-primary-active",
-  "enabled:checked:bg-system-state-primary-active",
-  "enabled:checked:group-hover:bg-system-state-primary-hover",
-  "enabled:checked:group-hover:border-system-state-primary-hover",
-  "enabled:checked:group-hover:before:text-system-element-text-inverse",
-  "enabled:checked:group-active:bg-system-state-primary-press",
-  "enabled:checked:group-active:border-system-state-primary-press",
-  "enabled:checked:group-active:before:text-system-element-text-inverse",
-  "enabled:indeterminate:bg-system-state-primary-active",
-  "enabled:indeterminate:border-system-state-primary-active",
-  "enabled:indeterminate:group-hover:bg-system-state-primary-hover",
-  "enabled:indeterminate:group-hover:border-system-state-primary-hover",
-  "enabled:indeterminate:group-hover:before:text-system-element-text-inverse",
-  "enabled:indeterminate:group-active:bg-system-state-primary-press",
-  "enabled:indeterminate:group-active:border-system-state-primary-press",
-  "enabled:indeterminate:group-active:before:text-system-element-text-inverse",
-  "disabled:border-system-state-disabled",
-  "disabled:bg-system-element-text-inverse",
-  "disabled:checked:bg-system-state-disabled",
-  "disabled:indeterminate:bg-system-state-disabled"
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:group-hover:border-ddt-color-common-neutral-hover",
+  "enabled:group-hover:bg-ddt-color-common-surface-hover",
+  "enabled:group-active:border-ddt-color-common-neutral-press",
+  "enabled:group-active:bg-ddt-color-common-surface-press",
+  "enabled:checked:border-ddt-color-common-brand-default",
+  "enabled:checked:bg-ddt-color-common-brand-default",
+  "enabled:checked:group-hover:bg-ddt-color-common-brand-hover",
+  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:checked:group-hover:before:text-ddt-color-common-text-inverse",
+  "enabled:checked:group-active:bg-ddt-color-common-brand-press",
+  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "enabled:checked:group-active:before:text-ddt-color-common-text-inverse",
+  "enabled:indeterminate:bg-ddt-color-common-brand-default",
+  "enabled:indeterminate:border-ddt-color-common-brand-default",
+  "enabled:indeterminate:group-hover:bg-ddt-color-common-brand-hover",
+  "enabled:indeterminate:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:indeterminate:group-hover:before:text-ddt-color-common-text-inverse",
+  "enabled:indeterminate:group-active:bg-ddt-color-common-brand-press",
+  "enabled:indeterminate:group-active:border-ddt-color-common-brand-press",
+  "enabled:indeterminate:group-active:before:text-ddt-color-common-text-inverse",
+  "disabled:border-ddt-color-common-disabled",
+  "disabled:bg-ddt-color-common-text-inverse",
+  "disabled:checked:bg-ddt-color-common-disabled",
+  "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
 const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
   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"]
     }
   }
 });

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

@@ -26,7 +26,7 @@ const cvaButton = classVarianceAuthority.cva(
     "w-full",
     "h-full",
     "min-h-12",
-    "bg-white",
+    "bg-ddt-color-common-background-default",
     "p-3",
     "border",
     "border-[--color-base]",
@@ -41,8 +41,8 @@ const cvaButton = classVarianceAuthority.cva(
     "-outline-offset-2",
     "focus-visible:outline-2",
     "focus-visible:outline-[--color-focus]",
-    "disabled:text-system-state-disabled",
-    "disabled:border-system-state-disabled",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:border-ddt-color-common-disabled",
     "after:i-daikin-dropdown-chevron-down",
     "after:w-6",
     "after:h-6",
@@ -51,31 +51,31 @@ const cvaButton = classVarianceAuthority.cva(
     "after:top-0",
     "after:bottom-0",
     "after:right-3",
-    "enabled:after:text-system-element-text-primary",
-    "disabled:after:text-system-state-disabled"
+    "enabled:after:text-ddt-color-common-text-primary",
+    "disabled:after:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       open: {
         false: [
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:bg-system-background-surface-press"
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-surface-press"
         ],
-        true: ["enabled:bg-system-background-surface-press"]
+        true: ["enabled:bg-ddt-color-common-surface-press"]
       },
       error: {
         false: [
-          "var-color-system-state-neutral-active/color-base",
-          "var-color-system-state-focus/color-focus"
+          "var-color-ddt-color-common-neutral-default/color-base",
+          "var-color-ddt-color-common-border-focus/color-focus"
         ],
         true: [
-          "var-color-system-state-error-active/color-base",
-          "var-color-system-state-error-active/color-focus"
+          "var-color-ddt-color-common-danger-default/color-base",
+          "var-color-ddt-color-common-danger-default/color-focus"
         ]
       },
       placeholder: {
-        false: ["text-system-element-text-primary"],
-        true: ["text-system-element-text-secondary"]
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-text-secondary"]
       }
     }
   }

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

@@ -21,8 +21,8 @@ const cvaOption = classVarianceAuthority.cva(
     "justify-between",
     "w-full",
     "min-h-12",
-    "text-system-element-text-primary",
-    "bg-system-element-text-inverse",
+    "text-ddt-color-common-text-primary",
+    "bg-ddt-color-common-background-default",
     "p-3",
     "font-daikinSerif",
     "leading-5",
@@ -30,20 +30,20 @@ const cvaOption = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus",
-    "disabled:text-system-state-disabled"
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       selected: {
         false: [
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:bg-system-background-surface-press"
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-surface-press"
         ],
         true: [
-          "enabled:bg-system-background-surface-selected",
-          "enabled:hover:bg-system-background-surface-selectedHover",
-          "enabled:active:bg-system-background-surface-selectedActive",
+          "enabled:bg-ddt-color-common-surface-selected-default",
+          "enabled:hover:bg-ddt-color-common-surface-selected-hover",
+          "enabled:active:bg-ddt-color-common-surface-selected-press",
           "after:i-daikin-dropdown-check",
           "after:size-6"
         ]

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

@@ -23,8 +23,8 @@ const cvaIcon = classVarianceAuthority.cva(["block"], {
   variants: {
     icon: iconClassMap,
     color: {
-      black: ["text-black"],
-      white: ["text-white"],
+      black: ["text-ddt-color-common-background-overlay"],
+      white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
@@ -65,24 +65,24 @@ exports.DaikinIcon.styles = lit.css`
 
     :host {
       display: inline-block;
-      width: var(--dds-icon-size, 100%);
-      height: var(--dds-icon-size, 100%);
+      width: var(--ddc-icon-size, 100%);
+      height: var(--ddc-icon-size, 100%);
     }
 
     :host([size="s"]) {
-      --dds-icon-size: 12px;
+      --ddc-icon-size: 12px;
     }
 
     :host([size="m"]) {
-      --dds-icon-size: 16px;
+      --ddc-icon-size: 16px;
     }
 
     :host([size="l"]) {
-      --dds-icon-size: 20px;
+      --ddc-icon-size: 20px;
     }
 
     :host([size="xl"]) {
-      --dds-icon-size: 24px;
+      --ddc-icon-size: 24px;
     }
   `;
 __decorateClass([

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

@@ -5,7 +5,7 @@ export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
     icon?: string | number | null | undefined;
-    color?: "default" | "black" | "white" | "current" | null | undefined;
+    color?: "current" | "default" | "black" | "white" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
@@ -17,7 +17,7 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * If you try to use an icon that does not exist, a blank space will be displayed.
  * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
  *
- * @cssprop [--dds-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
  *
  * @example
  *
@@ -41,7 +41,7 @@ export declare class DaikinIcon extends LitElement {
     color: IconVariantProps["color"];
     /**
      * Specify the size of the icon.
-     * If "current" is set, `--dds-icon-size` CSS variable will be used. `--dds-icon-size` may be set by the parent component such as `daikin-icon-button`.
+     * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
     render(): import('lit-html').TemplateResult<1>;

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

@@ -21,8 +21,7 @@ const cvaIconButton = classVarianceAuthority.cva(
     "inline-flex",
     "justify-center",
     "items-center",
-    "w-8",
-    "h-8",
+    "size-full",
     "font-daikinSerif",
     "font-bold",
     "rounded",
@@ -32,37 +31,37 @@ const cvaIconButton = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
-    "focus-visible:outline-system-state-focus",
+    "focus-visible:outline-ddt-color-common-border-focus",
     "var-color-transparent/color-secondary",
-    "link-disabled:var-color-system-state-disabled/color-primary"
+    "link-disabled:var-color-ddt-color-common-disabled/color-primary"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-system-state-primary-active/color-primary",
-          "link-enabled:hover:var-color-system-state-primary-hover/color-primary",
-          "link-enabled:hover:var-color-system-state-primary-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-primary-press/color-primary",
-          "link-enabled:active:var-color-system-state-primary-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-brand-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-brand-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-brand-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-brand-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-brand-press/color-secondary"
         ],
         neutral: [
-          "link-enabled:var-color-system-state-neutral-active/color-primary",
-          "link-enabled:hover:var-color-system-state-neutral-hover/color-primary",
-          "link-enabled:hover:var-color-system-background-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-neutral-press/color-primary",
-          "link-enabled:active:var-color-system-background-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-neutral-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary"
         ],
         danger: [
-          "link-enabled:var-color-system-state-error-active/color-primary",
-          "link-enabled:hover:var-color-system-state-error-hover/color-primary",
-          "link-enabled:hover:var-color-system-state-error-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-error-press/color-primary",
-          "link-enabled:active:var-color-system-state-error-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-danger-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-danger-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-danger-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-danger-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-danger-press/color-secondary"
         ]
       },
       variant: {
-        fill: ["text-white", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",
@@ -134,6 +133,8 @@ exports.DaikinIconButton.styles = lit.css`
 
     :host {
       display: inline-block;
+      width: 2rem;
+      height: 2rem;
     }
   `;
 __decorateClass([

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

@@ -5,6 +5,9 @@ const daikinAccordionItem = require("./accordion-item/daikin-accordion-item.cjs"
 const daikinBreadcrumb = require("./breadcrumb/daikin-breadcrumb.cjs");
 const daikinBreadcrumbItem = require("./breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./button/daikin-button.cjs");
+const daikinCard = require("./card/daikin-card.cjs");
+const daikinCardFooter = require("./card-footer/daikin-card-footer.cjs");
+const daikinCardHeader = require("./card-header/daikin-card-header.cjs");
 const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
 const daikinDropdown = require("./dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./dropdown-item/daikin-dropdown-item.cjs");
@@ -31,6 +34,9 @@ const daikinTextArea = require("./text-area/daikin-text-area.cjs");
 const daikinTextField = require("./text-field/daikin-text-field.cjs");
 const daikinToggle = require("./toggle/daikin-toggle.cjs");
 const daikinTooltip = require("./tooltip/daikin-tooltip.cjs");
+const daikinTree = require("./tree/daikin-tree.cjs");
+const daikinTreeItem = require("./tree-item/daikin-tree-item.cjs");
+const daikinTreeSection = require("./tree-section/daikin-tree-section.cjs");
 Object.defineProperty(exports, "DaikinAccordion", {
   enumerable: true,
   get: () => daikinAccordion.DaikinAccordion
@@ -51,6 +57,18 @@ Object.defineProperty(exports, "DaikinButton", {
   enumerable: true,
   get: () => daikinButton.DaikinButton
 });
+Object.defineProperty(exports, "DaikinCard", {
+  enumerable: true,
+  get: () => daikinCard.DaikinCard
+});
+Object.defineProperty(exports, "DaikinCardFooter", {
+  enumerable: true,
+  get: () => daikinCardFooter.DaikinCardFooter
+});
+Object.defineProperty(exports, "DaikinCardHeader", {
+  enumerable: true,
+  get: () => daikinCardHeader.DaikinCardHeader
+});
 Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
@@ -156,3 +174,16 @@ Object.defineProperty(exports, "DaikinTooltip", {
   enumerable: true,
   get: () => daikinTooltip.DaikinTooltip
 });
+Object.defineProperty(exports, "DaikinTree", {
+  enumerable: true,
+  get: () => daikinTree.DaikinTree
+});
+Object.defineProperty(exports, "DaikinTreeItem", {
+  enumerable: true,
+  get: () => daikinTreeItem.DaikinTreeItem
+});
+exports.cvaTreeChildren = daikinTreeItem.cvaTreeChildren;
+Object.defineProperty(exports, "DaikinTreeSection", {
+  enumerable: true,
+  get: () => daikinTreeSection.DaikinTreeSection
+});

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

@@ -3,6 +3,9 @@ export * from "./accordion-item/index.cjs";
 export * from "./breadcrumb/index.cjs";
 export * from "./breadcrumb-item/index.cjs";
 export * from "./button/index.cjs";
+export * from "./card/index.cjs";
+export * from "./card-footer/index.cjs";
+export * from "./card-header/index.cjs";
 export * from "./checkbox/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
@@ -29,3 +32,6 @@ export * from "./text-area/index.cjs";
 export * from "./text-field/index.cjs";
 export * from "./toggle/index.cjs";
 export * from "./tooltip/index.cjs";
+export * from "./tree/index.cjs";
+export * from "./tree-item/index.cjs";
+export * from "./tree-section/index.cjs";

package/dist/cjs-dev/components/input-group/daikin-input-group.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
@@ -19,41 +18,42 @@ const cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold"
   variants: {
     disabled: {
       false: [],
-      true: ["text-system-state-disabled"]
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
 const cvaHelper = classVarianceAuthority.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 = classVarianceAuthority.cva(["text-sm", "font-bold"], {
+const cvaCounter = classVarianceAuthority.cva(["text-sm", "font-bold", "ml-auto"], {
   variants: {
-    disabled: {
-      false: ["text-system-element-text-secondary"],
-      true: ["text-system-state-disabled"]
-    }
-  }
-});
-const cvaCounterValueLength = classVarianceAuthority.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"]
     }
   }
 });
@@ -66,8 +66,12 @@ exports.DaikinInputGroup = class DaikinInputGroup extends lit.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];
@@ -84,40 +88,41 @@ exports.DaikinInputGroup = class DaikinInputGroup extends lit.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 lit.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 ? lit.html`<span class=${cvaLabel({ disabled: this.disabled })}>
-                  ${this.label}
-                </span>` : lit.nothing}
-            ${this.required && !this.disabled ? lit.html`<span class="text-system-state-error-active text-xs">
-                  ${this.required}
-                </span>` : lit.nothing}
-          </div>
-          ${this.textareaMaxCount != null && this._textareaCount != null ? lit.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>
-              ` : lit.nothing}
+        <div class="flex items-center gap-1 font-bold">
+          ${this.label ? lit.html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                ${this.label}
+              </span>` : lit.nothing}
+          ${this.required && !this.disabled ? lit.html`<span class="text-ddt-color-common-danger-default text-xs">
+                ${this.required}
+              </span>` : lit.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>
@@ -125,6 +130,12 @@ exports.DaikinInputGroup = class DaikinInputGroup extends lit.LitElement {
           @slotchange=${this._handleSlotChange}
           @input=${this._handleInput}
         ></slot>
+        ${this.textareaMaxCount != null && this._textareaCount != null ? lit.html`<span
+              class=${cvaCounter({
+      variant: this.disabled ? "disabled" : this.textareaLimitExceeded ? "error" : "normal"
+    })}
+              >${this._textareaCount}/${this.textareaMaxCount}</span
+            >` : lit.nothing}
       </label>
     </fieldset>`;
   }
@@ -136,8 +147,6 @@ exports.DaikinInputGroup.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --input-group-border-color-error: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
-
       display: block;
       width: 100%;
     }
@@ -160,6 +169,13 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], exports.DaikinInputGroup.prototype, "textareaMaxCount", 2);
+__decorateClass([
+  decorators_js.property({
+    type: String,
+    reflect: true,
+    attribute: "textarea-limit-exceed-error"
+  })
+], exports.DaikinInputGroup.prototype, "textareaLimitExceedError", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-text-area" })
 ], exports.DaikinInputGroup.prototype, "_textareas", 2);

package/dist/cjs-dev/components/input-group/daikin-input-group.d.cts

@@ -111,12 +111,21 @@ export declare class DaikinInputGroup extends LitElement {
      */
     disabled: boolean;
     /**
-     * Maximum value to display on the counter. When `null`, the counter will be hidden.
+     * The maximum number of characters that can be input into the text area.
+     * If set, a counter will be displayed at the bottom of the text area.
+     * Users can enter more characters than the limit, but in that case the counter will turn red and an error message will be displayed (if specified) to indicate that the limit has been exceeded.
      */
     textareaMaxCount: number | null;
+    /**
+     * An error message displayed when the number of characters in the text area exceeds the limit (optional).
+     * When the number of characters in the text area exceeds the limit, this is displayed below the label by overriding `helper` and `error`.
+     * Only used when a text area is assigned to a slot and `textareaMaxCount` is set.
+     */
+    textareaLimitExceedError: string | null;
     private readonly _textareas;
     private readonly _controls;
     private _textareaCount;
+    get textareaLimitExceeded(): boolean;
     private _handleSlotChange;
     private _handleInput;
     private _reflectSlotProperties;