@bagelink/vue 1.4.79 → 1.4.85

package/src/components/Pill.vue

@@ -55,17 +55,212 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 	}
 }
 
-const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
-	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
-	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
+const themes: Partial<Record<string, typeof computedDefaultColors>> = {
+	// Base Colors
+	'blue': getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
 	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)', color: 'var(--bgl-white)' }),
 	'yellow': getThemeColors({ backgroundColor: 'var(--bgl-yellow)', color: 'var(--bgl-black)' }),
-	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	'purple': getThemeColors({ backgroundColor: 'var(--bgl-purple)', color: 'var(--bgl-white)' }),
+	'brown': getThemeColors({ backgroundColor: 'var(--bgl-brown)', color: 'var(--bgl-white)' }),
+	'orange': getThemeColors({ backgroundColor: 'var(--bgl-orange)', color: 'var(--bgl-white)' }),
+	'turquoise': getThemeColors({ backgroundColor: 'var(--bgl-turquoise)', color: 'var(--bgl-white)' }),
+	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray)', color: 'var(--bgl-white)' }),
+	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
+	'pink': getThemeColors({ backgroundColor: 'var(--bgl-pink)', color: 'var(--bgl-white)' }),
+
+	// System Colors
+	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
+
+	// 10% tints (lightest)
+	'blue-10': getThemeColors({ backgroundColor: 'var(--bgl-blue-10)', color: 'var(--bgl-blue)' }),
+	'green-10': getThemeColors({ backgroundColor: 'var(--bgl-green-10)', color: 'var(--bgl-green)' }),
+	'red-10': getThemeColors({ backgroundColor: 'var(--bgl-red-10)', color: 'var(--bgl-red)' }),
+	'yellow-10': getThemeColors({ backgroundColor: 'var(--bgl-yellow-10)', color: 'var(--bgl-yellow)' }),
+	'purple-10': getThemeColors({ backgroundColor: 'var(--bgl-purple-10)', color: 'var(--bgl-purple)' }),
+	'brown-10': getThemeColors({ backgroundColor: 'var(--bgl-brown-10)', color: 'var(--bgl-brown)' }),
+	'orange-10': getThemeColors({ backgroundColor: 'var(--bgl-orange-10)', color: 'var(--bgl-orange)' }),
+	'turquoise-10': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-10)', color: 'var(--bgl-turquoise)' }),
+	'gray-10': getThemeColors({ backgroundColor: 'var(--bgl-gray-10)', color: 'var(--bgl-black)' }),
+	'black-10': getThemeColors({ backgroundColor: 'var(--bgl-black-10)', color: 'var(--bgl-black)' }),
+	'pink-10': getThemeColors({ backgroundColor: 'var(--bgl-pink-10)', color: 'var(--bgl-pink)' }),
+
+	// 20% tints
+	'blue-20': getThemeColors({ backgroundColor: 'var(--bgl-blue-20)', color: 'var(--bgl-blue)' }),
+	'green-20': getThemeColors({ backgroundColor: 'var(--bgl-green-20)', color: 'var(--bgl-green)' }),
+	'red-20': getThemeColors({ backgroundColor: 'var(--bgl-red-20)', color: 'var(--bgl-red)' }),
+	'yellow-20': getThemeColors({ backgroundColor: 'var(--bgl-yellow-20)', color: 'var(--bgl-yellow)' }),
+	'purple-20': getThemeColors({ backgroundColor: 'var(--bgl-purple-20)', color: 'var(--bgl-purple)' }),
+	'brown-20': getThemeColors({ backgroundColor: 'var(--bgl-brown-20)', color: 'var(--bgl-brown)' }),
+	'orange-20': getThemeColors({ backgroundColor: 'var(--bgl-orange-20)', color: 'var(--bgl-orange)' }),
+	'turquoise-20': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-20)', color: 'var(--bgl-turquoise)' }),
+	'gray-20': getThemeColors({ backgroundColor: 'var(--bgl-gray-20)', color: 'var(--bgl-black)' }),
+	'black-20': getThemeColors({ backgroundColor: 'var(--bgl-black-20)', color: 'var(--bgl-black)' }),
+	'pink-20': getThemeColors({ backgroundColor: 'var(--bgl-pink-20)', color: 'var(--bgl-pink)' }),
+	// 30% tints
+	'blue-30': getThemeColors({ backgroundColor: 'var(--bgl-blue-30)', color: 'var(--bgl-blue)' }),
+	'green-30': getThemeColors({ backgroundColor: 'var(--bgl-green-30)', color: 'var(--bgl-black)' }),
+	'red-30': getThemeColors({ backgroundColor: 'var(--bgl-red-30)', color: 'var(--bgl-red)' }),
+	'yellow-30': getThemeColors({ backgroundColor: 'var(--bgl-yellow-30)', color: 'var(--bgl-black)' }),
+	'purple-30': getThemeColors({ backgroundColor: 'var(--bgl-purple-30)', color: 'var(--bgl-purple)' }),
+	'brown-30': getThemeColors({ backgroundColor: 'var(--bgl-brown-30)', color: 'var(--bgl-black)' }),
+	'orange-30': getThemeColors({ backgroundColor: 'var(--bgl-orange-30)', color: 'var(--bgl-orange)' }),
+	'turquoise-30': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-30)', color: 'var(--bgl-black)' }),
+	'gray-30': getThemeColors({ backgroundColor: 'var(--bgl-gray-30)', color: 'var(--bgl-black)' }),
+	'black-30': getThemeColors({ backgroundColor: 'var(--bgl-black-30)', color: 'var(--bgl-black)' }),
+	'pink-30': getThemeColors({ backgroundColor: 'var(--bgl-pink-30)', color: 'var(--bgl-pink)' }),
+	// 40% tints
+	'blue-40': getThemeColors({ backgroundColor: 'var(--bgl-blue-40)', color: 'var(--bgl-blue)' }),
+	'green-40': getThemeColors({ backgroundColor: 'var(--bgl-green-40)', color: 'var(--bgl-black)' }),
+	'red-40': getThemeColors({ backgroundColor: 'var(--bgl-red-40)', color: 'var(--bgl-black)' }),
+	'yellow-40': getThemeColors({ backgroundColor: 'var(--bgl-yellow-40)', color: 'var(--bgl-black)' }),
+	'purple-40': getThemeColors({ backgroundColor: 'var(--bgl-purple-40)', color: 'var(--bgl-black)' }),
+	'brown-40': getThemeColors({ backgroundColor: 'var(--bgl-brown-40)', color: 'var(--bgl-black)' }),
+	'orange-40': getThemeColors({ backgroundColor: 'var(--bgl-orange-40)', color: 'var(--bgl-black)' }),
+	'turquoise-40': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-40)', color: 'var(--bgl-black)' }),
+	'gray-40': getThemeColors({ backgroundColor: 'var(--bgl-gray-40)', color: 'var(--bgl-black)' }),
+	'black-40': getThemeColors({ backgroundColor: 'var(--bgl-black-40)', color: 'var(--bgl-black)' }),
+	'pink-40': getThemeColors({ backgroundColor: 'var(--bgl-pink-40)', color: 'var(--bgl-black)' }),
+	// 50% tints
+	'blue-50': getThemeColors({ backgroundColor: 'var(--bgl-blue-50)', color: 'var(--bgl-black)' }),
+	'green-50': getThemeColors({ backgroundColor: 'var(--bgl-green-50)', color: 'var(--bgl-black)' }),
+	'red-50': getThemeColors({ backgroundColor: 'var(--bgl-red-50)', color: 'var(--bgl-black)' }),
+	'yellow-50': getThemeColors({ backgroundColor: 'var(--bgl-yellow-50)', color: 'var(--bgl-black)' }),
+	'purple-50': getThemeColors({ backgroundColor: 'var(--bgl-purple-50)', color: 'var(--bgl-black)' }),
+	'brown-50': getThemeColors({ backgroundColor: 'var(--bgl-brown-50)', color: 'var(--bgl-black)' }),
+	'orange-50': getThemeColors({ backgroundColor: 'var(--bgl-orange-50)', color: 'var(--bgl-black)' }),
+	'turquoise-50': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-50)', color: 'var(--bgl-black)' }),
+	'gray-50': getThemeColors({ backgroundColor: 'var(--bgl-gray-50)', color: 'var(--bgl-black)' }),
+	'black-50': getThemeColors({ backgroundColor: 'var(--bgl-black-50)', color: 'var(--bgl-black)' }),
+	'pink-50': getThemeColors({ backgroundColor: 'var(--bgl-pink-50)', color: 'var(--bgl-black)' }),
+	// 60% tints
+	'blue-60': getThemeColors({ backgroundColor: 'var(--bgl-blue-60)', color: 'var(--bgl-white)' }),
+	'green-60': getThemeColors({ backgroundColor: 'var(--bgl-green-60)', color: 'var(--bgl-white)' }),
+	'red-60': getThemeColors({ backgroundColor: 'var(--bgl-red-60)', color: 'var(--bgl-white)' }),
+	'yellow-60': getThemeColors({ backgroundColor: 'var(--bgl-yellow-60)', color: 'var(--bgl-black)' }),
+	'purple-60': getThemeColors({ backgroundColor: 'var(--bgl-purple-60)', color: 'var(--bgl-white)' }),
+	'brown-60': getThemeColors({ backgroundColor: 'var(--bgl-brown-60)', color: 'var(--bgl-white)' }),
+	'orange-60': getThemeColors({ backgroundColor: 'var(--bgl-orange-60)', color: 'var(--bgl-white)' }),
+	'turquoise-60': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-60)', color: 'var(--bgl-black)' }),
+	'gray-60': getThemeColors({ backgroundColor: 'var(--bgl-gray-60)', color: 'var(--bgl-black)' }),
+	'black-60': getThemeColors({ backgroundColor: 'var(--bgl-black-60)', color: 'var(--bgl-white)' }),
+	'pink-60': getThemeColors({ backgroundColor: 'var(--bgl-pink-60)', color: 'var(--bgl-white)' }),
+
+	// 70% tints
+	'blue-70': getThemeColors({ backgroundColor: 'var(--bgl-blue-70)', color: 'var(--bgl-white)' }),
+	'green-70': getThemeColors({ backgroundColor: 'var(--bgl-green-70)', color: 'var(--bgl-white)' }),
+	'red-70': getThemeColors({ backgroundColor: 'var(--bgl-red-70)', color: 'var(--bgl-white)' }),
+	'yellow-70': getThemeColors({ backgroundColor: 'var(--bgl-yellow-70)', color: 'var(--bgl-white)' }),
+	'purple-70': getThemeColors({ backgroundColor: 'var(--bgl-purple-70)', color: 'var(--bgl-white)' }),
+	'brown-70': getThemeColors({ backgroundColor: 'var(--bgl-brown-70)', color: 'var(--bgl-white)' }),
+	'orange-70': getThemeColors({ backgroundColor: 'var(--bgl-orange-70)', color: 'var(--bgl-white)' }),
+	'turquoise-70': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-70)', color: 'var(--bgl-black)' }),
+	'gray-70': getThemeColors({ backgroundColor: 'var(--bgl-gray-70)', color: 'var(--bgl-white)' }),
+	'black-70': getThemeColors({ backgroundColor: 'var(--bgl-black-70)', color: 'var(--bgl-white)' }),
+	'pink-70': getThemeColors({ backgroundColor: 'var(--bgl-pink-70)', color: 'var(--bgl-white)' }),
+
+	// 80% tints
+	'blue-80': getThemeColors({ backgroundColor: 'var(--bgl-blue-80)', color: 'var(--bgl-white)' }),
+	'green-80': getThemeColors({ backgroundColor: 'var(--bgl-green-80)', color: 'var(--bgl-white)' }),
+	'red-80': getThemeColors({ backgroundColor: 'var(--bgl-red-80)', color: 'var(--bgl-white)' }),
+	'yellow-80': getThemeColors({ backgroundColor: 'var(--bgl-yellow-80)', color: 'var(--bgl-white)' }),
+	'purple-80': getThemeColors({ backgroundColor: 'var(--bgl-purple-80)', color: 'var(--bgl-white)' }),
+	'brown-80': getThemeColors({ backgroundColor: 'var(--bgl-brown-80)', color: 'var(--bgl-white)' }),
+	'orange-80': getThemeColors({ backgroundColor: 'var(--bgl-orange-80)', color: 'var(--bgl-white)' }),
+	'turquoise-80': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-80)', color: 'var(--bgl-black)' }),
+	'gray-80': getThemeColors({ backgroundColor: 'var(--bgl-gray-80)', color: 'var(--bgl-black)' }),
+	'black-80': getThemeColors({ backgroundColor: 'var(--bgl-black-80)', color: 'var(--bgl-white)' }),
+	'pink-80': getThemeColors({ backgroundColor: 'var(--bgl-pink-80)', color: 'var(--bgl-white)' }),
+
+	// 90% tints
+	'blue-90': getThemeColors({ backgroundColor: 'var(--bgl-blue-90)', color: 'var(--bgl-white)' }),
+	'green-90': getThemeColors({ backgroundColor: 'var(--bgl-green-90)', color: 'var(--bgl-white)' }),
+	'red-90': getThemeColors({ backgroundColor: 'var(--bgl-red-90)', color: 'var(--bgl-white)' }),
+	'yellow-90': getThemeColors({ backgroundColor: 'var(--bgl-yellow-90)', color: 'var(--bgl-white)' }),
+	'purple-90': getThemeColors({ backgroundColor: 'var(--bgl-purple-90)', color: 'var(--bgl-white)' }),
+	'brown-90': getThemeColors({ backgroundColor: 'var(--bgl-brown-90)', color: 'var(--bgl-white)' }),
+	'orange-90': getThemeColors({ backgroundColor: 'var(--bgl-orange-90)', color: 'var(--bgl-white)' }),
+	'turquoise-90': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-90)', color: 'var(--bgl-white)' }),
+	'gray-90': getThemeColors({ backgroundColor: 'var(--bgl-gray-90)', color: 'var(--bgl-white)' }),
+	'black-90': getThemeColors({ backgroundColor: 'var(--bgl-black-90)', color: 'var(--bgl-white)' }),
+	'pink-90': getThemeColors({ backgroundColor: 'var(--bgl-pink-90)', color: 'var(--bgl-white)' }),
+
+	// 100% tints
+	'blue-100': getThemeColors({ backgroundColor: 'var(--bgl-blue-100)', color: 'var(--bgl-white)' }),
+	'green-100': getThemeColors({ backgroundColor: 'var(--bgl-green-100)', color: 'var(--bgl-white)' }),
+	'red-100': getThemeColors({ backgroundColor: 'var(--bgl-red-100)', color: 'var(--bgl-white)' }),
+	'yellow-100': getThemeColors({ backgroundColor: 'var(--bgl-yellow-100)', color: 'var(--bgl-white)' }),
+	'purple-100': getThemeColors({ backgroundColor: 'var(--bgl-purple-100)', color: 'var(--bgl-white)' }),
+	'brown-100': getThemeColors({ backgroundColor: 'var(--bgl-brown-100)', color: 'var(--bgl-white)' }),
+	'orange-100': getThemeColors({ backgroundColor: 'var(--bgl-orange-100)', color: 'var(--bgl-white)' }),
+	'turquoise-100': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-100)', color: 'var(--bgl-white)' }),
+	'gray-100': getThemeColors({ backgroundColor: 'var(--bgl-gray-100)', color: 'var(--bgl-white)' }),
+	'black-100': getThemeColors({ backgroundColor: 'var(--bgl-black-100)', color: 'var(--bgl-white)' }),
+	'pink-100': getThemeColors({ backgroundColor: 'var(--bgl-pink-100)', color: 'var(--bgl-white)' }),
+
+	// 110% tints
+	'blue-110': getThemeColors({ backgroundColor: 'var(--bgl-blue-110)', color: 'var(--bgl-white)' }),
+	'green-110': getThemeColors({ backgroundColor: 'var(--bgl-green-110)', color: 'var(--bgl-white)' }),
+	'red-110': getThemeColors({ backgroundColor: 'var(--bgl-red-110)', color: 'var(--bgl-white)' }),
+	'yellow-110': getThemeColors({ backgroundColor: 'var(--bgl-yellow-110)', color: 'var(--bgl-white)' }),
+	'purple-110': getThemeColors({ backgroundColor: 'var(--bgl-purple-110)', color: 'var(--bgl-white)' }),
+	'brown-110': getThemeColors({ backgroundColor: 'var(--bgl-brown-110)', color: 'var(--bgl-white)' }),
+	'orange-110': getThemeColors({ backgroundColor: 'var(--bgl-orange-110)', color: 'var(--bgl-white)' }),
+	'turquoise-110': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-110)', color: 'var(--bgl-white)' }),
+	'gray-110': getThemeColors({ backgroundColor: 'var(--bgl-gray-110)', color: 'var(--bgl-white)' }),
+	'black-110': getThemeColors({ backgroundColor: 'var(--bgl-black-110)', color: 'var(--bgl-white)' }),
+	'pink-110': getThemeColors({ backgroundColor: 'var(--bgl-pink-110)', color: 'var(--bgl-white)' }),
+
+	// 120% tints
+	'blue-120': getThemeColors({ backgroundColor: 'var(--bgl-blue-120)', color: 'var(--bgl-white)' }),
+	'green-120': getThemeColors({ backgroundColor: 'var(--bgl-green-120)', color: 'var(--bgl-white)' }),
+	'red-120': getThemeColors({ backgroundColor: 'var(--bgl-red-120)', color: 'var(--bgl-white)' }),
+	'yellow-120': getThemeColors({ backgroundColor: 'var(--bgl-yellow-120)', color: 'var(--bgl-white)' }),
+	'purple-120': getThemeColors({ backgroundColor: 'var(--bgl-purple-120)', color: 'var(--bgl-white)' }),
+	'brown-120': getThemeColors({ backgroundColor: 'var(--bgl-brown-120)', color: 'var(--bgl-white)' }),
+	'orange-120': getThemeColors({ backgroundColor: 'var(--bgl-orange-120)', color: 'var(--bgl-white)' }),
+	'turquoise-120': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-120)', color: 'var(--bgl-white)' }),
+	'gray-120': getThemeColors({ backgroundColor: 'var(--bgl-gray-120)', color: 'var(--bgl-white)' }),
+	'black-120': getThemeColors({ backgroundColor: 'var(--bgl-black-120)', color: 'var(--bgl-white)' }),
+	'pink-120': getThemeColors({ backgroundColor: 'var(--bgl-pink-120)', color: 'var(--bgl-white)' }),
+
+	// 130% tints
+	'blue-130': getThemeColors({ backgroundColor: 'var(--bgl-blue-130)', color: 'var(--bgl-white)' }),
+	'green-130': getThemeColors({ backgroundColor: 'var(--bgl-green-130)', color: 'var(--bgl-white)' }),
+	'red-130': getThemeColors({ backgroundColor: 'var(--bgl-red-130)', color: 'var(--bgl-white)' }),
+	'yellow-130': getThemeColors({ backgroundColor: 'var(--bgl-yellow-130)', color: 'var(--bgl-white)' }),
+	'purple-130': getThemeColors({ backgroundColor: 'var(--bgl-purple-130)', color: 'var(--bgl-white)' }),
+	'brown-130': getThemeColors({ backgroundColor: 'var(--bgl-brown-130)', color: 'var(--bgl-white)' }),
+	'orange-130': getThemeColors({ backgroundColor: 'var(--bgl-orange-130)', color: 'var(--bgl-white)' }),
+	'turquoise-130': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-130)', color: 'var(--bgl-white)' }),
+	'gray-130': getThemeColors({ backgroundColor: 'var(--bgl-gray-130)', color: 'var(--bgl-white)' }),
+	'black-130': getThemeColors({ backgroundColor: 'var(--bgl-black-130)', color: 'var(--bgl-white)' }),
+	'pink-130': getThemeColors({ backgroundColor: 'var(--bgl-pink-130)', color: 'var(--bgl-white)' }),
+
+
+	// Legacy light variants (mapped to 20% tints)
+	'blue-light': getThemeColors({ backgroundColor: 'var(--bgl-blue-light)', color: 'var(--bgl-blue)' }),
+	'green-light': getThemeColors({ backgroundColor: 'var(--bgl-green-light)', color: 'var(--bgl-green)' }),
+	'red-light': getThemeColors({ backgroundColor: 'var(--bgl-red-light)', color: 'var(--bgl-red)' }),
+	'yellow-light': getThemeColors({ backgroundColor: 'var(--bgl-yellow-light)', color: 'var(--bgl-black)' }),
+	'purple-light': getThemeColors({ backgroundColor: 'var(--bgl-purple-light)', color: 'var(--bgl-purple)' }),
+	'brown-light': getThemeColors({ backgroundColor: 'var(--bgl-brown-light)', color: 'var(--bgl-brown)' }),
+	'orange-light': getThemeColors({ backgroundColor: 'var(--bgl-orange-light)', color: 'var(--bgl-orange)' }),
+	'turquoise-light': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-light)', color: 'var(--bgl-black)' }),
+	'pink-light': getThemeColors({ backgroundColor: 'var(--bgl-pink-light)', color: 'var(--bgl-pink)' }),
+	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	'primary-light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+
+	// Legacy tint variants
+	'blue-tint': getThemeColors({ backgroundColor: 'var(--bgl-blue-tint)', color: 'var(--bgl-blue)' }),
+	'red-tint': getThemeColors({ backgroundColor: 'var(--bgl-red-tint)', color: 'var(--bgl-red)' }),
+	'primary-tint': getThemeColors({ backgroundColor: 'var(--bgl-primary-tint)', color: 'var(--bgl-white)' }),
+	'black-tint': getThemeColors({ backgroundColor: 'var(--bgl-black-tint)', color: 'var(--bgl-white)' }),
+
+	// Special variants
+	'blue-dark': getThemeColors({ backgroundColor: 'var(--bgl-blue-dark)', color: 'var(--bgl-white)' }),
 	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
