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

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

@@ -5,16 +5,21 @@ 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 daikinCarousel = require("./carousel/daikin-carousel.cjs");
+const daikinCarouselItem = require("./carousel-item/daikin-carousel-item.cjs");
 const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
 const daikinDropdown = require("./dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./dropdown-item/daikin-dropdown-item.cjs");
 const daikinIcon = require("./icon/daikin-icon.cjs");
 const daikinIconButton = require("./icon-button/daikin-icon-button.cjs");
+const daikinInlineNotification = require("./inline-notification/daikin-inline-notification.cjs");
 const daikinInputGroup = require("./input-group/daikin-input-group.cjs");
 const daikinLink = require("./link/daikin-link.cjs");
 const daikinList = require("./list/daikin-list.cjs");
 const daikinListItem = require("./list-item/daikin-list-item.cjs");
-const daikinNotification = require("./notification/daikin-notification.cjs");
 const daikinPagination = require("./pagination/daikin-pagination.cjs");
 const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./progress-indicator/daikin-progress-indicator.cjs");
@@ -29,8 +34,13 @@ const daikinTableHeaderCell = require("./table-header-cell/daikin-table-header-c
 const daikinTabs = require("./tabs/daikin-tabs.cjs");
 const daikinTextArea = require("./text-area/daikin-text-area.cjs");
 const daikinTextField = require("./text-field/daikin-text-field.cjs");
+const daikinToastNotification = require("./toast-notification/daikin-toast-notification.cjs");
+const daikinToastNotificationManager = require("./toast-notification-manager/daikin-toast-notification-manager.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 +61,26 @@ 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, "DaikinCarousel", {
+  enumerable: true,
+  get: () => daikinCarousel.DaikinCarousel
+});
+Object.defineProperty(exports, "DaikinCarouselItem", {
+  enumerable: true,
+  get: () => daikinCarouselItem.DaikinCarouselItem
+});
 Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
@@ -72,6 +102,10 @@ Object.defineProperty(exports, "DaikinIconButton", {
   enumerable: true,
   get: () => daikinIconButton.DaikinIconButton
 });
+Object.defineProperty(exports, "DaikinInlineNotification", {
+  enumerable: true,
+  get: () => daikinInlineNotification.DaikinInlineNotification
+});
 Object.defineProperty(exports, "DaikinInputGroup", {
   enumerable: true,
   get: () => daikinInputGroup.DaikinInputGroup
@@ -88,10 +122,6 @@ Object.defineProperty(exports, "DaikinListItem", {
   enumerable: true,
   get: () => daikinListItem.DaikinListItem
 });
-Object.defineProperty(exports, "DaikinNotification", {
-  enumerable: true,
-  get: () => daikinNotification.DaikinNotification
-});
 Object.defineProperty(exports, "DaikinPagination", {
   enumerable: true,
   get: () => daikinPagination.DaikinPagination
@@ -148,6 +178,14 @@ Object.defineProperty(exports, "DaikinTextField", {
   enumerable: true,
   get: () => daikinTextField.DaikinTextField
 });
+Object.defineProperty(exports, "DaikinToastNotification", {
+  enumerable: true,
+  get: () => daikinToastNotification.DaikinToastNotification
+});
+Object.defineProperty(exports, "DaikinToastNotificationManager", {
+  enumerable: true,
+  get: () => daikinToastNotificationManager.DaikinToastNotificationManager
+});
 Object.defineProperty(exports, "DaikinToggle", {
   enumerable: true,
   get: () => daikinToggle.DaikinToggle
@@ -156,3 +194,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,16 +3,21 @@ 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 "./carousel/index.cjs";
+export * from "./carousel-item/index.cjs";
 export * from "./checkbox/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
 export * from "./icon/index.cjs";
 export * from "./icon-button/index.cjs";
+export * from "./inline-notification/index.cjs";
 export * from "./input-group/index.cjs";
 export * from "./link/index.cjs";
 export * from "./list/index.cjs";
 export * from "./list-item/index.cjs";
-export * from "./notification/index.cjs";
 export * from "./pagination/index.cjs";
 export * from "./progress-bar/index.cjs";
 export * from "./progress-indicator/index.cjs";
@@ -27,5 +32,10 @@ export * from "./table-header-cell/index.cjs";
 export * from "./tabs/index.cjs";
 export * from "./text-area/index.cjs";
 export * from "./text-field/index.cjs";
+export * from "./toast-notification/index.cjs";
+export * from "./toast-notification-manager/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/inline-notification/daikin-inline-notification.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+const notificationCommon = require("../../utils/notification-common.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;
+};
+exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.status = "positive";
+    this.layout = "horizontal";
+    this.closable = false;
+    this.timestamp = null;
+  }
+  /**
+   * Emits a "close" event and sets `this.hidden` to true.
+   */
+  _handleClickClose() {
+    this.hidden = true;
+    this.dispatchEvent(new Event("close"));
+  }
+  render() {
+    const formattedTimestamp = this.timestamp ? notificationCommon.formatDate(this.timestamp) : null;
+    return lit.html`<aside
+      class=${notificationCommon.cvaContainer({ variant: "inline", status: this.status })}
+      role="status"
+    >
+      <div class=${notificationCommon.cvaContent({ layout: this.layout })}>
+        <slot class=${notificationCommon.cvaTitle({ layout: this.layout })} name="title"></slot>
+        <slot
+          class=${notificationCommon.cvaDescription({ layout: this.layout })}
+          name="description"
+        ></slot>
+        ${formattedTimestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
+              >${formattedTimestamp}</span
+            >` : lit.nothing}
+      </div>
+      <slot name="action" class="flex-none"></slot>
+      ${this.closable ? lit.html`
+            <daikin-icon-button
+              variant="ghost"
+              button-aria-label="Close"
+              @click=${this._handleClickClose}
+            >
+              <span
+                class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-cross"
+              ></span>
+            </daikin-icon-button>
+          ` : lit.nothing}
+    </aside>`;
+  }
+};
+exports.DaikinInlineNotification.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinInlineNotification.prototype, "status", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinInlineNotification.prototype, "layout", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinInlineNotification.prototype, "closable", 2);
+__decorateClass([
+  decorators_js.property({ type: Object, reflect: true, attribute: false })
+], exports.DaikinInlineNotification.prototype, "timestamp", 2);
+exports.DaikinInlineNotification = __decorateClass([
+  decorators.ddsElement("daikin-inline-notification")
+], exports.DaikinInlineNotification);

package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.d.cts

@@ -0,0 +1,55 @@
+import { DDSElement } from "../../base/index.cjs";
+import { ToastNotificationVariantProps } from "../toast-notification/index.cjs";
+/**
+ * The inline notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
+ *
+ * An inline notification appears within the content of the application, usually embedded directly within a page or section.
+ * Inline notification is more persistent than toast notification and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
+ *
+ * @fires close - A custom event emitted when a user clicks the close button.
+ *
+ * @slot title - A slot for the title content.
+ * @slot description - A slot for the description content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/inline-notification/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-inline-notification>
+ *   <span slot="title">InlineNotification title</span>
+ *   <span slot="description">InlineNotification description</span>
+ * </daikin-inline-notification>
+ * ```
+ */
+export declare class DaikinInlineNotification extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Status of the notification.
+     */
+    status: ToastNotificationVariantProps["status"];
+    /**
+     * Specify how to arrange the elements.
+     */
+    layout: ToastNotificationVariantProps["layout"];
+    /**
+     * Whether to display the close button.
+     */
+    closable: boolean;
+    /**
+     * The timestamp to display.
+     */
+    timestamp: Date | null;
+    /**
+     * Emits a "close" event and sets `this.hidden` to true.
+     */
+    private _handleClickClose;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-inline-notification": DaikinInlineNotification;
+    }
+}

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

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

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

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

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

@@ -1,63 +1,66 @@
 "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");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  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 cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold", "leading-5"], {
+const cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold", "leading-[130%]"], {
   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", "leading-[130%]", "text-sm"],
   {
     variants: {
       type: {
-        helper: [],
-        helperDisabled: ["text-system-state-disabled"],
+        helper: ["text-ddt-color-common-text-secondary"],
+        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"]
     }
   }
 });
