@bagelink/vue 1.15.571 → 1.15.577

package/package.json

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

package/src/components/Btn.vue

@@ -55,8 +55,6 @@ const props = withDefaults(
 		ripple?: boolean
 		fullWidth?: boolean
 		fullWidthMobile?: boolean
-		/** Allow the label to wrap onto multiple lines and grow the button vertically. */
-		multiline?: boolean
 		alignTxt?: 'center' | 'start' | 'end'
 		alignTxtMobile?: 'center' | 'start' | 'end'
 		onClick?: (e: MouseEvent) => void
@@ -226,7 +224,6 @@ const slots: SetupContext['slots'] = useSlots()
 			'bgl_btn_xlSize': computedSize === 'xl',
 			'bgl_btn_fullWidth': fullWidth,
 			'bgl_btn_fullWidthMobile': fullWidthMobile,
-			'bgl_btn_multiline': multiline,
 			'bgl_btn_alignStart': alignTxt === 'start',
 			'bgl_btn_alignEnd': alignTxt === 'end',
 			'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
@@ -450,32 +447,6 @@ height: calc(var(--bgl-btn-height) * 1.5);
 width: calc(var(--bgl-btn-height) * 1.5);
 }
 
-.bgl_btn.bgl_btn_multiline {
-height: auto;
-min-height: var(--bgl-btn-height);
-line-height: 1.3;
-padding-block: calc(var(--bgl-btn-padding) / 4);
-white-space: normal;
-overflow-wrap: anywhere;
-}
-
-.bgl_btn.bgl_btn_multiline.thin,
-.bgl_btn.bgl_btn_multiline.bgl_btn_sSize {
-min-height: calc(var(--bgl-btn-height) * 0.7);
-}
-
-.bgl_btn.bgl_btn_multiline.bgl_btn_xsSize {
-min-height: calc(var(--bgl-btn-height) / 2);
-}
-
-.bgl_btn.bgl_btn_multiline.bgl_btn_lSize {
-min-height: calc(var(--bgl-btn-height) * 1.2);
-}
-
-.bgl_btn.bgl_btn_multiline.bgl_btn_xlSize {
-min-height: calc(var(--bgl-btn-height) * 1.5);
-}
-
 .bgl_btn_fullWidth {
 width: 100%;
 }

package/src/components/Dropdown.vue

@@ -77,7 +77,8 @@ let openedViaKeyboard = false
 // old module-level counter reset per SSR render, producing duplicate ids like
 // `bgl-dd-1` on multiple dropdowns (an a11y failure: duplicate ARIA IDs).
 const bglId = `bgl-dd-${useId()}`
-const teleportTarget = ref<string | Element>('body')
+const POPOVER_ROOT = '#bagelink-popover-root'
+const teleportTarget = ref<string | Element>(POPOVER_ROOT)
 
 const { isMobile } = useDevice()
 
@@ -145,7 +146,7 @@ async function internalShow() {
 	if (props.disabled || isOpen()) return
 
 	hasOpened.value = true
-	teleportTarget.value = triggerWrapRef.value?.closest('dialog[open]') ?? 'body'
+	teleportTarget.value = triggerWrapRef.value?.closest('dialog[open]') ?? POPOVER_ROOT
 
 	if (props.showGroup && groupRegistry.has(props.showGroup)) {
 		groupRegistry.get(props.showGroup)!.forEach(fn => fn())

package/src/plugins/bagel.ts

@@ -23,6 +23,12 @@ export interface BagelOptions {
 
 export const BagelVue: Plugin<BagelOptions> = {
 	install: (app, options = {}) => {
+		if (typeof document !== 'undefined' && !document.getElementById('bagelink-popover-root')) {
+			const root = document.createElement('div')
+			root.id = 'bagelink-popover-root'
+			document.body.appendChild(root)
+		}
+
 		// Install directives
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)