@aurodesignsystem-dev/auro-formkit 0.0.0-pr1424.4 → 0.0.0-pr1424.6

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

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202604091759';
+var formkitVersion$1 = '202604222001';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1863,21 +1863,17 @@ class AuroCounter extends i$2 {
   }
 
   /**
-   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
-   * bridging the shadow DOM boundary for screen readers.
+   * Handles the slotchange event for the description slot.
+   * Updates ariaDescribedByElements on the spinbutton.
+   *
    * @param {Event} event - The slotchange event.
    * @private
    */
   onDescriptionSlotChange(event) {
-    const assignedNodes = event.target.assignedElements();
     const spinbutton = this.shadowRoot.querySelector('[role="spinbutton"]');
-
     if (spinbutton) {
-      if (assignedNodes.length > 0) {
-        spinbutton.ariaDescribedByElements = assignedNodes;
-      } else {
-        spinbutton.ariaDescribedByElements = [];
-      }
+      const assigned = event.target.assignedElements();
+      spinbutton.ariaDescribedByElements = assigned.length > 0 ? assigned : [];
     }
   }
 
@@ -1932,22 +1928,22 @@ class AuroCounter extends i$2 {
 
       <div class="counterWrapper">
         <div class="counter">
-          <div class="content" >
-            <label id="counter-label" class="label">
+          <div class="content" id="counter-label">
+            <label class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
             <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
-          <div 
-            part="counterControl" 
-            aria-disabled="${o$2(this.disabled ? 'true' : undefined)}" 
-            aria-labelledby="counter-label" 
-            aria-valuemax="${this.max}" 
-            aria-valuemin="${this.min}" 
+          <div
+            part="counterControl"
+            aria-disabled="${o$2(this.disabled ? 'true' : undefined)}"
+            aria-labelledby="counter-label"
+            aria-valuemax="${this.max}"
+            aria-valuemin="${this.min}"
             aria-valuenow="${this.value}"
             aria-valuetext="${this.value !== undefined ? this.value : this.min}"
-            role="spinbutton" 
-            tabindex="${this.disabled ? '-1' : '0'}" 
+            role="spinbutton"
+            tabindex="${this.disabled ? '-1' : '0'}"
           >
             <auro-counter-button
               aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.minus') || '−'}"
@@ -3799,6 +3795,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -4216,6 +4213,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -4231,6 +4250,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -5705,7 +5729,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604091759';
+var formkitVersion = '202604222001';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

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

@@ -118,8 +118,9 @@ export class AuroCounter extends LitElement {
      */
     private onDefaultSlotChange;
     /**
-     * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
-     * bridging the shadow DOM boundary for screen readers.
+     * Handles the slotchange event for the description slot.
+     * Updates ariaDescribedByElements on the spinbutton.
+     *
      * @param {Event} event - The slotchange event.
      * @private
      */

package/components/counter/dist/index.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604091759';
+var formkitVersion$1 = '202604222001';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1813,21 +1813,17 @@ class AuroCounter extends LitElement {
   }
 
   /**
-   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
-   * bridging the shadow DOM boundary for screen readers.
+   * Handles the slotchange event for the description slot.
+   * Updates ariaDescribedByElements on the spinbutton.
+   *
    * @param {Event} event - The slotchange event.
    * @private
    */
   onDescriptionSlotChange(event) {
-    const assignedNodes = event.target.assignedElements();
     const spinbutton = this.shadowRoot.querySelector('[role="spinbutton"]');
-
     if (spinbutton) {
-      if (assignedNodes.length > 0) {
-        spinbutton.ariaDescribedByElements = assignedNodes;
-      } else {
-        spinbutton.ariaDescribedByElements = [];
-      }
+      const assigned = event.target.assignedElements();
+      spinbutton.ariaDescribedByElements = assigned.length > 0 ? assigned : [];
     }
   }
 
@@ -1882,22 +1878,22 @@ class AuroCounter extends LitElement {
 
       <div class="counterWrapper">
         <div class="counter">
-          <div class="content" >
-            <label id="counter-label" class="label">
+          <div class="content" id="counter-label">
+            <label class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
             <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
-          <div 
-            part="counterControl" 
-            aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" 
-            aria-labelledby="counter-label" 
-            aria-valuemax="${this.max}" 
-            aria-valuemin="${this.min}" 
+          <div
+            part="counterControl"
+            aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
+            aria-labelledby="counter-label"
+            aria-valuemax="${this.max}"
+            aria-valuemin="${this.min}"
             aria-valuenow="${this.value}"
             aria-valuetext="${this.value !== undefined ? this.value : this.min}"
-            role="spinbutton" 
-            tabindex="${this.disabled ? '-1' : '0'}" 
+            role="spinbutton"
+            tabindex="${this.disabled ? '-1' : '0'}"
           >
             <auro-counter-button
               aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.minus') || '−'}"
@@ -3731,6 +3727,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -4148,6 +4145,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -4163,6 +4182,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -5637,7 +5661,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604091759';
+var formkitVersion = '202604222001';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/counter/dist/registered.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604091759';
+var formkitVersion$1 = '202604222001';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1813,21 +1813,17 @@ class AuroCounter extends LitElement {
   }
 
   /**
-   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
-   * bridging the shadow DOM boundary for screen readers.
+   * Handles the slotchange event for the description slot.
+   * Updates ariaDescribedByElements on the spinbutton.
+   *
    * @param {Event} event - The slotchange event.
    * @private
    */
   onDescriptionSlotChange(event) {
-    const assignedNodes = event.target.assignedElements();
     const spinbutton = this.shadowRoot.querySelector('[role="spinbutton"]');
-
     if (spinbutton) {
-      if (assignedNodes.length > 0) {
-        spinbutton.ariaDescribedByElements = assignedNodes;
-      } else {
-        spinbutton.ariaDescribedByElements = [];
-      }
+      const assigned = event.target.assignedElements();
+      spinbutton.ariaDescribedByElements = assigned.length > 0 ? assigned : [];
     }
   }
 
@@ -1882,22 +1878,22 @@ class AuroCounter extends LitElement {
 
       <div class="counterWrapper">
         <div class="counter">
-          <div class="content" >
-            <label id="counter-label" class="label">
+          <div class="content" id="counter-label">
+            <label class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
             <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
-          <div 
-            part="counterControl" 
-            aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" 
-            aria-labelledby="counter-label" 
-            aria-valuemax="${this.max}" 
-            aria-valuemin="${this.min}" 
+          <div
+            part="counterControl"
+            aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
+            aria-labelledby="counter-label"
+            aria-valuemax="${this.max}"
+            aria-valuemin="${this.min}"
             aria-valuenow="${this.value}"
             aria-valuetext="${this.value !== undefined ? this.value : this.min}"
-            role="spinbutton" 
-            tabindex="${this.disabled ? '-1' : '0'}" 
+            role="spinbutton"
+            tabindex="${this.disabled ? '-1' : '0'}"
           >
             <auro-counter-button
               aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.minus') || '−'}"
@@ -3731,6 +3727,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -4148,6 +4145,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -4163,6 +4182,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -5637,7 +5661,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604091759';
+var formkitVersion = '202604222001';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/datepicker/demo/api.md

@@ -35,7 +35,7 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | [placeholderEndDate](#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)                       | `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)                           | `range`                           |           | `boolean`                                        | false                                            | If set, turns on date range functionality in auro-calendar. |
-| [referenceDates](#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 dates in the format of `MM-DD-YYYY`. |
+| [referenceDates](#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 dates in the format of `MM/DD/YYYY`. |
 | [required](#required)                        | `required`                        |           | `boolean`                                        | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
 | [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               |           | `string`                                         |                                                  | Sets a custom help text message to display for all validityStates. |
 | [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    |           | `string`                                         |                                                  | Custom help text message to display when validity = `customError`. |
@@ -529,7 +529,7 @@ The `format` attribute is used to define the date format used by the datepicker.
 
 You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
 
-The default value of `fullscreenBreakpoint` is `sm`. 
+The default value of `fullscreenBreakpoint` is `sm`.
 
 Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
@@ -814,7 +814,7 @@ export function updateMinDateExample() {
 
 ### Month Names Localization
 
-The datepicker supports localized month names through the `monthNames` property. 
+The datepicker supports localized month names through the `monthNames` property.
 
 This example demonstrates how to set the `monthNames` property to Korean month names, with a Korean date format.
 
@@ -889,13 +889,13 @@ You can choose to outline dates for the user to reference by passing a string co
 
 Example:
 ```html
-<auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]'></auro-datepicker>
+<auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]'></auro-datepicker>
 ```
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reference-dates.html) -->
   <!-- The below content is automatically added from ./../apiExamples/reference-dates.html -->
-  <auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]' minDate="10-12-2025">
+  <auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]' minDate="10/12/2025">
     <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -909,7 +909,7 @@ Example:
 <!-- The below code snippet is automatically added from ./../apiExamples/reference-dates.html -->
 
 ```html
-<auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]' minDate="10-12-2025">
+<auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]' minDate="10/12/2025">
   <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>