@bagelink/vue 1.15.71 → 1.15.75

package/package.json

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

package/src/components/Alert.vue

@@ -10,7 +10,10 @@ type AlertType = 'info' | 'success' | 'warning' | 'error'
 interface Props {
 	message?: string
 	thin?: boolean
+	/** Border + transparent background (drops the tinted fill). */
 	outline?: boolean
+	/** Adds a border while keeping the tinted background. */
+	frame?: boolean
 	dismissable?: boolean
 	type?: AlertType
 	/** Boolean shorthands: <Alert error>...</Alert> */
@@ -42,7 +45,7 @@ const typeIcon: Record<AlertType, IconType> = {
 </script>
 
 <template>
-	<div v-if="!isDismissed" class="alert" :class="[computedType, { thin, outline }]" :dismissable="dismissable">
+	<div v-if="!isDismissed" class="alert" :class="[computedType, { thin, outline, frame }]" :dismissable="dismissable">
 		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || typeIcon[computedType]" :size="1.7" />
 		<slot>
 			<p class="m-0">
@@ -100,6 +103,11 @@ const typeIcon: Record<AlertType, IconType> = {
   background: unset;
 }
 
+/* frame: border in the alert's accent color, keeps the tinted background. */
+.alert.frame {
+  border: 1px solid var(--alert-outline);
+}
+
 .alert_icon {
   line-height: 1;
 }

package/src/components/Badge.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglBadge' })
-import type { IconType, ThemeType } from '@bagelink/vue'
+import type { IconType, ThemeType, GradientProp, GradientDirProp } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Btn, Icon } from '@bagelink/vue'
+import { Btn, Icon, useGradientVariant } from '@bagelink/vue'
 import { computed, useSlots } from 'vue'
 import '../styles/base-colors.css'
 
@@ -17,10 +17,25 @@ const props = defineProps<{
 	icon?: IconType
 	iconEnd?: IconType
 	color?: ThemeType
-	variant?: 'solid' | 'flat' | 'outline' | 'glass'
+	variant?: 'solid' | 'flat' | 'outline' | 'glass' | 'soft' | 'frost'
 	/** Boolean variant shorthands: <Badge flat /> — same as variant="flat" */
 	flat?: boolean
 	outline?: boolean
+	/** Soft variant: light tinted bg + full-color text & border, driven by `color`.
+	    Shorthand for variant="soft". e.g. <Badge color="blue" soft /> */
+	soft?: boolean
+	/** Frost variant: translucent + blur, tinted by `color`. Reads beautifully
+	    over photos / gradients / dark heroes. Shorthand for variant="frost". */
+	frost?: boolean
+	/** Gradient fill (white text). Boolean = auto (a darker shade of `color`);
+	    or a space-separated tone list — "purple" pairs with `color`
+	    (blue→purple), "blue purple pink" defines all stops. */
+	gradient?: GradientProp
+	/** Gradient direction: a named direction ("to-br") or an angle in degrees
+	    (45 or "45"). Defaults to 135deg. */
+	gradientDir?: GradientDirProp
+	/** Solid fill + a hairline border (keeps the background, unlike `outline`). */
+	frame?: boolean
 	/** Translucent frosted badge — readable on photos / gradients / dark heroes.
 	    Shorthand for variant="glass". */
 	glass?: boolean
@@ -49,9 +64,19 @@ const computedTheme = computed(
 	},
 )
 
+const { isGradient, gradientStyle } = useGradientVariant({
+	gradient: () => props.gradient,
+	gradientDir: () => props.gradientDir,
+	color: () => props.color,
+})
+
 const computedPairClass = computed(() => {
 	const theme = computedTheme.value
-	if (!theme) return 'pair-primary'
+	if (!theme) {
+		// Frost defaults to a white (light-on-dark) glass when no color is given.
+		if (computedVariant.value === 'frost') { return 'pair-white' }
+		return 'pair-primary'
+	}
 	return `pair-${theme}`
 })
 
@@ -64,7 +89,10 @@ const computedSize = computed(() => {
 
 const computedVariant = computed(() => {
 	if (props.variant) { return props.variant }
+	if (isGradient.value) { return 'gradient' }
+	if (props.frost) { return 'frost' }
 	if (props.glass) { return 'glass' }
+	if (props.soft) { return 'soft' }
 	if (props.flat) { return 'flat' }
 	if (props.outline || props.border) { return 'outline' }
 	return 'solid'
@@ -76,7 +104,11 @@ const computedClasses = computed(() => {
 		'round': props.round,
 		'bgl_flatPill': computedVariant.value === 'flat',
 		'bgl_pill-border': computedVariant.value === 'outline',
+		'bgl_pill-frame': props.frame,
 		'bgl_glassPill': computedVariant.value === 'glass',
+		'soft': computedVariant.value === 'soft',
+		'frost': computedVariant.value === 'frost',
+		'gradient': computedVariant.value === 'gradient',
 		'pillLarge': computedSize.value === 'lg',
 		'pillSmall': computedSize.value === 'sm',
 	}
@@ -91,7 +123,7 @@ const computedClasses = computed(() => {
 <template>
 	<div
 		class="bgl_pill"
-		style="height: var(--bgl-pill-height);"
+		:style="[{ height: 'var(--bgl-pill-height)' }, gradientStyle]"
 		:disabled="disabled"
 		:class="computedClasses"
 	>

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconType, ExtendedThemeType, TranslatableString } from '@bagelink/vue'
+import type { IconType, ExtendedThemeType, TranslatableString, GradientProp, GradientDirProp } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Icon, Loading, useDialog, useI18n, resolveI18n, MOBILE_BREAKPOINT } from '@bagelink/vue'
+import { Icon, Loading, useDialog, useI18n, resolveI18n, useGradientVariant, MOBILE_BREAKPOINT } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
 defineOptions({ name: 'BglBtn' })
@@ -13,10 +13,25 @@ const props = withDefaults(
 		iconSize?: number | string
 		iconMobileSize?: number | string
 		color?: ExtendedThemeType
-		variant?: 'solid' | 'flat' | 'outline'
+		variant?: 'solid' | 'flat' | 'outline' | 'soft' | 'frost'
 		/** Boolean variant shorthands: <Btn flat /> — same as variant="flat" */
 		flat?: boolean
 		outline?: boolean
+		/** Soft variant: light tinted bg + full-color text & border, driven by `color`.
+		    Shorthand for variant="soft". e.g. <Btn color="blue" soft /> */
+		soft?: boolean
+		/** Frost variant: translucent + blur, tinted by `color`. Reads beautifully
+		    over photos / gradients / dark heroes. Shorthand for variant="frost". */
+		frost?: boolean
+		/** Gradient fill (white text). Boolean = auto (a darker shade of `color`);
+		    or a space-separated tone list — "purple" pairs with `color`
+		    (blue→purple), "blue purple pink" defines all stops. */
+		gradient?: GradientProp
+		/** Gradient direction: a named direction ("to-br") or an angle in degrees
+		    (45 or "45"). Defaults to 135deg. */
+		gradientDir?: GradientDirProp
+		/** Solid fill + a hairline border (keeps the background, unlike `outline`). */
+		frame?: boolean
 		/** @deprecated Use `outline` */
 		border?: boolean
 		thin?: boolean
@@ -67,17 +82,41 @@ const emit = defineEmits<{
 
 const { $t } = useI18n()
 
+const { isGradient, gradientStyle } = useGradientVariant({
+	gradient: () => props.gradient,
+	gradientDir: () => props.gradientDir,
+	color: () => props.color,
+})
+
 const computedVariant = computed(() => {
 	if (props.variant) { return props.variant }
-	if (props.flat) { return 'flat' }
+	if (isGradient.value) { return 'gradient' }
+	if (props.frost) { return 'frost' }
+	if (props.soft) { return 'soft' }
+	// An explicit `outline`/`border` wins over `flat` — components like Dropdown
+	// default the trigger to `flat`, so `<Dropdown outline>` must still resolve to
+	// the outline variant rather than being swallowed by the inherited flat.
 	if (props.outline || props.border) { return 'outline' }
+	// `frame` is "solid fill + a border", so it also overrides an inherited
+	// `flat` (e.g. Dropdown's flat trigger) to restore the solid background.
+	if (props.frame) { return 'solid' }
+	if (props.flat) { return 'flat' }
 	return 'solid'
 })
 
 const computedPairClass = computed(() => {
 	const theme = props.color
 	if (!theme) {
-		// Only flat/outline buttons get a default for visibility
+		// Frost defaults to a white (light-on-dark) glass when no color is given.
+		if (computedVariant.value === 'frost') {
+			return 'pair-white'
+		}
+		// Gradient with explicit stops (e.g. gradient="blue purple") needs a pair
+		// class only to activate `.gradient`; default to primary for the auto case.
+		if (computedVariant.value === 'gradient') {
+			return 'pair-primary'
+		}
+		// Only flat/outline/soft buttons get a default for visibility
 		if (computedVariant.value !== 'solid') {
 			return 'pair-black'
 		}
@@ -181,7 +220,11 @@ const slots: SetupContext['slots'] = useSlots()
 			round,
 			'bgl_flatPill': computedVariant === 'flat',
 			'bgl_pill-border': computedVariant === 'outline',
-		}, computedPairClass]" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+			'soft': computedVariant === 'soft',
+			'frost': computedVariant === 'frost',
+			'gradient': computedVariant === 'gradient',
+			'bgl_pill-frame': frame,
+		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
 		<Loading v-if="loading" class="h-100p" size="15" color="currentColor" />
 		<div v-else class="bgl_btn-flex">

package/src/components/Card.vue

@@ -49,7 +49,7 @@ const is = computed(() => {
 	<component
 		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
 			thin,
-			'border': outline,
+			'border bg-transparent': outline,
 			'h-100': h100,
 			[bg || '']: bg,
 			'overflow-x': overflowX,
@@ -57,7 +57,7 @@ const is = computed(() => {
 			'card_frame': frame,
 		}"
 	>
-		<span v-if="label" class="card_label">
+		<span v-if="label" class="card_label block label">
 			{{ label }}
 		</span>
 		<!-- Header row: title + optional trailing action. Full override via #header. -->
@@ -76,15 +76,6 @@ const is = computed(() => {
 .card_frame {
 border: 1px solid var(--bgl-border-color);
 }
-.card_label {
-font-size: 1rem;
-position: relative;
-top: -0.5rem;
-padding: 0.75rem 0;
-display: block;
-border-bottom: 1px solid var(--bgl-border-color);
-margin-bottom: 1rem;
-}
 
 /* Header row (title + action). Pulls out to the card edges via negative margins
    so its divider spans full-width regardless of the card's own padding, then
@@ -99,20 +90,6 @@ min-height: 0;
 font-weight: 600;
 }
 
-.border .card_label {
-font-size: 0.7rem;
-font-weight: 300;
-background: var(--bgl-box-bg);
-padding: 0 0.75rem;
-position: absolute;
-top: -0.5rem;
-inset-inline-start: 1rem;
-border-left: 1px solid var(--bgl-border-color);
-border-right: 1px solid var(--bgl-border-color);
-border-bottom: unset;
-
-}
-
 .bgl_card {
 --bgl-card-pad: 2rem;
 border-radius: var(--bgl-card-border-radius);
@@ -125,11 +102,6 @@ position: relative;
 background: var(--bgl-gray-tint);
 }
 
-.bgl_card.border {
-border: 1px solid var(--bgl-border-color);
-background-color: transparent;
-}
-
 .bgl_card.thin {
 --bgl-card-pad: 1rem;
 padding: var(--bgl-card-pad);

package/src/components/Dropdown.vue

@@ -27,6 +27,8 @@ const props = withDefaults(defineProps<{
 	iconEnd?: IconType
 	border?: boolean
 	outline?: boolean
+	/** Solid fill + a hairline border on the trigger (keeps the background, unlike `outline`). */
+	frame?: boolean
 	round?: boolean
 	placement?: AlignedPlacement
 	disablePlacement?: boolean
@@ -386,7 +388,7 @@ defineExpose({ show, hide, shown })
 		>
 			<slot name="trigger" :show :hide :shown>
 				<Btn
-					:class="triggerClass" :iconEnd :icon="iconSet" :value :thin :flat :outline :round :color
+					:class="triggerClass" :iconEnd :icon="iconSet" :value :thin :flat :outline :frame :round :color
 					:disabled @click="onTriggerClick"
 				/>
 			</slot>

package/src/components/ListItem.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { IconType, ThemeType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
 	defineProps<{
@@ -31,9 +33,8 @@ const props = withDefaults(
 		/** Visually mark as selected (for non-router selection lists). */
 		active?: boolean
 		/** Render as an interactive row (cursor + hover) without needing a handler.
-		    Implied when `to`, `href`, or `onClick` is set. */
+		    Implied when `to`, `href`, or a `@click` listener is set. */
 		clickable?: boolean
-		onClick?: () => void
 	}>(),
 	{
 		ellipsis: true,
@@ -41,9 +42,34 @@ const props = withDefaults(
 	}
 )
 
+const attrs = useAttrs()
+
+// Split inherited attrs: event listeners (onClick, onClickStop, …) belong on the
+// clickable element so handlers + modifiers like `.stop` fire on the actual
+// button/link row; everything else (class, style, data-*, …) stays on the root
+// wrapper to preserve existing behavior.
+const listenerAttrs = computed(() => {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(attrs)) {
+		if (/^on[A-Z]/.test(k)) { out[k] = (attrs as any)[k] }
+	}
+	return out
+})
+const rootAttrs = computed(() => {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(attrs)) {
+		if (!/^on[A-Z]/.test(k)) { out[k] = (attrs as any)[k] }
+	}
+	return out
+})
+
 const hasTo = computed(() => props.to !== undefined && props.to !== '')
 const hasHref = computed(() => props.href !== undefined && props.href !== '')
-const isClickable = computed(() => hasTo.value || hasHref.value || props.onClick !== undefined || props.clickable === true)
+// A `@click` listener (with or without modifiers like `.stop`) shows up in
+// $attrs as `onClick` / `onClickStop` / etc — detect any of them so a clickable
+// row is recognized even when the handler uses modifiers.
+const hasClickListener = computed(() => Object.keys(attrs).some(k => /^onClick/i.test(k)))
+const isClickable = computed(() => hasTo.value || hasHref.value || hasClickListener.value || props.clickable === true)
 
 const isComponent = computed(() => {
 	if (hasTo.value) { return 'router-link' }
@@ -53,7 +79,10 @@ const isComponent = computed(() => {
 })
 
 const bind = computed(() => {
-	const obj: { [key: string]: any } = {}
+	// Spread the inherited event listeners (including `@click`/`@click.stop`) onto
+	// the clickable element itself, so the handler fires on the actual button/link
+	// row — not the outer wrapper — and modifiers like `.stop` keep working.
+	const obj: { [key: string]: any } = { ...listenerAttrs.value }
 	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
 	else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
 	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
@@ -69,6 +98,7 @@ const bind = computed(() => {
 
 <template>
 	<div
+		v-bind="rootAttrs"
 		class="flex space-between list-item-row"
 		:class="{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active }"
 		:style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
@@ -86,7 +116,7 @@ const bind = computed(() => {
 				'py-05': props.thin,
 				'px-1': !props.fullWidth,
 				'px-0': props.fullWidth,
-			}" @click="typeof onClick === 'function' && onClick()"
+			}"
 		>
 			<!-- Leading visual INSIDE the clickable area. Use #media for custom art
 			     (covers, thumbnails); `src`/`showAvatar` and `icon` are shortcuts. -->

package/src/components/layout/TabsNav.vue

@@ -23,6 +23,8 @@ const props = defineProps<{
 	alignTxt?: 'center' | 'start' | 'end'
 	alignTxtMobile?: 'center' | 'start' | 'end'
 	outline?: boolean
+	/** Adds a border around the tabs wrapper (keeps the background). */
+	frame?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -140,7 +142,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical, 'outline': outline }">
+	<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical, 'bgl_tabs-outline': outline, 'bgl_tabs-frame': frame }">
 	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs: tabEls }">
 		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="[
 			{ active: isActive(tab) },
@@ -200,6 +202,18 @@ border-radius: calc(var(--bgl_tabs-border-radius) * 1.4);
 	gap: var(--bgl_tabs-gap);
 }
 
+/* outline: border + drop the filled background & shadow (transparent shell). */
+.bgl_tabs-outline.bgl_tabs_wrap {
+	border: 1px solid var(--bgl-border-color);
+	background: transparent;
+	box-shadow: none;
+}
+
+/* frame: border on top of the normal filled background (keeps bg & shadow). */
+.bgl_tabs-frame.bgl_tabs_wrap {
+	border: 1px solid var(--bgl-border-color);
+}
+
 .bgl_tab {
 border: none;
 background: transparent;

package/src/composables/index.ts

@@ -8,6 +8,8 @@ export { useAddToCalendar } from './useAddToCalendar'
 export { useDevice } from './useDevice'
 export { useEscapeKey } from './useEscapeKey'
 export { useExcel } from './useExcel'
+export type { GradientDir, GradientDirProp, GradientProp } from './useGradientVariant'
+export { useGradientVariant } from './useGradientVariant'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
 export { useQuery } from './useQuery'

package/src/composables/useGradientVariant.ts

@@ -0,0 +1,100 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+
+/** The 8 named directions, mirroring the `.to-*` utilities in gradients.css. */
+export type GradientDir
+	= 'to-t' | 'to-b' | 'to-l' | 'to-r' | 'to-tl' | 'to-tr' | 'to-bl' | 'to-br'
+
+/** `gradient` prop: boolean (auto from `color`) or a space-separated tone list,
+ *  e.g. "purple" (2-stop with `color`) or "blue purple pink" (full control). */
+export type GradientProp = boolean | string
+
+/** `gradient-dir` prop: a named direction, or an angle in degrees (number or
+ *  numeric string). Undefined → CSS default (135deg). */
+export type GradientDirProp = GradientDir | number | string
+
+const DIR_MAP: Record<GradientDir, string> = {
+	'to-t': 'to top',
+	'to-b': 'to bottom',
+	'to-l': 'to left',
+	'to-r': 'to right',
+	'to-tl': 'to top left',
+	'to-tr': 'to top right',
+	'to-bl': 'to bottom left',
+	'to-br': 'to bottom right',
+}
+
+/** Resolve a gradient-dir value to a CSS angle/keyword, or undefined for default. */
+function resolveAngle(dir: GradientDirProp | undefined): string | undefined {
+	if (dir == null || dir === '') { return undefined }
+	if (typeof dir === 'string' && dir in DIR_MAP) {
+		return DIR_MAP[dir as GradientDir]
+	}
+	const n = Number(dir)
+	return Number.isFinite(n) ? `${n}deg` : undefined
+}
+
+/** Split a tone string ("blue purple pink") into individual tone tokens. */
+function parseTones(value: GradientProp | undefined): string[] {
+	if (typeof value !== 'string') { return [] }
+	return value.trim().split(/\s+/).filter(Boolean)
+}
+
+interface UseGradientVariantArgs {
+	/** The `gradient` prop value. */
+	gradient: MaybeRefOrGetter<GradientProp | undefined>
+	/** The `gradient-dir` prop value. */
+	gradientDir?: MaybeRefOrGetter<GradientDirProp | undefined>
+	/** The component's `color` prop — used as the first stop when present. */
+	color?: MaybeRefOrGetter<string | undefined>
+}
+
+/**
+ * Shared logic for the `gradient` variant across Btn / Badge (and anything else).
+ *
+ * Stop resolution:
+ *   - `color` (if set) is the first stop, followed by tones from `gradient`.
+ *   - With no `color`, all stops come from `gradient`.
+ *   - A single resolved stop (boolean `gradient`, or one tone) lets the CSS
+ *     `.gradient` modifier auto-derive a darker second stop — so we inject
+ *     nothing and rely on its `--bgl-grad-default-*` fallback.
+ *
+ * Returns the inline CSS custom properties to bind via `:style`. Named direction
+ * / via / extra stops authored as gradients.css classes still compose on top.
+ */
+export function useGradientVariant({ gradient, gradientDir, color }: UseGradientVariantArgs) {
+	/** Whether the gradient variant is active at all. */
+	const isGradient = computed(() => {
+		const g = toValue(gradient)
+		return g === true || (typeof g === 'string' && g.trim() !== '')
+	})
+
+	const stops = computed(() => {
+		const c = toValue(color)
+		const tones = parseTones(toValue(gradient))
+		return [c, ...tones].filter(Boolean) as string[]
+	})
+
+	const gradientStyle = computed<Record<string, string>>(() => {
+		if (!isGradient.value) { return {} }
+
+		const style: Record<string, string> = {}
+		const angle = resolveAngle(toValue(gradientDir))
+		if (angle) { style['--bgl-grad-angle'] = angle }
+
+		const s = stops.value
+		// 0–1 stops → let the CSS auto-derive a darker second stop. Inject nothing.
+		if (s.length < 2) { return style }
+
+		style['--bgl-grad-from'] = `var(--bgl-${s[0]})`
+		style['--bgl-grad-to'] = `var(--bgl-${s[s.length - 1]})`
+		// Middle stops become the `via` slot (comma-terminated, like gradients.css).
+		const middle = s.slice(1, -1)
+		if (middle.length) {
+			style['--bgl-grad-via'] = `${middle.map(t => `var(--bgl-${t})`).join(', ')}, `
+		}
+		return style
+	})
+
+	return { isGradient, gradientStyle, stops }
+}

package/src/styles/bagel.css

@@ -34,6 +34,7 @@
 @import "mobileColors.css";
 @import "appearance.css";
 @import "gradients.css";
+@import "color-variants.css";
 
 /* Icon font-family bindings — mirrored from Icon.vue so icons work even when
    that component's injected <style> is not yet present (e.g. Vite dev mode). */

package/src/styles/base-colors.css

@@ -1514,6 +1514,15 @@
     outline: 1px solid;
 }
 
+/* frame: keeps the solid fill but adds a hairline border on top.
+   Unlike .bgl_pill-border (outline variant) it does NOT clear the background.
+   The border tracks the pill's own tone (falling back to the neutral border
+   color) so a filled primary button gets a primary-toned edge, not a stray
+   grey ring that reads like an outline. */
+.bgl_pill-frame {
+    border: 1px solid color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-border-color)) 55%, transparent);
+}
+
 /* Base colors flat/border */
 .pair-blue.bgl_flatPill,
 .pair-blue.bgl_pill-border {