@bagelink/vue 1.15.238 → 1.15.241

package/package.json

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

package/src/components/Btn.vue

@@ -225,10 +225,13 @@ const slots: SetupContext['slots'] = useSlots()
 			'frost': computedVariant === 'frost',
 			'gradient': computedVariant === 'gradient',
 			'bgl_pill-frame': frame,
+			relative: loading,
 		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
-		<Loading v-if="loading" class="h-100p" size="15" color="currentColor" />
-		<div v-else class="bgl_btn-flex">
+		<!-- 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 }">
 			<Icon
 				v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed"
 				:mobile-size="iconMobileSize"
@@ -296,6 +299,11 @@ justify-content: center;
 height: 100%;
 }
 
+/* Loading.ring applies a thickness offset transform that pulls the spinner off-center */
+.bgl_btn :deep(.lds-ring) {
+transform: none;
+}
+
 .bgl_btn .bgl_btn-icon {
 font-size: calc(var(--bgl-input-font-size) * 1.3);
 }

package/src/components/Image.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOptions({ name: 'BglImage', inheritAttrs: true })
+defineOptions({ name: 'BglImage', inheritAttrs: false })
 import { Skeleton, normalizeDimension, Icon, useImageSrc } from '@bagelink/vue'
 import { Comment, computed, useSlots, type StyleValue, type VNode } from 'vue'
 
@@ -68,14 +68,18 @@ const imgFit = computed(() => props.fit ?? 'cover')
 </script>
 
 <template>
-	<!-- Framed mode: ratio box with gradient base, blended photo, and overlay slot. -->
+	<!-- Framed mode: ratio box with gradient base, blended photo, and overlay slot.
+	     Multi-root component → bind $attrs explicitly so class/style (e.g. flex-shrink-0) land on the frame. -->
 	<div
 		v-if="framed"
+		v-bind="$attrs"
 		class="bgl-image-frame relative overflow-hidden"
 		:class="ratioClass"
 		:style="{
 			width: normalizeDimension(width),
+			minWidth: normalizeDimension(width),
 			height: ratio ? undefined : normalizeDimension(height),
+			minHeight: ratio ? undefined : normalizeDimension(height),
 			background: gradientCss,
 			borderRadius: radiusStyle,
 		}"

package/src/components/layout/Tabs.vue

@@ -1,20 +1,36 @@
 <script setup lang="ts">
-import type { Tab } from '@bagelink/vue'
+import type { Tab, IconType } from '@bagelink/vue'
 import type { SetupContext, VNode } from 'vue'
 import { TabsNav } from '@bagelink/vue'
-import { computed, defineComponent, h, useSlots } from 'vue'
+import { computed, defineComponent, h, useAttrs, useSlots } from 'vue'
 
 import { useTabs } from './tabsManager'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<{
 	tabs: Tab[]
 	modelValue?: string
 	flat?: boolean
 	frame?: boolean
+	outline?: boolean
+	thin?: boolean
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	fullWidth?: boolean
+	fullWidthMobile?: boolean
+	alignTxt?: 'center' | 'start' | 'end'
+	alignTxtMobile?: 'center' | 'start' | 'end'
+	/** Horizontally center the tab bar (content panels stay full-width). */
+	center?: boolean
+	icon?: IconType
+	iconEnd?: IconType
+	iconSize?: number | string
+	iconMobileSize?: number | string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 const slots: SetupContext['slots'] = useSlots()
+const attrs = useAttrs()
 const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 
@@ -27,6 +43,12 @@ const slctTab = computed({
 	},
 })
 
+/** Props forwarded to TabsNav — omit `center` (layout-only here). */
+const navProps = computed(() => {
+	const { center: _center, modelValue: _mv, ...rest } = props
+	return rest
+})
+
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
@@ -41,13 +63,21 @@ const tabComponent = defineComponent({
 </script>
 
 <template>
-	<TabsNav v-model="slctTab" :flat="flat" :frame="frame" :tabs="tabs" :group class="mb-05" />
-	<div v-if="currentTab">
-		<template v-if="slots[currentTab]">
-			<slot :name="currentTab" />
-		</template>
-		<template v-else-if="currentTab">
-			<component :is="tabComponent" />
-		</template>
+	<div class="bgl_tabs">
+		<div :class="center ? 'flex justify-content-center' : undefined">
+			<TabsNav
+				v-bind="{ ...navProps, ...attrs }"
+				v-model="slctTab"
+				:group="group"
+			/>
+		</div>
+		<div v-if="currentTab">
+			<template v-if="slots[currentTab]">
+				<slot :name="currentTab" />
+			</template>
+			<template v-else-if="currentTab">
+				<component :is="tabComponent" />
+			</template>
+		</div>
 	</div>
 </template>