@aurodesignsystem-dev/auro-formkit 0.0.0-pr1489.6 → 0.0.0-pr1489.7

package/components/datepicker/dist/src/auro-calendar-cell.d.ts

@@ -184,9 +184,9 @@ export class AuroCalendarCell extends LitElement {
      */
     private isLastHoveredDate;
     /**
-     * Checks if the current date is a highlighted date.
+     * Checks if the current date is a referenced date.
      * @param {Object} dateStr - The date string in MM_DD_YYYY format.
-     * @returns Boolean - True if the date is a highlighted date.
+     * @returns Boolean - True if the date is a referenced date.
      */
     isReferenceDate(dateStr: Object): boolean;
     /**

package/components/datepicker/dist/src/auro-calendar-month.d.ts

@@ -46,12 +46,11 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
      */
     private handleDateHovered;
     /**
-     * Handles arrow key navigation within the month grid.
-     * Dispatches a cross-month navigation event when the boundary is reached.
+     * Dispatches a bubbling event when the mouse leaves the date grid body
+     * so the parent calendar can clear the range hover preview.
      * @private
-     * @param {KeyboardEvent} event - The keyboard event.
      * @returns {void}
      */
-    private handleGridKeyDown;
+    private handleTbodyMouseLeave;
 }
 import { RangeDatepickerCalendar } from './vendor/wc-range-datepicker/range-datepicker-calendar.js';

package/components/datepicker/dist/src/auro-datepicker.d.ts

