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

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

@@ -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;
     /**

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

@@ -2,9 +2,9 @@
 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -61,7 +61,7 @@ exports.DaikinCard.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCard.prototype, "outline", 2);
 exports.DaikinCard = __decorateClass([
   decorators.ddsElement("daikin-card")

package/dist/cjs-dev/components/card-footer/daikin-card-footer.cjs

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

package/dist/cjs-dev/components/card-header/daikin-card-header.cjs

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

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

@@ -7,6 +7,7 @@ const ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -219,7 +220,7 @@ exports.DaikinCarousel.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true, attribute: "current-index" })
+  ddsProperty.property({ type: Number, reflect: true, attribute: "current-index" })
 ], exports.DaikinCarousel.prototype, "currentIndex", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-carousel-item" })

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

@@ -4,6 +4,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -62,10 +63,10 @@ exports.DaikinCarouselItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, attribute: false })
+  ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinCarouselItem.prototype, "label", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, attribute: false })
+  ddsProperty.property({ type: Boolean, attribute: false })
 ], exports.DaikinCarouselItem.prototype, "active", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ slot: "title" })

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

@@ -2,9 +2,10 @@
 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 ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -78,9 +79,6 @@ const cvaLabel = classVarianceAuthority.cva([], {
 exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.labelPosition = "right";
-    this.checkState = "unchecked";
     this.disabled = false;
     this.disabledByParent = false;
   }
@@ -126,7 +124,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
         <input
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
-          name=${this.name}
+          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
           ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
           .checked=${this.checked}
@@ -160,19 +158,35 @@ exports.DaikinCheckbox.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinCheckbox.prototype, "label", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: "label-position" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "label-position",
+    fallbackValue: "right",
+    isAllowedValue: ddsProperty.oneOf(["right", "hidden"])
+  })
 ], exports.DaikinCheckbox.prototype, "labelPosition", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "check-state" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "check-state",
+    fallbackValue: "unchecked",
+    isAllowedValue: ddsProperty.oneOf([
+      "unchecked",
+      "indeterminate",
+      "checked"
+    ])
+  })
 ], exports.DaikinCheckbox.prototype, "checkState", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: false })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
 ], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators.ddsElement("daikin-checkbox")

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

@@ -5,11 +5,18 @@ import { DDSFormElement } from "../../base/index.cjs";
  * 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/cjs-dev/components/checkbox-group/daikin-checkbox-group.cjs

@@ -6,6 +6,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -77,13 +78,21 @@ exports.DaikinCheckboxGroup.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "vertical",
+      "horizontal"
+    ])
+  })
 ], exports.DaikinCheckboxGroup.prototype, "orientation", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckboxGroup.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckboxGroup.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.state()

package/dist/cjs-dev/components/checkbox-group/daikin-checkbox-group.d.cts

@@ -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/cjs-dev/components/chip/daikin-chip.cjs

@@ -6,6 +6,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -100,7 +101,7 @@ exports.DaikinChip.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "chip-aria-label" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "chip-aria-label" })
 ], exports.DaikinChip.prototype, "chipAriaLabel", 2);
 __decorateClass([
   decorators_js.query("button")

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

@@ -8,6 +8,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const clickOutside = require("../../controllers/click-outside.cjs");
@@ -188,7 +189,6 @@ function defaultFilterFn(items, value) {
 exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
     this.disabled = false;
     this.required = false;
     this.error = false;
@@ -252,7 +252,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     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();
     }
   }
@@ -277,8 +279,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
   }
   _handleClickItem(item) {
     const value = getItemValue(item);
-    this._handleClick();
     this.value = value;
+    this.open = false;
+    this._currentFocusItemIndex = null;
     this.dispatchEvent(
       new Event("input", {
         bubbles: true,
@@ -402,9 +405,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
   _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.
@@ -429,20 +430,18 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
       placeholder: !this.value || this.value.length === 0
     })}
           role="combobox"
-          placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-          name=${ifDefined_js.ifDefined(this.name)}
+          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+          placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
           .value=${this.value}
           ?disabled=${this.disabled}
-          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+          aria-label=${ifDefined_js.ifDefined(this._label)}
           aria-expanded=${this.open && !this.disabled}
           aria-disabled=${this.disabled}
-          aria-controls=${ifDefined_js.ifDefined(this.open ? "combobox-items" : void 0)}
+          aria-controls=${this.open ? "combobox-items" : lit.nothing}
           aria-autocomplete="list"
           aria-required=${this.required}
           aria-haspopup="listbox"
-          aria-activedescendant=${ifDefined_js.ifDefined(
-      this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : void 0
-    )}
+          aria-activedescendant=${this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : lit.nothing}
           @input=${this._handleInput}
           @change=${this._handleChange}
           @click=${this._handleClick}
@@ -458,7 +457,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
                 variant="ghost"
                 ?disabled=${this.disabled}
                 button-aria-label="Clear"
-                icon="close"
+                button-tabindex="-1"
                 @click=${this._handleClearClick}
                 @focusout=${this._handleFocusOut}
               >
@@ -466,7 +465,8 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
               </daikin-icon-button>` : lit.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}
           >
@@ -476,12 +476,14 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
       <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_js.ifDefined(this._label ?? void 0)}
           role="listbox"
         >
@@ -543,6 +545,10 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
         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.
@@ -569,22 +575,22 @@ exports.DaikinCombobox.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinCombobox.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCombobox.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCombobox.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCombobox.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCombobox.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinCombobox.prototype, "items", 2);
 __decorateClass([
   decorators_js.state()
@@ -593,7 +599,7 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinCombobox.prototype, "_currentFocusItemIndex", 2);
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinCombobox.prototype, "filter", 2);
 __decorateClass([
   decorators_js.query("input")

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

@@ -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/cjs-dev/components/date-picker/daikin-date-picker.cjs

@@ -9,6 +9,7 @@ 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 ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
@@ -232,9 +233,6 @@ function handleOffsetInput(parts, item, offset2, viewDate, minDate, maxDate) {
 exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
-    this.min = "";
-    this.max = "";
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -258,6 +256,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       this,
       this._handleCloseCalendar
     );
+    this.label = null;
   }
   get _value() {
     return calendarCommon.tryParseDateFromProperty(this.value);
@@ -268,9 +267,6 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   get _max() {
     return calendarCommon.tryParseDateFromProperty(this.max) ?? calendarCommon.parseDateFromProperty(calendarCommon.DEFAULT_MAX_DATE);
   }
-  get _defaultValue() {
-    return calendarCommon.tryParseDateFromProperty(this.defaultValue ?? "");
-  }
   get _viewDate() {
     var _a;
     return ((_a = this._calendarElement.value) == null ? void 0 : _a.viewDate) ?? null;
@@ -508,13 +504,13 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           ${ref_js.ref(this._dateInputElement)}
           class=${cvaField({ error: this.error })}
           type="text"
-          placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-          name=${this.name}
-          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-          .value=${this._value ? formatDateForUI(this._value) : ""}
+          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+          placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+          aria-label=${ifDefined_js.ifDefined(this._label ?? this.label ?? "Date Picker")}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
+          .value=${this._value ? formatDateForUI(this._value) : ""}
           @change=${this._handleChange}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
@@ -541,12 +537,10 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         ${ref_js.ref(this._calendarElement)}
         ${this._focusTrapController.refContainer()}
         id="calendar"
-        .value=${this._value ? calendarCommon.formatDateForProperty(this._value) : null}
+        value=${this._value ? calendarCommon.formatDateForProperty(this._value) : lit.nothing}
         min=${calendarCommon.formatDateForProperty(min)}
         max=${calendarCommon.formatDateForProperty(max)}
-        default-value=${ifDefined_js.ifDefined(
-      this._defaultValue ? calendarCommon.formatDateForProperty(this._defaultValue) : void 0
-    )}
+        default-value=${ifDefined_js.ifDefined(this.defaultValue)}
         popover="manual"
         class="absolute left-[--floating-x,0] top-[--floating-y,0]"
         @toggle=${this._handleToggle}
@@ -555,6 +549,9 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
+      <span class="sr-only" aria-live="polite"
+        >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
+      </span>
       ${// Activate auto update only when the tooltip is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     guard_js.guard(
@@ -562,7 +559,18 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       () => this._autoUpdateController.directive(
         {
           placement: "bottom-start",
-          middleware: [dom.offset({ mainAxis: 0 }), dom.flip(), dom.shift()]
+          middleware: [
+            dom.offset({ mainAxis: 0 }),
+            dom.flip(),
+            dom.shift(),
+            dom.size({
+              apply({ availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${availableHeight}px`
+                });
+              }
+            })
+          ]
         },
         this.open
       )
@@ -587,6 +595,12 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         }
       }
     }
+    if (changedProperties.has("value")) {
+      if (calendarCommon.tryParseDateFromProperty(this.value)) {
+        const newDate = calendarCommon.parseDateFromProperty(this.value);
+        this.error = calendarCommon.isDateOutOfRange(newDate, this._min, this._max);
+      }
+    }
   }
   updated(changedProperties) {
     var _a;
@@ -627,31 +641,31 @@ exports.DaikinDatePicker.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinDatePicker.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
 ], exports.DaikinDatePicker.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
 ], exports.DaikinDatePicker.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "default-value" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "default-value" })
 ], exports.DaikinDatePicker.prototype, "defaultValue", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -4,6 +4,13 @@ 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).
  *
+ * @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;
     /**
@@ -74,7 +83,6 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private get _value();
     private get _min();
     private get _max();
-    private get _defaultValue();
     private get _viewDate();
     private get _open();
     private _ignoreCloseByFocusTrap;
@@ -95,6 +103,7 @@ export declare class DaikinDatePicker extends DDSFormElement {
     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;