@momentum-design/components 0.135.0 → 0.135.1

package/dist/browser/index.js

@@ -15,7 +15,7 @@
   :host {
     display: contents;
   }
-`,xf=QT;var Pl=class extends Q{constructor({context:o,initialValue:t}){super(),this.context=new Bs(this,{context:o,initialValue:t})}updateContext(){throw new Error("Not implemented")}render(){return this.updateContext(),S`<slot></slot>`}};Pl.styles=[...Q.styles,xf];var Af=Pl;var Se=Af;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 Jt=a=>{class o extends a{}return h([u({reflect:!0,type:Boolean})],o.prototype,"disabled",2),o};var ii=a=>{class o extends a{constructor(){super(...arguments);this.tabIndex=0}}return h([u({reflect:!0,type:Number})],o.prototype,"tabIndex",2),o};var Lt={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 JT=a=>{let{host:o,context:t,subscribe:e,callback:i,syncProperties:n}=a,c=(i||n)&&(f=>{n&&n.forEach(g=>{o.requestUpdate(g)}),i==null||i(f)});return new zs(o,{context:t,callback:c,subscribe:e!=null?e:!0})},tx={consume:JT},Ie=tx;var If=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),Cf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),ex=a=>a.getClientRects().length===0,rx=a=>{let{width:o,height:t}=a.getBoundingClientRect(),{offsetWidth:e,offsetHeight:i}=a;return e+i+t+o===0},mh=a=>{if(!(a instanceof Element))return null;let o=getComputedStyle(a),{overflowX:t,overflowY:e}=o,i=t==="auto"||t==="scroll",n=e==="auto"||e==="scroll";return i&&n?"both":i?"horizontal":n?"vertical":null},ix=a=>rx(a)||ex(a),ox=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},sx=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},ax=a=>getComputedStyle(a).display==="contents",nx=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||ox(a)||!ax(a)&&(sx(a)||ix(a)),lx=a=>a.disabled,dx=a=>a.getAttribute("tabindex")!=="-1",cx=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),Sf=(a,o)=>o.some(t=>a.matches(t));var jo=(a,o={})=>{var R,H,J,q;if(!a)return[];let t=new Set((R=o==null?void 0:o.excludedElements)!=null?R:[]),e=(H=o==null?void 0:o.includeSelectors)!=null?H:[],i=(J=o==null?void 0:o.excludeSelectors)!=null?J:[],n=(q=o==null?void 0:o.stopAtNonTabbable)!=null?q:!1,c=new Set([]),f=Z=>{if(t.has(a)||Sf(Z,i)||nx(Z)||lx(Z))return"stop";if(n&&!(Z instanceof HTMLSlotElement)&&Z.getAttribute("tabindex")==="-1"){let ot=Z.getRootNode();if(!(ot instanceof ShadowRoot&&ot.delegatesFocus))return"stop"}return Sf(Z,e)||dx(Z)&&cx(Z)?"focusable":"continue"},g=o.customFocusableCheck?Z=>o.customFocusableCheck(Z,f(Z)):f,A=Z=>{if(Z instanceof HTMLElement){let st=g(Z);if(st==="focusable"&&c.add(Z),st==="stop")return}let ot=[];Z instanceof HTMLSlotElement?ot=Z.assignedElements({flatten:!0}):Z instanceof HTMLElement&&Z.shadowRoot?ot=Array.from(Z.shadowRoot.children):Z.children.length&&(ot=Array.from(Z.children)),ot.forEach(A)};return A(a),[...c]},en=(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},Fl=a=>a&&"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",uh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?uh(o.host):a},$l=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 Ni=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)))}}};Ni.stack=new Set,Ni.currentKeydownListener=null;var Vl=V.constructTagName("spatialnavigationprovider");var oi={DIRECTION_LEFT:"data-spatial-left",DIRECTION_RIGHT:"data-spatial-right",DIRECTION_UP:"data-spatial-up",DIRECTION_DOWN:"data-spatial-down",GO_BACK:"data-spatial-go-back",FOCUSABLE:"data-spatial-focusable",EXCLUDE:"data-spatial-exclude",NO_SCROLL:"data-spatial-noscroll",SCROLL_PARENT:"data-spatial-scroll-parent"},fh={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 hx=Vl,vh=hx;var _f=a=>{let{x:o,y:t,width:e,height:i,left:n,top:c,right:f,bottom:g}=a.getBoundingClientRect(),A=o+e/2,R=t+i/2;return{x:o,y:t,width:e,height:i,left:n,top:c,right:f,bottom:g,xMid:A,yMid:R}},px=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),mx=(a,o)=>o==="horizontal"?a.height/2:a.width/2,ux=(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)),fx=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,vx=(a,o,t,e)=>{let i=o.xMid-a.xMid,n=o.yMid-a.yMid,c=Math.sqrt(i*i+n*n),f=px(a,o,t)+mx(a,t)*e.orthogonalWeight[t],g=ux(a,o,t),A=fx(a,t,g)*e.alignWeight;return c+f-A-Math.sqrt(g)},wf=(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=_f(a),n=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let g=f.closest(`[${oi.SCROLL_PARENT}]`),A=g&&!g.contains(a)?g:f,R=_f(A);if(t==="left"&&R.right>i.xMid||t==="right"&&R.left<i.xMid||t==="up"&&R.bottom>i.yMid||t==="down"&&R.top<i.yMid)return c;let H=vx(i,R,n,e);return c.push({candidate:f,distance:H}),c},[]).sort((c,f)=>c.distance-f.distance)};var qo=class extends UIEvent{constructor(o,t,e){super(o,{bubbles:!0,cancelable:!0,composed:!0,view:window}),this.action=e,this.relatedTarget=t}};var rn=class extends Se{constructor(){super({context:vh});this.navigationKeyMapping=fh.SPATIAL_NAVIGATION_KEY_MAPPING;this.distanceCalculationWeights=fh.WEIGHTS;this.root=this;this.initialHistoryLength=window.history.length;this.handleKeyDownCapture=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.isNavigationKey(t.key))return;let e=!1,i=t.target,n=this.context.value.keyToActionMap[t.key];if(this.isDirectionKey(t.key)&&this.getElementSelectorForDirectionAttr(i,n)!==void 0&&(e=!0,this.focusNext(t,n)),i.parentElement&&!i.hasAttribute(oi.NO_SCROLL)){let f=(c=i.closest(`[${oi.SCROLL_PARENT}]`))!=null?c:i.parentElement,g=mh(f);if(g){let A=i.getBoundingClientRect(),R=f.getBoundingClientRect();(g==="vertical"||g==="both")&&(n==="up"&&A.top<R.top&&f.scrollTop>0&&(f.scrollTo({top:f.scrollTop-R.height/2,behavior:"auto"}),e=!0),n==="down"&&A.bottom>R.bottom&&f.scrollTop+R.height<f.scrollHeight&&(f.scrollTo({top:f.scrollTop+R.height/2,behavior:"auto"}),e=!0)),(g==="horizontal"||g==="both")&&(n==="right"&&A.left<R.left&&f.scrollLeft>0&&(f.scrollTo({left:f.scrollLeft-R.width/2,behavior:"auto"}),e=!0),n==="left"&&A.right>R.right&&f.scrollLeft+R.width<f.scrollWidth&&(f.scrollTo({left:f.scrollLeft+R.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 qo("navbeforeprocess",this,e);if(t.target&&((c=t.composedPath()[0]||t.target)==null||c.dispatchEvent(i)),i.defaultPrevented)return;let n=!1;switch(e){case"up":n=this.focusNext(t,"up");break;case"down":n=this.focusNext(t,"down");break;case"left":n=this.focusNext(t,"left");break;case"right":n=this.focusNext(t,"right");break;case"enter":n=this.pressEnter();break;case"escape":n=this.goBack();break;default:}n?t.preventDefault():this.dispatchEvent(new qo("navnotarget",this,e))};this.activeElementObserverCallback=()=>{let t=this.getActiveElement();if(!t||!t.isConnected)if(this.root.contains(document.activeElement)){let e=en();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.handleKeyDownCapture,{capture:!0}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("focus",this.handleFocus),this.initActiveElement()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDownCapture,{capture:!0}),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("focus",this.handleFocus),this.activeElement=void 0,this.activeElementObserver.disconnect()}static get Context(){return vh}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=jo(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=Ni.getActiveTrap(),n=null,c=[],f=t.composedPath();f=f.includes(this.root)?f:[this.root];for(let g of f)if(g===i||g===this.root||mh(g)){c.push(...jo(g,{excludedElements:n?[n]:void 0,includeSelectors:[`[${oi.FOCUSABLE}]`],excludeSelectors:[`[${oi.EXCLUDE}]`]}));let A=this.focusNextInFocusableAria(c,e);if(A||g===i||g===this.root)return A&&this.emitNavBeforeFocusEvent(A,e),!!A;n=g}return!1}emitNavBeforeFocusEvent(t,e){var i;if(t){let n=new qo("navbeforefocus",t,e);if((i=this.getActiveElement())==null||i.dispatchEvent(n),!n.defaultPrevented)return this.setActiveElementAndFocus(t),!0}return!1}getElementSelectorForDirectionAttr(t,e){var n;let i=`data-spatial-${e}`;return(n=t==null?void 0:t.getAttribute(i))!=null?n:void 0}focusNextInFocusableAria(t,e){var g,A;let i=this.getActiveElement(),n=en(),c=t;if((!i||!c.includes(i)||i!==n)&&(n&&c.includes(n)?i=n:[i]=c,this.setActiveElement(i)),n){let R=`data-spatial-${e}`,H=$l(n).find(q=>q.hasAttribute(R)),J=H==null?void 0:H.getAttribute(R);if(H&&J){let q=H.getRootNode(),Z=(g=q==null?void 0:q.getElementById(J))!=null?g:q==null?void 0:q.querySelector(J);if(Z){let ot=jo(Z,{includeSelectors:[`[${oi.FOCUSABLE}]`],excludeSelectors:[`[${oi.EXCLUDE}]`]});if(ot.includes(Z))return Z;if(ot.length>0)c=ot;else return Z}}}return i!==en()?i:t.length===0||(A=wf(i,c,e,this.distanceCalculationWeights)[0])==null?void 0:A.candidate}emitGoBackEvent(t){let e=new qo("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=en();return t instanceof HTMLElement?(t.click(),!0):!1}goBack(){let t=jo(this.root).find(i=>i.hasAttribute(oi.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})],rn.prototype,"navigationKeyMapping",2),h([u({attribute:!1})],rn.prototype,"distanceCalculationWeights",2);var gh=rn;gh.register(Vl);var kf=gh;var G={ENTER:"enter",ESCAPE:"escape",UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right",SPACE:"space",TAB:"tab",HOME:"home",END:"end",BACKSPACE:"backspace"},gx={[Lt.ARROW_UP]:G.UP,[Lt.ARROW_DOWN]:G.DOWN,[Lt.ARROW_LEFT]:G.LEFT,[Lt.ARROW_RIGHT]:G.RIGHT,[Lt.ENTER]:G.ENTER,[Lt.SPACE]:G.SPACE,[Lt.ESCAPE]:G.ESCAPE,[Lt.TAB]:G.TAB,[Lt.HOME]:G.HOME,[Lt.END]:G.END,[Lt.BACKSPACE]:G.BACKSPACE},te={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ie.consume({host:this,context:kf.Context})}getKeyboardNavMode(){var n;return((n=this.spatialNavigationContext)==null?void 0:n.value)?te.SPATIAL:te.DEFAULT}getActionForKeyEvent(i,n=!1){var g,A,R;let f=((R=(A=(g=this.spatialNavigationContext)==null?void 0:g.value)==null?void 0:A.keyToActionMap)!=null?R:gx)[i.key];if(n){if(!(window.getComputedStyle(this).direction==="rtl"))return f;if(f===G.LEFT)return G.RIGHT;if(f===G.RIGHT)return G.LEFT}return f}isDirectionAction(i){return i===G.UP||i===G.DOWN||i===G.LEFT||i===G.RIGHT}}return o};var Ot=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 Tt=B`
+`,xf=QT;var Pl=class extends Q{constructor({context:o,initialValue:t}){super(),this.context=new Bs(this,{context:o,initialValue:t})}updateContext(){throw new Error("Not implemented")}render(){return this.updateContext(),S`<slot></slot>`}};Pl.styles=[...Q.styles,xf];var Af=Pl;var Se=Af;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 Jt=a=>{class o extends a{}return h([u({reflect:!0,type:Boolean})],o.prototype,"disabled",2),o};var ii=a=>{class o extends a{constructor(){super(...arguments);this.tabIndex=0}}return h([u({reflect:!0,type:Number})],o.prototype,"tabIndex",2),o};var Lt={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 JT=a=>{let{host:o,context:t,subscribe:e,callback:i,syncProperties:n}=a,c=(i||n)&&(f=>{n&&n.forEach(g=>{o.requestUpdate(g)}),i==null||i(f)});return new zs(o,{context:t,callback:c,subscribe:e!=null?e:!0})},tx={consume:JT},Ie=tx;var If=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),Cf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),ex=a=>a.getClientRects().length===0,rx=a=>{let{width:o,height:t}=a.getBoundingClientRect(),{offsetWidth:e,offsetHeight:i}=a;return e+i+t+o===0},mh=a=>{if(!(a instanceof Element))return null;let o=getComputedStyle(a),{overflowX:t,overflowY:e}=o,i=t==="auto"||t==="scroll",n=e==="auto"||e==="scroll";return i&&n?"both":i?"horizontal":n?"vertical":null},ix=a=>rx(a)||ex(a),ox=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},sx=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},ax=a=>getComputedStyle(a).display==="contents",nx=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||ox(a)||!ax(a)&&(sx(a)||ix(a)),lx=a=>a.disabled,dx=a=>a.getAttribute("tabindex")!=="-1",cx=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),Sf=(a,o)=>o.some(t=>a.matches(t));var jo=(a,o={})=>{var R,H,J,q;if(!a)return[];let t=new Set((R=o==null?void 0:o.excludedElements)!=null?R:[]),e=(H=o==null?void 0:o.includeSelectors)!=null?H:[],i=(J=o==null?void 0:o.excludeSelectors)!=null?J:[],n=(q=o==null?void 0:o.stopAtNonTabbable)!=null?q:!1,c=new Set([]),f=Z=>{if(t.has(a)||Sf(Z,i)||nx(Z)||lx(Z))return"stop";if(n&&!(Z instanceof HTMLSlotElement)&&Z.getAttribute("tabindex")==="-1"){let ot=Z.getRootNode();if(!(ot instanceof ShadowRoot&&ot.delegatesFocus))return"stop"}return Sf(Z,e)||dx(Z)&&cx(Z)?"focusable":"continue"},g=o.customFocusableCheck?Z=>o.customFocusableCheck(Z,f(Z)):f,A=Z=>{if(Z instanceof HTMLElement){let st=g(Z);if(st==="focusable"&&c.add(Z),st==="stop")return}let ot=[];Z instanceof HTMLSlotElement?ot=Z.assignedElements({flatten:!0}):Z instanceof HTMLElement&&Z.shadowRoot?ot=Array.from(Z.shadowRoot.children):Z.children.length&&(ot=Array.from(Z.children)),ot.forEach(A)};return A(a),[...c]},en=(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},Fl=a=>a&&"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",uh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?uh(o.host):a},$l=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 Ni=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)))}}};Ni.stack=new Set,Ni.currentKeydownListener=null;var Vl=V.constructTagName("spatialnavigationprovider");var oi={DIRECTION_LEFT:"data-spatial-left",DIRECTION_RIGHT:"data-spatial-right",DIRECTION_UP:"data-spatial-up",DIRECTION_DOWN:"data-spatial-down",GO_BACK:"data-spatial-go-back",FOCUSABLE:"data-spatial-focusable",EXCLUDE:"data-spatial-exclude",NO_SCROLL:"data-spatial-noscroll",SCROLL_PARENT:"data-spatial-scroll-parent"},fh={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 hx=Vl,vh=hx;var _f=a=>{let{x:o,y:t,width:e,height:i,left:n,top:c,right:f,bottom:g}=a.getBoundingClientRect(),A=o+e/2,R=t+i/2;return{x:o,y:t,width:e,height:i,left:n,top:c,right:f,bottom:g,xMid:A,yMid:R}},px=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),mx=(a,o)=>o==="horizontal"?a.height/2:a.width/2,ux=(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)),fx=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,vx=(a,o,t,e)=>{let i=o.xMid-a.xMid,n=o.yMid-a.yMid,c=Math.sqrt(i*i+n*n),f=px(a,o,t)+mx(a,t)*e.orthogonalWeight[t],g=ux(a,o,t),A=fx(a,t,g)*e.alignWeight;return c+f-A-Math.sqrt(g)},wf=(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=_f(a),n=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let g=f.closest(`[${oi.SCROLL_PARENT}]`),A=g&&!g.contains(a)?g:f,R=_f(A);if(t==="left"&&R.right>i.xMid||t==="right"&&R.left<i.xMid||t==="up"&&R.bottom>i.yMid||t==="down"&&R.top<i.yMid)return c;let H=vx(i,R,n,e);return c.push({candidate:f,distance:H}),c},[]).sort((c,f)=>c.distance-f.distance)};var qo=class extends UIEvent{constructor(o,t,e){super(o,{bubbles:!0,cancelable:!0,composed:!0,view:window}),this.action=e,this.relatedTarget=t}};var rn=class extends Se{constructor(){super({context:vh});this.navigationKeyMapping=fh.SPATIAL_NAVIGATION_KEY_MAPPING;this.distanceCalculationWeights=fh.WEIGHTS;this.root=this;this.initialHistoryLength=window.history.length;this.handleKeyDownCapture=t=>{var c;if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||!this.isNavigationKey(t.key))return;let e=!1,i=t.target,n=this.context.value.keyToActionMap[t.key];if(this.isDirectionKey(t.key)&&this.getElementSelectorForDirectionAttr(i,n)!==void 0&&(e=!0,this.focusNext(t,n)),i.parentElement&&!i.hasAttribute(oi.NO_SCROLL)){let f=(c=i.closest(`[${oi.SCROLL_PARENT}]`))!=null?c:i.parentElement,g=mh(f);if(g){let A=i.getBoundingClientRect(),R=f.getBoundingClientRect();(g==="vertical"||g==="both")&&(n==="up"&&A.top<R.top&&f.scrollTop>0&&(f.scrollTo({top:f.scrollTop-R.height/2,behavior:"auto"}),e=!0),n==="down"&&A.bottom>R.bottom&&f.scrollTop+R.height<f.scrollHeight&&(f.scrollTo({top:f.scrollTop+R.height/2,behavior:"auto"}),e=!0)),(g==="horizontal"||g==="both")&&(n==="right"&&A.left<R.left&&f.scrollLeft>0&&(f.scrollTo({left:f.scrollLeft-R.width/2,behavior:"auto"}),e=!0),n==="left"&&A.right>R.right&&f.scrollLeft+R.width<f.scrollWidth&&(f.scrollTo({left:f.scrollLeft+R.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 qo("navbeforeprocess",this,e);if(t.target&&((c=t.composedPath()[0]||t.target)==null||c.dispatchEvent(i)),i.defaultPrevented)return;let n=!1;switch(e){case"up":n=this.focusNext(t,"up");break;case"down":n=this.focusNext(t,"down");break;case"left":n=this.focusNext(t,"left");break;case"right":n=this.focusNext(t,"right");break;case"enter":n=this.pressEnter();break;case"escape":n=this.goBack();break;default:}n?t.preventDefault():this.dispatchEvent(new qo("navnotarget",this,e))};this.activeElementObserverCallback=()=>{let t=this.getActiveElement();if(!t||!t.isConnected)if(this.root.contains(document.activeElement)){let e=en();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.handleKeyDownCapture,{capture:!0}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("focus",this.handleFocus),this.initActiveElement()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDownCapture,{capture:!0}),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("focus",this.handleFocus),this.activeElement=void 0,this.activeElementObserver.disconnect()}static get Context(){return vh}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=jo(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=Ni.getActiveTrap(),n=null,c=[],f=t.composedPath();f=f.includes(this.root)?f:[this.root];for(let g of f)if(g===i||g===this.root||mh(g)){c.push(...jo(g,{excludedElements:n?[n]:void 0,includeSelectors:[`[${oi.FOCUSABLE}]`],excludeSelectors:[`[${oi.EXCLUDE}]`]}));let A=this.focusNextInFocusableAria(c,e);if(A||g===i||g===this.root)return A&&this.emitNavBeforeFocusEvent(A,e),!!A;n=g}return!1}emitNavBeforeFocusEvent(t,e){var i;if(t){let n=new qo("navbeforefocus",t,e);if((i=this.getActiveElement())==null||i.dispatchEvent(n),!n.defaultPrevented)return this.setActiveElementAndFocus(t),!0}return!1}getElementSelectorForDirectionAttr(t,e){var n;let i=`data-spatial-${e}`;return(n=t==null?void 0:t.getAttribute(i))!=null?n:void 0}focusNextInFocusableAria(t,e){var g,A;let i=this.getActiveElement(),n=en(),c=t;if((!i||!c.includes(i)||i!==n)&&(n&&c.includes(n)?i=n:[i]=c,this.setActiveElement(i)),n){let R=`data-spatial-${e}`,H=$l(n).find(q=>q.hasAttribute(R)),J=H==null?void 0:H.getAttribute(R);if(H&&J){let q=H.getRootNode(),Z=(g=q==null?void 0:q.getElementById(J))!=null?g:q==null?void 0:q.querySelector(J);if(Z){let ot=jo(Z,{includeSelectors:[`[${oi.FOCUSABLE}]`],excludeSelectors:[`[${oi.EXCLUDE}]`]});if(ot.includes(Z))return Z;if(ot.length>0)c=ot;else return Z}}}return i!==en()?i:t.length===0||(A=wf(i,c,e,this.distanceCalculationWeights)[0])==null?void 0:A.candidate}emitGoBackEvent(t){let e=new qo("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=en();return t instanceof HTMLElement?(t.click(),!0):!1}goBack(){let t=jo(this.root).find(i=>i.hasAttribute(oi.GO_BACK));if(!this.emitGoBackEvent(t)){if(t)return t.click(),!0;if(window.history.length>this.initialHistoryLength)return window.history.back(),!0}return!1}};h([u({attribute:!1})],rn.prototype,"navigationKeyMapping",2),h([u({attribute:!1})],rn.prototype,"distanceCalculationWeights",2);var gh=rn;gh.register(Vl);var kf=gh;var G={ENTER:"enter",ESCAPE:"escape",UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right",SPACE:"space",TAB:"tab",HOME:"home",END:"end",BACKSPACE:"backspace"},gx={[Lt.ARROW_UP]:G.UP,[Lt.ARROW_DOWN]:G.DOWN,[Lt.ARROW_LEFT]:G.LEFT,[Lt.ARROW_RIGHT]:G.RIGHT,[Lt.ENTER]:G.ENTER,[Lt.SPACE]:G.SPACE,[Lt.ESCAPE]:G.ESCAPE,[Lt.TAB]:G.TAB,[Lt.HOME]:G.HOME,[Lt.END]:G.END,[Lt.BACKSPACE]:G.BACKSPACE},te={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ie.consume({host:this,context:kf.Context})}getKeyboardNavMode(){var n;return((n=this.spatialNavigationContext)==null?void 0:n.value)?te.SPATIAL:te.DEFAULT}getActionForKeyEvent(i,n=!1){var g,A,R;let f=((R=(A=(g=this.spatialNavigationContext)==null?void 0:g.value)==null?void 0:A.keyToActionMap)!=null?R:gx)[i.key];if(n){if(!(window.getComputedStyle(this).direction==="rtl"))return f;if(f===G.LEFT)return G.RIGHT;if(f===G.RIGHT)return G.LEFT}return f}isDirectionAction(i){return i===G.UP||i===G.DOWN||i===G.LEFT||i===G.RIGHT}}return o};var Ot=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 Tt=B`
   :host {
     align-items: center;
     display: flex;