@@ -51,6 +51,20 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
+         */
+        blackoutDates: {
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Label announced for blackout (disabled but in-range) date cells.
+         */
+        blackoutLabel: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * The last date that may be displayed in the calendar.
          */
@@ -99,24 +113,6 @@ export class AuroDatePicker extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        hasFocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * @private
-         */
-        hasValue: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * @private
-         */
-        hasAllValues: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         /**
          * Specifies the date format. The default is `mm/dd/yyyy`.
          */
@@ -133,6 +129,24 @@ export class AuroDatePicker extends AuroElement {
          * @default 'sm'
          */
         fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
+        /**
+         * @private
+         */
+        hasAllValues: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        hasValue: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /** Exposes inputmode attribute for input. */
         inputmode: {
             type: StringConstructor;
@@ -167,6 +181,12 @@ export class AuroDatePicker extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+        };
         /**
          * Names of all 12 months to render in the calendar, used for localization of date string in mobile layout.
          */
@@ -174,23 +194,24 @@ export class AuroDatePicker extends AuroElement {
             type: ArrayConstructor;
         };
         /**
-         * @private
+         * Accessible label for the next month navigation button.
          */
-        monthFirst: {
-            type: BooleanConstructor;
+        navLabelNextMonth: {
+            type: StringConstructor;
+            reflect: boolean;
         };
         /**
-         * If declared, the bib will NOT flip to an alternate position
-         * when there isn't enough space in the specified `placement`.
+         * Accessible label for the previous month navigation button.
          */
-        noFlip: {
-            type: BooleanConstructor;
+        navLabelPrevMonth: {
+            type: StringConstructor;
             reflect: boolean;
         };
         /**
-         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
+         * If declared, the bib will NOT flip to an alternate position
+         * when there isn't enough space in the specified `placement`.
          */
-        shift: {
+        noFlip: {
             type: BooleanConstructor;
             reflect: boolean;
         };
@@ -246,16 +267,9 @@ export class AuroDatePicker extends AuroElement {
             reflect: boolean;
         };
         /**
-         * Label announced for the range start date cell.
-         */
-        rangeLabelStart: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Label announced for the range end date cell.
+         * Label announced for cells after the range (or after start when no end is selected).
          */
-        rangeLabelEnd: {
+        rangeLabelAfterRange: {
             type: StringConstructor;
             reflect: boolean;
         };
@@ -267,44 +281,23 @@ export class AuroDatePicker extends AuroElement {
             reflect: boolean;
         };
         /**
-         * Label announced for cells within the selected range.
-         */
-        rangeLabelInRange: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Label announced for cells after the range (or after start when no end is selected).
-         */
-        rangeLabelAfterRange: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
-         */
-        blackoutDates: {
-            type: ArrayConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Label announced for blackout (disabled but in-range) date cells.
+         * Label announced for the range end date cell.
          */
-        blackoutLabel: {
+        rangeLabelEnd: {
             type: StringConstructor;
             reflect: boolean;
         };
         /**
-         * Accessible label for the previous month navigation button.
+         * Label announced for cells within the selected range.
          */
-        navLabelPrevMonth: {
+        rangeLabelInRange: {
             type: StringConstructor;
             reflect: boolean;
         };
         /**
-         * Accessible label for the next month navigation button.
+         * Label announced for the range start date cell.
          */
-        navLabelNextMonth: {
+        rangeLabelStart: {
             type: StringConstructor;
             reflect: boolean;
         };
@@ -354,6 +347,13 @@ export class AuroDatePicker extends AuroElement {
         setCustomValidityValueMissing: {
             type: StringConstructor;
         };
+        /**
+         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
+         */
+        shift: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * Set true to make datepicker stacked style.
          */
@@ -361,6 +361,15 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Indicates whether the datepicker is in a dirty state (has been interacted with).
+         * @private
+         */
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * Specifies the `validityState` this element is in.
          */
@@ -380,15 +389,6 @@ export class AuroDatePicker extends AuroElement {
         valueEnd: {
             type: StringConstructor;
         };
-        /**
-         * Indicates whether the datepicker is in a dirty state (has been interacted with).
-         * @private
-         */
-        touched: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
     };
     static get styles(): import("lit").CSSResult[];
     /**

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

@@ -3942,7 +3942,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202606012139';
+var formkitVersion = '202606022350';
 
 class AuroElement extends i {
   static get properties() {
@@ -4935,16 +4935,20 @@ class AuroDropdown extends AuroElement {
 
     // Walk up the ancestor chain, inerting siblings at each level
     // to ensure the entire page outside the host subtree is inert.
+    // Uses a reference counter (data-auro-inert-count) so multiple
+    // simultaneous modal dropdowns share inert state safely.
     let current = host;
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
         if (sibling !== current) {
-          this._inertSiblings.push({
-            element: sibling,
-            wasInert: sibling.inert
-          });
+          const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
+          if (count === 0) {
+            sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
+          }
+          sibling.dataset.auroInertCount = String(count + 1);
           sibling.inert = true;
+          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4953,14 +4957,23 @@ class AuroDropdown extends AuroElement {
 
   /**
    * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
+   * Uses reference counting so inert is only cleared when the last modal
+   * dropdown releases a given element. Preserves the original inert state
+   * so externally-inerted elements are not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
+      for (const sibling of this._inertSiblings) {
+        const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
+        if (count <= 0) {
+          const wasInert = sibling.dataset.auroInertWas === 'true';
+          delete sibling.dataset.auroInertCount;
+          delete sibling.dataset.auroInertWas;
+          sibling.inert = wasInert;
+        } else {
+          sibling.dataset.auroInertCount = String(count);
+        }
       }
       this._inertSiblings = undefined;
     }

package/components/dropdown/demo/getting-started.min.js

@@ -3942,7 +3942,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202606012139';
+var formkitVersion = '202606022350';
 
 class AuroElement extends i {
   static get properties() {
@@ -4935,16 +4935,20 @@ class AuroDropdown extends AuroElement {
 
     // Walk up the ancestor chain, inerting siblings at each level
     // to ensure the entire page outside the host subtree is inert.
+    // Uses a reference counter (data-auro-inert-count) so multiple
+    // simultaneous modal dropdowns share inert state safely.
     let current = host;
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
         if (sibling !== current) {
-          this._inertSiblings.push({
-            element: sibling,
-            wasInert: sibling.inert
-          });
+          const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
+          if (count === 0) {
+            sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
+          }
+          sibling.dataset.auroInertCount = String(count + 1);
           sibling.inert = true;
+          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4953,14 +4957,23 @@ class AuroDropdown extends AuroElement {
 
   /**
    * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
+   * Uses reference counting so inert is only cleared when the last modal
+   * dropdown releases a given element. Preserves the original inert state
+   * so externally-inerted elements are not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
+      for (const sibling of this._inertSiblings) {
+        const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
+        if (count <= 0) {
+          const wasInert = sibling.dataset.auroInertWas === 'true';
+          delete sibling.dataset.auroInertCount;
+          delete sibling.dataset.auroInertWas;
+          sibling.inert = wasInert;
+        } else {
+          sibling.dataset.auroInertCount = String(count);
+        }
       }
       this._inertSiblings = undefined;
     }

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

@@ -3969,7 +3969,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202606012139';
+var formkitVersion = '202606022350';
 
 class AuroElement extends i {
   static get properties() {
@@ -4962,16 +4962,20 @@ class AuroDropdown extends AuroElement {
 
     // Walk up the ancestor chain, inerting siblings at each level
     // to ensure the entire page outside the host subtree is inert.
+    // Uses a reference counter (data-auro-inert-count) so multiple
+    // simultaneous modal dropdowns share inert state safely.
     let current = host;
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
         if (sibling !== current) {
-          this._inertSiblings.push({
-            element: sibling,
-            wasInert: sibling.inert
-          });
+          const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
+          if (count === 0) {
+            sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
+          }
+          sibling.dataset.auroInertCount = String(count + 1);
           sibling.inert = true;
+          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4980,14 +4984,23 @@ class AuroDropdown extends AuroElement {
 
   /**
    * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
+   * Uses reference counting so inert is only cleared when the last modal
+   * dropdown releases a given element. Preserves the original inert state
+   * so externally-inerted elements are not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
+      for (const sibling of this._inertSiblings) {
+        const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
+        if (count <= 0) {
+          const wasInert = sibling.dataset.auroInertWas === 'true';
+          delete sibling.dataset.auroInertCount;
+          delete sibling.dataset.auroInertWas;
+          sibling.inert = wasInert;
+        } else {
+          sibling.dataset.auroInertCount = String(count);
+        }
       }
       this._inertSiblings = undefined;
     }

package/components/dropdown/dist/auro-dropdown.d.ts

@@ -428,8 +428,9 @@ export class AuroDropdown extends AuroElement {
     _inertSiblings: any[] | undefined;
     /**
      * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-     * Preserves the previous inert state so externally-inerted elements are
-     * not inadvertently re-enabled.
+     * Uses reference counting so inert is only cleared when the last modal
+     * dropdown releases a given element. Preserves the original inert state
+     * so externally-inerted elements are not inadvertently re-enabled.
      * @private
      */
     private _clearPageInert;

package/components/dropdown/dist/index.js

@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606012139';
+var formkitVersion = '202606022350';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -4867,16 +4867,20 @@ class AuroDropdown extends AuroElement {
 
     // Walk up the ancestor chain, inerting siblings at each level
     // to ensure the entire page outside the host subtree is inert.
+    // Uses a reference counter (data-auro-inert-count) so multiple
+    // simultaneous modal dropdowns share inert state safely.
     let current = host;
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
         if (sibling !== current) {
-          this._inertSiblings.push({
-            element: sibling,
-            wasInert: sibling.inert
-          });
+          const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
+          if (count === 0) {
+            sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
+          }
+          sibling.dataset.auroInertCount = String(count + 1);
           sibling.inert = true;
+          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4885,14 +4889,23 @@ class AuroDropdown extends AuroElement {
 
   /**
    * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
+   * Uses reference counting so inert is only cleared when the last modal
+   * dropdown releases a given element. Preserves the original inert state
+   * so externally-inerted elements are not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
+      for (const sibling of this._inertSiblings) {
+        const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
+        if (count <= 0) {
+          const wasInert = sibling.dataset.auroInertWas === 'true';
+          delete sibling.dataset.auroInertCount;
+          delete sibling.dataset.auroInertWas;
+          sibling.inert = wasInert;
+        } else {
+          sibling.dataset.auroInertCount = String(count);
+        }
       }
       this._inertSiblings = undefined;
     }

package/components/dropdown/dist/registered.js

@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606012139';
+var formkitVersion = '202606022350';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -4867,16 +4867,20 @@ class AuroDropdown extends AuroElement {
 
     // Walk up the ancestor chain, inerting siblings at each level
     // to ensure the entire page outside the host subtree is inert.
+    // Uses a reference counter (data-auro-inert-count) so multiple
+    // simultaneous modal dropdowns share inert state safely.
     let current = host;
     while (current.parentElement) {
       const parent = current.parentElement;
       for (const sibling of parent.children) {
         if (sibling !== current) {
-          this._inertSiblings.push({
-            element: sibling,
-            wasInert: sibling.inert
-          });
+          const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
+          if (count === 0) {
+            sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
+          }
+          sibling.dataset.auroInertCount = String(count + 1);
           sibling.inert = true;
+          this._inertSiblings.push(sibling);
         }
       }
       current = parent;
@@ -4885,14 +4889,23 @@ class AuroDropdown extends AuroElement {
 
   /**
    * Restores `inert` state on siblings that were tracked by `_setPageInert`.
-   * Preserves the previous inert state so externally-inerted elements are
-   * not inadvertently re-enabled.
+   * Uses reference counting so inert is only cleared when the last modal
+   * dropdown releases a given element. Preserves the original inert state
+   * so externally-inerted elements are not inadvertently re-enabled.
    * @private
    */
   _clearPageInert() {
     if (this._inertSiblings) {
-      for (const entry of this._inertSiblings) {
-        entry.element.inert = entry.wasInert;
+      for (const sibling of this._inertSiblings) {
+        const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
+        if (count <= 0) {
+          const wasInert = sibling.dataset.auroInertWas === 'true';
+          delete sibling.dataset.auroInertCount;
+          delete sibling.dataset.auroInertWas;
+          sibling.inert = wasInert;
+        } else {
+          sibling.dataset.auroInertCount = String(count);
+        }
       }
       this._inertSiblings = undefined;
     }