@aurodesignsystem-dev/auro-formkit 0.0.0-pr1377.2 → 0.0.0-pr1377.20

package/components/combobox/dist/index.js

@@ -1104,40 +1104,45 @@ function guardTouchPassthrough(element) {
 function restoreTriggerAfterClose(dropdown, focusTarget) {
   dropdown.trigger.inert = false;
 
-  if (dropdown.isBibFullscreen) {
-    requestAnimationFrame(() => {
-      if (!dropdown.isPopoverVisible) {
-        focusTarget.focus();
-      }
-    });
-  }
+  requestAnimationFrame(() => {
+    if (!dropdown.isPopoverVisible) {
+      focusTarget.focus();
+    }
+  });
 }
 
 /**
- * Computes display state once per keydown event and returns a frozen context object.
+ * Computes display state once per keydown event.
  * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
  * @param {HTMLElement} component - The component with a dropdown reference.
  * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
  * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
- * @returns {Readonly<{isVisible: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}>}
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
  */
 function createDisplayContext(component, options = {}) {
-  const dd = component.dropdown;
-  const isVisible = Boolean(dd && dd.isPopoverVisible);
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
   const isFullscreen = Boolean(dd && dd.isBibFullscreen);
 
   const ctx = {
-    isVisible,
-    isModal: isVisible && isFullscreen,
-    isPopover: isVisible && !isFullscreen,
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
     activeInput: null,
   };
 
   if (options.inputResolver) {
-    ctx.activeInput = options.inputResolver(component, ctx);
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
   }
 
-  return Object.freeze(ctx);
+  return ctx;
 }
 
 /**
@@ -1150,7 +1155,7 @@ function createDisplayContext(component, options = {}) {
 function applyKeyboardStrategy(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
-    if (handler) {
+    if (typeof handler === 'function') {
       const ctx = createDisplayContext(component, options);
       await handler(component, evt, ctx);
     }
@@ -1167,7 +1172,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
  * @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
  */
 function navigateArrow(component, direction, options = {}) {
-  const visible = options.ctx ? options.ctx.isVisible : component.dropdown.isPopoverVisible;
+  const visible = options.ctx ? options.ctx.isExpanded : component.dropdown.isPopoverVisible;
   if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
@@ -1175,22 +1180,47 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/**
+ * Returns the clear button element from the active input's shadow
+ * DOM, if available.
+ * @param {Object} ctx - Display context with activeInput.
+ * @returns {Element|null}
+ */
+function getClearBtn(ctx) {
+  const root = ctx && ctx.activeInput && ctx.activeInput.shadowRoot;
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.clearBtn');
+}
+
+/**
+ * Returns true when the clear button inside the active input's shadow DOM has focus.
+ * Uses shadowRoot.activeElement to detect focus inside auro-button,
+ * since Safari does not propagate :focus-within through shadow DOM.
+ * @param {Object} ctx - Display context with activeInput.
+ * @param {Element} [clearBtn=getClearBtn(ctx)] - Pre-fetched clear button element.
+ * @returns {boolean}
+ */
+function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
+  if (!clearBtn) {
+    return false;
+  }
+  return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+}
+
 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.
-    const clearBtn =
-      ctx.activeInput && ctx.activeInput.shadowRoot
-        ? ctx.activeInput.shadowRoot.querySelector('.clearBtn')
-        : null;
-    if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
+    if (isClearBtnFocused(ctx)) {
       evt.stopPropagation();
       return;
     }
 
-    if (ctx.isVisible && component.optionActive) {
+    if (ctx.isExpanded && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1207,8 +1237,8 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component, evt, ctx) {
-    if (!ctx.isVisible) {
+  Tab(component, _evt, ctx) {
+    if (!ctx.isExpanded) {
       return;
     }
 
@@ -1216,22 +1246,8 @@ const comboboxKeyboardStrategy = {
       if (!ctx.activeInput) {
         return;
       }
-      const clearBtn = ctx.activeInput.shadowRoot.querySelector('.clearBtn');
-
-      // Use shadowRoot.activeElement to detect focus inside auro-button,
-      // since Safari does not propagate :focus-within through shadow DOM.
-      const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null;
-
-      if (evt.shiftKey) {
-        // Shift+Tab from clear button: move focus back to the input
-        if (clearBtnHasFocus) {
-          ctx.activeInput.focus();
-          return;
-        }
-        // Shift+Tab from input (or no clear button): close without selecting
-        component.hideBib();
-        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) {
@@ -1270,29 +1286,41 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
-    // Non-fullscreen: select + close (Shift+Tab closes without selecting)
-    if (!evt.shiftKey && component.menu.optionActive && component.menu.optionActive.value) {
+    // Non-fullscreen: select + close
+    if (component.menu.optionActive && component.menu.optionActive.value) {
       component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
   },
 
-  ArrowUp(component, evt) {
+  ArrowUp(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowUp normally.
+    if (isClearBtnFocused(ctx)) {
+      return;
+    }
+
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
-    // Check live visibility: showBib() above may have just opened the dropdown.
+    // 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');
     }
   },
 
-  ArrowDown(component, evt) {
+  ArrowDown(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowDown normally.
+    if (isClearBtnFocused(ctx)) {
+      return;
+    }
+
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
-    // Check live visibility: showBib() above may have just opened the dropdown.
+    // 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');
@@ -4864,7 +4892,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202603181736';
+var formkitVersion$2 = '202603192334';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12612,7 +12640,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202603181736';
+var formkitVersion$1 = '202603192334';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13651,7 +13679,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202603181736';
+var formkitVersion = '202603192334';
 
 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}`;
 
@@ -14508,6 +14536,13 @@ class AuroCombobox extends AuroElement {
 
     this.noMatchOption = undefined;
 
+    // Remove trailing whitespace only when the input contains
+    // non-whitespace characters, so residual spaces from cursor
+    // editing don't break matching. Whitespace-only input is
+    // preserved as-is so a lone space doesn't show all options.
+    const raw = this.input.value || '';
+    const filterValue = (raw.trim() ? raw.trimEnd() : raw).toLowerCase();
+
     this.options.forEach((option) => {
       let matchString = option.textContent.toLowerCase();
 
@@ -14524,12 +14559,12 @@ class AuroCombobox extends AuroElement {
       }
 
       // If input is empty, show all options (except static ones)
-      if (!this.input.value || this.input.value.length === 0) {
+      if (!filterValue) {
         if (!option.hasAttribute('static')) {
           option.removeAttribute('hidden');
           this.availableOptions.push(option);
         }
-      } else if (matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
+      } else if (matchString.includes(filterValue) && !option.hasAttribute('static')) {
         // only count options that match the typed input value AND are not static
         option.removeAttribute('hidden');
         this.availableOptions.push(option);
@@ -14560,7 +14595,7 @@ class AuroCombobox extends AuroElement {
   syncValuesAndStates() {
     // Only sync matchWord, don't set menu.value here since setMenuValue should handle that
     if (this.menu) {
-      this.menu.matchWord = this.input.value;
+      this.menu.matchWord = (this.input.value || '').trimEnd();
     }
     const label = this.menu.currentLabel;
     this.updateTriggerTextDisplay(label || this.value);
@@ -14924,8 +14959,9 @@ class AuroCombobox extends AuroElement {
       this.updateTriggerTextDisplay(event.detail.label || event.detail.value);
 
       // Update match word for filtering
-      if (this.menu.matchWord !== this.input.value) {
-        this.menu.matchWord = this.input.value;
+      const trimmedInput = (this.input.value || '').trimEnd();
+      if (this.menu.matchWord !== trimmedInput) {
+        this.menu.matchWord = trimmedInput;
       }
 
       // Update available options based on selection
@@ -15063,7 +15099,7 @@ class AuroCombobox extends AuroElement {
       });
 
       // Run filtering inline — the re-entrant event won't reach this code.
-      this.menu.matchWord = this.inputInBib.value;
+      this.menu.matchWord = (this.inputInBib.value || '').trimEnd();
       this.optionActive = null;
       this.handleMenuOptions();
       this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
@@ -15077,7 +15113,7 @@ class AuroCombobox extends AuroElement {
 
     this.inputInBib.value = this.input.value;
 
-    this.menu.matchWord = this.input.value;
+    this.menu.matchWord = (this.input.value || '').trimEnd();
     this.optionActive = null;
 
     if (!this.input.value) {
@@ -15291,7 +15327,7 @@ class AuroCombobox extends AuroElement {
 
       // Sync the input and match word, but don't directly set menu.value again
       if (this.menu) {
-        this.menu.matchWord = this.input.value;
+        this.menu.matchWord = (this.input.value || '').trimEnd();
       }
 
       this.dispatchEvent(new CustomEvent('input', {

package/components/combobox/dist/registered.js

@@ -1104,40 +1104,45 @@ function guardTouchPassthrough(element) {
 function restoreTriggerAfterClose(dropdown, focusTarget) {
   dropdown.trigger.inert = false;
 
-  if (dropdown.isBibFullscreen) {
-    requestAnimationFrame(() => {
-      if (!dropdown.isPopoverVisible) {
-        focusTarget.focus();
-      }
-    });
-  }
+  requestAnimationFrame(() => {
+    if (!dropdown.isPopoverVisible) {
+      focusTarget.focus();
+    }
+  });
 }
 
 /**
- * Computes display state once per keydown event and returns a frozen context object.
+ * Computes display state once per keydown event.
  * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
  * @param {HTMLElement} component - The component with a dropdown reference.
  * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
  * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
- * @returns {Readonly<{isVisible: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}>}
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
  */
 function createDisplayContext(component, options = {}) {
-  const dd = component.dropdown;
-  const isVisible = Boolean(dd && dd.isPopoverVisible);
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
   const isFullscreen = Boolean(dd && dd.isBibFullscreen);
 
   const ctx = {
-    isVisible,
-    isModal: isVisible && isFullscreen,
-    isPopover: isVisible && !isFullscreen,
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
     activeInput: null,
   };
 
   if (options.inputResolver) {
-    ctx.activeInput = options.inputResolver(component, ctx);
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
   }
 
-  return Object.freeze(ctx);
+  return ctx;
 }
 
 /**
@@ -1150,7 +1155,7 @@ function createDisplayContext(component, options = {}) {
 function applyKeyboardStrategy(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
-    if (handler) {
+    if (typeof handler === 'function') {
       const ctx = createDisplayContext(component, options);
       await handler(component, evt, ctx);
     }
@@ -1167,7 +1172,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
  * @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
  */
 function navigateArrow(component, direction, options = {}) {
-  const visible = options.ctx ? options.ctx.isVisible : component.dropdown.isPopoverVisible;
+  const visible = options.ctx ? options.ctx.isExpanded : component.dropdown.isPopoverVisible;
   if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
@@ -1175,22 +1180,47 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/**
+ * Returns the clear button element from the active input's shadow
+ * DOM, if available.
+ * @param {Object} ctx - Display context with activeInput.
+ * @returns {Element|null}
+ */
+function getClearBtn(ctx) {
+  const root = ctx && ctx.activeInput && ctx.activeInput.shadowRoot;
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.clearBtn');
+}
+
+/**
+ * Returns true when the clear button inside the active input's shadow DOM has focus.
+ * Uses shadowRoot.activeElement to detect focus inside auro-button,
+ * since Safari does not propagate :focus-within through shadow DOM.
+ * @param {Object} ctx - Display context with activeInput.
+ * @param {Element} [clearBtn=getClearBtn(ctx)] - Pre-fetched clear button element.
+ * @returns {boolean}
+ */
+function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
+  if (!clearBtn) {
+    return false;
+  }
+  return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+}
+
 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.
-    const clearBtn =
-      ctx.activeInput && ctx.activeInput.shadowRoot
-        ? ctx.activeInput.shadowRoot.querySelector('.clearBtn')
-        : null;
-    if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
+    if (isClearBtnFocused(ctx)) {
       evt.stopPropagation();
       return;
     }
 
-    if (ctx.isVisible && component.optionActive) {
+    if (ctx.isExpanded && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1207,8 +1237,8 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component, evt, ctx) {
-    if (!ctx.isVisible) {
+  Tab(component, _evt, ctx) {
+    if (!ctx.isExpanded) {
       return;
     }
 
@@ -1216,22 +1246,8 @@ const comboboxKeyboardStrategy = {
       if (!ctx.activeInput) {
         return;
       }
-      const clearBtn = ctx.activeInput.shadowRoot.querySelector('.clearBtn');
-
-      // Use shadowRoot.activeElement to detect focus inside auro-button,
-      // since Safari does not propagate :focus-within through shadow DOM.
-      const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null;
-
-      if (evt.shiftKey) {
-        // Shift+Tab from clear button: move focus back to the input
-        if (clearBtnHasFocus) {
-          ctx.activeInput.focus();
-          return;
-        }
-        // Shift+Tab from input (or no clear button): close without selecting
-        component.hideBib();
-        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) {
@@ -1270,29 +1286,41 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
-    // Non-fullscreen: select + close (Shift+Tab closes without selecting)
-    if (!evt.shiftKey && component.menu.optionActive && component.menu.optionActive.value) {
+    // Non-fullscreen: select + close
+    if (component.menu.optionActive && component.menu.optionActive.value) {
       component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
   },
 
-  ArrowUp(component, evt) {
+  ArrowUp(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowUp normally.
+    if (isClearBtnFocused(ctx)) {
+      return;
+    }
+
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
-    // Check live visibility: showBib() above may have just opened the dropdown.
+    // 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');
     }
   },
 
-  ArrowDown(component, evt) {
+  ArrowDown(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowDown normally.
+    if (isClearBtnFocused(ctx)) {
+      return;
+    }
+
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
-    // Check live visibility: showBib() above may have just opened the dropdown.
+    // 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');
@@ -4864,7 +4892,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202603181736';
+var formkitVersion$2 = '202603192334';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12612,7 +12640,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202603181736';
+var formkitVersion$1 = '202603192334';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13651,7 +13679,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202603181736';
+var formkitVersion = '202603192334';
 
 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}`;
 
@@ -14508,6 +14536,13 @@ class AuroCombobox extends AuroElement {
 
     this.noMatchOption = undefined;
 
+    // Remove trailing whitespace only when the input contains
+    // non-whitespace characters, so residual spaces from cursor
+    // editing don't break matching. Whitespace-only input is
+    // preserved as-is so a lone space doesn't show all options.
+    const raw = this.input.value || '';
+    const filterValue = (raw.trim() ? raw.trimEnd() : raw).toLowerCase();
+
     this.options.forEach((option) => {
       let matchString = option.textContent.toLowerCase();
 
@@ -14524,12 +14559,12 @@ class AuroCombobox extends AuroElement {
       }
 
       // If input is empty, show all options (except static ones)
-      if (!this.input.value || this.input.value.length === 0) {
+      if (!filterValue) {
         if (!option.hasAttribute('static')) {
           option.removeAttribute('hidden');
           this.availableOptions.push(option);
         }
-      } else if (matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
+      } else if (matchString.includes(filterValue) && !option.hasAttribute('static')) {
         // only count options that match the typed input value AND are not static
         option.removeAttribute('hidden');
         this.availableOptions.push(option);
@@ -14560,7 +14595,7 @@ class AuroCombobox extends AuroElement {
   syncValuesAndStates() {
     // Only sync matchWord, don't set menu.value here since setMenuValue should handle that
     if (this.menu) {
-      this.menu.matchWord = this.input.value;
+      this.menu.matchWord = (this.input.value || '').trimEnd();
     }
     const label = this.menu.currentLabel;
     this.updateTriggerTextDisplay(label || this.value);
@@ -14924,8 +14959,9 @@ class AuroCombobox extends AuroElement {
       this.updateTriggerTextDisplay(event.detail.label || event.detail.value);
 
       // Update match word for filtering
-      if (this.menu.matchWord !== this.input.value) {
-        this.menu.matchWord = this.input.value;
+      const trimmedInput = (this.input.value || '').trimEnd();
+      if (this.menu.matchWord !== trimmedInput) {
+        this.menu.matchWord = trimmedInput;
       }
 
       // Update available options based on selection
@@ -15063,7 +15099,7 @@ class AuroCombobox extends AuroElement {
       });
 
       // Run filtering inline — the re-entrant event won't reach this code.
-      this.menu.matchWord = this.inputInBib.value;
+      this.menu.matchWord = (this.inputInBib.value || '').trimEnd();
       this.optionActive = null;
       this.handleMenuOptions();
       this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
@@ -15077,7 +15113,7 @@ class AuroCombobox extends AuroElement {
 
     this.inputInBib.value = this.input.value;
 
-    this.menu.matchWord = this.input.value;
+    this.menu.matchWord = (this.input.value || '').trimEnd();
     this.optionActive = null;
 
     if (!this.input.value) {
@@ -15291,7 +15327,7 @@ class AuroCombobox extends AuroElement {
 
       // Sync the input and match word, but don't directly set menu.value again
       if (this.menu) {
-        this.menu.matchWord = this.input.value;
+        this.menu.matchWord = (this.input.value || '').trimEnd();
       }
 
       this.dispatchEvent(new CustomEvent('input', {

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

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

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

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