@bagelink/vue 1.9.83 → 1.9.86

package/src/components/Btn.vue

@@ -59,6 +59,18 @@ const emit = defineEmits<{
 
 const { $t } = useI18n()
 
+const computedPairClass = computed(() => {
+	const theme = props.color || props.theme
+	if (!theme) {
+		// Only flat/border buttons get a default for visibility
+		if (props.flat || props.border || props.outline) {
+			return 'pair-black'
+		}
+		return undefined
+	}
+	return `pair-${theme}`
+})
+
 const isMobileScreen = ref(false)
 
 function checkMobile() {
@@ -140,7 +152,7 @@ const slots: SetupContext['slots'] = useSlots()
 
 <template>
 	<component
-		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="[{
 			'bgl_btn-icon': icon && !slots.default && !value,
 			thin,
 			'bgl_btn_xsSize': size === 'xs' || size === 'extra-small',
@@ -155,11 +167,9 @@ const slots: SetupContext['slots'] = useSlots()
 			'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
 			'bgl_btn_alignEndMobile': alignTxtMobile === 'end',
 			round,
-			'bgl_btn_flat': flat,
-			'bgl_btn-border': border || outline,
-			[`bgl_btn-${color}`]: color,
-			[`bgl_btn-${theme}`]: theme,
-		}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+			'bgl_flatPill': flat,
+			'bgl_pill-border': border || outline,
+		}, computedPairClass]" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
 		<Loading v-if="loading" class="h-100p" size="15" />
 		<div v-else class="bgl_btn-flex">
@@ -180,15 +190,14 @@ const slots: SetupContext['slots'] = useSlots()
 </template>
 
 <style scoped>
-@import '../styles/btnColors.css';
+/* @import '../styles/base-colors.css'; */
 
 .bgl_btn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
-	background: var(--btn-bg);
-	color: var(--btn-color);
 	text-decoration: none;
+	/* Colors now handled by pair-* classes */
 }
 
 .bgl_btn.bgl_btn-icon {
@@ -227,20 +236,7 @@ a {
 	filter: var(--bgl-active-filter);
 }
 
-.bgl_btn.bgl_btn_flat {
-	background: transparent;
-	color: var(--btn-flat-color);
-}
-
-.bgl_btn_flat:hover:not(:disabled),
-.bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
-	background: var(--bgl-gray-tint);
-}
-
-.bgl_btn.bgl_btn_flat:active:not(:disabled),
-.bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
-	background: var(--bgl-gray-tint-dark);
-}
+/* Flat hover/active styles now handled by base-colors.css */
 
 .bgl_btn.round {
 	border-radius: 1000px !important;
@@ -254,20 +250,7 @@ a {
 	transform: rotateY(0deg);
 }
 
-.bgl_btn-border,
-.bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
-	border: 1px solid var(--btn-flat-color);
-	background: transparent;
-	color: var(--btn-flat-color);
-}
-
-.bgl_btn-border:hover {
-	color: var(--btn-flat-color);
-}
-
-.bgl_btn-border:active:not(:disabled) {
-	filter: brightness(80%);
-}
+/* Border active styles now handled by base-colors.css */
 
 .bgl_btn:disabled,
 .bgl_btn[disabled=true] {
@@ -399,4 +382,21 @@ a {
 		justify-content: flex-end;
 	}
 }
+
+/* Ensure external color classes always override pair classes */
+.bgl_btn.color-white {
+	color: white !important;
+}
+
+.bgl_btn.color-black {
+	color: black !important;
+}
+
+.bgl_btn.text-white {
+	color: white !important;
+}
+
+.bgl_btn.text-black {
+	color: black !important;
+}
 </style>

package/src/components/Dropdown.vue

@@ -191,7 +191,7 @@ const computedPopperHideTriggers = computed((): TriggerEvent[] => {
 
 const computedAutoHide = computed(() => autoHide)
 
-const container = computed(() => triggerRef.value?.closest('dialog[open]') ?? 'body')
+const container = computed(() => 'body')
 
 const computedDelay = computed((): number | { show: number, hide: number } | undefined => {
 	if (delay !== undefined) { return delay }

package/src/components/Loading.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ThemeType } from '@bagelink/vue'
 import type { SizeUnit, SizeType } from '../types/BtnOptions'
 import { computed } from 'vue'
 import { standardSize } from '../utils/sizeParsing'
@@ -10,7 +11,7 @@ const { type: theme = 'ring', size = 50, thickness, duration = 1.2, color, progr
 	thickness?: SizeUnit
 	duration?: number | string
 	type?: LoadingType
-	color?: string
+	color?: ThemeType | string
 	progress?: number
 }>()
 
@@ -22,6 +23,14 @@ const computedBorder = computed(() => {
 	return standardSize(borderValue)
 })
 
+const computedColor = computed(() => {
+	if (!color) return 'var(--bgl-black)'
+	if (color.startsWith('#') || color.startsWith('rgb') || color.startsWith('var(')) {
+		return color // Custom color string
+	}
+	return `var(--bgl-${color})` // Convert theme color to CSS variable
+})
+
 // SVG progress calculations
 const svgStrokeWidth = computed(() => {
 	const borderNumeric = Number.parseFloat(computedBorder.value)
@@ -40,14 +49,14 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 		<!-- Bar Theme -->
 		<template v-if="theme === 'bar'">
 			<slot />
-			<div class="lds-bar" :style="{ animationDuration, color }" />
+			<div class="lds-bar" :style="{ animationDuration, color: computedColor }" />
 		</template>
 
 		<!-- Ellipsis Theme -->
 		<template v-if="theme === 'ellipsis'">
 			<slot />
 			<div class="lds-ellipsis" :style="{ '--size': computedSize }">
-				<div v-for="n in 4" :key="n" :style="{ color, '--size': computedSize }" />
+				<div v-for="n in 4" :key="n" :style="{ 'color': computedColor, '--size': computedSize }" />
 			</div>
 		</template>
 
@@ -56,11 +65,11 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 			<template v-if="progress !== undefined">
 				<svg :width="computedSize" :height="computedSize" viewBox="0 0 100 100">
 					<circle
-						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="color || 'currentColor'"
+						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="computedColor"
 						:stroke-width="svgStrokeWidth" stroke-opacity="0.2"
 					/>
 					<circle
-						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="color || 'currentColor'"
+						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="computedColor"
 						:stroke-width="svgStrokeWidth" stroke-linecap="round"
 						:stroke-dasharray="`${(progress / 100) * svgCircumference} ${svgCircumference}`"
 						transform="rotate(-90 50 50)"
@@ -69,7 +78,7 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 			</template>
 			<div
 				v-for="n in 4" v-else :key="n" class="ring-segment" :style="{
-					color,
+					'color': computedColor,
 					'width': computedSize,
 					'height': computedSize,
 					'borderWidth': computedBorder,