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

package/dist/es-dev/components/accordion/daikin-accordion.js

@@ -1,5 +1,8 @@
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements } 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;
@@ -11,7 +14,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinAccordion = class extends LitElement {
+let DaikinAccordion = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.openItems = [];
+    this.exclusive = false;
+  }
   _handleMoveFocus(event) {
     const moveOffset = event.detail.direction === "up" ? -1 : 1;
     const items = this._items.filter(({ disabled }) => !disabled);
@@ -23,9 +31,35 @@ let DaikinAccordion = class extends LitElement {
     const nextItem = items[(focusedItemIndex + moveOffset + items.length) % items.length];
     nextItem.focus();
   }
+  _handleToggle(event) {
+    const targetValue = event.target.name;
+    const opened = !event.target.open;
+    if (this.exclusive) {
+      this.openItems = opened ? [targetValue] : [];
+    } else {
+      this.openItems = opened ? [...this.openItems, targetValue] : this.openItems.filter((item) => item != targetValue);
+    }
+    this._reflectItemOpen();
+  }
+  _reflectItemOpen() {
+    {
+      if (this.exclusive && this.openItems.length > 1) {
+        console.warn(
+          `Invalid 'openItems' property: ${JSON.stringify(this.openItems)}. Only one active can be specified when exclusive is set.`
+        );
+      }
+    }
+    for (const item of this._items) {
+      item.open = this.openItems.includes(item.name);
+    }
+  }
   render() {
     return html`<div class="w-full">
-      <slot @accordion-move-focus=${this._handleMoveFocus}></slot>
+      <slot
+        @accordion-move-focus=${this._handleMoveFocus}
+        @toggle=${this._handleToggle}
+        @slotchange=${this._reflectItemOpen}
+      ></slot>
     </div>`;
   }
 };
@@ -45,11 +79,17 @@ DaikinAccordion.styles = css`
       --divider-bottom-display: block;
     }
   `;
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinAccordion.prototype, "openItems", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinAccordion.prototype, "exclusive", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-accordion-item" })
 ], DaikinAccordion.prototype, "_items", 2);
 DaikinAccordion = __decorateClass([
-  customElement("daikin-accordion")
+  ddsElement("daikin-accordion")
 ], DaikinAccordion);
 export {
   DaikinAccordion

package/dist/es-dev/components/accordion-item/daikin-accordion-item.d.ts

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

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.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;
@@ -50,51 +53,29 @@ const cvaSummary = cva(
     }
   }
 );
-const animationOption = {
-  duration: 250,
-  easing: "ease-in-out"
-};
-const contentCloseKeyframe = {
-  height: 0
-};
-const getContentOpenKeyframe = (content) => ({
-  height: `${content.offsetHeight}px`
+const cvaContent = cva(["grid", "duration-[250ms]", "ease-in-out"], {
+  variants: {
+    open: {
+      false: ["grid-rows-[0fr]"],
+      true: ["grid-rows-[1fr]"]
+    }
+  }
 });
-let DaikinAccordionItem = class extends LitElement {
+let DaikinAccordionItem = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this._summaryRef = createRef();
     this._contentRef = createRef();
+    this.name = "";
     this.open = false;
     this.disabled = false;
-    this._detailsOpen = false;
-  }
-  _contentAnimate() {
-    const content = this._contentRef.value;
-    if (!content || this.open === this._detailsOpen) {
-      return;
-    }
-    if (this.open) {
-      this._detailsOpen = this.open;
-      content.animate(
-        [contentCloseKeyframe, getContentOpenKeyframe(content)],
-        animationOption
-      );
-    } else {
-      const animation = content.animate(
-        [getContentOpenKeyframe(content), contentCloseKeyframe],
-        animationOption
-      );
-      animation.onfinish = () => {
-        this._detailsOpen = this.open;
-      };
-    }
   }
   _handleSummaryClick(event) {
     event.preventDefault();
     if (this.disabled) {
       return;
     }
-    this.open = !this.open;
+    this.dispatchEvent(new Event("toggle", event));
   }
   _handleKeyDown(event) {
     const direction = {
@@ -114,56 +95,42 @@ let DaikinAccordionItem = class extends LitElement {
       })
     );
   }
-  // When using the in-page search, the `<details>` element may open without clicking on the `<summary>`.
-  // In order to handle such cases, it is necessary to respond to the "toggle" event.
-  _handleToggle(event) {
-    event.preventDefault();
-    if (this.disabled) {
-      return;
-    }
-    this.open = event.newState === "open";
-  }
   render() {
-    const detailsOpen = !this.disabled && this._detailsOpen;
     const open = !this.disabled && this.open;
-    return html`<details
+    return html`<div
       class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
-      ?open=${detailsOpen}
-      ?data-open=${open}
-      aria-disabled=${this.disabled}
-      @toggle=${this._handleToggle}
     >
-      <summary
+      <button
         id="summary"
+        ${ref(this._summaryRef)}
         class=${cvaSummary({
       open,
       disabled: this.disabled
     })}
+        ?disabled=${this.disabled}
+        aria-expanded=${open}
+        aria-controls="content"
         tabindex=${this.disabled ? -1 : 0}
         @click=${this._handleSummaryClick}
         @keydown=${this._handleKeyDown}
       >
         <slot name="summary"></slot>
-      </summary>
+      </button>
       <div
         ${ref(this._contentRef)}
+        id="content"
         role="region"
+        class=${cvaContent({ open })}
         aria-labelledby="summary"
-        ?hidden=${this.disabled}
+        ?hidden=${!open}
       >
-        <div class="pt-2 px-3 pb-3">
-          <slot></slot>
+        <div class="overflow-hidden">
+          <div class="pt-2 px-3 pb-3">
+            <slot></slot>
+          </div>
         </div>
       </div>
-    </details>`;
-  }
-  firstUpdated() {
-    this._detailsOpen = this.open;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("open")) {
-      this._contentAnimate();
-    }
+    </div>`;
   }
   /**
    * Focuses on the inner summary.
@@ -171,7 +138,7 @@ let DaikinAccordionItem = class extends LitElement {
    */
   focus(options) {
     var _a;
-    (_a = this._summary) == null ? void 0 : _a.focus(options);
+    (_a = this._summaryRef.value) == null ? void 0 : _a.focus(options);
   }
 };
 DaikinAccordionItem.styles = css`
@@ -191,8 +158,6 @@ DaikinAccordionItem.styles = css`
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
-      position: absolute;
-      top: 0;
     }
 
     :host::after {
@@ -201,24 +166,19 @@ DaikinAccordionItem.styles = css`
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
-      position: absolute;
-      bottom: 0;
     }
   `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinAccordionItem.prototype, "name", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinAccordionItem.prototype, "disabled", 2);
