@momentum-design/components 0.133.30 → 0.133.31

package/dist/browser/index.js

@@ -15,7 +15,7 @@
   :host {
     display: contents;
   }
-`,lf=PT;var Nl=class extends X{constructor({context:o,initialValue:t}){super(),this.context=new Fs(this,{context:o,initialValue:t})}render(){return this.updateContext(),S`<slot></slot>`}};Nl.styles=[...X.styles,lf];var df=Nl;var Ie=df;var Ve=a=>{class o extends a{constructor(){super(...arguments);this.elementToAutoFocus=null;this.autoFocusOnMount=!1}async firstUpdated(i){super.firstUpdated(i),this.autoFocusOnMount&&(await this.updateComplete,(this.elementToAutoFocus||this).focus())}}return h([u({type:Boolean,reflect:!0,attribute:"auto-focus-on-mount"})],o.prototype,"autoFocusOnMount",2),o};var te=a=>{class o extends a{}return h([u({reflect:!0,type:Boolean})],o.prototype,"disabled",2),o};var ei=a=>{class o extends a{constructor(){super(...arguments);this.tabIndex=0}}return h([u({reflect:!0,type:Number})],o.prototype,"tabIndex",2),o};var wt={ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight",ARROW_UP:"ArrowUp",BACKSPACE:"Backspace",END:"End",ENTER:"Enter",ESCAPE:"Escape",HOME:"Home",PAGE_DOWN:"PageDown",PAGE_UP:"PageUp",SHIFT_TAB:"Shift+Tab",SPACE:" ",TAB:"Tab",DELETE:"Delete"};var FT=a=>{let{host:o,context:t,subscribe:e,callback:i,syncProperties:l}=a,c=(i||l)&&(f=>{l&&l.forEach(b=>{o.requestUpdate(b)}),i==null||i(f)});return new Ps(o,{context:t,callback:c,subscribe:e!=null?e:!0})},$T={consume:FT},Ce=$T;var cf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),hf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),VT=a=>a.getClientRects().length===0,zT=a=>{let{width:o,height:t}=a.getBoundingClientRect(),{offsetWidth:e,offsetHeight:i}=a;return e+i+t+o===0},pf=a=>{if(!(a instanceof Element))return!1;let o=getComputedStyle(a),{overflowX:t,overflowY:e}=o;return t==="auto"||t==="scroll"||e==="auto"||e==="scroll"},BT=a=>zT(a)||VT(a),HT=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},UT=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},GT=a=>getComputedStyle(a).display==="contents",KT=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||HT(a)||!GT(a)&&(UT(a)||BT(a)),WT=a=>a.disabled,YT=a=>a.getAttribute("tabindex")!=="-1",jT=a=>!!(new Set(["BUTTON","DETAILS","EMBED","IFRAME","SELECT","TEXTAREA"]).has(a.tagName)||a instanceof HTMLAnchorElement&&a.hasAttribute("href")||a instanceof HTMLInputElement&&a.type!=="hidden"||(a instanceof HTMLAudioElement||a instanceof HTMLVideoElement)&&a.hasAttribute("controls")||(a instanceof HTMLImageElement||a instanceof HTMLObjectElement)&&a.hasAttribute("usemap")||a.hasAttribute("tabindex")&&a.tabIndex>-1),qT=(a,o)=>o.some(t=>a.matches(t));var $s=(a,o={})=>{var b,A,F;if(!a)return[];let t=new Set((b=o==null?void 0:o.excludedElements)!=null?b:[]),e=(A=o==null?void 0:o.includeSelectors)!=null?A:[],i=(F=o==null?void 0:o.stopAtNonTabbable)!=null?F:!1,l=new Set,c=V=>!(V instanceof HTMLSlotElement)&&(KT(V)||WT(V))||i&&!(V instanceof HTMLSlotElement)&&V.getAttribute("tabindex")==="-1"?"stop":qT(V,e)||YT(V)&&jT(V)?"focusable":"continue",f=V=>{if(t.has(V))return;V instanceof HTMLElement&&c(V)==="focusable"&&l.add(V);let Q=[];V instanceof HTMLElement&&V.shadowRoot?Q=Array.from(V.shadowRoot.children):V.children.length&&(Q=Array.from(V.children)),Q.forEach(Z=>{let J=Z,nt=c(J);nt==="focusable"&&l.add(J),nt!=="stop"&&(J.shadowRoot?f(J.shadowRoot):J.tagName==="SLOT"?J.assignedElements({flatten:!0}).forEach(ht=>{if(ht instanceof HTMLElement){if(i&&!(ht instanceof HTMLSlotElement)&&ht.getAttribute("tabindex")==="-1")return;f(ht)}}):f(J))})};return f(a),[...l]},Xa=(a=document)=>{var t;let o=a instanceof Document?a.activeElement:a;for(;(t=o==null?void 0:o.shadowRoot)!=null&&t.activeElement;)o=o.shadowRoot.activeElement;return o},mf=a=>"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",eh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?eh(o.host):a},uf=a=>{let o=[a],t=a;for(;t;){let e=t.getRootNode();if(e instanceof ShadowRoot)t=e.host,o.push(t);else break}return o};var Si=class{static get stackArray(){return Array.from(this.stack)}static getActiveTrap(){return this.stackArray.at(-1)}static addKeydownListener(o){this.currentKeydownListener=o,document.addEventListener("keydown",o)}static removeKeydownListener(){this.currentKeydownListener&&document.removeEventListener("keydown",this.currentKeydownListener)}static activate(o){this.stackArray.forEach(t=>{t!==o&&t.setIsFocusTrapActivated(!1)}),this.stack.add(o),this.removeKeydownListener(),this.addKeydownListener(o.handleTabKeydown.bind(o))}static deactivate(o){if(this.stack.has(o)&&(this.stack.delete(o),this.removeKeydownListener(),this.stack.size>0)){let t=this.stackArray.pop();t&&(t.setIsFocusTrapActivated(!0),this.addKeydownListener(t.handleTabKeydown.bind(t)))}}};Si.stack=new Set,Si.currentKeydownListener=null;var Ll=B.constructTagName("spatialnavigationprovider");var rh={SPATIAL_NAVIGATION_KEY_MAPPING:{left:"ArrowLeft",right:"ArrowRight",up:"ArrowUp",down:"ArrowDown",escape:"Escape",enter:"Enter"},WEIGHTS:{alignWeight:5,orthogonalWeight:{vertical:2,horizontal:30}}};var XT=Ll,ih=XT;var ff=a=>{let{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b}=a.getBoundingClientRect(),A=o+e/2,F=t+i/2;return{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b,xMid:A,yMid:F}},ZT=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),QT=(a,o)=>o==="horizontal"?a.height/2:a.width/2,JT=(a,o,t)=>t==="horizontal"?Math.max(0,Math.min(a.bottom,o.bottom)-Math.max(a.top,o.top)):Math.max(0,Math.min(a.right,o.right)-Math.max(a.left,o.left)),tx=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,ex=(a,o,t,e)=>{let i=o.xMid-a.xMid,l=o.yMid-a.yMid,c=Math.sqrt(i*i+l*l),f=ZT(a,o,t)+QT(a,t)*e.orthogonalWeight[t],b=JT(a,o,t),A=tx(a,t,b)*e.alignWeight;return c+f-A-Math.sqrt(b)},vf=(a,o,t,e)=>{if(!a||o.length===0)return[];if(o.length===1)return o[0]===a?[]:[{candidate:o[0],distance:0}];let i=ff(a),l=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let b=ff(f);if(t==="left"&&b.right>i.xMid||t==="right"&&b.left<i.xMid||t==="up"&&b.bottom>i.yMid||t==="down"&&b.top<i.yMid)return c;let A=ex(i,b,l,e);return c.push({candidate:f,distance:A}),c},[]).sort((c,f)=>c.distance-f.distance)};var Ko=class extends UIEvent{constructor(o,t,e){super(o,{bubbles:!0,cancelable:!0,composed:!0,view:window}),this.action=e,this.relatedTarget=t}};var Za=class extends Ie{constructor(){super({context:ih});this.navigationKeyMapping=rh.SPATIAL_NAVIGATION_KEY_MAPPING;this.distanceCalculationWeights=rh.WEIGHTS;this.root=this;this.initialHistoryLength=window.history.length;this.handleKeyDown=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.navigationKeys.includes(t.key))return;let e=this.context.value.keyToActionMap[t.key],i=new Ko("navbeforeprocess",this,e);if(t.target&&((c=t.composedPath()[0]||t.target)==null||c.dispatchEvent(i)),i.defaultPrevented)return;let l=!1;switch(e){case"up":l=this.focusNext(t,"up");break;case"down":l=this.focusNext(t,"down");break;case"left":l=this.focusNext(t,"left");break;case"right":l=this.focusNext(t,"right");break;case"enter":l=this.pressEnter();break;case"escape":l=this.goBack();break;default:}l?t.preventDefault():this.dispatchEvent(new Ko("navnotarget",this,e))};this.activeElementObserverCallback=()=>{let t=this.getActiveElement();if(!t||!t.isConnected)if(this.root.contains(document.activeElement)){let e=Xa();e&&this.setActiveElement(e)}else this.initActiveElement(t)};this.handleFocus=t=>{this.initActiveElement(t.target)};this.activeElementObserver=new MutationObserver(this.activeElementObserverCallback)}get navigationKeys(){return[this.navigationKeyMapping.up,this.navigationKeyMapping.down,this.navigationKeyMapping.left,this.navigationKeyMapping.right,this.navigationKeyMapping.enter,this.navigationKeyMapping.escape]}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("focus",this.handleFocus),this.initActiveElement()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("focus",this.handleFocus),this.activeElement=void 0,this.activeElementObserver.disconnect()}static get Context(){return ih}updateContext(){let{actionToKeyMap:t}=this.context.value||{};(!t||t.left!==this.navigationKeyMapping.left||t.right!==this.navigationKeyMapping.right||t.up!==this.navigationKeyMapping.up||t.down!==this.navigationKeyMapping.down||t.enter!==this.navigationKeyMapping.enter||t.escape!==this.navigationKeyMapping.escape)&&(this.context.value={actionToKeyMap:{...this.navigationKeyMapping},keyToActionMap:Object.fromEntries(Object.entries(this.navigationKeyMapping).map(([e,i])=>[i,e]))},this.context.updateObservers())}initActiveElement(t){let e=$s(this.root);this.findActiveElement(e,t)}findActiveElement(t,e){if(!e||!t.includes(e)){let i=t[0];i&&this.setActiveElementAndFocus(i)}}focusNext(t,e){let i=Si.getActiveTrap(),l=null,c=[],f=t.composedPath();f=f.includes(this.root)?f:[this.root];for(let b of f)if(b===i||b===this.root||pf(b)){c.push(...$s(b,{excludedElements:l?[l]:void 0,includeSelectors:["[data-spatial-focusable]"]}));let A=this.focusNextInFocusableAria(c,e);if(A||b===i||b===this.root)return A&&this.emitNavBeforeFocusEvent(A,e),!!A;l=b}return!1}emitNavBeforeFocusEvent(t,e){var i;if(t){let l=new Ko("navbeforefocus",t,e);if((i=this.getActiveElement())==null||i.dispatchEvent(l),!l.defaultPrevented)return this.setActiveElementAndFocus(t),!0}return!1}focusNextInFocusableAria(t,e){var b,A;if(t.length===0)return;let i=this.getActiveElement(),l=Xa();if((!i||!t.includes(i)||i!==l)&&(l&&t.includes(l)?i=l:[i]=t,this.setActiveElement(i)),i!==Xa())return i;let c=`data-spatial-${e}`;if(l){let F=uf(l).find(Q=>Q.hasAttribute(c)),V=F==null?void 0:F.getAttribute(c);if(F&&V){let Q=(b=F.getRootNode())==null?void 0:b.getElementById(V);if(Q)return Q}}return(A=vf(i,t,e,this.distanceCalculationWeights)[0])==null?void 0:A.candidate}emitGoBackEvent(t){let e=new Ko("navback",t,"escape");return this.dispatchEvent(e),e.defaultPrevented}setActiveElement(t){var e;t!==((e=this.activeElement)==null?void 0:e.deref())&&(this.activeElementObserver.disconnect(),t?(this.activeElement=new WeakRef(t),t.parentNode&&this.activeElementObserver.observe(t.parentNode,{childList:!0})):this.activeElement=void 0)}setActiveElementAndFocus(t){this.setActiveElement(t),queueMicrotask(()=>t.focus())}getActiveElement(){var t;return(t=this.activeElement)==null?void 0:t.deref()}pressEnter(){let t=Xa();return t instanceof HTMLElement?(t.click(),!0):!1}goBack(){let t=$s(this.root).find(i=>i.hasAttribute("data-spatial-go-back")),e=this.emitGoBackEvent(t);return t&&!e?(t.click(),!0):window.history.length>this.initialHistoryLength?(window.history.back(),!0):!1}};h([u({attribute:!1})],Za.prototype,"navigationKeyMapping",2),h([u({attribute:!1})],Za.prototype,"distanceCalculationWeights",2);var oh=Za;oh.register(Ll);var gf=oh;var W={ENTER:"enter",ESCAPE:"escape",UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right",SPACE:"space",TAB:"tab",HOME:"home",END:"end",BACKSPACE:"backspace"},rx={[wt.ARROW_UP]:W.UP,[wt.ARROW_DOWN]:W.DOWN,[wt.ARROW_LEFT]:W.LEFT,[wt.ARROW_RIGHT]:W.RIGHT,[wt.ENTER]:W.ENTER,[wt.SPACE]:W.SPACE,[wt.ESCAPE]:W.ESCAPE,[wt.TAB]:W.TAB,[wt.HOME]:W.HOME,[wt.END]:W.END,[wt.BACKSPACE]:W.BACKSPACE},ee={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ce.consume({host:this,context:gf.Context})}getKeyboardNavMode(){var l;return((l=this.spatialNavigationContext)==null?void 0:l.value)?ee.SPATIAL:ee.DEFAULT}getActionForKeyEvent(i,l=!1){var b,A,F;let f=((F=(A=(b=this.spatialNavigationContext)==null?void 0:b.value)==null?void 0:A.keyToActionMap)!=null?F:rx)[i.key];if(l){if(!(window.getComputedStyle(this).direction==="rtl"))return f;if(f===W.LEFT)return W.RIGHT;if(f===W.RIGHT)return W.LEFT}return f}isDirectionAction(i){return i===W.UP||i===W.DOWN||i===W.LEFT||i===W.RIGHT}}return o};var Mt=a=>{class o extends a{constructor(...i){super(...i);this.keyDownEventHandledFlag=!1;this.keyDownEventHandledHandler=()=>{setTimeout(()=>{this.keyDownEventHandledFlag=!1})};this.handleNavBeforeProcessEvent=i=>{this.keyDownEventHandledFlag&&i.preventDefault()};this.addEventListener("keydown",this.keyDownEventHandledHandler),this.addEventListener("navbeforeprocess",this.handleNavBeforeProcessEvent)}keyDownEventHandled(){this.keyDownEventHandledFlag=!0}get isKeyDownEventHandled(){return this.keyDownEventHandledFlag}}return o};var yt=H`
+`,lf=PT;var Nl=class extends X{constructor({context:o,initialValue:t}){super(),this.context=new Fs(this,{context:o,initialValue:t})}render(){return this.updateContext(),S`<slot></slot>`}};Nl.styles=[...X.styles,lf];var df=Nl;var Ie=df;var Ve=a=>{class o extends a{constructor(){super(...arguments);this.elementToAutoFocus=null;this.autoFocusOnMount=!1}async firstUpdated(i){super.firstUpdated(i),this.autoFocusOnMount&&(await this.updateComplete,(this.elementToAutoFocus||this).focus())}}return h([u({type:Boolean,reflect:!0,attribute:"auto-focus-on-mount"})],o.prototype,"autoFocusOnMount",2),o};var te=a=>{class o extends a{}return h([u({reflect:!0,type:Boolean})],o.prototype,"disabled",2),o};var ei=a=>{class o extends a{constructor(){super(...arguments);this.tabIndex=0}}return h([u({reflect:!0,type:Number})],o.prototype,"tabIndex",2),o};var wt={ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight",ARROW_UP:"ArrowUp",BACKSPACE:"Backspace",END:"End",ENTER:"Enter",ESCAPE:"Escape",HOME:"Home",PAGE_DOWN:"PageDown",PAGE_UP:"PageUp",SHIFT_TAB:"Shift+Tab",SPACE:" ",TAB:"Tab",DELETE:"Delete"};var FT=a=>{let{host:o,context:t,subscribe:e,callback:i,syncProperties:l}=a,c=(i||l)&&(f=>{l&&l.forEach(b=>{o.requestUpdate(b)}),i==null||i(f)});return new Ps(o,{context:t,callback:c,subscribe:e!=null?e:!0})},$T={consume:FT},Ce=$T;var cf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),hf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),VT=a=>a.getClientRects().length===0,zT=a=>{let{width:o,height:t}=a.getBoundingClientRect(),{offsetWidth:e,offsetHeight:i}=a;return e+i+t+o===0},pf=a=>{if(!(a instanceof Element))return!1;let o=getComputedStyle(a),{overflowX:t,overflowY:e}=o;return t==="auto"||t==="scroll"||e==="auto"||e==="scroll"},BT=a=>zT(a)||VT(a),HT=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},UT=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},GT=a=>getComputedStyle(a).display==="contents",KT=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||HT(a)||!GT(a)&&(UT(a)||BT(a)),WT=a=>a.disabled,YT=a=>a.getAttribute("tabindex")!=="-1",jT=a=>!!(new Set(["BUTTON","DETAILS","EMBED","IFRAME","SELECT","TEXTAREA"]).has(a.tagName)||a instanceof HTMLAnchorElement&&a.hasAttribute("href")||a instanceof HTMLInputElement&&a.type!=="hidden"||(a instanceof HTMLAudioElement||a instanceof HTMLVideoElement)&&a.hasAttribute("controls")||(a instanceof HTMLImageElement||a instanceof HTMLObjectElement)&&a.hasAttribute("usemap")||a.hasAttribute("tabindex")&&a.tabIndex>-1),qT=(a,o)=>o.some(t=>a.matches(t));var $s=(a,o={})=>{var b,A,F;if(!a)return[];let t=new Set((b=o==null?void 0:o.excludedElements)!=null?b:[]),e=(A=o==null?void 0:o.includeSelectors)!=null?A:[],i=(F=o==null?void 0:o.stopAtNonTabbable)!=null?F:!1,l=new Set,c=V=>{if(!(V instanceof HTMLSlotElement)&&(KT(V)||WT(V)))return"stop";if(i&&!(V instanceof HTMLSlotElement)&&V.getAttribute("tabindex")==="-1"){let Q=V.getRootNode();if(!(Q instanceof ShadowRoot&&Q.delegatesFocus))return"stop"}return qT(V,e)||YT(V)&&jT(V)?"focusable":"continue"},f=V=>{if(t.has(V))return;V instanceof HTMLElement&&c(V)==="focusable"&&l.add(V);let Q=[];V instanceof HTMLElement&&V.shadowRoot?Q=Array.from(V.shadowRoot.children):V.children.length&&(Q=Array.from(V.children)),Q.forEach(Z=>{let J=Z,nt=c(J);nt==="focusable"&&l.add(J),nt!=="stop"&&(J.shadowRoot?f(J.shadowRoot):J.tagName==="SLOT"?J.assignedElements({flatten:!0}).forEach(ht=>{if(ht instanceof HTMLElement){if(i&&!(ht instanceof HTMLSlotElement)&&ht.getAttribute("tabindex")==="-1")return;f(ht)}}):f(J))})};return f(a),[...l]},Xa=(a=document)=>{var t;let o=a instanceof Document?a.activeElement:a;for(;(t=o==null?void 0:o.shadowRoot)!=null&&t.activeElement;)o=o.shadowRoot.activeElement;return o},mf=a=>"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",eh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?eh(o.host):a},uf=a=>{let o=[a],t=a;for(;t;){let e=t.getRootNode();if(e instanceof ShadowRoot)t=e.host,o.push(t);else break}return o};var Si=class{static get stackArray(){return Array.from(this.stack)}static getActiveTrap(){return this.stackArray.at(-1)}static addKeydownListener(o){this.currentKeydownListener=o,document.addEventListener("keydown",o)}static removeKeydownListener(){this.currentKeydownListener&&document.removeEventListener("keydown",this.currentKeydownListener)}static activate(o){this.stackArray.forEach(t=>{t!==o&&t.setIsFocusTrapActivated(!1)}),this.stack.add(o),this.removeKeydownListener(),this.addKeydownListener(o.handleTabKeydown.bind(o))}static deactivate(o){if(this.stack.has(o)&&(this.stack.delete(o),this.removeKeydownListener(),this.stack.size>0)){let t=this.stackArray.pop();t&&(t.setIsFocusTrapActivated(!0),this.addKeydownListener(t.handleTabKeydown.bind(t)))}}};Si.stack=new Set,Si.currentKeydownListener=null;var Ll=B.constructTagName("spatialnavigationprovider");var rh={SPATIAL_NAVIGATION_KEY_MAPPING:{left:"ArrowLeft",right:"ArrowRight",up:"ArrowUp",down:"ArrowDown",escape:"Escape",enter:"Enter"},WEIGHTS:{alignWeight:5,orthogonalWeight:{vertical:2,horizontal:30}}};var XT=Ll,ih=XT;var ff=a=>{let{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b}=a.getBoundingClientRect(),A=o+e/2,F=t+i/2;return{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b,xMid:A,yMid:F}},ZT=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),QT=(a,o)=>o==="horizontal"?a.height/2:a.width/2,JT=(a,o,t)=>t==="horizontal"?Math.max(0,Math.min(a.bottom,o.bottom)-Math.max(a.top,o.top)):Math.max(0,Math.min(a.right,o.right)-Math.max(a.left,o.left)),tx=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,ex=(a,o,t,e)=>{let i=o.xMid-a.xMid,l=o.yMid-a.yMid,c=Math.sqrt(i*i+l*l),f=ZT(a,o,t)+QT(a,t)*e.orthogonalWeight[t],b=JT(a,o,t),A=tx(a,t,b)*e.alignWeight;return c+f-A-Math.sqrt(b)},vf=(a,o,t,e)=>{if(!a||o.length===0)return[];if(o.length===1)return o[0]===a?[]:[{candidate:o[0],distance:0}];let i=ff(a),l=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let b=ff(f);if(t==="left"&&b.right>i.xMid||t==="right"&&b.left<i.xMid||t==="up"&&b.bottom>i.yMid||t==="down"&&b.top<i.yMid)return c;let A=ex(i,b,l,e);return c.push({candidate:f,distance:A}),c},[]).sort((c,f)=>c.distance-f.distance)};var Ko=class extends UIEvent{constructor(o,t,e){super(o,{bubbles:!0,cancelable:!0,composed:!0,view:window}),this.action=e,this.relatedTarget=t}};var Za=class extends Ie{constructor(){super({context:ih});this.navigationKeyMapping=rh.SPATIAL_NAVIGATION_KEY_MAPPING;this.distanceCalculationWeights=rh.WEIGHTS;this.root=this;this.initialHistoryLength=window.history.length;this.handleKeyDown=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.navigationKeys.includes(t.key))return;let e=this.context.value.keyToActionMap[t.key],i=new Ko("navbeforeprocess",this,e);if(t.target&&((c=t.composedPath()[0]||t.target)==null||c.dispatchEvent(i)),i.defaultPrevented)return;let l=!1;switch(e){case"up":l=this.focusNext(t,"up");break;case"down":l=this.focusNext(t,"down");break;case"left":l=this.focusNext(t,"left");break;case"right":l=this.focusNext(t,"right");break;case"enter":l=this.pressEnter();break;case"escape":l=this.goBack();break;default:}l?t.preventDefault():this.dispatchEvent(new Ko("navnotarget",this,e))};this.activeElementObserverCallback=()=>{let t=this.getActiveElement();if(!t||!t.isConnected)if(this.root.contains(document.activeElement)){let e=Xa();e&&this.setActiveElement(e)}else this.initActiveElement(t)};this.handleFocus=t=>{this.initActiveElement(t.target)};this.activeElementObserver=new MutationObserver(this.activeElementObserverCallback)}get navigationKeys(){return[this.navigationKeyMapping.up,this.navigationKeyMapping.down,this.navigationKeyMapping.left,this.navigationKeyMapping.right,this.navigationKeyMapping.enter,this.navigationKeyMapping.escape]}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("focus",this.handleFocus),this.initActiveElement()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("focus",this.handleFocus),this.activeElement=void 0,this.activeElementObserver.disconnect()}static get Context(){return ih}updateContext(){let{actionToKeyMap:t}=this.context.value||{};(!t||t.left!==this.navigationKeyMapping.left||t.right!==this.navigationKeyMapping.right||t.up!==this.navigationKeyMapping.up||t.down!==this.navigationKeyMapping.down||t.enter!==this.navigationKeyMapping.enter||t.escape!==this.navigationKeyMapping.escape)&&(this.context.value={actionToKeyMap:{...this.navigationKeyMapping},keyToActionMap:Object.fromEntries(Object.entries(this.navigationKeyMapping).map(([e,i])=>[i,e]))},this.context.updateObservers())}initActiveElement(t){let e=$s(this.root);this.findActiveElement(e,t)}findActiveElement(t,e){if(!e||!t.includes(e)){let i=t[0];i&&this.setActiveElementAndFocus(i)}}focusNext(t,e){let i=Si.getActiveTrap(),l=null,c=[],f=t.composedPath();f=f.includes(this.root)?f:[this.root];for(let b of f)if(b===i||b===this.root||pf(b)){c.push(...$s(b,{excludedElements:l?[l]:void 0,includeSelectors:["[data-spatial-focusable]"]}));let A=this.focusNextInFocusableAria(c,e);if(A||b===i||b===this.root)return A&&this.emitNavBeforeFocusEvent(A,e),!!A;l=b}return!1}emitNavBeforeFocusEvent(t,e){var i;if(t){let l=new Ko("navbeforefocus",t,e);if((i=this.getActiveElement())==null||i.dispatchEvent(l),!l.defaultPrevented)return this.setActiveElementAndFocus(t),!0}return!1}focusNextInFocusableAria(t,e){var b,A;if(t.length===0)return;let i=this.getActiveElement(),l=Xa();if((!i||!t.includes(i)||i!==l)&&(l&&t.includes(l)?i=l:[i]=t,this.setActiveElement(i)),i!==Xa())return i;let c=`data-spatial-${e}`;if(l){let F=uf(l).find(Q=>Q.hasAttribute(c)),V=F==null?void 0:F.getAttribute(c);if(F&&V){let Q=(b=F.getRootNode())==null?void 0:b.getElementById(V);if(Q)return Q}}return(A=vf(i,t,e,this.distanceCalculationWeights)[0])==null?void 0:A.candidate}emitGoBackEvent(t){let e=new Ko("navback",t,"escape");return this.dispatchEvent(e),e.defaultPrevented}setActiveElement(t){var e;t!==((e=this.activeElement)==null?void 0:e.deref())&&(this.activeElementObserver.disconnect(),t?(this.activeElement=new WeakRef(t),t.parentNode&&this.activeElementObserver.observe(t.parentNode,{childList:!0})):this.activeElement=void 0)}setActiveElementAndFocus(t){this.setActiveElement(t),queueMicrotask(()=>t.focus())}getActiveElement(){var t;return(t=this.activeElement)==null?void 0:t.deref()}pressEnter(){let t=Xa();return t instanceof HTMLElement?(t.click(),!0):!1}goBack(){let t=$s(this.root).find(i=>i.hasAttribute("data-spatial-go-back")),e=this.emitGoBackEvent(t);return t&&!e?(t.click(),!0):window.history.length>this.initialHistoryLength?(window.history.back(),!0):!1}};h([u({attribute:!1})],Za.prototype,"navigationKeyMapping",2),h([u({attribute:!1})],Za.prototype,"distanceCalculationWeights",2);var oh=Za;oh.register(Ll);var gf=oh;var W={ENTER:"enter",ESCAPE:"escape",UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right",SPACE:"space",TAB:"tab",HOME:"home",END:"end",BACKSPACE:"backspace"},rx={[wt.ARROW_UP]:W.UP,[wt.ARROW_DOWN]:W.DOWN,[wt.ARROW_LEFT]:W.LEFT,[wt.ARROW_RIGHT]:W.RIGHT,[wt.ENTER]:W.ENTER,[wt.SPACE]:W.SPACE,[wt.ESCAPE]:W.ESCAPE,[wt.TAB]:W.TAB,[wt.HOME]:W.HOME,[wt.END]:W.END,[wt.BACKSPACE]:W.BACKSPACE},ee={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ce.consume({host:this,context:gf.Context})}getKeyboardNavMode(){var l;return((l=this.spatialNavigationContext)==null?void 0:l.value)?ee.SPATIAL:ee.DEFAULT}getActionForKeyEvent(i,l=!1){var b,A,F;let f=((F=(A=(b=this.spatialNavigationContext)==null?void 0:b.value)==null?void 0:A.keyToActionMap)!=null?F:rx)[i.key];if(l){if(!(window.getComputedStyle(this).direction==="rtl"))return f;if(f===W.LEFT)return W.RIGHT;if(f===W.RIGHT)return W.LEFT}return f}isDirectionAction(i){return i===W.UP||i===W.DOWN||i===W.LEFT||i===W.RIGHT}}return o};var Mt=a=>{class o extends a{constructor(...i){super(...i);this.keyDownEventHandledFlag=!1;this.keyDownEventHandledHandler=()=>{setTimeout(()=>{this.keyDownEventHandledFlag=!1})};this.handleNavBeforeProcessEvent=i=>{this.keyDownEventHandledFlag&&i.preventDefault()};this.addEventListener("keydown",this.keyDownEventHandledHandler),this.addEventListener("navbeforeprocess",this.handleNavBeforeProcessEvent)}keyDownEventHandled(){this.keyDownEventHandledFlag=!0}get isKeyDownEventHandled(){return this.keyDownEventHandledFlag}}return o};var yt=H`
   :host {
     align-items: center;
     display: flex;