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

package/components/input/dist/index.js

@@ -10331,6 +10331,7 @@ class AuroInputUtilities {
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
       return undefined;
     }
 
@@ -11141,10 +11142,6 @@ class BaseInput extends AuroElement {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
 
-    // add attribute for query selectors when auro-input is registered under a custom name
-    if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
-      this.setAttribute('auro-input', '');
-    }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     // use validity message override if declared when initializing the component
@@ -11315,14 +11312,14 @@ class BaseInput extends AuroElement {
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        if (this.maskInstance && this.type === 'credit-card') {
+        if (this.maskInstance && this.type !== 'date') {
           // Route through the mask so its _value and el.value stay in lock-step
           // (set value calls updateControl which writes el.value = displayValue).
           // Writing el.value directly leaves the mask thinking displayValue is
-          // stale; _saveSelection on the next focus/click then warns. Scoped to
-          // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
-          // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
-          // and flip validity from patternMismatch to tooShort.
+          // stale; _saveSelection on the next focus/click then warns. Date is
+          // excluded because its formattedValue can be raw ISO when the calendar
+          // is invalid, and re-masking through mm/dd/yyyy would truncate it and
+          // flip validity from patternMismatch to tooShort.
           this.maskInstance.value = formattedValue || '';
         } else if (formattedValue) {
           this.inputElement.value = formattedValue;
@@ -11433,31 +11430,33 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   configureAutoFormatting() {
-    // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
-    // by _configuringMask above) could otherwise trigger handleInput →
-    // processCreditCard → configureAutoFormatting before the outer call's
-    // set value has finished its alignCursor pass.
+    // _configuringMask gates two things: external re-entry into this method
+    // while setup is mid-flight (from property changes that call back here),
+    // and the accept/complete listeners below — both need to ignore the mask
+    // events fired by our own value-restore step.
     if (this._configuringMask) return;
     this._configuringMask = true;
     try {
+      // Destroy any prior mask so IMask can attach fresh under the new format.
       if (this.maskInstance) {
         this.maskInstance.destroy();
       }
 
-      // Pass new format to util
       this.util.updateFormat(this.format);
 
       const maskOptions = this.util.getMaskOptions(this.type, this.format);
 
       if (this.inputElement && maskOptions.mask) {
-
-        // Stash and clear any existing value before IMask init.
-        // IMask's constructor processes the current input value which requires
-        // selection state — clearing first avoids that scenario entirely.
-        // When the format changes (e.g. locale switch) and we have a valid ISO
-        // model value, compute the display string for the NEW format instead of
-        // re-using the old display string, which may be invalid in the new mask.
+        // Capture the current display so it can be re-applied after IMask
+        // attaches. The restore at the bottom goes through maskInstance.value
+        // (not inputElement.value directly) so the mask's internal state and
+        // the input's displayed text stay in lock-step.
         let existingValue = this.inputElement.value;
+
+        // Format-change case (e.g. locale switch): existingValue is the OLD
+        // mask's display string and may not parse under the new mask. When
+        // we have a valid date model, rebuild the display from valueObject
+        // (the canonical source) using the new mask's format function.
         if (
           this.util.isFullDateFormat(this.type, this.format) &&
           this.value &&
@@ -11469,15 +11468,18 @@ class BaseInput extends AuroElement {
           existingValue = maskOptions.format(this.valueObject);
         }
 
+        // Clear before IMask attaches so the constructor seeds an empty
+        // internal value. Otherwise IMask reads the stale unmasked string
+        // and emits a spurious 'accept' before the restore below runs.
         this.skipNextProgrammaticInputEvent = true;
         this.inputElement.value = '';
 
         this.maskInstance = IMask(this.inputElement, maskOptions);
 
+        // Mask fires 'accept' on every value change, including the restore
+        // step below. Skip events fired during configureAutoFormatting so
+        // we don't overwrite a value the parent just pushed.
         this.maskInstance.on('accept', () => {
-          // Suppress propagation during configureAutoFormatting's own value-restoration
-          // (line below) — the mask emits 'accept' on every value-set, including ours,
-          // and we don't want to overwrite a value the parent just pushed.
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
           if (this.type === "date") {
@@ -11485,6 +11487,8 @@ class BaseInput extends AuroElement {
           }
         });
 
+        // Mask fires 'complete' on the restore step below for any value that
+        // happens to be a complete match. Same setup-suppression as 'accept'.
         this.maskInstance.on('complete', () => {
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
@@ -11493,7 +11497,9 @@ class BaseInput extends AuroElement {
           }
         });
 
-        // Restore the stashed value through IMask so it's properly masked
+        // Write existingValue through the mask (not the input directly) so
+        // the mask reformats it under the new rules and keeps its internal
+        // _value aligned with the input's displayed text.
         if (existingValue) {
           this.maskInstance.value = existingValue;
         }
@@ -12199,7 +12205,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/dist/registered.js

@@ -10331,6 +10331,7 @@ class AuroInputUtilities {
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
       return undefined;
     }
 
@@ -11141,10 +11142,6 @@ class BaseInput extends AuroElement {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
 
-    // add attribute for query selectors when auro-input is registered under a custom name
-    if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
-      this.setAttribute('auro-input', '');
-    }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     // use validity message override if declared when initializing the component
@@ -11315,14 +11312,14 @@ class BaseInput extends AuroElement {
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        if (this.maskInstance && this.type === 'credit-card') {
+        if (this.maskInstance && this.type !== 'date') {
           // Route through the mask so its _value and el.value stay in lock-step
           // (set value calls updateControl which writes el.value = displayValue).
           // Writing el.value directly leaves the mask thinking displayValue is
-          // stale; _saveSelection on the next focus/click then warns. Scoped to
-          // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
-          // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
-          // and flip validity from patternMismatch to tooShort.
+          // stale; _saveSelection on the next focus/click then warns. Date is
+          // excluded because its formattedValue can be raw ISO when the calendar
+          // is invalid, and re-masking through mm/dd/yyyy would truncate it and
+          // flip validity from patternMismatch to tooShort.
           this.maskInstance.value = formattedValue || '';
         } else if (formattedValue) {
           this.inputElement.value = formattedValue;
@@ -11433,31 +11430,33 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   configureAutoFormatting() {
-    // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
-    // by _configuringMask above) could otherwise trigger handleInput →
-    // processCreditCard → configureAutoFormatting before the outer call's
-    // set value has finished its alignCursor pass.
+    // _configuringMask gates two things: external re-entry into this method
+    // while setup is mid-flight (from property changes that call back here),
+    // and the accept/complete listeners below — both need to ignore the mask
+    // events fired by our own value-restore step.
     if (this._configuringMask) return;
     this._configuringMask = true;
     try {
+      // Destroy any prior mask so IMask can attach fresh under the new format.
       if (this.maskInstance) {
         this.maskInstance.destroy();
       }
 
-      // Pass new format to util
       this.util.updateFormat(this.format);
 
       const maskOptions = this.util.getMaskOptions(this.type, this.format);
 
       if (this.inputElement && maskOptions.mask) {
-
-        // Stash and clear any existing value before IMask init.
-        // IMask's constructor processes the current input value which requires
-        // selection state — clearing first avoids that scenario entirely.
-        // When the format changes (e.g. locale switch) and we have a valid ISO
-        // model value, compute the display string for the NEW format instead of
-        // re-using the old display string, which may be invalid in the new mask.
+        // Capture the current display so it can be re-applied after IMask
+        // attaches. The restore at the bottom goes through maskInstance.value
+        // (not inputElement.value directly) so the mask's internal state and
+        // the input's displayed text stay in lock-step.
         let existingValue = this.inputElement.value;
+
+        // Format-change case (e.g. locale switch): existingValue is the OLD
+        // mask's display string and may not parse under the new mask. When
+        // we have a valid date model, rebuild the display from valueObject
+        // (the canonical source) using the new mask's format function.
         if (
           this.util.isFullDateFormat(this.type, this.format) &&
           this.value &&
@@ -11469,15 +11468,18 @@ class BaseInput extends AuroElement {
           existingValue = maskOptions.format(this.valueObject);
         }
 
+        // Clear before IMask attaches so the constructor seeds an empty
+        // internal value. Otherwise IMask reads the stale unmasked string
+        // and emits a spurious 'accept' before the restore below runs.
         this.skipNextProgrammaticInputEvent = true;
         this.inputElement.value = '';
 
         this.maskInstance = IMask(this.inputElement, maskOptions);
 
+        // Mask fires 'accept' on every value change, including the restore
+        // step below. Skip events fired during configureAutoFormatting so
+        // we don't overwrite a value the parent just pushed.
         this.maskInstance.on('accept', () => {
-          // Suppress propagation during configureAutoFormatting's own value-restoration
-          // (line below) — the mask emits 'accept' on every value-set, including ours,
-          // and we don't want to overwrite a value the parent just pushed.
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
           if (this.type === "date") {
@@ -11485,6 +11487,8 @@ class BaseInput extends AuroElement {
           }
         });
 
+        // Mask fires 'complete' on the restore step below for any value that
+        // happens to be a complete match. Same setup-suppression as 'accept'.
         this.maskInstance.on('complete', () => {
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
@@ -11493,7 +11497,9 @@ class BaseInput extends AuroElement {
           }
         });
 
-        // Restore the stashed value through IMask so it's properly masked
+        // Write existingValue through the mask (not the input directly) so
+        // the mask reformats it under the new rules and keeps its internal
+        // _value aligned with the input's displayed text.
         if (existingValue) {
           this.maskInstance.value = existingValue;
         }
@@ -12199,7 +12205,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/demo/getting-started.min.js

@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/index.js

@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/registered.js

@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606171946';
+var formkitVersion = '202606190840';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/select/demo/api.md

@@ -38,6 +38,7 @@ The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create
 | `shape`                         | `shape`                         | `'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'snowflake'` |                  | Determines the shape of the dropdown bib.        |
 | `shift`                         | `shift`                         | `boolean`                                        | false            | If set, the dropdown will shift its position to avoid being cut off by the viewport. |
 | `size`                          | `size`                          | `'lg' \| 'xl'`                                   |                  | Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`. |
+| `typeaheadTimeoutMs`            | `typeaheadTimeoutMs`            | `number`                                         | "500"            | Milliseconds of keyboard inactivity before the type-ahead buffer resets.<br />Increase for users who type slowly. |
 | `validity`                      | `validity`                      | `string`                                         |                  | Specifies the `validityState` this element is in. |
 | `value`                         | `value`                         | `string`                                         |                  | Value selected for the component.                |
 

package/components/select/demo/customize.md

@@ -22,6 +22,7 @@
 <auro-anchorlink fluid href="#cssParts" class="level2 body-xs">CSS Shadow Parts</auro-anchorlink>
 <auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
 <auro-anchorlink fluid href="#autoComplete" class="level2 body-xs">Autocomplete</auro-anchorlink>
+<auro-anchorlink fluid href="#typeAhead" class="level2 body-xs">Type-Ahead</auro-anchorlink>
 <auro-anchorlink fluid href="#disableComponent" class="level2 body-xs">Disable Component</auro-anchorlink>
 <auro-anchorlink fluid href="#disableOptions" class="level2 body-xs">Disable Option(s)</auro-anchorlink>
 <auro-anchorlink fluid href="#requireSelection" class="level2 body-xs">Require Selection</auro-anchorlink>
@@ -749,6 +750,76 @@
 &lt;/form&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="typeAhead">Type-Ahead</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/typeahead.md) -->
+<!-- The below content is automatically added from ./../docs/partials/customize/typeahead.md -->
+<p>Type-ahead lets a guest jump to an option by typing. As keys are pressed, the active option advances to the first enabled option whose <strong>displayed text</strong> starts with the buffered keystrokes — following the <auro-hyperlink href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/">WAI-ARIA Listbox pattern</auro-hyperlink>, and mirroring native HTML <code>&lt;select&gt;</code> behavior. Matching uses the rendered text rather than the <code>value</code> attribute.</p>
+<p>The <code>typeaheadTimeoutMs</code> attribute (default <code>500</code>) controls how long the buffer persists between keystrokes. Repeating the same character cycles through every enabled option starting with it; disabled options are skipped.</p>
+<div class="note">
+<strong>Note:</strong> The <kbd>Space</kbd> key is context-sensitive. When the type-ahead buffer is empty it toggles the bib open or closed, matching the rest of <code>&lt;auro-select&gt;</code>. When the buffer is active it extends the buffer instead, so multi-word options such as "San Francisco" can be matched by typing <kbd>s</kbd>, <kbd>a</kbd>, <kbd>n</kbd>, <kbd>Space</kbd>, <kbd>f</kbd>.
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typeahead.html) -->
+<!-- The below content is automatically added from ./../apiExamples/typeahead.html -->
+<auro-select>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Airport</span>
+<span slot="label">Destination airport</span>
+<auro-menu>
+<auro-menuoption value="ANC">Anchorage</auro-menuoption>
+<auro-menuoption value="ATL">Atlanta</auro-menuoption>
+<auro-menuoption value="AUS">Austin</auro-menuoption>
+<auro-menuoption value="BOS">Boston</auro-menuoption>
+<auro-menuoption value="DEN">Denver</auro-menuoption>
+<auro-menuoption value="DFW" disabled>Dallas/Fort Worth</auro-menuoption>
+<auro-menuoption value="DTW">Detroit</auro-menuoption>
+<auro-menuoption value="HNL">Honolulu</auro-menuoption>
+<auro-menuoption value="LAX">Los Angeles</auro-menuoption>
+<auro-menuoption value="MIA">Miami</auro-menuoption>
+<auro-menuoption value="ORD">Chicago</auro-menuoption>
+<auro-menuoption value="PDX">Portland</auro-menuoption>
+<auro-menuoption value="PHX">Phoenix</auro-menuoption>
+<auro-menuoption value="SAN">San Diego</auro-menuoption>
+<auro-menuoption value="SEA">Seattle</auro-menuoption>
+<auro-menuoption value="SFO">San Francisco</auro-menuoption>
+<auro-menuoption value="SJC" disabled>San Jose</auro-menuoption>
+<auro-menuoption value="SLC">Salt Lake City</auro-menuoption>
+</auro-menu>
+</auro-select>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/typeahead.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/typeahead.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-select&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Airport&lt;/span&gt;
+  &lt;span slot="label"&gt;Destination airport&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="ANC"&gt;Anchorage&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="ATL"&gt;Atlanta&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="AUS"&gt;Austin&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="BOS"&gt;Boston&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="DEN"&gt;Denver&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="DFW" disabled&gt;Dallas/Fort Worth&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="DTW"&gt;Detroit&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="HNL"&gt;Honolulu&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="LAX"&gt;Los Angeles&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="MIA"&gt;Miami&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="ORD"&gt;Chicago&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="PDX"&gt;Portland&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="PHX"&gt;Phoenix&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="SAN"&gt;San Diego&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="SEA"&gt;Seattle&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="SFO"&gt;San Francisco&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="SJC" disabled&gt;San Jose&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="SLC"&gt;Salt Lake City&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-select&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 <auro-header level="3" id="disableComponent">Disable Component</auro-header>
 <p>The entire component may be disabled. When disabled, the component will render to reflect the state, may not receive focus nor react to any key or pointer events.</p>
 <p>When the component is disabled and part of a form, the components value is still included in the form submission.</p>