@aurodesignsystem-dev/auro-formkit 0.0.0-pr1498.0 → 0.0.0-pr1499.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/components/checkbox/demo/customize.min.js +2 -2
  2. package/components/checkbox/demo/getting-started.min.js +2 -2
  3. package/components/checkbox/demo/index.min.js +2 -2
  4. package/components/checkbox/dist/index.js +2 -2
  5. package/components/checkbox/dist/registered.js +2 -2
  6. package/components/combobox/demo/customize.md +3 -7
  7. package/components/combobox/demo/customize.min.js +1705 -1459
  8. package/components/combobox/demo/getting-started.min.js +1705 -1459
  9. package/components/combobox/demo/index.min.js +1705 -1459
  10. package/components/combobox/dist/auro-combobox.d.ts +0 -5
  11. package/components/combobox/dist/index.js +162 -491
  12. package/components/combobox/dist/registered.js +162 -491
  13. package/components/counter/demo/customize.min.js +19 -18
  14. package/components/counter/demo/index.min.js +19 -18
  15. package/components/counter/dist/index.js +187 -5442
  16. package/components/counter/dist/registered.js +187 -5442
  17. package/components/datepicker/demo/customize.md +477 -384
  18. package/components/datepicker/demo/customize.min.js +96 -161
  19. package/components/datepicker/demo/index.md +0 -1
  20. package/components/datepicker/demo/index.min.js +96 -161
  21. package/components/datepicker/dist/index.js +96 -161
  22. package/components/datepicker/dist/registered.js +96 -161
  23. package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -2
  24. package/components/dropdown/demo/customize.min.js +17 -16
  25. package/components/dropdown/demo/getting-started.min.js +17 -16
  26. package/components/dropdown/demo/index.min.js +17 -16
  27. package/components/dropdown/dist/auro-dropdown.d.ts +2 -1
  28. package/components/dropdown/dist/index.js +17 -16
  29. package/components/dropdown/dist/registered.js +17 -16
  30. package/components/form/demo/customize.min.js +7965 -7884
  31. package/components/form/demo/getting-started.min.js +7965 -7884
  32. package/components/form/demo/index.min.js +7965 -7884
  33. package/components/form/demo/registerDemoDeps.min.js +7934 -7853
  34. package/components/input/demo/customize.md +539 -472
  35. package/components/input/demo/customize.min.js +61 -132
  36. package/components/input/demo/getting-started.min.js +61 -132
  37. package/components/input/demo/index.min.js +61 -132
  38. package/components/input/dist/base-input.d.ts +0 -16
  39. package/components/input/dist/index.js +61 -132
  40. package/components/input/dist/registered.js +61 -132
  41. package/components/menu/demo/api.md +45 -41
  42. package/components/menu/demo/customize.md +28 -0
  43. package/components/menu/demo/index.min.js +1358 -783
  44. package/components/menu/dist/auro-menu.context.d.ts +238 -0
  45. package/components/menu/dist/auro-menu.d.ts +110 -95
  46. package/components/menu/dist/auro-menuoption.d.ts +138 -32
  47. package/components/menu/dist/index.js +1312 -757
  48. package/components/menu/dist/registered.js +1312 -769
  49. package/components/radio/demo/customize.min.js +2 -2
  50. package/components/radio/demo/getting-started.min.js +2 -2
  51. package/components/radio/demo/index.min.js +2 -2
  52. package/components/radio/dist/index.js +2 -2
  53. package/components/radio/dist/registered.js +2 -2
  54. package/components/select/demo/customize.md +3 -7
  55. package/components/select/demo/customize.min.js +1634 -1089
  56. package/components/select/demo/getting-started.min.js +1634 -1089
  57. package/components/select/demo/index.min.js +1634 -1089
  58. package/components/select/dist/index.js +31 -61
  59. package/components/select/dist/registered.js +31 -61
  60. package/custom-elements.json +2085 -1439
  61. package/package.json +1 -1
  62. package/components/select/dist/selectUtils.d.ts +0 -12
@@ -3,34 +3,34 @@
3
3
  * Copyright 2019 Google LLC
4
4
  * SPDX-License-Identifier: BSD-3-Clause
5
5
  */
6
- const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$3("string"==typeof t?t:t+"",void 0,s$3),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$3(o,t,s$3)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
6
+ const t$2=globalThis,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$6=Symbol(),o$5=new WeakMap;let n$4 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$6)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$4("string"==typeof t?t:t+"",void 0,s$6),i$6=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$4(o,t,s$6)},S$1=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
7
7
 
