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

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

@@ -1,8 +1,11 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, query, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import { ClickOutsideController } from "../../controllers/click-outside.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -93,7 +96,7 @@ const floatingPositionOptions = {
     })
   ]
 };
-let DaikinDropdown = class extends LitElement {
+let DaikinDropdown = class extends DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -287,6 +290,10 @@ let DaikinDropdown = class extends LitElement {
     this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a;
     (_a = this._button) == null ? void 0 : _a.focus(options);
@@ -306,6 +313,10 @@ let DaikinDropdown = class extends LitElement {
       }
     }
   }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
@@ -361,7 +372,7 @@ __decorateClass([
   state()
 ], DaikinDropdown.prototype, "_selectedItemLabel", 2);
 DaikinDropdown = __decorateClass([
-  customElement("daikin-dropdown")
+  ddsElement("daikin-dropdown")
 ], DaikinDropdown);
 export {
   DaikinDropdown

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The dropdown item (option) component that can be used within `daikin-dropdown` component.
  *
@@ -11,11 +11,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-dropdown-item value="value">Dropdown item</daikin-dropdown-item>
  * ```
  */
-export declare class DaikinDropdownItem extends LitElement {
+export declare class DaikinDropdownItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Form value of the dropdown item.
@@ -33,6 +37,10 @@ export declare class DaikinDropdownItem extends LitElement {
     private _button;
     private _handleClick;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions): void;
 }
 declare global {

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

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -49,7 +52,7 @@ const cvaOption = cva(
     }
   }
 );
-let DaikinDropdownItem = class extends LitElement {
+let DaikinDropdownItem = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -80,6 +83,10 @@ let DaikinDropdownItem = class extends LitElement {
       <slot></slot>
     </button>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a;
     (_a = this._button) == null ? void 0 : _a.focus(options);
@@ -106,7 +113,7 @@ __decorateClass([
   query("button")
 ], DaikinDropdownItem.prototype, "_button", 2);
 DaikinDropdownItem = __decorateClass([
-  customElement("daikin-dropdown-item")
+  ddsElement("daikin-dropdown-item")
 ], DaikinDropdownItem);
 export {
   DaikinDropdownItem

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 import { icons } from "./icons.json.js";
 export declare const iconList: string[];
@@ -29,7 +29,7 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
  * ```
  */
-export declare class DaikinIcon extends LitElement {
+export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the name of the icon

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

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { icons } from "./icons.json.js";
 var __defProp = Object.defineProperty;
@@ -29,7 +32,7 @@ const cvaIcon = cva(["block"], {
     }
   }
 });
