@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.16 → 0.0.0-pr1408.18

package/components/combobox/dist/registered.js

@@ -1088,7 +1088,13 @@ function guardTouchPassthrough(element) {
 }
 
 /**
- * Restores the dropdown trigger after a fullscreen dialog closes.
+ * Restores the dropdown trigger after a fullscreen dialog closes
+ * when focus doesn't leave the component (e.g. using Esc or Enter keys).
+ * When leaving the component (e.g., tabbing out of the combobox after closing
+ * the fullscreen dialog), focus restoration is handled by the browser's native
+ * dialog focus restoration behavior, so this function only restores focus
+ * when focus remains inside the component after the dialog closes.
+
  *
  * Removes the `inert` attribute from the trigger so it is accessible again,
  * and restores focus to the given target after one animation frame. The rAF
@@ -1104,8 +1110,11 @@ function guardTouchPassthrough(element) {
 function restoreTriggerAfterClose(dropdown, focusTarget) {
   dropdown.trigger.inert = false;
 
+  // Wait a frame so that dialog.close() has completed and the browser's
+  // native focus restoration has run before we attempt to focus the
+  // trigger / input programmatically.
   requestAnimationFrame(() => {
-    if (!dropdown.isPopoverVisible) {
+    if (!dropdown.isPopoverVisible && dropdown.trigger.contains(document.activeElement)) {
       focusTarget.focus();
     }
   });
@@ -1206,102 +1215,33 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
   if (!clearBtn) {
     return false;
   }
-  return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+  const isFocused = Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+  return isFocused;
 }
 
 const comboboxKeyboardStrategy = {
-  async Enter(component, evt, ctx) {
-    // If the clear button has focus, let the browser activate it normally.
-    // stopPropagation prevents parent containers (e.g., forms) from treating
-    // Enter as a submit, but we must NOT call preventDefault — that would
-    // block the browser's built-in "Enter activates focused button" behavior.
+  ArrowDown(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowDown normally.
     if (isClearBtnFocused(ctx)) {
-      evt.stopPropagation();
       return;
     }
 
-    if (ctx.isExpanded && component.optionActive) {
-      component.menu.makeSelection();
-      await component.updateComplete;
-      evt.preventDefault();
-      evt.stopPropagation();
-      component.setClearBtnFocus();
-    } else {
-      // Prevent the keypress from bubbling to parent containers (e.g., forms)
-      // which could interpret Enter as a submit or trigger other unintended behavior.
-      // This is safe because showBib() opens the dialog programmatically,
-      // not via event propagation.
-      evt.preventDefault();
-      evt.stopPropagation();
-      component.showBib();
-    }
-  },
-
-  Tab(component, evt, ctx) {
-    if (!ctx.isExpanded) {
-      return;
-    }
-
-    // Shift+Tab moves the highlight to the first non-disabled option
-    // without making a selection or closing the bib.
-    if (evt.shiftKey) {
+    // option display and navigation are prevented if there are no available options
+    if (component.availableOptions.length > 0) {
       evt.preventDefault();
-      const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
-      if (firstActive) {
-        component.menu.updateActiveOption(firstActive);
-      }
-      return;
-    }
 
-    if (ctx.isModal) {
-      if (!ctx.activeInput) {
-        return;
-      }
-      const clearBtn = getClearBtn(ctx);
-      const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
-
-      // Tab from input: if clear button exists and doesn't have focus, focus it
-      if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
-        // Force clear button container visible to work around Safari not
-        // propagating :focus-within through shadow DOM boundaries, which
-        // causes .wrapper:not(:focus-within) to hide .notification.clear.
-        const clearContainer = clearBtn.closest('.clear');
-        if (clearContainer) {
-          clearContainer.style.display = 'flex';
-          clearBtn.addEventListener('focusout', () => {
-            // Delay cleanup so :focus-within settles when focus moves
-            // to a sibling (e.g., Shift+Tab back to the input).
-            requestAnimationFrame(() => {
-              clearContainer.style.display = '';
-            });
-          }, { once: true });
-        }
+      // navigate if bib is open otherwise open it
+      if (component.dropdown.isPopoverVisible) {
 
-        // Focus the native button inside auro-button so the browser
-        // treats it as a real focusable element inside the dialog.
-        const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
-        if (nativeBtn) {
-          nativeBtn.focus();
+        if (evt.altKey || evt.metaKey) {
+          component.activateLastEnabledAvailableOption();
         } else {
-          clearBtn.focus();
+          navigateArrow(component, 'down');
         }
-        return;
-      }
-
-      // Tab from clear button (or no clear button / no value) →
-      // select the highlighted option if any, then close
-      if (component.optionActive) {
-        component.menu.makeSelection();
+      } else {
+        component.showBib();
       }
-      component.hideBib();
-      return;
-    }
-
-    // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
-      component.menu.value = component.menu.optionActive.value;
     }
-    component.hideBib();
   },
 
   ArrowUp(component, evt, ctx) {
@@ -1310,31 +1250,85 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
+    // option display and navigation are prevented if there are no available options
     if (component.availableOptions.length > 0) {
-      component.showBib();
+      evt.preventDefault();
+
+      // navigate if bib is open otherwise open it
+      if (component.dropdown.isPopoverVisible) {
+        if (evt.altKey || evt.metaKey) {
+          component.activateFirstEnabledAvailableOption();
+        } else {
+          navigateArrow(component, 'up');
+        }
+      } else {
+        component.showBib();
+      }
     }
-    // Read live visibility — ctx.isExpanded was computed before showBib() above,
-    // so it wouldn't reflect the state change.
-    if (component.dropdown.isPopoverVisible) {
+  },
+
+  End(component, evt, ctx) {
+    if (ctx.isExpanded) {
       evt.preventDefault();
-      navigateArrow(component, 'up');
+      evt.stopPropagation();
+      component.activateLastEnabledAvailableOption();
     }
   },
 
-  ArrowDown(component, evt, ctx) {
-    // If the clear button has focus, let the browser handle ArrowDown normally.
+  Enter(component, evt, ctx) {
     if (isClearBtnFocused(ctx)) {
-      return;
-    }
+      // If the clear button has focus, let the browser activate it normally.
+      // stopPropagation prevents parent containers (e.g., forms) from treating
+      // Enter as a submit, but we must NOT call preventDefault — that would
+      // block the browser's built-in "Enter activates focused button" behavior.
+      evt.stopPropagation();
+    } else if (ctx.isExpanded && component.menu.optionActive) {
+      component.menu.makeSelection();
 
-    if (component.availableOptions.length > 0) {
+      if (ctx.isModal) {
+        component.setTriggerInputFocus();
+      }
+
+      evt.preventDefault();
+      evt.stopPropagation();
+    } else {
+      // Prevent the keypress from bubbling to parent containers (e.g., forms)
+      // which could interpret Enter as a submit or trigger other unintended behavior.
+      // This is safe because showBib() opens the dialog programmatically,
+      // not via event propagation.
+      evt.preventDefault();
+      evt.stopPropagation();
       component.showBib();
     }
-    // Read live visibility — ctx.isExpanded was computed before showBib() above,
-    // so it wouldn't reflect the state change.
-    if (component.dropdown.isPopoverVisible) {
+  },
+
+  Escape(component, _evt, ctx) {
+    if (ctx.isExpanded && ctx.isModal) {
+      component.setTriggerInputFocus();
+    }
+  },
+
+  Home(component, evt, ctx) {
+    if (ctx.isExpanded) {
       evt.preventDefault();
-      navigateArrow(component, 'down');
+      evt.stopPropagation();
+      component.activateFirstEnabledAvailableOption();
+    }
+  },
+
+  Tab(component, evt, ctx) {
+    if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
+      // ClearBtn will not bubble up tab key events when it's focused, so need to manage it here when focused
+      component.menu.makeSelection();
+      component.hideBib();
+
+      // In fullscreen modal mode, closing the dialog does not
+      // automatically restores focus to the input. In the tab case,
+      // Explicitly move focus to the trigger's clear button so the
+      // user can continues tabbing through the page normally.
+      if (ctx.isModal && !evt.shiftKey) {
+        component.setClearBtnFocus();
+      }
     }
   },
 };
@@ -4916,7 +4910,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604022013';
+var formkitVersion$2 = '202604032311';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -11650,6 +11644,16 @@ class BaseInput extends AuroElement$1 {
     this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
+    this.clearBtn = this.clearButtonRef.value;
+
+    // This must get moved into inputKeyboardStrategy when implemented
+    this.clearBtn.addEventListener('keydown', (evt) => {
+      evt.stopPropagation();
+    });
+
+    this.clearBtn.addEventListener('click', (evt) => {
+      evt.stopPropagation();
+    });
 
     this.patchInputEvent(this.inputElement);
 
@@ -12673,7 +12677,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604022013';
+var formkitVersion$1 = '202604032311';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12730,6 +12734,11 @@ class AuroInput extends BaseInput {
      * @private
      */
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, _$1);
+
+    /**
+     * @private
+     */
+    this.clearButtonRef = createRef();
   }
 
   static get styles() {
@@ -12747,6 +12756,19 @@ class AuroInput extends BaseInput {
     ];
   }
 
