@trimble-oss/moduswebcomponents/modus-wc/p-b0dbe412.entry.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import{r as e,d as s,h as m,e as u,g as o}from"./p-C1-Dpkp7.js";import{L as n}from"./p-B7TrmDWL.js";import{i as t}from"./p-DJ2rBB6r.js";function i(e,s,m){var u;if("grid"===s)null===(u=e.querySelectorAll(".modus-wc-app-menu-grid-item")[m])||void 0===u||u.focus();else{const s=e.querySelectorAll(".modus-wc-app-menu-item-row")[m];if(!s)return;if(0===s.tabIndex)s.focus();else{const e=s.querySelector("modus-wc-menu-item li");null==e||e.focus()}}}const a=class{constructor(m){e(this,m),this.layoutChange=s(this,"layoutChange",7),this.itemsOrderChange=s(this,"itemsOrderChange",7),this.itemClick=s(this,"itemClick",7),this.inheritedAttributes={},this.customClass="",this.layout="list",this.apps=[],this.isEditMode=!1,this.draggedItemPos=null,this.dropTargetIndex=null,this.grabbedItemPos=null,this.truncatedApps=new Set,this.appsSnapshot=null}componentWillLoad(){this.inheritedAttributes=t(this.el)}componentDidLoad(){this.scheduleTooltipUpdate()}onAppsChange(){this.isEditMode||this.scheduleTooltipUpdate()}scheduleTooltipUpdate(){requestAnimationFrame((()=>{"grid"===this.layout?this.updateGridTooltips():this.updateListTooltips()}))}setsAreEqual(e,s){if(e.size!==s.size)return!1;for(const m of e)if(!s.has(m))return!1;return!0}setTruncatedApps(e){this.setsAreEqual(e,this.truncatedApps)||(this.truncatedApps=e)}updateGridTooltips(){const e=new Set;this.el.querySelectorAll(".modus-wc-app-menu-grid-item").forEach(((s,m)=>{var u,o;const n=s.querySelector(".modus-wc-app-menu-grid-item-label"),t=null===(o=null===(u=this.apps)||void 0===u?void 0:u[m])||void 0===o?void 0:o.appName;n&&t&&(n.scrollWidth>n.clientWidth||n.scrollHeight>n.clientHeight)&&e.add(t)})),this.setTruncatedApps(e)}getListMenuItemLabelTextElement(e){var s,m;const u=e.querySelector(".modus-wc-menu-item-labels");if(!u)return null;for(const e of Array.from(u.children)){if("MODUS-WC-TOOLTIP"===e.tagName)return null!==(m=null===(s=e.firstElementChild)||void 0===s?void 0:s.firstElementChild)&&void 0!==m?m:null;if("DIV"===e.tagName&&!e.classList.contains("modus-wc-menu-item-sublabel"))return e}return null}updateListTooltips(){const e=new Set;this.el.querySelectorAll(".modus-wc-app-menu-item-row").forEach(((s,m)=>{var u,o;const n=null===(o=null===(u=this.apps)||void 0===u?void 0:u[m])||void 0===o?void 0:o.appName;if(!n)return;const t=this.getListMenuItemLabelTextElement(s);t&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)&&e.add(n)})),this.setTruncatedApps(e)}getDisplayName(e){var s,m;return null!==(m=null===(s=n[e])||void 0===s?void 0:s.displayName)&&void 0!==m?m:e}onLayoutChange(e){this.layoutChange.emit({layout:e}),this.scheduleTooltipUpdate()}handleEdit(){var e,s;this.appsSnapshot=[...null!==(e=this.apps)&&void 0!==e?e:[]],this.isEditMode=!0;const m=null!==(s=this.layout)&&void 0!==s?s:"list";requestAnimationFrame((()=>{i(this.el,m,0)}))}hasOrderChangedSinceEdit(){var e;const s=this.appsSnapshot;if(!s)return!1;const m=null!==(e=this.apps)&&void 0!==e?e:[];return m.length!==s.length||m.some(((e,m)=>e.appName!==s[m].appName))}handleDone(){var e;const s=this.hasOrderChangedSinceEdit();this.isEditMode=!1,this.grabbedItemPos=null,this.appsSnapshot=null,s&&this.itemsOrderChange.emit([...null!==(e=this.apps)&&void 0!==e?e:[]])}handleCancel(){this.appsSnapshot&&(this.apps=this.appsSnapshot),this.appsSnapshot=null,this.isEditMode=!1,this.grabbedItemPos=null}handleKeyDown(e,s){var m,u;switch(e.key){case" ":case"Enter":if(this.isEditMode)e.preventDefault(),this.grabbedItemPos=this.grabbedItemPos?null:{appIndex:s};else{const u=null===(m=this.apps)||void 0===m?void 0:m[s];u&&(e.preventDefault(),this.itemClick.emit({appName:u.appName}))}break;case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":{const m=null!==(u=this.layout)&&void 0!==u?u:"list",o="grid"===m?function(e){const s=e.querySelectorAll(".modus-wc-app-menu-grid-item");if(s.length<=1)return 1;const m=s[0].offsetTop;let u=1;for(let e=1;e<s.length&&s[e].offsetTop===m;e++)u++;return u}(this.el):1,n=function(e,s,m){switch(e){case"ArrowUp":return"grid"===s?-m:-1;case"ArrowDown":return"grid"===s?m:1;case"ArrowLeft":return"grid"===s?-1:null;case"ArrowRight":return"grid"===s?1:null;default:return null}}(e.key,m,o);if(null===n)return;e.preventDefault(),e.stopPropagation(),this.isEditMode&&this.grabbedItemPos?this.reorderByKeyboard(s,n):this.navigateFocusByKeyboard(s,n);break}case"Escape":this.isEditMode&&this.grabbedItemPos&&(e.preventDefault(),this.grabbedItemPos=null)}}reorderByKeyboard(e,s){var m,u;const o=null!==(m=this.apps)&&void 0!==m?m:[],n=null!==(u=this.layout)&&void 0!==u?u:"list",t="grid"===n?function(e,s,m){const u=s+m;if(u<0||u>=e.length)return null;const o=[...e],[n]=o.splice(s,1);return o.splice(u,0,n),{items:o,targetIndex:u}}(o,e,s):function(e,s,m){const u=s+m;if(u<0||u>=e.length)return null;const o=[...e];return[o[s],o[u]]=[o[u],o[s]],{items:o,targetIndex:u}}(o,e,s);t&&(this.apps=t.items,this.grabbedItemPos={appIndex:t.targetIndex},requestAnimationFrame((()=>{i(this.el,n,t.targetIndex)})))}navigateFocusByKeyboard(e,s){var m,u,o;const n=null!==(m=this.layout)&&void 0!==m?m:"list",t=function(e,s,m){const u=e+s;return u>=0&&u<m?u:null}(e,s,null!==(o=null===(u=this.apps)||void 0===u?void 0:u.length)&&void 0!==o?o:0);null!==t&&requestAnimationFrame((()=>{i(this.el,n,t)}))}isGrabbed(e){var s;return(null===(s=this.grabbedItemPos)||void 0===s?void 0:s.appIndex)===e}handleRowFocusOut(e,s){if(!this.isGrabbed(s))return;const m=e.currentTarget,u=e.relatedTarget;m&&u&&m.contains(u)||(this.grabbedItemPos=null)}isDragSource(e){var s;return(null===(s=this.draggedItemPos)||void 0===s?void 0:s.appIndex)===e}handleDragStart(e,s){this.isEditMode&&(this.draggedItemPos={appIndex:s},e.dataTransfer&&(e.dataTransfer.effectAllowed="move"))}handleDragOver(e){this.isEditMode&&e.preventDefault()}handleDragEnter(e,s){this.isEditMode&&this.draggedItemPos&&(e.preventDefault(),this.dropTargetIndex=this.draggedItemPos.appIndex!==s?s:null)}handleDragEnd(){this.draggedItemPos=null,this.dropTargetIndex=null}handleDragLeave(e){const s=e.relatedTarget;s&&e.currentTarget.contains(s)||(this.dropTargetIndex=null)}handleDrop(e,s){var m;if(!this.isEditMode||!this.draggedItemPos)return;e.preventDefault(),e.stopPropagation();const u=[...null!==(m=this.apps)&&void 0!==m?m:[]],{appIndex:o}=this.draggedItemPos,[n]=u.splice(o,1);n&&(u.splice(s,0,n),this.apps=u,this.draggedItemPos=null,this.dropTargetIndex=null)}handleContainerDrop(e){var s;if(!this.isEditMode||!this.draggedItemPos)return;e.preventDefault();const m=[...null!==(s=this.apps)&&void 0!==s?s:[]],{appIndex:u}=this.draggedItemPos,[o]=m.splice(u,1);o&&(m.push(o),this.apps=m,this.draggedItemPos=null,this.dropTargetIndex=null)}renderListLayout(){var e;const s=null!==(e=this.apps)&&void 0!==e?e:[];return m("div",{class:"modus-wc-app-menu-items",onDragLeave:e=>this.handleDragLeave(e),onDragOver:e=>this.handleDragOver(e),onDrop:e=>this.handleContainerDrop(e)},m("modus-wc-menu",null,s.map(((e,s)=>m("div",{"aria-label":this.getDisplayName(e.appName),"aria-roledescription":this.isEditMode?"reorderable item":void 0,class:`modus-wc-app-menu-item-row ${this.isEditMode?"modus-wc-app-menu-draggable-item":""} ${this.isGrabbed(s)?"modus-wc-app-menu-grabbed-item":""} ${this.isDragSource(s)?"modus-wc-app-menu-drag-source":""} ${this.dropTargetIndex===s?"modus-wc-app-menu-drop-target":""}`,draggable:this.isEditMode,onClick:()=>{this.isEditMode||this.itemClick.emit({appName:e.appName})},onDragEnd:()=>this.handleDragEnd(),onDragEnter:e=>this.handleDragEnter(e,s),onDragOver:e=>this.handleDragOver(e),onDragStart:e=>this.handleDragStart(e,s),onDrop:e=>this.handleDrop(e,s),onFocusout:e=>this.handleRowFocusOut(e,s),onKeyDown:e=>this.handleKeyDown(e,s),role:this.isEditMode?"option":"listitem",tabindex:this.isEditMode?0:-1},this.isEditMode&&m("modus-wc-icon",{name:"drag_indicator","custom-class":"modus-wc-app-menu-drag-icon",size:"xs"}),m("modus-wc-menu-item",{label:this.getDisplayName(e.appName),tooltipContent:this.truncatedApps.has(e.appName)?this.getDisplayName(e.appName):void 0,tooltipPosition:"auto",onItemSelect:e=>e.stopPropagation()},m("modus-wc-logo",{name:e.appName,"custom-class":"modus-wc-app-menu-app-logo",emblem:!0,slot:"start-icon"})))))))}renderGridLayout(){var e;const s=null!==(e=this.apps)&&void 0!==e?e:[];return m("div",{class:"modus-wc-app-menu-grid",onDragLeave:e=>this.handleDragLeave(e),onDragOver:e=>this.handleDragOver(e),onDrop:e=>this.handleContainerDrop(e)},m("div",{class:"modus-wc-app-menu-grid-row",role:this.isEditMode?"listbox":"list"},s.map(((e,s)=>m("div",{"aria-label":this.getDisplayName(e.appName),"aria-roledescription":this.isEditMode?"reorderable item":void 0,class:`modus-wc-app-menu-grid-item ${this.isEditMode?"modus-wc-app-menu-draggable-item":""} ${this.isGrabbed(s)?"modus-wc-app-menu-grabbed-item":""} ${this.isDragSource(s)?"modus-wc-app-menu-drag-source":""} ${this.dropTargetIndex===s?"modus-wc-app-menu-drop-target":""}`,draggable:this.isEditMode,onClick:()=>{this.isEditMode||this.itemClick.emit({appName:e.appName})},onDragEnd:()=>this.handleDragEnd(),onDragEnter:e=>this.handleDragEnter(e,s),onDragOver:e=>this.handleDragOver(e),onDragStart:e=>this.handleDragStart(e,s),onDrop:e=>this.handleDrop(e,s),onFocusout:e=>this.handleRowFocusOut(e,s),onKeyDown:e=>this.handleKeyDown(e,s),role:this.isEditMode?"option":"listitem",tabindex:0},this.isEditMode&&m("modus-wc-icon",{name:"drag_indicator","custom-class":"modus-wc-app-menu-drag-icon",size:"xs"}),m("modus-wc-logo",{name:e.appName,"custom-class":"modus-wc-app-menu-grid-emblem",emblem:!0}),m("modus-wc-tooltip",{content:this.getDisplayName(e.appName),disabled:!this.truncatedApps.has(e.appName),position:"auto"},m("modus-wc-typography",{"custom-class":"modus-wc-app-menu-grid-item-label",size:"sm",label:this.getDisplayName(e.appName)})))))))}getClasses(){const e=["modus-wc-app-menu"];return this.customClass&&e.push(this.customClass),e.join(" ")}render(){return m(u,Object.assign({key:"a51b600d32deb9b1c554382d2011c39a0392bddb"},this.inheritedAttributes,{class:this.getClasses()}),m("modus-wc-panel",{key:"b1374169662b8c55102b28c29bf814a2f9624ddb",height:"568px",width:"320px"},m("div",{key:"093037f4f705b9151e5914862e89eb888e5a98bd",slot:"body"},m("div",{key:"fb47edc9a60a1f23c5426c83d558bc739cdf1e39",class:"modus-wc-app-menu-header"},m("div",{key:"9a341355eadd42521e25cd64afa18ac7d88c4da3",class:"modus-wc-app-menu-header-title"},m("modus-wc-typography",{key:"c610e3af5b8374a22a1c2730387def677498928d",size:"2xl",weight:"semibold",hierarchy:"h3",label:this.isEditMode?"Edit":"Trimble Apps"})),m("div",{key:"f66e9c0044054497628e90bca7aae50fdebe483c",class:"modus-wc-app-menu-header-end-content"},this.isEditMode?[m("modus-wc-button",{size:"sm",color:"tertiary",onButtonClick:()=>this.handleCancel()},"Cancel"),m("modus-wc-button",{size:"sm",color:"primary",onButtonClick:()=>this.handleDone()},"Done")]:m("modus-wc-button",{"aria-label":"Edit app order",shape:"square",size:"sm",variant:"filled",color:"tertiary",onButtonClick:()=>this.handleEdit()},m("modus-wc-icon",{name:"pencil",variant:"solid"})))),m("div",{key:"290ad2a3985cc6ab149b90b6bbd2876a29dbaa5a",class:"modus-wc-app-menu-body"},"list"===this.layout?this.renderListLayout():this.renderGridLayout()))))}get el(){return o(this)}static get watchers(){return{apps:["onAppsChange"],layout:["onLayoutChange"]}}};a.style="modus-wc-app-menu.modus-wc-app-menu{box-sizing:border-box;display:block;min-width:0;text-align:start;width:fit-content}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);gap:var(--modus-wc-spacing-lg)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel [slot=body]{display:flex;flex-direction:column;gap:var(--modus-wc-spacing-lg);overflow-y:auto;padding:var(--modus-wc-spacing-lg);padding-inline-end:0;scrollbar-gutter:stable}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-header{align-content:center;align-items:center;align-self:stretch;display:flex;flex-wrap:wrap;gap:var(--modus-wc-spacing-sm);min-height:var(--modus-wc-size-sm);padding:0 var(--modus-wc-spacing-lg)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-header .modus-wc-app-menu-header-title{align-content:flex-start;align-items:flex-start;display:flex;flex:1 0 0;flex-wrap:wrap}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-header .modus-wc-app-menu-header-end-content{align-items:center;display:flex;gap:var(--modus-wc-spacing-sm)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-menu{padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-lg)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items{padding:0 var(--modus-wc-spacing-xs)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items li.modus-wc-menu-item-active,modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button:active{background-color:transparent;color:inherit}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items{}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row:focus-visible{outline:none}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row:focus-visible modus-wc-menu-item .modus-wc-menu-item,modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row:focus-visible modus-wc-menu-item .modus-wc-menu-item:hover{outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row{align-items:center;display:flex;margin-inline:calc(-1 * var(--modus-wc-spacing-xs));max-width:256px;position:relative}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row .modus-wc-app-menu-drag-icon{color:var(--modus-wc-color-base-content);position:absolute;transform:translateX(-10%);z-index:1}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row>modus-wc-menu-item{flex:1;min-width:0}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item{cursor:grab}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item .modus-wc-app-menu-drag-icon{cursor:grab}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item{}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button,modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content,modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content *{cursor:grab}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button:active,modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button:active .modus-wc-menu-item-content,modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button:active .modus-wc-menu-item-content *{cursor:grabbing}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items{}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button{min-width:0}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-content{gap:var(--modus-wc-spacing-lg);min-width:0;width:100%}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels{flex:1;min-width:0;overflow:hidden;padding-inline-start:0}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels>div:not(.modus-wc-menu-item-sublabel){max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels>modus-wc-tooltip{display:block;flex:1;max-width:100%;min-width:0}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels>modus-wc-tooltip>div{max-width:100%;min-width:0}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels>modus-wc-tooltip>div>div:first-child{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-content [slot=start-icon]{align-items:center;display:inline-flex;flex-shrink:0;padding-inline-end:0}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-content [slot=start-icon] .modus-wc-app-menu-app-logo{height:var(--modus-wc-input-height-sm);width:var(--modus-wc-input-height-sm)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid{cursor:pointer;display:flex;flex-direction:column;gap:var(--modus-wc-spacing-sm);margin-inline:auto;width:fit-content}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-row{align-self:stretch;display:grid;gap:0 var(--modus-wc-spacing-sm);grid-template-columns:repeat(3, minmax(0, 1fr));justify-items:stretch}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item{align-items:center;border-radius:var(--modus-wc-border-radius-sm);display:flex;flex-direction:column;padding:var(--modus-wc-spacing-lg) var(--modus-wc-spacing-xs);position:relative;width:var(--modus-wc-spacing-20)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item>modus-wc-icon{align-items:center;display:inline-flex;inset-inline-end:0;justify-content:center;position:absolute;top:0;width:var(--modus-wc-size-xs)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item:hover{background-color:var(--modus-wc-color-base-100)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item{}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item:focus-visible{outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-emblem{aspect-ratio:1/1;flex:1 0 0;min-height:var(--modus-wc-size-xs);min-width:var(--modus-wc-size-xs);width:var(--modus-wc-line-height-h0)}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item-label{align-self:stretch;-webkit-box-orient:vertical;color:var(--modus-wc-color-base-content);display:-webkit-box;-webkit-line-clamp:1;line-height:var(--modus-wc-font-size-2xl);overflow:hidden;text-align:center;text-overflow:ellipsis}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-draggable-item{cursor:grab;transition:box-shadow 0.2s ease}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-draggable-item:active{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);cursor:grabbing}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grabbed-item{background-color:var(--modus-wc-color-base-200);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-drag-source{opacity:0.3}modus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-drop-target{border-radius:var(--modus-wc-border-radius-sm);outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}";export{a as modus_wc_app_menu}