8
8
  /**
9
9
  * @license
10
10
  * Copyright 2017 Google LLC
11
11
  * SPDX-License-Identifier: BSD-3-Clause
12
- */const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$3={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$2=(t,s)=>!i$4(t,s),b$1={attribute:true,type:String,converter:u$3,reflect:false,useDefault:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$2 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$3).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$3;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$2)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$2.elementStyles=[],y$2.shadowRootOptions={mode:"open"},y$2[d$1("elementProperties")]=new Map,y$2[d$1("finalized")]=new Map,p$2?.({ReactiveElement:y$2}),(a$2.reactiveElementVersions??=[]).push("2.1.2");
12
+ */const{is:i$5,defineProperty:e$4,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$4,getPrototypeOf:n$3}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$3={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$2=(t,s)=>!i$5(t,s),b$1={attribute:true,type:String,converter:u$3,reflect:false,useDefault:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$2 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$4(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$3(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$3).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$3;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$2)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$2.elementStyles=[],y$2.shadowRootOptions={mode:"open"},y$2[d$1("elementProperties")]=new Map,y$2[d$1("finalized")]=new Map,p$2?.({ReactiveElement:y$2}),(a$2.reactiveElementVersions??=[]).push("2.1.2");
13
13
 
14
14
  /**
15
15
  * @license
16
16
  * Copyright 2017 Google LLC
17
17
  * SPDX-License-Identifier: BSD-3-Clause
18
18
  */
19
- const t$1=globalThis,i$3=t=>t,s$2=t$1.trustedTypes,e$2=s$2?s$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r=`<${n$1}>`,l$1=document,c=()=>l$1.createComment(""),a$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$2=Array.isArray,d=t=>u$2(t)||"function"==typeof t?.[Symbol.iterator],f$1="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$1=/-->/g,m$1=/>/g,p$1=RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$1=/'/g,$=/"/g,y$1=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$1.createTreeWalker(l$1,129);function V(t,i){if(!u$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$2?e$2.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_$1:void 0!==u[1]?c=m$1:void 0!==u[2]?(y$1.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$1):void 0!==u[3]&&(c=p$1):c===p$1?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$1:'"'===u[3]?$:g$1):c===$||c===g$1?c=p$1:c===_$1||c===m$1?c=v:(c=p$1,n=void 0);const x=c===p$1&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z$1:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$1.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$2?s$2.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$1)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l$1.createElement("template");return s.innerHTML=t,s}}function M$1(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a$1(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M$1(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$1).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k$1(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}let k$1 = class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M$1(this,t,i),a$1(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$3(t).nextSibling;i$3(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M$1(this,t,i,0),o=!a$1(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M$1(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$1(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}let z$1 = class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M$1(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M$1(this,t);}}const B=t$1.litHtmlPolyfillSupport;B?.(S,k$1),(t$1.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k$1(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
19
+ const t$1=globalThis,i$4=t=>t,s$5=t$1.trustedTypes,e$3=s$5?s$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$2="?"+o$3,r=`<${n$2}>`,l$1=document,c=()=>l$1.createComment(""),a$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$2=Array.isArray,d=t=>u$2(t)||"function"==typeof t?.[Symbol.iterator],f$1="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$1=/-->/g,m$1=/>/g,p$1=RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$1=/'/g,$=/"/g,y$1=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$1.createTreeWalker(l$1,129);function V(t,i){if(!u$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$3?e$3.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_$1:void 0!==u[1]?c=m$1:void 0!==u[2]?(y$1.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$1):void 0!==u[3]&&(c=p$1):c===p$1?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$1:'"'===u[3]?$:g$1):c===$||c===g$1?c=p$1:c===_$1||c===m$1?c=v:(c=p$1,n=void 0);const x=c===p$1&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z$1:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$1.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$5?s$5.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$2)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l$1.createElement("template");return s.innerHTML=t,s}}function M$1(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a$1(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M$1(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$1).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k$1(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}let k$1 = class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M$1(this,t,i),a$1(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$4(t).nextSibling;i$4(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M$1(this,t,i,0),o=!a$1(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M$1(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$1(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}let z$1 = class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M$1(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M$1(this,t);}}const B=t$1.litHtmlPolyfillSupport;B?.(S,k$1),(t$1.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k$1(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
20
20
 
21
21
  /**
22
22
  * @license
23
23
  * Copyright 2017 Google LLC
24
24
  * SPDX-License-Identifier: BSD-3-Clause
25
- */const s$1=globalThis;let i$2 = class i extends y$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.2");
25
+ */const s$4=globalThis;let i$3 = class i extends y$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};i$3._$litElement$=true,i$3["finalized"]=true,s$4.litElementHydrateSupport?.({LitElement:i$3});const o$2=s$4.litElementPolyfillSupport;o$2?.({LitElement:i$3});(s$4.litElementVersions??=[]).push("4.2.2");
26
26
 
27
- var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{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-default-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.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-lg-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{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-sm-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.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-xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-weight:var(--wcss-body-2xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);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-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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-weight:var(--wcss-heading-xs-weight, 300);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-2xs-weight, 300);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);text-transform:uppercase}.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-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);text-transform:uppercase}:host{display:block;line-height:0;overflow-y:auto}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
27
+ var styleCss$1 = i$6`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{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-default-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.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-lg-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{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-sm-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.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-xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-weight:var(--wcss-body-2xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);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-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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-weight:var(--wcss-heading-xs-weight, 300);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-2xs-weight, 300);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);text-transform:uppercase}.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-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);text-transform:uppercase}:host{display:block;line-height:0;overflow-y:auto}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
28
28
 
29
- var colorCss$1 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
29
+ var colorCss$1 = i$6`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
30
30
 
31
- var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
31
+ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
32
32
 
33
- class AuroElement extends i$2 {
33
+ class AuroElement extends i$3 {
34
34
  static get properties() {
35
35
  return {
36
36
 
@@ -134,6 +134,753 @@ class AuroElement extends i$2 {
134
134
  }
135
135
  }
136
136
 
137
+ /**
138
+ * @license
139
+ * Copyright 2021 Google LLC
140
+ * SPDX-License-Identifier: BSD-3-Clause
141
+ */
142
+ let s$3 = class s extends Event{constructor(s,t,e,o){super("context-request",{bubbles:true,composed:true}),this.context=s,this.contextTarget=t,this.callback=e,this.subscribe=o??false;}};
143
+
144
+ /**
145
+ * @license
146
+ * Copyright 2021 Google LLC
147
+ * SPDX-License-Identifier: BSD-3-Clause
148
+ */
149
+ function n$1(n){return n}
150
+
151
+ /**
152
+ * @license
153
+ * Copyright 2021 Google LLC
154
+ * SPDX-License-Identifier: BSD-3-Clause
155
+ */let s$2 = class s{constructor(t,s,i,h){if(this.subscribe=false,this.provided=false,this.value=void 0,this.t=(t,s)=>{this.unsubscribe&&(this.unsubscribe!==s&&(this.provided=false,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=t,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=true,this.callback&&this.callback(t,s)),this.unsubscribe=s;},this.host=t,void 0!==s.context){const t=s;this.context=t.context,this.callback=t.callback,this.subscribe=t.subscribe??false;}else this.context=s,this.callback=i,this.subscribe=h??false;this.host.addController(this);}hostConnected(){this.dispatchRequest();}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0);}dispatchRequest(){this.host.dispatchEvent(new s$3(this.context,this.host,this.t,this.subscribe));}};
156
+
157
+ /**
158
+ * @license
159
+ * Copyright 2021 Google LLC
160
+ * SPDX-License-Identifier: BSD-3-Clause
161
+ */
162
+ let s$1 = class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=false){const i=t||!Object.is(s,this.o);this.o=s,i&&this.updateObservers();}constructor(s){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:t}]of this.subscriptions)s(this.o,t);},void 0!==s&&(this.value=s);}addCallback(s,t,i){if(!i)return void s(this.value);this.subscriptions.has(s)||this.subscriptions.set(s,{disposer:()=>{this.subscriptions.delete(s);},consumerHost:t});const{disposer:h}=this.subscriptions.get(s);s(this.value,h);}clearCallbacks(){this.subscriptions.clear();}};
163
+
164
+ /**
165
+ * @license
166
+ * Copyright 2021 Google LLC
167
+ * SPDX-License-Identifier: BSD-3-Clause
168
+ */let e$2 = class e extends Event{constructor(t,s){super("context-provider",{bubbles:true,composed:true}),this.context=t,this.contextTarget=s;}};let i$2 = class i extends s$1{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{if(t.context!==this.context)return;const s=t.contextTarget??t.composedPath()[0];s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe));},this.onProviderRequest=s=>{if(s.context!==this.context)return;if((s.contextTarget??s.composedPath()[0])===this.host)return;const e=new Set;for(const[s,{consumerHost:i}]of this.subscriptions)e.has(s)||(e.add(s),i.dispatchEvent(new s$3(this.context,i,s,true)));s.stopPropagation();},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this);}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest);}hostConnected(){this.host.dispatchEvent(new e$2(this.context,this.host));}};
169
+
170
+ /* eslint-disable */
171
+
172
+ class MenuService {
173
+
174
+ /**
175
+ * PROPERTIES AND GETTERS
176
+ */
177
+
178
+ /**
179
+ * Gets the list of registered menu options.
180
+ * @returns {AuroMenuOption[]}
181
+ */
182
+ get menuOptions() {
183
+ return this._menuOptions;
184
+ }
185
+
186
+ /**
187
+ * Gets the currently highlighted option.
188
+ * @returns {AuroMenuOption|null}
189
+ */
190
+ get highlightedOption() {
191
+ return this._menuOptions[this.highlightedIndex] || null;
192
+ }
193
+
194
+ /**
195
+ * Gets the current value(s) of the selected option(s).
196
+ * @returns {string|string[]|undefined}
197
+ */
198
+ get currentValue() {
199
+ const values = (this.selectedOptions || []).map(option => option.value);
200
+ return this.multiSelect ? values : values[0];
201
+ }
202
+
203
+ /**
204
+ * Gets the label(s) of the currently selected option(s).
205
+ * @returns {string}
206
+ */
207
+ get currentLabel() {
208
+ const labels = (this.selectedOptions || []).map(option => option.textContent);
209
+ return this.multiSelect ? labels.join(", ") : labels[0] || '';
210
+ }
211
+
212
+ /**
213
+ * Gets the string representation of the current value(s).
214
+ * For multi-select, this is a JSON stringified array.
215
+ * @returns {string|undefined}
216
+ */
217
+ get stringValue() {
218
+ const { currentValue } = this;
219
+
220
+ if (Array.isArray(currentValue)) {
221
+ if (currentValue.length > 0) {
222
+ return JSON.stringify(currentValue);
223
+ }
224
+ return undefined;
225
+ }
226
+
227
+ if (typeof currentValue === 'string') {
228
+ if (currentValue.length > 0) {
229
+ return currentValue;
230
+ }
231
+ return undefined;
232
+ }
233
+
234
+ // Future: handle other types here (e.g., number, object, etc.)
235
+ return undefined;
236
+ }
237
+
238
+ /**
239
+ * Gets the key(s) of the currently selected option(s).
240
+ * @returns {string|string[]|undefined}
241
+ */
242
+ get currentKeys() {
243
+ const keys = (this.selectedOptions || []).map(option => option.key);
244
+ return this.multiSelect ? keys : keys[0];
245
+ }
246
+
247
+ /**
248
+ * CONSTRUCTOR
249
+ */
250
+
251
+ /**
252
+ * Creates a new MenuService instance.
253
+ * @param {Object} options - The options object.
254
+ * @param {AuroMenu} options.host - The host element that this service will control. Required.
255
+ * @throws {Error} If the host is not provided.
256
+ */
257
+ constructor({ host } = {}) {
258
+
259
+ // Ensure a host was passed
260
+ if (!host) {
261
+ throw new Error("MenuService requires a host element.");
262
+ }
263
+
264
+ // Attach the service to the host
265
+ this.host = host;
266
+ this.host.addController(this);
267
+
268
+ // Set default properties
269
+ this.size = undefined;
270
+ this.shape = undefined;
271
+ this.noCheckmark = undefined;
272
+ this.disabled = undefined;
273
+ this.matchWord = undefined;
274
+ this.multiSelect = undefined;
275
+ this.allowDeselect = undefined;
276
+ this.selectAllMatchingOptions = undefined;
277
+
278
+ this.highlightedIndex = -1;
279
+
280
+ this._menuOptions = [];
281
+ this._subscribers = [];
282
+ this.internalUpdateInProgress = false;
283
+ this.selectedOptions = [];
284
+ this._pendingValue = null;
285
+ this._pendingRetryScheduled = false;
286
+ this._pendingRetryCount = 0;
287
+ }
288
+
289
+ /**
290
+ * PROPERTY SYNCING
291
+ */
292
+
293
+ /**
294
+ * Handles host updates.
295
+ * This is a lit reactive lifecycle method.
296
+ * This comes from the Lit controller interface provided by adding this service as a controller to the host.
297
+ * See constructor for `this.host.addController(this)`
298
+ * You can read more about Lit reactive controllers here: https://lit.dev/docs/composition/controllers/
299
+ */
300
+ hostUpdated() {
301
+
302
+ // Reset selection if multiSelect mode changes
303
+ if (this.host.multiSelect !== this.multiSelect) {
304
+ this.selectedOptions = [];
305
+ }
306
+
307
+ // Update properties on host update
308
+ this.setProperties({
309
+ size: this.host.size,
310
+ shape: this.host.shape,
311
+ noCheckmark: this.host.noCheckmark,
312
+ disabled: this.host.disabled,
313
+ matchWord: this.host.matchWord,
314
+ multiSelect: this.host.multiSelect,
315
+ allowDeselect: this.host.allowDeselect,
316
+ selectAllMatchingOptions: this.host.selectAllMatchingOptions
317
+ });
318
+ }
319
+
320
+ /**
321
+ * Handles host disconnection and memory cleanup.
322
+ */
323
+ hostDisconnected() {
324
+ this._subscribers = [];
325
+ this._menuOptions = [];
326
+ this._pendingValue = null;
327
+ this._pendingRetryScheduled = false;
328
+ this._pendingRetryCount = 0;
329
+ }
330
+
331
+ /**
332
+ * Sets a property value if it exists on the instance and the value has changed.
333
+ * @param {string} property
334
+ * @param {any} value
335
+ */
336
+ setProperty(property, value) {
337
+
338
+ // Only update if we are tracking the property in this service
339
+ if (this.hasOwnProperty(property)) {
340
+
341
+ // Check if the value has changed
342
+ const valueChanged = this[property] !== value;
343
+
344
+ // Update and notify if changed
345
+ if (valueChanged) {
346
+ this[property] = value;
347
+ this.notify({ property, value });
348
+ }
349
+ }
350
+ }
351
+
352
+ /**
353
+ * Sets multiple properties on the instance.
354
+ * @param {Object} properties - Key-value pairs of properties to set.
355
+ */
356
+ setProperties(properties) {
357
+ for (const [key, value] of Object.entries(properties)) {
358
+ this.setProperty(key, value);
359
+ }
360
+ }
361
+
362
+ /**
363
+ * MENU OPTION HIGHLIGHTING
364
+ */
365
+
366
+ /**
367
+ * Highlights the next active option in the menu.
368
+ */
369
+ highlightNext() {
370
+ this.moveHighlightedOption("next");
371
+ }
372
+
373
+ /**
374
+ * Highlights the previous active option in the menu.
375
+ */
376
+ highlightPrevious() {
377
+ this.moveHighlightedOption("previous");
378
+ }
379
+
380
+ /**
381
+ * Moves the highlighted option in the specified direction.
382
+ * @param {string} direction - The direction to move the highlight ("next" or "previous").
383
+ */
384
+ moveHighlightedOption(direction) {
385
+
386
+ // Get the active options
387
+ const activeOptions = this._menuOptions.filter(option => option.isActive);
388
+
389
+ // Get the currently active option
390
+ const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
391
+
392
+ // Determine the new index based on the currently active option and direction
393
+ let newIndex = currentActiveOption
394
+ ? direction === "previous"
395
+ ? activeOptions.indexOf(currentActiveOption) - 1
396
+ : activeOptions.indexOf(currentActiveOption) + 1
397
+ : direction === "previous"
398
+ ? activeOptions.length - 1
399
+ : 0;
400
+
401
+ // Wrap around the index if needed
402
+ newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
403
+
404
+ // Get the new active option and set it as highlighted
405
+ const newActiveOption = activeOptions[newIndex];
406
+ this.setHighlightedOption(newActiveOption);
407
+ }
408
+
409
+ /**
410
+ * Sets the highlighted index to the specified option.
411
+ * @param {AuroMenuOption} option - The option to highlight.
412
+ */
413
+ setHighlightedOption(option) {
414
+
415
+ if (!option) return;
416
+
417
+ // Get the index of the option to highlight
418
+ const index = this._menuOptions.indexOf(option);
419
+
420
+ // Update highlighted index
421
+ this.highlightedIndex = index;
422
+
423
+ // Notify subscribers of highlight change
424
+ this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
425
+
426
+ // Dispatch the change event
427
+ this.dispatchChangeEvent('auroMenu-activatedOption', option);
428
+ }
429
+
430
+ /**
431
+ * Sets the highlighted option to the option at the specified index if it exists.
432
+ * @param {number} index
433
+ */
434
+ setHighlightedIndex(index) {
435
+ const option = this._menuOptions[index] || null;
436
+ this.setHighlightedOption(option);
437
+ }
438
+
439
+ /**
440
+ * Selects the currently highlighted option.
441
+ */
442
+ selectHighlightedOption() {
443
+ if (this.highlightedOption) {
444
+ this.toggleOption(this.highlightedOption);
445
+ }
446
+ }
447
+
448
+ /**
449
+ * SELECTION AND DESELECTION METHODS
450
+ */
451
+
452
+ /**
453
+ * Selects one or more options in a batch operation
454
+ * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
455
+ */
456
+ selectOptions(options) {
457
+ let optionsToSelect = Array.isArray(options) ? options : [options];
458
+
459
+ // Filter out options that are inactive
460
+ optionsToSelect = optionsToSelect.filter(option => option.isActive);
461
+
462
+ if (!optionsToSelect.length) return;
463
+
464
+ if (this.multiSelect) {
465
+ this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
466
+ } else {
467
+ // In single select mode, only take the last option
468
+ this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
469
+ }
470
+
471
+ this.stageUpdate();
472
+ }
473
+
474
+ /**
475
+ * Deselects one or more options in a batch operation
476
+ * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
477
+ */
478
+ deselectOptions(options) {
479
+ const optionsToDeselect = Array.isArray(options) ? options : [options];
480
+
481
+ if (!optionsToDeselect.length) return;
482
+
483
+ // Check if deselection should be prevented
484
+ const shouldPreventDeselect = !this.allowDeselect && !this.multiSelect;
485
+ const isOnlySelectedOption = this.selectedOptions.length === 1 && optionsToDeselect.includes(this.selectedOptions[0]);
486
+
487
+ // Prevent deselecting the only selected option if not allowed
488
+ if (shouldPreventDeselect && isOnlySelectedOption) {
489
+ optionsToDeselect.forEach(option => {
490
+ option.selected = true;
491
+ });
492
+ this.dispatchChangeEvent('auroMenu-deselectPrevented', {
493
+ values: optionsToDeselect
494
+ });
495
+ return;
496
+ }
497
+
498
+ const optionsSet = new Set(optionsToDeselect);
499
+ const previousCount = this.selectedOptions.length;
500
+ this.selectedOptions = (this.selectedOptions || [])
501
+ .filter(opt => !optionsSet.has(opt));
502
+
503
+ if (this.selectedOptions.length < previousCount) {
504
+ this.stageUpdate();
505
+ }
506
+ }
507
+
508
+ /**
509
+ * Selects a single option.
510
+ * @param {AuroMenuOption} option
511
+ */
512
+ selectOption(option) {
513
+ this.selectOptions(option);
514
+ }
515
+
516
+ /**
517
+ * Deselects a single option.
518
+ * @param {AuroMenuOption} option
519
+ */
520
+ deselectOption(option) {
521
+ this.deselectOptions(option);
522
+ }
523
+
524
+ /**
525
+ * Toggles the selection state of a single option.
526
+ * @param {AuroMenuOption} option
527
+ */
528
+ toggleOption(option) {
529
+ if (option.selected) {
530
+ this.deselectOption(option);
531
+ } else {
532
+ this.selectOption(option);
533
+ }
534
+ }
535
+
536
+ /**
537
+ * Selects options based on their value(s) when compared to a passed value or values.
538
+ * Value or values are normalized to an array of strings that can be matched to option keys.
539
+ * @param {string|number|Array<string|number>} value - The value(s) to select.
540
+ */
541
+ selectByValue(value) {
542
+ const isEmptyValue = value === undefined ||
543
+ value === null ||
544
+ (Array.isArray(value) && value.length === 0) ||
545
+ (typeof value === 'string' && value.trim() === '');
546
+
547
+ // Early exit for invalid/empty values
548
+ if (isEmptyValue) {
549
+ this.selectedOptions.forEach(opt => opt.selected = false);
550
+ this.selectedOptions = [];
551
+ return;
552
+ }
553
+
554
+ // If an internal update cycle is still in progress, defer value application
555
+ // rather than dropping it.
556
+ if (this.internalUpdateInProgress || this.host.internalUpdateInProgress) {
557
+ this.queuePendingValue(value);
558
+ return;
559
+ }
560
+
561
+ // Normalize values to array of strings
562
+ const normalizedValues = this._getNormalizedValues(value);
563
+
564
+ // Validate for single-select mode
565
+ let validatedValues = normalizedValues;
566
+ if (normalizedValues.length > 1 && !this.multiSelect) {
567
+ console.warn("MenuService - Multiple values provided for single-select menu. Only the first value will be selected.");
568
+ validatedValues = [normalizedValues[0]];
569
+ }
570
+
571
+ if (this._menuOptions.length === 0) {
572
+ this.queuePendingValue(value);
573
+ return;
574
+ }
575
+
576
+ // Find matching options by comparing available options to validated values
577
+ const trackedKeys = new Set();
578
+ const optionsToSelect = this._menuOptions.filter(option => {
579
+ const passesFilter = validatedValues.includes(option.key);
580
+ const alreadyTracked = trackedKeys.has(option.key);
581
+ const isActive = option.isActive;
582
+
583
+ trackedKeys.add(option.key);
584
+
585
+ // Include the option in the options to be selected if it passes the filter check and
586
+ // either hasn't been tracked yet or selectAllMatchingOptions is true
587
+ return isActive && passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
588
+ });
589
+
590
+ // Handle no matches: clear existing selection, but do not dispatch an intermediate
591
+ // undefined value that can overwrite the host value in parent components.
592
+ if (!optionsToSelect.length) {
593
+ const hasUnresolvedKeys = this._menuOptions.some((option) => option.isActive && option.key == null);
594
+
595
+ if (hasUnresolvedKeys) {
596
+ this.queuePendingValue(value);
597
+ return;
598
+ }
599
+
600
+ this.clearPendingValue();
601
+
602
+ if (this.selectedOptions.length > 0) {
603
+ this.selectedOptions = [];
604
+ }
605
+
606
+ // Always notify so the host resets any stale invalid value, even when
607
+ // selectedOptions was already empty (e.g. double-clicking set-invalid).
608
+ this.stageUpdate({ reason: 'no-match' });
609
+
610
+ // Dispatch failure event if no matches found
611
+ if (validatedValues.length) {
612
+ this.dispatchChangeEvent('auroMenu-selectValueFailure', {
613
+ message: 'No matching options found for the provided value(s).',
614
+ values: validatedValues
615
+ });
616
+ }
617
+
618
+ return;
619
+ }
620
+
621
+ this.clearPendingValue();
622
+
623
+ if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
624
+ return;
625
+ }
626
+
627
+ // Apply programmatic selection as a single transaction and emit one final state.
628
+ this.selectedOptions = optionsToSelect;
629
+ this.stageUpdate();
630
+ }
631
+
632
+ /**
633
+ * Queues a pending value and schedules a bounded retry.
634
+ * @param {string|number|Array<string|number>} value - The value to retry.
635
+ */
636
+ queuePendingValue(value) {
637
+ this._pendingValue = value;
638
+
639
+ if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
640
+ return;
641
+ }
642
+
643
+ this._pendingRetryScheduled = true;
644
+ this._pendingRetryCount += 1;
645
+
646
+ setTimeout(() => {
647
+ this._pendingRetryScheduled = false;
648
+
649
+ if (this._pendingValue == null) {
650
+ return;
651
+ }
652
+
653
+ const pendingValue = this._pendingValue;
654
+ this.selectByValue(pendingValue);
655
+ }, 0);
656
+ }
657
+
658
+ /**
659
+ * Clears pending retry state.
660
+ */
661
+ clearPendingValue() {
662
+ this._pendingValue = null;
663
+ this._pendingRetryScheduled = false;
664
+ this._pendingRetryCount = 0;
665
+ }
666
+
667
+ /**
668
+ * Resets the selected options to an empty array.
669
+ */
670
+ reset() {
671
+ const previousOptions = [...this.selectedOptions];
672
+ previousOptions.forEach(opt => opt.selected = false);
673
+ this.selectedOptions = [];
674
+
675
+ // Single update after clearing all
676
+ if (previousOptions.length) {
677
+ this.stageUpdate();
678
+ }
679
+ }
680
+
681
+ /**
682
+ * SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
683
+ */
684
+
685
+ /**
686
+ * Subscribes a callback to menu service events.
687
+ * @param {Function} callback - The callback to invoke on events.
688
+ */
689
+ subscribe(callback) {
690
+ this._subscribers.push(callback);
691
+ }
692
+
693
+ /**
694
+ * Remove a previously subscribed callback from menu service events.
695
+ * @param {Function} callback
696
+ */
697
+ unsubscribe(callback) {
698
+ this._subscribers = this._subscribers.filter(cb => cb !== callback);
699
+ }
700
+
701
+ /**
702
+ * Stages an update to notify subscribers of state and value changes.
703
+ */
704
+ stageUpdate(meta = {}) {
705
+ this.notifyStateChange(meta);
706
+ this.notifyValueChange(meta);
707
+ }
708
+
709
+ /**
710
+ * Notifies subscribers of a menu service event.
711
+ * All notifications are sent to all subscribers.
712
+ * @param {string} event - The event to send to subscribers.
713
+ */
714
+ notify(event) {
715
+ this._subscribers.forEach(callback => callback(event));
716
+ }
717
+
718
+ /**
719
+ * Notifies subscribers of a state change (selected options has changed).
720
+ */
721
+ notifyStateChange(meta = {}) {
722
+ this.notify({
723
+ type: 'stateChange',
724
+ selectedOptions: this.selectedOptions,
725
+ ...meta
726
+ });
727
+ }
728
+
729
+ /**
730
+ * Notifies subscribers of a value change (current value has changed).
731
+ */
732
+ notifyValueChange(meta = {}) {
733
+
734
+ // Prepare details for the event
735
+ const details = {
736
+ value: this.currentValue,
737
+ stringValue: this.stringValue,
738
+ keys: this.currentKeys,
739
+ options: this.selectedOptions,
740
+ label: this.currentLabel
741
+ };
742
+
743
+ // If only one option is selected, include its index
744
+ if (this.selectedOptions.length === 1) details.index = this._menuOptions.indexOf(this.selectedOptions[0]);
745
+
746
+ this.notify({
747
+ type: 'valueChange',
748
+ ...meta,
749
+ ...details
750
+ });
751
+ }
752
+
753
+ /**
754
+ * Dispatches a custom event from the host element.
755
+ * @param {string} eventName
756
+ * @param {any} detail
757
+ */
758
+ dispatchChangeEvent(eventName, detail) {
759
+ this.host.dispatchEvent(new CustomEvent(eventName, {
760
+ bubbles: true,
761
+ cancelable: false,
762
+ composed: true,
763
+ detail
764
+ }));
765
+ }
766
+
767
+ /**
768
+ * MENU OPTION MANAGEMENT METHODS
769
+ */
770
+
771
+ /**
772
+ * Adds a menu option to the service's list.
773
+ * @param {AuroMenuOption} option - the option to track
774
+ */
775
+ addMenuOption(option) {
776
+ this._menuOptions.push(option);
777
+ this.notify({ type: 'optionsChange', options: this._menuOptions });
778
+
779
+ if (this._pendingValue != null) {
780
+ this.queuePendingValue(this._pendingValue);
781
+ }
782
+ }
783
+
784
+ /**
785
+ * Removes a menu option from the service's list.
786
+ * @param {AuroMenuOption} option - the option to remove
787
+ */
788
+ removeMenuOption(option) {
789
+ this._menuOptions = this._menuOptions.filter(opt => opt !== option);
790
+ this.notify({ type: 'optionsChange', options: this._menuOptions });
791
+
792
+ if (this._menuOptions.length === 0) {
793
+ this.clearPendingValue();
794
+ }
795
+ }
796
+
797
+ /**
798
+ * UTILITIES
799
+ */
800
+
801
+ /**
802
+ * Normalizes a value or array of values into an array of strings for option selection.
803
+ * This function ensures that input values are consistently formatted for matching menu options.
804
+ *
805
+ * @param {string|number|Array<string|number>} value - The value(s) to normalize.
806
+ * @returns {Array<string>} An array of string values suitable for option matching.
807
+ * @throws {Error} If any value is not a string or number.
808
+ */
809
+ _getNormalizedValues(value) {
810
+ let values = value;
811
+
812
+ // Handle JSON string and single value string input
813
+ if (!Array.isArray(values) && typeof values === 'string') {
814
+
815
+ // Attempt to parse as JSON array
816
+ try {
817
+
818
+ // Normalize single quotes to double quotes for JSON parsing
819
+ // This will not handle complex cases but will cover basic usage
820
+ const parseValue = values.replace(/'([^']*?)'/g, '"$1"');
821
+
822
+ // Attempt parse
823
+ const parsed = JSON.parse(parseValue);
824
+
825
+ // Ensure parsed value is an array
826
+ if (!Array.isArray(parsed)) throw new Error('Not an array');
827
+
828
+ // Set values to parsed array
829
+ values = parsed;
830
+ } catch (err) {
831
+
832
+ // If parsing fails, treat as single value
833
+ values = [value];
834
+ }
835
+ }
836
+
837
+ // Handle a single number being passed
838
+ if (typeof values === 'number') {
839
+ values = [String(values)];
840
+ }
841
+
842
+ // Coerce each value to string and validate types
843
+ values.forEach((val, index) => {
844
+
845
+ // Throw an error for invalid value types
846
+ if (typeof val !== 'string' && typeof val !== 'number') {
847
+ throw new Error('Value contains invalid value type. Supported types are string and number.');
848
+ }
849
+
850
+ // Convert numbers to strings for consistency
851
+ if (typeof val === 'number') {
852
+ values[index] = String(val);
853
+ }
854
+ });
855
+
856
+ // Return the resulting array of string values
857
+ return values;
858
+ }
859
+
860
+ /**
861
+ * Returns whether two arrays of options contain the same elements.
862
+ * @param {AuroMenuOption[]} arr1 - First array of options.
863
+ * @param {AuroMenuOption[]} arr2 - Second array of options.
864
+ * @returns {boolean} True if arrays match, false otherwise.
865
+ */
866
+ optionsArraysMatch(arr1, arr2) {
867
+ if (arr1.length !== arr2.length) return false;
868
+
869
+ const set1 = new Set(arr1);
870
+ const set2 = new Set(arr2);
871
+
872
+ for (let item of set1) {
873
+ if (!set2.has(item)) {
874
+ return false;
875
+ }
876
+ }
877
+
878
+ return true;
879
+ }
880
+ }
881
+
882
+ const MenuContext = n$1('menu-context');
883
+
137
884
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
138
885
  // See LICENSE in the project root for license information.
