@momentum-design/components 0.134.19 → 0.134.21

package/dist/browser/index.js

@@ -15,7 +15,7 @@
   :host {
     display: contents;
   }
-`,ff=BT;var Ll=class extends Z{constructor({context:o,initialValue:t}){super(),this.context=new Vs(this,{context:o,initialValue:t})}render(){return this.updateContext(),S`<slot></slot>`}};Ll.styles=[...Z.styles,ff];var vf=Ll;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 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 HT=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 $s(o,{context:t,callback:c,subscribe:e!=null?e:!0})},UT={consume:HT},Ie=UT;var bf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),yf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),GT=a=>a.getClientRects().length===0,KT=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},WT=a=>KT(a)||GT(a),YT=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},jT=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},qT=a=>getComputedStyle(a).display==="contents",XT=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||YT(a)||!qT(a)&&(jT(a)||WT(a)),ZT=a=>a.disabled,QT=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),gf=(a,o)=>o.some(t=>a.matches(t));var Wo=(a,o={})=>{var D,H,Q,X;if(!a)return[];let t=new Set((D=o==null?void 0:o.excludedElements)!=null?D:[]),e=(H=o==null?void 0:o.includeSelectors)!=null?H:[],i=(Q=o==null?void 0:o.excludeSelectors)!=null?Q:[],l=(X=o==null?void 0:o.stopAtNonTabbable)!=null?X:!1,c=new Set([]),f=J=>{if(t.has(a)||gf(J,i)||XT(J)||ZT(J))return"stop";if(l&&!(J instanceof HTMLSlotElement)&&J.getAttribute("tabindex")==="-1"){let ot=J.getRootNode();if(!(ot instanceof ShadowRoot&&ot.delegatesFocus))return"stop"}return gf(J,e)||QT(J)&&JT(J)?"focusable":"continue"},b=o.customFocusableCheck?J=>o.customFocusableCheck(J,f(J)):f,A=J=>{if(J instanceof HTMLElement){let at=b(J);if(at==="focusable"&&c.add(J),at==="stop")return}let ot=[];J instanceof HTMLSlotElement?ot=J.assignedElements({flatten:!0}):J instanceof HTMLElement&&J.shadowRoot?ot=Array.from(J.shadowRoot.children):J.children.length&&(ot=Array.from(J.children)),ot.forEach(A)};return A(a),[...c]},Za=(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},Ml=a=>"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",lh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?lh(o.host):a},Ol=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 ki=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)))}}};ki.stack=new Set,ki.currentKeydownListener=null;var Rl=z.constructTagName("spatialnavigationprovider");var ii={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"},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 tx=Rl,ch=tx;var Ef=a=>{let{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b}=a.getBoundingClientRect(),A=o+e/2,D=t+i/2;return{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b,xMid:A,yMid:D}},ex=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),rx=(a,o)=>o==="horizontal"?a.height/2:a.width/2,ix=(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)),ox=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,sx=(a,o,t,e)=>{let i=o.xMid-a.xMid,l=o.yMid-a.yMid,c=Math.sqrt(i*i+l*l),f=ex(a,o,t)+rx(a,t)*e.orthogonalWeight[t],b=ix(a,o,t),A=ox(a,t,b)*e.alignWeight;return c+f-A-Math.sqrt(b)},Tf=(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=Ef(a),l=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let b=f.closest(`[${ii.SCROLL_PARENT}]`),A=b&&!b.contains(a)?b:f,D=Ef(A);if(t==="left"&&D.right>i.xMid||t==="right"&&D.left<i.xMid||t==="up"&&D.bottom>i.yMid||t==="down"&&D.top<i.yMid)return c;let H=sx(i,D,l,e);return c.push({candidate:f,distance:H}),c},[]).sort((c,f)=>c.distance-f.distance)};var Yo=class extends UIEvent{constructor(o,t,e){super(o,{bubbles:!0,cancelable:!0,composed:!0,view:window}),this.action=e,this.relatedTarget=t}};var Qa=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.handleKeyDownCapture=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.focusNext(t,l)),i.parentElement&&!i.hasAttribute(ii.NO_SCROLL)){let f=(c=i.closest(`[${ii.SCROLL_PARENT}]`))!=null?c:i.parentElement,b=nh(f);if(b){let A=i.getBoundingClientRect(),D=f.getBoundingClientRect();(b==="vertical"||b==="both")&&(l==="up"&&A.top<D.top&&f.scrollTop>0&&(f.scrollTo({top:f.scrollTop-D.height/2,behavior:"auto"}),e=!0),l==="down"&&A.bottom>D.bottom&&f.scrollTop+D.height<f.scrollHeight&&(f.scrollTo({top:f.scrollTop+D.height/2,behavior:"auto"}),e=!0)),(b==="horizontal"||b==="both")&&(l==="right"&&A.left<D.left&&f.scrollLeft>0&&(f.scrollTo({left:f.scrollLeft-D.width/2,behavior:"auto"}),e=!0),l==="left"&&A.right>D.right&&f.scrollLeft+D.width<f.scrollWidth&&(f.scrollTo({left:f.scrollLeft+D.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 Yo("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 Yo("navnotarget",this,e))};this.activeElementObserverCallback=()=>{let t=this.getActiveElement();if(!t||!t.isConnected)if(this.root.contains(document.activeElement)){let e=Za();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 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=Wo(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=ki.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||nh(b)){c.push(...Wo(b,{excludedElements:l?[l]:void 0,includeSelectors:[`[${ii.FOCUSABLE}]`],excludeSelectors:[`[${ii.EXCLUDE}]`]}));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 Yo("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 b,A;let i=this.getActiveElement(),l=Za(),c=t;if((!i||!c.includes(i)||i!==l)&&(l&&c.includes(l)?i=l:[i]=c,this.setActiveElement(i)),l){let D=`data-spatial-${e}`,H=Ol(l).find(X=>X.hasAttribute(D)),Q=H==null?void 0:H.getAttribute(D);if(H&&Q){let X=H.getRootNode(),J=(b=X==null?void 0:X.getElementById(Q))!=null?b:X==null?void 0:X.querySelector(Q);if(J){let ot=Wo(J,{includeSelectors:[`[${ii.FOCUSABLE}]`],excludeSelectors:[`[${ii.EXCLUDE}]`]});if(ot.includes(J))return J;if(ot.length>0)c=ot;else return J}}}return i!==Za()?i:t.length===0||(A=Tf(i,c,e,this.distanceCalculationWeights)[0])==null?void 0:A.candidate}emitGoBackEvent(t){let e=new Yo("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=Za();return t instanceof HTMLElement?(t.click(),!0):!1}goBack(){let t=Wo(this.root).find(i=>i.hasAttribute(ii.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})],Qa.prototype,"navigationKeyMapping",2),h([u({attribute:!1})],Qa.prototype,"distanceCalculationWeights",2);var hh=Qa;hh.register(Rl);var xf=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"},ax={[wt.ARROW_UP]:Y.UP,[wt.ARROW_DOWN]:Y.DOWN,[wt.ARROW_LEFT]:Y.LEFT,[wt.ARROW_RIGHT]:Y.RIGHT,[wt.ENTER]:Y.ENTER,[wt.SPACE]:Y.SPACE,[wt.ESCAPE]:Y.ESCAPE,[wt.TAB]:Y.TAB,[wt.HOME]:Y.HOME,[wt.END]:Y.END,[wt.BACKSPACE]:Y.BACKSPACE},ee={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ie.consume({host:this,context:xf.Context})}getKeyboardNavMode(){var l;return((l=this.spatialNavigationContext)==null?void 0:l.value)?ee.SPATIAL:ee.DEFAULT}getActionForKeyEvent(i,l=!1){var b,A,D;let f=((D=(A=(b=this.spatialNavigationContext)==null?void 0:b.value)==null?void 0:A.keyToActionMap)!=null?D:ax)[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 yt=B`
+`,ff=BT;var Ll=class extends Z{constructor({context:o,initialValue:t}){super(),this.context=new Vs(this,{context:o,initialValue:t})}render(){return this.updateContext(),S`<slot></slot>`}};Ll.styles=[...Z.styles,ff];var vf=Ll;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 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 HT=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 $s(o,{context:t,callback:c,subscribe:e!=null?e:!0})},UT={consume:HT},Ie=UT;var bf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING),yf=(a,o)=>!!(a.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING),GT=a=>a.getClientRects().length===0,KT=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},WT=a=>KT(a)||GT(a),YT=a=>{let{display:o,opacity:t,visibility:e}=a.style;return o==="none"||t==="0"||e==="hidden"||e==="collapse"},jT=a=>{let o=getComputedStyle(a);return o.visibility==="hidden"||o.height==="0"||o.display==="none"},qT=a=>getComputedStyle(a).display==="contents",XT=a=>a.hasAttribute("hidden")||a.getAttribute("aria-hidden")==="true"||YT(a)||!qT(a)&&(jT(a)||WT(a)),ZT=a=>a.disabled,QT=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),gf=(a,o)=>o.some(t=>a.matches(t));var Wo=(a,o={})=>{var D,H,Q,X;if(!a)return[];let t=new Set((D=o==null?void 0:o.excludedElements)!=null?D:[]),e=(H=o==null?void 0:o.includeSelectors)!=null?H:[],i=(Q=o==null?void 0:o.excludeSelectors)!=null?Q:[],l=(X=o==null?void 0:o.stopAtNonTabbable)!=null?X:!1,c=new Set([]),f=J=>{if(t.has(a)||gf(J,i)||XT(J)||ZT(J))return"stop";if(l&&!(J instanceof HTMLSlotElement)&&J.getAttribute("tabindex")==="-1"){let ot=J.getRootNode();if(!(ot instanceof ShadowRoot&&ot.delegatesFocus))return"stop"}return gf(J,e)||QT(J)&&JT(J)?"focusable":"continue"},b=o.customFocusableCheck?J=>o.customFocusableCheck(J,f(J)):f,A=J=>{if(J instanceof HTMLElement){let at=b(J);if(at==="focusable"&&c.add(J),at==="stop")return}let ot=[];J instanceof HTMLSlotElement?ot=J.assignedElements({flatten:!0}):J instanceof HTMLElement&&J.shadowRoot?ot=Array.from(J.shadowRoot.children):J.children.length&&(ot=Array.from(J.children)),ot.forEach(A)};return A(a),[...c]},Za=(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},Ml=a=>a&&"isWidthOverflowing"in a&&typeof a.isWidthOverflowing=="function",lh=a=>{let o=a.getRootNode();return o!==document&&o instanceof ShadowRoot?lh(o.host):a},Ol=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 ki=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)))}}};ki.stack=new Set,ki.currentKeydownListener=null;var Rl=z.constructTagName("spatialnavigationprovider");var ii={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"},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 tx=Rl,ch=tx;var Ef=a=>{let{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b}=a.getBoundingClientRect(),A=o+e/2,D=t+i/2;return{x:o,y:t,width:e,height:i,left:l,top:c,right:f,bottom:b,xMid:A,yMid:D}},ex=(a,o,t)=>Math.abs(t==="horizontal"?o.yMid-a.yMid:o.xMid-a.xMid),rx=(a,o)=>o==="horizontal"?a.height/2:a.width/2,ix=(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)),ox=(a,o,t)=>o==="horizontal"?t/a.height:t/a.width,sx=(a,o,t,e)=>{let i=o.xMid-a.xMid,l=o.yMid-a.yMid,c=Math.sqrt(i*i+l*l),f=ex(a,o,t)+rx(a,t)*e.orthogonalWeight[t],b=ix(a,o,t),A=ox(a,t,b)*e.alignWeight;return c+f-A-Math.sqrt(b)},Tf=(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=Ef(a),l=t==="left"||t==="right"?"horizontal":"vertical";return o.reduce((c,f)=>{if(f===a)return c;let b=f.closest(`[${ii.SCROLL_PARENT}]`),A=b&&!b.contains(a)?b:f,D=Ef(A);if(t==="left"&&D.right>i.xMid||t==="right"&&D.left<i.xMid||t==="up"&&D.bottom>i.yMid||t==="down"&&D.top<i.yMid)return c;let H=sx(i,D,l,e);return c.push({candidate:f,distance:H}),c},[]).sort((c,f)=>c.distance-f.distance)};var Yo=class extends UIEvent{constructor(o,t,e){super(o,{bubbles:!0,cancelable:!0,composed:!0,view:window}),this.action=e,this.relatedTarget=t}};var Qa=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.handleKeyDownCapture=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.focusNext(t,l)),i.parentElement&&!i.hasAttribute(ii.NO_SCROLL)){let f=(c=i.closest(`[${ii.SCROLL_PARENT}]`))!=null?c:i.parentElement,b=nh(f);if(b){let A=i.getBoundingClientRect(),D=f.getBoundingClientRect();(b==="vertical"||b==="both")&&(l==="up"&&A.top<D.top&&f.scrollTop>0&&(f.scrollTo({top:f.scrollTop-D.height/2,behavior:"auto"}),e=!0),l==="down"&&A.bottom>D.bottom&&f.scrollTop+D.height<f.scrollHeight&&(f.scrollTo({top:f.scrollTop+D.height/2,behavior:"auto"}),e=!0)),(b==="horizontal"||b==="both")&&(l==="right"&&A.left<D.left&&f.scrollLeft>0&&(f.scrollTo({left:f.scrollLeft-D.width/2,behavior:"auto"}),e=!0),l==="left"&&A.right>D.right&&f.scrollLeft+D.width<f.scrollWidth&&(f.scrollTo({left:f.scrollLeft+D.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 Yo("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 Yo("navnotarget",this,e))};this.activeElementObserverCallback=()=>{let t=this.getActiveElement();if(!t||!t.isConnected)if(this.root.contains(document.activeElement)){let e=Za();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 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=Wo(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=ki.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||nh(b)){c.push(...Wo(b,{excludedElements:l?[l]:void 0,includeSelectors:[`[${ii.FOCUSABLE}]`],excludeSelectors:[`[${ii.EXCLUDE}]`]}));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 Yo("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 b,A;let i=this.getActiveElement(),l=Za(),c=t;if((!i||!c.includes(i)||i!==l)&&(l&&c.includes(l)?i=l:[i]=c,this.setActiveElement(i)),l){let D=`data-spatial-${e}`,H=Ol(l).find(X=>X.hasAttribute(D)),Q=H==null?void 0:H.getAttribute(D);if(H&&Q){let X=H.getRootNode(),J=(b=X==null?void 0:X.getElementById(Q))!=null?b:X==null?void 0:X.querySelector(Q);if(J){let ot=Wo(J,{includeSelectors:[`[${ii.FOCUSABLE}]`],excludeSelectors:[`[${ii.EXCLUDE}]`]});if(ot.includes(J))return J;if(ot.length>0)c=ot;else return J}}}return i!==Za()?i:t.length===0||(A=Tf(i,c,e,this.distanceCalculationWeights)[0])==null?void 0:A.candidate}emitGoBackEvent(t){let e=new Yo("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=Za();return t instanceof HTMLElement?(t.click(),!0):!1}goBack(){let t=Wo(this.root).find(i=>i.hasAttribute(ii.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})],Qa.prototype,"navigationKeyMapping",2),h([u({attribute:!1})],Qa.prototype,"distanceCalculationWeights",2);var hh=Qa;hh.register(Rl);var xf=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"},ax={[wt.ARROW_UP]:Y.UP,[wt.ARROW_DOWN]:Y.DOWN,[wt.ARROW_LEFT]:Y.LEFT,[wt.ARROW_RIGHT]:Y.RIGHT,[wt.ENTER]:Y.ENTER,[wt.SPACE]:Y.SPACE,[wt.ESCAPE]:Y.ESCAPE,[wt.TAB]:Y.TAB,[wt.HOME]:Y.HOME,[wt.END]:Y.END,[wt.BACKSPACE]:Y.BACKSPACE},ee={DEFAULT:"default",SPATIAL:"spatial"},Nt=a=>{class o extends a{constructor(){super(...arguments);this.spatialNavigationContext=Ie.consume({host:this,context:xf.Context})}getKeyboardNavMode(){var l;return((l=this.spatialNavigationContext)==null?void 0:l.value)?ee.SPATIAL:ee.DEFAULT}getActionForKeyEvent(i,l=!1){var b,A,D;let f=((D=(A=(b=this.spatialNavigationContext)==null?void 0:b.value)==null?void 0:A.keyToActionMap)!=null?D:ax)[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 yt=B`
   :host {
     align-items: center;
     display: flex;