@bagelink/vue 1.15.245 → 1.15.249

package/package.json

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

package/src/components/Btn.vue

@@ -229,9 +229,10 @@ const slots: SetupContext['slots'] = useSlots()
 		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
 		<!-- Keep label/icons mounted while loading so the button width/height don't jump.
-		     absolute-fill + flex-center (not center-xy) so it stays centered in RTL too. -->
-		<Loading v-if="loading" class="absolute-fill flex-center pointer-events-none" size="15" color="currentColor" />
-		<div class="bgl_btn-flex" :class="{ invisible: loading }">
+		     Hide them hard (visibility + opacity) so the icon never shows through the spinner.
+		     absolute-fill + flex-center (not center-xy) so the spinner stays centered in RTL too. -->
+		<Loading v-if="loading" class="btn-loading absolute-fill flex-center pointer-events-none" size="15" color="currentColor" />
+		<div class="bgl_btn-flex" :class="{ 'btn-loading-hide': loading }">
 			<Icon
 				v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed"
 				:mobile-size="iconMobileSize"
@@ -299,6 +300,16 @@ justify-content: center;
 height: 100%;
 }
 
+/* Hide content while the spinner overlays — visibility alone can still flash
+   icons (esp. icon-only flat buttons); opacity + z-index keeps the spinner on top. */
+.bgl_btn-flex.btn-loading-hide {
+visibility: hidden;
+opacity: 0;
+}
+.bgl_btn .btn-loading {
+z-index: 1;
+}
+
 /* Loading.ring applies a thickness offset transform that pulls the spinner off-center */
 .bgl_btn :deep(.lds-ring) {
 transform: none;

package/src/components/form/inputs/OTP.vue

@@ -10,6 +10,10 @@ const props = defineProps<{
 	error?: string
 	/** Color of the entered digits. Accepts any CSS color or theme var (e.g. "primary", "var(--bgl-primary)", "#e11d48"). */
 	color?: string
+	/** Size of each digit box (width & height). Accepts any CSS length (e.g. "2.5rem", "40px"). Default: 3rem. */
+	size?: string
+	/** Digit box size below 910px. Falls back to `size` (or 3rem) when omitted. */
+	mobileSize?: string
 } & BagelInputShellProps>()
 
 const emit = defineEmits(['update:modelValue', 'complete'])
@@ -23,9 +27,11 @@ const digitColor = computed(() => {
 })
 
 const shellStyle = computed(() => {
-	const color = digitColor.value
-	if (!color) { return baseShellStyle.value }
-	return { ...baseShellStyle.value, '--bgl-otp-digit-color': color }
+	const style = { ...(baseShellStyle.value ?? {}) } as Record<string, string>
+	if (digitColor.value) { style['--bgl-otp-digit-color'] = digitColor.value }
+	if (props.size) { style['--bgl-otp-digit-size'] = props.size }
+	if (props.mobileSize) { style['--bgl-otp-digit-mobile-size'] = props.mobileSize }
+	return Object.keys(style).length > 0 ? style : undefined
 })
 
 // ── Single-input model ──────────────────────────────────────────────────────
@@ -156,7 +162,7 @@ outline: none;
 .otp-hidden-input::selection { background: transparent; }
 
 .digit-box {
-height: 3rem;
+height: var(--bgl-otp-digit-size, 3rem);
 aspect-ratio: 1;
 flex: 0 0 auto;
 color: var(--bgl-otp-digit-color, inherit);
@@ -168,7 +174,7 @@ background: var(--bgl-gray-light);
 border-radius: 5px;
 margin: 5px;
 text-align: center;
-font-size: 2.4rem;
+font-size: calc(var(--bgl-otp-digit-size, 3rem) * 0.8);
 font-variant-numeric: tabular-nums;
 user-select: none;
 transition: outline-color 0.2s ease, box-shadow 0.2s ease;
@@ -210,6 +216,8 @@ outline-offset: -1px;
 
 @media screen and (max-width: 910px) {
 .digit-box {
+	height: var(--bgl-otp-digit-mobile-size, var(--bgl-otp-digit-size, 3rem));
+	font-size: calc(var(--bgl-otp-digit-mobile-size, var(--bgl-otp-digit-size, 3rem)) * 0.8);
 	padding: 0.25rem;
 }
 }

package/src/components/layout/AppLayout.vue

@@ -260,6 +260,10 @@ function handleVisible(side: ResizableSide): boolean {
 let dragSide: ResizableSide | null = null
 let dragStartX = 0
 let dragStartW = 0
+/** True while the user is drag-resizing a start/end rail. Suppresses the
+ *  grid-template-columns transition so the track tracks the pointer 1:1
+ *  instead of lagging behind a 300ms ease. */
+const isRegionDragging = ref(false)
 
 function onResizeMove(e: PointerEvent) {
 	if (!dragSide) { return }
@@ -280,6 +284,8 @@ function onResizeMove(e: PointerEvent) {
 }
 function onResizeUp() {
 	dragSide = null
+	isRegionDragging.value = false
+	document.body.style.cursor = ''
 	document.body.style.userSelect = ''
 	window.removeEventListener('pointermove', onResizeMove)
 	window.removeEventListener('pointerup', onResizeUp)
@@ -288,6 +294,8 @@ function onResizeDown(side: ResizableSide, e: PointerEvent) {
 	dragSide = side
 	dragStartX = e.clientX
 	dragStartW = parsePx(regions.value[side].size, 0)
+	isRegionDragging.value = true
+	document.body.style.cursor = 'ew-resize'
 	document.body.style.userSelect = 'none'
 	window.addEventListener('pointermove', onResizeMove)
 	window.addEventListener('pointerup', onResizeUp)
@@ -341,7 +349,7 @@ const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }
 </script>
 
 <template>
-	<div class="app-layout vh-100 relative" :class="{ 'app-layout--resizing': isResizing }" :style="rootVars">
+	<div class="app-layout vh-100 relative" :class="{ 'app-layout--resizing': isResizing || isRegionDragging }" :style="rootVars">
 		<!-- top region: a full-width band above the start/end rails. Everything
 		     below insets by --bgl-region-top so the nav is never overlapped. -->
 		<div v-if="regions.top.present" class="region-band region-band--top">
@@ -352,7 +360,7 @@ const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }
 		     track size (rowStyle → grid-template-columns); each rail just fills its
 		     track. Overlay rails (mobile drawer, floating chat) collapse their track
 		     to 0 and their fixed child floats above instead. -->
-		<div class="app-row relative" :class="{ 'app-layout--resizing': isResizing }" :style="rowStyle">
+		<div class="app-row relative" :class="{ 'app-layout--resizing': isResizing || isRegionDragging }" :style="rowStyle">
 			<!-- Mobile sidebar drawer backdrop -->
 			<div v-if="startOverlayOpen" class="overlay" @click="closeOnMobile" />
 

package/src/components/layout/Tabs.vue

@@ -54,10 +54,12 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			tab => tabValue(tab) === currentTab.value
 		)
-		if (currentTabIndex === -1) { return }
-		const slotChildren = slots.default?.()[1]?.children
-
-		return h('div', (slotChildren as VNode[])[currentTabIndex])
+		if (currentTabIndex === -1) return null
+		// Nav-only usage (no default slot / no panel children) — render nothing.
+		const slotChildren = slots.default?.()?.[1]?.children as VNode[] | undefined
+		const panel = slotChildren?.[currentTabIndex]
+		if (!panel) return null
+		return h('div', panel)
 	},
 })
 </script>

package/src/components/layout/TabsNav.vue

@@ -29,10 +29,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 const { currentTab } = useTabs(props.group)
-currentTab.value
-	= props.modelValue || typeof props.tabs[0] === 'string'
-		? props.tabs[0]
-		: props.tabs[0].value
+// Prefer controlled modelValue; otherwise the first tab's string value.
+// (Parentheses required — `||` binds tighter than `?:` and used to assign the
+// whole tab object when modelValue was set, breaking findIndex / isActive.)
+currentTab.value = props.modelValue
+	|| (typeof props.tabs[0] === 'string' ? props.tabs[0] : props.tabs[0]?.value)
 
 const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabEls = ref<HTMLElement[]>([])