@bagelink/vue 1.14.15 → 1.15.0

package/src/components/MapEmbed/Index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LatLngExpression, Map, Marker } from 'leaflet'
-import { appendScript, sleep } from '@bagelink/vue'
-import { onMounted, ref, watch } from 'vue'
+import { appendScript, awaitGlobal } from '@bagelink/vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import './leaflet.css'
 
 type MapMarker = {
@@ -40,14 +40,9 @@ const id = ref(Math.random().toString(36).slice(2, 10))
 const defaultMarkerSVG = '<svg width="28" height="38" viewBox="0 0 28 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2263 37.7955C17.0897 37.7955 19.4109 37.0138 19.4109 36.0496C19.4109 35.0854 17.0897 34.3037 14.2263 34.3037C11.363 34.3037 9.04175 35.0854 9.04175 36.0496C9.04175 37.0138 11.363 37.7955 14.2263 37.7955Z" fill="black" fill-opacity="0.1"/><path d="M14.2265 0.549591C21.2842 0.549591 27.0131 6.23786 27.0787 13.28V13.4024C27.0787 19.3328 24.4759 24.4306 21.5627 28.2764C18.6511 32.12 15.4577 34.6754 14.3457 35.5097C14.2748 35.5629 14.1778 35.5629 14.1068 35.5097C12.9947 34.675 9.80135 32.1197 6.88984 28.2762C3.97665 24.4304 1.37378 19.3328 1.37378 13.4024C1.37378 6.30387 7.12806 0.549591 14.2265 0.549591Z" fill="#ED1b3E" stroke="#ED6C6F"/><path d="M14.2263 21.6185C18.7639 21.6185 22.4424 17.94 22.4424 13.4024C22.4424 8.86477 18.7639 5.18631 14.2263 5.18631C9.68872 5.18631 6.01025 8.86477 6.01025 13.4024C6.01025 17.94 9.68872 21.6185 14.2263 21.6185Z" fill="white"/></svg>'
 const leafletScriptUrl = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
 
-async function loadGlobalL() {
-	while (!window.L) { await sleep(100) }
-	return window.L
-}
-
 async function initializeMap() {
 	await appendScript(leafletScriptUrl)
-	L.value = await loadGlobalL()
+	L.value = await awaitGlobal('L')
 	if (!map.value) {
 		map.value = L.value.map(id.value, {
 			center: props.center,
@@ -96,7 +91,7 @@ function latLangFromMarker(marker: MapMarker): LatLngExpression {
 }
 
 async function watchMarkers(markers?: MapMarker[]) {
-	if (!L.value) { L.value = await loadGlobalL() }
+	if (!L.value) { L.value = await awaitGlobal('L') }
 	_markers.value.forEach(marker => marker.remove())
 	if (!markers) { return }
 
@@ -111,6 +106,12 @@ watch(() => props.markers, watchMarkers, { immediate: true })
 watch(() => props.center, center => map.value?.setView(center, props.zoom), { immediate: true })
 
 onMounted(initializeMap)
+
+onUnmounted(() => {
+	_markers.value.forEach(marker => marker.remove())
+	map.value?.remove()
+	map.value = undefined
+})
 </script>
 
 <template>

package/src/components/NavBar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { IconType, NavLink } from '@bagelink/vue'
-import { Icon } from '@bagelink/vue'
+import { Icon, MOBILE_BREAKPOINT } from '@bagelink/vue'
 import { onMounted, ref } from 'vue'
 import { resolveI18n } from '../i18n'
 
@@ -24,7 +24,7 @@ withDefaults(
 const isOpen = ref(true)
 
 function calcIsOpen() {
-	isOpen.value = window.innerWidth < 1100
+	isOpen.value = window.innerWidth <= MOBILE_BREAKPOINT
 
 	const storedNavOpenVal = localStorage.getItem('navOpen')
 	if (storedNavOpenVal === 'true' || storedNavOpenVal === null) { isOpen.value = true }

package/src/components/Spreadsheet/Index.vue

@@ -217,7 +217,7 @@ function handleSpreadsheetKeyDown(event: KeyboardEvent) {
 									flat thin small value="$t:spreadsheet.selectAll"
 									@click="visibleColumns = columnOptions.map(col => col.key)"
 								/>
-								<Btn flat thin small value="$t:spreadsheet.clearAll" @click="visibleColumns = []" />
+								<Btn flat thin sm value="$t:spreadsheet.clearAll" @click="visibleColumns = []" />
 							</div>
 							<CheckInput
 								v-for="col in columnOptions" :key="col.key" v-model="visibleColumns"

package/src/components/Swiper.vue

@@ -14,6 +14,8 @@ import 'swiper/css/effect-cube'
 import 'swiper/css/effect-flip'
 import 'swiper/css/effect-cards'
 
+defineOptions({ name: 'BglSwiper' })
+
 type SwiperEffect = 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards'
 type SwiperDirection = 'horizontal' | 'vertical'
 type SwiperVariant = 'default' | 'testimonial' | 'gallery' | 'cards' | 'coverflow' | 'hero'
@@ -505,7 +507,7 @@ defineExpose({
 	opacity: 0.8;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 910px) {
 	.swi-ctrl {
 		padding: 0rem 0.5rem;
 	}

package/src/components/Toast.vue

@@ -1,30 +1,45 @@
 <script setup lang="ts">
 import { Icon } from '@bagelink/vue'
+import { computed } from 'vue'
 
 defineOptions({ name: 'BglToast' })
 
+type ToastType = 'success' | 'error' | 'warning' | 'info'
+
 interface Props {
 	message: string
-	type?: 'success' | 'error' | 'warning' | 'info'
+	type?: ToastType
+	/** Boolean shorthands: <Toast error message="..." /> */
+	info?: boolean
+	success?: boolean
+	warning?: boolean
+	error?: boolean
 	showIcon?: boolean
 	showCloseButton?: boolean
 	closeToast?: () => void
 }
 
-withDefaults(defineProps<Props>(), {
-	type: 'info',
+const props = withDefaults(defineProps<Props>(), {
 	showIcon: true,
 	showCloseButton: true,
 })
+
+const computedType = computed<ToastType>(() => {
+	if (props.type) { return props.type }
+	if (props.error) { return 'error' }
+	if (props.warning) { return 'warning' }
+	if (props.success) { return 'success' }
+	return 'info'
+})
 </script>
 
 <template>
-	<div class="custom-toast" :class="`custom-toast--${type}`">
+	<div class="custom-toast" :class="`custom-toast--${computedType}`">
 		<div v-if="showIcon" class="custom-toast__icon">
-			<Icon v-if="type === 'success'" icon="check_circle" />
-			<Icon v-if="type === 'error'" icon="dangerous" />
-			<Icon v-if="type === 'warning'" icon="report" />
-			<Icon v-if="type === 'info'" icon="info" />
+			<Icon v-if="computedType === 'success'" icon="check_circle" />
+			<Icon v-if="computedType === 'error'" icon="dangerous" />
+			<Icon v-if="computedType === 'warning'" icon="report" />
+			<Icon v-if="computedType === 'info'" icon="info" />
 		</div>
 		<div class="custom-toast__content">
 			{{ message }}

package/src/components/calendar/Index.vue

@@ -163,20 +163,20 @@ onMounted(() => {
 				{{ formatDate(currentDate, 'YYYY') }}
 			</h3>
 			<div class="ms-auto flex gap-025 m_flex-wrap">
-				<TabsNav size="s" v-if="viewSwitcher === 'tabs'" :model-value="currentView" :tabs="viewTabs" group="calendar-view" @update:model-value="handleViewChange($event as CalendarView)"
+				<TabsNav size="sm" v-if="viewSwitcher === 'tabs'" :model-value="currentView" :tabs="viewTabs" group="calendar-view" @update:model-value="handleViewChange($event as CalendarView)"
 					style="--bgl_tabs-border-radius: calc(var(--bgl-btn-border-radius) / 2)" class="txt12 m_mb-05 m_w-100p " align-txt="center" />
 				<Dropdown v-else thin :value="currentView" iconEnd="keyboard_arrow_down" color="gray">
 					<ListItem v-for="(_, key) in views" :key="key" thin :title="t(`calendar.views.${key.toLowerCase()}`)" @click="handleViewChange(key)" />
 				</Dropdown>
 		<div class="flex gap-025">
-			<Btn icon="calendar" size="s" class="txt12" color="gray" :value="t('calendar.today')" @click="handleDateChange(new Date())" />
+			<Btn icon="calendar" size="sm" class="txt12" color="gray" :value="t('calendar.today')" @click="handleDateChange(new Date())" />
 			<Btn
-					icon="chevron_left" color="gray" size="s" class=""
+					icon="chevron_left" color="gray" size="sm" class=""
 					:disabled="currentView === 'Agenda'"
 					@click="handleDateChange(timeDelta(currentDate, { [viewToDeltaKey[currentView]]: -1 }))"
 				/>
 				<Btn
-					icon="chevron_right" color="gray" size="s" class=""
+					icon="chevron_right" color="gray" size="sm" class=""
 					:disabled="currentView === 'Agenda'"
 					@click="handleDateChange(timeDelta(currentDate, { [viewToDeltaKey[currentView]]: 1 }))"
 				/>

package/src/components/calendar/views/MonthView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
-import { formatDate, getI18n } from '@bagelink/vue'
+import { formatDate, getI18n, useDevice } from '@bagelink/vue'
 import { computed, useSlots } from 'vue'
 
 interface MonthViewEvent {
@@ -23,8 +23,8 @@ const emit = defineEmits<{
 
 const slots: SetupContext['slots'] = useSlots()
 
-// Responsive state
-const isMobile = computed(() => window.innerWidth < 768)
+// Responsive state (reactive — tracks resize via useDevice)
+const { isMobile } = useDevice()
 
 // Calendar data
 const weekDays = computed(() => {

package/src/components/form/index.ts

@@ -1,5 +1 @@
-export { default as BglForm } from './BagelForm.vue'
-export { default as BagelForm } from './BagelForm.vue'
-export { default as BagelMultiStepForm } from './BglMultiStepForm.vue'
-export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

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

@@ -507,6 +507,6 @@ onMounted(() => {
 }
 
 .bagel-input.has-error input {
-	border-color: var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
 }
 </style>

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

@@ -320,6 +320,6 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 }
 
 .bagel-input.has-error input {
-	border-color: var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
 }
 </style>

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

@@ -117,11 +117,11 @@ function isDigitsFull() {
 
 <style scoped>
 .otp-error-message {
-	color: var(--bgl-red, #dc3545);
+	color: var(--bgl-red);
 }
 .otp_wrap.has-error input,
 .otp_wrap.has-error textarea {
-	outline: 1px solid var(--bgl-red, #dc3545) !important;
+	outline: 1px solid var(--bgl-red) !important;
 }
 
 .otp_wrap {

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

@@ -457,12 +457,12 @@ onMounted(() => {
 }
 
 .selectinput.has-error .selectinput-btn {
-	border-color: var(--bgl-red, #dc3545) !important;
-	outline: 1px solid var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
+	outline: 1px solid var(--bgl-red) !important;
 }
 
 .selectinput.underlined.has-error .selectinput-btn {
-	border-color: var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
 }
 
 /* Underlined mode styling */

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

@@ -399,10 +399,10 @@ onMounted(initializeCountry)
 }
 
 .bagel-input.has-error .tel-input {
-	border: 1px solid var(--bgl-red, #dc3545) !important;
+	border: 1px solid var(--bgl-red) !important;
 }
 .bagel-input.has-error .tel-input {
-	--bgl-border-color: var(--bgl-red, #dc3545) !important;
+	--bgl-border-color: var(--bgl-red) !important;
 }
 
 @keyframes highlight-country {

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

@@ -272,6 +272,6 @@ onMounted(async () => {
 
 .bagel-input.has-error input,
 .bagel-input.has-error textarea {
-	border-color: var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
 }
 </style>

package/src/components/form/inputs/Upload/upload.css

@@ -266,7 +266,7 @@
 }
 
 .bagel-input.has-error .fileUploadWrap {
-    outline-color: var(--bgl-red, #dc3545);
+    outline-color: var(--bgl-red);
 }
 
 /* ─── Variant: frame ─────────────────────────────────────────────────────── */
@@ -285,5 +285,5 @@
 }
 
 .bagel-input.has-error :deep(.bgl-card) {
-    border-color: var(--bgl-red, #dc3545);
+    border-color: var(--bgl-red);
 }

package/src/components/index.ts

@@ -6,11 +6,12 @@ export { default as Alert } from './Alert.vue'
 export * from './analytics'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
+/** @deprecated Renamed to Badge. Pill is an alias that will be removed in a future version. */
+export { default as Pill } from './Badge.vue'
 export { default as BglVideo } from './BglVideo.vue'
 export { default as Btn } from './Btn.vue'
 export { default as Calendar } from './calendar/Index.vue'
 export { default as Card } from './Card.vue'
-export { default as Carousel } from './Carousel.vue'
 export { default as DataPreview } from './DataPreview.vue'
 export { default as DataTable } from './dataTable/DataTable.vue'
 /** @deprecated Use DataTable instead. TableSchema is an alias that will be removed in a future version. */
@@ -27,7 +28,6 @@ export { default as Icon } from './Icon/Icon.vue'
 export { FONT_AWESOME_ICONS, FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
-export { default as ImportData } from './ImportData.vue'
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'
@@ -37,13 +37,9 @@ export { default as Menu } from './Menu.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pagination } from './Pagination.vue'
-export { default as Pill } from './Pill.vue'
 export { default as Rating } from './Rating.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
-export { default as Slider } from './Slider.vue'
 export { default as Spreadsheet } from './Spreadsheet/Index.vue'
 export { default as Swiper } from './Swiper.vue'
-export { default as Title } from './Title.vue'
-export { default as ToolBar } from './ToolBar.vue'
 export { default as TopBar } from './TopBar.vue'
 export { default as Zoomer } from './Zoomer.vue'

package/src/components/layout/AppContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Btn, PageTitle } from '@bagelink/vue'
-import { inject, computed } from 'vue'
+import { useAppLayout } from './appLayoutContext'
 
 interface Props {
 	title?: string
@@ -14,28 +14,13 @@ withDefaults(defineProps<Props>(), {
 	border: true,
 })
 
-// Inject menu state from parent
-const menuState = inject('menuState', {
-	isOpen: { value: true },
-	isMobile: { value: false },
-	toggleMenu: () => { },
-}) as {
-	isOpen: { value: boolean }
-	isMobile: { value: boolean }
-	toggleMenu: () => void
-}
-
-// Inject sidebar card style state
-const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
-
-// Computed property to check if sidebar has card style
-const hasSidebarCard = computed(() => sidebarCardStyle?.value ?? false)
+const { isOpen, toggleMenu, sidebarCardStyle } = useAppLayout()
 </script>
 
 <template>
 	<div
 		class="app-content h-100p flex column" :class="{
-			paddingAppContent: hasSidebarCard,
+			paddingAppContent: sidebarCardStyle,
 		}"
 	>
 		<!-- Header -->
@@ -48,7 +33,8 @@ const hasSidebarCard = computed(() => sidebarCardStyle?.value ?? false)
 				<!-- Menu Toggle Button -->
 				<Btn
 					v-if="showMenuButton" flat icon="dock_to_right" class="menuToggleButton"
-					@click="menuState.toggleMenu"
+					:aria-expanded="isOpen" aria-controls="bgl-app-sidebar" aria-label="Toggle sidebar"
+					@click="toggleMenu"
 				/>
 
 				<!-- Back Button -->

package/src/components/layout/AppLayout.vue

@@ -1,35 +1,69 @@
 <script lang="ts" setup>
-import { ref, provide, onMounted, onUnmounted, computed } from 'vue'
+import { ref, provide, onMounted, onUnmounted, computed, watch } from 'vue'
+import { useEscapeKey } from '../../composables/useEscapeKey'
+import { MOBILE_BREAKPOINT } from '../../utils/constants'
+import { AppLayoutKey, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_COLLAPSED_WIDTH_CARD } from './appLayoutContext'
 
 interface Props {
 	sidebarWidth?: string
 	sidebarCardStyle?: boolean
 	defaultOpen?: boolean
+	/** v-model:open — controlled sidebar state */
+	open?: boolean
+	/** Persist sidebar state to localStorage (desktop only). Default true. */
+	persist?: boolean
+	storageKey?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	sidebarWidth: '260px',
 	sidebarCardStyle: false,
 	defaultOpen: true,
+	open: undefined,
+	persist: true,
+	storageKey: 'bgl-sidebar-open',
 })
 
-// Menu state
-const isOpen = ref(props.defaultOpen)
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+function readStored(): boolean | undefined {
+	if (!props.persist || typeof localStorage === 'undefined') { return undefined }
+	const raw = localStorage.getItem(props.storageKey)
+	return raw === null ? undefined : raw === 'true'
+}
+
+const isOpen = ref(props.open ?? readStored() ?? props.defaultOpen)
 const isMobile = ref(false)
 
-// Check if mobile
+const sidebarCollapsedWidth = props.sidebarCardStyle ? SIDEBAR_COLLAPSED_WIDTH_CARD : SIDEBAR_COLLAPSED_WIDTH
+
+// Sync controlled prop → internal state
+watch(() => props.open, (v) => {
+	if (v !== undefined) { isOpen.value = v }
+})
+
+watch(isOpen, (v) => {
+	emit('update:open', v)
+	// Persist only explicit desktop state — never the forced mobile collapse
+	if (props.persist && !isMobile.value && typeof localStorage !== 'undefined') {
+		localStorage.setItem(props.storageKey, String(v))
+	}
+})
+
 function checkMobile() {
-	isMobile.value = window.innerWidth < 910
+	isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT
 	if (isMobile.value) {
 		isOpen.value = false
 	}
 }
 
-// Toggle menu
 function toggleMenu() {
 	isOpen.value = !isOpen.value
 }
 
+// Esc closes the sidebar overlay on mobile
+useEscapeKey(() => { isOpen.value = false }, () => isMobile.value && isOpen.value)
+
 // Close menu on mobile when clicking outside
 function closeOnMobile() {
 	if (isMobile.value) {
@@ -42,26 +76,21 @@ const mainContentStyles = computed(() => {
 	if (isMobile.value) {
 		return { marginInlineStart: '0' }
 	}
-	const collapsedWidth = props.sidebarCardStyle ? '82px' : '66px'
 	return {
-		marginInlineStart: isOpen.value ? props.sidebarWidth : collapsedWidth
+		marginInlineStart: isOpen.value ? props.sidebarWidth : sidebarCollapsedWidth
 	}
 })
 
-// Provide state to child components
-provide('menuState', {
+provide(AppLayoutKey, {
 	isOpen,
 	isMobile,
 	toggleMenu,
 	closeOnMobile,
 	sidebarWidth: props.sidebarWidth,
-	sidebarCollapsedWidth: props.sidebarCardStyle ? '82px' : '66px'
+	sidebarCollapsedWidth,
+	sidebarCardStyle: props.sidebarCardStyle,
 })
 
-// Provide sidebar card style based on prop
-provide('sidebarCardStyle', { value: props.sidebarCardStyle })
-
-// Initialize
 onMounted(() => {
 	checkMobile()
 	window.addEventListener('resize', checkMobile)
@@ -82,7 +111,7 @@ onUnmounted(() => {
 		/>
 
 		<!-- Sidebar Slot -->
-		<slot name="sidebar" />
+		<slot name="sidebar" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 
 		<!-- Main Content Area -->
 		<main
@@ -90,11 +119,11 @@ onUnmounted(() => {
 			:style="mainContentStyles"
 		>
 			<!-- Header Slot -->
-			<slot name="header" />
+			<slot name="header" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 
 			<!-- Page Content -->
 			<div class="page-content overflow w-100p h-100p">
-				<slot />
+				<slot v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 			</div>
 		</main>
 	</div>

package/src/components/layout/AppSidebar.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { NavLink } from '@bagelink/vue'
 import { Btn, Icon } from '@bagelink/vue'
-import { inject, computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { resolveI18n } from '../../i18n'
+import { useAppLayout, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_COLLAPSED_WIDTH_CARD } from './appLayoutContext'
 
 // Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
@@ -24,13 +25,11 @@ interface Props {
 	frame?: boolean
 	activeRoutes?: string[]
 	centerlinks?: boolean
-	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	card: true,
 	centerlinks: false,
-	defaultOpen: true,
 	bgColor: 'var(--bgl-white)',
 	textColor: 'var(--bgl-black)',
 	activeColor: 'var(--bgl-black)',
@@ -43,32 +42,16 @@ const props = withDefaults(defineProps<Props>(), {
 const route = useRoute()
 const isTransitioning = ref(false)
 
-// Inject menu state from parent
-const _fallbackIsOpen = ref(props.defaultOpen)
-const _fallbackIsMobile = ref(false)
-
-const menuState = inject('menuState', {
-	isOpen: _fallbackIsOpen,
-	isMobile: _fallbackIsMobile,
-	closeOnMobile: () => void 0,
-	sidebarWidth: '260px',
-	sidebarCollapsedWidth: '66px',
-}) as {
-	isOpen: { value: boolean }
-	isMobile: { value: boolean }
-	closeOnMobile: () => void
-	sidebarWidth: string
-	sidebarCollapsedWidth: string
-}
+const { isOpen, isMobile, sidebarWidth, toggleMenu, closeOnMobile } = useAppLayout()
 
 // visually "open" during transition — prevents logo/padding from jumping immediately
-const isVisuallyOpen = computed(() => menuState.isOpen.value || isTransitioning.value)
+const isVisuallyOpen = computed(() => isOpen.value || isTransitioning.value)
 
 // Watch for changes in menu state to handle transitioning
 watch(
-	() => menuState.isOpen.value,
+	() => isOpen.value,
 	() => {
-		if (!menuState.isMobile.value) {
+		if (!isMobile.value) {
 			isTransitioning.value = true
 			// Reset after transition completes
 			setTimeout(() => {
@@ -134,9 +117,9 @@ function isActiveRoute(link: LinkWithAction): boolean {
 const sidebarStyles = computed(() => {
 	let width = '280px'
 
-	if (!menuState.isMobile.value) {
-		const collapsedWidth = props.card ? '82px' : '68px'
-		width = menuState.isOpen.value ? menuState.sidebarWidth : collapsedWidth
+	if (!isMobile.value) {
+		const collapsedWidth = props.card ? SIDEBAR_COLLAPSED_WIDTH_CARD : SIDEBAR_COLLAPSED_WIDTH
+		width = isOpen.value ? sidebarWidth : collapsedWidth
 	}
 
 	return {
@@ -147,13 +130,13 @@ const sidebarStyles = computed(() => {
 
 <template>
 	<aside
+		id="bgl-app-sidebar"
 		class="app-sidebar transition-400 fixed start top bottom h-100vh z-99" :class="{
-			'sidebar-mobile-open': menuState.isMobile.value && menuState.isOpen.value,
-			'sidebar-mobile-closed':
-				menuState.isMobile.value && !menuState.isOpen.value,
+			'sidebar-mobile-open': isMobile && isOpen,
+			'sidebar-mobile-closed': isMobile && !isOpen,
 			'transitioning': isTransitioning,
 			'p-05': props.card,
-			'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
+			'sidebar-collapsed': !isMobile && !isOpen,
 		}" :style="sidebarStyles"
 	>
 		<div
@@ -186,7 +169,7 @@ const sidebarStyles = computed(() => {
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start" :class="{ 'justify-content-center': props.centerlinks }">
 				<Btn
 					v-for="link in props.navLinks" :key="link.to"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" fullWidth
+					:title="!isOpen && !isMobile ? resolveI18n(link.label) : ''" fullWidth
 					alignTxt="start" class="flex-shrink-0 px-075" :class="{ 'nav-btn-active': isActiveRoute(link) }"
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
@@ -205,7 +188,7 @@ const sidebarStyles = computed(() => {
 				<!-- Footer Links -->
 				<Btn
 					v-for="link in props.footerLinks" :key="link.to || link.label"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''"
+					:title="!isOpen && !isMobile ? resolveI18n(link.label) : ''"
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
@@ -219,7 +202,7 @@ const sidebarStyles = computed(() => {
 					</span>
 				</Btn>
 				<!-- Custom Footer Content Slot -->
-				<slot name="footer" />
+				<slot name="footer" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 			</div>
 		</div>
 	</aside>

package/src/components/layout/Resizable.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
 import { RESIZABLE_KEY, useResizableLayoutProvider } from '../../composables/useResizableLayout'
+import { MOBILE_BREAKPOINT } from '../../utils/constants'
+
+defineOptions({ name: 'BglResizable' })
 
 interface Props {
 	/** Lay panels side-by-side. Default: vertical (stacked). */
@@ -11,14 +14,14 @@ interface Props {
 	 * Set `:breakpoint="0"` to disable responsive switching entirely.
 	 */
 	mobileVertical?: boolean
-	/** Width (px) below which the mobile layout activates. @default 768 */
+	/** Width (px) below which the mobile layout activates. @default MOBILE_BREAKPOINT (910) */
 	breakpoint?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	horizontal: false,
 	mobileVertical: true,
-	breakpoint: 768,
+	breakpoint: MOBILE_BREAKPOINT,
 })
 
 const containerEl = ref<HTMLElement>()