@bagelink/vue 1.14.13 → 1.15.0

package/src/components/Badge.vue

@@ -1,44 +1,167 @@
 <script setup lang="ts">
-import type { IconType, ExtendedThemeType } from '@bagelink/vue'
-import { Icon } from '@bagelink/vue'
-import { computed } from 'vue'
+defineOptions({ name: 'BglBadge' })
+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 Props {
-	color?: ExtendedThemeType
-	text: string
+interface BtnProp {
 	icon?: IconType
-	iconEnd?: IconType
+	onClick: () => void
+	value?: string
 }
 
-const props = defineProps<Props>()
+const props = defineProps<{
+	disabled?: boolean
+	icon?: IconType
+	iconEnd?: IconType
+	color?: ThemeType
+	variant?: 'solid' | 'flat' | 'outline'
+	/** Boolean variant shorthands: <Badge flat /> — same as variant="flat" */
+	flat?: boolean
+	outline?: boolean
+	/** @deprecated Use `outline` */
+	border?: boolean
+	loading?: boolean
+	value?: string
+	round?: boolean
+	btn?: BtnProp
+	btnEnd?: BtnProp
+	size?: 'sm' | 'md' | 'lg'
+	/** Boolean size shorthands: <Badge sm value="New" /> */
+	sm?: boolean
+	lg?: boolean
+	uppercase?: boolean
+}>()
+
+const slots: SetupContext['slots'] = useSlots()
+
+const computedTheme = computed(
+	() => {
+		if (props.disabled) { return 'gray-light' }
+		return props.color as ThemeType
+	},
+)
 
 const computedPairClass = computed(() => {
-	const theme = props.color
+	const theme = computedTheme.value
 	if (!theme) return 'pair-primary'
 	return `pair-${theme}`
 })
+
+const computedSize = computed(() => {
+	if (props.size) { return props.size }
+	if (props.sm) { return 'sm' }
+	if (props.lg) { return 'lg' }
+	return 'md'
+})
+
+const computedVariant = computed(() => {
+	if (props.variant) { return props.variant }
+	if (props.flat) { return 'flat' }
+	if (props.outline || props.border) { return 'outline' }
+	return 'solid'
+})
+
+const computedClasses = computed(() => {
+	const classes: Record<string, boolean> = {
+		'bgl_pill': !props.icon || !!slots.default || !!props.value,
+		'round': props.round,
+		'bgl_flatPill': computedVariant.value === 'flat',
+		'bgl_pill-border': computedVariant.value === 'outline',
+		'pillLarge': computedSize.value === 'lg',
+		'pillSmall': computedSize.value === 'sm',
+	}
+
+	// Add the pair class
+	classes[computedPairClass.value] = true
+
+	return classes
+})
 </script>
 
 <template>
-	<div class="bgl_badge" :class="computedPairClass">
-		<Icon v-if="icon" class="inline line-height-1" size="0.5" :icon="icon" />
-		{{ text }}
-		<Icon v-if="iconEnd" class="inline line-height-1" size="0.5" :icon="iconEnd" />
+	<div
+		class="bgl_pill"
+		style="height: var(--bgl-pill-height);"
+		:disabled="disabled"
+		:class="computedClasses"
+	>
+		<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(--bgl-pill-font-size)" />
+				<slot :class="{ uppercase }" />
+				<template v-if="!slots.default">
+					<p class="pillText inline" :class="{ uppercase }">
+						{{ value }}
+					</p>
+				</template>
+				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--bgl-pill-font-size)" />
+				<Btn v-if="btnEnd" class="bgl_pill-btn -me-025" icon-size="0.8" round v-bind="btnEnd" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <style scoped>
-.inline {
-	display: inline;
+.pillLarge{
+	--bgl-pill-font-size: var(--bgl-font-size);
+	--bgl-pill-height:auto;
+}
+.pillSmall{
+	--bgl-pill-font-size: 9px;
+	--bgl-pill-height:15px;
+}
+.pillText{
+	font-size: var(--bgl-pill-font-size);
+}
+.bgl_pill-btn{
+	color: var(--bgl-pill-btn-color);
+	background: var(--bgl-pill-btn-bg);
+	width: calc(var(--bgl-pill-height) / 1.25)!important;
+	height: calc(var(--bgl-pill-height) / 1.25)!important;
+}
+.loading {
+  border: 1px solid var(--bgl-light-text);
+  border-bottom: 2px solid var(--bgl-light-text);
+  animation: spin 1s linear infinite;
+  border-radius: 100px;
+  width: 1rem;
+  height: 1rem;
+  margin: auto;
+}
+.bgl_flatPill .loading {
+	border-bottom: 2px solid var(--bgl-text-color);
 }
 
-.bgl_badge {
-	border-radius: 10px;
-	padding: 4px 8px;
-	font-size: 10px;
-	white-space: nowrap;
-	display: inline;
-	margin-inline-end: 0.25rem;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.bgl_pill {
+  padding-inline: calc(var(--bgl-pill-font-size) / 6);
+  padding-block: calc(var(--bgl-pill-font-size) / 24);
+transition: var(--bgl-transition);
+  display: inline-block;
+  margin-inline-end: 0.25rem;
+  border-radius: var(--bgl-pill-border-radius);
+  min-height: var(--bgl-pill-height);
+vertical-align: middle;
+}
+
+.bgl_pill[disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.bgl_pill.round {
+	border-radius: 1000px;
 }
 </style>

package/src/components/BglVideo.vue

@@ -98,7 +98,7 @@ const videoUrl = computed(() => {
 		const regularMatch = props.src?.match(regularVimeoRegex) ?? null
 
 		const videoId = playerMatch?.[1] ?? regularMatch?.[3]
-		console.log(videoId, { playerMatch, regularMatch })
+		// console.log(videoId, { playerMatch, regularMatch })
 		return `https://player.vimeo.com/video/${videoId}`
 	}
 	return props.src
@@ -128,13 +128,13 @@ const videoUrl = computed(() => {
 	height: auto;
 	display: block;
 	margin: auto;
-	border-radius: var(--input-border-radius);
+	border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_vid.vid_empty {
 	padding-top: 56.25%;
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
+	background: var(--bgl-input-bg);
+	border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_vid.vid_short {

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType, ExtendedThemeType, TranslatableString } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Icon, Loading, useModal, useI18n, resolveI18n } from '@bagelink/vue'
+import { Icon, Loading, useDialog, useI18n, resolveI18n, MOBILE_BREAKPOINT } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
 defineOptions({ name: 'BglBtn' })
@@ -13,12 +13,20 @@ const props = withDefaults(
 		iconSize?: number | string
 		iconMobileSize?: number | string
 		color?: ExtendedThemeType
-		theme?: ExtendedThemeType
+		variant?: 'solid' | 'flat' | 'outline'
+		/** Boolean variant shorthands: <Btn flat /> — same as variant="flat" */
 		flat?: boolean
-		border?: boolean
 		outline?: boolean
+		/** @deprecated Use `outline` */
+		border?: boolean
 		thin?: boolean
-		size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		/** Boolean size shorthands: <Btn sm value="Click me" /> */
+		xs?: boolean
+		sm?: boolean
+		md?: boolean
+		lg?: boolean
+		xl?: boolean
 		type?: 'button' | 'submit' | 'reset'
 		loading?: boolean
 		role?: string
@@ -59,11 +67,18 @@ const emit = defineEmits<{
 
 const { $t } = useI18n()
 
+const computedVariant = computed(() => {
+	if (props.variant) { return props.variant }
+	if (props.flat) { return 'flat' }
+	if (props.outline || props.border) { return 'outline' }
+	return 'solid'
+})
+
 const computedPairClass = computed(() => {
-	const theme = props.color || props.theme
+	const theme = props.color
 	if (!theme) {
-		// Only flat/border buttons get a default for visibility
-		if (props.flat || props.border || props.outline) {
+		// Only flat/outline buttons get a default for visibility
+		if (computedVariant.value !== 'solid') {
 			return 'pair-black'
 		}
 		return 'pair-default'
@@ -71,10 +86,20 @@ const computedPairClass = computed(() => {
 	return `pair-${theme}`
 })
 
+const computedSize = computed(() => {
+	if (props.size) { return props.size }
+	if (props.xs) { return 'xs' }
+	if (props.sm) { return 'sm' }
+	if (props.md) { return 'md' }
+	if (props.lg) { return 'lg' }
+	if (props.xl) { return 'xl' }
+	return undefined
+})
+
 const isMobileScreen = ref(false)
 
 function checkMobile() {
-	isMobileScreen.value = window.innerWidth <= 910
+	isMobileScreen.value = window.innerWidth <= MOBILE_BREAKPOINT
 }
 
 onMounted(() => {
@@ -88,9 +113,9 @@ onUnmounted(() => {
 
 async function handleClick(event: MouseEvent) {
 	if (props.confirm !== undefined && props.confirm !== false) {
-		const { confirmModal } = useModal()
+		const { confirm } = useDialog()
 		const message = typeof props.confirm === 'string' ? props.confirm : $t('modalConfirm.message')
-		const confirmed = await confirmModal({
+		const confirmed = await confirm({
 			title: $t('modalConfirm.title'),
 			message
 		})
@@ -108,22 +133,9 @@ const iconSizeComputed = computed(() => {
 	if (props.iconSize !== undefined) { return props.iconSize }
 
 	// Default icon sizes based on button size
-	const sizeMap = {
-		'xs': 0.7,
-		'extra-small': 0.7,
-		's': 0.9,
-		'small': 0.9,
-		'm': 1,
-		'medium': 1,
-		'l': 1.3,
-		'large': 1.3,
-		'xl': 1.6,
-		'extra-large': 1.6
-	}
-
-	if (props.size && sizeMap[props.size as keyof typeof sizeMap]) {
-		return sizeMap[props.size as keyof typeof sizeMap]
-	}
+	const sizeMap = { xs: 0.7, sm: 0.9, md: 1, lg: 1.3, xl: 1.6 }
+	const size = computedSize.value
+	if (size && sizeMap[size]) { return sizeMap[size] }
 
 	return isMobileScreen.value ? 1 : 1.2
 })
@@ -155,11 +167,11 @@ const slots: SetupContext['slots'] = useSlots()
 		: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',
-			'bgl_btn_sSize': size === 's' || size === 'small',
-			'bgl_btn_mSize': size === 'm' || size === 'medium',
-			'bgl_btn_lSize': size === 'l' || size === 'large',
-			'bgl_btn_xlSize': size === 'xl' || size === 'extra-large',
+			'bgl_btn_xsSize': computedSize === 'xs',
+			'bgl_btn_sSize': computedSize === 'sm',
+			'bgl_btn_mSize': computedSize === 'md',
+			'bgl_btn_lSize': computedSize === 'lg',
+			'bgl_btn_xlSize': computedSize === 'xl',
 			'bgl_btn_fullWidth': fullWidth,
 			'bgl_btn_fullWidthMobile': fullWidthMobile,
 			'bgl_btn_alignStart': alignTxt === 'start',
@@ -167,8 +179,8 @@ const slots: SetupContext['slots'] = useSlots()
 			'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
 			'bgl_btn_alignEndMobile': alignTxtMobile === 'end',
 			round,
-			'bgl_flatPill': flat,
-			'bgl_pill-border': border || outline,
+			'bgl_flatPill': computedVariant === 'flat',
+			'bgl_pill-border': computedVariant === 'outline',
 		}, computedPairClass]" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
 		<Loading v-if="loading" class="h-100p" size="15" color="currentColor" />
@@ -193,8 +205,8 @@ const slots: SetupContext['slots'] = useSlots()
 /* @import '../styles/base-colors.css'; */
 
 .bgl_btn {
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
+	padding-left: var(--bgl-btn-padding);
+	padding-right: var(--bgl-btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 	/* Colors now handled by pair-* classes */
@@ -203,8 +215,8 @@ const slots: SetupContext['slots'] = useSlots()
 .bgl_btn.bgl_btn-icon {
 	padding-left: 0;
 	padding-right: 0;
-	height: var(--btn-height);
-	width: var(--btn-height);
+	height: var(--bgl-btn-height);
+	width: var(--bgl-btn-height);
 	border-radius: 100%;
 	font-size: 1rem;
 	flex-shrink: 0;
@@ -223,7 +235,7 @@ a {
 }
 
 .bgl_btn .bgl_btn-icon {
-	font-size: calc(var(--input-font-size) * 1.3);
+	font-size: calc(var(--bgl-input-font-size) * 1.3);
 }
 
 .bgl_btn:hover,
@@ -265,20 +277,20 @@ a {
 
 /* xs size */
 .bgl_btn_xsSize {
-	padding-inline: calc(var(--btn-padding) / 6);
-	border-radius: calc(var(--btn-border-radius) / 2);
-	font-size: calc(var(--input-font-size) * 0.6);
+	padding-inline: calc(var(--bgl-btn-padding) / 6);
+	border-radius: calc(var(--bgl-btn-border-radius) / 2);
+	font-size: calc(var(--bgl-input-font-size) * 0.6);
 }
 
 .bgl_btn-icon.bgl_btn_xsSize {
-	height: calc(var(--btn-height) / 2);
-	width: calc(var(--btn-height) / 2);
+	height: calc(var(--bgl-btn-height) / 2);
+	width: calc(var(--bgl-btn-height) / 2);
 	line-height: normal;
 }
 
 .bgl_btn_xsSize {
-	height: calc(var(--btn-height) / 2);
-	line-height: calc(var(--btn-height) / 2);
+	height: calc(var(--bgl-btn-height) / 2);
+	line-height: calc(var(--bgl-btn-height) / 2);
 }
 
 .bgl_btn_xsSize .bgl_btn-flex {
@@ -288,60 +300,60 @@ a {
 /* s size */
 .bgl_btn.thin,
 .bgl_btn_sSize {
-	padding-inline: calc(var(--btn-padding) / 3);
-	border-radius: calc(var(--btn-border-radius) / 1.5);
+	padding-inline: calc(var(--bgl-btn-padding) / 3);
+	border-radius: calc(var(--bgl-btn-border-radius) / 1.5);
 }
 
 .bgl_btn-icon.thin,
 .bgl_btn-icon.bgl_btn_sSize {
-	height: calc(var(--btn-height) / 1.5);
-	width: calc(var(--btn-height) / 1.5);
+	height: calc(var(--bgl-btn-height) / 1.5);
+	width: calc(var(--bgl-btn-height) / 1.5);
 	line-height: normal;
 }
 
 .bgl_btn.thin,
 .bgl_btn_sSize {
-	height: calc(var(--btn-height) * 0.7);
-	line-height: calc(var(--btn-height) * 0.7);
+	height: calc(var(--bgl-btn-height) * 0.7);
+	line-height: calc(var(--bgl-btn-height) * 0.7);
 }
 
 /* m size */
 .bgl_btn_mSize {
-	padding-inline: var(--btn-padding);
-	font-size: var(--input-font-size);
-	height: var(--btn-height);
-	line-height: var(--btn-height);
+	padding-inline: var(--bgl-btn-padding);
+	font-size: var(--bgl-input-font-size);
+	height: var(--bgl-btn-height);
+	line-height: var(--bgl-btn-height);
 }
 
 .bgl_btn-icon.bgl_btn_mSize {
-	height: var(--btn-height);
-	width: var(--btn-height);
+	height: var(--bgl-btn-height);
+	width: var(--bgl-btn-height);
 }
 
 /* l size */
 .bgl_btn_lSize {
-	padding-inline: calc(var(--btn-padding) * 1.3);
-	font-size: calc(var(--input-font-size) * 1.1);
-	height: calc(var(--btn-height) * 1.2);
-	line-height: calc(var(--btn-height) * 1.2);
+	padding-inline: calc(var(--bgl-btn-padding) * 1.3);
+	font-size: calc(var(--bgl-input-font-size) * 1.1);
+	height: calc(var(--bgl-btn-height) * 1.2);
+	line-height: calc(var(--bgl-btn-height) * 1.2);
 }
 
 .bgl_btn-icon.bgl_btn_lSize {
-	height: calc(var(--btn-height) * 1.2);
-	width: calc(var(--btn-height) * 1.2);
+	height: calc(var(--bgl-btn-height) * 1.2);
+	width: calc(var(--bgl-btn-height) * 1.2);
 }
 
 /* xl size */
 .bgl_btn_xlSize {
-	padding-inline: calc(var(--btn-padding) * 1.6);
-	font-size: calc(var(--input-font-size) * 1.3);
-	height: calc(var(--btn-height) * 1.5);
-	line-height: calc(var(--btn-height) * 1.5);
+	padding-inline: calc(var(--bgl-btn-padding) * 1.6);
+	font-size: calc(var(--bgl-input-font-size) * 1.3);
+	height: calc(var(--bgl-btn-height) * 1.5);
+	line-height: calc(var(--bgl-btn-height) * 1.5);
 }
 
 .bgl_btn-icon.bgl_btn_xlSize {
-	height: calc(var(--btn-height) * 1.5);
-	width: calc(var(--btn-height) * 1.5);
+	height: calc(var(--bgl-btn-height) * 1.5);
+	width: calc(var(--bgl-btn-height) * 1.5);
 }
 
 .bgl_btn_fullWidth {

package/src/components/Card.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+defineOptions({ name: 'BglCard' })
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -60,7 +61,7 @@ const is = computed(() => {
 
 <style>
 .card_frame {
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 }
 .card_label {
 	font-size: 1rem;
@@ -68,7 +69,7 @@ const is = computed(() => {
 	top: -0.5rem;
 	padding: 0.75rem 0;
 	display: block;
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	margin-bottom: 1rem;
 }
 
@@ -80,14 +81,14 @@ const is = computed(() => {
 	position: absolute;
 	top: -0.5rem;
 	inset-inline-start: 1rem;
-	border-left: 1px solid var(--border-color);
-	border-right: 1px solid var(--border-color);
+	border-left: 1px solid var(--bgl-border-color);
+	border-right: 1px solid var(--bgl-border-color);
 	border-bottom: unset;
 
 }
 
 .bgl_card {
-	border-radius: var(--card-border-radius);
+	border-radius: var(--bgl-card-border-radius);
 	background: var(--bgl-box-bg);
 	padding: 2rem 2rem;
 	position: relative;
@@ -98,7 +99,7 @@ const is = computed(() => {
 }
 
 .bgl_card.border {
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 	background-color: transparent;
 }
 

package/src/components/Dropdown.vue

@@ -2,7 +2,7 @@
 <!-- eslint-disable -->
 <script setup lang="ts">
 import type { IconType, ThemeType } from '@bagelink/vue'
-import { Btn, useDevice } from '@bagelink/vue'
+import { Btn, useDevice, useEscapeKey } from '@bagelink/vue'
 import { autoPlacement, computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
@@ -67,10 +67,10 @@ const popoverRef = ref<HTMLElement | null>(null)
 const bglId = `bgl-dd-${++_bglIdCounter}`
 const teleportTarget = ref<string | Element>('body')
 
-const { isMobile, innerWidth } = useDevice()
+const { isMobile } = useDevice()
 
 const shouldDisablePositioning = computed(() => props.disablePlacement && isMobile.value)
-const isSmallScreen = computed(() => innerWidth.value < 910)
+const isSmallScreen = isMobile
 
 const effectiveTriggers = computed(() =>
 	isSmallScreen.value
@@ -206,13 +206,8 @@ function onDocumentPointerDown(e: PointerEvent) {
 	internalHide()
 }
 
-// Esc key
-function onKeydown(e: KeyboardEvent) {
-	if (e.key === 'Escape' && isOpen()) {
-		e.stopPropagation()
-		internalHide()
-	}
-}
+// Esc key — LIFO via shared composable (nested layers close first)
+useEscapeKey(() => internalHide(), () => isOpen())
 
 // Hover delay timers
 let showTimer: ReturnType<typeof setTimeout> | undefined
@@ -248,7 +243,6 @@ function onScroll() {
 
 onMounted(() => {
 	document.addEventListener('pointerdown', onDocumentPointerDown, true)
-	document.addEventListener('keydown', onKeydown)
 	document.addEventListener('scroll', onScroll, { capture: true, passive: true })
 	if (props.showGroup) {
 		if (!groupRegistry.has(props.showGroup)) groupRegistry.set(props.showGroup, new Set())
@@ -258,7 +252,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	document.removeEventListener('pointerdown', onDocumentPointerDown, true)
-	document.removeEventListener('keydown', onKeydown)
 	document.removeEventListener('scroll', onScroll, true)
 	clearTimers()
 	if (props.showGroup) groupRegistry.get(props.showGroup)?.delete(internalHide)
@@ -289,14 +282,14 @@ defineExpose({ show, hide, shown })
 		<Teleport :to="teleportTarget">
 			<div
 				ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"
-				style="border-radius: var(--card-border-radius);"
+				style="border-radius: var(--bgl-card-border-radius);"
 				:class="{ 'bgl-dropdown--no-positioning': shouldDisablePositioning, 'bg-white shadow': props.card }"
 				@toggle="onPopoverToggle" @mouseenter="onPopoverMouseenter" @mouseleave="onPopoverMouseleave"
 				@focus="onPopoverMouseenter" @blur="onPopoverMouseleave"
 			>
 				<div class="bgl-dropdown__backdrop" />
 				<div class="bgl-dropdown__content overflow-hidden" :class="{ 'display-flex column': props.card }"
-				style="border-radius: var(--card-border-radius);">
+				style="border-radius: var(--bgl-card-border-radius);">
 					<slot :hide :show :shown />
 				</div>
 			</div>

package/src/components/FieldSetVue.vue

@@ -16,8 +16,8 @@ defineProps<{
 
 <style scoped>
 	fieldset {
-		border: 1px solid var(--border-color);
-		border-radius: var(--card-border-radius);
+		border: 1px solid var(--bgl-border-color);
+		border-radius: var(--bgl-card-border-radius);
 		padding: var(--space-md);
 	}
 </style>

package/src/components/FilterQuery.vue

@@ -486,7 +486,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 
 						<!-- Remove button -->
 						<Btn
-							icon="close" thin flat size="small" class="m_bg-gray-40 m_px-3 m_mx-auto"
+							icon="close" thin flat size="sm" class="m_bg-gray-40 m_px-3 m_mx-auto"
 							@click="removeCondition(index)"
 						/>
 					</div>
@@ -513,7 +513,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 
 <style>
 .and-or-select {
-	--input-font-size: 12px !important;
+	--bgl-input-font-size: 12px !important;
 	--input-background-color: transparent !important;
 }
 
@@ -574,6 +574,6 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 }
 
 .borderHover:hover {
-	--border-color: var(--bgl-primary);
+	--bgl-border-color: var(--bgl-primary);
 }
 </style>

package/src/components/Image.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
+defineOptions({ name: 'BglImage' })
+import { Skeleton, normalizeDimension, appendScript, awaitGlobal, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
 import { ref, watch } from 'vue'
 
 interface ImageProps {
@@ -54,9 +55,10 @@ async function cacheImage(url: string, blob: Blob) {
 
 async function convertHeicImage(url: string): Promise<string> {
 	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
+	const heic2any = await awaitGlobal<(opts: { blob: Blob }) => Promise<Blob>>('heic2any')
 	const response = await fetch(normalizeURL(url))
 	const blob = await response.blob()
-	const convertedBlob = await window.heic2any({ blob }) as Blob
+	const convertedBlob = await heic2any({ blob })
 	await cacheImage(url, convertedBlob)
 	return URL.createObjectURL(convertedBlob)
 }
@@ -144,6 +146,6 @@ watch(() => [props.src, props.pathKey, props.modelValue], loadImage, { immediate
 	width: 100%;
 }
 .error-image {
-	background-color: var(--skeleton-bg);
+	background-color: var(--bgl-skeleton-bg);
 }
 </style>