@bagelink/vue 1.15.59 → 1.15.61

package/src/components/layout/Divider.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglDivider' })
+import { useSlots } from 'vue'
+
+/**
+ * Hairline separator in the theme border color.
+ * - Horizontal by default; `vertical` for inline groups (toolbars, breadcrumbs).
+ * - Default slot (or `label`) renders centered text with a line on each side
+ *   (horizontal only) — e.g. an "OR" divider.
+ * - `size` sets the length of a vertical divider (maps to --divider-size).
+ */
+const {
+	vertical = false,
+	label = '',
+	size,
+	class: className = '',
+} = defineProps<{
+	vertical?: boolean
+	label?: string
+	size?: string
+	class?: string
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+	<!-- vertical: short hairline, no label support -->
+	<div
+		v-if="vertical"
+		class="divider-v"
+		:class="className"
+		:style="size ? { '--divider-size': size } : undefined"
+		role="separator"
+		aria-orientation="vertical"
+	/>
+
+	<!-- horizontal with label/slot: line — content — line -->
+	<div v-else-if="label || slots.default" class="bgl-divider-labeled" :class="className" role="separator">
+		<span class="divider bgl-divider-line" />
+		<span class="bgl-divider-label"><slot>{{ label }}</slot></span>
+		<span class="divider bgl-divider-line" />
+	</div>
+
+	<!-- plain horizontal hairline -->
+	<div v-else class="divider" :class="className" role="separator" />
+</template>
+
+<style scoped>
+.bgl-divider-labeled {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+.bgl-divider-line {
+	flex: 1;
+}
+.bgl-divider-label {
+	font-size: 0.8125rem;
+	color: var(--bgl-text-soft, var(--bgl-gray));
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+</style>

package/src/components/layout/Layout.vue

@@ -22,19 +22,32 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 
 })
 
-const gridTemplateRows = computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
+// Bare `fr` tracks won't shrink below their content's intrinsic size, which
+// causes overflow when a child (table, long text, nested grid) is wider than its
+// share. Wrapping in `minmax(0, …)` makes the track shrinkable — the behaviour
+// you almost always want. Authors can opt out by passing an explicit minmax().
+function normalizeTrack(track: string): string {
+	const t = track.trim()
+	if (/^\d*\.?\d+fr$/.test(t)) { return `minmax(0, ${t})` }
+	return t
+}
+function buildTemplate(tracks: string[]): string {
+	return tracks.length > 0 ? tracks.map(normalizeTrack).join(' ') : 'auto'
+}
+
+const gridTemplateRows = computed(() => buildTemplate(props.rows))
 const gapSize = computed(() => `${props.gap}rem`)
 const mGapSize = computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize.value)
 
 const mGridTemplateRows = computed(() => {
-	if (props.mRows?.length) { return props.mRows.join(' ') }
+	if (props.mRows?.length) { return buildTemplate(props.mRows) }
 	return gridTemplateRows.value
 })
 
-const gridTemplateColumns = computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = computed(() => buildTemplate(props.columns))
 
 const mGridTemplateColumns = computed(() => {
-	if (props.mColumns?.length) { return props.mColumns.join(' ') }
+	if (props.mColumns?.length) { return buildTemplate(props.mColumns) }
 	return gridTemplateColumns.value
 })
 </script>

package/src/components/layout/SidebarNavItem.vue

@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import type { NavLink } from '@bagelink/vue'
+import { Btn, Icon, Dropdown } from '@bagelink/vue'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { resolveI18n } from '../../i18n'
+
+interface LinkWithAction extends NavLink {
+	activeRoutes?: string[]
+	children?: LinkWithAction[]
+	action?: () => void
+}
+
+const props = withDefaults(defineProps<{
+	link: LinkWithAction
+	/** sidebar is expanded (true) or collapsed to icons (false) */
+	open: boolean
+	isMobile: boolean
+	bgColor: string
+	textColor: string
+	activeColor: string
+}>(), {})
+
+const route = useRoute()
+
+const hasChildren = computed(() => !!props.link.children?.length)
+
+// active detection (mirrors AppSidebar logic, recursive for parents)
+function linkActive(link: LinkWithAction): boolean {
+	const linkPath = link.to
+	if (link.activeRoutes?.length) {
+		return link.activeRoutes.some(p =>
+			p === '/' ? route.path === p : route.path === p || route.path.startsWith(`${p}/`))
+	}
+	if (!linkPath) return false
+	if (linkPath === '/') return route.path === linkPath
+	return route.path === linkPath || route.path.startsWith(`${linkPath}/`)
+}
+
+const childActive = computed(() => props.link.children?.some(linkActive) ?? false)
+const selfActive = computed(() => linkActive(props.link))
+const isActive = computed(() => selfActive.value || (hasChildren.value && childActive.value))
+
+// expanded/collapsed group state — auto-open when a child is active
+const expanded = ref(childActive.value)
+watch(childActive, v => { if (v) expanded.value = true })
+
+function onParentClick() {
+	if (hasChildren.value) expanded.value = !expanded.value
+	else props.link.action?.()
+}
+</script>
+
+<template>
+	<!-- LEAF link -->
+	<Btn
+		v-if="!hasChildren"
+		:title="!open && !isMobile ? resolveI18n(link.label) : ''"
+		fullWidth alignTxt="start" class="flex-shrink-0 px-075"
+		:class="{ 'nav-btn-active': selfActive }"
+		:style="{
+			backgroundColor: selfActive ? activeColor : bgColor,
+			color: selfActive ? 'white' : textColor,
+		}"
+		:to="link.to || '/'" @click="link.action"
+	>
+		<Icon :name="link.icon" size="1.2" />
+		<span class="nav-text">{{ resolveI18n(link.label) }}</span>
+	</Btn>
+
+	<!-- PARENT with children, EXPANDED sidebar -->
+	<div v-else-if="open || isMobile" class="sidebar-group w100p">
+		<Btn
+			fullWidth alignTxt="start" class="flex-shrink-0 px-075 sidebar-group-toggle"
+			:class="{ 'nav-btn-active': isActive }"
+			:style="{
+				backgroundColor: isActive ? activeColor : bgColor,
+				color: isActive ? 'white' : textColor,
+			}"
+			@click="onParentClick"
+		>
+			<Icon :name="link.icon" size="1.2" />
+			<span class="nav-text flex-grow">{{ resolveI18n(link.label) }}</span>
+			<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron" :class="{ 'sidebar-chevron-open': expanded }" />
+		</Btn>
+		<div class="sidebar-children" :class="{ 'sidebar-children-open': expanded }">
+			<Btn
+				v-for="child in link.children" :key="child.to || child.label"
+				fullWidth alignTxt="start" class="flex-shrink-0 ps-2 pe-075 sidebar-child"
+				:class="{ 'nav-btn-active': linkActive(child) }"
+				:style="{
+					backgroundColor: linkActive(child) ? activeColor : 'transparent',
+					color: linkActive(child) ? 'white' : textColor,
+				}"
+				:to="child.to || '/'" @click="child.action"
+			>
+				<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+				<span class="nav-text">{{ resolveI18n(child.label) }}</span>
+			</Btn>
+		</div>
+	</div>
+
+	<!-- PARENT with children, COLLAPSED sidebar → hover popover flyout -->
+	<Dropdown
+		v-else
+		placement="right-start"
+		:triggers="['hover']"
+		card
+		class="w100p sidebar-flyout-trigger"
+	>
+		<template #trigger>
+			<Btn
+				fullWidth alignTxt="start" class="flex-shrink-0 px-075"
+				:class="{ 'nav-btn-active': isActive }"
+				:style="{
+					backgroundColor: isActive ? activeColor : bgColor,
+					color: isActive ? 'white' : textColor,
+				}"
+			>
+				<Icon :name="link.icon" size="1.2" />
+				<span class="nav-text">{{ resolveI18n(link.label) }}</span>
+			</Btn>
+		</template>
+		<!-- flyout content -->
+		<div class="sidebar-flyout p-05">
+			<p class="sidebar-flyout-label">{{ resolveI18n(link.label) }}</p>
+			<Btn
+				v-for="child in link.children" :key="child.to || child.label"
+				fullWidth alignTxt="start" thin class="flex-shrink-0 px-075 sidebar-flyout-item"
+				:class="{ 'nav-btn-active': linkActive(child) }"
+				:style="{
+					backgroundColor: linkActive(child) ? activeColor : 'transparent',
+					color: linkActive(child) ? 'white' : 'var(--bgl-text-color)',
+				}"
+				:to="child.to || '/'" @click="child.action"
+			>
+				<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+				<span>{{ resolveI18n(child.label) }}</span>
+			</Btn>
+		</div>
+	</Dropdown>
+</template>
+
+<style scoped>
+.sidebar-chevron {
+	margin-inline-start: auto;
+	transition: transform 0.2s ease;
+	opacity: 0.6;
+}
+.sidebar-chevron-open {
+	transform: rotate(180deg);
+}
+.sidebar-children {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 0.25s ease;
+	overflow: hidden;
+}
+.sidebar-children-open {
+	grid-template-rows: 1fr;
+}
+.sidebar-children > * {
+	min-height: 0;
+}
+.sidebar-child {
+	font-size: 0.85rem;
+}
+.sidebar-flyout {
+	min-width: 180px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.sidebar-flyout-label {
+	margin: 0;
+	padding: 0.25rem 0.5rem 0.375rem;
+	font-size: 0.6875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	opacity: 0.45;
+}
+.sidebar-flyout-item {
+	border-radius: var(--bgl-btn-border-radius);
+}
+</style>

package/src/components/layout/index.ts

@@ -4,6 +4,7 @@ export { default as AppSidebar } from './AppSidebar.vue'
 export { useAppLayout } from './appLayoutContext'
 export type { AppLayoutContext } from './appLayoutContext'
 export { default as BottomMenu } from './BottomMenu.vue'
+export { default as Divider } from './Divider.vue'
 export { default as Layout } from './Layout.vue'
 export { default as Panel } from './Panel.vue'
 export { default as Resizable } from './Resizable.vue'

package/src/directives/index.ts

@@ -1,4 +1,6 @@
 export { default as pattern } from './pattern'
+export { default as reveal } from './reveal'
+export type { RevealOptions } from './reveal'
 export { default as ripple } from './ripple'
 export { vResize } from './vResize'
 export type { ResizeEvent, ResizeOptions } from './vResize'

package/src/directives/reveal.ts

@@ -0,0 +1,78 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+/**
+ * v-reveal — animate an element into view on first scroll-intersection.
+ *
+ *   <div v-reveal>…</div>                       // default: fade + rise
+ *   <div v-reveal="'left'">…</div>              // slide from a direction
+ *   <div v-reveal="{ y: 'up', delay: 120 }">…</div>
+ *   <Card v-for="…" v-reveal="{ delay: i * 80 }" />   // stagger
+ *
+ * Adds `.bgl-reveal` immediately (hidden, pre-transformed) and toggles
+ * `.bgl-reveal-in` once the element enters the viewport. Honors
+ * `prefers-reduced-motion` (shows instantly, no transform). All visual tuning
+ * lives in CSS (motion.css) via data-attributes, so it's themeable and cheap.
+ */
+
+type Dir = 'up' | 'down' | 'left' | 'right' | 'none'
+
+interface RevealOptions {
+	/** Direction the element travels in from. Default 'up'. */
+	y?: Dir
+	/** Stagger / entrance delay in ms. */
+	delay?: number
+	/** Animate only once (default) or re-run when scrolled away and back. */
+	once?: boolean
+	/** 0–1 visibility threshold before triggering. Default 0.12. */
+	threshold?: number
+}
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined'
+	&& window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+function parse(value: RevealOptions | Dir | undefined): Required<RevealOptions> {
+	const base: Required<RevealOptions> = { y: 'up', delay: 0, once: true, threshold: 0.12 }
+	if (!value) { return base }
+	if (typeof value === 'string') { return { ...base, y: value } }
+	return { ...base, ...value }
+}
+
+const observers = new WeakMap<HTMLElement, IntersectionObserver>()
+
+const reveal: Directive<HTMLElement, RevealOptions | Dir> = {
+	mounted(el, binding: DirectiveBinding<RevealOptions | Dir>) {
+		const opts = parse(binding.value)
+
+		// Reduced motion: reveal instantly, skip all transforms/observers.
+		if (prefersReducedMotion()) { return }
+
+		el.classList.add('bgl-reveal')
+		if (opts.y !== 'none') { el.dataset.revealDir = opts.y }
+		if (opts.delay) { el.style.setProperty('--bgl-reveal-delay', `${opts.delay}ms`) }
+
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					el.classList.add('bgl-reveal-in')
+					if (opts.once) { observer.unobserve(el) }
+				} else if (!opts.once) {
+					el.classList.remove('bgl-reveal-in')
+				}
+			}
+		}, { threshold: opts.threshold, rootMargin: '0px 0px -8% 0px' })
+
+		observer.observe(el)
+		observers.set(el, observer)
+	},
+	unmounted(el) {
+		observers.get(el)?.disconnect()
+		observers.delete(el)
+	},
+	getSSRProps() {
+		return {}
+	},
+}
+
+export default reveal
+export type { RevealOptions }

