@aurodesignsystem-dev/auro-formkit 0.0.0-pr1411.3 → 0.0.0-pr1413.1

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

@@ -1249,26 +1249,23 @@ 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.
+  Enter(component, evt, ctx) {
     if (isClearBtnFocused(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.
       evt.stopPropagation();
-      return;
-    }
-
-    if (ctx.isExpanded && component.optionActive) {
+    } else if (ctx.isExpanded && component.menu.optionActive) {
       component.menu.makeSelection();
-      await component.updateComplete;
+      component.setClearBtnFocus();
       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.
@@ -1280,71 +1277,28 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component, evt, ctx) {
-    if (!ctx.isExpanded) {
-      return;
+  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();
     }
+  },
 
-    // Shift+Tab moves the highlight to the first non-disabled option
-    // without making a selection or closing the bib.
-    if (evt.shiftKey) {
+  Home(component, evt, ctx) {
+    if (ctx.isExpanded) {
       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 });
-        }
-
-        // 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();
-        } else {
-          clearBtn.focus();
-        }
-        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();
-      }
-      component.hideBib();
-      return;
+      evt.stopPropagation();
+      component.activateFirstEnabledAvailableOption();
     }
+  },
 
-    // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
-      component.menu.value = component.menu.optionActive.value;
+  End(component, evt, ctx) {
+    if (ctx.isExpanded) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      component.activateLastEnabledAvailableOption();
     }
-    component.hideBib();
   },
 
   ArrowUp(component, evt, ctx) {
@@ -1353,14 +1307,15 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
+    // option display and navigation are prevented if there are no available options
     if (component.availableOptions.length > 0) {
-      component.showBib();
-    }
-    // Read live visibility — ctx.isExpanded was computed before showBib() above,
-    // so it wouldn't reflect the state change.
-    if (component.dropdown.isPopoverVisible) {
-      evt.preventDefault();
-      navigateArrow(component, 'up');
+      // navigate if bib is open otherwise open it
+      if (component.dropdown.isPopoverVisible) {
+        evt.preventDefault();
+        navigateArrow(component, 'up');
+      } else {
+        component.showBib();
+      }
     }
   },
 
@@ -1370,16 +1325,17 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
+    // option display and navigation are prevented if there are no available options
     if (component.availableOptions.length > 0) {
-      component.showBib();
-    }
-    // Read live visibility — ctx.isExpanded was computed before showBib() above,
-    // so it wouldn't reflect the state change.
-    if (component.dropdown.isPopoverVisible) {
-      evt.preventDefault();
-      navigateArrow(component, 'down');
+      // navigate if bib is open otherwise open it
+      if (component.dropdown.isPopoverVisible) {
+        evt.preventDefault();
+        navigateArrow(component, 'down');
+      } else {
+        component.showBib();
+      }
     }
