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

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

@@ -7,9 +7,9 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const repeat_js = require("lit/directives/repeat.js");
 require("../../base/dds-element.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const clickOutside = require("../../controllers/click-outside.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -106,8 +106,11 @@ const cvaOption = classVarianceAuthority.cva(
           "active:var-color-ddt-color-common-surface-selected-press/color-primary",
           "after:i-daikin-dropdown-check",
           "after:size-6",
-          "after:flex-none",
-          "justify-between"
+          "pr-10",
+          "after:absolute",
+          "after:right-3",
+          "after:top-1/2",
+          "after:-translate-y-1/2"
         ]
       },
       disabled: {
@@ -433,7 +436,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
           aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
           aria-expanded=${this.open && !this.disabled}
           aria-disabled=${this.disabled}
-          aria-controls="combobox-items"
+          aria-controls=${ifDefined_js.ifDefined(this.open ? "combobox-items" : void 0)}
           aria-autocomplete="list"
           aria-required=${this.required}
           aria-haspopup="listbox"

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

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

package/dist/cjs-dev/components/date-picker/daikin-date-picker.cjs

@@ -7,8 +7,12 @@ const decorators_js = require("lit/decorators.js");
 const guard_js = require("lit/directives/guard.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const ref_js = require("lit/directives/ref.js");
+require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
+const focusTrap = require("../../controllers/focus-trap.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const calendarCommon = require("../../utils/calendar-common.cjs");
 const reDispatch = require("../../utils/re-dispatch.cjs");
@@ -16,10 +20,10 @@ require("../calendar/daikin-calendar.cjs");
 require("../icon-button/daikin-icon-button.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;
@@ -55,7 +59,7 @@ const cvaField = classVarianceAuthority.cva(
     "pl-4",
     "pr-10",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -242,6 +246,18 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._dateInputElement = ref_js.createRef();
     this._calendarElement = ref_js.createRef();
+    this._calendarButtonElement = ref_js.createRef();
+    this._ignoreCloseByFocusTrap = false;
+    this._handleCloseCalendar = () => {
+      var _a;
+      if (this._ignoreCloseByFocusTrap) return;
+      this.open = false;
+      (_a = this._calendarButtonElement.value) == null ? void 0 : _a.focus();
+    };
+    this._focusTrapController = new focusTrap.FocusTrapController(
+      this,
+      this._handleCloseCalendar
+    );
   }
   get _value() {
     return calendarCommon.tryParseDateFromProperty(this.value);
@@ -405,7 +421,11 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     this._emitSelect();
   }
+  _handlePointerDown() {
+    this._ignoreCloseByFocusTrap = true;
+  }
   _handlePointerUp() {
+    this._ignoreCloseByFocusTrap = false;
     if (this.disabled || this.readonly) {
       return;
     }
@@ -503,12 +523,14 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           @mouseup=${this._handleMouseUp}
         />
         <daikin-icon-button
+          ${ref_js.ref(this._calendarButtonElement)}
           class="absolute top-0 bottom-0 right-2 m-auto"
           type="button"
           color="neutral"
           variant="ghost"
           button-aria-label="Open the date picker"
           ?disabled=${this.disabled}
+          @pointerdown=${this._handlePointerDown}
           @pointerup=${this._handlePointerUp}
           @keydown=${this._handleCalendarKeyDown}
         >
@@ -517,6 +539,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       </div>
       <daikin-calendar
         ${ref_js.ref(this._calendarElement)}
+        ${this._focusTrapController.refContainer()}
         id="calendar"
         .value=${this._value ? calendarCommon.formatDateForProperty(this._value) : null}
         min=${calendarCommon.formatDateForProperty(min)}
@@ -524,7 +547,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         default-value=${ifDefined_js.ifDefined(
       this._defaultValue ? calendarCommon.formatDateForProperty(this._defaultValue) : void 0
     )}
-        popover="auto"
+        popover="manual"
         class="absolute left-[--floating-x,0] top-[--floating-y,0]"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -543,6 +566,10 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         },
         this.open
       )
+    )}
+      ${guard_js.guard(
+      [this.open],
+      () => this._focusTrapController.directive(this.open)
     )}`;
   }
   willUpdate(changedProperties) {
@@ -633,5 +660,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinDatePicker.prototype, "_currentSelection", 2);
 exports.DaikinDatePicker = __decorateClass([
-  decorators_js.customElement("daikin-date-picker")
+  decorators.ddsElement("daikin-date-picker")
 ], exports.DaikinDatePicker);

package/dist/cjs-dev/components/date-picker/daikin-date-picker.d.cts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
 /**
  * The date picker component provides a date selection function that can be combined with forms. This component uses `daikin-calendar` internally (users do not need to nest this).
@@ -70,12 +70,16 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _autoUpdateController;
     private _dateInputElement;
     private _calendarElement;
+    private _calendarButtonElement;
     private get _value();
     private get _min();
     private get _max();
     private get _defaultValue();
     private get _viewDate();
     private get _open();
+    private _ignoreCloseByFocusTrap;
+    private _handleCloseCalendar;
+    private readonly _focusTrapController;
     private _emitSelect;
     private _handleFocusIn;
     private _handleFocusOut;
@@ -84,6 +88,7 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _handleKeyDown;
     private _handleBeforeInput;
     private _handleSelect;
+    private _handlePointerDown;
     private _handlePointerUp;
     private _handleCalendarKeyDown;
     private _handleToggle;

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

@@ -4,12 +4,11 @@ const dom = require("@floating-ui/dom");
 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 ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const isSimpleKey = require("../../utils/is-simple-key.cjs");
@@ -326,6 +325,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     return lit.html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref_js.ref(this._dropdownRef)}
+        id="dropdown-button"
         type="button"
         class=${cvaButton({
       open: this.open,
@@ -336,7 +336,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
         aria-label=${this._label ?? fallbackLabel}
         aria-expanded=${this.open && !this.disabled}
         aria-disabled=${this.disabled}
-        aria-controls="dropdown-items"
+        aria-controls=${this.open ? "dropdown-items" : lit.nothing}
         aria-required=${this.required}
         aria-haspopup="listbox"
         @pointerup=${this._handlePointerUp}
@@ -350,16 +350,14 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       </button>
       <div
         id="dropdown-items"
+        role="listbox"
         popover="manual"
         class="flex flex-col overflow-hidden floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider opacity-1 transition-[opacity] rounded max-w-min"
+        aria-labelledby="dropdown-button"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <div
-          class="flex-1 overflow-y-auto break-all"
-          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-          role="listbox"
-        >
+        <div class="flex-1 overflow-y-auto break-all">
           <slot
             @slotchange=${this._handleSlotChange}
             @select=${this._handleSelect}

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DDSFormElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * A dropdown list component.

package/dist/cjs-dev/components/dropdown-item/daikin-dropdown-item.cjs

@@ -4,6 +4,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const unsafeHtml_js = require("lit/directives/unsafe-html.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const iconRegistry = require("../../icon-registry.cjs");
@@ -192,19 +193,19 @@ exports.DaikinIcon.styles = lit.css`
     }
 
     :host([size="s"]) {
-      --ddc-icon-size: 12px;
+      --ddc-icon-size: 16px;
     }
 
     :host([size="m"]) {
-      --ddc-icon-size: 16px;
+      --ddc-icon-size: 24px;
     }
 
     :host([size="l"]) {
-      --ddc-icon-size: 20px;
+      --ddc-icon-size: 32px;
     }
 
     :host([size="xl"]) {
-      --ddc-icon-size: 24px;
+      --ddc-icon-size: 40px;
     }
   `;
 __decorateClass([

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

@@ -78,6 +78,14 @@ declare const icons: {
         class: string;
         color: null;
     };
+    notification: {
+        class: string;
+        color: null;
+    };
+    neutral: {
+        class: string;
+        color: null;
+    };
 };
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;

package/dist/cjs-dev/components/icon/icons.json.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null } };
+const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null }, "notification": { "class": "i-daikin-notification", "color": null }, "neutral": { "class": "i-daikin-neutral", "color": null } };
 const iconsJson = {
   icons
 };

package/dist/cjs-dev/components/icon/icons.json.d.cts

@@ -75,6 +75,14 @@ declare const _default: {
     "cross": {
       "class": "i-daikin-close",
       "color": null
+    },
+    "notification": {
+      "class": "i-daikin-notification",
+      "color": null
+    },
+    "neutral": {
+      "class": "i-daikin-neutral",
+      "color": null
     }
   }
 }

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

@@ -5,10 +5,10 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

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

package/dist/cjs-dev/components/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const daikinAccordion = require("./accordion/daikin-accordion.cjs");
 const daikinAccordionItem = require("./accordion-item/daikin-accordion-item.cjs");
 const daikinAvatar = require("./avatar/daikin-avatar.cjs");
+const daikinBadge = require("./badge/daikin-badge.cjs");
 const daikinBreadcrumb = require("./breadcrumb/daikin-breadcrumb.cjs");
 const daikinBreadcrumbItem = require("./breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./button/daikin-button.cjs");
@@ -40,6 +41,7 @@ const daikinRadio = require("./radio/daikin-radio.cjs");
 const daikinRadioGroup = require("./radio-group/daikin-radio-group.cjs");
 const daikinSelect = require("./select/daikin-select.cjs");
 const daikinSlider = require("./slider/daikin-slider.cjs");
+const daikinStatusMessage = require("./status-message/daikin-status-message.cjs");
 const daikinTab = require("./tab/daikin-tab.cjs");
 const daikinTabPanels = require("./tab-panels/daikin-tab-panels.cjs");
 const daikinTable = require("./table/daikin-table.cjs");
@@ -69,6 +71,10 @@ Object.defineProperty(exports, "DaikinAvatar", {
   enumerable: true,
   get: () => daikinAvatar.DaikinAvatar
 });
+Object.defineProperty(exports, "DaikinBadge", {
+  enumerable: true,
+  get: () => daikinBadge.DaikinBadge
+});
 Object.defineProperty(exports, "DaikinBreadcrumb", {
   enumerable: true,
   get: () => daikinBreadcrumb.DaikinBreadcrumb
@@ -219,6 +225,10 @@ Object.defineProperty(exports, "DaikinSlider", {
   enumerable: true,
   get: () => daikinSlider.DaikinSlider
 });
+Object.defineProperty(exports, "DaikinStatusMessage", {
+  enumerable: true,
+  get: () => daikinStatusMessage.DaikinStatusMessage
+});
 Object.defineProperty(exports, "DaikinTab", {
   enumerable: true,
   get: () => daikinTab.DaikinTab

package/dist/cjs-dev/components/index.d.cts

@@ -1,6 +1,7 @@
 export * from "./accordion/index.cjs";
 export * from "./accordion-item/index.cjs";
 export * from "./avatar/index.cjs";
+export * from "./badge/index.cjs";
 export * from "./breadcrumb/index.cjs";
 export * from "./breadcrumb-item/index.cjs";
 export * from "./button/index.cjs";
@@ -38,6 +39,7 @@ export * from "./radio/index.cjs";
 export * from "./radio-group/index.cjs";
 export * from "./select/index.cjs";
 export * from "./slider/index.cjs";
+export * from "./status-message/index.cjs";
 export * from "./tab/index.cjs";
 export * from "./tab-panels/index.cjs";
 export * from "./table/index.cjs";

package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.d.cts

@@ -41,7 +41,10 @@ export declare class DaikinInlineNotification extends DDSElement {
      */
     closable: boolean;
     /**
-     * The timestamp to display.
+     * The timestamp to display. Accepts a Date object and displays it in YYYY/MM/DD format.
+     *
+     * @example
+     * element.timestamp = new Date();
      */
     timestamp: Date | null;
     /**

package/dist/cjs-dev/components/input-group/daikin-input-group.cjs

@@ -4,9 +4,11 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+require("../status-message/daikin-status-message.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -111,6 +113,25 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
       textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
     }[helperTextVariant];
+    const formatHelperText = (helperTextVariant2, helperText2) => {
+      switch (helperTextVariant2) {
+        case "error":
+        case "textareaLimitExceedError":
+          return lit.html`<daikin-status-message
+            status="negative"
+            message-role="alert"
+            size="small"
+          >
+            ${helperText2}
+          </daikin-status-message>`;
+        case "none":
+          return lit.nothing;
+        default:
+          return lit.html`<span class=${cvaHelper({ type: helperTextVariant2 })}>
+            ${helperText2}
+          </span>`;
+      }
+    };
     return lit.html`<fieldset class="contents" ?disabled=${this.disabled}>
       <label
         class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
@@ -123,12 +144,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
                 ${this.required}
               </span>` : lit.nothing}
         </div>
-        <span
-          class=${cvaHelper({ type: helperTextVariant })}
-          aria-live=${helperTextVariant === "error" ? "polite" : "off"}
-        >
-          ${helperText}
-        </span>
+        ${formatHelperText(helperTextVariant, helperText)}
         <slot
           @slotchange=${this._handleSlotChange}
           @input=${this._handleInput}

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

@@ -5,6 +5,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -5,6 +5,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -3,13 +3,17 @@ 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");
+require("../../base/dds-form-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;
@@ -44,7 +48,7 @@ const cvaLoading = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinLoading = class DaikinLoading extends lit.LitElement {
+exports.DaikinLoading = class DaikinLoading extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.size = "medium";
@@ -87,5 +91,5 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinLoading.prototype, "background", 2);
 exports.DaikinLoading = __decorateClass([
-  decorators_js.customElement("daikin-loading")
+  decorators.ddsElement("daikin-loading")
 ], exports.DaikinLoading);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The loading component displays a spinner to indicate that a process is in progress.
  * If the spinner is expected to blend into the background, set the background color. You can use the `background` attribute for such cases.
@@ -13,7 +13,7 @@ import { LitElement } from 'lit';
  *  <daikin-loading></daikin-loading>
  * ```
  */
-export declare class DaikinLoading extends LitElement {
+export declare class DaikinLoading extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Size of the loading.

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

@@ -4,13 +4,17 @@ 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");
+require("../../base/dds-form-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;
@@ -42,7 +46,7 @@ const cvaWrapper = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinLogo = class DaikinLogo extends lit.LitElement {
+exports.DaikinLogo = class DaikinLogo extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -101,5 +105,5 @@ __decorateClass([
   decorators_js.query("a")
 ], exports.DaikinLogo.prototype, "_focusableElement", 2);
 exports.DaikinLogo = __decorateClass([
-  decorators_js.customElement("daikin-logo")
+  decorators.ddsElement("daikin-logo")
 ], exports.DaikinLogo);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The logo is a UI element that represents a brand, company or service. It serves as a visual identifier, helping users recognize and navigate within a specific application or website.
  *
@@ -18,7 +18,7 @@ import { LitElement } from 'lit';
  * </div>
  * ```
  */
-export declare class DaikinLogo extends LitElement {
+export declare class DaikinLogo extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Link `href`.