+  /**
+   * Returns classmap configuration for the clear button visibility.
+   * The button is hidden when the input has no value, is read-only, or is disabled.
+   * @private
+   * @returns {Record<string, boolean>} - Classmap object controlling clear button display state.
+   */
+  get clearBtnClassMap() {
+    return {
+      'util_displayHidden': !this.hasValue || this.readyOnly || this.disabled
+    };
+  }
+
+
   /**
    * Determines if the HTML input element should be visually hidden.
    * Returns true when display value content exists without focus and has a value,
@@ -13066,10 +13088,11 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           appearance="${this.onDark ? 'inverse' : this.appearance}"
-          class="notificationBtn clearBtn"
+          class="notificationBtn clearBtn ${classMap(this.clearBtnClassMap)}"
           shape="circle"
           size="sm"
-          variant="ghost">
+          variant="ghost"
+          ${ref(this.clearButtonRef)}>
           <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
             aria-hidden="true"
@@ -13214,11 +13237,7 @@ class AuroInput extends BaseInput {
         <div part="accent-right" class="accents right">
           ${this.renderValidationErrorIconHtml()}
           ${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
-          ${this.hasValue ? html`
-            ${!this.disabled && !this.readonly ? html`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
@@ -13250,11 +13269,7 @@ class AuroInput extends BaseInput {
           ${this.layout.includes('right') || this.layout === "emphasized" ? html`
             ${this.renderValidationErrorIconHtml()}
           ` : undefined}
-          ${this.hasValue ? html`
-            ${!this.disabled && !this.readonly ? html`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="${classMap(this.helpTextClasses)}" part="inputHelpText">
@@ -13282,11 +13297,7 @@ class AuroInput extends BaseInput {
         </div>
         <div class="accents right">
           ${this.renderValidationErrorIconHtml()}
-          ${this.hasValue ? html`
-            ${!this.disabled && !this.readonly ? html`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
@@ -13712,7 +13723,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604022013';
+var formkitVersion = '202604032311';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14191,6 +14202,7 @@ class AuroCombobox extends AuroElement {
 
       /**
        * Array of available options to display in the dropdown.
+       * This array contains all non-hidden options (e.g., hidden by filtering on input value).
        * @private
        */
       availableOptions: {
@@ -14568,12 +14580,40 @@ class AuroCombobox extends AuroElement {
     AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCombobox);
   }
 
