@aurodesignsystem-dev/auro-formkit 0.0.0-pr1387.2 → 0.0.0-pr1387.4

package/components/combobox/dist/registered.js

@@ -1104,13 +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.
+ * 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 {{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 = 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 = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
   }
+
+  return ctx;
 }
 
 /**
@@ -1118,12 +1150,14 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
  * Handles both sync and async handlers.
  * @param {HTMLElement} component - The component to attach the listener to.
  * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
  */
-function applyKeyboardStrategy(component, strategy) {
+function applyKeyboardStrategy(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
-    if (handler) {
-      await handler(component, evt);
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
     }
   });
 }
@@ -1135,39 +1169,58 @@ function applyKeyboardStrategy(component, strategy) {
  * @param {string} direction - 'up' or 'down'.
  * @param {Object} [options] - Optional config.
  * @param {Function} [options.showFn] - Called to open the dropdown when closed.
+ * @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
  */
 function navigateArrow(component, direction, options = {}) {
-  if (component.dropdown.isPopoverVisible) {
+  const visible = options.ctx ? options.ctx.isExpanded : component.dropdown.isPopoverVisible;
+  if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
     options.showFn();
   }
 }
 
+/**
+ * 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) {
+  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 isBibFullscreenActive =
-      component.dropdown &&
-      component.dropdown.isBibFullscreen &&
-      component.dropdown.isPopoverVisible;
-    const activeInput =
-      isBibFullscreenActive && component.inputInBib
-        ? component.inputInBib
-        : component.input;
-    const clearBtn =
-      activeInput && activeInput.shadowRoot
-        ? activeInput.shadowRoot.querySelector('.clearBtn')
-        : null;
-    if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
+    if (isClearBtnFocused(ctx)) {
       evt.stopPropagation();
       return;
     }
 
-    if (component.dropdown.isPopoverVisible && component.optionActive) {
+    if (ctx.isExpanded && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1184,20 +1237,20 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component) {
-    if (!component.dropdown.isPopoverVisible) {
+  Tab(component, _evt, ctx) {
+    if (!ctx.isExpanded) {
       return;
     }
 
-    if (component.dropdown.isBibFullscreen) {
-      const clearBtn = component.inputInBib.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 (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 && component.inputInBib.value) {
+      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.
@@ -1240,30 +1293,34 @@ const comboboxKeyboardStrategy = {
     component.hideBib();
   },
 
-  ArrowUp(component, evt) {
-    // If the clear button has focus, let the browser handle ArrowUp normally
-    if (component.clearBtnFocused) {
+  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();
     }
+    // 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) {
-    // If the clear button has focus, let the browser handle ArrowDown normally
-    if (component.clearBtnFocused) {
+  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();
     }
+    // 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');
@@ -4835,7 +4892,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202603191903';
+var formkitVersion$2 = '202603232258';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12583,7 +12640,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202603191903';
+var formkitVersion$1 = '202603232258';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13622,7 +13679,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202603191903';
+var formkitVersion = '202603232258';
 
 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}`;
 
@@ -13966,6 +14023,19 @@ class AuroHelpText extends LitElement {
 // See LICENSE in the project root for license information.
 
 
+/**
+ * Strips only trailing whitespace from an input value so residual spaces
+ * from cursor editing don't break filtering or highlighting.  Whitespace-only
+ * values are preserved as-is to prevent a lone space from being treated as
+ * empty input.
+ * @param {string} value - Raw input value.
+ * @returns {string} Normalized value.
+ */
+function normalizeFilterValue(value) {
+  const raw = value || '';
+  return raw.trim() ? raw.trimEnd() : raw;
+}
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input.
@@ -14479,6 +14549,8 @@ class AuroCombobox extends AuroElement {
 
     this.noMatchOption = undefined;
 
+    const filterValue = normalizeFilterValue(this.input.value).toLowerCase();
+
     this.options.forEach((option) => {
       let matchString = option.textContent.toLowerCase();
 
@@ -14495,12 +14567,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);
@@ -14531,7 +14603,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 = normalizeFilterValue(this.input.value);
     }
     const label = this.menu.currentLabel;
     this.updateTriggerTextDisplay(label || this.value);
@@ -14895,8 +14967,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 = normalizeFilterValue(this.input.value);
+      if (this.menu.matchWord !== trimmedInput) {
+        this.menu.matchWord = trimmedInput;
       }
 
       // Update available options based on selection
@@ -15034,7 +15107,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 = normalizeFilterValue(this.inputInBib.value);
       this.optionActive = null;
       this.handleMenuOptions();
       this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
@@ -15048,7 +15121,7 @@ class AuroCombobox extends AuroElement {
 
     this.inputInBib.value = this.input.value;
 
-    this.menu.matchWord = this.input.value;
+    this.menu.matchWord = normalizeFilterValue(this.input.value);
     this.optionActive = null;
 
     if (!this.input.value) {
@@ -15100,7 +15173,10 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    applyKeyboardStrategy(this, comboboxKeyboardStrategy);
+    applyKeyboardStrategy(this, comboboxKeyboardStrategy, {
+      // In modal mode the input moves into the bib; route keyboard events to that element instead.
+      inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
+    });
 
     this.addEventListener('focusin', () => {
       this.touched = true;
@@ -15259,7 +15335,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 = normalizeFilterValue(this.input.value);
       }
 
       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 = '202603191903';
+var formkitVersion$1 = '202603232258';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1789,6 +1789,25 @@ class AuroCounter extends i$2 {
     }
   }
 
+  /**
+   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
+   * bridging the shadow DOM boundary for screen readers.
+   * @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 = [];
+      }
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("value")) {
       this.validate();
@@ -1844,11 +1863,10 @@ class AuroCounter extends i$2 {
             <label id="counter-label" class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
-            <slot id="counter-description" name="description" class="body-xs"></slot>
+            <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
           <div 
             part="counterControl" 
-            aria-describedby="counter-description" 
             aria-disabled="${o$2(this.disabled ? 'true' : undefined)}" 
             aria-labelledby="counter-label" 
             aria-valuemax="${this.max}" 
@@ -5476,7 +5494,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603191903';
+var formkitVersion = '202603232258';
 
 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 = '202603191903';
+var formkitVersion$1 = '202603232258';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1789,6 +1789,25 @@ class AuroCounter extends i$2 {
     }
   }
 
+  /**
+   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
+   * bridging the shadow DOM boundary for screen readers.
+   * @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 = [];
+      }
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("value")) {
       this.validate();
@@ -1844,11 +1863,10 @@ class AuroCounter extends i$2 {
             <label id="counter-label" class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
-            <slot id="counter-description" name="description" class="body-xs"></slot>
+            <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
           <div 
             part="counterControl" 
-            aria-describedby="counter-description" 
             aria-disabled="${o$2(this.disabled ? 'true' : undefined)}" 
             aria-labelledby="counter-label" 
             aria-valuemax="${this.max}" 
@@ -5476,7 +5494,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603191903';
+var formkitVersion = '202603232258';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

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

@@ -114,6 +114,13 @@ export class AuroCounter extends LitElement {
      * @private
      */
     private onDefaultSlotChange;
+    /**
+     * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
+     * bridging the shadow DOM boundary for screen readers.
+     * @param {Event} event - The slotchange event.
+     * @private
+     */
+    private onDescriptionSlotChange;
     updated(changedProperties: any): void;
     /**
      * Returns HTML for the help text and error message.

package/components/counter/dist/index.js

@@ -1420,7 +1420,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202603191903';
+var formkitVersion$1 = '202603232258';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1739,6 +1739,25 @@ class AuroCounter extends LitElement {
     }
   }
 
+  /**
+   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
+   * bridging the shadow DOM boundary for screen readers.
+   * @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 = [];
+      }
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("value")) {
       this.validate();
@@ -1794,11 +1813,10 @@ class AuroCounter extends LitElement {
             <label id="counter-label" class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
-            <slot id="counter-description" name="description" class="body-xs"></slot>
+            <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
           <div 
             part="counterControl" 
-            aria-describedby="counter-description" 
             aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" 
             aria-labelledby="counter-label" 
             aria-valuemax="${this.max}" 
@@ -5408,7 +5426,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202603191903';
+var formkitVersion = '202603232258';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {

package/components/counter/dist/registered.js

@@ -1420,7 +1420,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202603191903';
+var formkitVersion$1 = '202603232258';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1739,6 +1739,25 @@ class AuroCounter extends LitElement {
     }
   }
 
+  /**
+   * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
+   * bridging the shadow DOM boundary for screen readers.
+   * @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 = [];
+      }
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("value")) {
       this.validate();
@@ -1794,11 +1813,10 @@ class AuroCounter extends LitElement {
             <label id="counter-label" class="label">
               <slot @slotchange="${this.onDefaultSlotChange}"></slot>
             </label>
-            <slot id="counter-description" name="description" class="body-xs"></slot>
+            <slot name="description" class="body-xs" @slotchange="${this.onDescriptionSlotChange}"></slot>
           </div>
           <div 
             part="counterControl" 
-            aria-describedby="counter-description" 
             aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" 
             aria-labelledby="counter-label" 
             aria-valuemax="${this.max}" 
@@ -5408,7 +5426,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202603191903';
+var formkitVersion = '202603232258';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {