@bagelink/vue 1.15.61 → 1.15.65

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.61",
+  "version": "1.15.65",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,6 +90,7 @@
   "scripts": {
     "dev": "tsx watch src/index.ts",
     "build": "vite build",
+    "gen:cheatsheet": "tsx scripts/gen-cheatsheet.ts",
     "start": "tsx src/index.ts"
   }
 }

package/src/components/AccordionItem.vue

@@ -72,7 +72,7 @@ function toggle() {
 				v-if="iconPosition === 'start'" class="accordion-icon"
 				:class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
 			>
-				<Icon :icon="computedIcon" />
+				<Icon :icon="computedIcon" transition="scale" />
 			</span>
 
 			<slot name="head">
@@ -85,17 +85,17 @@ function toggle() {
 				v-if="iconPosition === 'end'" class="accordion-icon"
 				:class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
 			>
-				<Icon :icon="computedIcon" />
+				<Icon :icon="computedIcon" transition="scale" />
 			</span>
 		</button>
-		<Transition name="expand">
-			<div
-				v-if="isOpen" :id="`accordion-body-${id}`" class="accordion-body"
-				:aria-hidden="isOpen ? 'false' : 'true'"
-			>
+		<div
+			:id="`accordion-body-${id}`" class="accordion-body"
+			:class="{ open: isOpen }" :aria-hidden="isOpen ? 'false' : 'true'"
+		>
+			<div class="accordion-body-inner">
 				<slot />
 			</div>
-		</Transition>
+		</div>
 	</div>
 </template>
 
@@ -149,24 +149,26 @@ border-bottom: none
 text-decoration: underline;
 }
 
-</style>
-
-<style>
-
-.expand-enter-active,
-.expand-leave-active {
-transition: all 0.2s;
-transition-delay: 0ms;
+/* Height animation via grid-template-rows 0fr -> 1fr. Unlike a fixed max-height,
+   this animates to the content's natural height with no cap (no clipping on long
+   bodies) and no JS measurement. The inner wrapper needs min-height:0 + overflow
+   hidden so it can collapse fully. */
+.accordion-body {
+display: grid;
+grid-template-rows: 0fr;
+transition: grid-template-rows 0.25s ease;
 }
 
-.expand-enter-from,
-.expand-leave-to {
-max-height: 0;
+.accordion-body.open {
+grid-template-rows: 1fr;
 }
 
-.expand-enter-to,
-.expand-leave-from {
-max-height: 300px;
+.accordion-body-inner {
+min-height: 0;
+overflow: hidden;
 }
 
+@media (prefers-reduced-motion: reduce) {
+.accordion-body { transition: none; }
+}
 </style>

package/src/components/Avatar.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-defineOptions({ name: 'BglAvatar' })
+// Forward consumer class/style/attrs to the inner (rounded, clipped) avatar
+// element rather than the positioning wrapper — otherwise a custom background
+// would render as a square behind the circle.
+defineOptions({ name: 'BglAvatar', inheritAttrs: false })
 import type { IconType, ThemeType } from '@bagelink/vue'
 import { initials, Icon } from '@bagelink/vue'
 import { computed } from 'vue'
@@ -16,8 +19,17 @@ const props = withDefaults(defineProps<{
 	square?: boolean | number
 	/** Theme color → tinted background + matching icon/text color (e.g. an icon chip). */
 	color?: ThemeType
+	/** Presence/status dot in the corner. `true` = green "online", or a ThemeType
+	    (e.g. 'gray' offline, 'orange' away, 'red' busy). */
+	status?: boolean | ThemeType
+	/** Accessible label / tooltip for the status dot. */
+	statusTitle?: string
 }>(), { size: 50 })
 
+const statusColor = computed(() => (props.status === true ? 'green' : props.status || null))
+// Dot scales with the avatar but stays within sane bounds.
+const dotSize = computed(() => Math.max(7, Math.min(14, Math.round(props.size * 0.28))))
+
 const radius = computed(() => {
 	if (!props.square) { return '1000px' } // circle (default)
 	if (props.square === true) { return 'var(--bgl-btn-border-radius)' }
@@ -25,32 +37,58 @@ const radius = computed(() => {
 })
 
 // When a theme color is given, tint the background and color the icon/initials.
+// Mix straight from the live --bgl-<color> so it always matches the foreground —
+// notably for `primary`, whose pre-baked --bgl-primary-tint token can resolve to a
+// different (default) hue when an app overrides --bgl-primary in a nested scope.
 const themed = computed(() => props.color
-	? { background: `var(--bgl-${props.color}-tint, color-mix(in srgb, var(--bgl-${props.color}) 14%, transparent))`, color: `var(--bgl-${props.color})`, border: 'none' }
+	? { background: `color-mix(in srgb, var(--bgl-${props.color}) 14%, transparent)`, color: `var(--bgl-${props.color})`, border: 'none' }
 	: {})
 </script>
 
 <template>
-	<div
-		class="overflow-hidden txt-center p-0 avatar flex justify-content-center align-items-center"
-		:style="{ width: `${size}px`, height: `${size}px`, borderRadius: radius, ...themed }"
-	>
-		<Image v-if="src" :src="src" :alt="alt || name" />
-		<Icon v-else-if="icon" :icon="icon" :size="size / 40" />
-		<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
-			{{ (fallback || initials(name || '')).toUpperCase() }}
-		</p>
+	<div class="avatar-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
+		<div
+			v-bind="$attrs"
+			class="overflow-hidden txt-center p-0 avatar flex justify-content-center align-items-center"
+			:style="{ width: `${size}px`, height: `${size}px`, borderRadius: radius, ...themed }"
+		>
+			<Image v-if="src" :src="src" :alt="alt || name" />
+			<Icon v-else-if="icon" :icon="icon" :size="size / 40" />
+			<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
+				{{ (fallback || initials(name || '')).toUpperCase() }}
+			</p>
+		</div>
+		<span
+			v-if="statusColor" class="avatar-status" :title="statusTitle"
+			:style="{ width: `${dotSize}px`, height: `${dotSize}px`, background: `var(--bgl-${statusColor})` }"
+		/>
 	</div>
 </template>
 
 <style scoped>
 
+.avatar-wrap {
+position: relative;
+flex-shrink: 0;
+display: inline-flex;
+}
+
 .avatar {
 background-color: var(--bgl-gray-tint);
 border: 0.5px solid var(--bgl-border-color);
 flex-shrink: 0;
 }
 
+/* Presence dot — sits over the bottom-trailing corner, ringed by the surface
+   color so it reads cleanly on any background. */
+.avatar-status {
+position: absolute;
+inset-block-end: 0;
+inset-inline-end: 0;
+border-radius: 50%;
+box-shadow: 0 0 0 2px var(--bgl-box-bg, #fff);
+}
+
 .avatar p {
 font-size: 1.5rem;
 line-height: 50px;

package/src/components/Badge.vue

@@ -55,12 +55,6 @@ const computedPairClass = computed(() => {
 	return `pair-${theme}`
 })
 
-// Dot uses the badge's theme color (strip any -light/-tint suffix for a solid dot).
-const dotColor = computed(() => {
-	const base = (computedTheme.value || 'primary').replace(/-(light|tint|10|20|30|40|50|60|70)$/, '')
-	return `var(--bgl-${base})`
-})
-
 const computedSize = computed(() => {
 	if (props.size) { return props.size }
 	if (props.sm) { return 'sm' }
@@ -105,7 +99,7 @@ const computedClasses = computed(() => {
 			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
 			<div class="px-025 flex gap-025 justify-content-center align-items-center" :class="{ 'opacity-0': loading }">
 				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
-				<span v-if="dot" class="bgl_pill-dot" :style="{ background: dotColor }" />
+				<span v-if="dot" class="bgl_pill-dot" />
 				<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">
@@ -138,6 +132,9 @@ width: 6px;
 height: 6px;
 border-radius: 50%;
 flex-shrink: 0;
+/* Use the badge's text color so the dot is always legible on both solid
+   (white text) and -light/-tint (tone text) variants. */
+background: currentColor;
 }
 .bgl_pill-btn{
 color: var(--bgl-pill-btn-color);

package/src/components/Card.vue

@@ -4,6 +4,11 @@ import { computed } from 'vue'
 
 const props = defineProps<{
 	label?: string
+	/** Card header title. Pairs with the `#header-action` slot (e.g. a "View all"
+	    button or a more-menu) to render a divided header row — replacing the common
+	    hand-rolled `<div class="flex space-between border-bottom">…</div>` pattern.
+	    For full control use the `#header` slot instead. */
+	title?: string
 	thin?: boolean
 	outline?: boolean
 	h100?: boolean
@@ -55,6 +60,13 @@ const is = computed(() => {
 		<span v-if="label" class="card_label">
 			{{ label }}
 		</span>
+		<!-- Header row: title + optional trailing action. Full override via #header. -->
+		<div v-if="$slots.header || title || $slots['header-action']" class="card_header flex space-between align-items-center">
+			<slot name="header">
+				<span class="card_header_title">{{ title }}</span>
+				<span class="card_header_action flex align-items-center gap-05"><slot name="header-action" /></span>
+			</slot>
+		</div>
 		<slot />
 	</component>
 </template>
@@ -74,6 +86,19 @@ 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
+   restores breathing room below. On a p-0 card the negative margins resolve to 0. */
+.card_header {
+margin: calc(var(--bgl-card-pad) * -1) calc(var(--bgl-card-pad) * -1) var(--bgl-card-pad);
+padding: 0.85rem var(--bgl-card-pad);
+border-bottom: 1px solid var(--bgl-border-color);
+min-height: 0;
+}
+.card_header_title {
+font-weight: 600;
+}
+
 .border .card_label {
 font-size: 0.7rem;
 font-weight: 300;
@@ -89,9 +114,10 @@ border-bottom: unset;
 }
 
 .bgl_card {
+--bgl-card-pad: 2rem;
 border-radius: var(--bgl-card-border-radius);
 background: var(--bgl-box-bg);
-padding: 2rem 2rem;
+padding: var(--bgl-card-pad);
 position: relative;
 }
 
@@ -105,8 +131,12 @@ background-color: transparent;
 }
 
 .bgl_card.thin {
-padding: 1rem 1rem;
+--bgl-card-pad: 1rem;
+padding: var(--bgl-card-pad);
 }
+/* When padding is stripped via the p-0 utility, the header supplies its own. */
+.bgl_card.p-0 { --bgl-card-pad: 0rem; }
+.bgl_card.p-0 .card_header { padding-inline: 1rem; padding-block: 0.75rem; margin-bottom: 0; }
 
 .bgl_card.BagelTable {
 height: 100%;

package/src/components/Dropdown.vue

@@ -482,10 +482,21 @@ animation: bgl-dropdown-enter 0.18s ease 0.04s both;
 transform-origin: top left;
 }
 
-/* Default menu breathing room so consumers don't wrap content in py-* just to
-   stop items touching the rounded edges. */
+/* Default menu breathing room so items don't touch the rounded top/bottom edges.
+   Applies to the card content itself so plain menu content (e.g. a list of Btns)
+   gets the same padding as content wrapped in a .bgl_card — no consumer py-* needed. */
 .bgl-dropdown__content--card {
-padding-block: 0.375rem;
+padding-block: 0.5rem;
+padding-inline: 0.375rem;
+}
+/* When the slot already provides a .bgl_card, that card owns the padding — drop
+   the container's own padding so the spacing isn't applied twice. */
+.bgl-dropdown__content--card:has(> .bgl_card) {
+padding: 0;
+}
+.bgl-dropdown__content--card .bgl_card{
+padding-block: 0.5rem;
+padding-inline: 0.375rem;
 }
 
 </style>

package/src/components/EmptyState.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglEmptyState' })
+import type { IconType } from '@bagelink/vue'
+import { Icon } from '@bagelink/vue'
+import { useSlots } from 'vue'
+import Btn from './Btn.vue'
+
+/**
+ * Placeholder for empty lists / no-results / zero states.
+ * - `icon` + `title` + `description` for the common case.
+ * - `actionLabel` (+ `to`/`href` or @action) renders a primary button.
+ * - Slots: `#icon`, default (body text), `#action` for full control.
+ * - `compact` for tight inline spots (table empties, small cards).
+ */
+const {
+	icon = 'inbox',
+	title = '',
+	description = '',
+	actionLabel = '',
+	actionIcon,
+	to,
+	href,
+	compact = false,
+	class: className = '',
+} = defineProps<{
+	icon?: IconType | 'none'
+	title?: string
+	description?: string
+	actionLabel?: string
+	actionIcon?: IconType
+	to?: string | Record<string, any>
+	href?: string
+	compact?: boolean
+	class?: string
+}>()
+
+const emit = defineEmits<{ action: [] }>()
+const slots = useSlots()
+</script>
+
+<template>
+	<div class="bgl-empty flex-column align-items-center justify-content-center txt-center" :class="[{ 'bgl-empty--compact': compact }, className]">
+		<div v-if="slots.icon || icon !== 'none'" class="bgl-empty-icon flex-center">
+			<slot name="icon"><Icon :icon="icon" :size="compact ? 1.6 : 2.2" /></slot>
+		</div>
+		<p v-if="title" class="bgl-empty-title m-0">{{ title }}</p>
+		<p v-if="description || slots.default" class="bgl-empty-desc m-0">
+			<slot>{{ description }}</slot>
+		</p>
+		<div v-if="slots.action || actionLabel" class="bgl-empty-action">
+			<slot name="action">
+				<Btn :color="'primary'" :thin="compact" :icon="actionIcon" :value="actionLabel" :to="to" :href="href" @click="emit('action')" />
+			</slot>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-empty {
+	gap: 0.75rem;
+	padding: 2.5rem 1.5rem;
+	color: var(--bgl-text-soft, var(--bgl-gray));
+}
+.bgl-empty--compact {
+	gap: 0.5rem;
+	padding: 1.25rem 1rem;
+}
+.bgl-empty-icon {
+	width: 3.5rem;
+	height: 3.5rem;
+	border-radius: 50%;
+	background: var(--bgl-gray-tint, color-mix(in srgb, var(--bgl-gray) 14%, transparent));
+	color: var(--bgl-gray);
+}
+.bgl-empty--compact .bgl-empty-icon {
+	width: 2.5rem;
+	height: 2.5rem;
+}
+.bgl-empty-title {
+	font-weight: 600;
+	font-size: 1rem;
+	color: var(--bgl-text-color, inherit);
+}
+.bgl-empty-desc {
+	font-size: 0.875rem;
+	max-width: 32ch;
+}
+.bgl-empty-action {
+	margin-top: 0.25rem;
+}
+</style>

package/src/components/Icon/Icon.vue

@@ -4,6 +4,9 @@ import { useDevice } from '@bagelink/vue'
 import { computed, ref, onMounted, watchEffect } from 'vue'
 import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
 
+type AnimateType = 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'slide-up' | 'rotate-in'
+type TransitionType = 'slide-up' | 'rotate' | 'scale' | 'fade'
+
 const props = withDefaults(defineProps<{
 	icon?: IconType
 	name?: IconType
@@ -14,8 +17,19 @@ const props = withDefaults(defineProps<{
 	weight?: number | string
 	fontAwesome?: boolean
 	fill?: boolean
+	/** Entrance / looping effect. Pure CSS, opt-in. e.g. `animate="spin"`. */
+	animate?: AnimateType
+	/** Seconds for one cycle of `animate` (spin/pulse/etc.). */
+	animateSpeed?: number
+	/** Play the `animate` effect once instead of looping. */
+	animateOnce?: boolean
+	/** Animate the glyph whenever the icon changes (e.g. a play/pause toggle).
+	    Defaults ON: pass `transition="rotate"` to pick a style, or
+	    `:transition="false"` to disable. */
+	transition?: boolean | TransitionType
 }>(), {
-	size: 1
+	size: 1,
+	transition: true,
 })
 
 const iconRender = computed(() => (props.icon ?? props.name) as IconType)
@@ -114,33 +128,56 @@ const isCurrentFontReady = computed(() => {
 	if (iconRenderType.value === 'material') { return isMaterialReady.value }
 	return isFaBrand.value ? isFABrandsReady.value : isFAFreeReady.value
 })
+
+// Entrance / loop animation class + timing.
+const animateClass = computed(() => (props.animate ? `bgl_icon--${props.animate}` : null))
+const animateStyle = computed(() => {
+	if (!props.animate) { return undefined }
+	const style: Record<string, string> = {}
+	if (props.animateSpeed !== undefined) { style.animationDuration = `${props.animateSpeed}s` }
+	if (props.animateOnce) { style.animationIterationCount = '1' }
+	return style
+})
+
+// Swap transition: animate whenever the glyph changes. `transition` true uses the
+// default style; a string picks one. The keyed inner span drives Vue's <Transition>.
+const transitionName = computed(() => {
+	// `bgl-icon-x-none` has no CSS defined, so the swap is instant when disabled.
+	if (props.transition === false) { return 'bgl-icon-x-none' }
+	const style = props.transition === true ? 'slide-up' : props.transition
+	return `bgl-icon-x-${style}`
+})
 </script>
 
 <template>
-	<span
-		v-if="iconRenderType === 'material'" class="bgl_icon-font notranslate"
-		:class="{ 'round flex aspect-ratio-1 justify-content-center': round }" :style="{
-			'fontSize': `${computedSize}rem`,
-			color,
-			'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
-			'width': round ? `calc(${computedSize}rem * 2)` : 'auto',
-			'height': round ? `calc(${computedSize}rem * 2)` : 'auto',
-			'visibility': isCurrentFontReady ? 'visible' : 'hidden',
-		}" translate="no"
-	>
-		{{ iconRender }}
-	</span>
-	<span
-		v-else-if="iconRenderType === 'font-awesome'" class="fa bgl_icon-font notranslate" :class="[
-			`fa-${iconRender}`,
-			{
-				'fa-brands': isFaBrand,
-				'fa-solid': fill,
-				'far': !fill && !isFaBrand,
-			},
-		]" :style="{ 'fontSize': `${computedSize}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}`, 'visibility': isCurrentFontReady ? 'visible' : 'hidden' }"
-		translate="no"
-	/>
+	<Transition :name="transitionName" mode="out-in">
+		<span
+			v-if="iconRenderType === 'material'" :key="iconRender" class="bgl_icon-font notranslate"
+			:class="[animateClass, { 'round flex aspect-ratio-1 justify-content-center': round }]" :style="{
+				'fontSize': `${computedSize}rem`,
+				color,
+				'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
+				'width': round ? `calc(${computedSize}rem * 2)` : 'auto',
+				'height': round ? `calc(${computedSize}rem * 2)` : 'auto',
+				'visibility': isCurrentFontReady ? 'visible' : 'hidden',
+				...animateStyle,
+			}" translate="no"
+		>
+			{{ iconRender }}
+		</span>
+		<span
+			v-else-if="iconRenderType === 'font-awesome'" :key="iconRender" class="fa bgl_icon-font notranslate" :class="[
+				`fa-${iconRender}`,
+				animateClass,
+				{
+					'fa-brands': isFaBrand,
+					'fa-solid': fill,
+					'far': !fill && !isFaBrand,
+				},
+			]" :style="{ 'fontSize': `${computedSize}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}`, 'visibility': isCurrentFontReady ? 'visible' : 'hidden', ...animateStyle }"
+			translate="no"
+		/>
+	</Transition>
 </template>
 
 <style>
@@ -166,6 +203,62 @@ const isCurrentFontReady = computed(() => {
 .bgl_icon-font.fa-brands {
 	font-family: 'Font Awesome 6 Brands', serif !important;
 }
+
+/* ── Entrance / loop animations (opt-in via `animate`) ─────────────────────── */
+.bgl_icon--spin,
+.bgl_icon--pulse,
+.bgl_icon--bounce { display: inline-block; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; }
+.bgl_icon--fade-in,
+.bgl_icon--slide-up,
+.bgl_icon--rotate-in { display: inline-block; animation-duration: 0.3s; animation-iteration-count: 1; animation-timing-function: ease; }
+
+.bgl_icon--spin { animation-name: bgl-icon-spin; }
+.bgl_icon--pulse { animation-name: bgl-icon-pulse; animation-timing-function: ease-in-out; }
+.bgl_icon--bounce { animation-name: bgl-icon-bounce; animation-timing-function: ease; }
+.bgl_icon--fade-in { animation-name: bgl-icon-fade-in; }
+.bgl_icon--slide-up { animation-name: bgl-icon-slide-up; }
+.bgl_icon--rotate-in { animation-name: bgl-icon-rotate-in; }
+
+@keyframes bgl-icon-spin { to { transform: rotate(360deg); } }
+@keyframes bgl-icon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+@keyframes bgl-icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20%); } }
+@keyframes bgl-icon-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes bgl-icon-slide-up { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: translateY(0); } }
+@keyframes bgl-icon-rotate-in { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } to { opacity: 1; transform: rotate(0) scale(1); } }
+
+@media (prefers-reduced-motion: reduce) {
+	.bgl_icon--spin, .bgl_icon--pulse, .bgl_icon--bounce,
+	.bgl_icon--fade-in, .bgl_icon--slide-up, .bgl_icon--rotate-in { animation: none; }
+}
+
+/* ── Swap transitions (on `name`/`icon` change; `transition` defaults on) ──── */
+.bgl-icon-x-slide-up-enter-active,
+.bgl-icon-x-slide-up-leave-active,
+.bgl-icon-x-rotate-enter-active,
+.bgl-icon-x-rotate-leave-active,
+.bgl-icon-x-scale-enter-active,
+.bgl-icon-x-scale-leave-active,
+.bgl-icon-x-fade-enter-active,
+.bgl-icon-x-fade-leave-active { transition: opacity 0.16s ease, transform 0.16s ease; }
+
+.bgl-icon-x-slide-up-enter-from { opacity: 0; transform: translateY(0.3em); }
+.bgl-icon-x-slide-up-leave-to { opacity: 0; transform: translateY(-0.3em); }
+
+.bgl-icon-x-rotate-enter-from { opacity: 0; transform: rotate(-90deg); }
+.bgl-icon-x-rotate-leave-to { opacity: 0; transform: rotate(90deg); }
+
+.bgl-icon-x-scale-enter-from { opacity: 0; transform: scale(0.5); }
+.bgl-icon-x-scale-leave-to { opacity: 0; transform: scale(0.5); }
+
+.bgl-icon-x-fade-enter-from,
+.bgl-icon-x-fade-leave-to { opacity: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+	.bgl-icon-x-slide-up-enter-active, .bgl-icon-x-slide-up-leave-active,
+	.bgl-icon-x-rotate-enter-active, .bgl-icon-x-rotate-leave-active,
+	.bgl-icon-x-scale-enter-active, .bgl-icon-x-scale-leave-active,
+	.bgl-icon-x-fade-enter-active, .bgl-icon-x-fade-leave-active { transition: none; }
+}
 </style>
 
 <!-- <style src="./font-awesome.css" /> -->