@bagelink/vue 1.19.3 → 1.20.1

package/package.json

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

package/src/components/Dropdown.vue

@@ -1,5 +1,10 @@
 <!-- prettier-ignore-start -->
 <!-- eslint-disable -->
+<script lang="ts">
+// Shared across instances so opening a grouped dropdown closes its siblings.
+const groupRegistry = new Map<string, Set<() => void>>()
+</script>
+
 <script setup lang="ts">
 import type { VirtualElement } from '@floating-ui/dom'
 import type { IconType, ThemeType } from '../index'
@@ -118,9 +123,6 @@ const resolvedDelay = computed((): { show: number; hide: number } => {
 	return { show: 0, hide: 0 }
 })
 
-// ShowGroup registry — shared across all Dropdown instances on the page
-const groupRegistry = new Map<string, Set<() => void>>()
-
 function toVirtualElement(pt: AnchorPoint): VirtualElement {
 	const width = pt.width ?? 0
 	const height = pt.height ?? 0
@@ -361,13 +363,22 @@ let showTimer: ReturnType<typeof setTimeout> | undefined
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 function clearTimers() { clearTimeout(showTimer); clearTimeout(hideTimer) }
 
+function hideForGroup() {
+	clearTimers()
+	internalHide({ restoreFocus: false })
+}
+
 let lastToggleAt = 0
 function toggle(viaKeyboard = false) {
 	const now = Date.now()
 	if (now - lastToggleAt < 50) return
 	lastToggleAt = now
 	openedViaKeyboard = viaKeyboard
-	isOpen() ? internalHide() : internalShow()
+	if (isOpen()) {
+		internalHide()
+	} else {
+		internalShow()
+	}
 }
 
 function onTriggerClick(e?: MouseEvent) {
@@ -472,7 +483,7 @@ function removeOpenListeners() {
 onMounted(() => {
 	if (props.showGroup) {
 		if (!groupRegistry.has(props.showGroup)) groupRegistry.set(props.showGroup, new Set())
-		groupRegistry.get(props.showGroup)!.add(internalHide)
+		groupRegistry.get(props.showGroup)!.add(hideForGroup)
 	}
 	if (shown.value) internalShow()
 })
@@ -480,7 +491,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	removeOpenListeners()
 	clearTimers()
-	if (props.showGroup) groupRegistry.get(props.showGroup)?.delete(internalHide)
+	if (props.showGroup) groupRegistry.get(props.showGroup)?.delete(hideForGroup)
 	if (isOpen()) popoverRef.value?.hidePopover()
 })
 
@@ -512,7 +523,7 @@ defineExpose({ show, hide, toggle, openAt, updatePosition, shown })
 		</div>
 
 		<!-- Popup — teleported to closest dialog[open] or body, promoted to top layer via popover -->
-		<Teleport :to="teleportTarget">
+		<Teleport v-if="hasOpened" :to="teleportTarget">
 			<div
 				v-if="hasOpened"
 				:id="bglId" ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"

package/src/components/Icon/Icon.vue

@@ -4,6 +4,8 @@ import { useDevice } from '../../index'
 import { computed, ref, onMounted, watchEffect } from 'vue'
 import { MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
 
+defineOptions({ inheritAttrs: false })
+
 type AnimateType = 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'slide-up' | 'rotate-in'
 type TransitionType = 'slide-up' | 'rotate' | 'scale' | 'fade'
 
@@ -192,6 +194,7 @@ const iconStyle = computed(() => {
 <template>
 	<Transition :name="transitionName" mode="out-in">
 		<span
+			v-bind="$attrs"
 			v-if="iconRenderType === 'material'" :key="`material-${iconRender}`" class="bgl_icon-font notranslate"
 			:class="[animateClass, roundClass, roundPairClass, softClass, { 'color-white keep-white': round && !soft && isRawCssColor }]"
 			:style="iconStyle" aria-hidden="true" translate="no"
@@ -199,6 +202,7 @@ const iconStyle = computed(() => {
 			{{ iconRender }}
 		</span>
 		<span
+			v-bind="$attrs"
 			v-else-if="iconRenderType === 'font-awesome-brand'" :key="`font-awesome-brand-${iconRender}`" class="fa fa-brands bgl_icon-font notranslate" :class="[
 				`fa-${iconRender}`,
 				animateClass,