-__decorateClass([
-  query("summary")
-], DaikinAccordionItem.prototype, "_summary", 2);
-__decorateClass([
-  state()
-], DaikinAccordionItem.prototype, "_detailsOpen", 2);
 DaikinAccordionItem = __decorateClass([
-  customElement("daikin-accordion-item")
+  ddsElement("daikin-accordion-item")
 ], DaikinAccordionItem);
 export {
   DaikinAccordionItem

package/dist/es-dev/components/breadcrumb/daikin-breadcrumb.d.ts

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

@@ -1,5 +1,8 @@
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements } 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;
@@ -11,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinBreadcrumb = class extends LitElement {
+let DaikinBreadcrumb = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.showVisited = false;
@@ -54,7 +57,7 @@ __decorateClass([
   queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], DaikinBreadcrumb.prototype, "_items", 2);
 DaikinBreadcrumb = __decorateClass([
-  customElement("daikin-breadcrumb")
+  ddsElement("daikin-breadcrumb")
 ], DaikinBreadcrumb);
 export {
   DaikinBreadcrumb

package/dist/es-dev/components/breadcrumb-item/daikin-breadcrumb-item.d.ts

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

@@ -1,6 +1,9 @@
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } 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 "../link/daikin-link.js";
 var __defProp = Object.defineProperty;
@@ -13,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinBreadcrumbItem = class extends LitElement {
+let DaikinBreadcrumbItem = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -62,7 +65,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 DaikinBreadcrumbItem = __decorateClass([
-  customElement("daikin-breadcrumb-item")
+  ddsElement("daikin-breadcrumb-item")
 ], DaikinBreadcrumbItem);
 export {
   DaikinBreadcrumbItem

package/dist/es-dev/components/button/daikin-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 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/es-dev/components/button/daikin-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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -68,7 +71,15 @@ const cvaButton = cva(
     }
   }
 );
-let DaikinButton = class extends LitElement {
+const cvaIcon = cva([], {
+  variants: {
+    size: {
+      small: ["icon-size-4"],
+      medium: ["icon-size-6"]
+    }
+  }
+});
+let DaikinButton = class extends DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -79,7 +90,7 @@ let DaikinButton = class extends 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();
       }
     });
@@ -116,11 +127,11 @@ let DaikinButton = class extends LitElement {
         type=${this.type}
         role=${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>
@@ -140,6 +151,7 @@ DaikinButton.styles = css`
 
     :host {
       display: inline-flex;
+      max-width: 100%;
     }
 
     :host([size="small"]) {
@@ -177,7 +189,7 @@ __decorateClass([
   query("a,button")
 ], DaikinButton.prototype, "_focusableElement", 2);
 DaikinButton = __decorateClass([
-  customElement("daikin-button")
+  ddsElement("daikin-button")
 ], DaikinButton);
 export {
   DaikinButton

package/dist/es-dev/components/card/daikin-card.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * `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/es-dev/components/card/daikin-card.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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,6 +20,7 @@ const cvaContainer = cva(
     "flex",
     "flex-col",
     "gap-4",
+    "size-full",
     "p-4",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
@@ -30,7 +34,7 @@ const cvaContainer = cva(
     }
   }
 );
-let DaikinCard = class extends LitElement {
+let DaikinCard = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.outline = false;
@@ -49,15 +53,15 @@ DaikinCard.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: flex;
-      width: fit-content;
+      display: block;
+      width: 100%;
     }
   `;
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCard.prototype, "outline", 2);
 DaikinCard = __decorateClass([
-  customElement("daikin-card")
+  ddsElement("daikin-card")
 ], DaikinCard);
 export {
   DaikinCard

package/dist/es-dev/components/card-footer/daikin-card-footer.d.ts

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

package/dist/es-dev/components/card-footer/daikin-card-footer.js

@@ -1,17 +1,17 @@
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+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;
 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);
+      result = decorator(result) || result;
   return result;
 };
-let DaikinCardFooter = class extends LitElement {
+let DaikinCardFooter = class extends DDSElement {
   render() {
     return html`<slot></slot>`;
   }
@@ -27,7 +27,7 @@ DaikinCardFooter.styles = css`
     }
   `;
 DaikinCardFooter = __decorateClass([
-  customElement("daikin-card-footer")
+  ddsElement("daikin-card-footer")
 ], DaikinCardFooter);
 export {
   DaikinCardFooter