@bagelink/vue 1.15.63 → 1.15.65

package/src/components/Image.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-defineOptions({ name: 'BglImage' })
+defineOptions({ name: 'BglImage', inheritAttrs: true })
 import { Skeleton, normalizeDimension, appendScript, awaitGlobal, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
-import { ref, watch } from 'vue'
+import { computed, ref, useSlots, watch } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -11,6 +11,16 @@ interface ImageProps {
 	height?: string | number
 	caption?: string
 	modelValue?: string
+	/** Aspect ratio, e.g. "1", "2-3", "16-9" — maps to the `ratio-*` utility (keeps a stable box while loading). */
+	ratio?: string
+	/** Gradient shown behind/instead of the image — a tone (`purple`), a CSS gradient string, or `[from, to]`. Doubles as the fallback when the image fails or is absent. */
+	gradient?: string | [string, string]
+	/** object-fit for the image. @default 'cover' when `ratio`/`gradient` is set. */
+	fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+	/** mix-blend-mode for blending the photo into the gradient (e.g. 'luminosity'). */
+	blend?: string
+	/** Rounded corners — true (default radius) or a px radius. */
+	rounded?: boolean | number
 }
 
 declare global {
@@ -92,10 +102,64 @@ async function loadImage() {
 }
 
 watch(() => [props.src, props.pathKey, props.modelValue], loadImage, { immediate: true })
+
+// ── Framed mode (ratio / gradient / blend / rounded / overlay slot) ──────────
+const slots = useSlots()
+const framed = computed(() =>
+	props.ratio !== undefined || props.gradient !== undefined || props.blend !== undefined
+	|| props.rounded !== undefined || !!slots.default)
+
+// Resolve `gradient` into a CSS background. Accepts a tone name, a [from,to]
+// pair (tone or color), or a raw CSS gradient/color string.
+function toneToVar(t: string) {
+	return /^(--|#|rgb|hsl|var\(|linear|radial|conic)/.test(t) ? t : `var(--bgl-${t})`
+}
+const gradientCss = computed(() => {
+	const g = props.gradient
+	if (!g) return undefined
+	if (Array.isArray(g)) return `linear-gradient(150deg, ${toneToVar(g[0])}, ${toneToVar(g[1])})`
+	if (/^(linear|radial|conic)-gradient/.test(g)) return g
+	// single tone → subtle two-stop using the tone and a darker mix
+	const c = toneToVar(g)
+	return `linear-gradient(150deg, ${c}, color-mix(in srgb, ${c} 55%, #000))`
+})
+
+const ratioClass = computed(() => (props.ratio ? `ratio-${props.ratio}` : ''))
+const radiusStyle = computed(() => {
+	if (props.rounded === undefined || props.rounded === false) return undefined
+	return typeof props.rounded === 'number' ? `${props.rounded}px` : 'var(--bgl-card-radius, 12px)'
+})
+const imgFit = computed(() => props.fit ?? ((props.ratio || props.gradient) ? 'cover' : undefined))
 </script>
 
 <template>
-	<figcaption v-if="caption">
+	<!-- Framed mode: ratio box with gradient base, blended photo, and overlay slot. -->
+	<div
+		v-if="framed"
+		class="bgl-image-frame relative overflow-hidden"
+		:class="ratioClass"
+		:style="{
+			width: normalizeDimension(width),
+			height: ratio ? undefined : normalizeDimension(height),
+			background: gradientCss,
+			borderRadius: radiusStyle,
+		}"
+	>
+		<img
+			v-if="imageSrc"
+			:src="imageSrc"
+			:alt="alt"
+			class="bgl-image-frame-img absolute-fill"
+			:style="{ objectFit: imgFit, mixBlendMode: blend }"
+		>
+		<Skeleton v-else-if="!gradientCss && !loadingError" class="absolute-fill" />
+		<div v-else-if="loadingError && !gradientCss" class="flex-center absolute-fill error-image">
+			<Icon name="broken_image" />
+		</div>
+		<slot />
+	</div>
+
+	<figcaption v-else-if="caption">
 		<img
 			v-if="imageSrc"
 			:src="imageSrc"
@@ -150,4 +214,7 @@ width: 100%;
 background-color: var(--bgl-skeleton-bg);
 }
 
+.bgl-image-frame { display: block; }
+.bgl-image-frame-img { width: 100%; height: 100%; }
+
 </style>

package/src/components/ListItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { IconType } from '@bagelink/vue'
+import type { IconType, ThemeType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
 import { computed } from 'vue'
 
@@ -22,13 +22,14 @@ const props = withDefaults(
 		fullWidth?: boolean
 		ellipsis?: boolean
 		ripple?: boolean
-		/** Make the whole row one hover/click target: the clickable button stretches
-		    to the trailing edge and the #end meta floats over it (still clickable).
-		    Great for simple rows with light trailing meta. Opt-in — the classic
-		    layout (only the text area clickable) remains the default so rows with
-		    wide trailing content aren't affected. Tune reserved room with the CSS
-		    var --bgl-list-item-end-space. */
-		fullRow?: boolean
+		/** Theme accent for the leading icon-chip and hover/active tint.
+		    Defaults to the surface's primary. e.g. `color="purple"`. */
+		color?: ThemeType
+		/** Card-style row: rounded, no divider, tinted hover. Use for standalone
+		    selectable lists (vs. the default flush divided rows in a panel). */
+		rounded?: boolean
+		/** 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. */
 		clickable?: boolean
@@ -37,7 +38,6 @@ const props = withDefaults(
 	{
 		ellipsis: true,
 		ripple: false,
-		fullRow: false,
 	}
 )
 
@@ -70,7 +70,8 @@ const bind = computed(() => {
 <template>
 	<div
 		class="flex space-between list-item-row"
-		:class="{ 'no-border-list': props.flat, 'list-item-flush': props.fullWidth, 'list-item-fullrow': fullRow && isClickable }"
+		: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"
 	>
 		<!-- Content rendered before the clickable area (e.g. a drag handle, avatar
 		     or leading visual). Lives outside the clickable component so interacting
@@ -111,9 +112,9 @@ const bind = computed(() => {
 				</p>
 			</div>
 		</component>
-		<!-- Trailing meta. With fullRow, it overlaps the clickable button via a
-		     negative margin so the button spans the whole row underneath it; the
-		     end content itself stays on top and independently clickable. -->
+		<!-- Trailing meta. For clickable rows it floats over the end of the click
+		     button so the button spans the whole row; the end content stays on top
+		     and independently clickable. Tune room with --bgl-list-item-end-space. -->
 		<div class="list-item-end flex align-items-center gap-05 flex-shrink-0">
 			<slot name="end">
 				<span v-if="end" class="list-item-endtext" :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
@@ -140,11 +141,14 @@ gap: 0.5rem;
    independently clickable. The button reserves matching room so text never sits
    under the meta. Tune the reserved width with --bgl-list-item-end-space. */
 .list-item-fullrow {
---bgl-list-item-end-space: 3rem;
+--bgl-list-item-end-space: 3.5rem;
+/* Keep the trailing meta aligned with the row's own inline padding (1rem) so it
+   doesn't crowd the edge. Override per-list with --bgl-list-item-end-inset. */
+--bgl-list-item-end-inset: 1rem;
 }
 .list-item-fullrow .list-item-end {
 position: absolute;
-inset-inline-end: 0.5rem;
+inset-inline-end: var(--bgl-list-item-end-inset);
 top: 50%;
 transform: translateY(-50%);
 z-index: 1;
@@ -156,7 +160,7 @@ pointer-events: none;
 pointer-events: auto;
 }
 .list-item-fullrow .list-item:not(.px-0) { padding-inline-end: var(--bgl-list-item-end-space); }
-.list-item-fullrow.list-item-flush .list-item-end { inset-inline-end: 0; }
+.list-item-fullrow.list-item-flush .list-item-end { --bgl-list-item-end-inset: 0; }
 .list-item-row::after {
 content: '';
 position: absolute;
@@ -194,6 +198,12 @@ opacity: 0.5;
 pointer-events: none;
 }
 
+/* Accent used by the icon-chip and (for rounded/active) the tint. Defaults to
+   primary; set per-item via `color` prop → --bgl-list-item-accent. */
+.list-item-row {
+--bgl-list-item-accent: var(--bgl-primary);
+}
+
 /* Hover/active use Bagelink's translucent gray tint, which already flips from
    translucent-dark (light mode) to translucent-light (.bgl-dark-mode) — so it
    reads correctly on any background. Override per-list with --bgl-list-item-hover. */
@@ -201,8 +211,18 @@ pointer-events: none;
 .list-item.router-link-exact-active {
 background-color: var(--bgl-list-item-hover, var(--bgl-gray-tint));
 }
-.list-item.router-link-exact-active {
-background-color: var(--bgl-list-item-active, var(--bgl-primary-tint));
+.list-item.router-link-exact-active,
+.list-item-active .list-item {
+background-color: var(--bgl-list-item-active, color-mix(in srgb, var(--bgl-list-item-accent) 12%, transparent));
+color: var(--bgl-list-item-accent);
+}
+
+/* Rounded card-style rows: pill-radius, tinted accent hover, no divider. */
+.list-item-rounded .list-item {
+border-radius: var(--bgl-card-border-radius);
+}
+.list-item-rounded .list-item:hover {
+background-color: var(--bgl-list-item-hover, color-mix(in srgb, var(--bgl-list-item-accent) 8%, transparent));
 }
 
 .notClickable,
@@ -215,15 +235,15 @@ cursor: default;
 filter: var(--bgl-hover-filter);
 }
 
-/* Leading icon chip */
+/* Leading icon chip — tinted with the row accent (primary by default). */
 .list-item-icon {
 display: grid;
 place-items: center;
 width: 34px;
 height: 34px;
 border-radius: 9px;
-background: color-mix(in srgb, var(--bgl-primary) 10%, transparent);
-color: var(--bgl-primary);
+background: color-mix(in srgb, var(--bgl-list-item-accent) 12%, transparent);
+color: var(--bgl-list-item-accent);
 }
 
 /* Text block: tight, clear hierarchy */
@@ -238,13 +258,14 @@ line-height: 1.3;
 }
 .list-item-title {
 font-size: 0.9375rem;
-font-weight: 500;
+font-weight: 600;
 line-height: 1.35;
 }
 .list-item-subtitle {
 font-size: 0.8125rem;
 opacity: 0.6;
 line-height: 1.35;
+font-weight: 300;
 margin-top: 1px;
 }
 .list-item-endtext {

package/src/components/Menu.vue

@@ -11,13 +11,13 @@ defineProps<{ items: NavLink[] }>()
 		<div class="flex gap-025 m_gap-05">
 			<template v-for="item in items" :key="item.label">
 				<Dropdown v-if="item.children" :value="resolveI18n(item.label)" iconEnd="keyboard_arrow_down">
-					<template #trigger="{ show }">
+					<template #trigger="{ show, shown }">
 						<Btn thin flat :class="item.class" @click="show()">
 							<Icon :name="item.icon" size="0.8" style="margin-bottom: -0.1rem" class=" line-height-0" />
 							<p class="-ms-025">
 								{{ resolveI18n(item.label) }}
 							</p>
-							<Icon name="keyboard_arrow_down" size="0.8" style="margin-bottom: -0.1rem" class=" line-height-0" />
+							<Icon name="keyboard_arrow_down" size="0.8" style="margin-bottom: -0.1rem" class="line-height-0 menu-chevron" :class="{ 'menu-chevron-open': shown }" />
 						</Btn>
 					</template>
 					<Btn
@@ -53,6 +53,14 @@ background: var(--bgl-primary) !important;
 color: var(--bgl-white) !important;
 }
 
+/* Chevron flips when its dropdown is open (mirror-pair → rotate, not swap). */
+.menu-chevron {
+transition: transform 0.2s ease;
+}
+.menu-chevron-open {
+transform: rotate(180deg);
+}
+
 </style>
 
 <style>

package/src/components/charts/BarChart.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+/**
+ * BarChart — vertical bars, single or multi-series (grouped or stacked).
+ * Renders just the plot; wrap in your own Card for a titled panel.
+ *
+ *   <BarChart :data="[12,18,9,22]" :labels="['Q1','Q2','Q3','Q4']" />
+ *   <BarChart :series="[{name:'A',data:[…]},{name:'B',data:[…]}]" stacked />
+ */
+import { computed, ref } from 'vue'
+import { chartUid } from './core/uid'
+import type { RawPoint, RawSeries } from './core/data'
+import { allValues, normalizeSeries, sharedLabels } from './core/data'
+import { resolveColor } from './core/palette'
+import { formatLabel, formatValue, type ValueFormat } from './core/format'
+import { band, linear, niceMax, ticks } from './core/useScale'
+import { useChartFrame } from './core/useChartFrame'
+import { useChartAnim } from './core/useChartAnim'
+import ChartTooltip from './ChartTooltip.vue'
+
+const props = withDefaults(defineProps<{
+	data?: RawPoint[]
+	series?: RawSeries[]
+	labels?: (string | number)[]
+	color?: string
+	stacked?: boolean
+	/** Soft top→bottom gradient on bars (opt-in; flat by default). */
+	gradient?: boolean
+	height?: number
+	grid?: boolean
+	radius?: number
+	currency?: string
+	prefix?: string
+	suffix?: string
+	maxLabels?: number
+	/** Minimum width per category (px). When the categories need more room than
+	    the container has, the chart keeps this width per bar group and scrolls
+	    horizontally instead of cramming — handy on mobile. Set 0 to disable. */
+	minBarWidth?: number
+	animated?: boolean
+}>(), {
+	height: 220,
+	grid: true,
+	radius: 4,
+	maxLabels: 12,
+	minBarWidth: 28,
+	animated: true,
+})
+
+const el = ref<HTMLElement>()
+const heightRef = computed(() => props.height)
+const { width, height: plotH, pad, innerWidth, innerHeight, flipX } = useChartFrame(el, { height: heightRef })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
+
+const series = computed(() => normalizeSeries(props.data, props.series, { labels: props.labels, defaultColor: props.color }))
+const cats = computed(() => sharedLabels(series.value))
+
+// Minimum plot width so dense data scrolls (mobile) instead of cramming.
+const minWidth = computed(() =>
+	props.minBarWidth > 0 && cats.value.length
+		? Math.ceil(cats.value.length * props.minBarWidth + pad.value.left + pad.value.right)
+		: 0,
+)
+
+const valueFmt = computed<ValueFormat>(() => ({ currency: props.currency, prefix: props.prefix, suffix: props.suffix }))
+const axisFmt = computed<ValueFormat>(() => ({ ...valueFmt.value, compact: true }))
+
+const stackTotals = computed(() => cats.value.map((_, i) => series.value.reduce((sum, s) => sum + (s.points[i]?.y ?? 0), 0)))
+const yMax = computed(() => niceMax(props.stacked ? Math.max(0, ...stackTotals.value) : Math.max(0, ...allValues(series.value))))
+const sy = computed(() => linear(0, yMax.value, innerHeight.value, 0))
+const yTicks = computed(() => (props.grid ? ticks(0, yMax.value, 4) : []))
+
+const groups = computed(() => band(cats.value.length, innerWidth.value, 0.3))
+const subBand = computed(() => {
+	const n = props.stacked ? 1 : series.value.length
+	const w = groups.value.bandWidth / n
+	return { width: w, at: (si: number) => si * w }
+})
+
+interface Bar { x: number; y: number; w: number; h: number; color: string; cat: number }
+const bars = computed<Bar[]>(() => {
+	const out: Bar[] = []
+	cats.value.forEach((lbl, i) => {
+		const groupStart = groups.value.start(i)
+		let stackY = innerHeight.value
+		series.value.forEach((s, si) => {
+			const v = s.points[i]?.y ?? 0
+			const color = resolveColor(s.color, si)
+			const full = innerHeight.value - sy.value(v)
+			const h = full * progress.value
+			const w = subBand.value.width
+			const x = props.stacked ? groupStart : groupStart + subBand.value.at(si)
+			const y = props.stacked ? (stackY - h) : (innerHeight.value - h)
+			if (props.stacked) stackY -= full
+			out.push({ x: flipX(x + w / 2) - w / 2, y, w, h, color, cat: i })
+		})
+	})
+	return out
+})
+
+const labelStride = computed(() => Math.max(1, Math.ceil(cats.value.length / props.maxLabels)))
+
+// Gradient defs: one per distinct bar color.
+const uid = chartUid('bar')
+const gradColors = computed(() => [...new Set(bars.value.map(b => b.color))])
+const gradIdFor = (color: string) => `${uid}-${gradColors.value.indexOf(color)}`
+
+// ── Shared hover tooltip (mouse-follow, per category) ────────────────────────
+const hoverIdx = ref<number | null>(null)
+const mouseX = ref(0)
+function onMove(e: MouseEvent) {
+	const host = el.value
+	if (!host || !cats.value.length) return
+	const rect = host.getBoundingClientRect()
+	let local = e.clientX - rect.left - pad.value.left
+	if (flipX(0) !== 0) local = innerWidth.value - local
+	const i = Math.floor((local / Math.max(1, innerWidth.value)) * cats.value.length)
+	hoverIdx.value = Math.min(cats.value.length - 1, Math.max(0, i))
+	mouseX.value = e.clientX - rect.left
+}
+function onLeave() { hoverIdx.value = null }
+
+const hoverLabel = computed(() => (hoverIdx.value == null ? '' : formatLabel(cats.value[hoverIdx.value])))
+const hoverRows = computed(() => {
+	if (hoverIdx.value == null) return []
+	return series.value.map((s, si) => ({
+		name: s.name,
+		color: resolveColor(s.color, si),
+		value: formatValue(s.points[hoverIdx.value as number]?.y ?? 0, valueFmt.value),
+	}))
+})
+const hoverTotal = computed(() => {
+	if (hoverIdx.value == null || !props.stacked) return null
+	return formatValue(stackTotals.value[hoverIdx.value] ?? 0, valueFmt.value)
+})
+const tooltipStyle = computed(() => {
+	const half = 70
+	const x = Math.min(Math.max(mouseX.value, half), Math.max(half, width.value - half))
+	return { left: `${x}px` }
+})
+</script>
+
+<template>
+	<div class="bgl-chart-scroll w-100p overflow-x">
+		<div
+			ref="el" class="bgl-chart relative" :style="{ height: `${plotH}px`, minWidth: minWidth ? `${minWidth}px` : undefined }"
+			@mousemove="onMove" @mouseleave="onLeave"
+		>
+			<svg v-if="width" :width="width" :height="plotH" class="display-block overflow-hidden">
+				<defs v-if="gradient">
+					<linearGradient v-for="c in gradColors" :id="gradIdFor(c)" :key="c" x1="0" y1="0" x2="0" y2="1">
+						<stop offset="0%" :stop-color="c" stop-opacity="1" />
+						<stop offset="100%" :stop-color="c" stop-opacity="0.55" />
+					</linearGradient>
+				</defs>
+				<g :transform="`translate(${pad.left}, ${pad.top})`">
+					<g v-if="grid" class="bgl-chart__grid">
+						<g v-for="(t, i) in yTicks" :key="i">
+							<line :x1="0" :x2="innerWidth" :y1="sy(t)" :y2="sy(t)" />
+							<text class="bgl-chart__ytick" :x="-8" :y="sy(t) + 3">{{ formatValue(t, axisFmt) }}</text>
+						</g>
+					</g>
+
+					<rect
+						v-for="(b, i) in bars" :key="i"
+						:x="b.x" :y="b.y" :width="Math.max(0, b.w)" :height="Math.max(0, b.h)"
+						:rx="Math.min(radius, b.w / 2)" :fill="gradient ? `url(#${gradIdFor(b.color)})` : b.color"
+						class="bgl-chart__bar" :class="{ 'is-dim opacity-5': hoverIdx != null && hoverIdx !== b.cat }"
+					/>
+
+					<g class="bgl-chart__xlabels">
+						<text
+							v-for="(lbl, i) in cats" v-show="i % labelStride === 0" :key="i"
+							:x="flipX(groups.center(i))" :y="innerHeight + 16" text-anchor="middle"
+						>{{ formatLabel(lbl) }}</text>
+					</g>
+				</g>
+			</svg>
+
+			<ChartTooltip
+				v-if="hoverIdx != null" :style="tooltipStyle"
+				:label="hoverLabel" :rows="hoverRows" :total="hoverTotal"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-chart { direction: inherit; }
+.bgl-chart__grid line { stroke: var(--bgl-border-color); stroke-width: 1; }
+.bgl-chart__ytick,
+.bgl-chart__xlabels text { fill: var(--bgl-gray); font-size: 11px; }
+.bgl-chart__ytick { text-anchor: end; }
+.bgl-chart__bar { transition: opacity 0.15s ease; outline: none; }
+.bgl-chart__bar:focus,
+.bgl-chart__bar:focus-visible { outline: none; }
+[dir="rtl"] .bgl-chart__ytick { text-anchor: start; }
+</style>

package/src/components/charts/ChartTooltip.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/**
+ * ChartTooltip — the single tooltip used by every chart (Line, Bar, Donut,
+ * Funnel). Renders a label header, optional hero value, per-series rows
+ * (dot · name · value), an optional total row, and an optional stats block.
+ *
+ * Positioned by the host via `style` (absolute left/top); the host owns
+ * mouse tracking. Non-interactive (pointer-events: none).
+ */
+export interface TipRow { name: string; color?: string; value: string }
+export interface TipStat { label: string; value: string }
+
+defineOptions({ name: 'BglChartTooltip' })
+
+withDefaults(defineProps<{
+	label?: string
+	/** Big focal number (used by single-value charts like the funnel). */
+	hero?: string
+	rows?: TipRow[]
+	total?: string | null
+	stats?: TipStat[]
+	/** Float above the anchor point instead of below it. */
+	above?: boolean
+}>(), {
+	rows: () => [],
+	stats: () => [],
+})
+</script>
+
+<template>
+	<div class="bgl-tip absolute pointer-events-none nowrap z-5 color-white line-height-13" :class="{ 'bgl-tip--above': above }">
+		<p v-if="label" class="bgl-tip__label m-0">{{ label }}</p>
+		<p v-if="hero" class="bgl-tip__hero m-0 tabular-nums">{{ hero }}</p>
+
+		<p v-for="(r, i) in rows" :key="i" class="bgl-tip__row flex align-items-center m-0">
+			<span v-if="r.color" class="bgl-tip__dot flex-shrink-0" :style="{ background: r.color }" />
+			<span v-if="rows.length > 1" class="bgl-tip__name">{{ r.name }}</span>
+			<span class="bgl-tip__val tabular-nums">{{ r.value }}</span>
+		</p>
+
+		<p v-if="total" class="bgl-tip__row bgl-tip__total flex align-items-center m-0">
+			<span class="bgl-tip__name">Total</span>
+			<span class="bgl-tip__val tabular-nums">{{ total }}</span>
+		</p>
+
+		<div v-if="stats.length" class="bgl-tip__stats flex column">
+			<p v-for="(s, i) in stats" :key="i" class="bgl-tip__row flex align-items-center m-0">
+				<span class="bgl-tip__name">{{ s.label }}</span>
+				<span class="bgl-tip__val tabular-nums">{{ s.value }}</span>
+			</p>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-tip {
+	top: 0; transform: translateX(-50%); transform-origin: center;
+	background: var(--bgl-black); border-radius: 0.5rem; padding: 0.4rem 0.6rem;
+	font-size: 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); min-width: 7rem;
+}
+.bgl-tip--above { transform: translate(-50%, calc(-100% - 0.6rem)); }
+.bgl-tip__label { margin-bottom: 0.2rem; opacity: 0.7; font-size: 0.7rem; }
+.bgl-tip__hero { margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 700; }
+.bgl-tip__row { gap: 0.4rem; }
+.bgl-tip__dot { width: 8px; height: 8px; border-radius: 2px; }
+.bgl-tip__name { opacity: 0.7; }
+.bgl-tip__val { margin-inline-start: auto; font-weight: 600; }
+.bgl-tip__total,
+.bgl-tip__stats {
+	margin-top: 0.28rem; padding-top: 0.28rem;
+	border-top: 1px solid color-mix(in srgb, var(--bgl-white) 18%, transparent);
+}
+.bgl-tip__total .bgl-tip__name { opacity: 1; font-weight: 500; }
+</style>