-let DaikinIcon = class extends LitElement {
+let DaikinIcon = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.icon = null;
@@ -84,7 +87,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "size", 2);
 DaikinIcon = __decorateClass([
-  customElement("daikin-icon")
+  ddsElement("daikin-icon")
 ], DaikinIcon);
 export {
   DaikinIcon,

package/dist/es/components/icon/icons.json.d.ts

@@ -32,14 +32,6 @@ declare const _default: {
       "class": "i-daikin-pagination-chevron-right",
       "color": "#414141"
     },
-    "arrowUp": {
-      "class": "i-daikin-arrow-up",
-      "color": "#414141"
-    },
-    "success": {
-      "class": "i-daikin-status-success",
-      "color": "#0097E0"
-    },
     "error": {
       "class": "i-daikin-status-error",
       "color": "#FF4949"

package/dist/es/components/icon/icons.json.js

@@ -1,73 +1,4 @@
-const icons = {
-  alarm: {
-    "class": "i-daikin-status-alarm",
-    color: null
-  },
-  close: {
-    "class": "i-daikin-notification-close",
-    color: "#a0a0a0"
-  },
-  information: {
-    "class": "i-daikin-status-information",
-    color: null
-  },
-  negative: {
-    "class": "i-daikin-status-negative",
-    color: null
-  },
-  positive: {
-    "class": "i-daikin-status-positive",
-    color: null
-  },
-  warning: {
-    "class": "i-daikin-status-warning",
-    color: null
-  },
-  "pagination-chevron-left": {
-    "class": "i-daikin-pagination-chevron-left",
-    color: "#414141"
-  },
-  "pagination-chevron-right": {
-    "class": "i-daikin-pagination-chevron-right",
-    color: "#414141"
-  },
-  arrowUp: {
-    "class": "i-daikin-arrow-up",
-    color: "#414141"
-  },
-  success: {
-    "class": "i-daikin-status-success",
-    color: "#0097E0"
-  },
-  error: {
-    "class": "i-daikin-status-error",
-    color: "#FF4949"
-  },
-  cross: {
-    "class": "i-daikin-cross",
-    color: null
-  },
-  "chevron-up": {
-    "class": "i-daikin-chevron-up",
-    color: null
-  },
-  "chevron-down": {
-    "class": "i-daikin-chevron-down",
-    color: null
-  },
-  "chevron-left": {
-    "class": "i-daikin-chevron-left",
-    color: null
-  },
-  "chevron-right": {
-    "class": "i-daikin-chevron-right",
-    color: null
-  },
-  sort: {
-    "class": "i-daikin-sort",
-    color: null
-  }
-};
+const icons = { "alarm": { "class": "i-daikin-status-alarm", "color": null }, "close": { "class": "i-daikin-notification-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-status-information", "color": null }, "negative": { "class": "i-daikin-status-negative", "color": null }, "positive": { "class": "i-daikin-status-positive", "color": null }, "warning": { "class": "i-daikin-status-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "error": { "class": "i-daikin-status-error", "color": "#FF4949" }, "cross": { "class": "i-daikin-cross", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null } };
 export {
   icons
 };

package/dist/es/components/icon-button/daikin-icon-button.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaIconButton: (props?: ({
@@ -32,7 +32,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends LitElement {
+export declare class DaikinIconButton extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.

package/dist/es/components/icon-button/daikin-icon-button.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
@@ -71,7 +74,7 @@ const cvaIconButton = cva(
     }
   }
 );
-let DaikinIconButton = class extends LitElement {
+let DaikinIconButton = class extends DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -160,7 +163,7 @@ __decorateClass([
   query("button")
 ], DaikinIconButton.prototype, "_button", 2);
 DaikinIconButton = __decorateClass([
-  customElement("daikin-icon-button")
+  ddsElement("daikin-icon-button")
 ], DaikinIconButton);
 export {
   DaikinIconButton

package/dist/es/components/index.d.ts

@@ -6,16 +6,18 @@ export * from "./button/index.js";
 export * from "./card/index.js";
 export * from "./card-footer/index.js";
 export * from "./card-header/index.js";
+export * from "./carousel/index.js";
+export * from "./carousel-item/index.js";
 export * from "./checkbox/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
 export * from "./icon/index.js";
 export * from "./icon-button/index.js";
+export * from "./inline-notification/index.js";
 export * from "./input-group/index.js";
 export * from "./link/index.js";
 export * from "./list/index.js";
 export * from "./list-item/index.js";
-export * from "./notification/index.js";
 export * from "./pagination/index.js";
 export * from "./progress-bar/index.js";
 export * from "./progress-indicator/index.js";
@@ -30,6 +32,8 @@ export * from "./table-header-cell/index.js";
 export * from "./tabs/index.js";
 export * from "./text-area/index.js";
 export * from "./text-field/index.js";
+export * from "./toast-notification/index.js";
+export * from "./toast-notification-manager/index.js";
 export * from "./toggle/index.js";
 export * from "./tooltip/index.js";
 export * from "./tree/index.js";

package/dist/es/components/index.js

@@ -6,16 +6,18 @@ import { DaikinButton } from "./button/daikin-button.js";
 import { DaikinCard } from "./card/daikin-card.js";
 import { DaikinCardFooter } from "./card-footer/daikin-card-footer.js";
 import { DaikinCardHeader } from "./card-header/daikin-card-header.js";
+import { DaikinCarousel } from "./carousel/daikin-carousel.js";
+import { DaikinCarouselItem } from "./carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
 import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
 import { DaikinIconButton } from "./icon-button/daikin-icon-button.js";
+import { DaikinInlineNotification } from "./inline-notification/daikin-inline-notification.js";
 import { DaikinInputGroup } from "./input-group/daikin-input-group.js";
 import { DaikinLink } from "./link/daikin-link.js";
 import { DaikinList } from "./list/daikin-list.js";
 import { DaikinListItem } from "./list-item/daikin-list-item.js";
-import { DaikinNotification } from "./notification/daikin-notification.js";
 import { DaikinPagination } from "./pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./progress-indicator/daikin-progress-indicator.js";
@@ -30,6 +32,8 @@ import { DaikinTableHeaderCell } from "./table-header-cell/daikin-table-header-c
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
 import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
+import { DaikinToastNotification } from "./toast-notification/daikin-toast-notification.js";
+import { DaikinToastNotificationManager } from "./toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
 import { DaikinTree } from "./tree/daikin-tree.js";
@@ -44,16 +48,18 @@ export {
   DaikinCard,
   DaikinCardFooter,
   DaikinCardHeader,
+  DaikinCarousel,
+  DaikinCarouselItem,
   DaikinCheckbox,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
   DaikinIconButton,
+  DaikinInlineNotification,
   DaikinInputGroup,
   DaikinLink,
   DaikinList,
   DaikinListItem,
-  DaikinNotification,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
@@ -68,6 +74,8 @@ export {
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,
+  DaikinToastNotification,
+  DaikinToastNotificationManager,
   DaikinToggle,
   DaikinTooltip,
   DaikinTree,

package/dist/es/components/inline-notification/daikin-inline-notification.d.ts

@@ -0,0 +1,55 @@
+import { DDSElement } from "../../base/index.js";
+import { ToastNotificationVariantProps } from "../toast-notification/index.js";
+/**
+ * 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/es/components/inline-notification/daikin-inline-notification.js

@@ -0,0 +1,93 @@
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { formatDate, cvaContainer, cvaContent, cvaTitle, cvaDescription, cvaTimestamp } from "../../utils/notification-common.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, 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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let DaikinInlineNotification = class extends 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 ? formatDate(this.timestamp) : null;
+    return html`<aside
+      class=${cvaContainer({ variant: "inline", status: this.status })}
+      role="status"
+    >
+      <div class=${cvaContent({ layout: this.layout })}>
+        <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
+        <slot
+          class=${cvaDescription({ layout: this.layout })}
+          name="description"
+        ></slot>
+        ${formattedTimestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
+              >${formattedTimestamp}</span
+            >` : nothing}
+      </div>
+      <slot name="action" class="flex-none"></slot>
+      ${this.closable ? 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>
+          ` : nothing}
+    </aside>`;
+  }
+};
+DaikinInlineNotification.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinInlineNotification.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinInlineNotification.prototype, "layout", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinInlineNotification.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Object, reflect: true, attribute: false })
+], DaikinInlineNotification.prototype, "timestamp", 2);
+DaikinInlineNotification = __decorateClass([
+  ddsElement("daikin-inline-notification")
+], DaikinInlineNotification);
+export {
+  DaikinInlineNotification
+};

package/dist/es/components/inline-notification/index.d.ts

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

package/dist/es/components/inline-notification/index.js

@@ -0,0 +1,4 @@
+import { DaikinInlineNotification } from "./daikin-inline-notification.js";
+export {
+  DaikinInlineNotification
+};

package/dist/es/components/input-group/daikin-input-group.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * 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.