-  },
+  }
 };
 
 /**
@@ -4983,7 +4939,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604021808';
+var formkitVersion$2 = '202604031553';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -11724,6 +11680,12 @@ 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.patchInputEvent(this.inputElement);
 
@@ -12747,7 +12709,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604021808';
+var formkitVersion$1 = '202604031553';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12804,6 +12766,11 @@ class AuroInput extends BaseInput {
      * @private
      */
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, _$2);
+
+    /**
+     * @private
+     */
+    this.clearButtonRef = e$1();
   }
 
   static get styles() {
@@ -12821,6 +12788,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,
@@ -13140,10 +13120,11 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           appearance="${this.onDark ? 'inverse' : this.appearance}"
-          class="notificationBtn clearBtn"
+          class="notificationBtn clearBtn ${e$3(this.clearBtnClassMap)}"
           shape="circle"
           size="sm"
-          variant="ghost">
+          variant="ghost"
+          ${n$2(this.clearButtonRef)}>
           <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
             aria-hidden="true"
@@ -13288,11 +13269,7 @@ class AuroInput extends BaseInput {
         <div part="accent-right" class="accents right">
           ${this.renderValidationErrorIconHtml()}
           ${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
-          ${this.hasValue ? u$7`
-            ${!this.disabled && !this.readonly ? u$7`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
@@ -13324,11 +13301,7 @@ class AuroInput extends BaseInput {
           ${this.layout.includes('right') || this.layout === "emphasized" ? u$7`
             ${this.renderValidationErrorIconHtml()}
           ` : undefined}
-          ${this.hasValue ? u$7`
-            ${!this.disabled && !this.readonly ? u$7`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="${e$3(this.helpTextClasses)}" part="inputHelpText">
@@ -13356,11 +13329,7 @@ class AuroInput extends BaseInput {
         </div>
         <div class="accents right">
           ${this.renderValidationErrorIconHtml()}
-          ${this.hasValue ? u$7`
-            ${!this.disabled && !this.readonly ? u$7`
-              ${this.renderHtmlActionClear()}
-            ` : undefined}
-          ` : undefined}
+          ${this.renderHtmlActionClear()}
         </div>
       </div>
       <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
@@ -13786,7 +13755,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604021808';
+var formkitVersion = '202604031553';
 
 var styleCss$3 = i$7`.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}`;
 
@@ -14265,6 +14234,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: {
@@ -14642,12 +14612,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];
@@ -14766,6 +14764,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();
+    }
   }
 
   /**
@@ -14839,9 +14841,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 {
@@ -14851,16 +14850,6 @@ 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.
@@ -14901,13 +14890,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);
         }
       }
     });

package/components/combobox/demo/keyboardBehavior.md

@@ -3,7 +3,7 @@
   <div class="mainContent">
     <div class="scrollWrapper">
       <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-      <p>The component trigger contains an <code>&lt;auro-input&gt;</code> which has two focusable elements:</p>
+      <p>The component trigger contains an <code>&lt;auro-input&gt;</code> which has two elements:</p>
       <ol>
         <li><strong>Input</strong></li>
         <li><strong>Clear button:</strong> only shown when the input has a value.</li>
@@ -11,7 +11,7 @@
       <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
       <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
       <p>On <strong>large viewport devices</strong> (e.g., desktop browser, tablet) there is no focusable content inside the component bib.</p>
-      <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which may be tabbed through naturally.</p>
+      <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which can receive <strong>Click</strong> and <strong>Tap</strong> events.</p>
       <auro-header level="2" id="keyEvents">Key Events</auro-header>
       <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
       <!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
@@ -166,8 +166,8 @@
             </td>
           </tr>
           <tr>
-            <td rowspan="6">Enter</td>
-            <td rowspan="6">-</td>
+            <td rowspan="4">Enter</td>
+            <td rowspan="4">-</td>
             <td>Collapsed, list options have been populated</td>
             <td>
               Trigger input, <strong>NOT</strong> the input clear button
@@ -186,7 +186,7 @@
             </td>
           </tr>
           <tr>
-            <td rowspan="2">Expanded, large viewport device</td>
+            <td>Expanded, large viewport device</td>
             <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
             </td>
@@ -195,15 +195,7 @@
             </td>
           </tr>
           <tr>
-            <td>
-              Trigger input close button, <strong>NOT</strong> the trigger input 
-            </td>
-            <td>
-              The input value is cleared and <strong>focus</strong> is moved to the trigger input element.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Expanded, small viewport device</td>
+            <td>Expanded, small viewport device</td>
             <td>
               Dialog input element, <strong>NOT</strong> the dialog input clear button
             </td>
@@ -211,14 +203,6 @@
               The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
             </td>
           </tr>
-          <tr>
-            <td>
-              Dialog input clear button, <strong>NOT</strong> the dialog input element
-            </td>
-            <td>
-              The <strong>input</strong> value is cleared, <strong>focus</strong> moves to the dialog input element.
-            </td>
-          </tr>
           <tr>
             <td>Escape</td>
             <td>-</td>
@@ -248,9 +232,9 @@
             </td>
           </tr>
           <tr>
-            <td rowspan="3">Tab</td>
-            <td rowspan="2">-</td>
-            <td rowspan="2">Expanded</td>
+            <td rowspan="2">Tab</td>
+            <td>-</td>
+            <td>Expanded</td>
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
@@ -261,17 +245,6 @@
               The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.
             </td>
           </tr>
-          <tr>
-            <td>
-              Input clear button, <strong>NOT</strong> the input element
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content input clear buttons.
-              </div>
-            </td>
-            <td>
-              <span style="background-color: pink; color: red;">&nbsp;What do we do here?&nbsp;&nbsp;</span>
-            </td>
-          </tr>
           <tr>
             <td>Shift</td>
             <td>Expanded</td>

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

@@ -42,6 +42,7 @@ export 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: {
@@ -381,6 +382,18 @@ export class AuroCombobox extends AuroElement {
      * @returns {boolean} - Returns true if the element is valid, false otherwise.
      */
     isValid(): boolean;
+    /**
+     * Mark the first available (non-hidden), enabled option as `active`.
+     * @private
+     * @returns {void}
+     */
+    private activateFirstEnabledAvailableOption;
+    /**
+     * Mark the last available (non-hidden), enabled option as `active`.
+     * @private
+     * @returns {void}
+     */
+    private activateLastEnabledAvailableOption;
     /**
      * Updates the filter for the available options based on the input value.
      * @private

package/components/combobox/dist/comboboxKeyboardStrategy.d.ts

@@ -1,6 +1,8 @@
 export namespace comboboxKeyboardStrategy {
-    function Enter(component: any, evt: any, ctx: any): Promise<void>;
-    function Tab(component: any, evt: any, ctx: any): void;
+    function Enter(component: any, evt: any, ctx: any): void;
+    function Tab(component: any, _evt: any, ctx: any): void;
+    function Home(component: any, evt: any, ctx: any): void;
+    function End(component: any, evt: any, ctx: any): void;
     function ArrowUp(component: any, evt: any, ctx: any): void;
     function ArrowDown(component: any, evt: any, ctx: any): void;
 }