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

package/dist/cjs-dev/components/link/daikin-link.cjs

@@ -4,45 +4,37 @@ 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;
 };
 const LINK_CLASS_NAME = classVarianceAuthority.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"
 ])();
-exports.DaikinLink = class DaikinLink extends lit.LitElement {
+exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -51,43 +43,36 @@ exports.DaikinLink = class DaikinLink extends lit.LitElement {
     this.showVisited = false;
   }
   render() {
-    return lit.html`
-      <a
-        class=${LINK_CLASS_NAME}
-        href=${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
-        target=${ifDefined_js.ifDefined(this.target ?? void 0)}
-        aria-disabled=${ifDefined_js.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 lit.html`<a
+      class=${LINK_CLASS_NAME}
+      href=${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+      target=${ifDefined_js.ifDefined(this.target ?? void 0)}
+      aria-disabled=${ifDefined_js.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>`;
   }
 };
 exports.DaikinLink.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
-    :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([
@@ -103,5 +88,5 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], exports.DaikinLink.prototype, "showVisited", 2);
 exports.DaikinLink = __decorateClass([
-  decorators_js.customElement("daikin-link")
+  decorators.ddsElement("daikin-link")
 ], exports.DaikinLink);

package/dist/cjs-dev/components/link/daikin-link.d.cts

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-var __defProp = Object.defineProperty;
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 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.DaikinList = class DaikinList extends lit.LitElement {
+exports.DaikinList = class DaikinList extends ddsElement.DDSElement {
   render() {
     return lit.html`<div role="list">
       <slot></slot>
@@ -20,5 +20,5 @@ exports.DaikinList = class DaikinList extends lit.LitElement {
   }
 };
 exports.DaikinList = __decorateClass([
-  decorators_js.customElement("daikin-list")
+  decorators.ddsElement("daikin-list")
 ], exports.DaikinList);

package/dist/cjs-dev/components/list/daikin-list.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * 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/cjs-dev/components/list-item/daikin-list-item.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;
@@ -25,18 +28,18 @@ const INNER_CN = classVarianceAuthority.cva([
   "focus-visible:before:outline",
   "focus-visible:before:outline-2",
   "focus-visible:before:-outline-offset-2",
-  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-ddt-color-common-border-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
-  "link-enabled:before:active:bg-system-background-surface-press",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-ddt-color-common-surface-hover",
+  "link-enabled:before:active:bg-ddt-color-common-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
+  "[&:not(a,button)]:before:group-hover:bg-ddt-color-common-surface-hover"
 ])();
 const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-left"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
@@ -47,12 +50,12 @@ const cvaIcon = classVarianceAuthority.cva(["icon-size-6"], {
       right: ["pointer-events-none"]
     },
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
-exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
+exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
   constructor() {
     super();
     this.type = "button";
@@ -144,5 +147,5 @@ __decorateClass([
   decorators_js.query("a,button")
 ], exports.DaikinListItem.prototype, "_focusableElement", 2);
 exports.DaikinListItem = __decorateClass([
-  decorators_js.customElement("daikin-list-item")
+  decorators.ddsElement("daikin-list-item")
 ], exports.DaikinListItem);

package/dist/cjs-dev/components/list-item/daikin-list-item.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
  *
@@ -20,11 +20,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-list-item>List item label</daikin-list-item>
  * ```
  */
-export declare class DaikinListItem extends LitElement {
+export declare class DaikinListItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Type of the list item.

package/dist/cjs-dev/components/pagination/daikin-pagination.cjs

@@ -5,14 +5,17 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const repeat_js = require("lit/directives/repeat.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const paginationUtils = require("./pagination-utils.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;
@@ -27,41 +30,42 @@ const cvaPageButton = classVarianceAuthority.cva(
     "justify-center",
     "min-w-12",
     "min-h-12",
+    "p-1",
     "font-daikinSerif",
     "text-base",
     "not-italic",
     "leading-6",
+    "bg-clip-content",
     "focus-visible:outline",
     "focus-visible:outline-2",
-    "focus-visible:outline-offset-1",
-    "focus-visible:outline-[#0081C0]"
+    "focus-visible:outline-offset-[-2px]",
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       active: {
         true: [
-          "text-daikinBlue-500",
-          "focus-visible:text-daikinBlue-500",
+          "text-ddt-color-common-brand-default",
+          "focus-visible:text-ddt-color-common-brand-default",
           "font-bold",
-          "hover:text-[#0081C0]",
-          "hover:bg-[#DDF3FC]",
-          "active:text-[#00689A]",
-          "active:bg-[#BBE7F9]",
-          "after:bg-daikinBlue-500",
+          "hover:text-ddt-color-common-brand-hover",
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:text-ddt-color-common-brand-press",
+          "active:bg-ddt-color-common-surface-brand-press",
+          "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
           "after:h-1",
           "after:absolute",
-          "after:inset-0",
+          "after:inset-1",
           "after:top-auto"
         ],
         false: [
-          "text-inherit",
           "font-normal",
-          "text-daikinNeutral-700",
-          "active:bg-daikinNeutral-100",
-          "active:text-daikinNeutral-800",
-          "hover:bg-[#F2F2F2]",
-          "hover:text-[#515151]"
+          "text-ddt-color-common-neutral-default",
+          "active:bg-ddt-color-common-surface-neutral-press",
+          "active:text-ddt-color-common-neutral-press",
+          "hover:bg-ddt-color-common-surface-neutral-hover",
+          "hover:text-ddt-color-common-neutral-hover"
         ]
       }
     }
@@ -69,7 +73,6 @@ const cvaPageButton = classVarianceAuthority.cva(
 );
 const cvaEllipsis = classVarianceAuthority.cva([
   "relative",
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -81,10 +84,10 @@ const cvaEllipsis = classVarianceAuthority.cva([
   "text-base",
   "not-italic",
   "font-normal",
-  "leading-6"
+  "leading-6",
+  "text-ddt-color-common-neutral-default"
 ]);
 const cvaChevronButton = classVarianceAuthority.cva([
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -92,23 +95,23 @@ const cvaChevronButton = classVarianceAuthority.cva([
   "justify-center",
   "w-12",
   "h-12",
-  "text-[#515151]",
+  "text-ddt-color-common-neutral-default",
   "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
   "leading-6",
-  "enabled:hover:bg-[#F2F2F2]",
-  "enabled:hover:text-daikinNeutral-800",
-  "enabled:active:bg-daikinNeutral-100",
-  "enabled:active:text-daikinNeutral-900",
-  "disabled:!text-daikinNeutral-400",
+  "enabled:hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:hover:text-ddt-color-common-neutral-hover",
+  "enabled:active:bg-ddt-color-common-surface-neutral-press",
+  "enabled:active:text-ddt-color-common-neutral-press",
+  "disabled:!text-ddt-color-common-disabled",
   "focus-visible:outline",
   "focus-visible:outline-2",
-  "focus-visible:outline-offset-1",
-  "focus-visible:outline-[#0081C0]"
+  "focus-visible:outline-offset-[-2px]",
+  "focus-visible:outline-ddt-color-common-border-focus"
 ]);
-exports.DaikinPagination = class DaikinPagination extends lit.LitElement {
+exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.current = 1;
@@ -136,7 +139,11 @@ exports.DaikinPagination = class DaikinPagination extends lit.LitElement {
       this.window
     );
     return lit.html`
-      <div aria-label="Pagination" class="inline-flex gap-1">
+      <div
+        aria-label="Pagination"
+        role="navigation"
+        class="inline-flex flex-wrap"
+      >
         <button
           class=${cvaChevron}
           type="button"
@@ -211,5 +218,5 @@ __decorateClass([
   decorators_js.property({ type: Number, reflect: true })
 ], exports.DaikinPagination.prototype, "window", 2);
 exports.DaikinPagination = __decorateClass([
-  decorators_js.customElement("daikin-pagination")
+  decorators.ddsElement("daikin-pagination")
 ], exports.DaikinPagination);

package/dist/cjs-dev/components/pagination/daikin-pagination.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The pagination component is used to navigate through a list of items that are divided into multiple pages.
  *
@@ -6,11 +6,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/pagination/index.js";
+ * ```
+ *
  * ```html
  * <daikin-pagination window="5" total="20" current="3"></daikin-pagination>
  * ```
  */
-export declare class DaikinPagination extends LitElement {
+export declare class DaikinPagination extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The current page number, starting at 1.

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.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;
@@ -17,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = classVarianceAuthority.cva(
   [
     "w-full",
-    "bg-daikinNeutral-200",
+    "bg-ddt-color-common-border-empty",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -28,14 +31,17 @@ const cvaBar = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
-        completed: ["after:w-full", "after:bg-daikinGreen-500"],
+        inprogress: [
+          "after:w-[--bar-width]",
+          "after:bg-ddt-color-common-brand-default"
+        ],
+        completed: ["after:w-full", "after:bg-ddt-color-common-success"],
         indeterminate: [
           "after:w-1/2",
-          "after:bg-daikinBlue-500",
+          "after:bg-ddt-color-common-brand-default",
           "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
         ],
-        error: ["after:w-full", "after:bg-daikinRed-500"]
+        error: ["after:w-full", "after:bg-ddt-color-common-danger-default"]
       },
       size: {
         medium: ["h-1"],
@@ -45,33 +51,42 @@ const cvaBar = classVarianceAuthority.cva(
   }
 );
 const cvaBarContainer = classVarianceAuthority.cva(
-  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  [
+    "flex",
+    "justify-between",
+    "items-center",
+    "text-ddt-color-common-text-primary",
+    "leading-[130%]",
+    "font-bold"
+  ],
   {
     variants: {
       variant: {
         inprogress: [],
         completed: [
           "after:size-4",
-          "after:text-daikinGreen-500",
+          "after:flex-none",
+          "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
-          "after:text-daikinRed-500",
+          "after:flex-none",
+          "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
       }
     }
   }
 );
-const cvaHelper = classVarianceAuthority.cva(["text-sm"], {
+const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
-      inprogress: [],
-      completed: [],
-      indeterminate: [],
-      error: ["text-daikinRed-500", "font-bold"]
+      inprogress: ["text-ddt-color-common-text-primary"],
+      completed: ["text-ddt-color-common-text-primary"],
+      indeterminate: ["text-ddt-color-common-text-primary"],
+      error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {
       false: ["hidden"],
@@ -79,7 +94,7 @@ const cvaHelper = classVarianceAuthority.cva(["text-sm"], {
     }
   }
 });
-exports.DaikinProgressBar = class DaikinProgressBar extends lit.LitElement {
+exports.DaikinProgressBar = class DaikinProgressBar extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.variant = "inprogress";
@@ -172,5 +187,5 @@ __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinProgressBar.prototype, "helper", 2);
 exports.DaikinProgressBar = __decorateClass([
-  decorators_js.customElement("daikin-progress-bar")
+  decorators.ddsElement("daikin-progress-bar")
 ], exports.DaikinProgressBar);

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaBar: (props?: ({
     variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
@@ -33,7 +34,7 @@ type ProgressBarVariantProps = MergeVariantProps<typeof cvaBar | typeof cvaHelpe
  * </daikin-progress-bar>
  * ```
  */
-export declare class DaikinProgressBar extends LitElement {
+export declare class DaikinProgressBar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the progress bar.