@aurodesignsystem-dev/auro-formkit 0.0.0-pr1413.0 → 0.0.0-pr1413.2

package/components/select/dist/registered.js

@@ -1248,9 +1248,16 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+/* eslint-disable new-cap */
+
 const selectKeyboardStrategy = {
   ArrowUp(component, evt, ctx) {
     evt.preventDefault();
+    if (evt.altKey || evt.metaKey) {
+      // navigate to first enabled option
+      selectKeyboardStrategy.Home(component, evt, ctx);
+      return;
+    }
     navigateArrow(component, 'up', {
       ctx,
       showFn: () => component.dropdown.show(),
@@ -1259,30 +1266,36 @@ const selectKeyboardStrategy = {
 
   ArrowDown(component, evt, ctx) {
     evt.preventDefault();
+    if (evt.altKey || evt.metaKey) {
+      // navigate to last enabled option
+      selectKeyboardStrategy.End(component, evt, ctx);
+      return;
+    }
     navigateArrow(component, 'down', {
       ctx,
       showFn: () => component.dropdown.show(),
     });
   },
 
-  Enter(component, evt) {
+  Enter(component, evt, ctx) {
     evt.preventDefault();
+    evt.stopPropagation();
+    if (!ctx.isExpanded) {
+      component.dropdown.show();
+      return;
+    }
     component.menu.makeSelection();
   },
 
-  Tab(component, evt, ctx) {
+  Escape(component, evt, ctx) {
     if (!ctx.isExpanded) {
       return;
     }
+    component.dropdown.hide();
+  },
 
-    // Shift+Tab moves the highlight to the first non-disabled option
-    // without making a selection or closing the bib.
-    if (evt.shiftKey) {
-      evt.preventDefault();
-      const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
-      if (firstActive) {
-        component.menu.updateActiveOption(firstActive);
-      }
+  Tab(component, evt, ctx) {
+    if (!ctx.isExpanded) {
       return;
     }
 
@@ -1293,9 +1306,41 @@ const selectKeyboardStrategy = {
     }
     component.dropdown.hide();
   },
+  Home(component, evt, ctx) {
+    if (!ctx.isExpanded) {
+      return;
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+    const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
+    if (firstOption) {
+      component.menu.updateActiveOption(firstOption);
+    }
+  },
 
-  default(component, evt) {
+  End(component, evt, ctx) {
+    if (!ctx.isExpanded) {
+      return;
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+    const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
+    if (lastOption) {
+      component.menu.updateActiveOption(lastOption);
+    }
+  },
+
+  default(component, evt, ctx) {
     component.updateActiveOptionBasedOnKey(evt.key);
+    if (evt.key === ' ') {
+      evt.preventDefault();
+      evt.stopPropagation();
+      if (ctx.isExpanded) {
+        component.dropdown.hide();
+        return;
+      }
+      component.dropdown.show();
+    }
   },
 };
 
@@ -4916,7 +4961,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604021941';
+var formkitVersion$1 = '202604031554';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -5097,6 +5142,7 @@ class AuroDropdown extends AuroElement {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
+    this.disableKeyboardHandling = false;
     this.error = false;
     this.tabIndex = 0;
     this.noToggle = false;
@@ -5308,6 +5354,14 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
+      /**
+       * If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
+       */
+      disableKeyboardHandling: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * @private
        */
@@ -5613,7 +5667,7 @@ class AuroDropdown extends AuroElement {
 
   firstUpdated() {
     // Configure the floater to, this will generate the ID for the bib
-    this.floater.configure(this, 'auroDropdown');
+    this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
 
     // Prevent `contain: layout` on the dropdown host. Layout containment
     // creates a containing block for position:fixed descendants (the bib),
@@ -5921,6 +5975,7 @@ class AuroDropdown extends AuroElement {
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
+          aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
           @focusin="${this.handleFocusin}"
           @blur="${this.handleFocusOut}">
           <div class="triggerContentWrapper" id="triggerLabel">
@@ -6659,7 +6714,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604021941';
+var formkitVersion = '202604031554';
 
 var styleCss = 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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
@@ -7202,6 +7257,20 @@ class AuroSelect extends AuroElement$1 {
       if (this.dropdown.isPopoverVisible) {
         this.updateMenuShapeSize();
 
+        // If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
+        // No selection → first enabled option gets highlighted
+        if (this.optionSelected && !Array.isArray(this.optionSelected)) {
+          this.menu.updateActiveOption(this.optionSelected);
+        } else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
+          this.menu.updateActiveOption(this.optionSelected[0]);
+        } else if (!this.menu.optionActive) {
+          // If no activeOption has yet to be set, then make the first enabled option active by default
+          const firstActive = this.menu.menuService.menuOptions.find((option) => !option.disabled);
+          this.menu.updateActiveOption(firstActive);
+        }
+
+        // Scroll the selected option into view when dropdown opens
+        this.scrollSelectedOptionIntoView();
         if (this.dropdown.isBibFullscreen) {
           // Hide the trigger from assistive technology so VoiceOver cannot reach it
           // behind the fullscreen dialog
@@ -7213,17 +7282,6 @@ class AuroSelect extends AuroElement$1 {
           // multiple Lit update cycles before moving focus into the bib
           doubleRaf(() => {
             this.bibtemplate.focusCloseButton();
-
-            // If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
-            // No selection → no highlight
-            if (this.optionSelected && !Array.isArray(this.optionSelected)) {
-              this.menu.updateActiveOption(this.optionSelected);
-            } else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
-              this.menu.updateActiveOption(this.optionSelected[0]);
-            }
-
-            // Scroll the selected option into view when dropdown opens
-            this.scrollSelectedOptionIntoView();
           });
         } else {
           // wait til the bib gets fully rendered
@@ -7909,6 +7967,7 @@ class AuroSelect extends AuroElement$1 {
           <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
         </div>
         <${this.dropdownTag}
+          disableKeyboardHandling
           appearance="${this.onDark ? 'inverse' : this.appearance}"
           .a11yRole=${"combobox"}
           ?autoPlacement="${this.autoPlacement}"
@@ -7988,6 +8047,7 @@ class AuroSelect extends AuroElement$1 {
           <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
         </div>
         <${this.dropdownTag}
+          disableKeyboardHandling
           appearance="${this.onDark ? 'inverse' : this.appearance}"
           .a11yRole=${"combobox"}
           ?autoPlacement="${this.autoPlacement}"
@@ -8073,6 +8133,7 @@ class AuroSelect extends AuroElement$1 {
           <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
         </div>
         <${this.dropdownTag}
+          disableKeyboardHandling
           appearance="${this.onDark ? 'inverse' : this.appearance}"
           .a11yRole=${"combobox"}
           ?autoPlacement="${this.autoPlacement}"

package/components/select/dist/selectKeyboardStrategy.d.ts

@@ -1,8 +1,11 @@
 export namespace selectKeyboardStrategy {
     export function ArrowUp(component: any, evt: any, ctx: any): void;
     export function ArrowDown(component: any, evt: any, ctx: any): void;
-    export function Enter(component: any, evt: any): void;
+    export function Enter(component: any, evt: any, ctx: any): void;
+    export function Escape(component: any, evt: any, ctx: any): void;
     export function Tab(component: any, evt: any, ctx: any): void;
-    function _default(component: any, evt: any): void;
+    export function Home(component: any, evt: any, ctx: any): void;
+    export function End(component: any, evt: any, ctx: any): void;
+    function _default(component: any, evt: any, ctx: any): void;
     export { _default as default };
 }

package/custom-elements.json

@@ -1188,6 +1188,28 @@
               ],
               "description": "This will register this element with the browser."
             },
+            {
+              "kind": "method",
+              "name": "activateFirstEnabledAvailableOption",
+              "description": "Mark the first available (non-hidden), enabled option as `active`.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activateLastEnabledAvailableOption",
+              "description": "Mark the last available (non-hidden), enabled option as `active`.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "updateFilter",
@@ -1556,7 +1578,7 @@
               "type": {
                 "text": "array"
               },
-              "description": "Array of available options to display in the dropdown.",
+              "description": "Array of available options to display in the dropdown.\nThis array contains all non-hidden options (e.g., hidden by filtering on input value).",
               "attribute": "availableOptions"
             },
             {
@@ -2079,7 +2101,7 @@
               "type": {
                 "text": "array"
               },
-              "description": "Array of available options to display in the dropdown.",
+              "description": "Array of available options to display in the dropdown.\nThis array contains all non-hidden options (e.g., hidden by filtering on input value).",
               "fieldName": "availableOptions"
             },
             {
@@ -2402,7 +2424,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ 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. 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) { 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; } // 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) { // 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, 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'); } }, }"
+          "default": "{ 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(); } else if (ctx.isExpanded && component.menu.optionActive) { component.menu.makeSelection(); component.setClearBtnFocus(); 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(); } }, 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(); } }, Home(component, evt, ctx) { if (ctx.isExpanded) { evt.preventDefault(); evt.stopPropagation(); component.activateFirstEnabledAvailableOption(); } }, End(component, evt, ctx) { if (ctx.isExpanded) { evt.preventDefault(); evt.stopPropagation(); component.activateLastEnabledAvailableOption(); } }, ArrowUp(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowUp normally. if (isClearBtnFocused(ctx)) { return; } // option display and navigation are prevented if there are no available options if (component.availableOptions.length > 0) { // navigate if bib is open otherwise open it if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'up'); } else { component.showBib(); } } }, ArrowDown(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowDown normally. if (isClearBtnFocused(ctx)) { return; } // option display and navigation are prevented if there are no available options if (component.availableOptions.length > 0) { // navigate if bib is open otherwise open it if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'down'); } else { component.showBib(); } } } }"
         }
       ],
       "exports": [
@@ -8285,6 +8307,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "disableKeyboardHandling",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.",
+              "attribute": "disableKeyboardHandling",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "dropdownWidth",
@@ -8568,6 +8601,14 @@
               "description": "If declared, the dropdown is not interactive.",
               "fieldName": "disabled"
             },
+            {
+              "name": "disableKeyboardHandling",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.",
+              "fieldName": "disableKeyboardHandling"
+            },
             {
               "name": "dropdownWidth",
               "type": {
@@ -9964,6 +10005,18 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "clearBtnClassMap",
+              "description": "Returns classmap configuration for the clear button visibility.\nThe button is hidden when the input has no value, is read-only, or is disabled.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Record<string, boolean>"
+                }
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "inputHidden",
@@ -10290,6 +10343,11 @@
               "name": "iconTag",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "clearButtonRef",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "shadowRootOptions",
@@ -18692,7 +18750,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ ArrowUp(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); }, ArrowDown(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); }, Enter(component, evt) { evt.preventDefault(); component.menu.makeSelection(); }, 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) { evt.preventDefault(); const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive); if (firstActive) { component.menu.updateActiveOption(firstActive); } return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive && !component.multiSelect) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt) { component.updateActiveOptionBasedOnKey(evt.key); }, }"
+          "default": "{ ArrowUp(component, evt, ctx) { evt.preventDefault(); if (evt.altKey || evt.metaKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); return; } navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); }, ArrowDown(component, evt, ctx) { evt.preventDefault(); if (evt.altKey || evt.metaKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); return; } navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); }, Enter(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); if (!ctx.isExpanded) { component.dropdown.show(); return; } component.menu.makeSelection(); }, Escape(component, evt, ctx) { if (!ctx.isExpanded) { return; } component.dropdown.hide(); }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive && !component.multiSelect) { component.menu.makeSelection(); } component.dropdown.hide(); }, Home(component, evt, ctx) { if (!ctx.isExpanded) { return; } evt.preventDefault(); evt.stopPropagation(); const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled); if (firstOption) { component.menu.updateActiveOption(firstOption); } }, End(component, evt, ctx) { if (!ctx.isExpanded) { return; } evt.preventDefault(); evt.stopPropagation(); const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled); if (lastOption) { component.menu.updateActiveOption(lastOption); } }, default(component, evt, ctx) { component.updateActiveOptionBasedOnKey(evt.key); if (evt.key === ' ') { evt.preventDefault(); evt.stopPropagation(); if (ctx.isExpanded) { component.dropdown.hide(); return; } component.dropdown.show(); } }, }"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1413.0",
+  "version": "0.0.0-pr1413.2",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {