@momentum-design/components 0.134.14 → 0.134.15

package/dist/browser/index.js

@@ -15,7 +15,7 @@
   :host {
     display: contents;
   }
-`,ff=zT;var Nl=class extends Z{constructor({context:o,initialValue:t}){super(),this.context=new Fs(this,{context:o,initialValue:t})}render(){return this.updateContext(),S`<slot></slot>`}};Nl.styles=[...Z.styles,ff];var vf=Nl;var Se=vf;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 ri=a=>{class o extends a{constructor(){super(...arguments);this.tabIndex=0}}return h([u({reflect:!0,type:Number})],o.prototype,"tabIndex",2),o};var kt={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 BT=a=>{let{host:o,context:t,subscribe:e,callback:i,syncProperties:l}=a,c=(i||l)&&(f=>{l&&l.forEach(g=>{o.requestUpdate(g)}),i==null||i(f)});return new Ps(o,{context:t,callback:c,subscribe:e!=null?e:!0})},HT={consume:BT},Ie=HT;var gf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),bf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),UT=a=>a.getClientRects().length===0,GT=a=>{let{width:o,height:t}=a.getBoundingClientRect(),{offsetWidth:e,offsetHeight:i}=a;return e+i+t+o===0},nh=a=>{if(!(a instanceof Element))return null;let o=getComputedStyle(a),{overflowX:t,overflowY:e}=o,i=t==="auto"||t==="scroll",l=e==="auto"||e==="scroll";return i&&l?"both":i?"horizontal":l?"vertical":null},KT=a=>GT(a)||UT(a),WT=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},YT=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},jT=a=>getComputedStyle(a).display==="contents",qT=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||WT(a)||!jT(a)&&(YT(a)||KT(a)),XT=a=>a.disabled,ZT=a=>a.getAttribute("tabindex")!=="-1",QT=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),ah=(a,o)=>o.some(t=>a.matches(t));var $s=(a,o={})=>{var A,P,H,Q,X;if(!a)return[];let t=new Set((A=o==null?void 0:o.excludedElements)!=null?A:[]),e=(P=o==null?void 0:o.includeSelectors)!=null?P:[],i=(H=o==null?void 0:o.excludeSelectors)!=null?H:[],l=(Q=o==null?void 0:o.stopAtNonTabbable)!=null?Q:!1,c=new Set((X=o.includeElements)!=null?X:[]),f=J=>{if(!(J instanceof HTMLSlotElement)&&(qT(J)||XT(J)||ah(J,i)))return"stop";if(l&&!(J instanceof HTMLSlotElement)&&J.getAttribute("tabindex")==="-1"){let at=J.getRootNode();if(!(at instanceof ShadowRoot&&at.delegatesFocus))return"stop"}return ah(J,e)||ZT(J)&&QT(J)?"focusable":"continue"},g=J=>{if(t.has(J)||J instanceof HTMLElement&&ah(J,i))return;J instanceof HTMLElement&&f(J)==="focusable"&&c.add(J);let at=[];J instanceof HTMLElement&&J.shadowRoot?at=Array.from(J.shadowRoot.children):J.children.length&&(at=Array.from(J.children)),at.forEach(nt=>{let ht=nt,yt=f(ht);yt==="focusable"&&c.add(ht),yt!=="stop"&&(ht.shadowRoot?g(ht.shadowRoot):ht.tagName==="SLOT"?ht.assignedElements({flatten:!0}).forEach(Ot=>{if(Ot instanceof HTMLElement){if(l&&!(Ot instanceof HTMLSlotElement)&&Ot.getAttribute("tabindex")==="-1")return;g(Ot)}}):g(ht))})};return g(a),[...c]},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},Ll=a=>"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",lh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?lh(o.host):a},Ml=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 _i=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)))}}};_i.stack=new Set,_i.currentKeydownListener=null;var Ol=z.constructTagName("spatialnavigationprovider");var dh={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 JT=Ol,ch=JT;var yf=a=>{let{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:g}=a.getBoundingClientRect(),A=o+e/2,P=t+i/2;return{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:g,xMid:A,yMid:P}},tx=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),ex=(a,o)=>o==="horizontal"?a.height/2:a.width/2,rx=(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)),ix=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,ox=(a,o,t,e)=>{let i=o.xMid-a.xMid,l=o.yMid-a.yMid,c=Math.sqrt(i*i+l*l),f=tx(a,o,t)+ex(a,t)*e.orthogonalWeight[t],g=rx(a,o,t),A=ix(a,t,g)*e.alignWeight;return c+f-A-Math.sqrt(g)},Ef=(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=yf(a),l=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let g=yf(f);if(t==="left"&&g.right>i.xMid||t==="right"&&g.left<i.xMid||t==="up"&&g.bottom>i.yMid||t==="down"&&g.top<i.yMid)return c;let A=ox(i,g,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 Se{constructor(){super({context:ch});this.navigationKeyMapping=dh.SPATIAL_NAVIGATION_KEY_MAPPING;this.distanceCalculationWeights=dh.WEIGHTS;this.root=this;this.initialHistoryLength=window.history.length;this.handleKeyDownBefore=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.isNavigationKey(t.key))return;let e=!1,i=t.target,l=this.context.value.keyToActionMap[t.key];if(this.isDirectionKey(t.key)&&this.getElementSelectorForDirectionAttr(i,l)!==void 0&&(e=!0,this.handleKeyDown(t)),i.parentElement&&!i.hasAttribute("data-spatial-noscroll")){let f;i.hasAttribute("data-spatial-scroll-parent")&&(f=(c=i.getRootNode())==null?void 0:c.getElementById(i.getAttribute("data-spatial-scroll-parent"))),f||(f=i.parentElement);let g=nh(f);if(g){let A=i.getBoundingClientRect(),P=f.getBoundingClientRect();(g==="vertical"||g==="both")&&(l==="up"&&A.top<P.top&&f.scrollTop>0&&(f.scrollTo({top:f.scrollTop-P.height/2,behavior:"auto"}),e=!0),l==="down"&&A.bottom>P.bottom&&f.scrollTop+P.height<f.scrollHeight&&(f.scrollTo({top:f.scrollTop+P.height/2,behavior:"auto"}),e=!0)),(g==="horizontal"||g==="both")&&(l==="right"&&A.left<P.left&&f.scrollLeft>0&&(f.scrollTo({left:f.scrollLeft-P.width/2,behavior:"auto"}),e=!0),l==="left"&&A.right>P.right&&f.scrollLeft+P.width<f.scrollWidth&&(f.scrollTo({left:f.scrollLeft+P.width/2,behavior:"auto"}),e=!0))}}e&&(t.preventDefault(),t.stopImmediatePropagation())};this.handleKeyDown=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.isNavigationKey(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)}isNavigationKey(t){return[this.navigationKeyMapping.up,this.navigationKeyMapping.down,this.navigationKeyMapping.left,this.navigationKeyMapping.right,this.navigationKeyMapping.enter,this.navigationKeyMapping.escape].includes(t)}isDirectionKey(t){return[this.navigationKeyMapping.up,this.navigationKeyMapping.down,this.navigationKeyMapping.left,this.navigationKeyMapping.right].includes(t)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDownBefore,{capture:!0}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("focus",this.handleFocus),this.initActiveElement()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDownBefore,{capture:!0}),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("focus",this.handleFocus),this.activeElement=void 0,this.activeElementObserver.disconnect()}static get Context(){return ch}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=_i.getActiveTrap(),l=null,c=[],f=t.composedPath();f=f.includes(this.root)?f:[this.root];for(let g of f)if(g===i||g===this.root||nh(g)){c.push(...$s(g,{excludedElements:l?[l]:void 0,includeSelectors:["[data-spatial-focusable]"],excludeSelectors:["[data-spatial-exclude]"]}));let A=this.focusNextInFocusableAria(c,e);if(A||g===i||g===this.root)return A&&this.emitNavBeforeFocusEvent(A,e),!!A;l=g}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}getElementSelectorForDirectionAttr(t,e){var l;let i=`data-spatial-${e}`;return(l=t==null?void 0:t.getAttribute(i))!=null?l:void 0}focusNextInFocusableAria(t,e){var f,g;let i=this.getActiveElement(),l=Xa();if((!i||!t.includes(i)||i!==l)&&(l&&t.includes(l)?i=l:[i]=t,this.setActiveElement(i)),l){let A=`data-spatial-${e}`,P=Ml(l).find(Q=>Q.hasAttribute(A)),H=P==null?void 0:P.getAttribute(A);if(P&&H){let Q=P.getRootNode(),X=(f=Q==null?void 0:Q.getElementById(H))!=null?f:Q==null?void 0:Q.querySelector(H);if(X)return X}}return i!==Xa()?i:t.length===0||(g=Ef(i,t,e,this.distanceCalculationWeights)[0])==null?void 0:g.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 hh=Za;hh.register(Ol);var Tf=hh;var Y={ENTER:"enter",ESCAPE:"escape",UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right",SPACE:"space",TAB:"tab",HOME:"home",END:"end",BACKSPACE:"backspace"},sx={[kt.ARROW_UP]:Y.UP,[kt.ARROW_DOWN]:Y.DOWN,[kt.ARROW_LEFT]:Y.LEFT,[kt.ARROW_RIGHT]:Y.RIGHT,[kt.ENTER]:Y.ENTER,[kt.SPACE]:Y.SPACE,[kt.ESCAPE]:Y.ESCAPE,[kt.TAB]:Y.TAB,[kt.HOME]:Y.HOME,[kt.END]:Y.END,[kt.BACKSPACE]:Y.BACKSPACE},ee={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ie.consume({host:this,context:Tf.Context})}getKeyboardNavMode(){var l;return((l=this.spatialNavigationContext)==null?void 0:l.value)?ee.SPATIAL:ee.DEFAULT}getActionForKeyEvent(i,l=!1){var g,A,P;let f=((P=(A=(g=this.spatialNavigationContext)==null?void 0:g.value)==null?void 0:A.keyToActionMap)!=null?P:sx)[i.key];if(l){if(!(window.getComputedStyle(this).direction==="rtl"))return f;if(f===Y.LEFT)return Y.RIGHT;if(f===Y.RIGHT)return Y.LEFT}return f}isDirectionAction(i){return i===Y.UP||i===Y.DOWN||i===Y.LEFT||i===Y.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 Et=B`
+`,ff=zT;var Nl=class extends Z{constructor({context:o,initialValue:t}){super(),this.context=new Fs(this,{context:o,initialValue:t})}render(){return this.updateContext(),S`<slot></slot>`}};Nl.styles=[...Z.styles,ff];var vf=Nl;var Se=vf;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 ri=a=>{class o extends a{constructor(){super(...arguments);this.tabIndex=0}}return h([u({reflect:!0,type:Number})],o.prototype,"tabIndex",2),o};var kt={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 BT=a=>{let{host:o,context:t,subscribe:e,callback:i,syncProperties:l}=a,c=(i||l)&&(f=>{l&&l.forEach(g=>{o.requestUpdate(g)}),i==null||i(f)});return new Ps(o,{context:t,callback:c,subscribe:e!=null?e:!0})},HT={consume:BT},Ie=HT;var gf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),bf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),UT=a=>a.getClientRects().length===0,GT=a=>{let{width:o,height:t}=a.getBoundingClientRect(),{offsetWidth:e,offsetHeight:i}=a;return e+i+t+o===0},nh=a=>{if(!(a instanceof Element))return null;let o=getComputedStyle(a),{overflowX:t,overflowY:e}=o,i=t==="auto"||t==="scroll",l=e==="auto"||e==="scroll";return i&&l?"both":i?"horizontal":l?"vertical":null},KT=a=>GT(a)||UT(a),WT=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},YT=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},jT=a=>getComputedStyle(a).display==="contents",qT=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||WT(a)||!jT(a)&&(YT(a)||KT(a)),XT=a=>a.disabled,ZT=a=>a.getAttribute("tabindex")!=="-1",QT=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),ah=(a,o)=>o.some(t=>a.matches(t));var $s=(a,o={})=>{var A,P,H,Q,X;if(!a)return[];let t=new Set((A=o==null?void 0:o.excludedElements)!=null?A:[]),e=(P=o==null?void 0:o.includeSelectors)!=null?P:[],i=(H=o==null?void 0:o.excludeSelectors)!=null?H:[],l=(Q=o==null?void 0:o.stopAtNonTabbable)!=null?Q:!1,c=new Set((X=o.includeElements)!=null?X:[]),f=J=>{if(!(J instanceof HTMLSlotElement)&&(qT(J)||XT(J)||ah(J,i)))return"stop";if(l&&!(J instanceof HTMLSlotElement)&&J.getAttribute("tabindex")==="-1"){let at=J.getRootNode();if(!(at instanceof ShadowRoot&&at.delegatesFocus))return"stop"}return ah(J,e)||ZT(J)&&QT(J)?"focusable":"continue"},g=J=>{if(t.has(J)||J instanceof HTMLElement&&ah(J,i))return;J instanceof HTMLElement&&f(J)==="focusable"&&c.add(J);let at=[];J instanceof HTMLElement&&J.shadowRoot?at=Array.from(J.shadowRoot.children):J.children.length&&(at=Array.from(J.children)),at.forEach(nt=>{let ht=nt,yt=f(ht);yt==="focusable"&&c.add(ht),yt!=="stop"&&(ht.shadowRoot?g(ht.shadowRoot):ht.tagName==="SLOT"?ht.assignedElements({flatten:!0}).forEach(Ot=>{if(Ot instanceof HTMLElement){if(l&&!(Ot instanceof HTMLSlotElement)&&Ot.getAttribute("tabindex")==="-1")return;g(Ot)}}):g(ht))})};return g(a),[...c]},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},Ll=a=>"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",lh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?lh(o.host):a},Ml=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 _i=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)))}}};_i.stack=new Set,_i.currentKeydownListener=null;var Ol=z.constructTagName("spatialnavigationprovider");var dh={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 JT=Ol,ch=JT;var yf=a=>{let{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:g}=a.getBoundingClientRect(),A=o+e/2,P=t+i/2;return{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:g,xMid:A,yMid:P}},tx=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),ex=(a,o)=>o==="horizontal"?a.height/2:a.width/2,rx=(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)),ix=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,ox=(a,o,t,e)=>{let i=o.xMid-a.xMid,l=o.yMid-a.yMid,c=Math.sqrt(i*i+l*l),f=tx(a,o,t)+ex(a,t)*e.orthogonalWeight[t],g=rx(a,o,t),A=ix(a,t,g)*e.alignWeight;return c+f-A-Math.sqrt(g)},Ef=(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=yf(a),l=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let g=yf(f);if(t==="left"&&g.right>i.xMid||t==="right"&&g.left<i.xMid||t==="up"&&g.bottom>i.yMid||t==="down"&&g.top<i.yMid)return c;let A=ox(i,g,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 Se{constructor(){super({context:ch});this.navigationKeyMapping=dh.SPATIAL_NAVIGATION_KEY_MAPPING;this.distanceCalculationWeights=dh.WEIGHTS;this.root=this;this.initialHistoryLength=window.history.length;this.handleKeyDownBefore=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.isNavigationKey(t.key))return;let e=!1,i=t.target,l=this.context.value.keyToActionMap[t.key];if(this.isDirectionKey(t.key)&&this.getElementSelectorForDirectionAttr(i,l)!==void 0&&(e=!0,this.handleKeyDown(t)),i.parentElement&&!i.hasAttribute("data-spatial-noscroll")){let f=(c=i.closest("[data-spatial-scroll-parent]"))!=null?c:i.parentElement,g=nh(f);if(g){let A=i.getBoundingClientRect(),P=f.getBoundingClientRect();(g==="vertical"||g==="both")&&(l==="up"&&A.top<P.top&&f.scrollTop>0&&(f.scrollTo({top:f.scrollTop-P.height/2,behavior:"auto"}),e=!0),l==="down"&&A.bottom>P.bottom&&f.scrollTop+P.height<f.scrollHeight&&(f.scrollTo({top:f.scrollTop+P.height/2,behavior:"auto"}),e=!0)),(g==="horizontal"||g==="both")&&(l==="right"&&A.left<P.left&&f.scrollLeft>0&&(f.scrollTo({left:f.scrollLeft-P.width/2,behavior:"auto"}),e=!0),l==="left"&&A.right>P.right&&f.scrollLeft+P.width<f.scrollWidth&&(f.scrollTo({left:f.scrollLeft+P.width/2,behavior:"auto"}),e=!0))}}e&&(t.preventDefault(),t.stopImmediatePropagation())};this.handleKeyDown=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.isNavigationKey(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)}isNavigationKey(t){return[this.navigationKeyMapping.up,this.navigationKeyMapping.down,this.navigationKeyMapping.left,this.navigationKeyMapping.right,this.navigationKeyMapping.enter,this.navigationKeyMapping.escape].includes(t)}isDirectionKey(t){return[this.navigationKeyMapping.up,this.navigationKeyMapping.down,this.navigationKeyMapping.left,this.navigationKeyMapping.right].includes(t)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDownBefore,{capture:!0}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("focus",this.handleFocus),this.initActiveElement()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDownBefore,{capture:!0}),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("focus",this.handleFocus),this.activeElement=void 0,this.activeElementObserver.disconnect()}static get Context(){return ch}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=_i.getActiveTrap(),l=null,c=[],f=t.composedPath();f=f.includes(this.root)?f:[this.root];for(let g of f)if(g===i||g===this.root||nh(g)){c.push(...$s(g,{excludedElements:l?[l]:void 0,includeSelectors:["[data-spatial-focusable]"],excludeSelectors:["[data-spatial-exclude]"]}));let A=this.focusNextInFocusableAria(c,e);if(A||g===i||g===this.root)return A&&this.emitNavBeforeFocusEvent(A,e),!!A;l=g}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}getElementSelectorForDirectionAttr(t,e){var l;let i=`data-spatial-${e}`;return(l=t==null?void 0:t.getAttribute(i))!=null?l:void 0}focusNextInFocusableAria(t,e){var f,g;let i=this.getActiveElement(),l=Xa();if((!i||!t.includes(i)||i!==l)&&(l&&t.includes(l)?i=l:[i]=t,this.setActiveElement(i)),l){let A=`data-spatial-${e}`,P=Ml(l).find(Q=>Q.hasAttribute(A)),H=P==null?void 0:P.getAttribute(A);if(P&&H){let Q=P.getRootNode(),X=(f=Q==null?void 0:Q.getElementById(H))!=null?f:Q==null?void 0:Q.querySelector(H);if(X)return X}}return i!==Xa()?i:t.length===0||(g=Ef(i,t,e,this.distanceCalculationWeights)[0])==null?void 0:g.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 hh=Za;hh.register(Ol);var Tf=hh;var Y={ENTER:"enter",ESCAPE:"escape",UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right",SPACE:"space",TAB:"tab",HOME:"home",END:"end",BACKSPACE:"backspace"},sx={[kt.ARROW_UP]:Y.UP,[kt.ARROW_DOWN]:Y.DOWN,[kt.ARROW_LEFT]:Y.LEFT,[kt.ARROW_RIGHT]:Y.RIGHT,[kt.ENTER]:Y.ENTER,[kt.SPACE]:Y.SPACE,[kt.ESCAPE]:Y.ESCAPE,[kt.TAB]:Y.TAB,[kt.HOME]:Y.HOME,[kt.END]:Y.END,[kt.BACKSPACE]:Y.BACKSPACE},ee={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ie.consume({host:this,context:Tf.Context})}getKeyboardNavMode(){var l;return((l=this.spatialNavigationContext)==null?void 0:l.value)?ee.SPATIAL:ee.DEFAULT}getActionForKeyEvent(i,l=!1){var g,A,P;let f=((P=(A=(g=this.spatialNavigationContext)==null?void 0:g.value)==null?void 0:A.keyToActionMap)!=null?P:sx)[i.key];if(l){if(!(window.getComputedStyle(this).direction==="rtl"))return f;if(f===Y.LEFT)return Y.RIGHT;if(f===Y.RIGHT)return Y.LEFT}return f}isDirectionAction(i){return i===Y.UP||i===Y.DOWN||i===Y.LEFT||i===Y.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 Et=B`
   :host {
     align-items: center;
     display: flex;