@aurodesignsystem/auro-formkit 5.8.1 → 5.9.0

package/components/datepicker/dist/registered.js

@@ -11343,7 +11343,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion$2 = '202511110110';
+var formkitVersion$2 = '202511191711';
 
 let l$1 = 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=literal`${unsafeStatic(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = 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}"]`);return (o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}};let h$1 = 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=css`: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]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--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=css`.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}: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:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs) * 6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:5.5rem}: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}}
@@ -14884,7 +14884,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202511110110';
+var formkitVersion$1 = '202511191711';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -21572,6 +21572,7 @@ class BaseInput extends AuroElement$1 {
           const inputEvent = new InputEvent('input', {
             bubbles: true,
             composed: true,
+            cancelable: false
           });
           inputEvent.isProgrammatic = true;
           this.dispatchEvent(inputEvent);
@@ -22501,7 +22502,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 // 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/dropdown/demo/api.min.js

@@ -3207,7 +3207,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 class AuroElement extends i {
   static get properties() {

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

@@ -3182,7 +3182,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 class AuroElement extends i {
   static get properties() {

package/components/dropdown/dist/index.js

@@ -3118,7 +3118,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 class AuroElement extends LitElement {
   static get properties() {

package/components/dropdown/dist/registered.js

@@ -3118,7 +3118,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 class AuroElement extends LitElement {
   static get properties() {

package/components/input/demo/api.min.js

@@ -5800,6 +5800,7 @@ class BaseInput extends AuroElement {
           const inputEvent = new InputEvent('input', {
             bubbles: true,
             composed: true,
+            cancelable: false
           });
           inputEvent.isProgrammatic = true;
           this.dispatchEvent(inputEvent);
@@ -6729,7 +6730,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 // 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/demo/index.min.js

@@ -5725,6 +5725,7 @@ class BaseInput extends AuroElement {
           const inputEvent = new InputEvent('input', {
             bubbles: true,
             composed: true,
+            cancelable: false
           });
           inputEvent.isProgrammatic = true;
           this.dispatchEvent(inputEvent);
@@ -6654,7 +6655,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 // 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/index.js

@@ -5649,6 +5649,7 @@ class BaseInput extends AuroElement {
           const inputEvent = new InputEvent('input', {
             bubbles: true,
             composed: true,
+            cancelable: false
           });
           inputEvent.isProgrammatic = true;
           this.dispatchEvent(inputEvent);
@@ -6578,7 +6579,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 // 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

@@ -5649,6 +5649,7 @@ class BaseInput extends AuroElement {
           const inputEvent = new InputEvent('input', {
             bubbles: true,
             composed: true,
+            cancelable: false
           });
           inputEvent.isProgrammatic = true;
           this.dispatchEvent(inputEvent);
@@ -6578,7 +6579,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202511110110';
+var formkitVersion = '202511191711';
 
 // 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/menu/demo/api.js

@@ -4,6 +4,8 @@ import { auroMenuResetExample } from '../apiExamples/reset';
 import { auroMenuMatchWordExample } from '../apiExamples/matchWord';
 import { auroMenuCustomEventExample } from '../apiExamples/customEvent';
 import { auroMenuLoadingExample } from '../apiExamples/loading';
+import { initSelectAllMatchingOptionsExample } from '../apiExamples/selectAllMatchingOptions.js';
+import { initKeysExample } from '../apiExamples/keys.js';
 import '../src/registered.js';
 
 export function initExamples(initCount) {
@@ -15,6 +17,8 @@ export function initExamples(initCount) {
     auroMenuMatchWordExample();
     auroMenuCustomEventExample();
     auroMenuLoadingExample();
+    initSelectAllMatchingOptionsExample();
+    initKeysExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/menu/demo/api.md

@@ -7,25 +7,32 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Properties
 
-| Property                | Attribute        | Type                              | Default     | Description                                      |
-|-------------------------|------------------|-----------------------------------|-------------|--------------------------------------------------|
-| [disabled](#disabled)              | `disabled`       | `boolean`                         |             | When true, the entire menu and all options are disabled; |
-| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `boolean`                         |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
-| [layout](#layout)                |                  | `string`                          |             |                                                  |
-| [loading](#loading)               | `loading`        | `boolean`                         | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| [matchWord](#matchWord)             | `matchword`      | `string`                          | "undefined" | Specifies a string used to highlight matched string parts in options. |
-| [multiSelect](#multiSelect)           | `multiselect`    | `boolean`                         | false       | When true, the selected option can be multiple options. |
-| [noCheckmark](#noCheckmark)           | `nocheckmark`    | `boolean`                         | false       | When true, selected option will not show the checkmark. |
-| [optionActive](#optionActive)          | `optionactive`   | `object`                          | "undefined" | Specifies the current active menuOption.         |
-| [optionSelected](#optionSelected)        | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
-| [value](#value)                 | `value`          | `string`                          | "undefined" | Value selected for the component.                |
+| Property                   | Attribute                  | Modifiers | Type                              | Default     | Description                                      |
+|----------------------------|----------------------------|-----------|-----------------------------------|-------------|--------------------------------------------------|
+| [allowDeselect](#allowDeselect)            | `allowDeselect`            |           | `boolean`                         | false       | Allows deselecting an already selected option when clicked again in single-select mode. |
+| [disabled](#disabled)                 | `disabled`                 |           | `boolean`                         |             | When true, the entire menu and all options are disabled; |
+| [hasLoadingPlaceholder](#hasLoadingPlaceholder)    |                            |           | `boolean`                         |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
+| [index](#index)                    |                            |           | `number`                          |             |                                                  |
+| [items](#items)                    |                            | readonly  | `HTMLElement[]`                   |             |                                                  |
+| [layout](#layout)                   |                            |           | `string`                          |             |                                                  |
+| [loading](#loading)                  | `loading`                  |           | `boolean`                         | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| [matchWord](#matchWord)                | `matchword`                |           | `string`                          | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| [multiSelect](#multiSelect)              | `multiselect`              |           | `boolean`                         | false       | When true, the selected option can be multiple options. |
+| [noCheckmark](#noCheckmark)              | `nocheckmark`              |           | `boolean`                         | false       | When true, selected option will not show the checkmark. |
+| [optionActive](#optionActive)             | `optionactive`             |           | `object`                          | "undefined" | Specifies the current active menuOption.         |
+| [optionSelected](#optionSelected)           | `optionSelected`           |           | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
+| [options](#options)                  |                            | readonly  | `array`                           |             | Available menu options                           |
+| [selectAllMatchingOptions](#selectAllMatchingOptions) | `selectAllMatchingOptions` |           | `boolean`                         | false       | When true, selects all options that match the provided value/key when setting value and multiselect is enabled. |
+| [selectedOption](#selectedOption)           |                            | readonly  | `HTMLElement \| null`             |             | Gets the first selected option, or null if none. |
+| [selectedOptions](#selectedOptions)          |                            | readonly  | `HTMLElement[]`                   |             | Gets the currently selected options.             |
+| [value](#value)                    | `value`                    |           | `string`                          | "undefined" | Value selected for the component.                |
 
 ## Methods
 
-| Method               | Type                    | Description                                      |
-|----------------------|-------------------------|--------------------------------------------------|
-| [reset](#reset)              | `(): void`              | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
-| [updateActiveOption](#updateActiveOption) | `(index: number): void` | Updates the active option state and dispatches events.<br /><br />**index**: Index of the option to make active. |
+| Method               | Type                          | Description                                      |
+|----------------------|-------------------------------|--------------------------------------------------|
+| [reset](#reset)              | `(): void`                    | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
+| [updateActiveOption](#updateActiveOption) | `(option: HTMLElement): void` | Updates the currently active option in the menu.<br /><br />**option**: The option to set as active. |
 
 ## Events
 
@@ -34,6 +41,7 @@ The auro-menu element provides users a way to select from a list of options.
 | `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
+| `auroMenu-optionsChange`      | `CustomEvent<{ options: any; }>`                 |                                                  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
@@ -58,19 +66,38 @@ The auro-menu element provides users a way to define a menu option.
 
 ## Properties
 
-| Property      | Attribute     | Type      | Default | Description                                      |
-|---------------|---------------|-----------|---------|--------------------------------------------------|
-| [disabled](#disabled)    | `disabled`    | `Boolean` | false   | When true specifies that the menuoption is disabled. |
-| [iconTag](#iconTag)     |               | `string`  |         |                                                  |
-| [layout](#layout)      |               | `string`  |         |                                                  |
-| [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false   |                                                  |
-| [selected](#selected)    | `selected`    | `Boolean` | false   | Specifies that an option is selected.            |
-| [value](#value)       | `value`       | `String`  |         | Specifies the value to be sent to a server.      |
+| Property      | Attribute     | Modifiers | Type      | Default | Description                                      |
+|---------------|---------------|-----------|-----------|---------|--------------------------------------------------|
+| [disabled](#disabled)    | `disabled`    |           | `Boolean` | false   | When true specifies that the menuoption is disabled. |
+| [event](#event)       | `event`       |           | `string`  |         |                                                  |
+| [iconTag](#iconTag)     |               |           | `string`  |         |                                                  |
+| [isActive](#isActive)    |               | readonly  | `boolean` |         | Returns whether the menu option is currently active and selectable.<br />An option is considered active if it is not hidden, not disabled, and not static. |
+| [key](#key)         | `key`         |           | `string`  |         |                                                  |
+| [layout](#layout)      |               |           | `string`  |         |                                                  |
+| [matchWord](#matchWord)   | `matchWord`   |           | `string`  |         |                                                  |
+| [menuService](#menuService) | `menuService` |           | `object`  | null    |                                                  |
+| [nocheckmark](#nocheckmark) | `nocheckmark` |           | `boolean` | false   |                                                  |
+| [selected](#selected)    | `selected`    |           | `Boolean` | false   | Specifies that an option is selected.            |
+| [tabIndex](#tabIndex)    | `tabIndex`    |           | `number`  |         |                                                  |
+| [unsubscribe](#unsubscribe) |               |           |           | null    |                                                  |
+| [value](#value)       | `value`       |           | `String`  |         | Specifies the value to be sent to a server.      |
+
+## Methods
+
+| Method                | Type                          | Description                                      |
+|-----------------------|-------------------------------|--------------------------------------------------|
+| [attachTo](#attachTo)            | `(service: Object): void`     | Attaches this menu option to a menu service and subscribes to its events.<br />This method enables the option to participate in menu selection and highlighting logic.<br /><br />**service**: The menu service instance to attach to. |
+| [bindEvents](#bindEvents)          | `(): void`                    | Sets up event listeners for user interaction with the menu option.<br />This function enables click and mouse enter events to trigger selection and highlighting logic. |
+| [handleMenuChange](#handleMenuChange)    | `(event: Object): void`       | Handles changes from the menu service and updates the option's state.<br />This function synchronizes the option's properties and selection/highlight state with menu events.<br /><br />**event**: The event object from the menu service. |
+| [setInternalSelected](#setInternalSelected) | `(isSelected: boolean): void` | Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.<br />This function ensures the option's selection state is synchronized with menu logic and notifies listeners.<br /><br />**isSelected**: Whether the option should be marked as selected. |
+| [setSelected](#setSelected)         | `(isSelected: boolean): void` | Sets the selected state of the menu option.<br />This function updates whether the option is currently selected.<br /><br />**isSelected**: Whether the option should be marked as selected. |
+| [updateActive](#updateActive)        | `(isActive: boolean): void`   | Updates the active state and visual highlighting of the menu option.<br />This function toggles the option's active status and applies or removes the active CSS class.<br /><br />**isActive**: Whether the option should be marked as active. |
 
 ## Events
 
 | Event                      | Type                | Description                                      |
 |----------------------------|---------------------|--------------------------------------------------|
+| `auroMenuOption-click`     | `CustomEvent<this>` |                                                  |
 | `auroMenuOption-mouseover` | `CustomEvent<this>` | Notifies that this option has been hovered over. |
 
 ## Slots
@@ -113,8 +140,138 @@ The auro-menu element provides users a way to define a menu option.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Using Keys
+
+When setting the `value` property, matches are actually performed on the value of the `key` property of the `auro-menuoption` and not the `value` property. By default, the value of `key` is equal to the value of the `value` property. However, for advanced use cases, the `key` value can be overriden to allow for more specific matches.
+
+In the below example, there is a list of "popular" options at the top, with the same values repeated underneath. To allow more specific selections, we can add a `key` attribute to the top options to allow them to be more specifically selected, or to prevent them from interfering with matches on the lower options.
+
+In the below example, setting the value of the menu `'stops'` will select the bottom-most option with the value `'stops'`, and setting the value of menu to `'stops-top'` will select the top-most option with the value `'stops'` since the key now differs from the value. In either case, the resulting value of the menu will be `'stops'` because the resulting value of the menu is based on the `value` property and not the `key` property.
+
+Due to a limitation with Lit change detection to the `value` property, if multiple options with the same exist and one is selected, you must first clear the current value before attempting to select another option with the same value, even if the keys are unique. See code example below.
+
+_Note: Since the value passed to the `value` property when programmatically setting it is overwritten with the proper derived value once the menu has updated, note that it will take one lifecycle before the `value` property is updated to the value that represents the actual menu state._
+
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/keys.html) -->
+<!-- The below content is automatically added from ./../apiExamples/keys.html -->
+<auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
+<auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
+<auro-menu id="keys-menu">
+  <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
+  <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
+  <hr>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+</auro-menu>
+<p id="output" class="body-sm"></p>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/keys.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/keys.html -->
+
+```html
+<auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
+<auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
+<auro-menu id="keys-menu">
+  <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
+  <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
+  <hr>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+</auro-menu>
+<p id="output" class="body-sm"></p>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/keys.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/keys.js -->
+
+```js
+export function initKeysExample() {
+  const menu = document.getElementById('keys-menu');
+  const stopsButton = document.getElementById('stopsButton');
+  const stopsTopButton = document.getElementById('stopsTopButton');
+  const output = document.getElementById('output');
+
+  const createConsoleEntry = (message) => {
+    const node = document.createElement('span');
+    node.innerHTML = message;
+    output.appendChild(node);
+    output.appendChild(document.createElement('br'));
+  };
+
+  const resetConsole = () => {
+    output.innerHTML = '';
+  };
+
+  const updateMenuValue = (value) => {
+    resetConsole();
+    createConsoleEntry(`Setting menu.value: <em>"${value}"</em>`);
+    menu.value = '';
+    menu.value = value;
+    createConsoleEntry(`menu.value before next lifecycle: <em>"${menu.value}"</em>`);
+    setTimeout(() => {
+      createConsoleEntry(`menu.value after lifecycle: <em>"${menu.value}"</em>`);
+    });
+  };
+
+  stopsButton.addEventListener('click', () => {
+    updateMenuValue('stops');
+  });
+
+  stopsTopButton.addEventListener('click', () => {
+    updateMenuValue('stops-top');
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Attribute Examples
 
+#### allowDeselect
+
+When set, the `allowDeselect` attribute allows the user to click on a selected menu option again to deselect it when the menu is not in multi-select mode.
+
+When the menu is in multi-select mode, this attribute has no effect and the user will be able to deselect the last remaining selected option.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/allowDeselect.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/allowDeselect.html -->
+  <auro-menu allowDeselect>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  </auro-menu>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/allowDeselect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/allowDeselect.html -->
+
+```html
+<auro-menu allowDeselect>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### noCheckmark<a name="noCheckmark"></a>
 Applying the `noCheckmark` attribute will prevent the check icon from being shown on the selected option. The left padding to reserve space for the checkmark is also removed.
 
@@ -310,8 +467,17 @@ export function auroMenuMatchWordExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Multi Select<a name="multiSelect"></a>
-The `auro-menu` supports a multi-select option. To use, place the `multiselect` attribute on the `<auro-menu>` element tag. When applied, the `value` attribute will become an Array versus String value.
+### Multi-Select<a name="multiSelect"></a>
+The `auro-menu` supports a multi-select option. To use, place the `multiselect` attribute on the `<auro-menu>` element tag or update the `multiselect` property programmatically.
+
+In multi-select mode, the `value` property will always return a valid JSON string that contains an array of selected values, e.g. `'["stops","duration","arrival"]'`, when accessed.
+
+The value of the menu may be set via multiple methods when in multi-select mode: 
+- Programmatically or via attribute by passing a valid JSON string that can be parsed using `JSON.parse`.
+- Programmatically or via attribute by passing a single matching value in a string, e.g. `"stops"`.
+- Programmatically by passing an array of string values, e.g. `["stops","duration","arrival"]`.
+
+_Note: Other methods of setting the value may work but are not officially supported and may stop working unexpectedly._
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiSelect.html) -->
@@ -342,6 +508,85 @@ The `auro-menu` supports a multi-select option. To use, place the `multiselect`
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Optional Flag - `selectAllMatchingOptions`
+
+When this flag is set on the `auro-menu` tag, when the value is set, any option with a matching key will be selected, even when multiple options with that key exist.
+
+If not set, only the first matching option will be selected.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/selectAllMatchingOptions.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/selectAllMatchingOptions.html -->
+  <p>With <code>selectAllMatchingOptions</code> enabled:</p>
+  <auro-button id="selectAllBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
+  <auro-button id="resetAllBtn">Reset Menu</auro-button>
+  <auro-menu multiselect selectAllMatchingOptions id="selectAllMenu">
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <hr>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+  </auro-menu>
+  <br/>
+  <br/>
+  <br/>
+  <p>Without <code>selectAllMatchingOptions</code> enabled:</p>
+  <auro-button id="selectFirstBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
+  <auro-button id="resetFirstBtn">Reset Menu</auro-button>
+  <auro-menu multiselect id="selectFirstMenu">
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <hr>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+  </auro-menu>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/selectAllMatchingOptions.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/selectAllMatchingOptions.html -->
+
+```html
+<p>With <code>selectAllMatchingOptions</code> enabled:</p>
+<auro-button id="selectAllBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
+<auro-button id="resetAllBtn">Reset Menu</auro-button>
+<auro-menu multiselect selectAllMatchingOptions id="selectAllMenu">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <hr>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+</auro-menu>
+<br/>
+<br/>
+<br/>
+<p>Without <code>selectAllMatchingOptions</code> enabled:</p>
+<auro-button id="selectFirstBtn">Set <code>menu.value</code> to <code>'stops'</code></auro-button>
+<auro-button id="resetFirstBtn">Reset Menu</auro-button>
+<auro-menu multiselect id="selectFirstMenu">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <hr>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+</auro-menu>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### Loading<a name="loading"></a>
 While content is loading, the menu can either remain empty or display a loading placeholder