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

package/components/form/demo/customize.min.js

@@ -109,7 +109,7 @@ let AuroLibraryRuntimeUtils$b = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable no-underscore-dangle, max-lines, object-property-newline */
+/* eslint-disable no-underscore-dangle, max-lines, object-property-newline, dot-location */
 
 
 /**
@@ -117,7 +117,7 @@ let AuroLibraryRuntimeUtils$b = class AuroLibraryRuntimeUtils {
  * @property {string | number | boolean | string[] | null} value - The value of the form element.
  * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
  * @property {boolean} required - Whether the form element is required or not.
- * @property {HTMLElement} element - Whether the form element is required or not.
+ * @property {boolean} disabled - Whether the form element is currently disabled. Cached from the live attribute via the MutationObserver in `connectedCallback` and refreshed from `_handleAttributeMutations`.
  */
 
 /**
@@ -201,6 +201,31 @@ class AuroForm extends i$3 {
      */
     this.mutationObservers = [];
 
+    /**
+     * Captured initial (default) value per field `name`. Populated on first
+     * sight of each name in `_addElementToState` and preserved across
+     * subsequent `initializeState` cycles (slot change, rename, reset) so
+     * `_setInitialState` can detect user edits as `current !== initial`,
+     * matching HTML's `dirtyValueFlag` semantics.
+     * @private
+     * @type {Record<string, string | number | boolean | string[] | null | undefined>}
+     */
+    this._initialValues = {};
+
+    // Single subtree observer that watches `disabled` and `name` attribute
+    // changes across all tracked form elements. The `name` watch is required:
+    // without it, renaming a tracked field at runtime leaves a stale key in
+    // `formState` that `_isNameDisabled` cannot resolve, so a renamed-but-
+    // disabled field would re-appear in `.value`.
+    /**
+     * @private
+     * @type {MutationObserver | null}
+     */
+    this._attributeObserver = null;
+
+    /** @private */
+    this._handleAttributeMutations = this._handleAttributeMutations.bind(this);
+
     // Bind listeners
     /** @private */
     this.reset = this.reset.bind(this);
@@ -269,6 +294,45 @@ class AuroForm extends i$3 {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
+  /**
+   * Whether a given element is currently disabled. Disabled controls are excluded
+   * from submission, validity, and initial-state checks per the HTML spec
+   * (section 4.10.19.2 "Enabling and disabling form controls":
+   * https://www.w3.org/TR/2011/WD-html5-20110113/association-of-controls-and-forms.html).
+   *
+   * Implementation note: we deliberately read only the attribute. Every Auro
+   * form element in `formElementTags` declares `disabled` with `reflect: true`,
+   * so the attribute and property stay in sync. Reading the attribute also
+   * lets the MutationObserver in `connectedCallback` (which is filtered to
+   * `['disabled', 'name']`) be the single source of truth for re-renders.
+   * If a future form-element type ships without attribute reflection, expand
+   * this helper to also read `element.disabled`.
+   * @param {HTMLElement | undefined | null} element - The element to check.
+   * @returns {boolean}
+   * @private
+   */
+  _isDisabled(element) {
+    return Boolean(element?.hasAttribute('disabled'));
+  }
+
+  /**
+   * Whether the tracked form element registered under `name` is currently disabled.
+   * See `_isDisabled` for the HTML-spec rationale behind excluding disabled
+   * controls from form state.
+   *
+   * Reads a cached flag on `formState[name]` populated by `_addElementToState`
+   * at registration and refreshed by `_handleAttributeMutations` whenever the
+   * element's `disabled` attribute toggles. The cache is fed by the same
+   * `hasAttribute('disabled')` read as `_isDisabled`, so the "future form-element
+   * type without attribute reflection" caveat documented there applies here too.
+   * @param {string} name - The `name` attribute used to register the element.
+   * @returns {boolean}
+   * @private
+   */
+  _isNameDisabled(name) {
+    return Boolean(this.formState[name]?.disabled);
+  }
+
   /**
    * Validates if an event is from a valid form element with a name.
    * @param {Event} event - The event to validate.
@@ -308,6 +372,10 @@ class AuroForm extends i$3 {
    */
   get value() {
     return Object.keys(this.formState).reduce((acc, key) => {
+      if (this._isNameDisabled(key)) {
+        return acc;
+      }
+
       acc[key] = this.formState[key].value;
       return acc;
     }, {});
@@ -331,23 +399,113 @@ class AuroForm extends i$3 {
     return this._resetElements;
   }
 
+  /**
+   * Raw constraint-validation check. Returns `true` when no enabled field
+   * has a validity error. Unlike the public `validity` getter, this does
+   * NOT gate on `isInitialState` — callers that need to make a decision
+   * based on the actual constraint state (submit-button enablement, the
+   * internal `submit()` gate) read this so a pre-filled valid form is
+   * correctly recognized as submittable at first render.
+   * @returns {boolean}
+   * @private
+   */
+  _isFormValid() {
+    return !Object.keys(this.formState).some((key) => {
+      if (this._isNameDisabled(key)) {
+        return false;
+      }
+
+      const formKey = this.formState[key];
+      // `null` validity means "not yet validated" — auro-input doesn't
+      // re-validate on every keystroke, so validity stays `null` between
+      // input events until blur. Treating `null` as invalid disables Submit
+      // the moment a user types into any field, which is the wrong UX.
+      // We treat a field as invalid in two cases:
+      //   1. validity is known-bad (non-null, non-'valid')
+      //   2. it's `required` and structurally empty — `valueMissing` is
+      //      certain even without a validation pass.
+      // `submit()` calls `validate(true)` on every enabled field before
+      // reading `_isFormValid()`, so any not-yet-validated field that turns
+      // out to fail another constraint still blocks dispatch.
+      const knownInvalid = formKey.validity !== null && formKey.validity !== 'valid';
+      const requiredAndEmpty = formKey.required && this._normalizeEmpty(formKey.value) === null;
+      return knownInvalid || requiredAndEmpty;
+    });
+  }
+
+  /**
+   * Whether the reset button should be enabled. True when the form has
+   * diverged from its initial state (so the user can always return to
+   * defaults — even if the dirty value lives behind a now-disabled field),
+   * OR when any non-disabled field has a current value or captured initial
+   * value (covers pre-filled forms and user-cleared-back-to-empty cases).
+   * @returns {boolean}
+   * @private
+   */
+  _hasResetableState() {
+    // Form is dirty — always allow Reset, even if the dirt is on a field
+    // that has since been disabled. Without this branch, the user would
+    // have no UI path to return the form to its initial state.
+    if (!this._isInitialState) {
+      return true;
+    }
+
+    return Object.keys(this.formState).some((key) => {
+      if (this._isNameDisabled(key)) {
+        return false;
+      }
+      const current = this._normalizeEmpty(this.formState[key].value);
+      const initial = this._normalizeEmpty(this._initialValues[key]);
+      return current !== null || initial !== null;
+    });
+  }
+
+  /**
+   * Collapse empty representations to a single canonical `null`.
+   *
+   * `_addElementToState` captures `null` for a field that mounts without a
+   * `value` attribute (`element.value || element.getAttribute('value')` is
+   * falsy → resolves to `null`), but `sharedInputListener` later stores the
+   * raw `event.target.value` — which is `''` for a user-cleared text input.
+   * Without this normalization, backspacing back to empty would taint the
+   * form forever (`'' !== null`) and Reset would stay enabled with nothing
+   * to actually reset.
+   *
+   * `''`, `undefined`, and `[]` all collapse to `null`. The empty-array case
+   * covers checkbox-group, radio-group, and multiselect, where `[]` means
+   * "no selection" — semantically the same as `null`/`''`. Genuine values
+   * — including `0`, `false`, non-empty strings, and non-empty arrays —
+   * pass through unchanged so number, boolean, and populated multi-value
+   * fields still compare correctly.
+   * @param {*} value - Value to normalize.
+   * @returns {*}
+   * @private
+   */
+  _normalizeEmpty(value) {
+    if (value === '' || value === undefined) {
+      return null;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return null;
+    }
+    return value;
+  }
+
   /**
    * Infer validity status based on current formState.
+   *
+   * Validity stays `null` while the form is in its initial state — this is
+   * the "stay quiet until the user interacts" UX contract that consumers
+   * depend on to delay error indicators. Code that needs the raw
+   * constraint-validation result regardless of interaction (e.g.,
+   * submit-button enablement) should call `_isFormValid()` directly.
    * @private
    */
   _calculateValidity() {
     if (this.isInitialState) {
       this._validity = null;
     } else {
-      // go through validity states and return the first invalid state (if any)
-      const invalidKey = Object.keys(this.formState).
-        find((key) => {
-          const formKey = this.formState[key];
-          // these are NOT extra parens
-          // eslint-disable-next-line no-extra-parens
-          return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
-        });
-      this._validity = invalidKey ? 'invalid' : 'valid';
+      this._validity = this._isFormValid() ? 'valid' : 'invalid';
     }
   }
 
@@ -363,20 +521,38 @@ class AuroForm extends i$3 {
   }
 
   /**
-   * Determines whether the form is in its initial (untouched) state and updates `_isInitialState` accordingly.
+   * Determines whether the form is in its initial (untouched) state.
+   *
+   * A field is tainted if either:
+   *   - its value differs from the value captured on first render, OR
+   *   - its validity is failing (anything other than `null` or `'valid'`).
+   *
+   * Validity acts as a backup signal: it catches users who interact with a
+   * field without changing its value (e.g., focusing and blurring a required
+   * field). We skip `null` (not yet validated) and `'valid'` (the default
+   * after Auro's auto-validation on mount) because neither proves the user
+   * touched anything.
    * @returns {void}
    * @private
    */
   _setInitialState() {
-    const anyTainted = Object.keys(this.formState).some((key) => this.formState[key].validity !== null || this.formState[key].value !== null);
+    const anyTainted = Object.keys(this.formState).some((key) => {
+      // Normalize empty values so a freshly-captured `null` (no `value`
+      // attribute at mount) and a user-cleared `''` (input emptied via
+      // backspace) compare equal. Without this, backspacing back to an
+      // empty field leaves the form permanently tainted.
+      const initialValue = this._normalizeEmpty(this._initialValues[key]);
+      const currentValue = this._normalizeEmpty(this.formState[key].value);
+      const fieldValidity = this.formState[key].validity;
+      // eslint-disable-next-line no-extra-parens
+      return currentValue !== initialValue || (fieldValidity !== null && fieldValidity !== 'valid');
+    });
 
     this._isInitialState = !anyTainted;
-
-    this._resetElements.forEach((resetElement) => {
-      if (resetElement.hasAttribute("disabled")) {
-        resetElement.removeAttribute("disabled");
-      }
-    });
+    // Button state is owned by setDisabledStateOnButtons (called from updated()
+    // and reset()). Touching resetElement.disabled here causes a visible flicker
+    // in reset(), where the final setDisabledStateOnButtons is deferred behind
+    // an extra updateComplete.
   }
 
   /**
@@ -394,19 +570,19 @@ class AuroForm extends i$3 {
    */
   setDisabledStateOnButtons() {
     this._resetElements.forEach((element) => {
-      if (this.isInitialState) {
-        element.setAttribute("disabled", "");
-      } else {
-        element.removeAttribute("disabled");
-      }
+      // Reset is meaningful whenever any non-disabled field has a current
+      // value OR a captured default value — i.e., whenever the click would
+      // either clear something or restore a default.
+      element.disabled = !this._hasResetableState();
     });
 
     this._submitElements.forEach((element) => {
-      if (this.isInitialState || this.validity !== "valid") {
-        element.setAttribute("disabled", "");
-      } else {
-        element.removeAttribute("disabled");
-      }
+      // Submit enablement reads raw validity (not the gated public getter)
+      // so a pre-filled valid form is submittable at first render — the
+      // public `validity` stays `null` during initial state to keep error
+      // indicators quiet until the user interacts, but the button decision
+      // bypasses that gate.
+      element.disabled = !this._isFormValid();
     });
   }
 
@@ -452,9 +628,18 @@ class AuroForm extends i$3 {
       value: element.value || element.getAttribute('value'),
       validity: element.validity || null,
       required: element.hasAttribute('required'),
-      // element
+      disabled: element.hasAttribute('disabled'),
     };
 
+    // Capture the initial (default) value once per name. Use `in` rather
+    // than `??=` so a captured `null` (an empty field at first sight) is
+    // preserved across rename/slot/reset cycles — `??=` would treat the
+    // stored `null` as nullish and overwrite it with whatever value the
+    // field has now, defeating the `current !== initial` taint check.
+    if (!(targetName in this._initialValues)) {
+      this._initialValues[targetName] = this.formState[targetName].value;
+    }
+
     this._elements.push(element);
   }
 
@@ -491,6 +676,15 @@ class AuroForm extends i$3 {
       }
     });
 
+    // Drop captured initial values for fields that no longer exist in the form.
+    // Rename migration in _handleAttributeMutations has already re-keyed surviving
+    // fields, so anything left here is a field that was removed from the DOM.
+    for (const key of Object.keys(this._initialValues)) {
+      if (!(key in this.formState)) {
+        delete this._initialValues[key];
+      }
+    }
+
     this.dispatchEvent(new Event('change', {
       bubbles: true,
       composed: true,
@@ -535,16 +729,21 @@ class AuroForm extends i$3 {
    * @returns {Promise<void>}
    */
   async submit() {
-    // Force validation on ALL elements
-    this._elements.forEach((element) => {
-      element.validate(true);
-    });
+    // Force validation on all enabled elements. Disabled fields are skipped
+    // because disabled controls are not validated nor submitted per the HTML spec.
+    this._elements.
+      filter((element) => !this._isDisabled(element)).
+      forEach((element) => {
+        element.validate(true);
+      });
 
     // Wait for validation to complete and formState to update
     await this.updateComplete;
 
-    // Only dispatch submit event if form is valid
-    if (this.validity === 'valid') {
+    // Gate on raw constraint-validation rather than the public `validity`
+    // getter (which is `null` while in initial state). A pre-filled valid
+    // form should be submittable without a prior user edit.
+    if (this._isFormValid()) {
       this.dispatchEvent(new CustomEvent('submit', {
         bubbles: true,
         composed: true,
@@ -614,7 +813,14 @@ class AuroForm extends i$3 {
       this._addElementToState(event.target);
     }
 
-    this.formState[targetName].validity = event.detail.validity;
+    // `auroFormElement-validated` can fire with `detail.validity === undefined`
+    // when auro-input's updated() lifecycle invokes `validate()` mid-edit but
+    // the validation framework's gating conditions (not focused, touched-or-
+    // has-value) aren't met — the dispatch still fires, just with the current
+    // (untouched) validity. Normalize to `null` so the rest of the form treats
+    // "no known status" identically whether it came from `_addElementToState`
+    // at mount or from this passthrough mid-typing.
+    this.formState[targetName].validity = event.detail.validity ?? null;
     this._calculateValidity();
     this.requestUpdate('formState');
   }
@@ -626,6 +832,11 @@ class AuroForm extends i$3 {
    */
   handleKeyDown(event) {
     if (event.key === 'Enter' && this.isFormElement(event.target)) {
+      // Disabled controls do not submit a form natively.
+      if (this._isDisabled(event.target)) {
+        return;
+      }
+
       // Don't submit if it's a textarea (allow new lines)
       if (event.target.tagName.toLowerCase() === 'textarea' ||
           event.target.hasAttribute('textarea')) {
@@ -657,6 +868,121 @@ class AuroForm extends i$3 {
     });
   }
 
+  /**
+   * Handle batched MutationObserver records for `disabled` and `name`
+   * attribute changes on tracked form elements. A `name` change invalidates
+   * the formState keying — we resolve it by re-initializing state. A `disabled`
+   * change simply needs a re-render (so `value` / `validity` getters re-evaluate)
+   * and a refresh of the submit/reset button enablement.
+   * @param {MutationRecord[]} mutations - The batched mutation records.
+   * @returns {void}
+   * @private
+   */
+  _handleAttributeMutations(mutations) {
+    // Only mutations on tracked FORM elements matter here. The same observer
+    // also sees attribute changes on the submit/reset buttons (which this
+    // component itself toggles via `setDisabledStateOnButtons`); reacting to
+    // those would create an infinite observer/update loop.
+    const relevant = mutations.filter((mutation) => this.isFormElement(mutation.target));
+    if (relevant.length === 0) {
+      return;
+    }
+
+    const renameMutations = relevant.filter((mutation) => mutation.attributeName === 'name');
+    if (renameMutations.length > 0) {
+      // Migrate each renamed field's captured initial value from the old key
+      // to the new key before `initializeState()` re-runs `_addElementToState`.
+      // Without this, the new-name lookup in `_initialValues` would miss, the
+      // field's current (possibly user-edited) value would be captured as the
+      // new initial, and the form would incorrectly flip back to its initial
+      // state. The old key would also leak in `_initialValues` indefinitely.
+      renameMutations.forEach((mutation) => {
+        const oldName = mutation.oldValue;
+        const newName = mutation.target.getAttribute('name');
+        if (!oldName || oldName === newName) {
+          return;
+        }
+        if (newName === null) {
+          // `name` attribute removed — field will fall out of formState on re-init.
+          // Drop its captured initial so it doesn't leak in _initialValues.
+          delete this._initialValues[oldName];
+          return;
+        }
+        if (oldName in this._initialValues) {
+          this._initialValues[newName] = this._initialValues[oldName];
+          delete this._initialValues[oldName];
+        }
+      });
+      // initializeState() rebuilds formState from scratch (re-keying any
+      // renamed element) and also dispatches `change` + refreshes button state.
+      // We also re-run _attachEventListeners() because elements that previously
+      // had no `name` were skipped by queryAuroElements() (which selects
+      // `[name]`) and therefore never received input/validation/keydown
+      // listeners. Re-attaching is safe — the listener-removal step inside
+      // _attachEventListeners() prevents duplicates on already-wired elements.
+      this.initializeState();
+      this._attachEventListeners();
+      return;
+    }
+
+    // Refresh the cached `disabled` flag on each affected formState entry
+    // before the re-render, so getters that read `_isNameDisabled` see the
+    // current attribute state in the same tick.
+    relevant
+      .filter((mutation) => mutation.attributeName === 'disabled')
+      .forEach((mutation) => {
+        const name = mutation.target.getAttribute('name');
+        if (name && this.formState[name]) {
+          this.formState[name].disabled = mutation.target.hasAttribute('disabled');
+        }
+      });
+
+    this.requestUpdate('formState');
+    this.setDisabledStateOnButtons();
+  }
+
+  /**
+   * @returns {void}
+   */
+  connectedCallback() {
+    super.connectedCallback();
+
+    // One observer rooted at the host catches `disabled` / `name` changes on
+    // any tracked form element (light-DOM children, including those nested in
+    // wrapper elements). Cheaper than allocating an observer per element and
+    // resilient to runtime DOM mutations.
+    if (!this._attributeObserver) {
+      this._attributeObserver = new MutationObserver(this._handleAttributeMutations);
+    }
+
+    this._attributeObserver.observe(this, {
+      attributes: true,
+      subtree: true,
+      attributeOldValue: true,
+      attributeFilter: [
+        'disabled',
+        'name'
+      ]
+    });
+  }
+
+  /**
+   * @returns {void}
+   */
+  disconnectedCallback() {
+    // Disconnect everything we own to avoid leaking observers (and the strong
+    // refs they hold to DOM nodes) past the form's lifetime.
+    this._attributeObserver?.disconnect();
+    this.mutationObservers.forEach((observer) => observer.disconnect());
+    this.mutationObservers = [];
+    // Intentionally do NOT clear _initialValues here. Slot-moves trigger a
+    // disconnect/reconnect cycle; clearing would cause the next initializeState
+    // to capture the user's edited values as the new "initial" and silently
+    // flip the form back to its initial state.
+
+    super.disconnectedCallback();
+  }
+
   /**
    * @param {import('lit').PropertyValues} _changedProperties - Map of changed properties with their previous values.
    * @returns {void}
@@ -13043,7 +13369,7 @@ let AuroHelpText$8 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$8 = '202606171946';
+var formkitVersion$8 = '202606222118';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13058,7 +13384,7 @@ var formkitVersion$8 = '202606171946';
  * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
- * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot optionalLabel - Allows overriding the optional display text " (optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  * @csspart wrapper - Use for customizing the style of the root element
  * @csspart label - Use for customizing the style of the label element
@@ -27162,7 +27488,7 @@ let AuroBibtemplate$3 = class AuroBibtemplate extends i$3 {
   }
 };
 
-var formkitVersion$2$1 = '202606171946';
+var formkitVersion$2$1 = '202606222118';
 
 let l$1$2 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$2`${s$3(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1$2 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$1$2 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$1$3=i$6`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
 `,u$4$2=i$6`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -32673,7 +32999,7 @@ let AuroHelpText$2$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1$3 = '202606171946';
+var formkitVersion$1$3 = '202606222118';
 
 let AuroElement$2$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -46255,7 +46581,7 @@ let AuroHelpText$1$3 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$7 = '202606171946';
+var formkitVersion$7 = '202606222118';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -46270,7 +46596,7 @@ var formkitVersion$7 = '202606171946';
  * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
- * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot optionalLabel - Allows overriding the optional display text " (optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  * @csspart wrapper - Use for customizing the style of the root element
  * @csspart label - Use for customizing the style of the label element
@@ -47675,8 +48001,8 @@ const datepickerKeyboardStrategy = {
  * @slot label - Defines the label content for the entire datepicker when `layout="snowflake"`.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
- * @slot optionalFromLabel - Overrides the "(optional)" text rendered next to the first input's label when the datepicker is not `required`.
- * @slot optionalToLabel - Overrides the "(optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`.
+ * @slot optionalFromLabel - Overrides the " (optional)" text rendered next to the first input's label when the datepicker is not `required`.
+ * @slot optionalToLabel - Overrides the " (optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`.
  * @slot date_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
  * @slot popover_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell popover for the specified date.
  * @csspart dropdown - Use for customizing the style of the dropdown.
@@ -49669,7 +49995,7 @@ class AuroDatePicker extends AuroElement$5 {
       }
           <span slot="ariaLabel.clear">${this.runtimeUtils.getSlotText(this, 'ariaLabel.input.clear') || i18n$2(this.lang, 'clearInput')}</span>
           <span slot="label"><slot name="fromLabel"></slot></span>
-          <span slot="optionalLabel"><slot name="optionalFromLabel"> (optional)</slot></span>
+          <slot name="optionalFromLabel" slot="optionalLabel"> (optional)</slot>
         </${this.inputTag}>
       </div>
 
@@ -49714,7 +50040,7 @@ class AuroDatePicker extends AuroElement$5 {
         }
             <span slot="ariaLabel.clear">${this.runtimeUtils.getSlotText(this, 'ariaLabel.input.clear') || this.runtimeUtils.getSlotText(this, 'ariaLabel.input.clear') || i18n$2(this.lang, 'clearInput')}</span>
             <span slot="label"><slot name="toLabel"></slot></span>
-            <span slot="optionalLabel"><slot name="optionalToLabel"> (optional)</slot></span>
+            <slot name="optionalToLabel" slot="optionalLabel"> (optional)</slot>
           </${this.inputTag}>
         </div>
       ` : undefined}
@@ -50958,7 +51284,7 @@ let AuroHelpText$1$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1$2 = '202606171946';
+var formkitVersion$1$2 = '202606222118';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -55286,7 +55612,7 @@ let AuroHelpText$6 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$6 = '202606171946';
+var formkitVersion$6 = '202606222118';
 
 let AuroElement$1$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -59218,7 +59544,7 @@ let AuroHelpText$5 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$5 = '202606171946';
+var formkitVersion$5 = '202606222118';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -60968,7 +61294,7 @@ let AuroHelpText$4 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$4 = '202606171946';
+var formkitVersion$4 = '202606222118';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -66183,7 +66509,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202606171946';
+var formkitVersion$2 = '202606222118';
 
 let AuroElement$2$1 = class AuroElement extends i$3 {
   static get properties() {
@@ -79765,7 +80091,7 @@ let AuroHelpText$1$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1$1 = '202606171946';
+var formkitVersion$1$1 = '202606222118';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -79780,7 +80106,7 @@ var formkitVersion$1$1 = '202606171946';
  * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
- * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot optionalLabel - Allows overriding the optional display text " (optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  * @csspart wrapper - Use for customizing the style of the root element
  * @csspart label - Use for customizing the style of the label element
@@ -80886,7 +81212,7 @@ let AuroBibtemplate$1 = class AuroBibtemplate extends i$3 {
   }
 };
 
-var formkitVersion$3 = '202606171946';
+var formkitVersion$3 = '202606222118';
 
 var styleCss$1$3 = i$6`.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}`;
 
@@ -83650,8 +83976,8 @@ class AuroMenu extends AuroElement$2 {
         // Malformed JSON (e.g. a literal string that happens to start with "[") falls back
         // to a single-item array rather than throwing during render.
         try {
-          const parsed = JSON.parse(this.value);
-          return Array.isArray(parsed) ? parsed : [this.value];
+          // any valid JSON starting with `[` ALWAYS parses to an array
+          return JSON.parse(this.value);
         } catch {
           return [this.value];
         }
@@ -85650,6 +85976,21 @@ function getEnabledOptions(menu) {
   return (menu?.options || []).filter((option) => !option.disabled);
 }
 
+/**
+ * Returns the active (selectable + visible) options for type-ahead navigation.
+ *
+ * Uses auro-menuoption's `isActive` getter, which excludes disabled, hidden,
+ * and static options (e.g. `static nomatch` placeholders) so the type-ahead
+ * cursor never lands on a non-actionable item. Same empty-safe handling as
+ * `getEnabledOptions`.
+ *
+ * @param {HTMLElement | null | undefined} menu - The auro-menu element.
+ * @returns {Array<HTMLElement>} Active options, empty array when none.
+ */
+function getActiveOptions(menu) {
+  return (menu?.options || []).filter((option) => option.isActive);
+}
+
 /* eslint-disable new-cap */
 
 const selectKeyboardStrategy = {
@@ -85682,6 +86023,14 @@ const selectKeyboardStrategy = {
   },
 
   Escape(component, evt, ctx) {
+    // Always clear the type-ahead buffer — Escape is a universal cancel.
+    // Safe to call when the buffer is empty.
+    // eslint-disable-next-line no-underscore-dangle
+    if (typeof component._clearTypeaheadBuffer === 'function') {
+      // eslint-disable-next-line no-underscore-dangle
+      component._clearTypeaheadBuffer();
+    }
+
     if (!ctx.isExpanded) {
       return;
     }
@@ -85741,16 +86090,25 @@ const selectKeyboardStrategy = {
   },
 
   default(component, evt, ctx) {
-    component.updateActiveOptionBasedOnKey(evt.key);
+    // Space resolves to either typeahead-buffer extension or bib toggle
+    // depending on whether a type-ahead buffer is active. Mirrors native
+    // <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space
+    // is a search character (e.g. "San Francisco"); otherwise it toggles.
     if (evt.key === ' ') {
       evt.preventDefault();
       evt.stopPropagation();
+      if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) {
+        component.updateActiveOptionBasedOnKey(evt.key);
+        return;
+      }
       if (ctx.isExpanded) {
         component.dropdown.hide();
-        return;
+      } else {
+        component.dropdown.show();
       }
-      component.dropdown.show();
+      return;
     }
+    component.updateActiveOptionBasedOnKey(evt.key);
   },
 };
 
@@ -89662,7 +90020,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202606171946';
+var formkitVersion$1 = '202606222118';
 
 class AuroElement extends i$3 {
   static get properties() {
@@ -91675,7 +92033,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606222118';
 
 var styleCss = i$6`.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);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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}`;
 
@@ -91780,6 +92138,16 @@ class AuroSelect extends AuroElement$1 {
      * @private
      */
     this.hasDisplayValueContent = false;
+
+    /**
+     * @private
+     */
+    this.typeaheadBuffer = '';
+
+    /**
+     * @private
+     */
+    this._typeaheadTimeout = null;
   }
 
   /**
@@ -91792,6 +92160,7 @@ class AuroSelect extends AuroElement$1 {
     this.fullscreenBreakpoint = 'sm';
     this.onDark = false;
     this.isPopoverVisible = false;
+    this.typeaheadTimeoutMs = 500;
 
     // Layout Config
     this.layout = 'classic';
@@ -92095,6 +92464,16 @@ class AuroSelect extends AuroElement$1 {
         attribute: false
       },
 
+      /**
+       * Milliseconds of keyboard inactivity before the type-ahead buffer resets.
+       * Increase for users who type slowly.
+       * @default 500
+       */
+      typeaheadTimeoutMs: {
+        type: Number,
+        reflect: true
+      },
+
       /**
        * Specifies the `validityState` this element is in.
        */
@@ -92534,6 +92913,7 @@ class AuroSelect extends AuroElement$1 {
     this.addEventListener('blur', () => {
       this.validate();
       this.hasFocus = false;
+      this._clearTypeaheadBuffer();
     });
   }
 
@@ -92547,41 +92927,89 @@ class AuroSelect extends AuroElement$1 {
     }
   }
 
+  /**
+   * Returns the lowercase, trimmed text content of a menu option.
+   * @private
+   * @param {HTMLElement} option - The menu option element.
+   * @returns {string}
+   */
+  _getOptionDisplayText(option) {
+    return (option.textContent || '').trim().toLowerCase();
+  }
+
+  /**
+   * Empties the type-ahead buffer and cancels any pending reset timeout.
+   * Called when focus leaves the component, when Escape closes the bib, and on disconnect
+   * so a stale buffer never bridges into a fresh interaction.
+   * @private
+   */
+  _clearTypeaheadBuffer() {
+    if (this._typeaheadTimeout) {
+      clearTimeout(this._typeaheadTimeout);
+      this._typeaheadTimeout = null;
+    }
+    this.typeaheadBuffer = '';
+  }
+
   /**
    * Updates the active option in the menu based on keyboard input.
+   *
+   * Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
+   * keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
+   * A multi-character buffer matches the first option whose displayed text starts
+   * with the buffer; repeating a single character cycles through options that start
+   * with that character.
    * @private
    * @param {string} _key - The key pressed by the user.
    * @returns {void}
    */
   updateActiveOptionBasedOnKey(_key) {
+    // Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
+    if (typeof _key !== 'string' || _key.length !== 1) {
+      return;
+    }
 
-    // Get a lowercase version of the key pressed
-    const key = _key.toLowerCase();
-
-    // Calculate how many times the same letter has been pressed
-    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+    // No selectable options to match against — clear any stale buffer/timer so
+    // Space stays a bib toggle and the next keystroke after fresh options load
+    // starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
+    // options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
+    // the buffer.
+    const options = getActiveOptions(this.menu);
+    if (!options.length) {
+      this._clearTypeaheadBuffer();
+      return;
+    }
 
-    // Set last letter for tracking
-    this.lastLetter = key;
+    const key = _key.toLowerCase();
 
-    // Get all the options that start with the last letter pressed
-    const letterOptions = this.menu.options.filter((option) => {
-      const optionText = option.value || '';
-      return optionText.toLowerCase().startsWith(this.lastLetter);
-    });
+    // Reset the buffer after a period of inactivity
+    if (this._typeaheadTimeout) {
+      clearTimeout(this._typeaheadTimeout);
+    }
+    this._typeaheadTimeout = setTimeout(() => {
+      this._clearTypeaheadBuffer();
+    }, this.typeaheadTimeoutMs);
 
-    // If we have options that match the letter pressed
-    if (letterOptions.length) {
+    this.typeaheadBuffer += key;
 
-      // Show the dropdown if it is not already visible
-      this.dropdown.show();
+    const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
 
-      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
-      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+    let match = null;
+    if (isRepeatedChar) {
+      const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
+      if (matches.length) {
+        const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
+        match = matches[cycleIndex];
+      }
+    } else {
+      match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
+    }
 
-      // Select the new option in the menu
-      const newOption = letterOptions[index];
-      this.menu.updateActiveOption(newOption);
+    if (match) {
+      if (!this.dropdown.isPopoverVisible) {
+        this.dropdown.show();
+      }
+      this.menu.updateActiveOption(match);
     }
   }
 
@@ -92695,6 +93123,11 @@ class AuroSelect extends AuroElement$1 {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearTypeaheadBuffer();
+  }
+
   // lifecycle runs only after the element's DOM has been updated the first time
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
@@ -93228,7 +93661,79 @@ AuroMenu.register();
 AuroMenuOption.register();
 AuroSelect.register();
 
+async function disabledExample() {
+  await customElements.whenDefined('auro-form');
+
+  const form = document.querySelector('#disabledExampleForm');
+  const output = document.querySelector('#disabledExampleOutput');
+
+  if (!form || !output) {
+    throw new Error('disabledExample: required nodes not yet rendered');
+  }
+
+  await form.updateComplete;
+
+  form.addEventListener('submit', (event) => {
+    output.textContent = JSON.stringify(event.detail.value, null, 2);
+  });
+}
+
+async function disableAfterEditExample() {
+  await customElements.whenDefined('auro-form');
+
+  const form = document.querySelector('#disableAfterEditForm');
+  const output = document.querySelector('#disableAfterEditOutput');
+  const field = document.querySelector('#dae-field');
+  const toggle = document.querySelector('#dae-toggle');
+
+  if (!form || !output || !field || !toggle) {
+    throw new Error('disableAfterEditExample: required nodes not yet rendered');
+  }
+
+  await form.updateComplete;
+
+  toggle.addEventListener('click', () => {
+    const willDisable = !field.hasAttribute('disabled');
+    if (willDisable) {
+      field.setAttribute('disabled', '');
+      toggle.textContent = 'Enable field';
+    } else {
+      field.removeAttribute('disabled');
+      toggle.textContent = 'Disable field';
+    }
+  });
+
+  form.addEventListener('submit', (event) => {
+    output.textContent = [
+      'submit payload:',
+      JSON.stringify(event.detail.value, null, 2),
+      '',
+      `form.isInitialState: ${form.isInitialState}`,
+    ].join('\n');
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+
 AuroInput$2.register('input-two');
 AuroDatePicker.register();
 AuroForm.register();
 AuroForm.register('custom-form');
+
+async function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    await disabledExample();
+    await disableAfterEditExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };