npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr1507.0 → 0.0.0-pr1508.1 - Mend

@aurodesignsystem-dev/auro-formkit 0.0.0-pr1507.0 → 0.0.0-pr1508.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

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

@@ -620,15 +620,17 @@ class AuroFormValidation {
         );
       }
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
       if (isCombobox) {
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -1099,7 +1101,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
-var formkitVersion$1 = '202606192121';
+var formkitVersion$1 = '202607010100';
 // 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 +5447,7 @@ class AuroHelpText extends i$2 {
   }
 }
-var formkitVersion = '202606192121';
+var formkitVersion = '202607010100';
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -6396,6 +6398,14 @@ class AuroDropdown extends AuroElement$1 {
           };
           this.addEventListener('keydown', this._bibTabHandler);
+          // Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
+          // desktopModal trap owns focus management. Without this, the very
+          // first focus move into the bib (from the RAF below) triggers
+          // handleFocusLoss → hideBib, tearing down the trap before the
+          // user can press Tab.
+          this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
+          this.noHideOnThisFocusLoss = true;
           // Move initial focus into the bib content, matching FocusTrap behavior
           requestAnimationFrame(() => {
             const focusables = getFocusableElements(this.bibContent);
@@ -6709,6 +6719,7 @@ class AuroDropdown extends AuroElement$1 {
           role="${o$2(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${o$2(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
           aria-labelledby="${o$2(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${o$2(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
@@ -6835,7 +6846,7 @@ class AuroDropdown extends AuroElement$1 {
 var colorCss$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
-var styleCss$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
@@ -7841,6 +7852,13 @@ class AuroCounterGroup extends AuroElement {
    */
   configureDropdownCounters() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    // Counter rows are slotted into the bib through multiple shadow roots
+    // (dropdown → bib → bibtemplate → counter-group → counter), so the floater's
+    // `:focus-within` focus-loss check fails to match the dropdown host in Chromium
+    // and the bib auto-closes immediately after opening. Mirrors auro-select.
+    this.dropdown.noHideOnThisFocusLoss = true;
     this.dropdown.requestUpdate();
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');

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

@@ -620,15 +620,17 @@ class AuroFormValidation {
         );
       }
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
       if (isCombobox) {
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -1099,7 +1101,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
-var formkitVersion$1 = '202606192121';
+var formkitVersion$1 = '202607010100';
 // 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 +5447,7 @@ class AuroHelpText extends i$2 {
   }
 }
-var formkitVersion = '202606192121';
+var formkitVersion = '202607010100';
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -6396,6 +6398,14 @@ class AuroDropdown extends AuroElement$1 {
           };
           this.addEventListener('keydown', this._bibTabHandler);
+          // Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
+          // desktopModal trap owns focus management. Without this, the very
+          // first focus move into the bib (from the RAF below) triggers
+          // handleFocusLoss → hideBib, tearing down the trap before the
+          // user can press Tab.
+          this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
+          this.noHideOnThisFocusLoss = true;
           // Move initial focus into the bib content, matching FocusTrap behavior
           requestAnimationFrame(() => {
             const focusables = getFocusableElements(this.bibContent);
@@ -6709,6 +6719,7 @@ class AuroDropdown extends AuroElement$1 {
           role="${o$2(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${o$2(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
           aria-labelledby="${o$2(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${o$2(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
@@ -6835,7 +6846,7 @@ class AuroDropdown extends AuroElement$1 {
 var colorCss$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
-var styleCss$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
@@ -7841,6 +7852,13 @@ class AuroCounterGroup extends AuroElement {
    */
   configureDropdownCounters() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    // Counter rows are slotted into the bib through multiple shadow roots
+    // (dropdown → bib → bibtemplate → counter-group → counter), so the floater's
+    // `:focus-within` focus-loss check fails to match the dropdown host in Chromium
+    // and the bib auto-closes immediately after opening. Mirrors auro-select.
+    this.dropdown.noHideOnThisFocusLoss = true;
     this.dropdown.requestUpdate();
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');

package/components/counter/dist/index.js CHANGED Viewed

@@ -576,15 +576,17 @@ class AuroFormValidation {
         );
       }
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
       if (isCombobox) {
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -1049,7 +1051,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
-var formkitVersion$1 = '202606192121';
+var formkitVersion$1 = '202607010100';
 // 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 +5379,7 @@ class AuroHelpText extends LitElement {
   }
 }
-var formkitVersion = '202606192121';
+var formkitVersion = '202607010100';
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {
@@ -6328,6 +6330,14 @@ class AuroDropdown extends AuroElement$1 {
           };
           this.addEventListener('keydown', this._bibTabHandler);
+          // Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
+          // desktopModal trap owns focus management. Without this, the very
+          // first focus move into the bib (from the RAF below) triggers
+          // handleFocusLoss → hideBib, tearing down the trap before the
+          // user can press Tab.
+          this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
+          this.noHideOnThisFocusLoss = true;
           // Move initial focus into the bib content, matching FocusTrap behavior
           requestAnimationFrame(() => {
             const focusables = getFocusableElements(this.bibContent);
@@ -6641,6 +6651,7 @@ class AuroDropdown extends AuroElement$1 {
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${ifDefined(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
@@ -6767,7 +6778,7 @@ class AuroDropdown extends AuroElement$1 {
 var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
-var styleCss$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
@@ -7773,6 +7784,13 @@ class AuroCounterGroup extends AuroElement {
    */
   configureDropdownCounters() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    // Counter rows are slotted into the bib through multiple shadow roots
+    // (dropdown → bib → bibtemplate → counter-group → counter), so the floater's
+    // `:focus-within` focus-loss check fails to match the dropdown host in Chromium
+    // and the bib auto-closes immediately after opening. Mirrors auro-select.
+    this.dropdown.noHideOnThisFocusLoss = true;
     this.dropdown.requestUpdate();
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');

package/components/counter/dist/registered.js CHANGED Viewed

@@ -576,15 +576,17 @@ class AuroFormValidation {
         );
       }
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
       if (isCombobox) {
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -1049,7 +1051,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
-var formkitVersion$1 = '202606192121';
+var formkitVersion$1 = '202607010100';
 // 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 +5379,7 @@ class AuroHelpText extends LitElement {
   }
 }
-var formkitVersion = '202606192121';
+var formkitVersion = '202607010100';
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {
@@ -6328,6 +6330,14 @@ class AuroDropdown extends AuroElement$1 {
           };
           this.addEventListener('keydown', this._bibTabHandler);
+          // Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
+          // desktopModal trap owns focus management. Without this, the very
+          // first focus move into the bib (from the RAF below) triggers
+          // handleFocusLoss → hideBib, tearing down the trap before the
+          // user can press Tab.
+          this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
+          this.noHideOnThisFocusLoss = true;
           // Move initial focus into the bib content, matching FocusTrap behavior
           requestAnimationFrame(() => {
             const focusables = getFocusableElements(this.bibContent);
@@ -6641,6 +6651,7 @@ class AuroDropdown extends AuroElement$1 {
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-haspopup="${ifDefined(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
@@ -6767,7 +6778,7 @@ class AuroDropdown extends AuroElement$1 {
 var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
-var styleCss$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
@@ -7773,6 +7784,13 @@ class AuroCounterGroup extends AuroElement {
    */
   configureDropdownCounters() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    // Counter rows are slotted into the bib through multiple shadow roots
+    // (dropdown → bib → bibtemplate → counter-group → counter), so the floater's
+    // `:focus-within` focus-loss check fails to match the dropdown host in Chromium
+    // and the bib auto-closes immediately after opening. Mirrors auro-select.
+    this.dropdown.noHideOnThisFocusLoss = true;
     this.dropdown.requestUpdate();
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');

package/components/datepicker/demo/accessibility.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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
@@ -109,6 +110,8 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | `fromLabel`                | Defines the label content for the first input.   |
 | `helpText`                 | Defines the content of the helpText.             |
 | `label`                    | Defines the label content for the entire datepicker when `layout="snowflake"`. |
+| `optionalFromLabel`        | Overrides the "(optional)" text rendered next to the first input's label when the datepicker is not `required`. |
+| `optionalToLabel`          | Overrides the "(optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`. |
 | `popover_YYYY_MM_DD`       | Defines the content to display in the auro-calendar-cell popover for the specified date. |
 | `toLabel`                  | Defines the label content for the second input when the `range` attribute is used. |