@sdata/web-vue 4.1.0 → 4.3.0

package/es/bloom-menu/bloom-menu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,380 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import IconClose from "../icon/icon-close/index.js";
+import { useI18n } from "../locale/index.js";
+import Trigger from "../trigger/index.js";
+import Button from "../button/index.js";
+import IconPlus from "../icon/icon-plus/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { shift } from "@floating-ui/vue";
+import { Motion, useReducedMotion } from "motion-v";
+//#region components/bloom-menu/bloom-menu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { ref: "panelRoot" };
+var bloom_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "BloomMenu" }), {}, {
+	__name: "bloom-menu",
+	props: {
+		items: {},
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		columns: { default: 3 },
+		title: { default: "Create" },
+		triggerText: { default: "Create" },
+		buttonProps: {},
+		offset: {},
+		closeAriaLabel: {}
+	},
+	emits: [
+		"update:modelValue",
+		"open",
+		"close",
+		"select"
+	],
+	setup(__props, { emit: __emit }) {
+		var _props$modelValue;
+		const emit = __emit;
+		const prefixCls = getPrefixCls("bloom-menu");
+		const { t } = useI18n();
+		const triggerButtonRef = useTemplateRef("triggerButton");
+		const panelRootRef = useTemplateRef("panelRoot");
+		const internalOpen = shallowRef(__props.defaultOpen);
+		const popupVisible = shallowRef((_props$modelValue = __props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : __props.defaultOpen);
+		const reducedMotion = useReducedMotion();
+		const triggerStyle = shallowRef({
+			width: 144,
+			height: 44,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			borderRadius: "16px",
+			boxShadow: "none",
+			color: "currentColor"
+		});
+		const normalizedColumns = computed(() => Math.max(1, Math.floor(__props.columns)));
+		const rowCount = computed(() => Math.max(1, Math.ceil(__props.items.length / normalizedColumns.value)));
+		const isOpen = computed(() => {
+			var _props$modelValue2;
+			return (_props$modelValue2 = __props.modelValue) !== null && _props$modelValue2 !== void 0 ? _props$modelValue2 : internalOpen.value;
+		});
+		const rootClasses = computed(() => [prefixCls, { [`${prefixCls}-open`]: isOpen.value }]);
+		const centerMiddleware = computed(() => ({
+			name: "bloomMenuCenter",
+			fn: ({ rects }) => {
+				var _props$offset$left, _props$offset, _props$offset$top, _props$offset2;
+				return {
+					x: rects.reference.x + (rects.reference.width - rects.floating.width) / 2 + ((_props$offset$left = (_props$offset = __props.offset) === null || _props$offset === void 0 ? void 0 : _props$offset.left) !== null && _props$offset$left !== void 0 ? _props$offset$left : 0),
+					y: rects.reference.y + (rects.reference.height - rects.floating.height) / 2 + ((_props$offset$top = (_props$offset2 = __props.offset) === null || _props$offset2 === void 0 ? void 0 : _props$offset2.top) !== null && _props$offset$top !== void 0 ? _props$offset$top : 0)
+				};
+			}
+		}));
+		const floatingOptions = computed(() => ({
+			placement: "top",
+			middleware: [centerMiddleware.value, shift({ crossAxis: true })]
+		}));
+		const popupContentStyle = computed(() => ({ pointerEvents: isOpen.value ? void 0 : "none" }));
+		const panelStyle = computed(() => ({
+			"--bloom-menu-columns": normalizedColumns.value,
+			"--bloom-menu-source-width": `${triggerStyle.value.width}px`,
+			"--bloom-menu-source-height": `${triggerStyle.value.height}px`,
+			"--bloom-menu-source-background": triggerStyle.value.backgroundColor,
+			"--bloom-menu-source-border-color": triggerStyle.value.borderColor,
+			"--bloom-menu-source-border-radius": triggerStyle.value.borderRadius,
+			"--bloom-menu-source-box-shadow": triggerStyle.value.boxShadow,
+			"--bloom-menu-source-color": triggerStyle.value.color
+		}));
+		const panelCollapsed = computed(() => reducedMotion.value ? {} : {
+			width: "var(--bloom-menu-source-width)",
+			height: "var(--bloom-menu-source-height)",
+			color: "var(--bloom-menu-source-color)",
+			backgroundColor: "var(--bloom-menu-source-background)",
+			borderColor: "var(--bloom-menu-source-border-color)",
+			borderRadius: "var(--bloom-menu-source-border-radius)",
+			boxShadow: "var(--bloom-menu-source-box-shadow)"
+		});
+		const panelInitial = computed(() => _objectSpread2(_objectSpread2({}, panelCollapsed.value), {}, { opacity: reducedMotion.value ? 0 : .98 }));
+		const panelAnimate = computed(() => ({
+			width: "var(--bloom-menu-panel-width)",
+			height: "auto",
+			color: "var(--bloom-menu-panel-color)",
+			backgroundColor: "var(--bloom-menu-panel-background)",
+			borderColor: "var(--bloom-menu-panel-border-color)",
+			borderRadius: "var(--bloom-menu-panel-border-radius)",
+			boxShadow: "var(--bloom-menu-panel-shadow)",
+			opacity: 1
+		}));
+		const panelTarget = computed(() => isOpen.value ? panelAnimate.value : panelCollapsed.value);
+		const morphTransition = computed(() => reducedMotion.value ? { duration: .15 } : {
+			type: "spring",
+			stiffness: 300,
+			damping: 32,
+			mass: .9
+		});
+		const contentTransition = computed(() => ({
+			delay: isOpen.value && !reducedMotion.value ? .12 : 0,
+			duration: reducedMotion.value ? .15 : isOpen.value ? .2 : .12
+		}));
+		const gridInitial = computed(() => reducedMotion.value ? false : { clipPath: "inset(45% 34% 45% 34%)" });
+		const gridTransition = computed(() => ({
+			delay: reducedMotion.value ? 0 : .08,
+			duration: reducedMotion.value ? .15 : .45,
+			ease: [
+				.16,
+				1,
+				.3,
+				1
+			]
+		}));
+		function getTriggerElement(event) {
+			var _triggerButtonRef$val;
+			if ((event === null || event === void 0 ? void 0 : event.currentTarget) instanceof HTMLElement) return event.currentTarget;
+			return (_triggerButtonRef$val = triggerButtonRef.value) === null || _triggerButtonRef$val === void 0 ? void 0 : _triggerButtonRef$val.$el;
+		}
+		function captureTriggerStyle(event) {
+			const element = getTriggerElement(event);
+			if (!element || typeof window === "undefined") return;
+			const rect = element.getBoundingClientRect();
+			const style = window.getComputedStyle(element);
+			triggerStyle.value = {
+				width: rect.width,
+				height: rect.height,
+				backgroundColor: style.backgroundColor,
+				borderColor: style.borderColor,
+				borderRadius: style.borderRadius,
+				boxShadow: style.boxShadow,
+				color: style.color
+			};
+		}
+		function setOpen(nextOpen) {
+			if (nextOpen === isOpen.value) return;
+			if (__props.modelValue === void 0) internalOpen.value = nextOpen;
+			emit("update:modelValue", nextOpen);
+			if (nextOpen) emit("open");
+			else emit("close");
+		}
+		function handlePopupVisibleChange(visible) {
+			if (visible) {
+				captureTriggerStyle();
+				setOpen(true);
+			} else {
+				var _panelRootRef$value;
+				if (document.activeElement instanceof HTMLElement && ((_panelRootRef$value = panelRootRef.value) === null || _panelRootRef$value === void 0 ? void 0 : _panelRootRef$value.contains(document.activeElement))) focusTrigger();
+				setOpen(false);
+			}
+		}
+		let closeTimer = 0;
+		function schedulePopupHide() {
+			window.clearTimeout(closeTimer);
+			closeTimer = window.setTimeout(() => {
+				if (!isOpen.value) popupVisible.value = false;
+			}, reducedMotion.value ? 150 : 450);
+		}
+		function open() {
+			captureTriggerStyle();
+			setOpen(true);
+		}
+		function focusTrigger() {
+			var _triggerButtonRef$val2;
+			(_triggerButtonRef$val2 = triggerButtonRef.value) === null || _triggerButtonRef$val2 === void 0 || (_triggerButtonRef$val2 = _triggerButtonRef$val2.$el) === null || _triggerButtonRef$val2 === void 0 || _triggerButtonRef$val2.focus();
+		}
+		function close(restoreFocus = false) {
+			setOpen(false);
+			if (restoreFocus) nextTick(focusTrigger);
+		}
+		function focusPanel(attempt = 0) {
+			nextTick(() => {
+				var _panelRootRef$value2, _panelRootRef$value3;
+				const firstItem = (_panelRootRef$value2 = panelRootRef.value) === null || _panelRootRef$value2 === void 0 ? void 0 : _panelRootRef$value2.querySelector(`.${prefixCls}-item:not(:disabled)`);
+				const closeButton = (_panelRootRef$value3 = panelRootRef.value) === null || _panelRootRef$value3 === void 0 ? void 0 : _panelRootRef$value3.querySelector(`.${prefixCls}-close`);
+				const target = firstItem !== null && firstItem !== void 0 ? firstItem : closeButton;
+				if (!target || getComputedStyle(target).visibility === "hidden") {
+					if (attempt < 30) requestAnimationFrame(() => focusPanel(attempt + 1));
+					return;
+				}
+				target.focus();
+			});
+		}
+		function selectItem(item, index) {
+			if (item.disabled) return;
+			emit("select", item, index);
+			close(true);
+		}
+		function getItemClasses(item, index) {
+			const column = index % normalizedColumns.value;
+			const row = Math.floor(index / normalizedColumns.value);
+			return [`${prefixCls}-item`, {
+				[`${prefixCls}-item-border-right`]: column < normalizedColumns.value - 1,
+				[`${prefixCls}-item-border-bottom`]: row < rowCount.value - 1,
+				[`${prefixCls}-item-disabled`]: item.disabled
+			}];
+		}
+		function getItemInitial() {
+			return reducedMotion.value ? { opacity: 0 } : {
+				opacity: 0,
+				scale: .85,
+				filter: "blur(6px)"
+			};
+		}
+		function getItemTransition(index) {
+			const column = index % normalizedColumns.value;
+			const row = Math.floor(index / normalizedColumns.value);
+			const distance = Math.hypot(column - (normalizedColumns.value - 1) / 2, row - (rowCount.value - 1) / 2);
+			return {
+				delay: reducedMotion.value ? 0 : .1 + distance * .07,
+				type: "spring",
+				stiffness: 440,
+				damping: 34
+			};
+		}
+		onMounted(captureTriggerStyle);
+		watch(isOpen, (openState) => {
+			if (!openState) {
+				schedulePopupHide();
+				return;
+			}
+			window.clearTimeout(closeTimer);
+			popupVisible.value = true;
+			captureTriggerStyle();
+			focusPanel();
+		}, { immediate: true });
+		onBeforeUnmount(() => window.clearTimeout(closeTimer));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(rootClasses.value) }, [createVNode(unref(Trigger), {
+				"popup-visible": popupVisible.value,
+				trigger: "click",
+				"floating-options": floatingOptions.value,
+				"content-class": `${unref(prefixCls)}-popup`,
+				"content-style": popupContentStyle.value,
+				duration: 0,
+				"animation-name": "",
+				"render-to-body": "",
+				"esc-to-close": "",
+				"aria-has-popup": "dialog",
+				onPopupVisibleChange: handlePopupVisibleChange
+			}, {
+				content: withCtx(() => [createVNode(unref(Motion), {
+					"data-bloom-menu-panel": "",
+					initial: panelInitial.value,
+					animate: panelTarget.value,
+					transition: morphTransition.value,
+					style: normalizeStyle(panelStyle.value),
+					class: normalizeClass(`${unref(prefixCls)}-panel`),
+					role: "dialog",
+					"aria-label": __props.title
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(Motion), {
+						initial: { opacity: 0 },
+						animate: { opacity: isOpen.value ? 1 : 0 },
+						transition: contentTransition.value,
+						class: normalizeClass(`${unref(prefixCls)}-content`)
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-header`) }, [renderSlot(_ctx.$slots, "header", { close }, () => {
+							var _props$closeAriaLabel;
+							return [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, toDisplayString(__props.title), 3), createVNode(unref(Button), {
+								type: "text",
+								shape: "circle",
+								size: "mini",
+								class: normalizeClass(`${unref(prefixCls)}-close`),
+								"aria-label": (_props$closeAriaLabel = __props.closeAriaLabel) !== null && _props$closeAriaLabel !== void 0 ? _props$closeAriaLabel : unref(t)("a11y.bloomMenuClose"),
+								onClick: _cache[0] || (_cache[0] = ($event) => close(true))
+							}, {
+								icon: withCtx(() => [createVNode(unref(IconClose))]),
+								_: 1
+							}, 8, ["class", "aria-label"])];
+						})], 2), __props.items.length ? (openBlock(), createBlock(unref(Motion), {
+							key: 0,
+							initial: gridInitial.value,
+							animate: { clipPath: "inset(0% 0% 0% 0%)" },
+							transition: gridTransition.value,
+							class: normalizeClass(`${unref(prefixCls)}-grid`)
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+								return openBlock(), createBlock(unref(Button), {
+									key: item.value,
+									type: "text",
+									long: "",
+									class: normalizeClass(getItemClasses(item, index)),
+									disabled: item.disabled,
+									onClick: ($event) => selectItem(item, index)
+								}, {
+									default: withCtx(() => [createVNode(unref(Motion), {
+										initial: getItemInitial(),
+										animate: {
+											opacity: 1,
+											scale: 1,
+											filter: "blur(0px)"
+										},
+										transition: getItemTransition(index),
+										class: normalizeClass(`${unref(prefixCls)}-item-content`)
+									}, {
+										default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+											item,
+											index
+										}, () => [item.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
+											key: 0,
+											class: normalizeClass(`${unref(prefixCls)}-item-icon`)
+										}, [renderSlot(_ctx.$slots, "icon", {
+											item,
+											index
+										}, () => [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-item-label`) }, toDisplayString(item.label), 3)])]),
+										_: 2
+									}, 1032, [
+										"initial",
+										"transition",
+										"class"
+									])]),
+									_: 2
+								}, 1032, [
+									"class",
+									"disabled",
+									"onClick"
+								]);
+							}), 128))]),
+							_: 3
+						}, 8, [
+							"initial",
+							"transition",
+							"class"
+						])) : (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(`${unref(prefixCls)}-empty`)
+						}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t)("a11y.bloomMenuEmpty")), 1)])], 2))]),
+						_: 3
+					}, 8, [
+						"animate",
+						"transition",
+						"class"
+					])], 512)]),
+					_: 3
+				}, 8, [
+					"initial",
+					"animate",
+					"transition",
+					"style",
+					"class",
+					"aria-label"
+				])]),
+				default: withCtx(() => [createVNode(unref(Button), mergeProps(__props.buttonProps, {
+					ref: "triggerButton",
+					"data-bloom-menu-trigger": "",
+					class: `${unref(prefixCls)}-trigger`,
+					onPointerdown: captureTriggerStyle
+				}), {
+					default: withCtx(() => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-trigger-content`) }, [renderSlot(_ctx.$slots, "trigger", { open }, () => [createTextVNode(toDisplayString(__props.triggerText) + " ", 1), createVNode(unref(IconPlus))])], 2)]),
+					_: 3
+				}, 16, ["class"])]),
+				_: 3
+			}, 8, [
+				"popup-visible",
+				"floating-options",
+				"content-class",
+				"content-style"
+			])], 2);
+		};
+	}
+}));
+//#endregion
+export { bloom_menu_vue_vue_type_script_setup_true_lang_default as default };

package/es/bloom-menu/index.d.ts

@@ -0,0 +1,6 @@
+import type { SFCWithInstall } from '../_utils/types';
+import _BloomMenu from './bloom-menu.vue';
+export type { BloomMenuItem, BloomMenuOffset } from './types';
+declare const BloomMenu: SFCWithInstall<typeof _BloomMenu>;
+export type BloomMenuInstance = InstanceType<typeof _BloomMenu>;
+export default BloomMenu;

package/es/bloom-menu/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import bloom_menu_default from "./bloom-menu.js";
+//#region components/bloom-menu/index.ts
+var BloomMenu = Object.assign(bloom_menu_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + bloom_menu_default.name, bloom_menu_default);
+} });
+//#endregion
+export { BloomMenu as default };

package/es/bloom-menu/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/bloom-menu/style/index.css

@@ -0,0 +1,135 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-bloom-menu {
+  display: inline-flex;
+  font-family: inter, "-apple-system", blinkmacsystemfont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", helvetica, arial, sans-serif;
+}
+.sd-bloom-menu-trigger-content {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  white-space: nowrap;
+}
+.sd-bloom-menu-trigger-content svg {
+  width: 16px;
+  height: 16px;
+}
+.sd-bloom-menu-panel {
+  --bloom-menu-panel-width: min(86vw, 420px);
+  --bloom-menu-panel-color: var(--sd-color-text-1);
+  --bloom-menu-panel-background: var(--sd-color-bg-2);
+  --bloom-menu-panel-border-color: var(--sd-color-neutral-3);
+  --bloom-menu-panel-border-radius: var(--sd-border-radius-medium);
+  --bloom-menu-panel-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  border: 1px solid var(--sd-color-neutral-3);
+}
+.sd-bloom-menu-popup {
+  padding: 0;
+}
+.sd-bloom-menu-content {
+  width: 100%;
+}
+.sd-bloom-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  color: var(--sd-color-text-2);
+  border-bottom: 1px solid var(--sd-color-neutral-3);
+}
+.sd-bloom-menu-title {
+  font-weight: 500;
+  font-size: 14px;
+}
+.sd-bloom-menu-close {
+  color: inherit;
+}
+.sd-bloom-menu-close:hover {
+  color: var(--sd-color-text-1);
+}
+.sd-bloom-menu-close svg {
+  width: 16px;
+  height: 16px;
+}
+.sd-bloom-menu-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--bloom-menu-columns), minmax(0, 1fr));
+}
+.sd-bloom-menu-item {
+  min-width: 0;
+  height: auto;
+  padding: 24px 12px;
+  color: var(--sd-color-text-2);
+  border-radius: 0;
+}
+.sd-bloom-menu-item:hover:not(:disabled) {
+  color: var(--sd-color-text-1);
+  background: var(--sd-color-fill-2);
+}
+.sd-bloom-menu-item:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid rgb(var(--sd-primary-6));
+  outline-offset: -2px;
+}
+.sd-bloom-menu-item-border-right {
+  border-right: 1px solid var(--sd-color-neutral-3);
+}
+.sd-bloom-menu-item-border-bottom {
+  border-bottom: 1px solid var(--sd-color-neutral-3);
+}
+.sd-bloom-menu-item-disabled, .sd-bloom-menu-item:disabled {
+  color: var(--sd-color-text-4);
+  cursor: not-allowed;
+}
+.sd-bloom-menu-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+.sd-bloom-menu-item-icon {
+  display: inline-flex;
+  font-size: 20px;
+}
+.sd-bloom-menu-item-icon svg {
+  width: 20px;
+  height: 20px;
+}
+.sd-bloom-menu-item-label {
+  max-width: 100%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sd-bloom-menu-empty {
+  padding: 24px 16px;
+  color: var(--sd-color-text-2);
+  font-size: 14px;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-bloom-menu-item, .sd-bloom-menu-close {
+    transition: none;
+  }
+}

package/es/bloom-menu/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/bloom-menu/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

package/es/bloom-menu/style/index.scss

@@ -0,0 +1,153 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/bloom-menu/style/token.scss' as *;
+
+$bloom-menu-prefix-cls: string.unquote('#{theme.$prefix}-bloom-menu');
+
+.#{$bloom-menu-prefix-cls} {
+  display: inline-flex;
+  font-family: theme.$font-family;
+
+  // 触发按钮的默认尺寸与字重由组件以 buttonProps 默认值(行内样式)提供,
+  // 避免 class 硬编码压过用户传入的 size/shape 等尺寸类
+  &-trigger-content {
+    display: inline-flex;
+    gap: $bloom-menu-item-gap;
+    align-items: center;
+    white-space: nowrap;
+
+    svg {
+      width: theme.$size-4;
+      height: theme.$size-4;
+    }
+  }
+
+  &-panel {
+    --bloom-menu-panel-width: #{$bloom-menu-panel-width};
+    --bloom-menu-panel-color: #{$bloom-menu-text-color};
+    --bloom-menu-panel-background: #{$bloom-menu-background};
+    --bloom-menu-panel-border-color: #{$bloom-menu-border-color};
+    --bloom-menu-panel-border-radius: #{theme.$radius-medium};
+    --bloom-menu-panel-shadow: #{$bloom-menu-shadow};
+
+    overflow: hidden;
+    border: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
+  }
+
+  &-popup {
+    padding: 0;
+  }
+
+  &-content {
+    width: 100%;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $bloom-menu-header-padding-block $bloom-menu-header-padding-inline;
+    color: $bloom-menu-muted-color;
+    border-bottom: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
+  }
+
+  &-title {
+    font-weight: $bloom-menu-font-weight;
+    font-size: $bloom-menu-font-size;
+  }
+
+  &-close {
+    color: inherit;
+
+    &:hover {
+      color: $bloom-menu-text-color;
+    }
+
+    svg {
+      width: theme.$size-4;
+      height: theme.$size-4;
+    }
+  }
+
+  &-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--bloom-menu-columns), minmax(0, 1fr));
+  }
+
+  &-item {
+    min-width: 0;
+    height: auto;
+    padding: $bloom-menu-item-padding-block $bloom-menu-item-padding-inline;
+    color: $bloom-menu-muted-color;
+    border-radius: 0;
+
+    &:hover:not(:disabled) {
+      color: $bloom-menu-text-color;
+      background: $bloom-menu-hover-background;
+    }
+
+    &:focus-visible {
+      position: relative;
+      z-index: 1;
+      outline: 2px solid theme.$color-primary-6;
+      outline-offset: -2px;
+    }
+
+    &-border-right {
+      border-right: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
+    }
+
+    &-border-bottom {
+      border-bottom: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
+    }
+
+    &-disabled,
+    &:disabled {
+      color: $bloom-menu-disabled-color;
+      cursor: not-allowed;
+    }
+  }
+
+  &-item-content {
+    display: flex;
+    flex-direction: column;
+    gap: $bloom-menu-item-gap;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    font-size: $bloom-menu-icon-size;
+
+    svg {
+      width: $bloom-menu-icon-size;
+      height: $bloom-menu-icon-size;
+    }
+  }
+
+  &-item-label {
+    max-width: 100%;
+    overflow: hidden;
+    font-weight: $bloom-menu-font-weight;
+    font-size: $bloom-menu-font-size;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-empty {
+    padding: $bloom-menu-item-padding-block $bloom-menu-header-padding-inline;
+    color: $bloom-menu-muted-color;
+    font-size: $bloom-menu-font-size;
+    text-align: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{$bloom-menu-prefix-cls} {
+    &-item,
+    &-close {
+      transition: none;
+    }
+  }
+}