@bagelink/vue 1.15.337 → 1.15.340

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.337",
+  "version": "1.15.340",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Dropdown.vue

@@ -404,13 +404,16 @@ defineExpose({ show, hide, shown })
 		<div
 			v-if="!referenceEl"
 			ref="triggerWrapRef" v-bind="$attrs"
-			aria-haspopup="menu"
-			:aria-expanded="shown"
-			:aria-controls="bglId"
 			@mouseenter="onTriggerMouseenter" @mouseleave="onTriggerMouseleave" @focus="onTriggerMouseenter"
 			@blur="onTriggerMouseleave" @keydown="onTriggerKeydown"
 		>
-			<slot name="trigger" :show :hide :shown>
+			<slot
+				name="trigger"
+				:show
+				:hide
+				:shown
+				:trigger-attrs="{ 'aria-haspopup': 'menu', 'aria-expanded': shown, 'aria-controls': bglId }"
+			>
 				<Btn
 					:class="triggerClass" :iconEnd :icon="iconSet" :value :thin :flat :outline :frame :round :color
 					:disabled @click="onTriggerClick"

package/src/components/draggable/useDraggable.ts

@@ -78,6 +78,23 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const UPDATE_THRESHOLD = 150 // ms between updates
 	const POSITION_CACHE = new Map<number, { top: number, bottom: number }>()
 
+	function appendToTopLayer(element: HTMLElement) {
+		document.body.appendChild(element)
+		element.setAttribute('popover', 'manual')
+		// The browser's popover UA styles use `inset: 0; margin: auto`, which
+		// recentres fixed-position drag helpers and offsets them from the cursor.
+		element.style.inset = 'auto'
+		element.style.margin = '0'
+		element.style.padding = '0'
+		element.style.border = '0'
+		element.showPopover()
+	}
+
+	function removeFromTopLayer(element: HTMLElement) {
+		if (element.matches(':popover-open')) element.hidePopover()
+		element.parentNode?.removeChild(element)
+	}
+
 	function createGhost(el: DraggableElement) {
 		if (!isBrowser) { return null }
 		const ghost = el.cloneNode(true) as HTMLElement
@@ -94,7 +111,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		ghost.style.cursor = 'grabbing'
 		ghost.style.willChange = 'transform'
 		ghost.classList.add(defaultOptions.ghostClass!)
-		document.body.appendChild(ghost)
+		appendToTopLayer(ghost)
 		return ghost
 	}
 
@@ -122,7 +139,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		dot.style.background = 'var(--primary-color, #0066ff)'
 
 		line.appendChild(dot)
-		document.body.appendChild(line)
+		appendToTopLayer(line)
 		return line
 	}
 
@@ -249,7 +266,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 			ghostElement.value.style.opacity = '0'
 			ghostElement.value.style.transform += ' scale(0.8)'
 			setTimeout(() => {
-				ghostElement.value?.parentNode?.removeChild(ghostElement.value)
+				if (ghostElement.value) removeFromTopLayer(ghostElement.value)
 				ghostElement.value = null
 			}, 150)
 		}
@@ -257,7 +274,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		if (dropIndicator.value) {
 			dropIndicator.value.style.opacity = '0'
 			setTimeout(() => {
-				dropIndicator.value?.parentNode?.removeChild(dropIndicator.value)
+				if (dropIndicator.value) removeFromTopLayer(dropIndicator.value)
 				dropIndicator.value = null
 			}, 150)
 		}