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

package/dist/cjs/components/accordion-item/daikin-accordion-item.d.cts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The accordion item component is a child element within the `daikin-accordion` component.
  * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
@@ -7,6 +7,8 @@ import { LitElement, PropertyValues } from 'lit';
  * Hierarchy:
  * - `daikin-accordion` > `daikin-accordion-item`
  *
+ * @fires toggle - Fires when the summary is clicked. Used by `daikin-accordion`.
+ *
  * @slot - A slot for the accordion item content.
  * @slot summary - A slot for the accordion item summary content.
  *
@@ -26,12 +28,18 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-accordion-item>
  * ```
  */
-export declare class DaikinAccordionItem extends LitElement {
+export declare class DaikinAccordionItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    private _summaryRef;
     private _contentRef;
+    /**
+     * A unique name for the accordion item within the accordion.
+     */
+    name: string;
     /**
      * Whether the accordion item is open.
      * Ignored if `disabled` is `true`.
+     * Controlled by `daikin-accordion`.
      */
     open: boolean;
     /**
@@ -39,23 +47,9 @@ export declare class DaikinAccordionItem extends LitElement {
      * If this is set to `true`, the accordion item will always be closed.
      */
     disabled: boolean;
-    private _summary;
-    /**
-     * Actual presence of `open` attribute of the `<details>` element.
-     *
-     * The `<details>` element does not support animation on changing the `open` attribute.
-     * In other words, the content is hidden immediately when the `open` attribute is removed.
-     * To enable animation for an accordion, we need to run the animation while maintaining the `open` attribute, and then remove the `open` attribute at the end of the animation.
-     * Treated as `false` if `disabled` is `true`.
-     */
-    private _detailsOpen;
-    private _contentAnimate;
     private _handleSummaryClick;
     private _handleKeyDown;
-    private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;
-    protected firstUpdated(): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * Focuses on the inner summary.
      * @param options focus options

package/dist/cjs/components/avatar/daikin-avatar.cjs

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+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;
+};
+const cvaWrapper = classVarianceAuthority.cva(
+  [
+    "inline-block",
+    "rounded-full",
+    "relative",
+    "overflow-hidden",
+    "box-border",
+    "size-full",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      type: {
+        button: [
+          "enabled:bg-ddt-color-common-neutral-default",
+          "enabled:text-ddt-color-common-surface-default",
+          "enabled:hover:bg-ddt-color-common-neutral-hover",
+          "enabled:hover:text-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-neutral-press",
+          "enabled:active:text-ddt-color-common-surface-press",
+          "disabled:bg-ddt-color-common-disabled",
+          "disabled:text-ddt-color-common-surface-default"
+        ],
+        icon: [
+          "bg-ddt-color-common-neutral-default",
+          "text-ddt-color-common-surface-default"
+        ],
+        link: [
+          "link-enabled:bg-ddt-color-common-neutral-default",
+          "link-enabled:text-ddt-color-common-surface-default",
+          "link-enabled:hover:bg-ddt-color-common-neutral-hover",
+          "link-enabled:hover:text-ddt-color-common-surface-hover",
+          "link-enabled:active:bg-ddt-color-common-neutral-press",
+          "link-enabled:active:text-ddt-color-common-surface-press",
+          "link-disabled:bg-ddt-color-common-disabled",
+          "link-disabled:text-ddt-color-common-surface-default"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
+  constructor() {
+    super();
+    this.type = "icon";
+    this.href = null;
+    this.alt = null;
+    this.disabled = false;
+    this.avatarAriaHaspopup = null;
+    this.avatarAriaExpanded = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  render() {
+    const icon = lit.html`
+      <span
+        class="i-daikin-profile"
+      >
+      </span>
+    </daikin-icon>`;
+    if (this.type === "icon") {
+      return lit.html`<span
+        class=${cvaWrapper({ type: "icon" })}
+        role="figure"
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+      >
+        ${icon}
+      </span>`;
+    } else if (this.type === "button") {
+      return lit.html`<button
+        class=${cvaWrapper({ type: "button" })}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.avatarAriaExpanded ?? void 0)}
+        ?disabled=${this.disabled}
+      >
+        ${icon}
+      </button>`;
+    } else {
+      const linkDisabled = this.disabled || this.href == null;
+      return lit.html`<a
+        class=${cvaWrapper({ type: "link" })}
+        role=${ifDefined_js.ifDefined(linkDisabled ? "link" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
+      >
+        ${icon}
+      </a>`;
+    }
+  }
+  /**
+   * Focuses on the inner button or link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinAvatar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    :host {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "alt", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAvatar.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "avatar-aria-haspopup" })
+], exports.DaikinAvatar.prototype, "avatarAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "avatar-aria-expanded" })
+], exports.DaikinAvatar.prototype, "avatarAriaExpanded", 2);
+__decorateClass([
+  decorators_js.query("a,button")
+], exports.DaikinAvatar.prototype, "_focusableElement", 2);
+exports.DaikinAvatar = __decorateClass([
+  decorators_js.customElement("daikin-avatar")
+], exports.DaikinAvatar);

package/dist/cjs/components/avatar/daikin-avatar.d.cts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaWrapper: (props?: ({
+    type?: "button" | "icon" | "link" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
+/**
+ * The avatar is a UI element that represent a user
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/avatar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-avatar></daikin-avatar>
+ * ```
+ */
+export declare class DaikinAvatar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Replace the wrapping element.
+     */
+    type: AvatarVariantProps["type"];
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated type [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered type disabled state.
+     */
+    href: string | null;
+    /**
+     * Provides an accessible name of the avatar.
+     */
+    alt: string | null;
+    /**
+     * Specify the avatar disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The aria-haspopup of the avatar when `type="button"`.
+     */
+    avatarAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of avatar when `type="button"`.
+     */
+    avatarAriaExpanded: boolean | null;
+    private _focusableElement;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-avatar": DaikinAvatar;
+    }
+}
+export {};

package/dist/cjs/components/avatar/index.cjs

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

package/dist/cjs/components/avatar/index.d.cts

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

package/dist/cjs/components/breadcrumb/daikin-breadcrumb.cjs

@@ -2,18 +2,21 @@
 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");
 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;
 };
-exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
+exports.DaikinBreadcrumb = class DaikinBreadcrumb extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.showVisited = false;
@@ -56,5 +59,5 @@ __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], exports.DaikinBreadcrumb.prototype, "_items", 2);
 exports.DaikinBreadcrumb = __decorateClass([
-  decorators_js.customElement("daikin-breadcrumb")
+  decorators.ddsElement("daikin-breadcrumb")
 ], exports.DaikinBreadcrumb);

package/dist/cjs/components/breadcrumb/daikin-breadcrumb.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
  *
@@ -25,7 +25,7 @@ import { LitElement } from 'lit';
  * </daikin-breadcrumb>
  * ```
  */
-export declare class DaikinBreadcrumb extends LitElement {
+export declare class DaikinBreadcrumb extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Whether or not to change the color of visited links.

package/dist/cjs/components/breadcrumb-item/daikin-breadcrumb-item.cjs

@@ -3,19 +3,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 require("../link/daikin-link.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;
 };
-exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement {
+exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -64,5 +67,5 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
-  decorators_js.customElement("daikin-breadcrumb-item")
+  decorators.ddsElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);

package/dist/cjs/components/breadcrumb-item/daikin-breadcrumb-item.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
  *
@@ -20,7 +20,7 @@ import { LitElement } from 'lit';
  * </daikin-breadcrumb-item>
  * ```
  */
