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

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.
@@ -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;

package/dist/es/components/input-group/daikin-input-group.js

@@ -1,7 +1,9 @@
-import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property, queryAssignedElements, state } 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;
@@ -13,49 +15,50 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-5"], {
+const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-[130%]"], {
   variants: {
     disabled: {
       false: [],
-      true: ["text-system-state-disabled"]
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
 const cvaHelper = 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 = cva(["text-sm", "font-bold"], {
+const cvaCounter = cva(["text-sm", "font-bold", "ml-auto"], {
   variants: {
-    disabled: {
-      false: ["text-system-element-text-secondary"],
-      true: ["text-system-state-disabled"]
-    }
-  }
-});
-const cvaCounterValueLength = 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"]
     }
   }
 });
-let DaikinInputGroup = class extends LitElement {
+let DaikinInputGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.label = null;
@@ -64,8 +67,12 @@ let DaikinInputGroup = class extends 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];
@@ -82,40 +89,41 @@ let DaikinInputGroup = class extends 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 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 ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
-                  ${this.label}
-                </span>` : nothing}
-            ${this.required && !this.disabled ? html`<span class="text-system-state-error-active text-xs">
-                  ${this.required}
-                </span>` : nothing}
-          </div>
-          ${this.textareaMaxCount != null && this._textareaCount != null ? 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>
-              ` : nothing}
+        <div class="flex items-center flex-wrap gap-1 font-bold">
+          ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                ${this.label}
+              </span>` : nothing}
+          ${this.required && !this.disabled ? html`<span class="text-ddt-color-common-danger-default text-xs">
+                ${this.required}
+              </span>` : 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>
@@ -123,6 +131,12 @@ let DaikinInputGroup = class extends LitElement {
           @slotchange=${this._handleSlotChange}
           @input=${this._handleInput}
         ></slot>
+        ${this.textareaMaxCount != null && this._textareaCount != null ? html`<span
+              class=${cvaCounter({
+      variant: this.disabled ? "disabled" : this.textareaLimitExceeded ? "error" : "normal"
+    })}
+              >${this._textareaCount}/${this.textareaMaxCount}</span
+            >` : nothing}
       </label>
     </fieldset>`;
   }
@@ -134,8 +148,6 @@ DaikinInputGroup.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --input-group-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
-
       display: block;
       width: 100%;
     }
@@ -158,6 +170,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], DaikinInputGroup.prototype, "textareaMaxCount", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "textarea-limit-exceed-error"
+  })
+], DaikinInputGroup.prototype, "textareaLimitExceedError", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-text-area" })
 ], DaikinInputGroup.prototype, "_textareas", 2);