package/src/plugins/bagel.ts

@@ -5,7 +5,7 @@ import type { BagelToastOptions } from './useToast'
 import FloatingVue from 'floating-vue'
 import lightboxPlugin from '../components/lightbox/index'
 import { DialogPlugin } from '../dialog/useDialog'
-import { ripple, pattern } from '../directives'
+import { ripple, pattern, reveal } from '../directives'
 import { createI18n, getI18n } from '../i18n'
 import clickOutside from '../utils/clickOutside'
 import { ToastPlugin } from './useToast'
@@ -23,6 +23,7 @@ export const BagelVue: Plugin<BagelOptions> = {
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)
+		app.directive('reveal', reveal)
 
 		// Install UI plugins
 		app.use(lightboxPlugin)

package/src/styles/appearance.css

@@ -767,6 +767,17 @@
     filter: saturate(200%) !important;
 }
 
+/* Glass — frosted translucent surface for use over photos / gradients / dark
+ * heroes (nav pills, eyebrow chips, overlays). Light-on-dark by default; flip
+ * with --bgl-glass-bg / --bgl-glass-color / --bgl-glass-border. */
+.glass {
+    background-color: var(--bgl-glass-bg, rgba(255, 255, 255, 0.18)) !important;
+    color: var(--bgl-glass-color, #fff) !important;
+    border: 1px solid var(--bgl-glass-border, rgba(255, 255, 255, 0.28)) !important;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
 /* Backdrop Filter */
 .backdrop-blur-none {
     backdrop-filter: blur(0) !important;

package/src/styles/bagel.css

@@ -21,6 +21,7 @@
 @import "buttons.css";
 @import "scrollbar.css";
 @import "transitions.css";
+@import "motion.css";
 @import "loginCard.css";
 @import "app-layout.css";
 

package/src/styles/dark.css

@@ -26,6 +26,11 @@
   filter: invert(1);
 } */
 
+/* `:root.bgl-dark-mode` (the class lives on <html>) raises specificity to
+   (0,2,0) so these tokens win over any project that redefines colors in its
+   own `:root {}` (e.g. udi sets --bgl-blue: #7ad3f7). The bare .bgl-dark-mode
+   is kept as a fallback in case the class is applied to a non-root element. */
+:root.bgl-dark-mode,
 .bgl-dark-mode {
   /* ---- Dark palette (raw values) ---------------------------------------- */
   --bgl-dm-bg: #121317;
@@ -41,14 +46,31 @@
   /* primary text */
   --bgl-dm-text-muted: #9a9b9d;
   /* secondary text */
-  --bgl-dm-border: #383a3f;
-  /* borders / dividers */
+  --bgl-dm-border: rgba(255, 255, 255, 0.12);
+  /* borders / dividers — translucent light, mirroring the light-mode
+     #00000020 (translucent dark). Blends over any dark surface (bg, card,
+     input) instead of being a fixed opaque gray. */
 
   /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
   --bgl-primary: #4f7cff !important;
   --bgl-primary-tint: #4f7cff33;
   --bgl-primary-light: #1a2236;
 
+  /* ---- Status / accent colors (tuned for dark backgrounds) ------------- *
+	 * The light-mode bases (e.g. blue #2e5bff, green #75c98f, red #ed6c6f,
+	 * yellow #ffbb00) are either too dark/saturated or too pastel to read well
+	 * on a dark surface. Shift them lighter and slightly desaturated so they
+	 * pop against the dark UI without glowing. Tints follow the same hue at low
+	 * opacity for soft fills/badges. */
+  --bgl-blue: #5b8cff;
+  --bgl-blue-tint: rgba(91, 140, 255, 0.18);
+  --bgl-green: #5dd49b;
+  --bgl-green-tint: rgba(93, 212, 155, 0.18);
+  --bgl-red: #f47174;
+  --bgl-red-tint: rgba(244, 113, 116, 0.18);
+  --bgl-yellow: #ffc94d;
+  --bgl-yellow-tint: rgba(255, 201, 77, 0.18);
+
   /* ---- Surfaces / backgrounds ------------------------------------------ */
   --bgl-bg: var(--bgl-dm-bg);
   --bgl-box-bg: var(--bgl-dm-surface);
@@ -121,6 +143,57 @@
   --bgl-gray-10: color-mix(in oklab, white 4%, var(--bgl-dm-surface));
   --bgl-gray-20: color-mix(in oklab, white 8%, var(--bgl-dm-surface));
   --bgl-gray-30: color-mix(in oklab, white 13%, var(--bgl-dm-surface));
+  /* Mid/high end of the scale: in light mode these go DARKER as the number
+     rises (gray-80 ≈ a strong gray used for lines/dividers). On dark they must
+     instead get LIGHTER so "higher number = more contrast vs the surface"
+     still holds — otherwise gray-80 lines vanish on the dark background.
+     Fixes calendar hour-lines and any other gray-40..90 separators at once. */
+  --bgl-gray-40: color-mix(in oklab, white 18%, var(--bgl-dm-surface));
+  --bgl-gray-50: color-mix(in oklab, white 24%, var(--bgl-dm-surface));
+  --bgl-gray-60: color-mix(in oklab, white 32%, var(--bgl-dm-surface));
+  --bgl-gray-70: color-mix(in oklab, white 42%, var(--bgl-dm-surface));
+  --bgl-gray-80: color-mix(in oklab, white 54%, var(--bgl-dm-surface));
+  --bgl-gray-90: color-mix(in oklab, white 70%, var(--bgl-dm-surface));
+
+  /* ---- Colored tint scale (10/20/30) ----------------------------------- *
+   * In light mode --bgl-{color}-10/20/30 are near-white pastel washes (e.g.
+   * green-30 = 70% white + green) used as soft fills — chat bubbles, badges,
+   * highlighted rows. On a dark UI those pale pastels glow and force dark text
+   * to be unreadable. Remap each to a low-opacity wash of its OWN base color
+   * OVER the dark surface, so the fill stays subtly colored but dark, and the
+   * light text token reads on top. Higher number = a touch more color.
+   * Because these sit in the high-specificity :root.bgl-dark-mode block, they
+   * also override any project that hard-sets e.g. --bgl-blue-30 in :root.    */
+  --bgl-blue-10: color-mix(in oklab, var(--bgl-blue) 10%, var(--bgl-dm-surface));
+  --bgl-blue-20: color-mix(in oklab, var(--bgl-blue) 16%, var(--bgl-dm-surface));
+  --bgl-blue-30: color-mix(in oklab, var(--bgl-blue) 24%, var(--bgl-dm-surface));
+  --bgl-green-10: color-mix(in oklab, var(--bgl-green) 10%, var(--bgl-dm-surface));
+  --bgl-green-20: color-mix(in oklab, var(--bgl-green) 16%, var(--bgl-dm-surface));
+  --bgl-green-30: color-mix(in oklab, var(--bgl-green) 24%, var(--bgl-dm-surface));
+  --bgl-red-10: color-mix(in oklab, var(--bgl-red) 10%, var(--bgl-dm-surface));
+  --bgl-red-20: color-mix(in oklab, var(--bgl-red) 16%, var(--bgl-dm-surface));
+  --bgl-red-30: color-mix(in oklab, var(--bgl-red) 24%, var(--bgl-dm-surface));
+  --bgl-yellow-10: color-mix(in oklab, var(--bgl-yellow) 10%, var(--bgl-dm-surface));
+  --bgl-yellow-20: color-mix(in oklab, var(--bgl-yellow) 16%, var(--bgl-dm-surface));
+  --bgl-yellow-30: color-mix(in oklab, var(--bgl-yellow) 24%, var(--bgl-dm-surface));
+  --bgl-purple-10: color-mix(in oklab, var(--bgl-purple) 10%, var(--bgl-dm-surface));
+  --bgl-purple-20: color-mix(in oklab, var(--bgl-purple) 16%, var(--bgl-dm-surface));
+  --bgl-purple-30: color-mix(in oklab, var(--bgl-purple) 24%, var(--bgl-dm-surface));
+  --bgl-brown-10: color-mix(in oklab, var(--bgl-brown) 10%, var(--bgl-dm-surface));
+  --bgl-brown-20: color-mix(in oklab, var(--bgl-brown) 16%, var(--bgl-dm-surface));
+  --bgl-brown-30: color-mix(in oklab, var(--bgl-brown) 24%, var(--bgl-dm-surface));
+  --bgl-orange-10: color-mix(in oklab, var(--bgl-orange) 10%, var(--bgl-dm-surface));
+  --bgl-orange-20: color-mix(in oklab, var(--bgl-orange) 16%, var(--bgl-dm-surface));
+  --bgl-orange-30: color-mix(in oklab, var(--bgl-orange) 24%, var(--bgl-dm-surface));
+  --bgl-turquoise-10: color-mix(in oklab, var(--bgl-turquoise) 10%, var(--bgl-dm-surface));
+  --bgl-turquoise-20: color-mix(in oklab, var(--bgl-turquoise) 16%, var(--bgl-dm-surface));
+  --bgl-turquoise-30: color-mix(in oklab, var(--bgl-turquoise) 24%, var(--bgl-dm-surface));
+  --bgl-pink-10: color-mix(in oklab, var(--bgl-pink) 10%, var(--bgl-dm-surface));
+  --bgl-pink-20: color-mix(in oklab, var(--bgl-pink) 16%, var(--bgl-dm-surface));
+  --bgl-pink-30: color-mix(in oklab, var(--bgl-pink) 24%, var(--bgl-dm-surface));
+  --bgl-primary-10: color-mix(in oklab, var(--bgl-primary) 10%, var(--bgl-dm-surface));
+  --bgl-primary-20: color-mix(in oklab, var(--bgl-primary) 16%, var(--bgl-dm-surface));
+  --bgl-primary-30: color-mix(in oklab, var(--bgl-primary) 24%, var(--bgl-dm-surface));
 }
 
 /* Native form controls (date/time pickers) render dark glyphs that are
@@ -156,6 +229,25 @@
   border-color: var(--bgl-dm-border);
 }
 
+/* .pair-white (e.g. <Btn color="white">) and .pair-gray are neutral/secondary
+   fills on light UIs (literal white / a light #b7b7b7 gray). On dark they stay
+   glaring light blocks, so for the FILLED variant turn them into a raised dark
+   surface with light text and a hairline border (a proper secondary button).
+   Flat pills and border pills keep their own treatment (they only tint text /
+   outline, not the fill), so we exclude them. */
+.bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border),
+.bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border) {
+  background-color: var(--bgl-dm-surface-2);
+  color: var(--bgl-dm-text);
+  border-color: var(--bgl-dm-border);
+}
+/* Hover/active on the dark secondary button: lift one step instead of the
+   default lighten-filter which would wash the light original out. */
+.bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border):hover,
+.bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border):hover {
+  background-color: color-mix(in oklab, white 8%, var(--bgl-dm-surface-2));
+}
+
 /* ----------------------------------------------------------------------------
  * Absolute color utilities (bg-white / bg-black …)
  * ----------------------------------------------------------------------------