@aurodesignsystem/auro-formkit 6.0.1 → 6.0.3-rc-1579.1

package/CHANGELOG.md

@@ -1,12 +1,15 @@
-## [6.0.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v6.0.0...v6.0.1) (2026-07-16)
+## [6.0.3-rc-1579.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v6.0.2...v6.0.3-rc-1579.1) (2026-08-11)
 
 
 ### Bug Fixes
 
-* address feedback PR Review: [#1554](https://github.com/AlaskaAirlines/auro-formkit/issues/1554) ([0f50c75](https://github.com/AlaskaAirlines/auro-formkit/commit/0f50c75a3fcd94326a22c883447212f83e234ef7))
-* address feedback PR Review: [#1554](https://github.com/AlaskaAirlines/auro-formkit/issues/1554) ([aef32a1](https://github.com/AlaskaAirlines/auro-formkit/commit/aef32a15f1b03cfb527002df3b8e2772d416ccfe))
-* address focus handling and displayValue issues in combobox and dropdown components Review of: [#1554](https://github.com/AlaskaAirlines/auro-formkit/issues/1554) ([6ea1b78](https://github.com/AlaskaAirlines/auro-formkit/commit/6ea1b78a7fccd5f5f99731cbd833fae2f66dea16))
-* **combobox:** address displayValue synthesis and focus handling issues AB[#1598671](https://github.com/AlaskaAirlines/auro-formkit/issues/1598671) ([ca1ac8d](https://github.com/AlaskaAirlines/auro-formkit/commit/ca1ac8d82dbc4366c7a9609acc863e5dffce4d68))
+* **dropdown:** align js example system AB[#1611713](https://github.com/AlaskaAirlines/auro-formkit/issues/1611713) ([2e06af7](https://github.com/AlaskaAirlines/auro-formkit/commit/2e06af7babdf13323fd71d67380916dca0172af2))
+* **dropdown:** re-configure floater on reconnect to restore trigger event listeners AB[#1611656](https://github.com/AlaskaAirlines/auro-formkit/issues/1611656) ([e782512](https://github.com/AlaskaAirlines/auro-formkit/commit/e78251238cf4d751c19585acf94b71d84c590d6a))
+* ellipses dp value at small widths AB[#1602084](https://github.com/AlaskaAirlines/auro-formkit/issues/1602084) ([2fe60e2](https://github.com/AlaskaAirlines/auro-formkit/commit/2fe60e25d415053805abae83e94c1002b77f30fc))
+* ensure range inputs maintain equal size with long labels AB[#1494482](https://github.com/AlaskaAirlines/auro-formkit/issues/1494482) ([146a039](https://github.com/AlaskaAirlines/auro-formkit/commit/146a0398fb491ecd857d496ff7ec89e5977fc012))
+* **menu:** distinguish menu options that share a value AB[#1602086](https://github.com/AlaskaAirlines/auro-formkit/issues/1602086) ([cc880c9](https://github.com/AlaskaAirlines/auro-formkit/commit/cc880c9c6254bcec133e54990c85839bf3428e68))
+* **menu:** re-select highlighted option via Enter after emptying selection AB[#1606433](https://github.com/AlaskaAirlines/auro-formkit/issues/1606433) ([50b3af2](https://github.com/AlaskaAirlines/auro-formkit/commit/50b3af20b08fe4a1cf46ed849ea14d7c7df1fac3))
+* stringfy counter's aria-valuetext AB[#1443553](https://github.com/AlaskaAirlines/auro-formkit/issues/1443553) ([f8d33f9](https://github.com/AlaskaAirlines/auro-formkit/commit/f8d33f9db67f55f1e45d4d45d442a21c94e6127b))
 
 # Changelog
 

package/components/bibtemplate/dist/index.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
+var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem))}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 

package/components/bibtemplate/dist/registered.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
+var styleCss = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem))}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 

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

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607161943';
+var formkitVersion = '202608111728';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607161943';
+var formkitVersion = '202608111728';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1691,6 +1691,14 @@ class AuroCheckboxGroup extends i$2 {
   }
 }
 
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 AuroCheckbox.register(); // registering to `auro-checkbox`
 AuroCheckboxGroup.register(); // registering to `auro-checkbox-group`
 
@@ -1698,6 +1706,17 @@ AuroCheckbox.register('custom-checkbox');
 AuroCheckboxGroup.register('custom-checkbox-group');
 
 function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    resetStateExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
 }
 
 export { initExamples };

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

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607161943';
+var formkitVersion = '202608111728';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202607161943';
+var formkitVersion = '202608111728';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202607161943';
+var formkitVersion = '202608111728';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/demo/customize.html

@@ -41,6 +41,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
     <script type="module" data-demo-script="true">
       import { renderPage } from './demo-support.min.js';
       await renderPage('./customize.md');

package/components/combobox/demo/customize.md

@@ -28,6 +28,8 @@
 <auro-anchorlink fluid href="#customValidation" class="level2 body-xs">Custom Validation</auro-anchorlink>
 <auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validation</auro-anchorlink>
 <auro-anchorlink fluid href="#dynamicMenu" class="level2 body-xs">Dynamic Menu</auro-anchorlink>
+<auro-anchorlink fluid href="#loading" class="level2 body-xs">Loading</auro-anchorlink>
+<auro-anchorlink fluid href="#nonUniqueValues" class="level2 body-xs">Non-Unique Option Values</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -1267,6 +1269,73 @@
 &lt;/auro-button&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="loading">Loading</auro-header>
+<p>Use the <code>loading</code> attribute on <code>auro-menu</code> to display a loading state while menu options are being fetched. Define the <code>loadingIcon</code> and <code>loadingText</code> slots inside the menu to provide visual feedback during the loading state.</p>
+<p>In this example, the combobox will load for 5 seconds before displaying the options. </p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
+<!-- The below content is automatically added from ./../apiExamples/loading.html -->
+<auro-combobox id="loadingExample">
+<span slot="bib.fullscreen.headline">Loading Combobox Header</span>
+<span slot="label">Please select a preference</span>
+<auro-menu id="loadingExampleComboboxMenu">
+<auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+</auro-menu>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox id="loadingExample"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Loading Combobox Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Please select a preference&lt;/span&gt;
+  &lt;auro-menu id="loadingExampleComboboxMenu"&gt;
+    &lt;auro-loader slot="loadingIcon" orbit xs&gt;&lt;/auro-loader&gt;&lt;span slot="loadingText"&gt;Loading...&lt;/span&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="nonUniqueValues">Non-Unique Option Values</auro-header>
+<p>Two or more <code>auro-menuoption</code> elements may share the same <code>value</code>. This is common when the <code>value</code> represents a coarser grouping than the option label &mdash; for example, several airports that all serve the same city. When the user filters the list and selects one of several options that share a <code>value</code>, the combobox resolves to the exact option chosen, so the correct label is displayed even though the underlying <code>value</code> is duplicated.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/duplicate-values.html) -->
+<!-- The below content is automatically added from ./../apiExamples/duplicate-values.html -->
+<auro-combobox>
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<span slot="bib.fullscreen.headline">Choose an airport</span>
+<span slot="label">Departure airport</span>
+<auro-menu>
+<auro-menuoption value="seattle" suggest="seattle sea seatac tacoma">Seattle&ndash;Tacoma International (SEA)</auro-menuoption>
+<auro-menuoption value="seattle" suggest="seattle pae paine field everett">Seattle Paine Field (PAE)</auro-menuoption>
+<auro-menuoption value="portland" suggest="portland pdx oregon">Portland International (PDX)</auro-menuoption>
+<auro-menuoption value="spokane" suggest="spokane geg washington">Spokane International (GEG)</auro-menuoption>
+<auro-menuoption static nomatch>No matching airport</auro-menuoption>
+</auro-menu>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/duplicate-values.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/duplicate-values.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
+  &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Choose an airport&lt;/span&gt;
+  &lt;span slot="label"&gt;Departure airport&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="seattle" suggest="seattle sea seatac tacoma"&gt;Seattle&amp;ndash;Tacoma International (SEA)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="seattle" suggest="seattle pae paine field everett"&gt;Seattle Paine Field (PAE)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="portland" suggest="portland pdx oregon"&gt;Portland International (PDX)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="spokane" suggest="spokane geg washington"&gt;Spokane International (GEG)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching airport&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 </section>
 </div>
 </div>