@daikin-oss/design-system-web-components 1.3.0 → 1.4.0-next.0

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaWrapper: (props?: ({
     type?: "button" | "icon" | "link" | null | undefined;
@@ -19,7 +19,7 @@ type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
  * <daikin-avatar></daikin-avatar>
  * ```
  */
-export declare class DaikinAvatar extends LitElement {
+export declare class DaikinAvatar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Replace the wrapping element.

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

@@ -1,7 +1,11 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { unsafeCSS, css, 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 "../../base/dds-form-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;
@@ -57,7 +61,7 @@ const cvaWrapper = cva(
     }
   }
 );
-let DaikinAvatar = class extends LitElement {
+let DaikinAvatar = class extends DDSElement {
   constructor() {
     super();
     this.type = "icon";
@@ -155,7 +159,7 @@ __decorateClass([
   query("a,button")
 ], DaikinAvatar.prototype, "_focusableElement", 2);
 DaikinAvatar = __decorateClass([
-  customElement("daikin-avatar")
+  ddsElement("daikin-avatar")
 ], DaikinAvatar);
 export {
   DaikinAvatar

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

@@ -0,0 +1,85 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * A badge is used to display notification counts, status indicators, or small dots in the UI—commonly for message alerts or status marking.
+ *
+ * @slot - A slot for anchoring element. Place `daikin-icon-button` here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/badge/index.js";
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * import "@daikin-oss/design-system-web-components/components/icon-button/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-badge count="42" max-count="999" color="danger">
+ *   <daikin-icon-button variant="ghost" size="m" buttonAriaLabel="42 unread notifications">
+ *     <daikin-icon
+ *       class="w-8 h-8"
+ *       icon="notification"
+ *       size="current"
+ *       color="current"
+ *     >
+ *     </daikin-icon>
+ *   </daikin-icon-button>
+ * </daikin-badge>
+ * ```
+ */
+export declare class DaikinBadge extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Badge type.
+     * - "number": Displays a number (e.g., message count, quantity).
+     * - "dot": Displays only a small dot (e.g., status indicator).
+     * @default "dot"
+     */
+    type: "number" | "dot";
+    /**
+     * The numeric content displayed in the badge.
+     * Only effective when type="number".
+     * Accepts a string or null; will be parsed as a number internally.
+     * @example "5"
+     */
+    count: string | null;
+    /**
+     * The maximum number to display in the badge.
+     * If the count exceeds this value, it will display as "maxCount+", e.g., "99+".
+     * Only effective when type="number".
+     * @example "99"
+     */
+    maxCount: string | null;
+    /**
+     * Whether to hide the badge.
+     * - true: The badge is not displayed (slot content remains visible).
+     * - false: The badge is displayed normally.
+     * @default false
+     */
+    invisible: boolean;
+    /**
+     * Badge color.
+     * Supports predefined semantic color tokens (danger, alarm, warning, success, information).
+     * @default "danger"
+     */
+    color: "danger" | "alarm" | "warning" | "success" | "information";
+    /**
+     * Computes the actual number to display in the badge.
+     * - If count is null or invalid, displays "0".
+     * - If count exceeds maxCount, displays "maxCount+".
+     * - Otherwise, displays the actual number.
+     */
+    private get _count();
+    /**
+     * Renders the badge component.
+     * - Renders a small dot when type="dot".
+     * - Renders a number when type="number" and count > 0.
+     * - Does not render the badge if invisible=true.
+     * - The slot wraps the icon button.
+     */
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-badge": DaikinBadge;
+    }
+}

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

@@ -0,0 +1,134 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-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);
+  return result;
+};
+const cvaBadge = cva(["absolute", "rounded-full"], {
+  variants: {
+    type: {
+      number: [
+        "h-4",
+        "min-w-4",
+        "px-1",
+        "text-[10px]",
+        "font-normal",
+        "font-daikinSerif",
+        "text-white",
+        "flex",
+        "items-center",
+        "justify-center",
+        "-top-[2px]",
+        "-right-[2px]",
+        "before:content-[attr(data-count)]",
+        "before:leading-none",
+        "before:whitespace-nowrap",
+        "data-[count=0]:hidden"
+      ],
+      dot: ["w-2", "h-2", "top-1", "right-1"]
+    },
+    color: {
+      danger: ["bg-ddt-color-common-danger-default"],
+      alarm: ["bg-ddt-color-common-alarm"],
+      warning: ["bg-ddt-color-common-warning"],
+      success: ["bg-ddt-color-common-success"],
+      information: ["bg-ddt-color-common-information"]
+    }
+  }
+});
+let DaikinBadge = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.type = "dot";
+    this.count = null;
+    this.maxCount = "99";
+    this.invisible = false;
+    this.color = "danger";
+  }
+  /**
+   * Computes the actual number to display in the badge.
+   * - If count is null or invalid, displays "0".
+   * - If count exceeds maxCount, displays "maxCount+".
+   * - Otherwise, displays the actual number.
+   */
+  get _count() {
+    if (this.count == null) {
+      return "0";
+    }
+    const count = parseInt(this.count, 10);
+    const maxCount = this.maxCount ? parseInt(this.maxCount, 10) : null;
+    if (isNaN(count) || count < 0) {
+      return "0";
+    }
+    if (maxCount != null && !isNaN(maxCount) && count > maxCount) {
+      return `${maxCount.toLocaleString()}+`;
+    }
+    return count.toLocaleString();
+  }
+  /**
+   * Renders the badge component.
+   * - Renders a small dot when type="dot".
+   * - Renders a number when type="number" and count > 0.
+   * - Does not render the badge if invisible=true.
+   * - The slot wraps the icon button.
+   */
+  render() {
+    return html`
+      <slot></slot>
+      <span
+        role="presentation"
+        data-count=${this._count}
+        class=${cvaBadge({
+      type: this.type,
+      color: this.color
+    })}
+        ?hidden=${this.invisible}
+      ></span>
+    `;
+  }
+};
+DaikinBadge.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    span[hidden] {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBadge.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBadge.prototype, "count", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "max-count" })
+], DaikinBadge.prototype, "maxCount", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinBadge.prototype, "invisible", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBadge.prototype, "color", 2);
+DaikinBadge = __decorateClass([
+  ddsElement("daikin-badge")
+], DaikinBadge);
+export {
+  DaikinBadge
+};

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

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

package/dist/es/components/badge/index.js

@@ -0,0 +1,4 @@
+import { DaikinBadge } from "./daikin-badge.js";
+export {
+  DaikinBadge
+};

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

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -2,6 +2,7 @@ import { unsafeCSS, css, 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 "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -1,8 +1,8 @@
-import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
+import { DDSFormSubmitElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaButton: (props?: ({
-    color?: "default" | "danger" | null | undefined;
+    color?: "danger" | "default" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -3,9 +3,9 @@ import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The calendar component provides calendar elements. It has a function for selecting dates, and is also used in `daikin-date-picker`.
  *
@@ -15,7 +16,7 @@ import { LitElement, PropertyValues, TemplateResult } from 'lit';
  * <daikin-calendar></daikin-calendar>
  * ```
  */
-export declare class DaikinCalendar extends LitElement {
+export declare class DaikinCalendar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The current value of the input, submitted as a name/value pair with form data.
@@ -45,6 +46,15 @@ export declare class DaikinCalendar extends LitElement {
      * Intended for use only by `daikin-date-picker`.
      */
     view: "year" | "month" | "day";
+    /**
+     * The date that was last focused.
+     * Used to preserve focus when tabbing out and back in.
+     */
+    private _lastFocusedDate;
+    /**
+     * The date to be focused.
+     * Used to set focus on a date that is not in the current view (year and month).
+     */
     private _dateToBeFocused;
     private get _value();
     private get _min();

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

@@ -1,10 +1,14 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, LitElement, html, nothing } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { unsafeCSS, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { tryParseDateFromProperty, parseDateFromProperty, cloneDate, isMonthOutOfRange, getDateByMonthOffsetClamped, formatDateForProperty, clampDate, isSameYearMonth, createDateClamped, calcWeeksOnCalendar, isDateOutOfRange, cvaIconButton, normalizeDate, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from "../../utils/calendar-common.js";
+import { tryParseDateFromProperty, parseDateFromProperty, cloneDate, isMonthOutOfRange, getDateByMonthOffsetClamped, formatDateForProperty, clampDate, isSameYearMonth, createDateClamped, calcWeeksOnCalendar, toFirstDayOfMonth, isDateOutOfRange, cvaIconButton, normalizeDate, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from "../../utils/calendar-common.js";
 import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
 import "../icon-button/daikin-icon-button.js";
 var __defProp = Object.defineProperty;
@@ -117,7 +121,7 @@ function getNextFocusDateByKey(date, event) {
   }
   return null;
 }
-let DaikinCalendar = class extends LitElement {
+let DaikinCalendar = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = null;
@@ -125,6 +129,7 @@ let DaikinCalendar = class extends LitElement {
     this.max = "2099-12-31";
     this.defaultValue = null;
     this.view = "day";
+    this._lastFocusedDate = null;
     this._dateToBeFocused = null;
     this._viewDate = getToday();
   }
@@ -171,6 +176,7 @@ let DaikinCalendar = class extends LitElement {
   }
   _navigateMonth(date, offset) {
     this._viewDate = getDateByMonthOffsetClamped(date, offset);
+    this._lastFocusedDate = null;
   }
   _handleCalendarClick(date) {
     this.value = formatDateForProperty(date);
@@ -202,6 +208,7 @@ let DaikinCalendar = class extends LitElement {
       `[data-type=day][data-date="${formatDateForProperty(dateToBeFocused)}"]`
     );
     if (dateButton && isSameYearMonth(dateToBeFocused, focusedDate)) {
+      this._lastFocusedDate = dateToBeFocused;
       dateButton.focus();
     } else {
       this._dateToBeFocused = dateToBeFocused;
@@ -357,7 +364,19 @@ let DaikinCalendar = class extends LitElement {
       viewDate.getUTCFullYear(),
       viewDate.getUTCMonth()
     );
-    const focusable = value && isSameYearMonth(viewDate, value) ? value : isSameYearMonth(viewDate, today) ? today : clampDate(viewDate, min, max);
+    const focusable = (
+      // If the last focused date is in the same month as the view date, use it as the focusable date.
+      this._lastFocusedDate && isSameYearMonth(viewDate, this._lastFocusedDate) ? this._lastFocusedDate : (
+        // If the value is in the same month as the view date, use it as the focusable date.
+        value && isSameYearMonth(viewDate, value) ? value : (
+          // If today's date is in the same month as the view date, use it as the focusable date.
+          isSameYearMonth(viewDate, today) ? today : (
+            // Otherwise, use the first day of the month (clamped).
+            clampDate(toFirstDayOfMonth(viewDate), min, max)
+          )
+        )
+      )
+    );
     return html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
       <div class="flex gap-1 flex-wrap w-full px-4" role="row">
         ${repeat(
@@ -392,9 +411,7 @@ let DaikinCalendar = class extends LitElement {
         })}
                     role="gridcell"
                     ?disabled=${isDateOutOfRange(date, min, max)}
-                    tabindex=${ifDefined(
-          focusable.getTime() != date.getTime() ? -1 : void 0
-        )}
+                    tabindex=${date.getTime() === focusable.getTime() ? nothing : -1}
                     aria-current=${date.getTime() === today.getTime() ? "date" : nothing}
                     aria-selected=${date.getTime() === (value == null ? void 0 : value.getTime())}
                     data-type="day"
@@ -492,11 +509,14 @@ let DaikinCalendar = class extends LitElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("_viewDate") && this._dateToBeFocused != null) {
+    if (this._dateToBeFocused != null) {
       const dateButton = this.renderRoot.querySelector(
         `[data-type=day][data-date="${formatDateForProperty(this._dateToBeFocused)}"]`
       );
-      dateButton == null ? void 0 : dateButton.focus();
+      if (dateButton) {
+        this._lastFocusedDate = this._dateToBeFocused;
+        dateButton.focus();
+      }
       this._dateToBeFocused = null;
     }
     if (changedProperties.get("view") != null) {
@@ -539,11 +559,17 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: false })
 ], DaikinCalendar.prototype, "view", 2);
+__decorateClass([
+  state()
+], DaikinCalendar.prototype, "_lastFocusedDate", 2);
+__decorateClass([
+  state()
+], DaikinCalendar.prototype, "_dateToBeFocused", 2);
 __decorateClass([
   state()
 ], DaikinCalendar.prototype, "_viewDate", 2);
 DaikinCalendar = __decorateClass([
-  customElement("daikin-calendar")
+  ddsElement("daikin-calendar")
 ], DaikinCalendar);
 export {
   DaikinCalendar

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

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -1,5 +1,6 @@
 import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/card-header/daikin-card-header.js

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -4,6 +4,7 @@ import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DDSFormElement } from "../../base/index.js";
 /**
  * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.

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

@@ -2,9 +2,9 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import "../../base/dds-element.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 declare const cvaCheckboxGroup: (props?: ({
@@ -29,7 +29,7 @@ type CheckboxGroupProps = MergeVariantProps<typeof cvaCheckboxGroup>;
  * </daikin-checkbox-group>
  * ```
  */
-export declare class DaikinCheckboxGroup extends LitElement {
+export declare class DaikinCheckboxGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the checkbox group orientation

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

@@ -1,7 +1,11 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, state, queryAssignedElements, customElement } from "lit/decorators.js";
+import { unsafeCSS, css, html } from "lit";
+import { property, state, queryAssignedElements } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-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;
@@ -21,7 +25,7 @@ const cvaCheckboxGroup = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
     }
   }
 });
-let DaikinCheckboxGroup = class extends LitElement {
+let DaikinCheckboxGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.orientation = "vertical";
@@ -88,7 +92,7 @@ __decorateClass([
   })
 ], DaikinCheckboxGroup.prototype, "_checkboxes", 2);
 DaikinCheckboxGroup = __decorateClass([
-  customElement("daikin-checkbox-group")
+  ddsElement("daikin-checkbox-group")
 ], DaikinCheckboxGroup);
 export {
   DaikinCheckboxGroup

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.
  *
@@ -14,7 +14,7 @@ import { LitElement } from 'lit';
  * <daikin-chip chip-aria-label="Chip Text">Text</daikin-chip>
  * ```
  */
-export declare class DaikinChip extends LitElement {
+export declare class DaikinChip extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Provides an accessible name of the chip.

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

@@ -1,7 +1,11 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { unsafeCSS, css, 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 "../../base/dds-form-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;
@@ -42,7 +46,7 @@ const cvaRemoveButton = cva([
   "text-[--color-primary]",
   "bg-[--color-secondary]"
 ]);
-let DaikinChip = class extends LitElement {
+let DaikinChip = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.chipAriaLabel = null;
@@ -100,7 +104,7 @@ __decorateClass([
   query("button")
 ], DaikinChip.prototype, "_focusableElement", 2);
 DaikinChip = __decorateClass([
-  customElement("daikin-chip")
+  ddsElement("daikin-chip")
 ], DaikinChip);
 export {
   DaikinChip

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DDSFormElement } from "../../base/index.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * Interface for combobox option object