@@ -170,7 +189,7 @@ __decorateClass([
   state()
 ], DaikinInputGroup.prototype, "_textareaCount", 2);
 DaikinInputGroup = __decorateClass([
-  customElement("daikin-input-group")
+  ddsElement("daikin-input-group")
 ], DaikinInputGroup);
 export {
   DaikinInputGroup

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The link component uses the standard HTML <a> tag. Unlike the link used in the button component, it provides the style of the text as it is.
  *
@@ -16,7 +16,7 @@ import { LitElement } from 'lit';
  * </daikin-link>
  * ```
  */
-export declare class DaikinLink extends LitElement {
+export declare class DaikinLink extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Link `href`.

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

@@ -1,7 +1,10 @@
 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 { 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;
@@ -14,33 +17,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LINK_CLASS_NAME = cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "gap-0.5",
-  "size-fit",
   "font-daikinSerif",
-  "rounded-[1px]",
   "relative",
-  "link-enabled:text-system-state-link-active",
-  "link-enabled:hover:text-system-state-link-hover",
-  "link-enabled:hover:bg-system-state-link-surface-hover",
-  "link-enabled:active:text-system-state-link-press",
-  "link-disabled:text-system-state-disabled",
-  "focus-visible:outline-none",
-  "focus-visible:before:block",
-  "focus-visible:before:rounded-none",
-  "focus-visible:before:absolute",
-  "focus-visible:before:inset-[-1px]",
-  "focus-visible:before:outline",
-  "focus-visible:before:outline-system-state-focus",
-  "focus-visible:before:outline-2",
-  "after:h-[1px]",
-  "after:absolute",
-  "after:inset-[auto_0_0_0]",
-  "after:bg-current"
+  "border-b",
+  "border-b-current",
+  "link-enabled:text-ddt-color-link-text-default",
+  "link-enabled:hover:text-ddt-color-link-text-hover",
+  "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
+  "link-enabled:active:text-ddt-color-link-text-press",
+  "link-enabled:active:bg-ddt-color-common-surface-brand-press",
+  "link-disabled:text-ddt-color-common-disabled",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "focus-visible:outline-offset-2"
 ])();
-let DaikinLink = class extends LitElement {
+let DaikinLink = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -49,43 +41,36 @@ let DaikinLink = class extends LitElement {
     this.showVisited = false;
   }
   render() {
-    return html`
-      <a
-        class=${LINK_CLASS_NAME}
-        href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
-        target=${ifDefined(this.target ?? void 0)}
-        aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
-      >
-        <slot name="left-icon" class="icon-size-4"></slot>
-        <slot></slot>
-        <slot name="right-icon" class="icon-size-4"></slot>
-      </a>
-    `;
+    return html`<a
+      class=${LINK_CLASS_NAME}
+      href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+      target=${ifDefined(this.target ?? void 0)}
+      aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+      ><span class="inline-flex mr-[0.125rem] align-sub">
+        <slot name="left-icon" class="icon-size-4"
+          ><span class="-mr-[0.125rem]"></span></slot></span
+      ><slot></slot
+      ><span class="inline-flex ml-[0.125rem] align-sub"
+        ><slot name="right-icon" class="icon-size-4"
+          ><span class="-ml-[0.125rem]"></span></slot></span
+    ></a>`;
   }
 };
 DaikinLink.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
-    :host {
-      display: block;
-      width: fit-content;
-      height: fit-content;
-    }
-
     :host([show-visited]:not([disabled])) a:visited {
-      color: #5c2365; /* system-state-visited-active */
-    }
-
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      color: #4a1c51; /* system-state-visited-hover */
+      color: var(--dds-color-link-text-visited-default);
     }
 
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      background-color: #f0ddf3; /* system-state-visited-hover */
+    :host([show-visited]:not([disabled])) a:visited:hover {
+      color: var(--dds-color-link-text-visited-hover);
+      background-color: var(--dds-color-link-surface-visited-hover);
     }
 
-    :host([show-visited]:not([disabled])) a:active:visited {
-      color: #37153d; /* system-state-visited-press */
+    :host([show-visited]:not([disabled])) a:visited:active {
+      color: var(--dds-color-link-text-visited-press);
+      background-color: var(--dds-color-link-surface-visited-press);
     }
   `;
 __decorateClass([
@@ -101,7 +86,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], DaikinLink.prototype, "showVisited", 2);
 DaikinLink = __decorateClass([
-  customElement("daikin-link")
+  ddsElement("daikin-link")
 ], DaikinLink);
 export {
   DaikinLink

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The list component is used to list items using the list item component.
  *
@@ -9,6 +9,11 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/list/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-list>
  *   <daikin-list-item>List item label 1</daikin-list-item>
@@ -17,7 +22,7 @@ import { LitElement } from 'lit';
  * </daikin-list>
  * ```
  */
-export declare class DaikinList extends LitElement {
+export declare class DaikinList extends DDSElement {
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1,16 +1,16 @@
-import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-var __defProp = Object.defineProperty;
+import { html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 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 DaikinList = class extends LitElement {
+let DaikinList = class extends DDSElement {
   render() {
     return html`<div role="list">
       <slot></slot>
@@ -18,7 +18,7 @@ let DaikinList = class extends LitElement {
   }
 };
 DaikinList = __decorateClass([
-  customElement("daikin-list")
+  ddsElement("daikin-list")
 ], DaikinList);
 export {
   DaikinList