-exports.DaikinInputGroup = class DaikinInputGroup extends lit.LitElement {
+exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.label = null;
@@ -66,8 +69,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 +91,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 flex-wrap 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 +133,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 +150,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 +172,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);
@@ -172,5 +191,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinInputGroup.prototype, "_textareaCount", 2);
 exports.DaikinInputGroup = __decorateClass([
-  decorators_js.customElement("daikin-input-group")
+  decorators.ddsElement("daikin-input-group")
 ], exports.DaikinInputGroup);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The input group component serves as a wrapper for an input control component (full list below), providing additional elements such as label text, helper text, or a counter.
  * It enhances the user experience by associating supplementary information or functionality directly with the input field.
@@ -20,8 +20,8 @@ import { LitElement } from 'lit';
  * <!-- Import the following as necessary. -->
  * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
- * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
  * import "@daikin-oss/design-system-web-components/components/radio/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
  * import "@daikin-oss/design-system-web-components/components/select/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-area/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
@@ -31,10 +31,16 @@ import { LitElement } from 'lit';
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-dropdown value="Value of Dropdown">
- *     <daikin-dropdown-item value="Value of Dropdown Item">
+ *   <daikin-dropdown>
+ *     <daikin-dropdown-item value="value1">
  *       Dropdown item 1
  *     </daikin-dropdown-item>
+ *     <daikin-dropdown-item value="value2">
+ *       Dropdown item 2
+ *     </daikin-dropdown-item>
+ *     <daikin-dropdown-item value="value3">
+ *       Dropdown item 3
+ *     </daikin-dropdown-item>
  *   </daikin-dropdown>
  * </daikin-input-group>
  * ```
@@ -43,8 +49,10 @@ import { LitElement } from 'lit';
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-radio-group value="Value of Radio Group">
- *     <daikin-radio value="Value of Radio Group" label="Option1"></daikin-radio>
+ *   <daikin-radio-group>
+ *     <daikin-radio value="value1">Radio option 1</daikin-radio>
+ *     <daikin-radio value="value2">Radio option 2</daikin-radio>
+ *     <daikin-radio value="value3">Radio option 3</daikin-radio>
  *   </daikin-radio-group>
  * </daikin-input-group>
  * ```
@@ -80,7 +88,7 @@ import { LitElement } from 'lit';
  * ```
  * ```
  */
-export declare class DaikinInputGroup extends LitElement {
+export declare class DaikinInputGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Label text displayed at the top of the field.
@@ -111,12 +119,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;