@bagelink/vue 1.15.61 → 1.15.65

package/src/components/layout/SidebarNavItem.vue

@@ -13,8 +13,10 @@ interface LinkWithAction extends NavLink {
 
 const props = withDefaults(defineProps<{
 	link: LinkWithAction
-	/** sidebar is expanded (true) or collapsed to icons (false) */
+	/** sidebar is visually expanded (stays true during the collapse transition) */
 	open: boolean
+	/** real open state — flips immediately when the user toggles the sidebar */
+	realOpen?: boolean
 	isMobile: boolean
 	bgColor: string
 	textColor: string
@@ -45,6 +47,16 @@ const isActive = computed(() => selfActive.value || (hasChildren.value && childA
 const expanded = ref(childActive.value)
 watch(childActive, v => { if (v) expanded.value = true })
 
+// Collapse the open child group smoothly *before* the layout switches to the
+// icon-only flyout, so parents don't jump up when the sidebar narrows. We watch
+// `realOpen` (which flips immediately on toggle) rather than `open` (which stays
+// true throughout the width transition), so the grid-rows collapse animation runs
+// in sync with the sidebar narrowing instead of snapping at the end.
+watch(() => props.realOpen, (isOpenNow) => {
+	if (isOpenNow) expanded.value = childActive.value
+	else expanded.value = false
+})
+
 function onParentClick() {
 	if (hasChildren.value) expanded.value = !expanded.value
 	else props.link.action?.()
@@ -71,11 +83,10 @@ function onParentClick() {
 	<!-- 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 }"
+			fullWidth alignTxt="start" flat class="flex-shrink-0 px-075 sidebar-group-toggle txt-start sidebar-parent"
+			:class="{ 'sidebar-parent-active bold': isActive }"
 			:style="{
-				backgroundColor: isActive ? activeColor : bgColor,
-				color: isActive ? 'white' : textColor,
+				color: isActive ? activeColor : textColor,
 			}"
 			@click="onParentClick"
 		>
@@ -84,19 +95,22 @@ function onParentClick() {
 			<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 class="sidebar-children-inner ps-1">
+				<Btn
+					v-for="child in link.children" :key="child.to || child.label"
+					fullWidth alignTxt="start"  class="flex-shrink-0 ps-075 pe-075 sidebar-child"
+					:class="{ 'bold sidebar-child-active': linkActive(child) }"
+					:style="{
+						color: linkActive(child) ? activeColor : textColor,
+						'--sidebar-active-color': activeColor,
+					}"
+					flat
+					: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>
 	</div>
 
@@ -105,6 +119,7 @@ function onParentClick() {
 		v-else
 		placement="right-start"
 		:triggers="['hover']"
+		:delay="{ show: 0, hide: 200 }"
 		card
 		class="w100p sidebar-flyout-trigger"
 	>
@@ -122,15 +137,15 @@ function onParentClick() {
 			</Btn>
 		</template>
 		<!-- flyout content -->
-		<div class="sidebar-flyout p-05">
-			<p class="sidebar-flyout-label">{{ resolveI18n(link.label) }}</p>
+		<div class="sidebar-flyout p-05 min-w-180px display-flex gap-025 column">
+			<p class="sidebar-flyout-label m-0 semi opacity-5 uppercase">{{ 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) }"
+				fullWidth alignTxt="start" thin flat class="flex-shrink-0 px-075 radius-1 sidebar-child"
+				:class="{ 'bold sidebar-child-active': linkActive(child) }"
 				:style="{
-					backgroundColor: linkActive(child) ? activeColor : 'transparent',
-					color: linkActive(child) ? 'white' : 'var(--bgl-text-color)',
+					color: linkActive(child) ? activeColor : 'var(--bgl-text-color)',
+					'--sidebar-active-color': activeColor,
 				}"
 				:to="child.to || '/'" @click="child.action"
 			>
@@ -148,39 +163,65 @@ function onParentClick() {
 	opacity: 0.6;
 }
 .sidebar-chevron-open {
-	transform: rotate(180deg);
+	transform: rotate(180deg)!important;
 }
 .sidebar-children {
 	display: grid;
 	grid-template-rows: 0fr;
-	transition: grid-template-rows 0.25s ease;
+	transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 	overflow: hidden;
 }
 .sidebar-children-open {
 	grid-template-rows: 1fr;
 }
-.sidebar-children > * {
+.sidebar-children-inner {
 	min-height: 0;
-}
-.sidebar-child {
-	font-size: 0.85rem;
-}
-.sidebar-flyout {
-	min-width: 180px;
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: 0.125rem;
 }
+.sidebar-children-open .sidebar-children-inner {
+	padding-block: 0.25rem;
+}
+/* Parent toggle — flat <Btn> with no color prop picks up a default `pair-black`
+   background; neutralize it so the active parent shows only colored text/icon. */
+.sidebar-parent.bgl_btn {
+	background-color: transparent !important;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+.sidebar-parent.bgl_btn:hover {
+	background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
+	filter: none;
+}
+
 .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>
+
+<!-- Global (un-scoped) so the same child styling also applies inside the flyout,
+     which is teleported to <body> and therefore outside this component's scope. -->
+<style>
+.sidebar-child {
+	font-size: 0.85rem;
+	position: relative;
+	transition: background-color 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
+}
+/* Neutralize the default `pair-black` background a flat <Btn> picks up when no
+   color prop is set, so we can control the child background ourselves. */
+.sidebar-child.bgl_btn {
+	background-color: transparent !important;
+}
+/* Active child — filled with a subtle tint of the active color. */
+.sidebar-child.bgl_btn.sidebar-child-active,
+.sidebar-child.bgl_btn.sidebar-child-active:hover {
+	background-color: color-mix(in srgb, var(--sidebar-active-color) 14%, transparent) !important;
+}
+
+/* Hover indication for children (mirrors the parent feel) */
+.sidebar-child.bgl_btn:hover {
+	background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
+	filter: none;
 }
 </style>

package/src/components/layout/Timeline.types.ts

@@ -0,0 +1,9 @@
+import type { IconType, ThemeType } from '@bagelink/vue'
+
+export interface TimelineEntry {
+	title?: string
+	meta?: string
+	icon?: IconType
+	color?: ThemeType
+	[key: string]: any
+}

package/src/components/layout/Timeline.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglTimeline' })
+import { useSlots } from 'vue'
+import type { TimelineEntry } from './Timeline.types'
+import TimelineItem from './TimelineItem.vue'
+
+/**
+ * Vertical activity / history feed. Two ways to use it:
+ *
+ * 1. Data-driven — pass `items`; each maps to a <TimelineItem>. Use the default
+ *    scoped slot to render custom body content per entry:
+ *      <Timeline :items="activity">
+ *        <template #default="{ item }">{{ item.title }}</template>
+ *      </Timeline>
+ *
+ * 2. Composition — drop <TimelineItem> children directly (omit `items`). Mark the
+ *    last one with `last` to drop its connector, or let data-driven mode do it.
+ */
+const { items = [] } = defineProps<{
+	items?: TimelineEntry[]
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+	<div class="bgl-timeline grid">
+		<template v-if="items.length">
+			<TimelineItem
+				v-for="(item, i) in items"
+				:key="i"
+				:title="item.title"
+				:meta="item.meta"
+				:icon="item.icon"
+				:color="item.color"
+				:last="i === items.length - 1"
+			>
+				<template v-if="slots.default" #default>
+					<slot :item="item" :index="i" />
+				</template>
+				<template v-if="slots.meta" #meta>
+					<slot name="meta" :item="item" :index="i" />
+				</template>
+			</TimelineItem>
+		</template>
+		<slot v-else name="items" />
+	</div>
+</template>
+
+<style scoped>
+.bgl-timeline {
+	align-content: start;
+}
+</style>

package/src/components/layout/TimelineItem.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglTimelineItem' })
+import type { IconType, ThemeType } from '@bagelink/vue'
+import { Icon } from '@bagelink/vue'
+import { useSlots } from 'vue'
+
+/**
+ * One node in a <Timeline>: a marker (icon dot or plain dot) with a connecting
+ * line, a title, optional meta line, and free content via the default slot.
+ * - `icon` renders inside the dot; otherwise a small solid dot is shown.
+ * - `color` themes the dot (and icon).
+ * - `last` removes the connector line (auto-handled by <Timeline>).
+ * - Slots: `#marker` (replace the dot), `#meta`, default (body).
+ */
+const {
+	title = '',
+	meta = '',
+	icon,
+	color = 'primary',
+	last = false,
+} = defineProps<{
+	title?: string
+	meta?: string
+	icon?: IconType
+	color?: ThemeType
+	last?: boolean
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+	<div class="bgl-tl-item flex gap-075" :class="{ 'bgl-tl-item--last': last }">
+		<div class="bgl-tl-rail flex-column align-items-center flex-shrink-0">
+			<span class="bgl-tl-marker flex-center" :style="{ '--tl-color': `var(--bgl-${color})` }">
+				<slot name="marker">
+					<Icon v-if="icon" :icon="icon" :size="0.85" />
+					<span v-else class="bgl-tl-dot" />
+				</slot>
+			</span>
+			<span v-if="!last" class="bgl-tl-line" />
+		</div>
+		<div class="bgl-tl-body min-w-0">
+			<p v-if="title || slots.title" class="bgl-tl-title m-0"><slot name="title">{{ title }}</slot></p>
+			<div v-if="slots.default" class="bgl-tl-content"><slot /></div>
+			<p v-if="meta || slots.meta" class="bgl-tl-meta m-0"><slot name="meta">{{ meta }}</slot></p>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-tl-item {
+	min-height: 1.75rem;
+}
+.bgl-tl-marker {
+	width: 1.625rem;
+	height: 1.625rem;
+	border-radius: 50%;
+	background: color-mix(in srgb, var(--tl-color) 15%, transparent);
+	color: var(--tl-color);
+}
+.bgl-tl-dot {
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	background: var(--tl-color);
+}
+.bgl-tl-line {
+	width: 2px;
+	flex: 1;
+	background: var(--bgl-border-color);
+	margin: 2px 0;
+}
+.bgl-tl-body {
+	padding-bottom: 1rem;
+}
+.bgl-tl-item--last .bgl-tl-body {
+	padding-bottom: 0;
+}
+.bgl-tl-title {
+	font-size: 0.875rem;
+	line-height: 1.3;
+}
+.bgl-tl-meta {
+	font-size: 0.6875rem;
+	color: var(--bgl-text-soft, var(--bgl-gray));
+	margin-top: 0.125rem;
+}
+.bgl-tl-content {
+	font-size: 0.8125rem;
+	color: var(--bgl-text-soft, var(--bgl-gray));
+}
+</style>

package/src/components/layout/index.ts

@@ -12,5 +12,8 @@ export { default as SidebarMenu } from './SidebarMenu.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export { default as TabbedLayout } from './TabbedLayout.vue'
 export { default as Tabs } from './Tabs.vue'
+export { default as Timeline } from './Timeline.vue'
+export type { TimelineEntry } from './Timeline.types'
+export { default as TimelineItem } from './TimelineItem.vue'
 export { default as TabsBody } from './TabsBody.vue'
 export { default as TabsNav } from './TabsNav.vue'

package/src/dialog/Dialog.vue

@@ -19,6 +19,9 @@ const props = withDefaults(defineProps<{
 	centerTitle?: boolean
 	ellipsisTitle?: boolean
 	closePlacement?: 'header-end' | 'header-start' | 'overlay-start' | 'overlay-end' | 'none'
+	/** Show a drag-handle grip at the top — the mobile bottom-sheet affordance.
+	 *  Defaults to true when position="bottom". Set false to opt out. */
+	grip?: boolean
 }>(), {
 	width: 'm',
 	position: 'center',
@@ -27,9 +30,13 @@ const props = withDefaults(defineProps<{
 	thin: false,
 	centerTitle: false,
 	ellipsisTitle: false,
-	closePlacement: 'header-end'
+	closePlacement: 'header-end',
+	grip: undefined,
 })
 
+// Grip is the native bottom-sheet handle; default it on for bottom-positioned dialogs.
+const showGrip = computed(() => props.grip ?? props.position === 'bottom')
+
 const emit = defineEmits<{
 	'update:open': [value: boolean]
 	'close': []
@@ -114,6 +121,8 @@ defineExpose({ close })
 		@cancel="onCancel" @animationend="onAnimationEnd"
 	>
 		<div class="grid grid-dialog max-height-100-2" @click.stop>
+			<!-- Bottom-sheet grip handle -->
+			<div v-if="showGrip" class="dialog-grip" aria-hidden="true" />
 			<!-- Header -->
 			<header
 				v-if="title || dismissable" class="flex space-between flex-shrink-0 align-items-start gap-05"
@@ -261,6 +270,25 @@ dialog.dialog-bottom.is-closing {
 animation: slide-out-bottom 0.2s ease-in forwards;
 }
 
+/* Bottom sheet: round only the top corners + full-width on mobile. */
+dialog.dialog-bottom {
+	border-end-end-radius: 0;
+	border-end-start-radius: 0;
+}
+@media (max-width: 910px) {
+	dialog.dialog-bottom { width: 100%; max-width: 100%; margin-inline: 0; }
+}
+
+/* Drag-handle grip for bottom sheets. */
+.dialog-grip {
+	width: 40px;
+	height: 4px;
+	border-radius: 100px;
+	background: var(--bgl-border-color);
+	margin: 8px auto 4px;
+	flex-shrink: 0;
+}
+
 /* Keyframes - shared and reusable */
 @keyframes fade-in {
 from {

package/src/styles/bagel.css

@@ -33,6 +33,7 @@
 @import "colors.css";
 @import "mobileColors.css";
 @import "appearance.css";
+@import "gradients.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/dark.css

@@ -80,6 +80,10 @@
   --bgl-skeleton-bg: var(--bgl-dm-surface-2);
   --bgl-skeleton-pulse: var(--bgl-dm-surface);
   --bgl-gray-light: var(--bgl-dm-surface-2);
+  /* --bgl-gray (#b7b7b7 in light) is used directly by color-gray / bg-gray and
+     as a neutral mid tone. On dark, keep it a readable mid-gray so color-gray
+     text stays legible; bg-gray fills get a dedicated darker treatment below. */
+  --bgl-gray: #8b8f96;
 
   /* ---- Text ------------------------------------------------------------- */
   --bgl-text-color: var(--bgl-dm-text);
@@ -269,6 +273,15 @@
   color: var(--bgl-dm-text);
 }
 
+/* bg-gray is a solid light-gray (#b7b7b7) fill in light mode — used as a
+   neutral surface. On dark it becomes a bright patch, so remap it to a raised
+   dark surface (one step up from the card) like the other neutral fills. */
+.bgl-dark-mode .bg-gray:not(.keep-white) {
+  background: var(--bgl-dm-surface-2) !important;
+  --alpha-color: var(--bgl-dm-surface-2);
+  color: var(--bgl-dm-text);
+}
+
 .bgl-dark-mode .bg-input-white:not(.keep-white) input,
 .bgl-dark-mode .bg-input-white:not(.keep-white) textarea,
 .bgl-dark-mode .bg-input-white:not(.keep-white) .selectinput-btn,

package/src/styles/gradients.css

@@ -0,0 +1,181 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+ * GRADIENTS — a small, memorable system that mirrors the color utilities.
+ *
+ *   <div class="bg-gradient from-purple to-blue">
+ *   <div class="bg-gradient to-tr from-pink to-orange">
+ *   <div class="bg-gradient from-primary via-purple to-turquoise">
+ *   <div class="text-gradient from-blue to-purple">Gorgeous</div>
+ *   <div class="bg-gradient-brand">           (named presets)
+ *
+ * How it works:
+ *  - `from-<tone>` / `via-<tone>` / `to-<tone>` set --bgl-grad-from/via/to.
+ *  - `bg-gradient` paints them as a linear gradient (default 135°).
+ *  - direction modifiers (to-t/-b/-l/-r/-tl/-tr/-bl/-br) override the angle.
+ *  - `gradient-radial` / `gradient-conic` swap the gradient type.
+ *  - `text-gradient` clips the gradient to text.
+ * Tokens resolve through var(--bgl-<tone>) so everything is theme + dark aware.
+ * ──────────────────────────────────────────────────────────────────────────── */
+
+:root {
+	--bgl-grad-angle: 135deg;
+	--bgl-grad-from: transparent;
+	--bgl-grad-via: ;
+	--bgl-grad-to: transparent;
+}
+
+/* ── Paint ─────────────────────────────────────────────────────────────────── */
+/* The stop list collapses to 2 stops when --bgl-grad-via is empty, 3 when set. */
+.bg-gradient {
+	background-image: linear-gradient(
+		var(--bgl-grad-angle),
+		var(--bgl-grad-from),
+		var(--bgl-grad-via, ) var(--bgl-grad-to)
+	) !important;
+}
+.gradient-radial.bg-gradient,
+.bg-gradient.gradient-radial {
+	background-image: radial-gradient(
+		circle at var(--bgl-grad-pos, center),
+		var(--bgl-grad-from),
+		var(--bgl-grad-via, ) var(--bgl-grad-to)
+	) !important;
+}
+.gradient-conic.bg-gradient,
+.bg-gradient.gradient-conic {
+	background-image: conic-gradient(
+		from var(--bgl-grad-angle),
+		var(--bgl-grad-from),
+		var(--bgl-grad-via, ) var(--bgl-grad-to)
+	) !important;
+}
+
+/* ── Direction modifiers ───────────────────────────────────────────────────── */
+.to-t  { --bgl-grad-angle: to top; }
+.to-b  { --bgl-grad-angle: to bottom; }
+.to-l  { --bgl-grad-angle: to left; }
+.to-r  { --bgl-grad-angle: to right; }
+.to-tl { --bgl-grad-angle: to top left; }
+.to-tr { --bgl-grad-angle: to top right; }
+.to-bl { --bgl-grad-angle: to bottom left; }
+.to-br { --bgl-grad-angle: to bottom right; }
+
+/* ── Text gradient ─────────────────────────────────────────────────────────── */
+.text-gradient {
+	background-image: linear-gradient(
+		var(--bgl-grad-angle),
+		var(--bgl-grad-from),
+		var(--bgl-grad-via, ) var(--bgl-grad-to)
+	);
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	-webkit-text-fill-color: transparent;
+}
+
+/* ── Stop utilities (generated per tone) ───────────────────────────────────── */
+/* Base tones */
+.from-primary   { --bgl-grad-from: var(--bgl-primary); }
+.from-blue      { --bgl-grad-from: var(--bgl-blue); }
+.from-green     { --bgl-grad-from: var(--bgl-green); }
+.from-red       { --bgl-grad-from: var(--bgl-red); }
+.from-yellow    { --bgl-grad-from: var(--bgl-yellow); }
+.from-purple    { --bgl-grad-from: var(--bgl-purple); }
+.from-brown     { --bgl-grad-from: var(--bgl-brown); }
+.from-orange    { --bgl-grad-from: var(--bgl-orange); }
+.from-turquoise { --bgl-grad-from: var(--bgl-turquoise); }
+.from-pink      { --bgl-grad-from: var(--bgl-pink); }
+.from-gray      { --bgl-grad-from: var(--bgl-gray); }
+.from-black     { --bgl-grad-from: var(--bgl-black, #000); }
+.from-white     { --bgl-grad-from: var(--bgl-white, #fff); }
+.from-bg        { --bgl-grad-from: var(--bgl-bg); }
+.from-box       { --bgl-grad-from: var(--bgl-box-bg); }
+.from-transparent { --bgl-grad-from: transparent; }
+
+.via-primary   { --bgl-grad-via: var(--bgl-primary), ; }
+.via-blue      { --bgl-grad-via: var(--bgl-blue), ; }
+.via-green     { --bgl-grad-via: var(--bgl-green), ; }
+.via-red       { --bgl-grad-via: var(--bgl-red), ; }
+.via-yellow    { --bgl-grad-via: var(--bgl-yellow), ; }
+.via-purple    { --bgl-grad-via: var(--bgl-purple), ; }
+.via-brown     { --bgl-grad-via: var(--bgl-brown), ; }
+.via-orange    { --bgl-grad-via: var(--bgl-orange), ; }
+.via-turquoise { --bgl-grad-via: var(--bgl-turquoise), ; }
+.via-pink      { --bgl-grad-via: var(--bgl-pink), ; }
+.via-gray      { --bgl-grad-via: var(--bgl-gray), ; }
+.via-transparent { --bgl-grad-via: transparent, ; }
+
+.to-primary   { --bgl-grad-to: var(--bgl-primary); }
+.to-blue      { --bgl-grad-to: var(--bgl-blue); }
+.to-green     { --bgl-grad-to: var(--bgl-green); }
+.to-red       { --bgl-grad-to: var(--bgl-red); }
+.to-yellow    { --bgl-grad-to: var(--bgl-yellow); }
+.to-purple    { --bgl-grad-to: var(--bgl-purple); }
+.to-brown     { --bgl-grad-to: var(--bgl-brown); }
+.to-orange    { --bgl-grad-to: var(--bgl-orange); }
+.to-turquoise { --bgl-grad-to: var(--bgl-turquoise); }
+.to-pink      { --bgl-grad-to: var(--bgl-pink); }
+.to-gray      { --bgl-grad-to: var(--bgl-gray); }
+.to-black     { --bgl-grad-to: var(--bgl-black, #000); }
+.to-white     { --bgl-grad-to: var(--bgl-white, #fff); }
+.to-bg        { --bgl-grad-to: var(--bgl-bg); }
+.to-box       { --bgl-grad-to: var(--bgl-box-bg); }
+.to-transparent { --bgl-grad-to: transparent; }
+
+/* Common tint/light/dark stops (compose with from-/to-) */
+.from-primary-tint { --bgl-grad-from: var(--bgl-primary-tint); }
+.to-primary-tint   { --bgl-grad-to: var(--bgl-primary-tint); }
+.from-blue-tint    { --bgl-grad-from: var(--bgl-blue-tint); }
+.to-blue-tint      { --bgl-grad-to: var(--bgl-blue-tint); }
+
+/* ── Named presets — the gorgeous, copy-pasted brand sweeps, tokenized ──────── */
+.bg-gradient-brand {
+	background-image: linear-gradient(135deg, var(--bgl-primary), var(--bgl-purple)) !important;
+}
+.bg-gradient-sunset {
+	background-image: linear-gradient(135deg, var(--bgl-orange), var(--bgl-pink)) !important;
+}
+.bg-gradient-ocean {
+	background-image: linear-gradient(135deg, var(--bgl-blue), var(--bgl-turquoise)) !important;
+}
+.bg-gradient-dusk {
+	background-image: linear-gradient(135deg, var(--bgl-purple), var(--bgl-blue)) !important;
+}
+.bg-gradient-citrus {
+	background-image: linear-gradient(135deg, var(--bgl-yellow), var(--bgl-orange)) !important;
+}
+/* Subtle surface sweep for cards/panels — dark-mode aware via tokens. */
+.bg-gradient-surface {
+	background-image: linear-gradient(160deg,
+		color-mix(in srgb, var(--bgl-box-bg) 100%, transparent),
+		color-mix(in srgb, var(--bgl-primary) 6%, var(--bgl-box-bg))) !important;
+}
+/* Multi-radial "mesh" hero background built from the brand palette. */
+.bg-gradient-mesh {
+	background-color: var(--bgl-box-bg) !important;
+	background-image:
+		radial-gradient(at 0% 0%, color-mix(in srgb, var(--bgl-primary) 35%, transparent) 0px, transparent 50%),
+		radial-gradient(at 100% 0%, color-mix(in srgb, var(--bgl-purple) 30%, transparent) 0px, transparent 50%),
+		radial-gradient(at 100% 100%, color-mix(in srgb, var(--bgl-turquoise) 25%, transparent) 0px, transparent 50%),
+		radial-gradient(at 0% 100%, color-mix(in srgb, var(--bgl-pink) 25%, transparent) 0px, transparent 50%) !important;
+}
+
+/* Soft fade for chart/sparkline fills: tone at top → transparent. Pair with a
+   from-<tone> and a direction, e.g. `bg-gradient-fade to-b from-blue`. */
+.bg-gradient-fade {
+	--bgl-grad-to: transparent;
+	background-image: linear-gradient(var(--bgl-grad-angle),
+		color-mix(in srgb, var(--bgl-grad-from) 22%, transparent),
+		transparent) !important;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.bg-gradient-animate {
+		background-size: 200% 200% !important;
+		animation: bgl-grad-pan 8s ease infinite;
+	}
+}
+@keyframes bgl-grad-pan {
+	0% { background-position: 0% 50%; }
+	50% { background-position: 100% 50%; }
+	100% { background-position: 0% 50%; }
+}

package/src/styles/layout.css

@@ -3949,6 +3949,15 @@
     flex-shrink: 0;
 }
 
+.min-w-0 {
+    /* shrink below content size for ellipsis truncation in flex rows */
+    min-width: 0;
+}
+
+.min-h-0 {
+    min-height: 0;
+}
+
 .flex-grow-2 {
     flex-grow: 2;
 }