@momentum-design/components 0.129.1 → 0.129.3

package/dist/browser/index.js

@@ -1092,7 +1092,7 @@
     position: absolute;
     right: 50%;
     bottom: 50%;
-    transform: translate(50%, 50%);
+    transform: translateX(round(to-zero, 50%, 1px)) translateY(round(to-zero, 50%, 1px));
   }
 
   :host > [part='body']:first-of-type {
@@ -6548,12 +6548,14 @@
       position: absolute !important;
       top: var(--mdc-virtualizedlist-hidden-top) !important;
       left: 0 !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
     }
 
     ::slotted(mdc-listitem) {
       position: relative;
     }
-  `],db=GA;var cb=z.constructTagName("virtualizedlist"),o9=z.constructTagName("virtualizedwrapper"),vn={VIRTUALIZER_PROPS:{count:0,estimateSize:()=>0,getItemKey:n=>n},LOOP:"false",SCROLL_ANCHORING:!1,IS_AT_BOTTOM_THRESHOLD:16};var je=class extends Ut(Fs){constructor(){super();this.virtualizerProps=vn.VIRTUALIZER_PROPS;this.loop=vn.LOOP;this.scrollAnchoring=vn.SCROLL_ANCHORING;this.observeSizeChanges=!1;this.revertList=!1;this.atBottomThreshold=vn.IS_AT_BOTTOM_THRESHOLD;this.virtualizer=null;this.virtualizedNavItems=null;this.virtualizerController=null;this.selectedIndex=this.initialFocus;this.selectedKey=null;this.firstIndex=0;this.firstKey=null;this.hiddenIndexes=[];this.atBottomValue="no";this.atBottomTimer=-1;this.lastScrollPosition=0;this.endOfScrollQueue=[];this.resizeObserver=null;this.handleElementFirstUpdateCompleted=t=>{var r,s;this.observeSizeChanges&&this.navItems.find(d=>d===t.target)!==void 0&&((s=(r=this.virtualizer)==null?void 0:r.measureElement)==null||s.call(r,t.target))};this.addEventListener("wheel",this.handleWheelEvent.bind(this)),this.addEventListener(Ht.FIRST_UPDATE_COMPLETED,this.handleElementFirstUpdateCompleted.bind(this))}get virtualItems(){var t,r;return(r=(t=this.virtualizer)==null?void 0:t.getVirtualItems())!=null?r:[]}get navItems(){var t,r,s,d;if(((t=this.virtualizedNavItems)==null?void 0:t.items)!==super.navItems){let m=(d=(s=(r=this.virtualizer)==null?void 0:r.options)==null?void 0:s.indexAttribute)!=null?d:"data-index";this.virtualizedNavItems=new Od(super.navItems,b=>Number(b.getAttribute(m)),()=>this.virtualizerProps.count)}return this.virtualizedNavItems}get atBottom(){return this.atBottomValue}set atBottom(t){(this.atBottomValue!==t||t==="yes"&&this.atBottomTimer===-1)&&(this.atBottomValue=t,t==="yes"?this.scrollToBottom():this.clearScrollToBottomTimer())}get totalListHeight(){var t,r;return(r=(t=this.virtualizer)==null?void 0:t.getTotalSize())!=null?r:0}connectedCallback(){this.virtualizerController=new Nd(this,{...this.virtualizerProps,horizontal:!1,getScrollElement:()=>this.scrollRef,onChange:this.onVListStateChangeHandler.bind(this),rangeExtractor:this.virtualizerRangeExtractor.bind(this)}),this.virtualizer=this.virtualizerController.getVirtualizer(),super.connectedCallback(),this.role=null,this.atBottom=this.revertList&&this.scrollAnchoring?"yes":"no",this.resizeObserver=new ResizeObserver(this.handleResizeObserverCallback.bind(this)),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.clearScrollToBottomTimer(),this.virtualizerController=null,this.virtualizer=null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}async update(t){super.update(t),t.has("virtualizerProps")&&await this.handleVirtualizerPropsUpdate(t.get("virtualizerProps")),t.has("observeSizeChanges")&&this.navItems.forEach(r=>{var s,d;this.observeSizeChanges&&((d=(s=this.virtualizer)==null?void 0:s.measureElement)==null||d.call(s,r))}),t.has("scrollAnchoring")&&(this.scrollAnchoring?this.checkAtBottom():this.atBottom="no"),t.has("revertList")&&this.revertList&&this.scrollAnchoring&&(this.atBottom="yes"),t.has("atBottomThreshold")&&this.scrollAnchoring&&this.checkAtBottom()}async handleVirtualizerPropsUpdate(t){var d,m;let{virtualizer:r}=this;if(!r)return;let s=r.measurementsCache.slice();if(r.setOptions({...r.options,...this.virtualizerProps}),this.virtualizerProps.count!==(t==null?void 0:t.count)&&(this.emitChangeEvent(),this.syncUI()),this.scrollAnchoring&&s.length>0){let b=Math.abs(this.virtualizerProps.count-((d=t==null?void 0:t.count)!=null?d:0)),x=this.selectedIndex,N=this.firstKey,B=new Ld(x-b,x+b,{includeEnd:!0}),K=(m=Array.from(B).find(X=>r.options.getItemKey(X)===this.selectedKey))!=null?m:this.selectedIndex;if(this.setSelectedIndex(K),this.requestUpdate(),await this.updateComplete,this.atBottom==="yes"){this.scrollToBottom();return}if(this.focusWithin&&x!==this.selectedIndex||!this.focusWithin&&this.firstKey!==N){let X=r.measurementsCache[this.selectedIndex].end-s[x].end;this.scrollRef.scrollTop+=X}}}setInitialFocus(){setTimeout(async()=>{if(!this.virtualizer)return;let{scrollToIndex:t}=this.virtualizer;if(this.setSelectedIndex(this.initialFocus),this.selectedIndex>=this.navItems.length)return;t(this.selectedIndex,{align:"center"}),this.navItems.find(this.isElementSelected,this)&&this.resetTabIndexes(this.selectedIndex,!1)},0)}emitChangeEvent(){var r,s,d,m,b;(s=(r=this.virtualizerProps).onChange)==null||s.call(r,this.virtualizer,this.virtualizer.isScrolling);let t={virtualizer:this.virtualizer,virtualItems:(b=(m=(d=this.virtualizer)==null?void 0:d.getVirtualItems)==null?void 0:m.call(d))!=null?b:[]};this.dispatchEvent(new CustomEvent("virtualitemschange",{detail:t,bubbles:!1,cancelable:!1}))}virtualizerRangeExtractor(t){var x,N,B,K;let{navItems:r,virtualizerProps:s,virtualizer:d}=this,m=(N=(x=s.rangeExtractor)==null?void 0:x.call(s,t))!=null?N:mp(t);return this.hiddenIndexes.forEach(Q=>{let X=r.at(Q);X&&(X.removeAttribute("data-virtualized-hidden"),X.style.removeProperty("--mdc-virtualizedlist-hidden-top"))}),this.firstIndex=t.startIndex,this.firstKey=(K=(B=this.virtualizer)==null?void 0:B.options.getItemKey(this.firstIndex))!=null?K:null,this.hiddenIndexes.length=0,[this.selectedIndex-1,this.selectedIndex,this.selectedIndex+1].forEach(Q=>{var X;m.includes(Q)||(Q<t.startIndex&&Q>=0&&(m.unshift(Q),this.hiddenIndexes.push(Q)),Q>t.endIndex&&Q<((X=d==null?void 0:d.options.count)!=null?X:0)&&(m.push(Q),this.hiddenIndexes.push(Q)))}),this.updateHiddenItemsPosition(),m.sort((Q,X)=>Q-X),m}updateHiddenItemsPosition(){let{navItems:t,virtualizerProps:r,virtualizer:s}=this;if(!s||r.count===0)return;let{measurementsCache:d,range:m}=s;this.hiddenIndexes.forEach(b=>{var N;let x=t.at(b);if(x){let B=d[(N=m==null?void 0:m.startIndex)!=null?N:0],K=d[b];x.setAttribute("data-virtualized-hidden","true"),x.style.setProperty("--mdc-virtualizedlist-hidden-top",`${K.start-B.start}px`)}})}isElementSelected(t){var r;return((r=this.virtualizer)==null?void 0:r.indexFromElement(t))===this.selectedIndex}setSelectedIndex(t){if(this.virtualizer){let{count:r,getItemKey:s}=this.virtualizer.options;this.selectedIndex=Math.max(0,Math.min(r-1,t)),this.selectedKey=s(t)}}onElementStoreUpdate(t,r){if(r==="added"){let s=this.isElementSelected(t);t.tabIndex=s?0:-1,this.setAriaSetSize(t)}else r==="removed"&&t.tabIndex===0&&queueMicrotask(()=>{this.resetTabIndexes(this.selectedIndex,this.focusWithin)})}async onVListStateChangeHandler(t,r){this.syncUI(),await this.updateComplete,this.requestUpdate(),!r&&this.endOfScrollQueue.length>0&&(this.endOfScrollQueue.forEach(s=>s()),this.endOfScrollQueue.length=0),this.checkAtBottom(),this.emitChangeEvent()}onScrollHandler(t){let r=t.target;this.atBottom==="re-evaluate"||r.scrollTop<this.lastScrollPosition?this.atBottom="no":this.checkAtBottom(),this.lastScrollPosition=r.scrollTop}checkAtBottom(){let{clientHeight:t,scrollHeight:r,scrollTop:s}=this.scrollRef;this.scrollAnchoring&&this.virtualizer&&this.atBottom==="no"&&r>t-this.atBottomThreshold&&!this.virtualizer.isScrolling&&(this.atBottom=r-s<=t+this.atBottomThreshold?"yes":"no")}handleNavigationKeyDown(t){var r,s,d,m;switch(t.key){case Z.HOME:{(s=(r=this.virtualizer)==null?void 0:r.scrollToIndex)==null||s.call(r,0,{align:"start"}),this.endOfScrollQueue.push(()=>this.resetTabIndexes(0));break}case Z.END:{let b=this.virtualizerProps.count-1;(m=(d=this.virtualizer)==null?void 0:d.scrollToIndex)==null||m.call(d,b,{align:"end"}),this.endOfScrollQueue.push(()=>this.resetTabIndexes(b));break}case Z.ARROW_UP:{this.atBottom="re-evaluate";break}default:}super.handleNavigationKeyDown(t)}resetTabIndexes(t,r=!0){super.resetTabIndexes(t,r),this.setSelectedIndex(t)}resetTabIndexAndSetFocus(t,r,s=!0,d=s){if(this.navItems.find(b=>{var x;return((x=this.virtualizer)==null?void 0:x.indexFromElement(b))===t})===void 0){this.scrollToIndex(t,{}),this.endOfScrollQueue.push(()=>{super.resetTabIndexAndSetFocus(t,r,s,d),this.setSelectedIndex(t)});return}super.resetTabIndexAndSetFocus(t,r,s,d),this.setSelectedIndex(t)}setAriaSetSize(t){var r,s;t.setAttribute("aria-setsize",`${(s=(r=this.virtualizer)==null?void 0:r.options.count)!=null?s:-1}`)}scrollToBottom(){if(this.clearScrollToBottomTimer(),this.atBottom==="yes"&&this.scrollRef){let{clientHeight:t,scrollHeight:r,scrollTop:s}=this.scrollRef;this.totalListHeight>t&&(this.scrollRef.scrollTop+=r-t-s),this.atBottomTimer=requestAnimationFrame(this.scrollToBottom.bind(this))}}clearScrollToBottomTimer(){cancelAnimationFrame(this.atBottomTimer),this.atBottomTimer=-1}scrollToIndex(t,r){var s,d;(d=(s=this.virtualizer).scrollToIndex)==null||d.call(s,t,r),this.atBottom=this.scrollAnchoring&&t+1===this.virtualizerProps.count?"yes":"no"}syncUI(){var d;let t=this.virtualItems.find(({index:m})=>!this.hiddenIndexes.includes(m)),r=(d=t==null?void 0:t.start)!=null?d:0;window.getComputedStyle(this);let s=0;this.revertList&&this.scrollRef.clientHeight>=this.totalListHeight&&(s=this.scrollRef.clientHeight-this.totalListHeight),this.wrapperRef.style.height=`${this.totalListHeight}px`,this.containerRef.style.transform=`translateY(${s+r}px)`}handleWheelEvent(t){t.deltaY<0&&(this.atBottom="re-evaluate")}handleResizeObserverCallback(){requestAnimationFrame(()=>{this.revertList&&this.scrollRef.clientHeight>=this.totalListHeight&&this.syncUI()})}render(){var t;return _`
+  `],db=GA;var cb=z.constructTagName("virtualizedlist"),o9=z.constructTagName("virtualizedwrapper"),vn={VIRTUALIZER_PROPS:{count:0,estimateSize:()=>0,getItemKey:n=>n},LOOP:"false",SCROLL_ANCHORING:!1,IS_AT_BOTTOM_THRESHOLD:16};var je=class extends Ut(Fs){constructor(){super();this.virtualizerProps=vn.VIRTUALIZER_PROPS;this.loop=vn.LOOP;this.scrollAnchoring=vn.SCROLL_ANCHORING;this.observeSizeChanges=!1;this.revertList=!1;this.atBottomThreshold=vn.IS_AT_BOTTOM_THRESHOLD;this.virtualizer=null;this.virtualizedNavItems=null;this.virtualizerController=null;this.selectedIndex=this.initialFocus;this.selectedKey=null;this.firstIndex=0;this.firstKey=null;this.hiddenIndexes=[];this.atBottomValue="no";this.atBottomTimer=-1;this.lastScrollPosition=0;this.endOfScrollQueue=[];this.resizeObserver=null;this.handleElementFirstUpdateCompleted=t=>{var r,s;this.observeSizeChanges&&this.navItems.find(d=>d===t.target)!==void 0&&((s=(r=this.virtualizer)==null?void 0:r.measureElement)==null||s.call(r,t.target))};this.addEventListener("wheel",this.handleWheelEvent.bind(this)),this.addEventListener(Ht.FIRST_UPDATE_COMPLETED,this.handleElementFirstUpdateCompleted.bind(this))}get virtualItems(){var t,r;return(r=(t=this.virtualizer)==null?void 0:t.getVirtualItems())!=null?r:[]}get navItems(){var t,r,s,d;if(((t=this.virtualizedNavItems)==null?void 0:t.items)!==super.navItems){let m=(d=(s=(r=this.virtualizer)==null?void 0:r.options)==null?void 0:s.indexAttribute)!=null?d:"data-index";this.virtualizedNavItems=new Od(super.navItems,b=>Number(b.getAttribute(m)),()=>this.virtualizerProps.count)}return this.virtualizedNavItems}get atBottom(){return this.atBottomValue}set atBottom(t){(this.atBottomValue!==t||t==="yes"&&this.atBottomTimer===-1)&&(this.atBottomValue=t,t==="yes"?this.scrollToBottom():this.clearScrollToBottomTimer())}get totalListHeight(){var t,r;return(r=(t=this.virtualizer)==null?void 0:t.getTotalSize())!=null?r:0}connectedCallback(){this.virtualizerController=new Nd(this,{...this.virtualizerProps,horizontal:!1,getScrollElement:()=>this.scrollRef,onChange:this.onVListStateChangeHandler.bind(this),rangeExtractor:this.virtualizerRangeExtractor.bind(this)}),this.virtualizer=this.virtualizerController.getVirtualizer(),super.connectedCallback(),this.role=null,this.atBottom=this.revertList&&this.scrollAnchoring?"yes":"no",this.resizeObserver=new ResizeObserver(this.handleResizeObserverCallback.bind(this)),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.clearScrollToBottomTimer(),this.virtualizerController=null,this.virtualizer=null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}async update(t){super.update(t),t.has("virtualizerProps")&&await this.handleVirtualizerPropsUpdate(t.get("virtualizerProps")),t.has("observeSizeChanges")&&this.navItems.forEach(r=>{var s,d;this.observeSizeChanges&&((d=(s=this.virtualizer)==null?void 0:s.measureElement)==null||d.call(s,r))}),t.has("scrollAnchoring")&&(this.scrollAnchoring?this.checkAtBottom():this.atBottom="no"),t.has("revertList")&&this.revertList&&this.scrollAnchoring&&(this.atBottom="yes"),t.has("atBottomThreshold")&&this.scrollAnchoring&&this.checkAtBottom()}async handleVirtualizerPropsUpdate(t){var d,m;let{virtualizer:r}=this;if(!r)return;let s=r.measurementsCache.slice();if(r.setOptions({...r.options,...this.virtualizerProps}),this.virtualizerProps.count!==(t==null?void 0:t.count)&&(this.emitChangeEvent(),this.syncUI()),this.scrollAnchoring&&s.length>0){let b=Math.abs(this.virtualizerProps.count-((d=t==null?void 0:t.count)!=null?d:0)),x=this.selectedIndex,N=this.firstKey,B=new Ld(x-b,x+b,{includeEnd:!0}),K=(m=Array.from(B).find(X=>r.options.getItemKey(X)===this.selectedKey))!=null?m:this.selectedIndex;if(this.setSelectedIndex(K),this.requestUpdate(),await this.updateComplete,this.atBottom==="yes"){this.scrollToBottom();return}if(this.focusWithin&&x!==this.selectedIndex||!this.focusWithin&&this.firstKey!==N){let X=r.measurementsCache[this.selectedIndex].end-s[x].end;this.scrollRef.scrollTop+=X}}}setInitialFocus(){setTimeout(async()=>{if(!this.virtualizer)return;let{scrollToIndex:t}=this.virtualizer;if(this.setSelectedIndex(this.initialFocus),this.selectedIndex>=this.navItems.length)return;t(this.selectedIndex,{align:"center"}),this.navItems.find(this.isElementSelected,this)&&this.resetTabIndexes(this.selectedIndex,!1)},0)}emitChangeEvent(){var r,s,d,m,b;(s=(r=this.virtualizerProps).onChange)==null||s.call(r,this.virtualizer,this.virtualizer.isScrolling);let t={virtualizer:this.virtualizer,virtualItems:(b=(m=(d=this.virtualizer)==null?void 0:d.getVirtualItems)==null?void 0:m.call(d))!=null?b:[]};this.dispatchEvent(new CustomEvent("virtualitemschange",{detail:t,bubbles:!1,cancelable:!1}))}virtualizerRangeExtractor(t){var x,N,B,K;let{navItems:r,virtualizerProps:s,virtualizer:d}=this,m=(N=(x=s.rangeExtractor)==null?void 0:x.call(s,t))!=null?N:mp(t);return this.hiddenIndexes.forEach(Q=>{let X=r.at(Q);X&&(X.removeAttribute("data-virtualized-hidden"),X.style.removeProperty("--mdc-virtualizedlist-hidden-top"))}),this.firstIndex=t.startIndex,this.firstKey=(K=(B=this.virtualizer)==null?void 0:B.options.getItemKey(this.firstIndex))!=null?K:null,this.hiddenIndexes.length=0,[this.selectedIndex-1,this.selectedIndex,this.selectedIndex+1].forEach(Q=>{var X;m.includes(Q)||(Q<t.startIndex&&Q>=0&&(m.unshift(Q),this.hiddenIndexes.push(Q)),Q>t.endIndex&&Q<((X=d==null?void 0:d.options.count)!=null?X:0)&&(m.push(Q),this.hiddenIndexes.push(Q)))}),this.updateHiddenItemsPosition(t),m.sort((Q,X)=>Q-X),m}updateHiddenItemsPosition(t){let{navItems:r,virtualizerProps:s,virtualizer:d}=this;if(!d||s.count===0)return;let{measurementsCache:m}=d;this.hiddenIndexes.forEach(b=>{let x=r.at(b);if(x){let N=Math.max(t.startIndex-t.overscan,0),B=m[N],K=m[b];x.setAttribute("data-virtualized-hidden","true"),x.style.setProperty("--mdc-virtualizedlist-hidden-top",`${K.start-B.start}px`)}})}isElementSelected(t){var r;return((r=this.virtualizer)==null?void 0:r.indexFromElement(t))===this.selectedIndex}setSelectedIndex(t){if(this.virtualizer){let{count:r,getItemKey:s}=this.virtualizer.options;this.selectedIndex=Math.max(0,Math.min(r-1,t)),this.selectedKey=s(t)}}onElementStoreUpdate(t,r){if(r==="added"){let s=this.isElementSelected(t);t.tabIndex=s?0:-1,this.setAriaSetSize(t)}else r==="removed"&&t.tabIndex===0&&queueMicrotask(()=>{this.resetTabIndexes(this.selectedIndex,this.focusWithin)})}async onVListStateChangeHandler(t,r){this.syncUI(),await this.updateComplete,this.requestUpdate(),!r&&this.endOfScrollQueue.length>0&&(this.endOfScrollQueue.forEach(s=>s()),this.endOfScrollQueue.length=0),this.checkAtBottom(),this.emitChangeEvent()}onScrollHandler(t){let r=t.target;this.atBottom==="re-evaluate"||r.scrollTop<this.lastScrollPosition?this.atBottom="no":this.checkAtBottom(),this.lastScrollPosition=r.scrollTop}checkAtBottom(){let{clientHeight:t,scrollHeight:r,scrollTop:s}=this.scrollRef;this.scrollAnchoring&&this.virtualizer&&this.atBottom==="no"&&r>t-this.atBottomThreshold&&!this.virtualizer.isScrolling&&(this.atBottom=r-s<=t+this.atBottomThreshold?"yes":"no")}handleNavigationKeyDown(t){var r,s,d,m;switch(t.key){case Z.HOME:{(s=(r=this.virtualizer)==null?void 0:r.scrollToIndex)==null||s.call(r,0,{align:"start"}),this.endOfScrollQueue.push(()=>this.resetTabIndexes(0));break}case Z.END:{let b=this.virtualizerProps.count-1;(m=(d=this.virtualizer)==null?void 0:d.scrollToIndex)==null||m.call(d,b,{align:"end"}),this.endOfScrollQueue.push(()=>this.resetTabIndexes(b));break}case Z.ARROW_UP:{this.atBottom="re-evaluate";break}default:}super.handleNavigationKeyDown(t)}resetTabIndexes(t,r=!0){super.resetTabIndexes(t,r),this.setSelectedIndex(t)}resetTabIndexAndSetFocus(t,r,s=!0,d=s){if(this.navItems.find(b=>{var x;return((x=this.virtualizer)==null?void 0:x.indexFromElement(b))===t})===void 0){this.scrollToIndex(t,{}),this.endOfScrollQueue.push(()=>{super.resetTabIndexAndSetFocus(t,r,s,d),this.setSelectedIndex(t)});return}super.resetTabIndexAndSetFocus(t,r,s,d),this.setSelectedIndex(t)}setAriaSetSize(t){var r,s;t.setAttribute("aria-setsize",`${(s=(r=this.virtualizer)==null?void 0:r.options.count)!=null?s:-1}`)}scrollToBottom(){if(this.clearScrollToBottomTimer(),this.atBottom==="yes"&&this.scrollRef){let{clientHeight:t,scrollHeight:r,scrollTop:s}=this.scrollRef;this.totalListHeight>t&&(this.scrollRef.scrollTop+=r-t-s),this.atBottomTimer=requestAnimationFrame(this.scrollToBottom.bind(this))}}clearScrollToBottomTimer(){cancelAnimationFrame(this.atBottomTimer),this.atBottomTimer=-1}scrollToIndex(t,r){var s,d;(d=(s=this.virtualizer).scrollToIndex)==null||d.call(s,t,r),this.atBottom=this.scrollAnchoring&&t+1===this.virtualizerProps.count?"yes":"no"}syncUI(){var d;let t=this.virtualItems.find(({index:m})=>!this.hiddenIndexes.includes(m)),r=(d=t==null?void 0:t.start)!=null?d:0;window.getComputedStyle(this);let s=0;this.revertList&&this.scrollRef.clientHeight>=this.totalListHeight&&(s=this.scrollRef.clientHeight-this.totalListHeight),this.wrapperRef.style.height=`${this.totalListHeight}px`,this.containerRef.style.transform=`translateY(${s+r}px)`}handleWheelEvent(t){t.deltaY<0&&(this.atBottom="re-evaluate")}handleResizeObserverCallback(){requestAnimationFrame(()=>{this.revertList&&this.scrollRef.clientHeight>=this.totalListHeight&&this.syncUI()})}render(){var t;return _`
       <slot name="list-header"></slot>
       <div part="scroll" tabindex="-1" @scroll="${this.onScrollHandler}">
         <div part="wrapper">