-	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
-	'blue': getThemeColors({}),
 }
 
 const cumputedTextColor = $computed(

package/src/components/Slider.vue

@@ -10,6 +10,8 @@ interface CarouselOptions {
 	speed?: number
 	easing?: Easing
 	perPage?: number | { [key: number]: number }
+	slideWidth?: number
+	slideGap?: number
 	startIndex?: number
 	draggable?: boolean
 	multipleDrag?: boolean
@@ -21,8 +23,6 @@ interface CarouselOptions {
 	autoplaySpeed?: number
 	pauseOnHover?: boolean
 	dots?: boolean
-	slideWidth?: number
-	slideGap?: number
 	onInit?: () => void
 	onChange?: () => void
 }

package/src/components/dataTable/DataTable.vue

@@ -302,7 +302,7 @@ th {
 
 .col.check .bgl_icon-font {
 	border-radius: 100%;
-	background: var(--bgl-blue-20);
+	background: var(--bgl-blue-tint);
 	color: var(--bgl-primary);
 	width: 20px;
 	height: 20px;

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

@@ -310,7 +310,7 @@ function selectDate(date: Date | null) {
 
 <template>
 	<div class="ltr flex gap-075 m_flex-wrap calendar-container justify-content-center h-100p">
-		<div class="calendar-section m_border-none pe-05 m_p-0">
+		<div class="calendar-section m_border-none px-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">
 					<Btn flat thin icon="chevron_left" @click="previousMonth" />

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

@@ -331,7 +331,7 @@ onMounted(() => {
 }
 
 .selectinput-option:hover, .highlight {
-	background: var(--bgl-gray-20);
+	background: var(--bgl-gray-tint);
 }
 .isEmpty p {
 	opacity: 0.3;

package/src/index.ts

@@ -18,4 +18,5 @@ import './styles/bagel.css'
 
 export * from './utils/calendar/dateUtils'
 export * from './utils/constants'
+export * from './utils/elementUtils'
 export * from './utils/useSearch'