+  /**
+   * Mark the first available (non-hidden), enabled option as `active`.
+   * @private
+   * @returns {void}
+   */
+  activateFirstEnabledAvailableOption() {
+    const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled);
+    this.updateActiveOption(firstEnabledOptionIndex);
+  }
+
+  /**
+   * Mark the last available (non-hidden), enabled option as `active`.
+   * @private
+   * @returns {void}
+   */
+  activateLastEnabledAvailableOption() {
+    let lastEnabledOptionIndex = -1;
+
+    // Work backwards through the available options array to find the last enabled option
+    for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
+      if (!this.availableOptions[index].disabled) {
+        lastEnabledOptionIndex = index;
+        break;
+      }
+    }
+
+    this.updateActiveOption(lastEnabledOptionIndex);
+  }
+
   /**
    * Updates the filter for the available options based on the input value.
    * @private
    */
   updateFilter() {
-
     // Reset available options if noFilter is set to false after being true.
     if (this.noFilter) {
       this.availableOptions = [...this.options];
@@ -14692,6 +14732,10 @@ class AuroCombobox extends AuroElement {
     if (this.value && this.input.value && !this.menu.value) {
       this.syncValuesAndStates();
     }
+
+    if (!this.availableOptions.includes(this.menu.optionActive)) {
+      this.activateFirstEnabledAvailableOption();
+    }
   }
 
   /**
@@ -14765,9 +14809,6 @@ class AuroCombobox extends AuroElement {
       if (this.dropdownOpen) {
         const expandedDelay = 150;
         this._expandedTimeout = setTimeout(() => {
-          if (!this.value) {
-            this.updateActiveOption(0);
-          }
           this.triggerExpandedState = true;
         }, expandedDelay);
       } else {
@@ -14777,22 +14818,16 @@ class AuroCombobox extends AuroElement {
       // Clear aria-activedescendant when dropdown closes
       if (!this.dropdownOpen && this.input) {
         this.input.setActiveDescendant(null);
-        this.optionActive = null;
-
-        // Remove the highlighted state from all menu options so re-opening
-        // the dropdown doesn't show a stale highlight.
-        if (this.options) {
-          this.options.forEach((opt) => {
-            opt.active = false;
-            opt.classList.remove('active');
-          });
-        }
 
         // Restore pointer events on the menu in case they were disabled
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        restoreTriggerAfterClose(this.dropdown, this.input);
+        // When closing a fullscreen bib, restore focus to the trigger so that
+        // keyboard navigation continues from the correct place in the page
+        if (this.dropdown.isBibFullscreen) {
+          restoreTriggerAfterClose(this.dropdown, this.input);
+        }
       }
 
       if (this.dropdownOpen) {
@@ -14827,13 +14862,6 @@ class AuroCombobox extends AuroElement {
             this.setInputFocus();
             this._inFullscreenTransition = false;
           });
-        } else {
-          // wait a frame in case the bib gets hidden immediately after showing because there is no value
-          setTimeout(() => {
-            if (this.componentHasFocus) {
-              this.setInputFocus();
-            }
-          }, 0);
         }
       }
     });
@@ -14883,7 +14911,25 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      clearBtn.focus();
+      // Wait for the element to fully render across
+      // multiple Lit update cycles before moving focus
+      doubleRaf(() => {
+        clearBtn.focus();
+      });
+    }
+  }
+
+  /**
+   * @private
+   */
+  setTriggerInputFocus() {
+    const input = this.input.shadowRoot.querySelector('input');
+    if (input) {
+      // Wait for the element to fully render across
+      // multiple Lit update cycles before moving focus
+      doubleRaf(() => {
+        input.focus();
+      });
     }
   }
 

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

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

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

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

package/components/counter/dist/index.js

@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604022013';
+var formkitVersion$1 = '202604032311';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5512,7 +5512,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604022013';
+var formkitVersion = '202604032311';
 
 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 = '202604022013';
+var formkitVersion$1 = '202604032311';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5512,7 +5512,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604022013';
+var formkitVersion = '202604032311';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/datepicker/demo/api.md

@@ -32,7 +32,7 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | [offset](#offset)                          | `offset`                          |           | `number`                                         | "0"                                              | Gap between the trigger element and bib.         |
 | [onDark](#onDark)                          | `onDark`                          |           | `boolean`                                        | false                                            | DEPRECATED - use `appearance="inverse"` instead. |
 | [placeholder](#placeholder)                     | `placeholder`                     |           | `string`                                         |                                                  | Placeholder text to display in the input(s) when no value is set. |
-| [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. |
+| [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`. |