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

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

@@ -5,9 +5,9 @@ import { property, state, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.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 { ClickOutsideController } from "../../controllers/click-outside.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -104,8 +104,11 @@ const cvaOption = 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: {
@@ -431,7 +434,7 @@ let DaikinCombobox = class extends DDSFormElement {
           aria-label=${ifDefined(this._label ?? void 0)}
           aria-expanded=${this.open && !this.disabled}
           aria-disabled=${this.disabled}
-          aria-controls="combobox-items"
+          aria-controls=${ifDefined(this.open ? "combobox-items" : void 0)}
           aria-autocomplete="list"
           aria-required=${this.required}
           aria-haspopup="listbox"

package/dist/es/components/date-picker/daikin-date-picker.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/daikin-input-group.js";
 /**
  * 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/es/components/date-picker/daikin-date-picker.js

@@ -1,12 +1,16 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.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 { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import { FocusTrapController } from "../../controllers/focus-trap.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { tryParseDateFromProperty, parseDateFromProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, formatDateForProperty, isDateOutOfRange, cvaIconButton, countDaysForYearMonth } from "../../utils/calendar-common.js";
 import { reDispatch } from "../../utils/re-dispatch.js";
@@ -53,7 +57,7 @@ const cvaField = cva(
     "pl-4",
     "pr-10",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -240,6 +244,18 @@ let DaikinDatePicker = class extends DDSFormElement {
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._dateInputElement = createRef();
     this._calendarElement = createRef();
+    this._calendarButtonElement = 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 FocusTrapController(
+      this,
+      this._handleCloseCalendar
+    );
   }
   get _value() {
     return tryParseDateFromProperty(this.value);
@@ -403,7 +419,11 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     this._emitSelect();
   }
+  _handlePointerDown() {
+    this._ignoreCloseByFocusTrap = true;
+  }
   _handlePointerUp() {
+    this._ignoreCloseByFocusTrap = false;
     if (this.disabled || this.readonly) {
       return;
     }
@@ -501,12 +521,14 @@ let DaikinDatePicker = class extends DDSFormElement {
           @mouseup=${this._handleMouseUp}
         />
         <daikin-icon-button
+          ${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}
         >
@@ -515,6 +537,7 @@ let DaikinDatePicker = class extends DDSFormElement {
       </div>
       <daikin-calendar
         ${ref(this._calendarElement)}
+        ${this._focusTrapController.refContainer()}
         id="calendar"
         .value=${this._value ? formatDateForProperty(this._value) : null}
         min=${formatDateForProperty(min)}
@@ -522,7 +545,7 @@ let DaikinDatePicker = class extends DDSFormElement {
         default-value=${ifDefined(
       this._defaultValue ? 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}
@@ -541,6 +564,10 @@ let DaikinDatePicker = class extends DDSFormElement {
         },
         this.open
       )
+    )}
+      ${guard(
+      [this.open],
+      () => this._focusTrapController.directive(this.open)
     )}`;
   }
   willUpdate(changedProperties) {
@@ -620,7 +647,7 @@ __decorateClass([
   state()
 ], DaikinDatePicker.prototype, "_currentSelection", 2);
 DaikinDatePicker = __decorateClass([
-  customElement("daikin-date-picker")
+  ddsElement("daikin-date-picker")
 ], DaikinDatePicker);
 export {
   DaikinDatePicker

package/dist/es/components/dropdown/daikin-dropdown.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";
 /**
  * A dropdown list component.

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

@@ -1,13 +1,12 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property, queryAssignedElements, query, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.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 { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
@@ -324,6 +323,7 @@ let DaikinDropdown = class extends DDSFormElement {
     return html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref(this._dropdownRef)}
+        id="dropdown-button"
         type="button"
         class=${cvaButton({
       open: this.open,
@@ -334,7 +334,7 @@ let DaikinDropdown = class extends DDSFormElement {
         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" : nothing}
         aria-required=${this.required}
         aria-haspopup="listbox"
         @pointerup=${this._handlePointerUp}
@@ -348,16 +348,14 @@ let DaikinDropdown = class extends DDSFormElement {
       </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(this._label ?? void 0)}
-          role="listbox"
-        >
+        <div class="flex-1 overflow-y-auto break-all">
           <slot
             @slotchange=${this._handleSlotChange}
             @select=${this._handleSelect}

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

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property, query } 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/icon/daikin-icon.d.ts

@@ -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/es/components/icon/daikin-icon.js

@@ -3,6 +3,7 @@ import { unsafeCSS, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.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 { iconRegistry } from "../../icon-registry.js";
@@ -161,19 +162,19 @@ DaikinIcon.styles = 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/es/components/icon/icons.json.d.ts

@@ -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/es/components/icon/icons.json.js

@@ -1,4 +1,4 @@
-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/es/components/icon-button/daikin-icon-button.d.ts

@@ -1,8 +1,8 @@
+import { DDSFormSubmitElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
-import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 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/es/components/icon-button/daikin-icon-button.js

@@ -3,10 +3,10 @@ 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 tailwindStyles from "../../tailwind.css.js";
-import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

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

package/dist/es/components/index.js

@@ -1,6 +1,7 @@
 import { DaikinAccordion } from "./accordion/daikin-accordion.js";
 import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
 import { DaikinAvatar } from "./avatar/daikin-avatar.js";
+import { DaikinBadge } from "./badge/daikin-badge.js";
 import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.js";
@@ -38,6 +39,7 @@ import { DaikinRadio } from "./radio/daikin-radio.js";
 import { DaikinRadioGroup } from "./radio-group/daikin-radio-group.js";
 import { DaikinSelect } from "./select/daikin-select.js";
 import { DaikinSlider } from "./slider/daikin-slider.js";
+import { DaikinStatusMessage } from "./status-message/daikin-status-message.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
 import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
 import { DaikinTable } from "./table/daikin-table.js";
@@ -59,6 +61,7 @@ export {
   DaikinAccordion,
   DaikinAccordionItem,
   DaikinAvatar,
+  DaikinBadge,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
@@ -96,6 +99,7 @@ export {
   DaikinRadioGroup,
   DaikinSelect,
   DaikinSlider,
+  DaikinStatusMessage,
   DaikinTab,
   DaikinTabPanels,
   DaikinTable,

package/dist/es/components/inline-notification/daikin-inline-notification.d.ts

@@ -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/es/components/inline-notification/daikin-inline-notification.js

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, nothing, 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/input-group/daikin-input-group.js

@@ -2,9 +2,11 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, 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";
+import "../status-message/daikin-status-message.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -109,6 +111,25 @@ let DaikinInputGroup = class extends DDSElement {
       textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
     }[helperTextVariant];
+    const formatHelperText = (helperTextVariant2, helperText2) => {
+      switch (helperTextVariant2) {
+        case "error":
+        case "textareaLimitExceedError":
+          return html`<daikin-status-message
+            status="negative"
+            message-role="alert"
+            size="small"
+          >
+            ${helperText2}
+          </daikin-status-message>`;
+        case "none":
+          return nothing;
+        default:
+          return html`<span class=${cvaHelper({ type: helperTextVariant2 })}>
+            ${helperText2}
+          </span>`;
+      }
+    };
     return 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"
@@ -121,12 +142,7 @@ let DaikinInputGroup = class extends DDSElement {
                 ${this.required}
               </span>` : 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/es/components/link/daikin-link.js

@@ -3,6 +3,7 @@ import { unsafeCSS, css, 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 "../../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/list/daikin-list.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/list-item/daikin-list-item.js

@@ -3,6 +3,7 @@ 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";

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

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

@@ -1,6 +1,10 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+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;
@@ -42,7 +46,7 @@ const cvaLoading = cva(
     }
   }
 );
-let DaikinLoading = class extends LitElement {
+let DaikinLoading = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.size = "medium";
@@ -85,7 +89,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinLoading.prototype, "background", 2);
 DaikinLoading = __decorateClass([
-  customElement("daikin-loading")
+  ddsElement("daikin-loading")
 ], DaikinLoading);
 export {
   DaikinLoading

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

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

package/dist/es/components/logo/daikin-logo.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;
@@ -40,7 +44,7 @@ const cvaWrapper = cva(
     }
   }
 );
-let DaikinLogo = class extends LitElement {
+let DaikinLogo = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -99,7 +103,7 @@ __decorateClass([
   query("a")
 ], DaikinLogo.prototype, "_focusableElement", 2);
 DaikinLogo = __decorateClass([
-  customElement("daikin-logo")
+  ddsElement("daikin-logo")
 ], DaikinLogo);
 export {
   DaikinLogo

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

@@ -45,7 +45,7 @@ export declare class DaikinMenu extends DDSElement {
      * Specifies the initial position of the menu relative to the trigger.
      * However, if there isn't enough space in the specified direction, the menu will automatically adjust its direction.
      */
-    placement: "top" | "bottom" | "left" | "right";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     /**
      * Whether the menu is open.
      */
@@ -76,6 +76,11 @@ export declare class DaikinMenu extends DDSElement {
     private _reflectDynamicProperties;
     private _handleSlotChange;
     private _handleTriggerClick;
+    private _handleTouchEnd;
+    /**
+     * Handles click events on the menu-item.
+     * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
+     */
     private _handleClick;
     private _handleBeforeToggle;
     private _handleToggle;