@bagelink/vue 1.14.13 → 1.15.0

package/src/components/JSONSchema.vue

@@ -422,7 +422,7 @@ watch(() => props.modelValue, (newValue) => {
 						<CheckInput class="mb-0 jsonCheckbox" :model-value="required.includes(key)" label="Required" @update:model-value="toggleRequired(key)" />
 						<Btn
 							icon="close"
-							size="s"
+							size="sm"
 							@click="removeProperty(key)"
 						/>
 					</div>
@@ -436,7 +436,7 @@ watch(() => props.modelValue, (newValue) => {
 				<Btn
 					value="Add Property"
 					icon="add"
-					size="s"
+					size="sm"
 					color="purple"
 					@click="addProperty"
 				/>
@@ -457,13 +457,13 @@ watch(() => props.modelValue, (newValue) => {
 
 <style>
 .JSONSchema{
-	--input-height: 38px;
+	--bgl-input-height: 38px;
 	--bgl-accent-color: var(--bgl-purple);
 	container-type: inline-size;
 	container-name: json-schema;
 }
 .jsonCheckbox{
-		--input-height: 44px;
+		--bgl-input-height: 44px;
 }
 .jsonFormat {
 	gap: 0.25rem !important;

package/src/components/JsonBuilder.vue

@@ -207,7 +207,7 @@ watch(() => props.modelValue, () => {
 			icon="add"
 			color="purple"
 			outline
-			size="s"
+			size="sm"
 			@click="addField"
 		/>
 	</div>
@@ -216,8 +216,8 @@ watch(() => props.modelValue, () => {
 <style scoped>
 .json-builder {
 	/* Add any custom styles here */
-	--input-height: 27px;
-	--input-font-size: 12px;
+	--bgl-input-height: 27px;
+	--bgl-input-font-size: 12px;
 }
 .grid-json-builder-row{
 	grid-template-columns: 2fr 1fr 2fr auto;

package/src/components/ListItem.vue

@@ -22,7 +22,6 @@ const props = withDefaults(
 		fullWidth?: boolean
 		ellipsis?: boolean
 		ripple?: boolean
-		tiny?: boolean
 		onClick?: () => void
 	}>(),
 	{
@@ -62,9 +61,8 @@ const bind = computed(() => {
 		<component
 			:is="isComponent" v-bind="bind" v-ripple="ripple && isClickable"
 			class="flex flex-grow-1 gap-05 list-item" :class="{
-				'py-1': !props.thin && !props.tiny,
+				'py-1': !props.thin,
 				'py-05': props.thin,
-				'py-0': props.tiny,
 				'px-1': !props.fullWidth,
 				'px-0': props.fullWidth,
 			}" @click="onClick"
@@ -139,7 +137,7 @@ button.list-item {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .list-item:last-child::after {

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>
@@ -120,7 +121,7 @@ onMounted(initializeMap)
 <style>
 .leaflet-map {
   height: 100%;
-  border-radius: var(--input-border-radius);
+  border-radius: var(--bgl-input-border-radius);
   position: relative;
   background: var(--bgl-bg);
   direction: ltr;
@@ -149,27 +150,27 @@ onMounted(initializeMap)
 
 .leaflet-touch .leaflet-control-zoom-in,
 .leaflet-touch .leaflet-control-zoom-out {
-  font-size: var(--input-font-size);
+  font-size: var(--bgl-input-font-size);
 }
 
 .leaflet-bar {
-  border-radius: var(--input-border-radius) !important;
+  border-radius: var(--bgl-input-border-radius) !important;
 }
 
 .leaflet-touch .leaflet-bar a:first-child {
-  border-top-left-radius: calc(var(--input-border-radius) - 2px) !important;
-  border-top-right-radius: calc(var(--input-border-radius) - 2px) !important;
+  border-top-left-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
+  border-top-right-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
 }
 
 .leaflet-touch .leaflet-bar a:last-child {
-  border-bottom-left-radius: calc(var(--input-border-radius) - 2px) !important;
-  border-bottom-right-radius: calc(var(--input-border-radius) - 2px) !important;
+  border-bottom-left-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
+  border-bottom-right-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
 }
 
 .leaflet-bar a {
   background: var(--bgl-box-bg) !important;
   transition: var(--bgl-transition);
-  border-bottom: 1px solid var(--border-color) !important;
+  border-bottom: 1px solid var(--bgl-border-color) !important;
   display: flex;
   justify-content: center;
   align-items: center;

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"
@@ -265,16 +265,16 @@ function handleSpreadsheetKeyDown(event: KeyboardEvent) {
 <style>
 .spreadsheet {
 	user-select: none;
-	outline: 1px solid var(--border-color);
+	outline: 1px solid var(--bgl-border-color);
 }
 
 .spreadsheet-toolbar {
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	padding-bottom: 0.375rem;
 	margin-bottom: 0;
 }
 
 body>div:has(.spreadsheet) ::-webkit-scrollbar-track {
-	background: var(--input-bg) !important;
+	background: var(--bgl-input-bg) !important;
 }
 </style>

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -180,7 +180,7 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 .row-number{
 	position: sticky;
 	inset-inline-start: 0;
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 	color: var(--txt-muted, #888);
 	z-index: 1;
 }
@@ -188,7 +188,7 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 	content: '';
 	position: absolute;
 	inset: -1px;
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 }
 
 .stickyTop{
@@ -202,11 +202,11 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 	position: absolute;
 	display: block;
 	inset: 0;
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .fixed-columns {
-	border-right: 2px solid var(--border-color);
+	border-right: 2px solid var(--bgl-border-color);
 }
 table {
 	border-collapse: collapse;
@@ -219,14 +219,14 @@ th, td {
 }
 
 th {
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 	white-space: nowrap;
 	position: relative;
 	padding: 0.25rem 0.5rem;
 	font-weight: 500;
 	text-align: start;
-	border-bottom: 1px solid var(--border-color);
-	border-inline-start: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
+	border-inline-start: 1px solid var(--bgl-border-color);
 
 }
 th .bgl_icon-font{
@@ -257,7 +257,7 @@ td.locked.selected {
 	background: var(--bgl-primary-light);
 }
 td {
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 	height: 40px;
 	vertical-align: middle;
 }
@@ -311,7 +311,7 @@ td .bgl-checkbox{
 }
 td:has(.bgl-checkbox){
 	text-align: center;
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 }
 td:has(:checked){
 	background: var(--bgl-primary-light);
@@ -355,6 +355,6 @@ td:has(:checked){
 	color: var(--txt-muted, #888);
 	font-size: 0.875rem;
 	background: var(--bgl-white);
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 }
 </style>

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,28 +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 }}
@@ -35,27 +52,31 @@ withDefaults(defineProps<Props>(), {
 
 <style>
 .custom-toast {
-  --toast-border-radius: 6px;
+  --toast-border-radius: var(--bgl-btn-border-radius);
+  --toast-success: var(--bgl-green);
+  --toast-error: var(--bgl-red);
+  --toast-warning: var(--bgl-yellow);
+  --toast-info: var(--bgl-blue);
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px;
-  padding-left: 20px;
+  gap: 0.75rem;
+  padding: 1rem;
+  padding-inline-start: 1.25rem;
   border-radius: var(--toast-border-radius);
-  background: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  background: var(--bgl-box-bg);
+  box-shadow: 0 4px 12px var(--bgl-shadow);
   min-width: 300px;
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--bgl-font);
   position: relative;
   overflow: hidden;
-  outline: 1px solid var(--border-color);
-    outline-offset: -1px !important;
+  outline: 1px solid var(--bgl-border-color);
+  outline-offset: -1px;
 }
 
 .custom-toast::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
   width: 6px;
@@ -63,52 +84,52 @@ withDefaults(defineProps<Props>(), {
 }
 
 .custom-toast--success::before {
-  background: #10b981;
+  background: var(--toast-success);
 }
 
 .custom-toast--success .custom-toast__icon {
-  color: #10b981;
+  color: var(--toast-success);
 }
 
 .custom-toast--error::before {
-  background: #ef4444;
+  background: var(--toast-error);
 }
 
 .custom-toast--error .custom-toast__icon {
-  color: #ef4444;
+  color: var(--toast-error);
 }
 
 .custom-toast--warning::before {
-  background: #f59e0b;
+  background: var(--toast-warning);
 }
 
 .custom-toast--warning .custom-toast__icon {
-  color: #f59e0b;
+  color: var(--toast-warning);
 }
 
 .custom-toast--info::before {
-  background: #3b82f6;
+  background: var(--toast-info);
 }
 
 .custom-toast--info .custom-toast__icon {
-  color: #3b82f6;
+  color: var(--toast-info);
 }
 
 .custom-toast__icon {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: bold;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .custom-toast__content {
   flex: 1;
-  font-size: 14px;
-  color: #1f2937;
+  font-size: var(--bgl-input-font-size);
+  color: var(--bgl-text-color);
   line-height: 1.5;
 }
 
@@ -116,14 +137,14 @@ withDefaults(defineProps<Props>(), {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 18px;
-  color: #6b7280;
-  padding: 4px;
+  font-size: 1.125rem;
+  color: var(--bgl-gray);
+  padding: 0.25rem;
   line-height: 1;
-  transition: color 0.2s;
+  transition: var(--bgl-transition);
 }
 
 .custom-toast__close:hover {
-  color: #1f2937;
+  color: var(--bgl-text-color);
 }
 </style>

package/src/components/calendar/CalendarPopover.vue

@@ -78,7 +78,7 @@ function closePopover() {
 	min-width: 250px;
 	max-width: 350px;
 	background-color: white;
-	border-radius: var(--btn-border-radius);
+	border-radius: var(--bgl-btn-border-radius);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	animation: fadeIn 0.2s ease;
 	transform-origin: center left;

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)"
-					style="--bgl_tabs-border-radius: calc(var(--btn-border-radius) / 2)" class="txt12 m_mb-05 m_w-100p " align-txt="center" />
+				<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/AgendaView.vue

@@ -239,12 +239,12 @@ onUnmounted(() => { containerRef.value?.removeEventListener('scroll', handleScro
 	display: block;
 	width: 1px;
 	height: calc(100% - 2rem);
-	background: var(--border-color, #e6e8ec);
+	background: var(--bgl-border-color, #e6e8ec);
 	margin: 0.5rem auto 0;
 }
 
 /* .agenda-event-card {
-	border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--card-border-radius) + 0.25rem); 
+	border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--bgl-card-border-radius) + 0.25rem); 
 } */
 
 .agenda-event-card h3::before {

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

@@ -277,7 +277,7 @@ onUnmounted(() => {
 .events-column {
 	flex-grow: 1;
 	position: relative;
-	border-inline-start: 1px solid var(--border-color);
+	border-inline-start: 1px solid var(--bgl-border-color);
 	min-height: 100%; /* Ensure the column fills the full height */
 }
 

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(() => {
@@ -166,7 +166,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 .month-header {
 	display: grid;
 	grid-template-columns: repeat(7, 1fr);
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .weekday {
@@ -181,13 +181,13 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 	grid-template-rows: repeat(6, 1fr);
 	flex-grow: 1;
 	overflow: auto;
-	border-inline-end: 1px solid var(--border-color);
+	border-inline-end: 1px solid var(--bgl-border-color);
 
 }
 
 .day-cell {
-	border-inline-start: 1px solid var(--border-color);
-	border-bottom: 1px solid var(--border-color);
+	border-inline-start: 1px solid var(--bgl-border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	padding: 0.5rem;
 	min-height: 100px;
 	display: flex;
@@ -260,7 +260,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 	min-width: 250px;
 	max-width: 350px;
 	background-color: white;
-	border-radius: var(--btn-border-radius);
+	border-radius: var(--bgl-btn-border-radius);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	animation: fadeIn 0.2s ease;
 	transform-origin: center left;