-export declare class DaikinBreadcrumbItem extends LitElement {
+export declare class DaikinBreadcrumbItem extends DDSElement {
     static styles: import('lit').CSSResult;
     /**
      * Specify link href.

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

@@ -4,13 +4,16 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.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;
@@ -70,7 +73,15 @@ const cvaButton = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinButton = class DaikinButton extends lit.LitElement {
+const cvaIcon = classVarianceAuthority.cva([], {
+  variants: {
+    size: {
+      small: ["icon-size-4"],
+      medium: ["icon-size-6"]
+    }
+  }
+});
+exports.DaikinButton = class DaikinButton extends ddsElement.DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -81,7 +92,7 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
     this.type = "button";
     this.buttonRole = null;
     this.addEventListener("click", (event) => {
-      if (this.disabled) {
+      if (this.disabled || this.type === "link" && this.href == null) {
         event.stopImmediatePropagation();
       }
     });
@@ -118,11 +129,11 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
         type=${this.type}
         role=${ifDefined_js.ifDefined(this.buttonRole ?? void 0)}
       >
-        <slot name="left-icon" class="icon-size-6">
+        <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
           <span class="block -ml-1"></span>
         </slot>
         <span class="px-2"><slot></slot></span>
-        <slot name="right-icon" class="icon-size-6">
+        <slot name="right-icon" class=${cvaIcon({ size: this.size })}>
           <span class="block -mr-1"></span>
         </slot>
       </button>
@@ -142,6 +153,7 @@ exports.DaikinButton.styles = lit.css`
 
     :host {
       display: inline-flex;
+      max-width: 100%;
     }
 
     :host([size="small"]) {
@@ -179,5 +191,5 @@ __decorateClass([
   decorators_js.query("a,button")
 ], exports.DaikinButton.prototype, "_focusableElement", 2);
 exports.DaikinButton = __decorateClass([
-  decorators_js.customElement("daikin-button")
+  decorators.ddsElement("daikin-button")
 ], exports.DaikinButton);

package/dist/cjs/components/button/daikin-button.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaButton: (props?: ({
@@ -6,7 +6,10 @@ declare const cvaButton: (props?: ({
     variant?: "fill" | "outline" | "ghost" | null | undefined;
     size?: "small" | "medium" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
+declare const cvaIcon: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
 /**
  * The button component is a versatile UI element that triggers actions or submits forms when clicked.
  * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
@@ -29,7 +32,7 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
  * </daikin-button>
  * ```
  */
-export declare class DaikinButton extends LitElement {
+export declare class DaikinButton extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.

package/dist/cjs/components/card/daikin-card.cjs

@@ -3,13 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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;
@@ -19,6 +22,7 @@ const cvaContainer = classVarianceAuthority.cva(
     "flex",
     "flex-col",
     "gap-4",
+    "size-full",
     "p-4",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
@@ -32,7 +36,7 @@ const cvaContainer = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinCard = class DaikinCard extends lit.LitElement {
+exports.DaikinCard = class DaikinCard extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.outline = false;
@@ -51,13 +55,13 @@ exports.DaikinCard.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      display: flex;
-      width: fit-content;
+      display: block;
+      width: 100%;
     }
   `;
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinCard.prototype, "outline", 2);
 exports.DaikinCard = __decorateClass([
-  decorators_js.customElement("daikin-card")
+  decorators.ddsElement("daikin-card")
 ], exports.DaikinCard);

package/dist/cjs/components/card/daikin-card.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * `daikin-card` is a component for display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
  *
@@ -10,6 +10,12 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card/index.js";
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/card-header/index.js";
+ * ```
+ *
  * ```html
  * <daikin-card outline>
  *   <daikin-card-header>
@@ -27,7 +33,7 @@ import { LitElement } from 'lit';
  * </daikin-card>
  * ```
  */
-export declare class DaikinCard extends LitElement {
+export declare class DaikinCard extends DDSElement {
     static styles: import('lit').CSSResult;
     /**
      * Specify whether the card border to be visible or not.

package/dist/cjs/components/card-footer/daikin-card-footer.cjs

@@ -1,19 +1,19 @@
 "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");
-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])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = decorator(result) || result;
   return result;
 };
-exports.DaikinCardFooter = class DaikinCardFooter extends lit.LitElement {
+exports.DaikinCardFooter = class DaikinCardFooter extends ddsElement.DDSElement {
   render() {
     return lit.html`<slot></slot>`;
   }
@@ -29,5 +29,5 @@ exports.DaikinCardFooter.styles = lit.css`
     }
   `;
 exports.DaikinCardFooter = __decorateClass([
-  decorators_js.customElement("daikin-card-footer")
+  decorators.ddsElement("daikin-card-footer")
 ], exports.DaikinCardFooter);

package/dist/cjs/components/card-footer/daikin-card-footer.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * `daikin-card-footer` is used to represent footer of the card component, and is used as a child element of the `daikin-card` component.
  *
@@ -9,6 +9,10 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * ```
+ *
  * ```html
  * <!-- See `daikin-card` component for complete example. -->
  * <daikin-card-footer>
@@ -18,7 +22,7 @@ import { LitElement } from 'lit';
  * </daikin-card-footer>
  * ```
  */
-export declare class DaikinCardFooter extends LitElement {
+export declare class DaikinCardFooter extends DDSElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }