@daikin-oss/design-system-web-components 1.3.2 → 1.4.0-next.1

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

@@ -21,15 +21,17 @@ export declare class DaikinCalendar extends DDSElement {
     /**
      * The current value of the input, submitted as a name/value pair with form data.
      */
-    value: string | null;
+    value: string;
     /**
      * The minimum date.
-     * example: `1900-01-01`
+     *
+     * @default "1900-01-01"
      */
     min: string;
     /**
      * The maximum date.
-     * example: `2099-12-31`
+     *
+     * @default "2099-12-31"
      */
     max: string;
     /**
@@ -46,6 +48,15 @@ export declare class DaikinCalendar extends DDSElement {
      * 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,14 +1,15 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
+import { 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 { property } from "../../base/dds-property.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;
@@ -124,16 +125,15 @@ function getNextFocusDateByKey(date, event) {
 let DaikinCalendar = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.value = null;
-    this.min = "1900-01-01";
-    this.max = "2099-12-31";
+    this.value = "";
     this.defaultValue = null;
     this.view = "day";
+    this._lastFocusedDate = null;
     this._dateToBeFocused = null;
     this._viewDate = getToday();
   }
   get _value() {
-    return tryParseDateFromProperty(this.value ?? "");
+    return tryParseDateFromProperty(this.value);
   }
   get _min() {
     return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
@@ -175,6 +175,7 @@ let DaikinCalendar = class extends DDSElement {
   }
   _navigateMonth(date, offset) {
     this._viewDate = getDateByMonthOffsetClamped(date, offset);
+    this._lastFocusedDate = null;
   }
   _handleCalendarClick(date) {
     this.value = formatDateForProperty(date);
@@ -206,6 +207,7 @@ let DaikinCalendar = class extends DDSElement {
       `[data-type=day][data-date="${formatDateForProperty(dateToBeFocused)}"]`
     );
     if (dateButton && isSameYearMonth(dateToBeFocused, focusedDate)) {
+      this._lastFocusedDate = dateToBeFocused;
       dateButton.focus();
     } else {
       this._dateToBeFocused = dateToBeFocused;
@@ -361,7 +363,19 @@ let DaikinCalendar = class extends DDSElement {
       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(
@@ -396,9 +410,7 @@ let DaikinCalendar = class extends DDSElement {
         })}
                     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"
@@ -496,11 +508,14 @@ let DaikinCalendar = class extends DDSElement {
     }
   }
   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) {
@@ -529,13 +544,13 @@ DaikinCalendar.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, attribute: false })
+  property({ type: String })
 ], DaikinCalendar.prototype, "value", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
 ], DaikinCalendar.prototype, "min", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
 ], DaikinCalendar.prototype, "max", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "default-value" })
@@ -543,6 +558,12 @@ __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);

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

@@ -1,8 +1,8 @@
 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 { property } from "../../base/dds-property.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,6 +1,7 @@
 import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import "lit/decorators.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

@@ -2,6 +2,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 "lit/decorators.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

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { 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 { property } from "../../base/dds-property.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,7 +1,8 @@
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.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

@@ -5,11 +5,18 @@ import { DDSFormElement } from "../../base/index.js";
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
  * This component is ideal for cases where multiple selections are allowed or required.
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="checkbox">` element.
  *
  * @slot - A slot for the checkbox label content.
  *
- * @csspart label - Change the style of checkbox label.
+ * @csspart label - CSS styles applied to the `label` part target the internal `<label>` element containing the checkbox. For instance, setting `cursor: pointer;` is useful when the checkbox acts as part of a larger interactive component.
  *
  * @example
  *
@@ -31,10 +38,14 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * Label position.
      * - `right` (default): The label will be placed to the right of the checkbox.
      * - `hidden`: The label will not be shown.
+     *
+     * @default "right"
      */
     labelPosition: "right" | "hidden";
     /**
      * Specify the checkbox checked state.
+     *
+     * @default "unchecked"
      */
     checkState: "unchecked" | "indeterminate" | "checked";
     /**

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

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -76,9 +77,6 @@ const cvaLabel = cva([], {
 let DaikinCheckbox = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.labelPosition = "right";
-    this.checkState = "unchecked";
     this.disabled = false;
     this.disabledByParent = false;
   }
@@ -124,7 +122,7 @@ let DaikinCheckbox = class extends DDSFormElement {
         <input
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
-          name=${this.name}
+          name=${ifDefined(this.getBackingProperty("name"))}
           ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : nothing}
           .checked=${this.checked}
@@ -158,13 +156,29 @@ DaikinCheckbox.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinCheckbox.prototype, "label", 2);
 __decorateClass([
-  property({ type: String, attribute: "label-position" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "label-position",
+    fallbackValue: "right",
+    isAllowedValue: oneOf(["right", "hidden"])
+  })
 ], DaikinCheckbox.prototype, "labelPosition", 2);
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "check-state" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "check-state",
+    fallbackValue: "unchecked",
+    isAllowedValue: oneOf([
+      "unchecked",
+      "indeterminate",
+      "checked"
+    ])
+  })
 ], DaikinCheckbox.prototype, "checkState", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

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

@@ -33,6 +33,8 @@ export declare class DaikinCheckboxGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the checkbox group orientation
+     *
+     * @default "vertical"
      */
     orientation: CheckboxGroupProps["orientation"];
     /**

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

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, state, queryAssignedElements } from "lit/decorators.js";
+import { 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 { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -75,7 +76,15 @@ DaikinCheckboxGroup.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: oneOf([
+      "vertical",
+      "horizontal"
+    ])
+  })
 ], DaikinCheckboxGroup.prototype, "orientation", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

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

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { 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 { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -16,7 +16,14 @@ export type ComboboxItem = string | ComboboxOption;
 export declare function defaultFilterFn(items: readonly ComboboxItem[], value: string): readonly ComboboxItem[];
 /**
  * A combobox component.
- * Unlike a dropdown component, a combobox primarily functions as a text field (using a native <input> tag) that can accept custom user input. The dropdown list serves as a helpful aid to expedite the user's input process.
+ * Unlike a dropdown component, a combobox primarily functions as a text field (using a native `<input>` tag) that can accept custom user input. The dropdown list serves as a helpful aid to expedite the user's input process.
+ *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
  *
  * @fires change - A custom event emitted when a user selects a combobox item or inputs a custom value.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when the user types in the input field, clicks clear button, or selects from dropdown options.
@@ -41,7 +48,7 @@ export declare class DaikinCombobox extends DDSFormElement {
     /**
      * Placeholder text of the combobox.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Whether the combobox is disabled.
      */

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

@@ -1,11 +1,12 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property, state, query } from "lit/decorators.js";
+import { 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 { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { ClickOutsideController } from "../../controllers/click-outside.js";
@@ -104,8 +105,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: {
@@ -183,7 +187,6 @@ function defaultFilterFn(items, value) {
 let DaikinCombobox = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
     this.disabled = false;
     this.required = false;
     this.error = false;
@@ -247,7 +250,9 @@ let DaikinCombobox = class extends DDSFormElement {
     this._currentFocusItemIndex = null;
   }
   _handleFocusOut(event) {
-    if (!event.relatedTarget) {
+    if (this.open && // ignore if focusing within the component, especially to the menu items
+    // or menu item will be destroyed before click event is handled
+    (!event.relatedTarget || !this.renderRoot.contains(event.relatedTarget))) {
       this._closePopup();
     }
   }
@@ -272,8 +277,9 @@ let DaikinCombobox = class extends DDSFormElement {
   }
   _handleClickItem(item) {
     const value = getItemValue(item);
-    this._handleClick();
     this.value = value;
+    this.open = false;
+    this._currentFocusItemIndex = null;
     this.dispatchEvent(
       new Event("input", {
         bubbles: true,
@@ -397,9 +403,7 @@ let DaikinCombobox = class extends DDSFormElement {
   _handleInput(event) {
     this.value = event.target.value;
     this._synchronizeShowItems("filtered");
-    if (this._viewItems.length > 0) {
-      this.open = true;
-    }
+    this.open = this._viewItems.length > 0;
   }
   /**
    * Handles change events from the combobox input field.
@@ -424,20 +428,18 @@ let DaikinCombobox = class extends DDSFormElement {
       placeholder: !this.value || this.value.length === 0
     })}
           role="combobox"
-          placeholder=${ifDefined(this.placeholder ?? void 0)}
-          name=${ifDefined(this.name)}
+          name=${ifDefined(this.getBackingProperty("name"))}
+          placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
           .value=${this.value}
           ?disabled=${this.disabled}
-          aria-label=${ifDefined(this._label ?? void 0)}
+          aria-label=${ifDefined(this._label)}
           aria-expanded=${this.open && !this.disabled}
           aria-disabled=${this.disabled}
-          aria-controls="combobox-items"
+          aria-controls=${this.open ? "combobox-items" : nothing}
           aria-autocomplete="list"
           aria-required=${this.required}
           aria-haspopup="listbox"
-          aria-activedescendant=${ifDefined(
-      this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : void 0
-    )}
+          aria-activedescendant=${this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : nothing}
           @input=${this._handleInput}
           @change=${this._handleChange}
           @click=${this._handleClick}
@@ -453,7 +455,7 @@ let DaikinCombobox = class extends DDSFormElement {
                 variant="ghost"
                 ?disabled=${this.disabled}
                 button-aria-label="Clear"
-                icon="close"
+                button-tabindex="-1"
                 @click=${this._handleClearClick}
                 @focusout=${this._handleFocusOut}
               >
@@ -461,7 +463,8 @@ let DaikinCombobox = class extends DDSFormElement {
               </daikin-icon-button>` : nothing}
           <span
             class=${cvaArrow({ open: this.open, disabled: this.disabled })}
-            button-aria-label=${this.open ? "Close" : "Open"}
+            role="img"
+            aria-label=${this.open ? "Close" : "Open"}
             @mousedown=${this._handleArrowClick}
             @keydown=${this._handleKeyDown}
           >
@@ -471,12 +474,14 @@ let DaikinCombobox = class extends DDSFormElement {
       <div
         id="combobox-items"
         popover="manual"
+        tabindex="-1"
         class="flex flex-col overflow-hidden rounded border border-ddt-color-divider floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] opacity-1 transition-[opacity] max-w-min"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
         <div
-          class="flex-1 overflow-y-auto break-all"
+          tabindex="-1"
+          class="flex-1 overflow-y-auto natural-break"
           aria-label=${ifDefined(this._label ?? void 0)}
           role="listbox"
         >
@@ -538,6 +543,10 @@ let DaikinCombobox = class extends DDSFormElement {
         this.focus();
       }
     }
+    if (changedProperties.has("_currentFocusItemIndex")) {
+      const focusedItem = this.renderRoot.querySelector("[data-focus]");
+      focusedItem == null ? void 0 : focusedItem.scrollIntoView({ block: "nearest" });
+    }
   }
   /**
    * This method is used by `daikin-input-group` to reflect it's attributes to this component.
@@ -564,7 +573,7 @@ DaikinCombobox.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinCombobox.prototype, "placeholder", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es/components/date-picker/daikin-date-picker.d.ts

@@ -4,6 +4,13 @@ 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).
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires select - Fires when the date is selected.
  *
  * @example
@@ -21,15 +28,17 @@ export declare class DaikinDatePicker extends DDSFormElement {
     /**
      * The placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * The minimum date.
-     * example: `1900-01-01`
+     *
+     * @default "1900-01-01"
      */
     min: string;
     /**
      * The maximum date.
-     * example: `2099-12-31`
+     *
+     * @default "2099-12-31"
      */
     max: string;
     /**
@@ -70,12 +79,15 @@ 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,12 +96,14 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _handleKeyDown;
     private _handleBeforeInput;
     private _handleSelect;
+    private _handlePointerDown;
     private _handlePointerUp;
     private _handleCalendarKeyDown;
     private _handleToggle;
     private _updateValue;
     private _updateInputSelection;
     private _updateSelection;
+    label: string | null;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;