@bagelink/vue 1.8.73 → 1.8.78

package/package.json

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

package/src/components/Pill.vue

@@ -3,6 +3,7 @@ import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Btn, Icon } from '@bagelink/vue'
 import { computed, useSlots } from 'vue'
+import '../styles/base-colors.css'
 
 interface BtnProp {
 	icon?: IconType
@@ -27,6 +28,7 @@ const props = defineProps<{
 	btnEnd?: BtnProp
 	large?: boolean
 	small?: boolean
+	uppercase?: boolean
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
@@ -38,273 +40,49 @@ const computedTheme = computed(
 	},
 )
 
-const computedDefaultColors = computed(
-	() => ({
-		backgroundColor: 'var(--bgl-primary)',
-		color: props.flat ? 'var(--bgl-text-color)' : 'var(--bgl-light-text)',
-	}),
-)
-
-function getThemeColors(theme: Partial<typeof computedDefaultColors.value>): typeof computedDefaultColors.value {
-	return {
-		...computedDefaultColors.value,
-		...theme,
-		color: props.flat
-			? theme.backgroundColor as string
-			: theme.color as string,
+const computedPairClass = computed(() => {
+	const theme = computedTheme.value
+	if (!theme) return 'pair-primary'
+	return `pair-${theme}`
+})
+
+const computedClasses = computed(() => {
+	const classes: Record<string, boolean> = {
+		'bgl_pill': !props.icon || !!slots.default || !!props.value,
+		'round': props.round,
+		'bgl_flatPill': props.flat,
+		'bgl_pill-border': props.border || props.outline,
+		'pillLarge': props.large,
+		'pillSmall': props.small,
 	}
-}
-
-const themes: Partial<Record<string, typeof computedDefaultColors.value>> = {
-	// Base Colors
-	'blue': getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
-	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)', color: 'var(--bgl-white)' }),
-	'yellow': getThemeColors({ backgroundColor: 'var(--bgl-yellow)', 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)' }),
+	// Add the pair class
+	classes[computedPairClass.value] = true
 
-	// 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)' }),
-}
-
-const cumputedTextColor = computed(
-	() => (themes[computedTheme.value as ThemeType]?.color ?? computedDefaultColors.value.color),
-)
-
-const computedBackgroundColor = computed(
-	() => (themes[computedTheme.value as ThemeType]?.backgroundColor ?? computedDefaultColors.value.backgroundColor),
-)
+	return classes
+})
 </script>
 
 <template>
 	<div
+		class="bgl_pill"
 		style="height: var(--pill-height);"
-		:disabled="disabled" :class="{
-			'bgl_pill': !icon || slots.default || value,
-			round,
-			'bgl_flatPill': flat,
-			'bgl_pill-border': border || outline,
-			'pillLarge': large,
-			'pillSmall': small,
-		}"
+		:disabled="disabled"
+		:class="computedClasses"
 	>
-		<div class="bgl_pill-flex">
-			<div v-if="loading" class="loading" />
-			<div v-else>
-				<div v-if="btn" class="flex h-100">
-					<Btn class="bgl_pill-btn" round thin v-bind="btn" />
-				</div>
-			</div>
-			<Icon v-if="icon" :icon="icon" style="font-size: var(--pill-font-size)" />
-			<slot />
-			<template v-if="!slots.default">
-				<p
-					class="pillText"
-				>
-					{{ slots.default ? slots.default : value || modelValue }}
-				</p>
-			</template>
-			<Icon v-if="iconEnd" :icon="iconEnd" style="font-size: var(--pill-font-size)" />
-			<div v-if="loading" class="loading" />
-			<div v-else>
-				<div v-if="btnEnd" class="flex h-100">
-					<Btn class="bgl_pill-btn" round thin flat v-bind="btnEnd" />
-				</div>
+		<div class="flex h-100 justify-content-center relative ">
+			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
+			<div class="px-025 flex gap-025 justify-content-center" :class="{ 'opacity-0': loading }">
+				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
+				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--pill-font-size)" />
+				<slot :class="{ uppercase }" />
+				<template v-if="!slots.default">
+					<p class="pillText inline" :class="{ uppercase }">
+						{{ slots.default ? slots.default : value || modelValue }}
+					</p>
+				</template>
+				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--pill-font-size)" />
+				<Btn v-if="btnEnd" class="bgl_pill-btn -me-025" icon-size="0.8" round v-bind="btnEnd" />
 			</div>
 		</div>
 	</div>
@@ -353,40 +131,19 @@ const computedBackgroundColor = computed(
 .bgl_pill {
   padding-inline: calc(var(--pill-font-size) / 6);
   padding-block: calc(var(--pill-font-size) / 24);
-  transition: var(--bgl-transition);
-  background-color: v-bind(computedBackgroundColor);
-  color: v-bind(cumputedTextColor);
+transition: var(--bgl-transition);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
   min-height: var(--pill-height);
-  vertical-align: middle;
-  margin-bottom: 0.25rem;
+vertical-align: middle;
 }
 
 .bgl_pill[disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
-.bgl_pill-flex {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  justify-content: center;
-  height: 100%;
-}
-.bgl_pill.bgl_flatPill {
-  background: transparent;
-}
-
 .bgl_pill.round {
-  border-radius: 1000px;
-}
-
-.bgl_pill-border {
-  outline: 1px solid v-bind(computedBackgroundColor);
-  color: v-bind(computedBackgroundColor);
-  background: transparent;
+	border-radius: 1000px;
 }
 </style>

package/src/form-flow/FormFlow.vue

@@ -340,13 +340,31 @@ function validateAll(): boolean {
 }
 
 // Submit handler for the slot
-function handleSubmit() {
-	return validateAll()
+function handleSubmit(event?: Event): boolean {
+	// Prevent default form submission if event is provided
+	if (event) {
+		event.preventDefault()
+	}
+
+	const isValid = validateAll()
+
+	// If validation fails, prevent further processing
+	if (!isValid) {
+		event?.stopPropagation()
+	}
+
+	return isValid
 }
+
+// Expose methods for parent components (e.g., dialogs)
+defineExpose({
+	validate: validateAll,
+	handleSubmit
+})
 </script>
 
 <template>
-	<div :class="schema._class">
+	<form :class="schema._class" @submit="handleSubmit">
 		<div v-for="{ key, field } in visibleFields" :key="key" :class="[field._class, field._config.class]">
 			<!-- Custom slot for specific field -->
 			<slot
@@ -395,7 +413,7 @@ function handleSubmit() {
 			name="submit" :submit="handleSubmit" :validate="validateAll" :form-data="formData"
 			:errors="mergedErrors"
 		/>
-	</div>
+	</form>
 </template>
 
 <style scoped>