@aurodesignsystem-dev/auro-formkit 0.0.0-pr1512.0 → 0.0.0-pr1513.0

package/components/combobox/dist/registered.js

@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202606252337';
+var formkitVersion$2 = '202606291440';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -16524,13 +16524,6 @@ class AuroInputUtilities {
    * @returns {string | undefined}
    */
   toFormattedValue(valueObject, format) {
-    // Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
-    // `format` argument has to fail gracefully rather than throw on
-    // `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
-    // as "no format → no display value".
-    if (!format) {
-      return undefined;
-    }
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
@@ -16681,18 +16674,79 @@ class BaseInput extends AuroElement$1 {
   constructor() {
     super();
 
-    // Single-source initialization. Alphabetized so duplicate or stale
-    // defaults are immediately obvious on a diff. Every field is assigned
-    // exactly once here (previously the constructor + the old
-    // `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
-    // fields and double-allocated `util` and `validation`, discarding the
-    // first instance). `validation` is now allocated exactly once; `util`
-    // is seeded here with an en-US default and then rebuilt in
-    // `connectedCallback` once the consumer-resolved locale is available,
-    // so a parent (datepicker/combobox) calling `validate()` synchronously
-    // during its own update cycle sees a populated util instance.
+    this.appearance = "default";
+    this.disabled = false;
+    this.layout = 'classic';
+    this.locale = 'en-US';
+    this.max = undefined;
+    this._maxObject = undefined;
+    this.maxLength = undefined;
+    this.min = undefined;
+    this._minObject = undefined;
+    this.minLength = undefined;
+    this.required = false;
+    this.onDark = false;
+    this.setCustomValidityForType = undefined;
+    this.size = 'lg';
+    this.shape = 'classic';
+    this.value = undefined;
+    this._valueObject = undefined;
+
+    this._initializePrivateDefaults();
+  }
+
+  /**
+   * Internal Defaults.
+   * @private
+   * @returns {void}
+   */
+  _initializePrivateDefaults() {
     this.activeLabel = false;
-    /** @private */
+    this.appearance = "default";
+    this.icon = false;
+    this.disabled = false;
+    this.dvInputOnly = false;
+    this.hideLabelVisually = false;
+    this.max = undefined;
+    this.maxLength = undefined;
+    this.min = undefined;
+    this.minLength = undefined;
+    this.noValidate = false;
+    this.onDark = false;
+    this.required = false;
+    this.setCustomValidityForType = undefined;
+
+    // Used for storing raw values returned from input mask.
+    this._rawMaskValue = undefined;
+
+    /**
+     * @private
+     */
+    this.layout = 'classic';
+
+    /**
+     * @private
+     */
+    this.shape = 'classic';
+
+    /**
+     * @private
+     */
+    this.size = 'lg';
+
+    this.touched = false;
+    this.util = new AuroInputUtilities({
+      locale: "en-US",
+      format: this.format
+    });
+    this.validation = new AuroFormValidation();
+    this.inputIconName = undefined;
+    this.showPassword = false;
+    this.validationCCLength = undefined;
+    this.hasValue = false;
+    this.label = 'Input label is undefined';
+
+
     this.allowedInputTypes = [
       "text",
       "number",
@@ -16701,8 +16755,7 @@ class BaseInput extends AuroElement$1 {
       "credit-card",
       "tel"
     ];
-    this.appearance = "default";
-    /** @private */
+    this.icon = false;
     this.dateFormatMap = {
       'mm/dd/yyyy': 'dateMMDDYYYY',
       'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -16719,57 +16772,27 @@ class BaseInput extends AuroElement$1 {
       'dd/mm': 'dateDDMM',
       'mm/dd': 'dateMMDD'
     };
-    this.disabled = false;
-    /** @private */
     this.domHandler = new DomHandler();
     this.dvInputOnly = false;
     this.hasValue = false;
-    this.hideLabelVisually = false;
-    this.icon = false;
-    /** @private */
     this.inputIconName = undefined;
-    /** @private */
     this.label = 'Input label is undefined';
-    this.layout = 'classic';
-    this.locale = 'en-US';
-    this.max = undefined;
-    this._maxObject = undefined;
-    this.maxLength = undefined;
-    this.min = undefined;
-    this._minObject = undefined;
-    this.minLength = undefined;
     this.noValidate = false;
-    this.onDark = false;
-    // Raw values returned from the input mask before model normalization.
-    this._rawMaskValue = undefined;
-    this.required = false;
-    this.setCustomValidityForType = undefined;
-    // Credit Card is intentionally excluded — its mask manages the cursor
-    // itself, and listing it here caused cursor placement issues in Safari.
-    /** @private */
+    this._rawMaskValue = undefined; // Used for storing raw values returned from input mask.
     this.setSelectionInputTypes = [
       "text",
       "password",
       "email"
-    ];
-    this.shape = 'classic';
-    /** @private */
+    ]; // Credit Card is not included as this caused cursor placement issues in Safari.
     this.showPassword = false;
-    this.size = 'lg';
     this.touched = false;
-    /** @private */
     this.uniqueId = new UniqueId().create();
-    /** @private */
     this.util = new AuroInputUtilities({
       locale: this.locale,
       format: this.format
     });
-    /** @private */
     this.validation = new AuroFormValidation();
-    /** @private */
     this.validationCCLength = undefined;
-    this.value = undefined;
-    this._valueObject = undefined;
   }
 
   // function to define props used within the scope of this component
@@ -17317,15 +17340,6 @@ class BaseInput extends AuroElement$1 {
 
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
-    // Normalize the format token to lowercase so case-mixed values supplied
-    // via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
-    // lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
-    // format silently misses the map and leaves `setCustomValidityForType`
-    // unset.
-    if (this.format) {
-      this.format = this.format.toLowerCase();
-    }
-
     // use validity message override if declared when initializing the component
     if (this.hasAttribute('setCustomValidity')) {
       this.ValidityMessageOverride = this.setCustomValidity;
@@ -17759,38 +17773,6 @@ class BaseInput extends AuroElement$1 {
       this.touched = true;
       this.validation.validate(this);
     }
-
-    // Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
-    // update that can re-render the input and reset the native cursor; we
-    // capture the caret position before that update commits and restore it
-    // via `setSelectionRange` once the update has flushed. Gated on
-    // `setSelectionInputTypes` so credit-card (and other masked types whose
-    // formatter manages the cursor itself) doesn't get a competing write.
-    // Capture the caret position INSIDE the gate — reading `selectionStart`
-    // on input types that don't support text selection (number, email in
-    // some browsers) throws InvalidStateError, which would crash all input
-    // handling. Wrap the read in try/catch belt-and-suspenders even though
-    // the gated types currently support it, since the list is a public
-    // property a consumer could mutate.
-    if (this.setSelectionInputTypes.includes(this.type)) {
-      let selectionStart;
-      try {
-        selectionStart = this.inputElement.selectionStart;
-      } catch (error) { // eslint-disable-line no-unused-vars
-        return;
-      }
-      if (typeof selectionStart !== 'number') {
-        return;
-      }
-      this.updateComplete.then(() => {
-        try {
-          this.inputElement.setSelectionRange(selectionStart, selectionStart);
-        } catch (error) { // eslint-disable-line no-unused-vars
-          // Some input types (number/email in certain UAs) throw on
-          // setSelectionRange; swallow and let the native cursor stand.
-        }
-      });
-    }
   }
 
   /**
@@ -18417,7 +18399,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606252337';
+var formkitVersion$1 = '202606291440';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -18920,7 +18902,6 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickShowPassword}"
           appearance="${this.onDark ? 'inverse' : this.appearance}"
-          aria-pressed="${this.showPassword ? 'true' : 'false'}"
           class="notificationBtn passwordBtn"
           shape="circle"
           size="sm"
@@ -18994,29 +18975,25 @@ class AuroInput extends BaseInput {
    * @returns {html} - Returns HTML for the help text and error message.
    */
   renderHtmlHelpText() {
-    // Single `<p>` with stable identity across validity transitions —
-    // previously two distinct templates (valid vs invalid) caused Lit to
-    // replace the node entirely on a flip, and VoiceOver wouldn't
-    // re-announce because the live-region element it was watching had been
-    // removed and a new one inserted. Keeping one node means the `role`,
-    // `aria-live`, and text content all change in-place, which AT does
-    // observe and announce.
-    const isError = this.validity && this.validity !== 'valid';
     return html`
-      <${this.helpTextTag}
-        appearance="${this.onDark ? 'inverse' : this.appearance}"
-        ?error=${isError}>
-        <p
-          id="${this.uniqueId}"
-          part="helpText"
-          role="${ifDefined(isError ? 'alert' : undefined)}"
-          aria-live="${ifDefined(isError ? 'assertive' : undefined)}">
-          ${isError
-        ? this.errorMessage
-        : html`<slot name="helpText">${this.getHelpText()}</slot>`
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html`
+          <${this.helpTextTag}
+            appearance="${this.onDark ? 'inverse' : this.appearance}">
+            <p id="${this.uniqueId}" part="helpText">
+              <slot name="helpText">${this.getHelpText()}</slot>
+            </p>
+          </${this.helpTextTag}>
+        `
+        : html`
+          <${this.helpTextTag} error
+            appearance="${this.onDark ? 'inverse' : this.appearance}">
+            <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+              ${this.errorMessage}
+            </p>
+          </${this.helpTextTag}>
+        `
       }
-        </p>
-      </${this.helpTextTag}>
     `;
   }
 
@@ -19543,7 +19520,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202606252337';
+var formkitVersion = '202606291440';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/counter/demo/customize.min.js

@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202606252337';
+var formkitVersion$1 = '202606291440';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606252337';
+var formkitVersion = '202606291440';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/demo/index.min.js

@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202606252337';
+var formkitVersion$1 = '202606291440';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606252337';
+var formkitVersion = '202606291440';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/dist/index.js

@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606252337';
+var formkitVersion$1 = '202606291440';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606252337';
+var formkitVersion = '202606291440';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/counter/dist/registered.js

@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606252337';
+var formkitVersion$1 = '202606291440';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606252337';
+var formkitVersion = '202606291440';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/datepicker/demo/accessibility.md

@@ -83,7 +83,8 @@ When `range` is set, each date cell's label includes its position relative to th
 | `rangeLabelEnd` | "range end" | Announced for the range end date. |
 | `rangeLabelBeforeRange` | "before range" | Announced for dates before the range start. |
 | `rangeLabelInRange` | "in range" | Announced for dates within the selected range. |
-| `rangeLabelAfterRange` | "after range" | Announced for dates after the range (or after start when no end is selected). |
+| `rangeLabelAfterRange` | "after range" | Announced for dates after a fully selected range. |
+| `rangeLabelEndPreview` | "previewing range end" | Announced for the focused cell while picking the range end (`dateFrom` set, `dateTo` not yet selected) so AT users know that pressing Enter would commit this cell as the range end. |
 
 <auro-header level="2" id="fullscreenBehavior">Fullscreen (Modal) Behavior</auro-header>
 On smaller viewports, the calendar bib opens as a fullscreen modal dialog:

package/components/datepicker/demo/api.md

@@ -7,68 +7,69 @@ The `auro-datepicker` component provides users with a way to select a date or da
 
 ## Properties
 
-| Property                          | Attribute                         | Modifiers | Type                                             | Default                      | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|------------------------------|--------------------------------------------------|
-| `appearance`                      | `appearance`                      |           | `'default' \| 'inverse'`                         | "'default'"                  | Defines whether the component will be on lighter or darker backgrounds. |
-| `autoPlacement`                   | `autoPlacement`                   |           | `boolean`                                        | "false"                      | If declared, bib's position will be automatically calculated where to appear. |
-| `blackoutDates`                   | `blackoutDates`                   |           | `array`                                          | []                           | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
-| `blackoutLabel`                   | `blackoutLabel`                   |           | `string`                                         | "unavailable"                | Label announced for blackout (disabled but in-range) date cells. |
-| `calendarEndDate`                 | `calendarEndDate`                 |           | `string`                                         | "undefined"                  | The last date that may be displayed in the calendar. |
-| `calendarEndDateObject`           |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
-| `calendarFocusDate`               | `calendarFocusDate`               |           | `string`                                         | "value"                      | The date that will first be visually rendered to the user in the calendar. |
-| `calendarFocusDateObject`         |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date. |
-| `calendarGridLabel`               | `calendarGridLabel`               |           | `string`                                         | "Calendar days of the month" | Accessible label for the calendar grid containing the days of the month. |
-| `calendarStartDate`               | `calendarStartDate`               |           | `string`                                         | "undefined"                  | The first date that may be displayed in the calendar. |
-| `calendarStartDateObject`         |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date. |
-| `centralDate`                     | `centralDate`                     |           | `string`                                         |                              | The date that determines the currently visible month. |
-| `centralDateObject`               |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date. |
-| `disabled`                        | `disabled`                        |           | `boolean`                                        | false                        | If set, disables the datepicker.                 |
-| `dvInputOnly`                     | `dvInputOnly`                     |           | `boolean`                                        | false                        | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
-| `error`                           | `error`                           |           | `string`                                         |                              | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| `format`                          | `format`                          |           | `string`                                         |                              | Specifies the date format. The default is `mm/dd/yyyy`. |
-| `fullscreenBreakpoint`            | `fullscreenBreakpoint`            |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"                       | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| `hasError`                        |                                   | readonly  | `boolean`                                        |                              | Returns `true` when the datepicker has an active validation error. |
-| `inputmode`                       | `inputmode`                       |           | `string`                                         |                              | Exposes inputmode attribute for input.           |
-| `largeFullscreenHeadline`         | `largeFullscreenHeadline`         |           | `boolean`                                        | false                        | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
-| `layout`                          | `layout`                          |           | `'classic' \| 'snowflake'`                       | "'classic'"                  | Sets the layout of the datepicker.               |
-| `locale`                          | `locale`                          |           | `string`                                         |                              | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
-| `maxDate`                         | `maxDate`                         |           | `string`                                         |                              | Maximum date. All dates after will be disabled.  |
-| `maxDateObject`                   |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date. |
-| `minDate`                         | `minDate`                         |           | `string`                                         |                              | Minimum date. All dates before will be disabled. |
-| `minDateObject`                   |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date. |
-| `monthNames`                      | `monthNames`                      |           | `array`                                          |                              | Names of all 12 months to render in the calendar.<br />When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`). |
-| `navLabelNextMonth`               | `navLabelNextMonth`               |           | `string`                                         | "Next month"                 | Accessible label for the next month navigation button. |
-| `navLabelPrevMonth`               | `navLabelPrevMonth`               |           | `string`                                         | "Previous month"             | Accessible label for the previous month navigation button. |
-| `noFlip`                          | `noFlip`                          |           | `boolean`                                        | false                        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| `noValidate`                      | `noValidate`                      |           | `boolean`                                        | false                        | If set, disables auto-validation on blur.        |
-| `offset`                          | `offset`                          |           | `number`                                         | "0"                          | Gap between the trigger element and bib.         |
-| `onDark`                          | `onDark`                          |           | `boolean`                                        | false                        | DEPRECATED - use `appearance="inverse"` instead. |
-| `placeholder`                     | `placeholder`                     |           | `string`                                         |                              | Placeholder text to display in the input(s) when no value is set. |
-| `placeholderEndDate`              | `placeholderEndDate`              |           | `string`                                         |                              | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
-| `placement`                       | `placement`                       |           | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'"             | Position where the bib should appear relative to the trigger. |
-| `range`                           | `range`                           |           | `boolean`                                        | false                        | If set, turns on date range functionality in auro-calendar. |
-| `rangeLabelAfterRange`            | `rangeLabelAfterRange`            |           | `string`                                         | "after range"                | Label announced for cells after the range (or after start when no end is selected). |
-| `rangeLabelBeforeRange`           | `rangeLabelBeforeRange`           |           | `string`                                         | "before range"               | Label announced for cells before the range start. |
-| `rangeLabelEnd`                   | `rangeLabelEnd`                   |           | `string`                                         | "range end"                  | Label announced for the range end date cell.     |
-| `rangeLabelInRange`               | `rangeLabelInRange`               |           | `string`                                         | "in range"                   | Label announced for cells within the selected range. |
-| `rangeLabelStart`                 | `rangeLabelStart`                 |           | `string`                                         | "range start"                | Label announced for the range start date cell.   |
-| `referenceDates`                  | `referenceDates`                  |           | `array`                                          |                              | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of ISO date strings (`YYYY-MM-DD`). |
-| `required`                        | `required`                        |           | `boolean`                                        | false                        | Populates the `required` attribute on the input. Used for client-side validation. |
-| `setCustomValidity`               | `setCustomValidity`               |           | `string`                                         |                              | Sets a custom help text message to display for all validityStates. |
-| `setCustomValidityCustomError`    | `setCustomValidityCustomError`    |           | `string`                                         |                              | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
-| `setCustomValidityRangeOverflow`  | `setCustomValidityRangeOverflow`  |           | `string`                                         |                              | Custom help text message to display when validity = `rangeOverflow`. |
-| `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` |           | `string`                                         |                              | Custom help text message to display when validity = `rangeUnderflow`. |
-| `setCustomValidityValueMissing`   | `setCustomValidityValueMissing`   |           | `string`                                         |                              | Custom help text message to display when validity = `valueMissing`. |
-| `shape`                           |                                   |           | `string`                                         | "classic"                    |                                                  |
-| `shift`                           | `shift`                           |           | `boolean`                                        | false                        | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| `size`                            |                                   |           | `string`                                         | "lg"                         |                                                  |
-| `stacked`                         | `stacked`                         |           | `boolean`                                        | false                        | Set true to make datepicker stacked style.       |
-| `validity`                        | `validity`                        |           | `string`                                         | "undefined"                  | Specifies the `validityState` this element is in. |
-| `value`                           | `value`                           |           | `string`                                         | "undefined"                  | Value selected for the datepicker.               |
-| `valueEnd`                        | `valueEnd`                        |           | `string`                                         | "undefined"                  | Value selected for the second datepicker when using date range. |
-| `valueEndObject`                  |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date. |
-| `valueObject`                     |                                   | readonly  | `Date \| undefined`                              |                              | Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date. |
-| `values`                          |                                   | readonly  | `string[]`                                       |                              | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
+| Property                          | Attribute                         | Modifiers | Type                                             | Default                        | Description                                      |
+|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------|--------------------------------------------------|
+| `appearance`                      | `appearance`                      |           | `'default' \| 'inverse'`                         | "'default'"                    | Defines whether the component will be on lighter or darker backgrounds. |
+| `autoPlacement`                   | `autoPlacement`                   |           | `boolean`                                        | "false"                        | If declared, bib's position will be automatically calculated where to appear. |
+| `blackoutDates`                   | `blackoutDates`                   |           | `array`                                          | []                             | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
+| `blackoutLabel`                   | `blackoutLabel`                   |           | `string`                                         | "'unavailable'"                | Label announced for blackout (disabled but in-range) date cells. |
+| `calendarEndDate`                 | `calendarEndDate`                 |           | `string`                                         | "undefined"                    | The last date that may be displayed in the calendar. |
+| `calendarEndDateObject`           |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
+| `calendarFocusDate`               | `calendarFocusDate`               |           | `string`                                         | "value"                        | The date that will first be visually rendered to the user in the calendar. |
+| `calendarFocusDateObject`         |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date. |
+| `calendarGridLabel`               | `calendarGridLabel`               |           | `string`                                         | "'Calendar days of the month'" | Accessible label for the calendar grid containing the days of the month. |
+| `calendarStartDate`               | `calendarStartDate`               |           | `string`                                         | "undefined"                    | The first date that may be displayed in the calendar. |
+| `calendarStartDateObject`         |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date. |
+| `centralDate`                     | `centralDate`                     |           | `string`                                         |                                | The date that determines the currently visible month. |
+| `centralDateObject`               |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date. |
+| `disabled`                        | `disabled`                        |           | `boolean`                                        | false                          | If set, disables the datepicker.                 |
+| `dvInputOnly`                     | `dvInputOnly`                     |           | `boolean`                                        | false                          | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
+| `error`                           | `error`                           |           | `string`                                         |                                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| `format`                          | `format`                          |           | `string`                                         |                                | Specifies the date format. The default is `mm/dd/yyyy`. |
+| `fullscreenBreakpoint`            | `fullscreenBreakpoint`            |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"                         | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| `hasError`                        |                                   | readonly  | `boolean`                                        |                                | Returns `true` when the datepicker has an active validation error. |
+| `inputmode`                       | `inputmode`                       |           | `string`                                         |                                | Exposes inputmode attribute for input.           |
+| `largeFullscreenHeadline`         | `largeFullscreenHeadline`         |           | `boolean`                                        | false                          | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| `layout`                          | `layout`                          |           | `'classic' \| 'snowflake'`                       | "'classic'"                    | Sets the layout of the datepicker.               |
+| `locale`                          | `locale`                          |           | `string`                                         |                                | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
+| `maxDate`                         | `maxDate`                         |           | `string`                                         |                                | Maximum date. All dates after will be disabled.  |
+| `maxDateObject`                   |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date. |
+| `minDate`                         | `minDate`                         |           | `string`                                         |                                | Minimum date. All dates before will be disabled. |
+| `minDateObject`                   |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date. |
+| `monthNames`                      | `monthNames`                      |           | `array`                                          |                                | Names of all 12 months to render in the calendar.<br />When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`). |
+| `navLabelNextMonth`               | `navLabelNextMonth`               |           | `string`                                         | "'Next month'"                 | Accessible label for the next month navigation button. |
+| `navLabelPrevMonth`               | `navLabelPrevMonth`               |           | `string`                                         | "'Previous month'"             | Accessible label for the previous month navigation button. |
+| `noFlip`                          | `noFlip`                          |           | `boolean`                                        | false                          | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| `noValidate`                      | `noValidate`                      |           | `boolean`                                        | false                          | If set, disables auto-validation on blur.        |
+| `offset`                          | `offset`                          |           | `number`                                         | "0"                            | Gap between the trigger element and bib.         |
+| `onDark`                          | `onDark`                          |           | `boolean`                                        | false                          | DEPRECATED - use `appearance="inverse"` instead. |
+| `placeholder`                     | `placeholder`                     |           | `string`                                         |                                | Placeholder text to display in the input(s) when no value is set. |
+| `placeholderEndDate`              | `placeholderEndDate`              |           | `string`                                         |                                | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
+| `placement`                       | `placement`                       |           | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'"               | Position where the bib should appear relative to the trigger. |
+| `range`                           | `range`                           |           | `boolean`                                        | false                          | If set, turns on date range functionality in auro-calendar. |
+| `rangeLabelAfterRange`            | `rangeLabelAfterRange`            |           | `string`                                         | "'after range'"                | Label announced for cells after a fully selected range (both<br />`dateFrom` and `dateTo` are set). While a range is still being<br />picked (`dateFrom` set, `dateTo` unset), focused cells past the<br />start use `rangeLabelEndPreview` instead. |
+| `rangeLabelBeforeRange`           | `rangeLabelBeforeRange`           |           | `string`                                         | "'before range'"               | Label announced for cells before the range start. |
+| `rangeLabelEnd`                   | `rangeLabelEnd`                   |           | `string`                                         | "'range end'"                  | Label announced for the range end date cell.     |
+| `rangeLabelEndPreview`            | `rangeLabelEndPreview`            |           | `string`                                         | "'previewing range end'"       | Label announced for the focused cell while previewing a range end<br />(dateFrom set, dateTo not yet selected). Tells AT users that<br />pressing Enter would commit this cell as the range end. |
+| `rangeLabelInRange`               | `rangeLabelInRange`               |           | `string`                                         | "'in range'"                   | Label announced for cells within the selected range. |
+| `rangeLabelStart`                 | `rangeLabelStart`                 |           | `string`                                         | "'range start'"                | Label announced for the range start date cell.   |
+| `referenceDates`                  | `referenceDates`                  |           | `array`                                          |                                | Dates that the user should have for reference as part of their decision-making when selecting a date.<br />This should be a JSON string array of ISO date strings (`YYYY-MM-DD`). |
+| `required`                        | `required`                        |           | `boolean`                                        | false                          | Populates the `required` attribute on the input. Used for client-side validation. |
+| `setCustomValidity`               | `setCustomValidity`               |           | `string`                                         |                                | Sets a custom help text message to display for all validityStates. |
+| `setCustomValidityCustomError`    | `setCustomValidityCustomError`    |           | `string`                                         |                                | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
+| `setCustomValidityRangeOverflow`  | `setCustomValidityRangeOverflow`  |           | `string`                                         |                                | Custom help text message to display when validity = `rangeOverflow`. |
+| `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` |           | `string`                                         |                                | Custom help text message to display when validity = `rangeUnderflow`. |
+| `setCustomValidityValueMissing`   | `setCustomValidityValueMissing`   |           | `string`                                         |                                | Custom help text message to display when validity = `valueMissing`. |
+| `shape`                           |                                   |           | `string`                                         | "classic"                      |                                                  |
+| `shift`                           | `shift`                           |           | `boolean`                                        | false                          | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
+| `size`                            |                                   |           | `string`                                         | "lg"                           |                                                  |
+| `stacked`                         | `stacked`                         |           | `boolean`                                        | false                          | Set true to make datepicker stacked style.       |
+| `validity`                        | `validity`                        |           | `string`                                         | "undefined"                    | Specifies the `validityState` this element is in. |
+| `value`                           | `value`                           |           | `string`                                         | "undefined"                    | Value selected for the datepicker.               |
+| `valueEnd`                        | `valueEnd`                        |           | `string`                                         | "undefined"                    | Value selected for the second datepicker when using date range. |
+| `valueEndObject`                  |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date. |
+| `valueObject`                     |                                   | readonly  | `Date \| undefined`                              |                                | Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date. |
+| `values`                          |                                   | readonly  | `string[]`                                       |                                | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
 
 ## Methods