139
886
 
@@ -221,18 +968,6 @@ class AuroLibraryRuntimeUtils {
221
968
  // See LICENSE in the project root for license information.
222
969
 
223
970
 
224
- /**
225
- * Validates if an option can be interacted with.
226
- * @private
227
- * @param {HTMLElement} option - The option to check.
228
- * @returns {boolean} True if option is interactive.
229
- */
230
- function isOptionInteractive(option) {
231
- return !option.hasAttribute('hidden') &&
232
- !option.hasAttribute('disabled') &&
233
- !option.hasAttribute('static');
234
- }
235
-
236
971
  /**
237
972
  * Helper method to dispatch custom events.
238
973
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -266,7 +1001,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
266
1001
  * SPDX-License-Identifier: BSD-3-Clause
267
1002
  */const e=e$1(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
268
1003
 
269
- /* eslint-disable no-underscore-dangle, no-magic-numbers, max-lines, no-extra-parens, max-depth */
1004
+ /* eslint-disable no-underscore-dangle */
270
1005
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
271
1006
  // See LICENSE in the project root for license information.
272
1007
 
@@ -280,12 +1015,16 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
280
1015
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
281
1016
  * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
282
1017
  * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
1018
+ * @event {CustomEvent<{ values: HTMLElement[] }>} auroMenu-deselectPrevented - Notifies that deselection was prevented and includes the affected options in `detail.values`.
283
1019
  * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
284
1020
  * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
285
1021
  * @slot loadingText - Text to show while loading attribute is set
286
1022
  * @slot loadingIcon - Icon to show while loading attribute is set
287
1023
  * @slot - Slot for insertion of menu options.
288
1024
  */
1025
+
1026
+ /* eslint-disable max-lines */
1027
+
289
1028
  class AuroMenu extends AuroElement {
290
1029
 
291
1030
  constructor() {
@@ -303,8 +1042,6 @@ class AuroMenu extends AuroElement {
303
1042
  */
304
1043
  this.size = "sm";
305
1044
 
306
- // Value of the selected options
307
- this.value = undefined;
308
1045
  // Currently selected option
309
1046
  this.optionSelected = undefined;
310
1047
  // String used for highlighting/filtering
@@ -317,24 +1054,13 @@ class AuroMenu extends AuroElement {
317
1054
  this.loading = false;
318
1055
  // Multi-select mode
319
1056
  this.multiSelect = false;
1057
+ // Allow deselecting of menu options
1058
+ this.allowDeselect = false;
1059
+ // Select all matching options when setting value in multi-select mode
1060
+ this.selectAllMatchingOptions = false;
320
1061
 
321
1062
  // Event Bindings
322
1063
 
323
- /**
324
- * @private
325
- */
326
- this.handleKeyDown = this.handleKeyDown.bind(this);
327
-
328
- /**
329
- * @private
330
- */
331
- this.handleMouseSelect = this.handleMouseSelect.bind(this);
332
-
333
- /**
334
- * @private
335
- */
336
- this.handleOptionHover = this.handleOptionHover.bind(this);
337
-
338
1064
  /**
339
1065
  * @private
340
1066
  */
@@ -361,6 +1087,14 @@ class AuroMenu extends AuroElement {
361
1087
  return {
362
1088
  ...super.properties,
363
1089
 
1090
+ /**
1091
+ * Allows deselecting an already selected option when clicked again in single-select mode.
1092
+ */
1093
+ allowDeselect: {
1094
+ type: Boolean,
1095
+ reflect: true,
1096
+ },
1097
+
364
1098
  /**
365
1099
  * When true, the entire menu and all options are disabled.
366
1100
  */
@@ -369,6 +1103,20 @@ class AuroMenu extends AuroElement {
369
1103
  reflect: true
370
1104
  },
371
1105
 
1106
+ /**
1107
+ * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
1108
+ */
1109
+ hasLoadingPlaceholder: {
1110
+ type: Boolean
1111
+ },
1112
+
1113
+ /**
1114
+ * @private
1115
+ */
1116
+ layout: {
1117
+ type: String
1118
+ },
1119
+
372
1120
  /**
373
1121
  * Indent level for submenus.
374
1122
  * @private
@@ -429,6 +1177,44 @@ class AuroMenu extends AuroElement {
429
1177
  type: Object
430
1178
  },
431
1179
 
1180
+ /**
1181
+ * Available menu options.
1182
+ * @readonly
1183
+ */
1184
+ options: {
1185
+ type: Array,
1186
+ reflect: false,
1187
+ attribute: false
1188
+ },
1189
+
1190
+ /**
1191
+ * Sets the size of the menu.
1192
+ * @type {'sm' | 'md'}
1193
+ * @default 'sm'
1194
+ */
1195
+ size: {
1196
+ type: String,
1197
+ reflect: true
1198
+ },
1199
+
1200
+ /**
1201
+ * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
1202
+ */
1203
+ selectAllMatchingOptions: {
1204
+ type: Boolean,
1205
+ reflect: true,
1206
+ },
1207
+
1208
+ /**
1209
+ * Sets the shape of the menu.
1210
+ * @type {'box' | 'round'}
1211
+ * @default 'box'
1212
+ */
1213
+ shape: {
1214
+ type: String,
1215
+ reflect: true
1216
+ },
1217
+
432
1218
  /**
433
1219
  * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
434
1220
  */
@@ -449,23 +1235,20 @@ class AuroMenu extends AuroElement {
449
1235
  }
450
1236
 
451
1237
  /**
452
- * This will register this element with the browser.
453
- * @param {string} [name="auro-menu"] - The name of element that you want to register to.
454
- *
455
- * @example
456
- * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
457
- *
1238
+ * @readonly
1239
+ * @returns {string} - Returns the label of the currently selected option(s).
458
1240
  */
459
- static register(name = "auro-menu") {
460
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
461
- }
1241
+ get currentLabel() {
1242
+ return this.menuService.currentLabel;
1243
+ };
462
1244
 
463
1245
  /**
464
1246
  * @readonly
465
1247
  * @returns {Array<HTMLElement>} - Returns the array of available menu options.
1248
+ * @deprecated Use `options` property instead.
466
1249
  */
467
- get options() {
468
- return this.items;
1250
+ get items() {
1251
+ return this.options;
469
1252
  }
470
1253
 
471
1254
  /**
@@ -476,101 +1259,145 @@ class AuroMenu extends AuroElement {
476
1259
  }
477
1260
 
478
1261
  /**
479
- * @param {number} value - Sets the index of the currently active option.
1262
+ * @param {number} value - Sets the index of the currently active option.
1263
+ */
1264
+ set index(value) {
1265
+ this.menuService.setHighlightedIndex(value);
1266
+ }
1267
+
1268
+ /**
1269
+ * This will register this element with the browser.
1270
+ * @param {string} [name="auro-menu"] - The name of the element that you want to register.
1271
+ *
1272
+ * @example
1273
+ * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
1274
+ *
1275
+ */
1276
+ static register(name = "auro-menu") {
1277
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
1278
+ }
1279
+
1280
+ /**
1281
+ * Formatted value based on `multiSelect` state.
1282
+ * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
1283
+ * @private
1284
+ * @returns {String|Array<String>}
1285
+ */
1286
+ get formattedValue() {
1287
+ return this.menuService.currentValue;
1288
+ }
1289
+
1290
+ /**
1291
+ * Gets the current property values for the menu service.
1292
+ * @private
1293
+ * @returns {Object}
480
1294
  */
481
- set index(value) {
482
- this.updateActiveOption(value);
1295
+ get propertyValues() {
1296
+ return {
1297
+ size: this.size,
1298
+ shape: this.shape,
1299
+ noCheckmark: this.nocheckmark,
1300
+ disabled: this.disabled
1301
+ };
483
1302
  }
484
1303
 
485
1304
  /**
486
- * Gets the currently selected options as an array.
487
- * @returns {Array<HTMLElement>}
1305
+ * Provides the menu context to child components.
1306
+ * Initializes the MenuService and subscribes to menu changes.
1307
+ * @protected
488
1308
  */
489
- get selectedOptions() {
490
- if (!this.optionSelected) {
491
- return [];
492
- }
493
- if (Array.isArray(this.optionSelected)) {
494
- return this.optionSelected;
1309
+ provideContext() {
1310
+ if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
1311
+ this.rootMenu = false;
1312
+ this.menuService = this.parentElement.menuService;
1313
+ this._contextProvider = this.parentElement._contextProvider;
1314
+ return;
495
1315
  }
496
- return [this.optionSelected];
1316
+
1317
+ this.menuService = new MenuService({host: this});
1318
+ this.menuService.setProperties(this.propertyValues);
1319
+ this.menuService.subscribe(this.handleMenuChange.bind(this));
1320
+ this._contextProvider = new i$2(this, {
1321
+ context: MenuContext,
1322
+ initialValue: this.menuService
1323
+ });
497
1324
  }
498
1325
 
499
1326
  /**
500
- * Gets the first selected option, or null if none.
501
- * @returns {HTMLElement|null}
1327
+ * Updates the currently active option in the menu.
1328
+ * @param {HTMLElement} option - The option to set as active.
502
1329
  */
503
- get selectedOption() {
504
- const opts = this.selectedOptions;
505
- return opts.length > 0 ? opts[0] : null;
1330
+ updateActiveOption(option) {
1331
+ this.menuService.setHighlightedOption(option);
506
1332
  }
507
1333
 
508
1334
  /**
509
- * @readonly
510
- * @returns {string} - Returns the label of the currently selected option(s).
1335
+ * Sets the internal value and manages update state.
1336
+ * @param {String|Array<String>} value - The value to set.
1337
+ * @protected
511
1338
  */
512
- get currentLabel() {
513
- if (!this.optionSelected) {
514
- return '';
515
- }
516
- if (Array.isArray(this.optionSelected)) {
517
- return this.optionSelected.map((opt) => opt.textContent).join(', ');
1339
+ setInternalValue(value) {
1340
+ if (this.value !== value) {
1341
+ this.internalUpdateInProgress = true;
1342
+ this.value = value;
1343
+
1344
+ setTimeout(() => {
1345
+ this.internalUpdateInProgress = false;
1346
+ });
518
1347
  }
519
- return this.optionSelected.textContent || '';
520
1348
  }
521
1349
 
522
1350
  /**
523
- * Formatted value based on `multiSelect` state.
524
- * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
525
- * @private
526
- * @returns {String|Array<String>}
1351
+ * Handles changes from the menu service and updates component state.
1352
+ * @param {Object} event - The event object from the menu service.
1353
+ * @protected
527
1354
  */
528
- get formattedValue() {
529
- if (this.multiSelect) {
530
- if (!this.value) {
531
- return undefined;
532
- }
533
- // Defensive: `value` is declared as String, but consumers may assign arrays or other
534
- // types programmatically. Normalize without throwing so render/update never hard-crashes.
535
- if (Array.isArray(this.value)) {
536
- return this.value;
537
- }
538
- if (typeof this.value !== 'string') {
539
- return [String(this.value)];
1355
+ handleMenuChange(event) {
1356
+ if (event.type === 'valueChange') {
1357
+
1358
+ // New option is array value or first option with fallback to undefined for empty array in all cases
1359
+ const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
1360
+ const newValue = event.stringValue;
1361
+
1362
+ // Check if the option or value has actually changed
1363
+ if (this.optionSelected !== newOption || this.stringValue !== newValue) {
1364
+ this.optionSelected = newOption;
1365
+ this.setInternalValue(newValue);
540
1366
  }
541
- if (this.value.startsWith("[")) {
542
- // Malformed JSON (e.g. a literal string that happens to start with "[") falls back
543
- // to a single-item array rather than throwing during render.
544
- try {
545
- const parsed = JSON.parse(this.value);
546
- return Array.isArray(parsed) ? parsed : [this.value];
547
- } catch {
548
- return [this.value];
1367
+
1368
+ // Notify components of selection change
1369
+ this.notifySelectionChange(event);
1370
+ }
1371
+
1372
+ if (event.type === 'highlightChange') {
1373
+ this.optionActive = event.option;
1374
+ this._index = event.index;
1375
+ }
1376
+
1377
+ if (event.type === 'optionsChange') {
1378
+ this.options = event.options;
1379
+ this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
1380
+ detail: {
1381
+ options: event.options
549
1382
  }
550
- }
551
- return [this.value];
1383
+ }));
552
1384
  }
553
- return this.value;
554
1385
  }
555
1386
 
556
1387
  /**
557
- * Selects options by value.
558
- * @param {string|string[]|undefined|null} value - The value(s) to select.
559
- * @public
1388
+ * Gets the currently selected options.
1389
+ * @returns {Array<HTMLElement>}
560
1390
  */
561
- selectByValue(value) {
562
- const isEmpty = value === undefined ||
563
- value === null ||
564
- (Array.isArray(value) && value.length === 0) ||
565
- (typeof value === 'string' && value.trim() === '');
566
-
567
- if (isEmpty) {
568
- this.clearSelection();
569
- return;
570
- }
1391
+ get selectedOptions() {
1392
+ return this.menuService ? this.menuService.selectedOptions : [];
1393
+ }
571
1394
 
572
- // `value` is a String property; stringify arrays so attribute reflection and `formattedValue` parsing stay correct.
573
- this.value = Array.isArray(value) ? JSON.stringify(value) : value;
1395
+ /**
1396
+ * Gets the first selected option, or null if none.
1397
+ * @returns {HTMLElement|null}
1398
+ */
1399
+ get selectedOption() {
1400
+ return this.menuService ? this.menuService.selectedOptions[0] : null;
574
1401
  }
575
1402
 
576
1403
  // Lifecycle Methods
@@ -578,7 +1405,9 @@ class AuroMenu extends AuroElement {
578
1405
  connectedCallback() {
579
1406
  super.connectedCallback();
580
1407
 
581
- this.addEventListener('keydown', this.handleKeyDown);
1408
+ this.provideContext();
1409
+
1410
+ // this.addEventListener('keydown', this.handleKeyDown);
582
1411
  this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
583
1412
  this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
584
1413
  this.addEventListener('slotchange', this.handleSlotChange);
@@ -586,7 +1415,7 @@ class AuroMenu extends AuroElement {
586
1415
  }
587
1416
 
588
1417
  disconnectedCallback() {
589
- this.removeEventListener('keydown', this.handleKeyDown);
1418
+ // this.removeEventListener('keydown', this.handleKeyDown);
590
1419
  this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
591
1420
  this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
592
1421
  this.removeEventListener('slotchange', this.handleSlotChange);
@@ -601,114 +1430,25 @@ class AuroMenu extends AuroElement {
601
1430
  this.initializeMenu();
602
1431
  }
603
1432
 
604
- /**
605
- * Sets an attribute that matches the default tag name if the tag name is not the default.
606
- * @param {string} tagName - The tag name to set as an attribute.
607
- * @private
608
- */
609
- setTagAttribute(tagName) {
610
- if (this.tagName.toLowerCase() !== tagName) {
611
- this.setAttribute(tagName, true);
612
- }
613
- }
614
1433
 
615
- // eslint-disable-next-line complexity
616
1434
  updated(changedProperties) {
617
1435
  super.updated(changedProperties);
618
1436
 
619
- // Single source of truth for 'auroMenu-selectedOption'. Selection handlers
620
- // mutate optionSelected and let Lit's update cycle dispatch here; the prior
621
- // .value comparison missed multi-select array changes and combined with the
622
- // explicit calls in handleDeselectState/makeSelection produced 2-3 duplicate
623
- // events per selection.
624
- if (changedProperties.has('optionSelected')) {
625
- this.notifySelectionChange();
626
- }
627
-
628
- // Reset selection if multiSelect mode changes
629
- if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
630
- this.clearSelection();
1437
+ // Apply value selection synchronously so that static-HTML fixtures
1438
+ // resolve within a single update cycle. The refactored selectByValue
1439
+ // no longer calls reset() first, so the destructive intermediate-event
1440
+ // cascade that originally required deferral is eliminated. If option
1441
+ // keys are not yet resolved (framework mount-order race), selectByValue
1442
+ // queues a bounded retry automatically via queuePendingValue.
1443
+ if (changedProperties.has('value') && !this.internalUpdateInProgress) {
1444
+ this.menuService.selectByValue(this.value);
631
1445
  }
632
1446
 
633
- if (changedProperties.has("value")) {
634
- // Ensure items are populated before matching. `firstUpdated` normally initializes them,
635
- // but a `value` change can arrive before slotted options are appended (e.g. parent sets
636
- // value before children render). Without this guard, matching against an empty `items`
637
- // would falsely dispatch `auroMenu-selectValueFailure` for valid initial values.
638
- if (!this.items) {
639
- this.initItems();
640
- }
641
-
642
- // Handle null/undefined/empty case — empty/whitespace strings clear selection
643
- // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
644
- if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
645
- this.clearSelection();
646
- } else {
647
- let newSelected = null;
648
-
649
- if (this.multiSelect) {
650
- // In multiselect mode, this.value should be an array of strings.
651
- // Defensive default: `formattedValue` can be undefined for unexpected value types,
652
- // and calling `.includes` on undefined would throw during reconciliation.
653
- const valueArray = this.formattedValue || [];
654
- const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
655
- newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
656
- } else {
657
- // In single-select mode, this.value should be a string
658
- const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
659
-
660
- if (matchingOption) {
661
- newSelected = matchingOption;
662
- this._index = this.items.indexOf(matchingOption);
663
- } else {
664
- // If no matching option found, reset selection
665
- newSelected = undefined;
666
- this._index = -1;
667
- }
668
- }
669
-
670
- // If no matching options were found in either mode
671
- if (!newSelected || (Array.isArray(newSelected) && newSelected.length === 0)) {
672
- // Defer failure when no options are loaded yet (async pattern: parent sets
673
- // value before slotted options render). handleSlotChange re-runs matching
674
- // once items arrive. Without this guard, a valid preselected value gets
675
- // cleared by the failure listener before options ever exist to match against.
676
- const hasItemsToMatch = this.items && this.items.length > 0;
677
- if (hasItemsToMatch) {
678
- // Clear state BEFORE dispatching so synchronous listeners (e.g. auro-select's
679
- // updateDisplayedValue) read fresh `optionSelected` rather than the stale prior
680
- // selection and re-render the old label.
681
- if (this.optionSelected !== undefined) {
682
- this.optionSelected = undefined;
683
- }
684
- this._index = -1;
685
- dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
686
- }
687
- } else if (!this.selectionEquals(this.optionSelected, newSelected)) {
688
- this.optionSelected = newSelected;
689
- }
690
- }
691
-
692
- // Update UI state
693
- this.updateItemsState(new Map([
694
- [
695
- 'optionSelected',
696
- true
697
- ]
698
- ]));
699
-
700
- // Notify of changes
701
- if (this.optionSelected !== undefined) {
702
- const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
703
- selected.forEach((opt) => {
704
- if (opt.hasAttribute('event')) {
705
- this.handleCustomEvent(opt);
706
- }
707
- });
708
- }
1447
+ // Handle loading state changes
1448
+ if (changedProperties.has('loading')) {
1449
+ this.setLoadingState(this.loading);
709
1450
  }
710
1451
 
711
- // Process all other UI updates
712
1452
  if (changedProperties.has('multiSelect') && this.rootMenu) {
713
1453
  if (this.multiSelect) {
714
1454
  this.setAttribute('aria-multiselectable', 'true');
@@ -716,129 +1456,30 @@ class AuroMenu extends AuroElement {
716
1456
  this.removeAttribute('aria-multiselectable');
717
1457
  }
718
1458
  }
719
-
720
- this.updateItemsState(changedProperties);
721
1459
  }
722
1460
 
723
1461
  /**
724
- * Updates the UI state and appearance of menu items based on changed properties.
1462
+ * Sets an attribute that matches the default tag name if the tag name is not the default.
1463
+ * @param {string} tagName - The tag name to set as an attribute.
725
1464
  * @private
726
- * @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
727
1465
  */
728
- updateItemsState(changedProperties) {
729
- // Handle loading state changes
730
- if (changedProperties.has('loading')) {
731
- this.setAttribute("aria-busy", this.loading);
732
- dispatchMenuEvent(this, "auroMenu-loadingChange", {
733
- loading: this.loading,
734
- hasLoadingPlaceholder: this.hasLoadingPlaceholder
735
- });
736
- }
737
-
738
- if (!this.items) {
739
- return;
740
- }
741
-
742
- // Handle noCheckmark propagation to all menus and options.
743
- // Propagate in both directions so toggling back to false also clears nested elements
744
- // (otherwise nested menus/options would stay stuck in no-checkmark mode).
745
- if (changedProperties.has('noCheckmark')) {
746
- this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => {
747
- element.noCheckmark = this.noCheckmark;
748
- });
749
- }
750
-
751
- // Handle layout propagation to all menus and options.
752
- // Skip elements that had size/shape set by the author (marked in initItems);
753
- // explicit per-option overrides must survive menu-level propagation.
754
- const propagationTargets = this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]');
755
- [
756
- 'size',
757
- 'shape'
758
- ].forEach((prop) => {
759
- if (changedProperties.has(prop)) {
760
- const explicitKey = prop === 'size' ? '_explicitSize' : '_explicitShape';
761
- propagationTargets.forEach((el) => {
762
- if (el[explicitKey]) {
763
- return;
764
- }
765
- el.setAttribute(prop, this[prop]);
766
- });
767
- }
768
- });
769
-
770
- // Regex for matchWord if needed
771
- let regexWord = null;
772
-
773
- if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
774
- const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
775
- regexWord = new RegExp(escapedWord, 'giu');
1466
+ setTagAttribute(tagName) {
1467
+ if (this.tagName.toLowerCase() !== tagName) {
1468
+ this.setAttribute(tagName, true);
776
1469
  }
1470
+ }
777
1471
 
778
- // Handle direct item updates
779
- this.items.forEach((option) => {
780
- // Update selection if option or value changed
781
- if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
782
- const isSelected = this.isOptionSelected(option);
783
- option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
784
-
785
- // Add/remove selected attribute based on state
786
- if (isSelected) {
787
- option.setAttribute('selected', '');
788
- } else {
789
- option.removeAttribute('selected');
790
- }
791
- }
792
-
793
- // Update text highlighting if matchWord changed
794
- if (changedProperties.has('matchWord') && regexWord &&
795
- isOptionInteractive(option) && !option.hasAttribute('persistent')) {
796
- // Create nested spacers
797
- const nested = option.querySelectorAll('.nestingSpacer');
798
-
799
- const displayValueEl = option.querySelector('[slot="displayValue"]');
800
- if (displayValueEl) {
801
- option.removeChild(displayValueEl);
802
- }
803
-
804
- // Build highlighted content via DOM APIs rather than innerHTML so any
805
- // `<`, `>`, or `&` in the option text renders literally (prevents XSS).
806
- const originalText = option.textContent;
807
- option.textContent = '';
808
-
809
- nested.forEach(() => {
810
- const spacer = document.createElement('span');
811
- spacer.className = 'nestingSpacer';
812
- option.appendChild(spacer);
813
- });
814
-
815
- const matches = [...originalText.matchAll(regexWord)];
816
- let lastIndex = 0;
817
- matches.forEach((match) => {
818
- const [matchText] = match;
819
- if (match.index > lastIndex) {
820
- option.appendChild(document.createTextNode(originalText.slice(lastIndex, match.index)));
821
- }
822
- const strong = document.createElement('strong');
823
- strong.textContent = matchText;
824
- option.appendChild(strong);
825
- lastIndex = match.index + matchText.length;
826
- });
827
- if (lastIndex < originalText.length) {
828
- option.appendChild(document.createTextNode(originalText.slice(lastIndex)));
829
- }
830
-
831
- if (displayValueEl) {
832
- option.append(displayValueEl);
833
- }
834
- }
835
-
836
- // Update disabled state
837
- if (changedProperties.has('disabled')) {
838
- option.disabled = this.disabled;
839
- }
1472
+ /**
1473
+ * Sets the loading state and dispatches a loading change event.
1474
+ * @param {boolean} isLoading - Whether the menu is loading.
1475
+ * @protected
1476
+ */
1477
+ setLoadingState(isLoading) {
1478
+ this.setAttribute("aria-busy", isLoading);
1479
+ dispatchMenuEvent(this, "auroMenu-loadingChange", {
1480
+ loading: isLoading,
1481
+ hasLoadingPlaceholder: this.hasLoadingPlaceholder
840
1482
  });
841
-
842
1483
  }
843
1484
 
844
1485
  // Init Methods
@@ -848,7 +1489,6 @@ class AuroMenu extends AuroElement {
848
1489
  * @private
849
1490
  */
850
1491
  initializeMenu() {
851
- this.initItems();
852
1492
  if (this.rootMenu) {
853
1493
  this.setAttribute('role', 'listbox');
854
1494
  this.setAttribute('root', '');
@@ -858,117 +1498,15 @@ class AuroMenu extends AuroElement {
858
1498
  }
859
1499
  }
860
1500
 
861
- // Must run for nested menus too — sets level, role="group", and aria-label="submenu" based on parent.
862
1501
  this.handleNestedMenus(this);
863
1502
  }
864
1503
 
865
1504
  /**
866
- * Initializes menu items and their attributes.
867
- * @private
868
- */
869
- initItems() {
870
- const found = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
871
- this.items = found.length > 0 ? found : undefined;
872
-
873
- // Record whether each propagation target had an author-set size/shape attribute
874
- // BEFORE menu has had a chance to propagate. Marker is set once per element so a
875
- // later menu-driven setAttribute doesn't re-flag the element as "explicit".
876
- this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((el) => {
877
- if (el._explicitSize === undefined) {
878
- el._explicitSize = el.hasAttribute('size');
879
- }
880
- if (el._explicitShape === undefined) {
881
- el._explicitShape = el.hasAttribute('shape');
882
- }
883
- });
884
-
885
- if (this.noCheckmark) {
886
- this.updateItemsState(new Map([
887
- [
888
- 'noCheckmark',
889
- true
890
- ]
891
- ]));
892
- }
893
-
894
- this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
895
- detail: {
896
- options: this.items
897
- }
898
- }));
899
- }
900
-
901
- // Logic Methods
902
-
903
- /**
904
- * Updates menu state when an option is selected.
905
- * @private
906
- * @param {HTMLElement} option - The option element to select.
907
- */
908
- handleSelectState(option) {
909
- if (this.multiSelect) {
910
- const currentValue = this.formattedValue || [];
911
- const currentSelected = this.optionSelected || [];
912
-
913
- if (!currentValue.includes(option.value)) {
914
- this.value = JSON.stringify([
915
- ...currentValue,
916
- option.value
917
- ]);
918
- }
919
- if (!currentSelected.includes(option)) {
920
- this.optionSelected = [
921
- ...currentSelected,
922
- option
923
- ];
924
- }
925
- } else {
926
- this.value = option.value;
927
- this.optionSelected = option;
928
- }
929
-
930
- this._index = this.items.indexOf(option);
931
- }
932
-
933
- /**
934
- * Deselects a menu option and updates related state.
935
- * @private
936
- * @param {HTMLElement} option - The menuoption to be deselected.
1505
+ * Selects the currently highlighted option.
1506
+ * @protected
937
1507
  */
938
- handleDeselectState(option) {
939
- if (this.multiSelect) {
940
- // Remove this option from array
941
- const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
942
-
943
- // If array is empty after removal, set back to undefined
944
- if (newFormattedValue && newFormattedValue.length === 0) {
945
- this.value = undefined;
946
- } else {
947
- this.value = JSON.stringify(newFormattedValue);
948
- }
949
-
950
- this.optionSelected = this.optionSelected.filter((val) => val !== option);
951
- if (this.optionSelected.length === 0) {
952
- this.optionSelected = undefined;
953
- }
954
- } else {
955
- // For single-select: Back to undefined when deselected
956
- this.value = undefined;
957
- this.optionSelected = undefined;
958
- }
959
-
960
- // Update the index tracking
961
- this._index = this.items.indexOf(option);
962
-
963
- // Update UI to reflect changes
964
- this.updateItemsState(new Map([
965
- [
966
- 'optionSelected',
967
- true
968
- ]
969
- ]));
970
-
971
- // Notification happens via updated() when optionSelected changes above.
1508
+ makeSelection() {
1509
+ this.menuService.selectHighlightedOption();
972
1510
  }
973
1511
 
974
1512
  /**
@@ -987,18 +1525,7 @@ class AuroMenu extends AuroElement {
987
1525
  * @public
988
1526
  */
989
1527
  reset() {
990
- // Reset to undefined - initial state
991
- this.value = undefined;
992
- this.optionSelected = undefined;
993
- this._index = -1;
994
-
995
- // Reset UI state
996
- this.updateItemsState(new Map([
997
- [
998
- 'optionSelected',
999
- true
1000
- ]
1001
- ]));
1528
+ this.menuService.reset();
1002
1529
 
1003
1530
  // Dispatch reset event
1004
1531
  dispatchMenuEvent(this, 'auroMenu-selectValueReset');
@@ -1010,239 +1537,44 @@ class AuroMenu extends AuroElement {
1010
1537
  * @param {HTMLElement} menu - Root menu element.
1011
1538
  */
1012
1539
  handleNestedMenus(menu) {
1013
- // Slot changes can fire on a menu mid-teardown (e.g. while a parent menu
1014
- // is removing children to rebuild its content). In that window the menu
1015
- // is detached and parentElement is null. Skip — handleNestedMenus will
1016
- // run again when the menu is reattached.
1017
- if (!menu.parentElement) {
1018
- return;
1019
- }
1020
-
1021
1540
  menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
1022
1541
 
1023
- if (menu.level > 0) {
1024
- menu.setAttribute('role', 'group');
1025
- menu.removeAttribute("root");
1026
- if (!menu.hasAttribute('aria-label')) {
1027
- menu.setAttribute('aria-label', 'submenu');
1028
- }
1029
- }
1030
-
1031
- const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
1032
- options.forEach((option) => {
1033
- const regex = new RegExp(this.nestingSpacer, "gu");
1034
- option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
1035
- });
1036
- }
1037
-
1038
- // Event Handlers
1039
-
1040
- /**
1041
- * Makes a selection based on the current index.
1042
- * @private
1043
- */
1044
- makeSelection() {
1045
- if (!this.items) {
1046
- this.initItems();
1047
- }
1048
-
1049
- // Get currently selected menu option based on index
1050
- const option = this.items ? this.items[this._index] : undefined;
1051
-
1052
- // Return early if option is not interactive
1053
- if (!option || !isOptionInteractive(option)) {
1054
- return;
1055
- }
1056
-
1057
- // Handle custom events first
1058
- if (option.hasAttribute('event')) {
1059
- this.handleCustomEvent(option);
1060
- return;
1061
- }
1062
-
1063
- if (this.multiSelect) {
1064
- // In multiselect, toggle individual selections
1065
- this.toggleOption(option);
1066
- // In single select, only handle selection of new options
1067
- } else if (!this.isOptionSelected(option)) {
1068
- this.clearSelection();
1069
- this.handleSelectState(option);
1070
- } else {
1071
- // Re-selecting the already-selected option in single-select doesn't change
1072
- // state, so updated() won't fire. Notify explicitly so consumers (e.g.
1073
- // auro-select closing its dropdown on Enter) still get the event.
1074
- this.notifySelectionChange();
1075
- }
1076
- }
1077
-
1078
- /**
1079
- * Toggle the selection state of the menuoption.
1080
- * @private
1081
- * @param {HTMLElement} option - The menuoption to toggle.
1082
- */
1083
- toggleOption(option) {
1084
- const isCurrentlySelected = this.isOptionSelected(option);
1085
-
1086
- if (isCurrentlySelected) {
1087
- this.handleDeselectState(option);
1088
- } else if (option.value === undefined || option.value === '') {
1089
- dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
1090
- } else {
1091
- this.handleSelectState(option);
1092
- }
1093
- }
1094
-
1095
- /**
1096
- * Handles keyboard navigation and selection.
1097
- * @private
1098
- * @param {KeyboardEvent} event - The keydown event.
1099
- */
1100
- handleKeyDown(event) {
1101
- switch (event.key) {
1102
- case "ArrowDown":
1103
- event.preventDefault();
1104
- this.navigateOptions('down');
1105
- break;
1106
- case "ArrowUp":
1107
- event.preventDefault();
1108
- this.navigateOptions('up');
1109
- break;
1110
- case "Tab":
1111
- // Do not preventDefault on Tab so focus can move out of the menu (a11y: avoid trapping keyboard users).
1112
- this.makeSelection();
1113
- break;
1114
- case "Enter":
1115
- event.preventDefault();
1116
- this.makeSelection();
1117
- break;
1118
- }
1119
- }
1120
-
1121
- /**
1122
- * Handles option selection via click events from menuoptions.
1123
- * @private
1124
- * @param {CustomEvent} event - The auroMenuOption-click event.
1125
- */
1126
- handleMouseSelect(event) {
1127
- if (!this.rootMenu || this.disabled) {
1128
- return;
1129
- }
1130
-
1131
- const option = event.detail;
1132
- if (option && this.items) {
1133
- const idx = this.items.indexOf(option);
1134
- if (idx >= 0) {
1135
- this._index = idx;
1136
- this.makeSelection();
1137
- }
1138
- }
1139
- }
1140
-
1141
- /**
1142
- * Handles option hover events.
1143
- * @private
1144
- * @param {CustomEvent} event - Event object from the browser.
1145
- */
1146
- handleOptionHover(event) {
1147
- const option = event.detail;
1148
- if (this.items) {
1149
- const idx = this.items.indexOf(option);
1150
- if (idx >= 0) {
1151
- this.updateActiveOption(idx);
1152
- }
1153
- }
1154
- }
1155
-
1156
- /**
1157
- * Handles slot change events.
1158
- * @private
1159
- */
1160
- handleSlotChange() {
1161
- if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
1162
- this.rootMenu = false;
1163
- }
1164
-
1165
- // Nested menus must also reinitialize so items, level, role="group", and aria-label refresh on content changes.
1166
- // Root-specific attributes (listbox/root/aria-multiselectable) remain gated by `rootMenu` inside initializeMenu.
1167
- this.initializeMenu();
1168
-
1169
- // When options arrive after `value` was set (async option load), re-run matching
1170
- // against the now-populated items. The earlier updated('value') call deferred
1171
- // the failure dispatch because items were empty; this triggers the match now.
1172
- const hasPendingValue = this.value !== undefined &&
1173
- this.value !== null &&
1174
- !(typeof this.value === 'string' && this.value.trim() === '');
1175
- if (hasPendingValue && this.items && this.items.length > 0 && this.optionSelected === undefined) {
1176
- this.requestUpdate('value', undefined);
1542
+ if (menu.level > 0) {
1543
+ menu.setAttribute('role', 'group');
1544
+ menu.removeAttribute("root");
1545
+ if (!menu.hasAttribute('aria-label')) {
1546
+ menu.setAttribute('aria-label', 'submenu');
1547
+ }
1177
1548
  }
1549
+
1550
+ const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
1551
+ options.forEach((option) => {
1552
+ const regex = new RegExp(this.nestingSpacer, "gu");
1553
+ option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
1554
+ });
1178
1555
  }
1179
1556
 
1180
1557
  /**
1181
- * Navigates through options using keyboard.
1182
- * @param {string} direction - 'up' or 'down'.
1558
+ * Navigates the menu options in the specified direction.
1559
+ * @param {'up'|'down'} direction - The direction to navigate.
1560
+ * @protected
1183
1561
  */
1184
1562
  navigateOptions(direction) {
1185
- // Return early if no items exist
1186
- if (!this.items || !this.items.length) {
1187
- return;
1188
- }
1189
-
1190
- let newIndex = this._index;
1191
- if (newIndex === -1 && direction === 'up') {
1192
- newIndex = this.items.length;
1193
- }
1194
- const increment = direction === 'down' ? 1 : -1;
1195
- const maxIterations = this.items.length;
1196
- let iterations = 0;
1197
- let foundInteractiveOption = false;
1198
-
1199
- do {
1200
- newIndex = (newIndex + increment + this.items.length) % this.items.length;
1201
- iterations += 1;
1202
-
1203
- // Check if current option is interactive
1204
- const currentOption = this.items[newIndex];
1205
- if (isOptionInteractive(currentOption)) {
1206
- foundInteractiveOption = true;
1207
- break;
1208
- }
1209
-
1210
- // Break if all options were checked
1211
- if (iterations >= maxIterations) {
1212
- break;
1213
- }
1214
- } while (iterations < maxIterations);
1215
-
1216
- // Update only if an interactive option was found
1217
- if (foundInteractiveOption) {
1218
- this.updateActiveOption(newIndex);
1563
+ if (direction === 'up') {
1564
+ this.menuService.highlightPrevious();
1565
+ } else if (direction === 'down') {
1566
+ this.menuService.highlightNext();
1219
1567
  }
1220
1568
  }
1221
1569
 
1222
1570
  /**
1223
- * Updates the active option state and dispatches events.
1224
- * Accepts either a numeric index or an HTMLElement option.
1225
- * @param {number|HTMLElement} indexOrOption - Index of the option or the option element to make active.
1571
+ * Handles slot change events.
1572
+ * @private
1226
1573
  */
1227
- updateActiveOption(indexOrOption) {
1228
- let idx = -1;
1229
-
1230
- if (typeof indexOrOption === 'number') {
1231
- idx = indexOrOption;
1232
- } else {
1233
- idx = this.items ? this.items.indexOf(indexOrOption) : -1;
1234
- }
1235
-
1236
- if (!this.items || !this.items[idx]) {
1237
- return;
1574
+ handleSlotChange() {
1575
+ if (this.rootMenu) {
1576
+ this.initializeMenu();
1238
1577
  }
1239
-
1240
- this.items.forEach((item) => item.classList.remove('active'));
1241
- this.items[idx].classList.add('active');
1242
- this.optionActive = this.items[idx];
1243
- this._index = idx;
1244
-
1245
- dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[idx]);
1246
1578
  }
1247
1579
 
1248
1580
  /**
@@ -1252,8 +1584,8 @@ class AuroMenu extends AuroElement {
1252
1584
  */
1253
1585
  handleCustomEvent(option) {
1254
1586
  const eventName = option.getAttribute('event');
1255
- dispatchMenuEvent(this, eventName, { option });
1256
- dispatchMenuEvent(this, 'auroMenu-customEventFired', { option });
1587
+ dispatchMenuEvent(this, eventName);
1588
+ dispatchMenuEvent(this, 'auroMenu-customEventFired');
1257
1589
  }
1258
1590
 
1259
1591
  /**
@@ -1261,33 +1593,14 @@ class AuroMenu extends AuroElement {
1261
1593
  * @param {any} source - The source that triggers this event.
1262
1594
  * @private
1263
1595
  */
1264
- notifySelectionChange(source = undefined) {
1265
- dispatchMenuEvent(this, 'auroMenu-selectedOption', { source });
1266
- }
1267
-
1268
- /**
1269
- * @private
1270
- * @param {any} current - Current selection.
1271
- * @param {any} next - New selection to compare.
1272
- * @returns {boolean} Whether the selections are equal.
1273
- */
1274
- selectionEquals(current, next) {
1275
- if (current === next) {
1276
- return true;
1277
- }
1278
- if (!current || !next) {
1279
- return false;
1280
- }
1281
- if (Array.isArray(current) && Array.isArray(next)) {
1282
- if (current.length !== next.length) {
1283
- return false;
1284
- }
1285
- // Compare as sets — selection order may differ from DOM order after value-driven
1286
- // reconciliation, but the selected set is what matters for change detection.
1287
- const nextSet = new Set(next);
1288
- return current.every((item) => nextSet.has(item));
1289
- }
1290
- return false;
1596
+ notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
1597
+ dispatchMenuEvent(this, 'auroMenu-selectedOption', {
1598
+ value,
1599
+ stringValue,
1600
+ keys,
1601
+ options,
1602
+ reason
1603
+ });
1291
1604
  }
1292
1605
 
1293
1606
  /**
@@ -1302,6 +1615,7 @@ class AuroMenu extends AuroElement {
1302
1615
  }
1303
1616
 
1304
1617
  if (this.multiSelect) {
1618
+ // In multi-select mode, check if the option is in the selected array
1305
1619
  return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
1306
1620
  }
1307
1621
 
@@ -1366,9 +1680,9 @@ class AuroMenu extends AuroElement {
1366
1680
  */
1367
1681
  const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1],t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u$1=n(b);
1368
1682
 
1369
- var styleCss = i$5`.body-default{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-default-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.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-lg-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{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-sm-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.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-xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-weight:var(--wcss-body-2xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);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-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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-weight:var(--wcss-heading-xs-weight, 300);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-2xs-weight, 300);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);text-transform:uppercase}.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-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);text-transform:uppercase}:host{cursor:pointer;user-select:none;text-overflow:ellipsis;max-width:100dvw}:host .wrapper{display:flex;align-items:center;height:var(--ds-size-400, 2rem);padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
1683
+ var styleCss = i$6`.body-default{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-default-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.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-lg-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{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-sm-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.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-xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-weight:var(--wcss-body-2xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);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-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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-weight:var(--wcss-heading-xs-weight, 300);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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-weight:var(--wcss-heading-2xs-weight, 300);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);text-transform:uppercase}.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-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);text-transform:uppercase}.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-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);text-transform:uppercase}:host{cursor:pointer;user-select:none;text-overflow:ellipsis;max-width:100dvw}:host .wrapper{display:flex;align-items:center;height:var(--ds-size-400, 2rem);padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
1370
1684
 
1371
- var colorCss = i$5`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
1685
+ var colorCss = i$6`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
1372
1686
 
1373
1687
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1374
1688
  // See LICENSE in the project root for license information.
@@ -1416,10 +1730,10 @@ class AuroDependencyVersioning {
1416
1730
  * SPDX-License-Identifier: BSD-3-Clause
1417
1731
  */const o=o=>o??A;
1418
1732
 
1419
- class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>',g='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>';class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const f=new Map,w=(t,a={})=>{const e=a.responseParser||(t=>t.text());return f.has(t)||f.set(t,fetch(t).then(e)),f.get(t)};var z=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
1420
- `;class y extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return z}async fetchIcon(t,a){let e="";e="logos"===t?await w(`${this.uri}/${t}/${a}.svg`):await w(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=this.name?.startsWith("tail-")?g:u;this.svg=(new DOMParser).parseFromString(t,"text/html").body.querySelector("svg");}}}catch(t){this.svg=void 0;}}}i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
1421
- `;var M=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
1422
- `;var _=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
1733
+ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>',g='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>';class m extends i$3{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const f=new Map,w=(t,a={})=>{const e=a.responseParser||(t=>t.text());return f.has(t)||f.set(t,fetch(t).then(e)),f.get(t)};var z=i$6`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
1734
+ `;class y extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return z}async fetchIcon(t,a){let e="";e="logos"===t?await w(`${this.uri}/${t}/${a}.svg`):await w(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=this.name?.startsWith("tail-")?g:u;this.svg=(new DOMParser).parseFromString(t,"text/html").body.querySelector("svg");}}}catch(t){this.svg=void 0;}}}i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
1735
+ `;var M=i$6`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
1736
+ `;var _=i$6`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
1423
1737
  `;class k extends y{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...y.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [y.styles,M,z,_]}static register(t="auro-icon"){p.prototype.registerComponent(t,k);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b`
1424
1738
  <div class="componentWrapper">
1425
1739
  <div
@@ -1457,12 +1771,37 @@ let menuOptionIdCounter = 0;
1457
1771
  * @slot default - The default slot for the menu option text.
1458
1772
  *
1459
1773
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
1460
- * @event auroMenuOption-click - Notifies that this option has been clicked.
1461
1774
  */
1462
1775
  class AuroMenuOption extends AuroElement {
1776
+
1777
+ /**
1778
+ * This will register this element with the browser.
1779
+ * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
1780
+ *
1781
+ * @example
1782
+ * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
1783
+ *
1784
+ */
1785
+ static register(name = "auro-menuoption") {
1786
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
1787
+ }
1788
+
1789
+ /**
1790
+ * Returns whether the menu option is currently active and selectable.
1791
+ * An option is considered active if it is not hidden, not disabled, and not static.
1792
+ * @returns {boolean} True if the option is active, false otherwise.
1793
+ */
1794
+ get isActive() {
1795
+ return !this.hasAttribute('hidden') &&
1796
+ !this.disabled &&
1797
+ !this.hasAttribute('static');
1798
+ }
1799
+
1463
1800
  constructor() {
1464
1801
  super();
1465
1802
 
1803
+ this.bindEvents();
1804
+
1466
1805
  /**
1467
1806
  * @private
1468
1807
  */
@@ -1487,57 +1826,109 @@ class AuroMenuOption extends AuroElement {
1487
1826
  /**
1488
1827
  * @private
1489
1828
  */
1490
- this.tabIndex = -1;
1829
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
1830
+
1831
+ // Initialize context-related properties
1832
+ this.menuService = null;
1833
+ this.unsubscribe = null;
1491
1834
 
1492
1835
  /**
1493
1836
  * @private
1494
1837
  */
1495
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1496
-
1497
- this.addEventListener('click', this.handleClick.bind(this));
1838
+ this.handleMenuChange = this.handleMenuChange.bind(this);
1498
1839
  }
1499
1840
 
1500
1841
  static get properties() {
1501
1842
  return {
1502
1843
  ...super.properties,
1503
- noCheckmark: {
1844
+
1845
+ /**
1846
+ * When true, disables the menu option.
1847
+ */
1848
+ disabled: {
1504
1849
  type: Boolean,
1505
1850
  reflect: true
1506
1851
  },
1507
- selected: {
1508
- type: Boolean,
1852
+
1853
+ /**
1854
+ * @private
1855
+ */
1856
+ event: {
1857
+ type: String,
1509
1858
  reflect: true
1510
1859
  },
1511
- disabled: {
1512
- type: Boolean,
1513
- reflect: true
1860
+
1861
+ /**
1862
+ * @private
1863
+ */
1864
+ layout: {
1865
+ type: String
1514
1866
  },
1515
- value: {
1867
+
1868
+ /**
1869
+ * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
1870
+ */
1871
+ key: {
1516
1872
  type: String,
1517
1873
  reflect: true
1518
1874
  },
1519
- tabIndex: {
1520
- type: Number,
1521
- reflect: true
1875
+
1876
+ /**
1877
+ * @private
1878
+ */
1879
+ menuService: {
1880
+ type: Object,
1881
+ state: true
1522
1882
  },
1523
1883
 
1524
1884
  /**
1525
1885
  * @private
1526
1886
  */
1527
- event: {
1887
+ matchWord: {
1528
1888
  type: String,
1889
+ state: true
1890
+ },
1891
+
1892
+ /**
1893
+ * @private
1894
+ */
1895
+ noCheckmark: {
1896
+ type: Boolean,
1529
1897
  reflect: true
1530
1898
  },
1531
1899
 
1532
1900
  /**
1533
- * When true, marks this option as the "no matching results" placeholder shown by combobox
1534
- * when the user's input does not match any available options.
1901
+ * When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
1535
1902
  */
1536
1903
  noMatch: {
1537
1904
  type: Boolean,
1538
1905
  reflect: true,
1539
1906
  attribute: 'nomatch'
1540
1907
  },
1908
+
1909
+ /**
1910
+ * Specifies that an option is selected.
1911
+ */
1912
+ selected: {
1913
+ type: Boolean,
1914
+ reflect: true
1915
+ },
1916
+
1917
+ /**
1918
+ * Specifies the tab index of the menu option.
1919
+ */
1920
+ tabIndex: {
1921
+ type: Number,
1922
+ reflect: true
1923
+ },
1924
+
1925
+ /**
1926
+ * Specifies the value to be sent to a server.
1927
+ */
1928
+ value: {
1929
+ type: String,
1930
+ reflect: true
1931
+ },
1541
1932
  };
1542
1933
  }
1543
1934
 
@@ -1549,48 +1940,41 @@ class AuroMenuOption extends AuroElement {
1549
1940
  ];
1550
1941
  }
1551
1942
 
1552
- /**
1553
- * This will register this element with the browser.
1554
- * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
1555
- *
1556
- * @example
1557
- * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
1558
- *
1559
- */
1560
- static register(name = "auro-menuoption") {
1561
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
1562
- }
1563
-
1564
- /**
1565
- * Returns whether the menu option is currently active and selectable.
1566
- * @returns {boolean}
1567
- */
1568
- get isActive() {
1569
- return !this.hasAttribute('hidden') &&
1570
- !this.disabled &&
1571
- !this.hasAttribute('static');
1572
- }
1573
-
1574
1943
  connectedCallback() {
1575
1944
  super.connectedCallback();
1576
1945
 
1946
+ // Add the tag name as an attribute if it is different than the component name
1947
+ // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
1577
1948
  this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
1949
+
1950
+ // Set up context consumption in connectedCallback
1951
+ this._contextConsumer = new s$2(this, {
1952
+ context: MenuContext,
1953
+ callback: this.attachTo.bind(this),
1954
+ subscribe: true
1955
+ });
1956
+
1957
+ // Establish the key property as early as possible.
1958
+ // When a framework (e.g. Svelte) inserts the element into the DOM before
1959
+ // setting its `value` property, both `getAttribute('value')` and
1960
+ // `getAttribute('key')` return null here. Setting `this.key = null`
1961
+ // would block the fallback in `updated()` that assigns key from the
1962
+ // value property (the guard checked `=== undefined`). Only assign key
1963
+ // if at least one source attribute is actually present so that the
1964
+ // `updated()` fallback can run when the value property arrives later.
1965
+ const valueAttr = this.getAttribute('value');
1966
+ const keyAttr = this.getAttribute('key');
1967
+ const resolvedKey = keyAttr !== null ? keyAttr : valueAttr;
1968
+ if (resolvedKey !== null) {
1969
+ this.key = resolvedKey;
1970
+ }
1578
1971
  }
1579
1972
 
1580
1973
  firstUpdated() {
1974
+ // Add the tag name as an attribute if it is different than the component name
1581
1975
  this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
1582
1976
 
1583
- // firstUpdated can fire on an option that was detached before the first
1584
- // render completed (e.g. dynamic-menu rebuilds clear and repopulate the
1585
- // menu mid-cycle). parentElement is null in that case — fall back to
1586
- // defaults; the next render after re-attachment will pick up real values.
1587
- if (!this.hasAttribute('size')) {
1588
- this.size = this.parentElement ? this.parentElement.getAttribute('size') || 'sm' : 'sm';
1589
- }
1590
- if (!this.hasAttribute('shape')) {
1591
- this.shape = this.parentElement ? this.parentElement.getAttribute('shape') || 'box' : 'box';
1592
- }
1593
-
1977
+ // Generate unique ID if not already set (required for aria-activedescendant)
1594
1978
  if (!this.id) {
1595
1979
  menuOptionIdCounter += 1;
1596
1980
  this.id = `menuoption-${menuOptionIdCounter}`;
@@ -1612,8 +1996,16 @@ class AuroMenuOption extends AuroElement {
1612
1996
  updated(changedProperties) {
1613
1997
  super.updated(changedProperties);
1614
1998
 
1999
+ // Update aria-selected attribute if selected changed
1615
2000
  if (changedProperties.has('selected')) {
2001
+
2002
+ // Update aria-selected attribute
1616
2003
  this.setAttribute('aria-selected', this.selected.toString());
2004
+
2005
+ // Update menu service selection state if this isn't an internal update
2006
+ if (this.internalUpdateInProgress !== true && this.menuService) {
2007
+ this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
2008
+ }
1617
2009
  }
1618
2010
 
1619
2011
  if (changedProperties.has('disabled')) {
@@ -1623,48 +2015,231 @@ class AuroMenuOption extends AuroElement {
1623
2015
  this.removeAttribute('aria-disabled');
1624
2016
  }
1625
2017
  }
2018
+
2019
+ if (changedProperties.has('active')) {
2020
+ this.updateActiveClasses();
2021
+ }
2022
+
2023
+ // Update text highlight if matchWord changed
2024
+ if (changedProperties.has('matchWord')) {
2025
+ this.updateTextHighlight();
2026
+ }
2027
+
2028
+ // Set the key to be the passed value if no key is provided.
2029
+ // Loose equality (== null) is intentional: it catches both null AND
2030
+ // undefined. When a framework (e.g. Svelte, React) inserts the element
2031
+ // before setting its value property, connectedCallback skips key
2032
+ // assignment because both attributes are null at that point. The Lit
2033
+ // property default for `key` is undefined (not null), so strict
2034
+ // === null would miss the case and the fallback would never run.
2035
+ if (changedProperties.has('value') && this.key == null) { // eslint-disable-line eqeqeq, no-eq-null
2036
+ this.key = this.value;
2037
+ }
2038
+ }
2039
+
2040
+ disconnectedCallback() {
2041
+ if (this.menuService) {
2042
+ this.menuService.unsubscribe(this.handleMenuChange);
2043
+ this.menuService.removeMenuOption(this);
2044
+ }
1626
2045
  }
1627
2046
 
1628
- handleMenuChange() {
1629
- // no-op: menu owns state in the distributed architecture
2047
+ /**
2048
+ * Sets up event listeners for user interaction with the menu option.
2049
+ * This function enables click and mouse enter events to trigger selection and highlighting logic.
2050
+ */
2051
+ bindEvents() {
2052
+ this.addEventListener('click', this.handleClick.bind(this));
2053
+ this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
1630
2054
  }
1631
2055
 
1632
- setSelected(value) {
1633
- this.selected = value;
2056
+ /**
2057
+ * Attaches this menu option to a menu service and subscribes to its events.
2058
+ * This method enables the option to participate in menu selection and highlighting logic.
2059
+ * @param {Object} service - The menu service instance to attach to.
2060
+ */
2061
+ attachTo(service) {
2062
+ if (!service) {
2063
+ return;
2064
+ }
2065
+ this.menuService = service;
2066
+ this.menuService.addMenuOption(this);
2067
+ this.menuService.subscribe(this.handleMenuChange);
1634
2068
  }
1635
2069
 
1636
- updateActive(active) {
1637
- this.active = active;
1638
- if (active) {
1639
- this.classList.add('active');
1640
- } else {
1641
- this.classList.remove('active');
2070
+ /**
2071
+ * Handles changes from the menu service and updates the option's state.
2072
+ * This function synchronizes the option's properties and selection/highlight state with menu events.
2073
+ * @param {Object} event - The event object from the menu service.
2074
+ */
2075
+ handleMenuChange(event) {
2076
+
2077
+ // Ignore events without a type or property
2078
+ if (!event || (!event.type && !event.property)) {
2079
+ return;
2080
+ }
2081
+
2082
+ // Update reactive properties based on event type
2083
+ if (event.property && Object.keys(AuroMenuOption.properties).includes(event.property)) {
2084
+ this[event.property] = event.value;
2085
+ }
2086
+
2087
+ // Handle highlight changes
2088
+ if (event.type === 'highlightChange') {
2089
+ const isActive = event.option === this;
2090
+ this.active = isActive;
2091
+ this.updateActiveClasses();
2092
+ }
2093
+
2094
+ if (event.type === 'stateChange') {
2095
+ const isSelected = event.selectedOptions.includes(this);
2096
+ this.setInternalSelected(isSelected);
2097
+ }
2098
+ }
2099
+
2100
+ /**
2101
+ * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
2102
+ * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
2103
+ * @param {boolean} isSelected - Whether the option should be marked as selected.
2104
+ */
2105
+ setInternalSelected(isSelected) {
2106
+ this.internalUpdateInProgress = true;
2107
+ this.selected = isSelected;
2108
+
2109
+ // Fire custom event if selected
2110
+ if (isSelected) {
2111
+ this.handleCustomEvent();
1642
2112
  }
2113
+
2114
+ setTimeout(() => {
2115
+ this.internalUpdateInProgress = false;
2116
+ }, 0);
2117
+ }
2118
+
2119
+ /**
2120
+ * Sets the selected state of the menu option.
2121
+ * This function updates whether the option is currently selected.
2122
+ * @param {boolean} isSelected - Whether the option should be marked as selected.
2123
+ * @deprecated Simply modify the `selected` property directly instead.
2124
+ */
2125
+ setSelected(isSelected) {
2126
+ this.selected = isSelected;
2127
+ }
2128
+
2129
+ /**
2130
+ * Updates the active state and visual highlighting of the menu option.
2131
+ * This function toggles the option's active status and applies or removes the active CSS class.
2132
+ * @param {boolean} isActive - Whether the option should be marked as active.
2133
+ * @deprecated Simply modify the `active` property directly instead.
2134
+ */
2135
+ updateActive(isActive) {
2136
+
2137
+ // Set active state
2138
+ this.active = isActive;
2139
+ this.updateActiveClasses();
2140
+ }
2141
+
2142
+ /**
2143
+ * Updates the CSS class for the menu option based on its active state.
2144
+ * This function adds or removes the 'active' class to visually indicate the option's active status.
2145
+ * @private
2146
+ */
2147
+ updateActiveClasses() {
2148
+ // Update class based on active state
2149
+ if (this.active) this.classList.add('active');
2150
+ else this.classList.remove('active');
1643
2151
  }
1644
2152
 
1645
- attachTo() {
1646
- // no-op: menu owns state in the distributed architecture
2153
+
2154
+ /**
2155
+ * Updates the visual highlighting of text within the menu option based on the current match word.
2156
+ * This function highlights matching text segments and manages nested spacers for display formatting.
2157
+ * @private
2158
+ */
2159
+ updateTextHighlight() {
2160
+
2161
+ // Regex for matchWord if needed
2162
+ let regexWord = null;
2163
+
2164
+ if (this.matchWord && this.matchWord.length) {
2165
+ const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
2166
+ regexWord = new RegExp(escapedWord, 'giu');
2167
+ }
2168
+
2169
+ // Update text highlighting if matchWord changed
2170
+ if (regexWord &&
2171
+ this.isActive && !this.hasAttribute('persistent')) {
2172
+ const nested = this.querySelectorAll('.nestingSpacer');
2173
+
2174
+ const displayValueEl = this.querySelector('[slot="displayValue"]');
2175
+ if (displayValueEl) {
2176
+ this.removeChild(displayValueEl);
2177
+ }
2178
+
2179
+ // Create nested spacers
2180
+ const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
2181
+
2182
+ // Update with spacers and matchWord
2183
+ this.innerHTML = nestingSpacerBundle +
2184
+ this.textContent.replace(
2185
+ regexWord,
2186
+ (match) => `<strong>${match}</strong>`
2187
+ );
2188
+ if (displayValueEl) {
2189
+ this.append(displayValueEl);
2190
+ }
2191
+ }
1647
2192
  }
1648
2193
 
1649
2194
  /**
1650
- * Handles click events on the menu option.
2195
+ * Handles click events on the menu option, toggling its selected state.
2196
+ * This function dispatches a click event and updates selection if the option is not disabled.
1651
2197
  * @private
1652
2198
  */
1653
2199
  handleClick() {
2200
+ if (!this.disabled && !this.menuService?.disabled) {
2201
+ this.dispatchClickEvent();
2202
+ this.selected = !this.selected;
2203
+ }
2204
+ }
2205
+
2206
+ /**
2207
+ * Handles mouse enter events to highlight the menu option.
2208
+ * This function updates the menu service to set this option as the currently highlighted item if not disabled.
2209
+ * @private
2210
+ */
2211
+ handleMouseEnter() {
1654
2212
  if (!this.disabled) {
1655
- // Pure event emitter: the parent menu owns selection state and will
1656
- // update `selected` via setSelected(). Toggling here desyncs the option
1657
- // UI from auro-menu.optionSelected (e.g. single-select re-click on the
1658
- // already-selected option would flip the option off while the menu keeps it on).
1659
- this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
1660
- bubbles: true,
1661
- cancelable: false,
1662
- composed: true,
1663
- detail: this
1664
- }));
2213
+ this.menuService.setHighlightedOption(this);
2214
+ }
2215
+ }
2216
+
2217
+ /**
2218
+ * Dispatches custom events defined for this menu option.
2219
+ * This function notifies listeners when a custom event is triggered by the option.
2220
+ * @private
2221
+ */
2222
+ handleCustomEvent() {
2223
+ if (this.event) {
2224
+ dispatchMenuEvent(this, this.event, { option: this });
2225
+ dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
1665
2226
  }
1666
2227
  }
1667
2228
 
2229
+ /**
2230
+ * Dispatches a click event for this menu option.
2231
+ * This function notifies listeners that the option has been clicked.
2232
+ * @private
2233
+ */
2234
+ dispatchClickEvent() {
2235
+ this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
2236
+ bubbles: true,
2237
+ cancelable: false,
2238
+ composed: true,
2239
+ detail: this
2240
+ }));
2241
+ }
2242
+
1668
2243
  /**
1669
2244
  * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
1670
2245
  *
@@ -1704,8 +2279,8 @@ class AuroMenuOption extends AuroElement {
1704
2279
  return u$1`
1705
2280
  <div class="${classes}">
1706
2281
  ${this.selected && !this.noCheckmark
1707
- ? this.generateIconHtml(checkmarkIcon.svg)
1708
- : undefined}
2282
+ ? this.generateIconHtml(checkmarkIcon.svg)
2283
+ : undefined}
1709
2284
  <slot></slot>
1710
2285
  </div>
1711
2286
  `;