@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system131.js

@@ -1,154 +1,93 @@
-import e from "./design-system120.js";
-import { BMenuContextKey as t, isDivider as n, isItemGroup as r, isSubMenu as i } from "./design-system121.js";
-import a from "./design-system124.js";
-import o from "./design-system127.js";
-import s from "./design-system130.js";
-import { Fragment as c, computed as l, createBlock as u, createElementBlock as d, defineComponent as f, normalizeClass as p, openBlock as m, provide as h, ref as g, renderList as _, renderSlot as v, unref as y, watch as b } from "vue";
-//#region src/components/BMenu/BMenu.vue?vue&type=script&setup=true&lang.ts
-var x = [
+import { BMenuContextKey as e, BMenuSubMenuContextKey as t } from "./design-system130.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
+//#region src/components/BMenu/BMenuItem.vue?vue&type=script&setup=true&lang.ts
+var h = [
 	"role",
-	"aria-orientation",
-	"data-theme"
-], S = /* @__PURE__ */ f({
-	__name: "BMenu",
+	"tabindex",
+	"aria-disabled",
+	"aria-checked",
+	"title",
+	"data-menu-key"
+], g = {
+	key: 0,
+	class: "b-menu-item__icon",
+	"aria-hidden": "true"
+}, _ = {
+	key: 1,
+	class: "b-menu-item__label"
+}, v = {
+	key: 2,
+	class: "b-menu-item__extra"
+}, y = /* @__PURE__ */ o({
+	__name: "BMenuItem",
 	props: {
-		mode: { default: "inline" },
-		theme: { default: "light" },
-		items: { default: () => [] },
-		selectable: {
-			type: Boolean,
-			default: !0
-		},
-		multiple: {
+		itemKey: {},
+		label: { default: "" },
+		icon: { default: () => void 0 },
+		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		inlineCollapsed: {
+		danger: {
 			type: Boolean,
 			default: !1
 		},
-		inlineIndent: { default: 24 },
-		defaultSelectedKeys: { default: () => [] },
-		selectedKeys: { default: void 0 },
-		defaultOpenKeys: { default: () => [] },
-		openKeys: { default: void 0 },
-		triggerSubMenuAction: { default: "hover" },
-		subMenuOpenDelay: { default: 0 },
-		subMenuCloseDelay: { default: 100 }
+		extra: { default: () => void 0 },
+		title: { default: () => void 0 }
 	},
-	emits: [
-		"update:selectedKeys",
-		"update:openKeys",
-		"click",
-		"select",
-		"deselect",
-		"openChange"
-	],
-	setup(f, { emit: S }) {
-		let C = f, w = S, T = l(() => C.selectedKeys !== void 0), E = g([...C.defaultSelectedKeys]), D = l(() => T.value ? C.selectedKeys ?? [] : E.value), O = l(() => C.openKeys !== void 0), k = g([...C.defaultOpenKeys]), A = l(() => O.value ? C.openKeys ?? [] : k.value), j = /* @__PURE__ */ new Map();
-		function M(e, t) {
-			j.set(e, t);
+	setup(o) {
+		let y = s(e), b = s(t, null), x = n(() => (b?.level ?? 0) + 1), S = n(() => [...b?.keyPath ?? [], o.itemKey]);
+		u(() => {
+			y.registerKeyPath(o.itemKey, S.value);
+		});
+		let C = n(() => y.selectedKeys.value.includes(o.itemKey)), w = n(() => y.selectable.value ? y.multiple.value ? "menuitemcheckbox" : "menuitemradio" : "menuitem"), T = n(() => {
+			if (y.mode.value === "inline" && !y.inlineCollapsed.value) return `${x.value * y.inlineIndent.value}px`;
+		}), E = n(() => ["b-menu-item", {
+			"b-menu-item--selected": C.value,
+			"b-menu-item--disabled": o.disabled,
+			"b-menu-item--danger": o.danger,
+			"b-menu-item--collapsed": y.inlineCollapsed.value,
+			"b-menu-item--horizontal": y.mode.value === "horizontal"
+		}]);
+		function D(e) {
+			if (o.disabled) return;
+			let t = {
+				key: o.itemKey,
+				keyPath: S.value,
+				domEvent: e
+			};
+			y.onItemClick(t);
 		}
-		function N(e) {
-			if (w("click", e), !C.selectable) return;
-			let t = e.key, n = [...D.value];
-			if (C.multiple) {
-				let r = n.indexOf(t);
-				r >= 0 ? (n.splice(r, 1), T.value || (E.value = n), w("update:selectedKeys", n), w("deselect", {
-					...e,
-					selectedKeys: n
-				})) : (n.push(t), T.value || (E.value = n), w("update:selectedKeys", n), w("select", {
-					...e,
-					selectedKeys: n
-				}));
-			} else {
-				let n = [t];
-				T.value || (E.value = n), w("update:selectedKeys", n), w("select", {
-					...e,
-					selectedKeys: n
-				});
+		function O(e) {
+			if (!o.disabled && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				let t = {
+					key: o.itemKey,
+					keyPath: S.value,
+					domEvent: e
+				};
+				y.onItemClick(t);
 			}
 		}
-		function P(e, t) {
-			let n = [...A.value], r = n.indexOf(e);
-			t && r < 0 ? (C.mode, n.push(e)) : !t && r >= 0 && n.splice(r, 1), O.value || (k.value = n), w("update:openKeys", n), w("openChange", n);
-		}
-		b(() => C.selectedKeys, (e) => {
-			e !== void 0 && (E.value = [...e]);
-		}), b(() => C.openKeys, (e) => {
-			e !== void 0 && (k.value = [...e]);
-		}), b(() => C.inlineCollapsed, (e) => {
-			e && !O.value && (k.value = [], w("update:openKeys", []), w("openChange", []));
-		}), h(t, {
-			mode: l(() => C.mode),
-			theme: l(() => C.theme),
-			inlineCollapsed: l(() => C.inlineCollapsed),
-			inlineIndent: l(() => C.inlineIndent),
-			selectedKeys: D,
-			openKeys: A,
-			multiple: l(() => C.multiple),
-			selectable: l(() => C.selectable),
-			triggerSubMenuAction: l(() => C.triggerSubMenuAction),
-			subMenuOpenDelay: l(() => C.subMenuOpenDelay),
-			subMenuCloseDelay: l(() => C.subMenuCloseDelay),
-			onItemClick: N,
-			onOpenChange: P,
-			registerKeyPath: M
-		});
-		let F = l(() => [
-			"b-menu",
-			`b-menu--${C.mode}`,
-			`b-menu--${C.theme}`,
-			{ "b-menu--collapsed": C.mode === "inline" && C.inlineCollapsed }
-		]), I = l(() => "menu"), L = l(() => C.mode === "horizontal" ? "horizontal" : "vertical");
-		return (t, l) => (m(), d("ul", {
-			class: p(F.value),
-			role: I.value,
-			"aria-orientation": L.value,
-			"data-theme": C.theme
-		}, [v(t.$slots, "default", {}, () => [(m(!0), d(c, null, _(C.items, (t) => (m(), d(c, { key: t.key ?? t.type }, [y(n)(t) ? (m(), u(e, {
-			key: 0,
-			dashed: t.dashed
-		}, null, 8, ["dashed"])) : y(r)(t) ? (m(), u(o, {
-			key: 1,
-			label: t.label,
-			children: t.children
-		}, null, 8, ["label", "children"])) : y(i)(t) ? (m(), u(s, {
-			key: 2,
-			"item-key": t.key,
-			label: t.label,
-			icon: t.icon,
-			disabled: t.disabled,
-			children: t.children,
-			"popup-class-name": t.popupClassName
-		}, null, 8, [
-			"item-key",
-			"label",
-			"icon",
-			"disabled",
-			"children",
-			"popup-class-name"
-		])) : (m(), u(a, {
-			key: 3,
-			"item-key": t.key,
-			label: t.label,
-			icon: t.icon,
-			disabled: t.disabled,
-			danger: t.danger,
-			extra: t.extra,
-			title: t.title
-		}, null, 8, [
-			"item-key",
-			"label",
-			"icon",
-			"disabled",
-			"danger",
-			"extra",
-			"title"
-		]))], 64))), 128))])], 10, x));
+		return (e, t) => (d(), i("li", {
+			class: c(E.value),
+			style: l({ paddingInlineStart: T.value }),
+			role: w.value,
+			tabindex: o.disabled ? -1 : 0,
+			"aria-disabled": o.disabled || void 0,
+			"aria-checked": m(y).selectable.value ? C.value : void 0,
+			title: o.title ?? (m(y).inlineCollapsed.value ? o.label : void 0),
+			"data-menu-key": o.itemKey,
+			onClick: D,
+			onKeydown: O
+		}, [
+			o.icon || e.$slots.icon ? (d(), i("span", g, [f(e.$slots, "icon", {}, () => [a(p(o.icon), 1)])])) : r("", !0),
+			m(y).inlineCollapsed.value ? r("", !0) : (d(), i("span", _, [f(e.$slots, "default", {}, () => [a(p(o.label), 1)])])),
+			o.extra && !m(y).inlineCollapsed.value ? (d(), i("span", v, [f(e.$slots, "extra", {}, () => [a(p(o.extra), 1)])])) : r("", !0)
+		], 46, h));
 	}
 });
 //#endregion
-export { S as default };
+export { y as default };
 
 //# sourceMappingURL=design-system131.js.map

package/dist/design-system131.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system131.js","names":[],"sources":["../src/components/BMenu/BMenu.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, unref as _unref, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from \"vue\"\n\nconst _hoisted_1 = [\"role\", \"aria-orientation\", \"data-theme\"]\n\nimport { computed, provide, ref, watch } from 'vue';\nimport BMenuDivider from './BMenuDivider.vue';\nimport BMenuItem from './BMenuItem.vue';\nimport BMenuItemGroup from './BMenuItemGroup.vue';\nimport BMenuSubMenu from './BMenuSubMenu.vue';\nimport {\n  BMenuContextKey,\n  isDivider,\n  isItemGroup,\n  isSubMenu,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuItemUnion,\n  type BMenuMode,\n  type BMenuSelectInfo,\n  type BMenuTheme,\n  type BMenuTriggerAction,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BMenu',\n  props: {\n    mode: { default: 'inline' },\n    theme: { default: 'light' },\n    items: { default: () => [] },\n    selectable: { type: Boolean, default: true },\n    multiple: { type: Boolean, default: false },\n    inlineCollapsed: { type: Boolean, default: false },\n    inlineIndent: { default: 24 },\n    defaultSelectedKeys: { default: () => [] },\n    selectedKeys: { default: undefined },\n    defaultOpenKeys: { default: () => [] },\n    openKeys: { default: undefined },\n    triggerSubMenuAction: { default: 'hover' },\n    subMenuOpenDelay: { default: 0 },\n    subMenuCloseDelay: { default: 100 }\n  },\n  emits: [\"update:selectedKeys\", \"update:openKeys\", \"click\", \"select\", \"deselect\", \"openChange\"],\n  setup(__props: any, { emit: __emit }) {\n\nconst props = __props;\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Selection state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isSelectionControlled = computed(() => props.selectedKeys !== undefined);\nconst internalSelectedKeys = ref<string[]>([...props.defaultSelectedKeys]);\n\nconst resolvedSelectedKeys = computed(() =>\n  isSelectionControlled.value ? (props.selectedKeys ?? []) : internalSelectedKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Open state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isOpenControlled = computed(() => props.openKeys !== undefined);\nconst internalOpenKeys = ref<string[]>([...props.defaultOpenKeys]);\n\nconst resolvedOpenKeys = computed(() =>\n  isOpenControlled.value ? (props.openKeys ?? []) : internalOpenKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Key path registry (item key → full path from root)\n// ─────────────────────────────────────────────\nconst keyPathMap = new Map<string, string[]>();\n\nfunction registerKeyPath(key: string, path: string[]) {\n  keyPathMap.set(key, path);\n}\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction onItemClick(info: BMenuClickInfo) {\n  emit('click', info);\n\n  if (!props.selectable) return;\n\n  const key = info.key;\n  const current = [...resolvedSelectedKeys.value];\n\n  if (props.multiple) {\n    const idx = current.indexOf(key);\n    if (idx >= 0) {\n      current.splice(idx, 1);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('deselect', { ...info, selectedKeys: current });\n    } else {\n      current.push(key);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('select', { ...info, selectedKeys: current });\n    }\n  } else {\n    const newKeys = [key];\n    if (!isSelectionControlled.value) {\n      internalSelectedKeys.value = newKeys;\n    }\n    emit('update:selectedKeys', newKeys);\n    emit('select', { ...info, selectedKeys: newKeys });\n  }\n}\n\nfunction onOpenChange(key: string, open: boolean) {\n  const current = [...resolvedOpenKeys.value];\n  const idx = current.indexOf(key);\n\n  if (open && idx < 0) {\n    if (props.mode === 'inline') {\n      current.push(key);\n    } else {\n      // In vertical/horizontal mode, only one submenu open at a level\n      current.push(key);\n    }\n  } else if (!open && idx >= 0) {\n    current.splice(idx, 1);\n  }\n\n  if (!isOpenControlled.value) {\n    internalOpenKeys.value = current;\n  }\n  emit('update:openKeys', current);\n  emit('openChange', current);\n}\n\n// ─────────────────────────────────────────────\n// Sync controlled props\n// ─────────────────────────────────────────────\nwatch(\n  () => props.selectedKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalSelectedKeys.value = [...val];\n    }\n  },\n);\n\nwatch(\n  () => props.openKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalOpenKeys.value = [...val];\n    }\n  },\n);\n\n// When inline collapsed changes, close all submenus in uncontrolled mode\nwatch(\n  () => props.inlineCollapsed,\n  (collapsed) => {\n    if (collapsed && !isOpenControlled.value) {\n      internalOpenKeys.value = [];\n      emit('update:openKeys', []);\n      emit('openChange', []);\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Context for children\n// ─────────────────────────────────────────────\nconst context: BMenuContext = {\n  mode: computed(() => props.mode),\n  theme: computed(() => props.theme),\n  inlineCollapsed: computed(() => props.inlineCollapsed),\n  inlineIndent: computed(() => props.inlineIndent),\n  selectedKeys: resolvedSelectedKeys,\n  openKeys: resolvedOpenKeys,\n  multiple: computed(() => props.multiple),\n  selectable: computed(() => props.selectable),\n  triggerSubMenuAction: computed(() => props.triggerSubMenuAction),\n  subMenuOpenDelay: computed(() => props.subMenuOpenDelay),\n  subMenuCloseDelay: computed(() => props.subMenuCloseDelay),\n  onItemClick,\n  onOpenChange,\n  registerKeyPath,\n};\n\nprovide(BMenuContextKey, context);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-menu',\n  `b-menu--${props.mode}`,\n  `b-menu--${props.theme}`,\n  {\n    'b-menu--collapsed': props.mode === 'inline' && props.inlineCollapsed,\n  },\n]);\n\nconst ariaRole = computed(() => 'menu');\nconst ariaOrientation = computed(() => (props.mode === 'horizontal' ? 'horizontal' : 'vertical'));\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"ul\", {\n    class: _normalizeClass(rootClasses.value),\n    role: ariaRole.value,\n    \"aria-orientation\": ariaOrientation.value,\n    \"data-theme\": props.theme\n  }, [\n    _renderSlot(_ctx.$slots, \"default\", {}, () => [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(props.items, (item) => {\n        return (_openBlock(), _createElementBlock(_Fragment, {\n          key: item.key ?? (item as any).type\n        }, [\n          (_unref(isDivider)(item))\n            ? (_openBlock(), _createBlock(BMenuDivider, {\n                key: 0,\n                dashed: item.dashed\n              }, null, 8, [\"dashed\"]))\n            : (_unref(isItemGroup)(item))\n              ? (_openBlock(), _createBlock(BMenuItemGroup, {\n                  key: 1,\n                  label: item.label,\n                  children: item.children\n                }, null, 8, [\"label\", \"children\"]))\n              : (_unref(isSubMenu)(item))\n                ? (_openBlock(), _createBlock(BMenuSubMenu, {\n                    key: 2,\n                    \"item-key\": item.key,\n                    label: item.label,\n                    icon: item.icon,\n                    disabled: item.disabled,\n                    children: item.children,\n                    \"popup-class-name\": item.popupClassName\n                  }, null, 8, [\"item-key\", \"label\", \"icon\", \"disabled\", \"children\", \"popup-class-name\"]))\n                : (_openBlock(), _createBlock(BMenuItem, {\n                    key: 3,\n                    \"item-key\": item.key,\n                    label: item.label,\n                    icon: item.icon,\n                    disabled: item.disabled,\n                    danger: (item as any).danger,\n                    extra: (item as any).extra,\n                    title: (item as any).title\n                  }, null, 8, [\"item-key\", \"label\", \"icon\", \"disabled\", \"danger\", \"extra\", \"title\"]))\n        ], 64))\n      }), 128))\n    ])\n  ], 10, _hoisted_1))\n}\n}\n\n})"],"mappings":";;;;;;;AAGA,IAAM,IAAa;CAAC;CAAQ;CAAoB;CAAa,EAyB7D,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,MAAM,EAAE,SAAS,UAAU;EAC3B,OAAO,EAAE,SAAS,SAAS;EAC3B,OAAO,EAAE,eAAe,EAAE,EAAE;EAC5B,YAAY;GAAE,MAAM;GAAS,SAAS;GAAM;EAC5C,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,iBAAiB;GAAE,MAAM;GAAS,SAAS;GAAO;EAClD,cAAc,EAAE,SAAS,IAAI;EAC7B,qBAAqB,EAAE,eAAe,EAAE,EAAE;EAC1C,cAAc,EAAE,SAAS,KAAA,GAAW;EACpC,iBAAiB,EAAE,eAAe,EAAE,EAAE;EACtC,UAAU,EAAE,SAAS,KAAA,GAAW;EAChC,sBAAsB,EAAE,SAAS,SAAS;EAC1C,kBAAkB,EAAE,SAAS,GAAG;EAChC,mBAAmB,EAAE,SAAS,KAAK;EACpC;CACD,OAAO;EAAC;EAAuB;EAAmB;EAAS;EAAU;EAAY;EAAa;CAC9F,MAAM,GAAc,EAAE,MAAM,KAAU;EAExC,IAAM,IAAQ,GAER,IAAO,GAOP,IAAwB,QAAe,EAAM,iBAAiB,KAAA,EAAU,EACxE,IAAuB,EAAc,CAAC,GAAG,EAAM,oBAAoB,CAAC,EAEpE,IAAuB,QAC3B,EAAsB,QAAS,EAAM,gBAAgB,EAAE,GAAI,EAAqB,MACjF,EAKK,IAAmB,QAAe,EAAM,aAAa,KAAA,EAAU,EAC/D,IAAmB,EAAc,CAAC,GAAG,EAAM,gBAAgB,CAAC,EAE5D,IAAmB,QACvB,EAAiB,QAAS,EAAM,YAAY,EAAE,GAAI,EAAiB,MACpE,EAKK,oBAAa,IAAI,KAAuB;EAE9C,SAAS,EAAgB,GAAa,GAAgB;AACpD,KAAW,IAAI,GAAK,EAAK;;EAM3B,SAAS,EAAY,GAAsB;AAGzC,OAFA,EAAK,SAAS,EAAK,EAEf,CAAC,EAAM,WAAY;GAEvB,IAAM,IAAM,EAAK,KACX,IAAU,CAAC,GAAG,EAAqB,MAAM;AAE/C,OAAI,EAAM,UAAU;IAClB,IAAM,IAAM,EAAQ,QAAQ,EAAI;AAChC,IAAI,KAAO,KACT,EAAQ,OAAO,GAAK,EAAE,EACjB,EAAsB,UACzB,EAAqB,QAAQ,IAE/B,EAAK,uBAAuB,EAAQ,EACpC,EAAK,YAAY;KAAE,GAAG;KAAM,cAAc;KAAS,CAAC,KAEpD,EAAQ,KAAK,EAAI,EACZ,EAAsB,UACzB,EAAqB,QAAQ,IAE/B,EAAK,uBAAuB,EAAQ,EACpC,EAAK,UAAU;KAAE,GAAG;KAAM,cAAc;KAAS,CAAC;UAE/C;IACL,IAAM,IAAU,CAAC,EAAI;AAKrB,IAJK,EAAsB,UACzB,EAAqB,QAAQ,IAE/B,EAAK,uBAAuB,EAAQ,EACpC,EAAK,UAAU;KAAE,GAAG;KAAM,cAAc;KAAS,CAAC;;;EAItD,SAAS,EAAa,GAAa,GAAe;GAChD,IAAM,IAAU,CAAC,GAAG,EAAiB,MAAM,EACrC,IAAM,EAAQ,QAAQ,EAAI;AAiBhC,GAfI,KAAQ,IAAM,KACZ,EAAM,MACR,EAAQ,KAAK,EAAI,IAKV,CAAC,KAAQ,KAAO,KACzB,EAAQ,OAAO,GAAK,EAAE,EAGnB,EAAiB,UACpB,EAAiB,QAAQ,IAE3B,EAAK,mBAAmB,EAAQ,EAChC,EAAK,cAAc,EAAQ;;AAwD7B,EAlDA,QACQ,EAAM,eACX,MAAQ;AACP,GAAI,MAAQ,KAAA,MACV,EAAqB,QAAQ,CAAC,GAAG,EAAI;IAG1C,EAED,QACQ,EAAM,WACX,MAAQ;AACP,GAAI,MAAQ,KAAA,MACV,EAAiB,QAAQ,CAAC,GAAG,EAAI;IAGtC,EAGD,QACQ,EAAM,kBACX,MAAc;AACb,GAAI,KAAa,CAAC,EAAiB,UACjC,EAAiB,QAAQ,EAAE,EAC3B,EAAK,mBAAmB,EAAE,CAAC,EAC3B,EAAK,cAAc,EAAE,CAAC;IAG3B,EAsBD,EAAQ,GAjBsB;GAC5B,MAAM,QAAe,EAAM,KAAK;GAChC,OAAO,QAAe,EAAM,MAAM;GAClC,iBAAiB,QAAe,EAAM,gBAAgB;GACtD,cAAc,QAAe,EAAM,aAAa;GAChD,cAAc;GACd,UAAU;GACV,UAAU,QAAe,EAAM,SAAS;GACxC,YAAY,QAAe,EAAM,WAAW;GAC5C,sBAAsB,QAAe,EAAM,qBAAqB;GAChE,kBAAkB,QAAe,EAAM,iBAAiB;GACxD,mBAAmB,QAAe,EAAM,kBAAkB;GAC1D;GACA;GACA;GACD,CAEgC;EAKjC,IAAM,IAAc,QAAe;GACjC;GACA,WAAW,EAAM;GACjB,WAAW,EAAM;GACjB,EACE,qBAAqB,EAAM,SAAS,YAAY,EAAM,iBACvD;GACF,CAAC,EAEI,IAAW,QAAe,OAAO,EACjC,IAAkB,QAAgB,EAAM,SAAS,eAAe,eAAe,WAAY;AAEjG,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,MAAM;GAC9C,OAAO,EAAgB,EAAY,MAAM;GACzC,MAAM,EAAS;GACf,oBAAoB,EAAgB;GACpC,cAAc,EAAM;GACrB,EAAE,CACD,EAAY,EAAK,QAAQ,WAAW,EAAE,QAAQ,EAC3C,EAAW,GAAK,EAAE,EAAoB,GAAW,MAAM,EAAY,EAAM,QAAQ,OACxE,GAAY,EAAE,EAAoB,GAAW,EACnD,KAAK,EAAK,OAAQ,EAAa,MAChC,EAAE,CACA,EAAO,EAAU,CAAC,EAAK,IACnB,GAAY,EAAE,EAAa,GAAc;GACxC,KAAK;GACL,QAAQ,EAAK;GACd,EAAE,MAAM,GAAG,CAAC,SAAS,CAAC,IACtB,EAAO,EAAY,CAAC,EAAK,IACvB,GAAY,EAAE,EAAa,GAAgB;GAC1C,KAAK;GACL,OAAO,EAAK;GACZ,UAAU,EAAK;GAChB,EAAE,MAAM,GAAG,CAAC,SAAS,WAAW,CAAC,IACjC,EAAO,EAAU,CAAC,EAAK,IACrB,GAAY,EAAE,EAAa,GAAc;GACxC,KAAK;GACL,YAAY,EAAK;GACjB,OAAO,EAAK;GACZ,MAAM,EAAK;GACX,UAAU,EAAK;GACf,UAAU,EAAK;GACf,oBAAoB,EAAK;GAC1B,EAAE,MAAM,GAAG;GAAC;GAAY;GAAS;GAAQ;GAAY;GAAY;GAAmB,CAAC,KACrF,GAAY,EAAE,EAAa,GAAW;GACrC,KAAK;GACL,YAAY,EAAK;GACjB,OAAO,EAAK;GACZ,MAAM,EAAK;GACX,UAAU,EAAK;GACf,QAAS,EAAa;GACtB,OAAQ,EAAa;GACrB,OAAQ,EAAa;GACtB,EAAE,MAAM,GAAG;GAAC;GAAY;GAAS;GAAQ;GAAY;GAAU;GAAS;GAAQ,CAAC,EAC3F,EAAE,GAAG,EACN,EAAE,IAAI,EACT,CAAC,CACH,EAAE,IAAI,EAAW;;CAInB,CAAA"}
+{"version":3,"file":"design-system131.js","names":["$slots"],"sources":["../src/components/BMenu/BMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted } from 'vue';\nimport {\n  BMenuContextKey,\n  BMenuSubMenuContextKey,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuSubMenuContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  itemKey,\n  label = '',\n  icon = undefined,\n  disabled = false,\n  danger = false,\n  extra = undefined,\n  title = undefined,\n} = defineProps<{\n  /** Unique key identifying this menu item. */\n  itemKey: string;\n  /** Display label text. */\n  label?: string;\n  /** Icon name rendered before the label. */\n  icon?: string;\n  /** Whether the item is disabled. @default false */\n  disabled?: boolean;\n  /** Display with danger (red) styling. @default false */\n  danger?: boolean;\n  /** Extra content at the right side. */\n  extra?: string;\n  /** Tooltip title when collapsed. */\n  title?: string;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  icon?(): unknown;\n  extra?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Inject context\n// ─────────────────────────────────────────────\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\nconst subMenuCtx = inject<BMenuSubMenuContext | null>(BMenuSubMenuContextKey, null);\n\nconst level = computed(() => (subMenuCtx?.level ?? 0) + 1);\nconst keyPath = computed(() => [...(subMenuCtx?.keyPath ?? []), itemKey]);\n\n// Register key path with root menu\nonMounted(() => {\n  menu.registerKeyPath(itemKey, keyPath.value);\n});\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isSelected = computed(() => menu.selectedKeys.value.includes(itemKey));\n\nconst itemRole = computed(() => {\n  if (!menu.selectable.value) return 'menuitem';\n  return menu.multiple.value ? 'menuitemcheckbox' : 'menuitemradio';\n});\n\nconst paddingLeft = computed(() => {\n  if (menu.mode.value !== 'inline') return undefined;\n  if (menu.inlineCollapsed.value) return undefined;\n  return `${level.value * menu.inlineIndent.value}px`;\n});\n\nconst itemClasses = computed(() => [\n  'b-menu-item',\n  {\n    'b-menu-item--selected': isSelected.value,\n    'b-menu-item--disabled': disabled,\n    'b-menu-item--danger': danger,\n    'b-menu-item--collapsed': menu.inlineCollapsed.value,\n    'b-menu-item--horizontal': menu.mode.value === 'horizontal',\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction handleClick(e: MouseEvent) {\n  if (disabled) return;\n\n  const info: BMenuClickInfo = {\n    key: itemKey,\n    keyPath: keyPath.value,\n    domEvent: e,\n  };\n  menu.onItemClick(info);\n}\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (disabled) return;\n\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    const info: BMenuClickInfo = {\n      key: itemKey,\n      keyPath: keyPath.value,\n      domEvent: e,\n    };\n    menu.onItemClick(info);\n  }\n}\n</script>\n\n<template>\n  <li\n    :class=\"itemClasses\"\n    :style=\"{ paddingInlineStart: paddingLeft }\"\n    :role=\"itemRole\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-checked=\"menu.selectable.value ? isSelected : undefined\"\n    :title=\"title ?? (menu.inlineCollapsed.value ? label : undefined)\"\n    :data-menu-key=\"itemKey\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <span v-if=\"icon || $slots.icon\" class=\"b-menu-item__icon\" aria-hidden=\"true\">\n      <slot name=\"icon\">{{ icon }}</slot>\n    </span>\n    <span v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-item__label\">\n      <slot>{{ label }}</slot>\n    </span>\n    <span v-if=\"extra && !menu.inlineCollapsed.value\" class=\"b-menu-item__extra\">\n      <slot name=\"extra\">{{ extra }}</slot>\n    </span>\n  </li>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuItem\n   ───────────────────────────────────────────── */\n.b-menu-item {\n  display: flex;\n  align-items: center;\n  height: var(--b-menu-item-height);\n  margin-block: var(--b-menu-item-margin-block);\n  margin-inline: var(--b-menu-item-margin-inline);\n  padding-inline: var(--b-menu-item-padding-inline);\n  border-radius: var(--b-menu-item-border-radius);\n  color: var(--b-menu-item-color);\n  cursor: pointer;\n  user-select: none;\n  list-style: none;\n  outline: none;\n  position: relative;\n  transition:\n    background var(--b-menu-transition-duration),\n    color var(--b-menu-transition-duration),\n    padding var(--b-menu-transition-duration);\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item:hover:not(.b-menu-item--disabled) {\n  background: var(--b-menu-item-hover-bg);\n  color: var(--b-menu-item-hover-color);\n}\n\n.b-menu-item:focus-visible {\n  outline: 2px solid #1677ff;\n  outline-offset: -2px;\n}\n\n/* ── Selected ── */\n.b-menu-item--selected {\n  background: var(--b-menu-item-selected-bg);\n  color: var(--b-menu-item-selected-color);\n  font-weight: 500;\n}\n\n/* ── Disabled ── */\n.b-menu-item--disabled {\n  color: var(--b-menu-item-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ── Danger ── */\n.b-menu-item--danger {\n  color: var(--b-menu-danger-item-color);\n}\n\n.b-menu-item--danger:hover:not(.b-menu-item--disabled) {\n  color: var(--b-menu-danger-item-hover-color);\n  background: var(--b-menu-danger-item-active-bg);\n}\n\n.b-menu-item--danger.b-menu-item--selected {\n  background: var(--b-menu-danger-item-selected-bg);\n  color: var(--b-menu-danger-item-selected-color);\n}\n\n/* ── Collapsed ── */\n.b-menu-item--collapsed {\n  justify-content: center;\n  padding-inline: 0;\n}\n\n.b-menu-item--collapsed .b-menu-item__icon {\n  font-size: var(--b-menu-collapsed-icon-size);\n  margin-inline-end: 0;\n}\n\n/* ── Horizontal mode ── */\n.b-menu-item--horizontal {\n  margin-block: 0;\n  border-radius: var(--b-menu-horizontal-item-border-radius);\n  height: auto;\n  line-height: var(--b-menu-horizontal-line-height);\n  position: relative;\n}\n\n.b-menu-item--horizontal::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: var(--b-menu-item-padding-inline);\n  right: var(--b-menu-item-padding-inline);\n  height: var(--b-menu-active-bar-height);\n  background: transparent;\n  transition: background var(--b-menu-transition-duration);\n}\n\n.b-menu-item--horizontal:hover:not(.b-menu-item--disabled) {\n  background: var(--b-menu-horizontal-item-hover-bg);\n  color: var(--b-menu-horizontal-item-hover-color);\n}\n\n.b-menu-item--horizontal.b-menu-item--selected {\n  background: var(--b-menu-horizontal-item-selected-bg);\n  color: var(--b-menu-horizontal-item-selected-color);\n}\n\n.b-menu-item--horizontal.b-menu-item--selected::after {\n  background: var(--b-menu-horizontal-item-selected-color);\n}\n\n/* ─────────────────────────────────────────────\n   Icon & Label\n   ───────────────────────────────────────────── */\n.b-menu-item__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: var(--b-menu-icon-size);\n  margin-inline-end: var(--b-menu-icon-margin-inline-end);\n}\n\n.b-menu-item__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item__extra {\n  margin-inline-start: auto;\n  padding-inline-start: 8px;\n  color: var(--b-menu-group-title-color);\n  font-size: 12px;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu-item {\n    transition: none;\n  }\n\n  .b-menu-item--horizontal::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,IAAM,IAAO,EAAqB,EAAgB,EAC5C,IAAa,EAAmC,GAAwB,KAAK,EAE7E,IAAQ,SAAgB,GAAY,SAAS,KAAK,EAAE,EACpD,IAAU,QAAe,CAAC,GAAI,GAAY,WAAW,EAAE,EAAG,EAAA,QAAQ,CAAC;AAGzE,UAAgB;AACd,KAAK,gBAAgB,EAAA,SAAS,EAAQ,MAAM;IAC5C;EAKF,IAAM,IAAa,QAAe,EAAK,aAAa,MAAM,SAAS,EAAA,QAAQ,CAAC,EAEtE,IAAW,QACV,EAAK,WAAW,QACd,EAAK,SAAS,QAAQ,qBAAqB,kBADf,WAEnC,EAEI,IAAc,QAAe;AAC7B,SAAK,KAAK,UAAU,YACpB,GAAK,gBAAgB,MACzB,QAAO,GAAG,EAAM,QAAQ,EAAK,aAAa,MAAM;IAChD,EAEI,IAAc,QAAe,CACjC,eACA;GACE,yBAAyB,EAAW;GACpC,yBAAyB,EAAA;GACzB,uBAAuB,EAAA;GACvB,0BAA0B,EAAK,gBAAgB;GAC/C,2BAA2B,EAAK,KAAK,UAAU;GAChD,CACF,CAAC;EAKF,SAAS,EAAY,GAAe;AAClC,OAAI,EAAA,SAAU;GAEd,IAAM,IAAuB;IAC3B,KAAK,EAAA;IACL,SAAS,EAAQ;IACjB,UAAU;IACX;AACD,KAAK,YAAY,EAAK;;EAGxB,SAAS,EAAc,GAAkB;AACnC,UAAA,aAEA,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAK;AACtC,MAAE,gBAAgB;IAClB,IAAM,IAAuB;KAC3B,KAAK,EAAA;KACL,SAAS,EAAQ;KACjB,UAAU;KACX;AACD,MAAK,YAAY,EAAK;;;yBAMxB,EAqBK,MAAA;GApBF,OAAK,EAAE,EAAA,MAAW;GAClB,OAAK,EAAA,EAAA,oBAAwB,EAAA,OAAW,CAAA;GACxC,MAAM,EAAA;GACN,UAAU,EAAA,WAAQ,KAAA;GAClB,iBAAe,EAAA,YAAY,KAAA;GAC3B,gBAAc,EAAA,EAAI,CAAC,WAAW,QAAQ,EAAA,QAAa,KAAA;GACnD,OAAO,EAAA,UAAU,EAAA,EAAI,CAAC,gBAAgB,QAAQ,EAAA,QAAQ,KAAA;GACtD,iBAAe,EAAA;GACf,SAAO;GACP,WAAS;;GAEE,EAAA,QAAQA,EAAAA,OAAO,QAAA,GAAA,EAA3B,EAEO,QAFP,GAEO,CADL,EAAmC,EAAA,QAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAd,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEd,EAAA,EAAI,CAAC,gBAAgB,QAClB,EAAA,IAAA,GAAA,IADkB,GAAA,EAAlC,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;GAEJ,EAAA,SAAK,CAAK,EAAA,EAAI,CAAC,gBAAgB,SAAA,GAAA,EAA3C,EAEO,QAFP,GAEO,CADL,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system133.js

@@ -1,6 +1,6 @@
 import e from "./design-system131.js";
 /* empty css                 */
-//#region src/components/BMenu/BMenu.vue
+//#region src/components/BMenu/BMenuItem.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system133.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system133.js","names":[],"sources":["../src/components/BMenu/BMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref, watch } from 'vue';\nimport BMenuDivider from './BMenuDivider.vue';\nimport BMenuItem from './BMenuItem.vue';\nimport BMenuItemGroup from './BMenuItemGroup.vue';\nimport BMenuSubMenu from './BMenuSubMenu.vue';\nimport {\n  BMenuContextKey,\n  isDivider,\n  isItemGroup,\n  isSubMenu,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuItemUnion,\n  type BMenuMode,\n  type BMenuSelectInfo,\n  type BMenuTheme,\n  type BMenuTriggerAction,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Menu display mode. @default 'inline' */\n    mode?: BMenuMode;\n    /** Color theme. @default 'light' */\n    theme?: BMenuTheme;\n    /** Menu items data array. */\n    items?: BMenuItemUnion[];\n    /** Whether items can be selected. @default true */\n    selectable?: boolean;\n    /** Allow multiple items to be selected. @default false */\n    multiple?: boolean;\n    /** Collapsed state in inline mode. @default false */\n    inlineCollapsed?: boolean;\n    /** Indent (px) per level for inline mode. @default 24 */\n    inlineIndent?: number;\n    /** Initially selected keys (uncontrolled). */\n    defaultSelectedKeys?: string[];\n    /** Currently selected keys (controlled). */\n    selectedKeys?: string[];\n    /** Initially opened submenu keys (uncontrolled). */\n    defaultOpenKeys?: string[];\n    /** Currently opened submenu keys (controlled). */\n    openKeys?: string[];\n    /** Action to trigger submenu open. @default 'hover' */\n    triggerSubMenuAction?: BMenuTriggerAction;\n    /** Delay (ms) before showing submenu. @default 0 */\n    subMenuOpenDelay?: number;\n    /** Delay (ms) before hiding submenu. @default 100 */\n    subMenuCloseDelay?: number;\n  }>(),\n  {\n    mode: 'inline',\n    theme: 'light',\n    items: () => [],\n    selectable: true,\n    multiple: false,\n    inlineCollapsed: false,\n    inlineIndent: 24,\n    defaultSelectedKeys: () => [],\n    selectedKeys: undefined,\n    defaultOpenKeys: () => [],\n    openKeys: undefined,\n    triggerSubMenuAction: 'hover',\n    subMenuOpenDelay: 0,\n    subMenuCloseDelay: 100,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:selectedKeys': [keys: string[]];\n  'update:openKeys': [keys: string[]];\n  click: [info: BMenuClickInfo];\n  select: [info: BMenuSelectInfo];\n  deselect: [info: BMenuSelectInfo];\n  openChange: [keys: string[]];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Selection state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isSelectionControlled = computed(() => props.selectedKeys !== undefined);\nconst internalSelectedKeys = ref<string[]>([...props.defaultSelectedKeys]);\n\nconst resolvedSelectedKeys = computed(() =>\n  isSelectionControlled.value ? (props.selectedKeys ?? []) : internalSelectedKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Open state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isOpenControlled = computed(() => props.openKeys !== undefined);\nconst internalOpenKeys = ref<string[]>([...props.defaultOpenKeys]);\n\nconst resolvedOpenKeys = computed(() =>\n  isOpenControlled.value ? (props.openKeys ?? []) : internalOpenKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Key path registry (item key → full path from root)\n// ─────────────────────────────────────────────\nconst keyPathMap = new Map<string, string[]>();\n\nfunction registerKeyPath(key: string, path: string[]) {\n  keyPathMap.set(key, path);\n}\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction onItemClick(info: BMenuClickInfo) {\n  emit('click', info);\n\n  if (!props.selectable) return;\n\n  const key = info.key;\n  const current = [...resolvedSelectedKeys.value];\n\n  if (props.multiple) {\n    const idx = current.indexOf(key);\n    if (idx >= 0) {\n      current.splice(idx, 1);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('deselect', { ...info, selectedKeys: current });\n    } else {\n      current.push(key);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('select', { ...info, selectedKeys: current });\n    }\n  } else {\n    const newKeys = [key];\n    if (!isSelectionControlled.value) {\n      internalSelectedKeys.value = newKeys;\n    }\n    emit('update:selectedKeys', newKeys);\n    emit('select', { ...info, selectedKeys: newKeys });\n  }\n}\n\nfunction onOpenChange(key: string, open: boolean) {\n  const current = [...resolvedOpenKeys.value];\n  const idx = current.indexOf(key);\n\n  if (open && idx < 0) {\n    if (props.mode === 'inline') {\n      current.push(key);\n    } else {\n      // In vertical/horizontal mode, only one submenu open at a level\n      current.push(key);\n    }\n  } else if (!open && idx >= 0) {\n    current.splice(idx, 1);\n  }\n\n  if (!isOpenControlled.value) {\n    internalOpenKeys.value = current;\n  }\n  emit('update:openKeys', current);\n  emit('openChange', current);\n}\n\n// ─────────────────────────────────────────────\n// Sync controlled props\n// ─────────────────────────────────────────────\nwatch(\n  () => props.selectedKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalSelectedKeys.value = [...val];\n    }\n  },\n);\n\nwatch(\n  () => props.openKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalOpenKeys.value = [...val];\n    }\n  },\n);\n\n// When inline collapsed changes, close all submenus in uncontrolled mode\nwatch(\n  () => props.inlineCollapsed,\n  (collapsed) => {\n    if (collapsed && !isOpenControlled.value) {\n      internalOpenKeys.value = [];\n      emit('update:openKeys', []);\n      emit('openChange', []);\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Context for children\n// ─────────────────────────────────────────────\nconst context: BMenuContext = {\n  mode: computed(() => props.mode),\n  theme: computed(() => props.theme),\n  inlineCollapsed: computed(() => props.inlineCollapsed),\n  inlineIndent: computed(() => props.inlineIndent),\n  selectedKeys: resolvedSelectedKeys,\n  openKeys: resolvedOpenKeys,\n  multiple: computed(() => props.multiple),\n  selectable: computed(() => props.selectable),\n  triggerSubMenuAction: computed(() => props.triggerSubMenuAction),\n  subMenuOpenDelay: computed(() => props.subMenuOpenDelay),\n  subMenuCloseDelay: computed(() => props.subMenuCloseDelay),\n  onItemClick,\n  onOpenChange,\n  registerKeyPath,\n};\n\nprovide(BMenuContextKey, context);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-menu',\n  `b-menu--${props.mode}`,\n  `b-menu--${props.theme}`,\n  {\n    'b-menu--collapsed': props.mode === 'inline' && props.inlineCollapsed,\n  },\n]);\n\nconst ariaRole = computed(() => 'menu');\nconst ariaOrientation = computed(() => (props.mode === 'horizontal' ? 'horizontal' : 'vertical'));\n</script>\n\n<template>\n  <ul\n    :class=\"rootClasses\"\n    :role=\"ariaRole\"\n    :aria-orientation=\"ariaOrientation\"\n    :data-theme=\"props.theme\"\n  >\n    <slot>\n      <template v-for=\"item in props.items\" :key=\"item.key ?? (item as any).type\">\n        <BMenuDivider v-if=\"isDivider(item)\" :dashed=\"item.dashed\" />\n        <BMenuItemGroup\n          v-else-if=\"isItemGroup(item)\"\n          :label=\"item.label\"\n          :children=\"item.children\"\n        />\n        <BMenuSubMenu\n          v-else-if=\"isSubMenu(item)\"\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :children=\"item.children\"\n          :popup-class-name=\"item.popupClassName\"\n        />\n        <BMenuItem\n          v-else\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :danger=\"(item as any).danger\"\n          :extra=\"(item as any).extra\"\n          :title=\"(item as any).title\"\n        />\n      </template>\n    </slot>\n  </ul>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenu – Root CSS Custom Properties\n   ───────────────────────────────────────────── */\n.b-menu {\n  --b-menu-item-bg: #ffffff;\n  --b-menu-item-color: rgba(0, 0, 0, 0.88);\n  --b-menu-item-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-menu-item-hover-color: rgba(0, 0, 0, 0.88);\n  --b-menu-item-active-bg: #e6f4ff;\n  --b-menu-item-selected-bg: #e6f4ff;\n  --b-menu-item-selected-color: #0958d9;\n  --b-menu-item-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-menu-item-height: 40px;\n  --b-menu-item-border-radius: 8px;\n  --b-menu-item-margin-block: 4px;\n  --b-menu-item-margin-inline: 4px;\n  --b-menu-item-padding-inline: 16px;\n  --b-menu-icon-size: 14px;\n  --b-menu-icon-margin-inline-end: 10px;\n  --b-menu-group-title-color: rgba(0, 0, 0, 0.65);\n  --b-menu-group-title-font-size: 14px;\n  --b-menu-group-title-line-height: 1.5714;\n  --b-menu-danger-item-color: #cf1322;\n  --b-menu-danger-item-hover-color: #cf1322;\n  --b-menu-danger-item-active-bg: #fff2f0;\n  --b-menu-danger-item-selected-bg: #fff2f0;\n  --b-menu-danger-item-selected-color: #cf1322;\n  --b-menu-sub-menu-item-bg: rgba(0, 0, 0, 0.02);\n  --b-menu-sub-menu-item-border-radius: 4px;\n  --b-menu-sub-menu-item-selected-color: #0958d9;\n  --b-menu-popup-bg: #ffffff;\n  --b-menu-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-menu-popup-border-radius: 8px;\n  --b-menu-popup-z-index: 1050;\n  --b-menu-dropdown-width: 160px;\n  --b-menu-collapsed-width: 80px;\n  --b-menu-collapsed-icon-size: 16px;\n  --b-menu-active-bar-height: 2px;\n  --b-menu-active-bar-width: 3px;\n  --b-menu-active-bar-border-width: 1px;\n  --b-menu-horizontal-line-height: 46px;\n  --b-menu-horizontal-item-hover-bg: transparent;\n  --b-menu-horizontal-item-hover-color: #0958d9;\n  --b-menu-horizontal-item-selected-bg: transparent;\n  --b-menu-horizontal-item-selected-color: #0958d9;\n  --b-menu-horizontal-item-border-radius: 0;\n  --b-menu-transition-duration: 200ms;\n}\n\n/* ── Dark theme (via data-theme or dark mode) ── */\n.b-menu--dark,\n[data-prefers-color='dark'] .b-menu {\n  --b-menu-item-bg: #001529;\n  --b-menu-item-color: rgba(255, 255, 255, 0.65);\n  --b-menu-item-hover-bg: transparent;\n  --b-menu-item-hover-color: #fff;\n  --b-menu-item-active-bg: #1677ff;\n  --b-menu-item-selected-bg: #1677ff;\n  --b-menu-item-selected-color: #fff;\n  --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n  --b-menu-danger-item-color: #ff4d4f;\n  --b-menu-danger-item-hover-color: #ff7875;\n  --b-menu-danger-item-active-bg: #ff4d4f;\n  --b-menu-danger-item-selected-bg: #ff4d4f;\n  --b-menu-danger-item-selected-color: #fff;\n  --b-menu-sub-menu-item-bg: #000c17;\n  --b-menu-popup-bg: #001529;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu {\n    --b-menu-item-bg: #001529;\n    --b-menu-item-color: rgba(255, 255, 255, 0.65);\n    --b-menu-item-hover-bg: transparent;\n    --b-menu-item-hover-color: #fff;\n    --b-menu-item-active-bg: #1677ff;\n    --b-menu-item-selected-bg: #1677ff;\n    --b-menu-item-selected-color: #fff;\n    --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n    --b-menu-danger-item-color: #ff4d4f;\n    --b-menu-danger-item-hover-color: #ff7875;\n    --b-menu-danger-item-active-bg: #ff4d4f;\n    --b-menu-danger-item-selected-bg: #ff4d4f;\n    --b-menu-danger-item-selected-color: #fff;\n    --b-menu-sub-menu-item-bg: #000c17;\n    --b-menu-popup-bg: #001529;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-theme='dark'] .b-menu {\n    --b-menu-item-bg: #001529;\n    --b-menu-item-color: rgba(255, 255, 255, 0.65);\n    --b-menu-item-hover-bg: transparent;\n    --b-menu-item-hover-color: #fff;\n    --b-menu-item-active-bg: #1677ff;\n    --b-menu-item-selected-bg: #1677ff;\n    --b-menu-item-selected-color: #fff;\n    --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n    --b-menu-danger-item-color: #ff4d4f;\n    --b-menu-danger-item-hover-color: #ff7875;\n    --b-menu-danger-item-active-bg: #ff4d4f;\n    --b-menu-danger-item-selected-bg: #ff4d4f;\n    --b-menu-danger-item-selected-color: #fff;\n    --b-menu-sub-menu-item-bg: #000c17;\n    --b-menu-popup-bg: #001529;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-menu {\n  margin: 0;\n  padding: 4px;\n  list-style: none;\n  background: var(--b-menu-item-bg);\n  color: var(--b-menu-item-color);\n  font-size: 14px;\n  line-height: 1.5714;\n  box-sizing: border-box;\n  outline: none;\n  transition:\n    background var(--b-menu-transition-duration),\n    width var(--b-menu-transition-duration);\n}\n\n/* ── Inline mode ── */\n.b-menu--inline {\n  width: 100%;\n  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);\n}\n\n.b-menu--inline.b-menu--collapsed {\n  width: var(--b-menu-collapsed-width);\n}\n\n/* ── Vertical mode ── */\n.b-menu--vertical {\n  width: 100%;\n  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);\n}\n\n/* ── Horizontal mode ── */\n.b-menu--horizontal {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  border-bottom: 1px solid rgba(5, 5, 5, 0.06);\n  padding: 0 4px;\n  line-height: var(--b-menu-horizontal-line-height);\n}\n\n/* ── Dark theme border override ── */\n.b-menu--dark.b-menu--inline,\n.b-menu--dark.b-menu--vertical {\n  border-inline-end-color: transparent;\n}\n\n.b-menu--dark.b-menu--horizontal {\n  border-bottom-color: transparent;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system133.js","names":[],"sources":["../src/components/BMenu/BMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted } from 'vue';\nimport {\n  BMenuContextKey,\n  BMenuSubMenuContextKey,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuSubMenuContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  itemKey,\n  label = '',\n  icon = undefined,\n  disabled = false,\n  danger = false,\n  extra = undefined,\n  title = undefined,\n} = defineProps<{\n  /** Unique key identifying this menu item. */\n  itemKey: string;\n  /** Display label text. */\n  label?: string;\n  /** Icon name rendered before the label. */\n  icon?: string;\n  /** Whether the item is disabled. @default false */\n  disabled?: boolean;\n  /** Display with danger (red) styling. @default false */\n  danger?: boolean;\n  /** Extra content at the right side. */\n  extra?: string;\n  /** Tooltip title when collapsed. */\n  title?: string;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  icon?(): unknown;\n  extra?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Inject context\n// ─────────────────────────────────────────────\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\nconst subMenuCtx = inject<BMenuSubMenuContext | null>(BMenuSubMenuContextKey, null);\n\nconst level = computed(() => (subMenuCtx?.level ?? 0) + 1);\nconst keyPath = computed(() => [...(subMenuCtx?.keyPath ?? []), itemKey]);\n\n// Register key path with root menu\nonMounted(() => {\n  menu.registerKeyPath(itemKey, keyPath.value);\n});\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isSelected = computed(() => menu.selectedKeys.value.includes(itemKey));\n\nconst itemRole = computed(() => {\n  if (!menu.selectable.value) return 'menuitem';\n  return menu.multiple.value ? 'menuitemcheckbox' : 'menuitemradio';\n});\n\nconst paddingLeft = computed(() => {\n  if (menu.mode.value !== 'inline') return undefined;\n  if (menu.inlineCollapsed.value) return undefined;\n  return `${level.value * menu.inlineIndent.value}px`;\n});\n\nconst itemClasses = computed(() => [\n  'b-menu-item',\n  {\n    'b-menu-item--selected': isSelected.value,\n    'b-menu-item--disabled': disabled,\n    'b-menu-item--danger': danger,\n    'b-menu-item--collapsed': menu.inlineCollapsed.value,\n    'b-menu-item--horizontal': menu.mode.value === 'horizontal',\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction handleClick(e: MouseEvent) {\n  if (disabled) return;\n\n  const info: BMenuClickInfo = {\n    key: itemKey,\n    keyPath: keyPath.value,\n    domEvent: e,\n  };\n  menu.onItemClick(info);\n}\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (disabled) return;\n\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    const info: BMenuClickInfo = {\n      key: itemKey,\n      keyPath: keyPath.value,\n      domEvent: e,\n    };\n    menu.onItemClick(info);\n  }\n}\n</script>\n\n<template>\n  <li\n    :class=\"itemClasses\"\n    :style=\"{ paddingInlineStart: paddingLeft }\"\n    :role=\"itemRole\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-checked=\"menu.selectable.value ? isSelected : undefined\"\n    :title=\"title ?? (menu.inlineCollapsed.value ? label : undefined)\"\n    :data-menu-key=\"itemKey\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <span v-if=\"icon || $slots.icon\" class=\"b-menu-item__icon\" aria-hidden=\"true\">\n      <slot name=\"icon\">{{ icon }}</slot>\n    </span>\n    <span v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-item__label\">\n      <slot>{{ label }}</slot>\n    </span>\n    <span v-if=\"extra && !menu.inlineCollapsed.value\" class=\"b-menu-item__extra\">\n      <slot name=\"extra\">{{ extra }}</slot>\n    </span>\n  </li>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuItem\n   ───────────────────────────────────────────── */\n.b-menu-item {\n  display: flex;\n  align-items: center;\n  height: var(--b-menu-item-height);\n  margin-block: var(--b-menu-item-margin-block);\n  margin-inline: var(--b-menu-item-margin-inline);\n  padding-inline: var(--b-menu-item-padding-inline);\n  border-radius: var(--b-menu-item-border-radius);\n  color: var(--b-menu-item-color);\n  cursor: pointer;\n  user-select: none;\n  list-style: none;\n  outline: none;\n  position: relative;\n  transition:\n    background var(--b-menu-transition-duration),\n    color var(--b-menu-transition-duration),\n    padding var(--b-menu-transition-duration);\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item:hover:not(.b-menu-item--disabled) {\n  background: var(--b-menu-item-hover-bg);\n  color: var(--b-menu-item-hover-color);\n}\n\n.b-menu-item:focus-visible {\n  outline: 2px solid #1677ff;\n  outline-offset: -2px;\n}\n\n/* ── Selected ── */\n.b-menu-item--selected {\n  background: var(--b-menu-item-selected-bg);\n  color: var(--b-menu-item-selected-color);\n  font-weight: 500;\n}\n\n/* ── Disabled ── */\n.b-menu-item--disabled {\n  color: var(--b-menu-item-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ── Danger ── */\n.b-menu-item--danger {\n  color: var(--b-menu-danger-item-color);\n}\n\n.b-menu-item--danger:hover:not(.b-menu-item--disabled) {\n  color: var(--b-menu-danger-item-hover-color);\n  background: var(--b-menu-danger-item-active-bg);\n}\n\n.b-menu-item--danger.b-menu-item--selected {\n  background: var(--b-menu-danger-item-selected-bg);\n  color: var(--b-menu-danger-item-selected-color);\n}\n\n/* ── Collapsed ── */\n.b-menu-item--collapsed {\n  justify-content: center;\n  padding-inline: 0;\n}\n\n.b-menu-item--collapsed .b-menu-item__icon {\n  font-size: var(--b-menu-collapsed-icon-size);\n  margin-inline-end: 0;\n}\n\n/* ── Horizontal mode ── */\n.b-menu-item--horizontal {\n  margin-block: 0;\n  border-radius: var(--b-menu-horizontal-item-border-radius);\n  height: auto;\n  line-height: var(--b-menu-horizontal-line-height);\n  position: relative;\n}\n\n.b-menu-item--horizontal::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: var(--b-menu-item-padding-inline);\n  right: var(--b-menu-item-padding-inline);\n  height: var(--b-menu-active-bar-height);\n  background: transparent;\n  transition: background var(--b-menu-transition-duration);\n}\n\n.b-menu-item--horizontal:hover:not(.b-menu-item--disabled) {\n  background: var(--b-menu-horizontal-item-hover-bg);\n  color: var(--b-menu-horizontal-item-hover-color);\n}\n\n.b-menu-item--horizontal.b-menu-item--selected {\n  background: var(--b-menu-horizontal-item-selected-bg);\n  color: var(--b-menu-horizontal-item-selected-color);\n}\n\n.b-menu-item--horizontal.b-menu-item--selected::after {\n  background: var(--b-menu-horizontal-item-selected-color);\n}\n\n/* ─────────────────────────────────────────────\n   Icon & Label\n   ───────────────────────────────────────────── */\n.b-menu-item__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: var(--b-menu-icon-size);\n  margin-inline-end: var(--b-menu-icon-margin-inline-end);\n}\n\n.b-menu-item__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item__extra {\n  margin-inline-start: auto;\n  padding-inline-start: 8px;\n  color: var(--b-menu-group-title-color);\n  font-size: 12px;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu-item {\n    transition: none;\n  }\n\n  .b-menu-item--horizontal::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system134.js

@@ -1,98 +1,45 @@
-import { BMessageType as e } from "./design-system3.js";
-import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, onUnmounted as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, watch as y, withCtx as b } from "vue";
-//#region src/components/BMessage/BMessage.vue?vue&type=script&setup=true&lang.ts
-var x = [
-	"id",
-	"role",
-	"aria-live"
-], S = {
+import { BMenuContextKey as e } from "./design-system130.js";
+import t from "./design-system133.js";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, inject as l, openBlock as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
+//#region src/components/BMenu/BMenuItemGroup.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	class: "b-menu-item-group",
+	role: "presentation"
+}, g = {
 	key: 0,
-	class: "b-message__icon",
-	"aria-hidden": "true"
-}, C = ["d"], w = { class: "b-message__content" }, T = /* @__PURE__ */ u({
-	__name: "BMessage",
+	class: "b-menu-item-group__title",
+	role: "presentation"
+}, _ = ["aria-label"], v = /* @__PURE__ */ c({
+	__name: "BMenuItemGroup",
 	props: {
-		type: { default: () => e.Info },
-		content: { default: "" },
-		duration: { default: 3 },
-		showIcon: {
-			type: Boolean,
-			default: !0
-		},
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		}
+		label: { default: "" },
+		children: { default: () => [] }
 	},
-	emits: [
-		"close",
-		"afterClose",
-		"update:modelValue"
-	],
-	setup(u, { expose: T, emit: E }) {
-		let D = E, O = v(), k = m(!1), A = r(() => u.modelValue === void 0 ? k.value : u.modelValue), j = r(() => u.modelValue !== void 0), M = r(() => u.type === e.Error || u.type === e.Warning ? "alert" : "status"), N = r(() => {
-			switch (u.type) {
-				case e.Success: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z";
-				case e.Warning: return "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z";
-				case e.Error: return "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z";
-				case e.Loading: return "M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z";
-				default: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z";
-			}
-		}), P = null;
-		function F() {
-			I(), u.duration > 0 && (P = setTimeout(() => {
-				R();
-			}, u.duration * 1e3));
-		}
-		function I() {
-			P !== null && (clearTimeout(P), P = null);
-		}
-		function L() {
-			j.value ? D("update:modelValue", !0) : k.value = !0;
-		}
-		function R() {
-			D("close"), j.value ? D("update:modelValue", !1) : k.value = !1;
-		}
-		function z() {
-			D("afterClose");
-		}
-		function B() {
-			I();
-		}
-		function V() {
-			F();
-		}
-		return f(() => {
-			I();
-		}), y(A, (e) => {
-			e ? F() : I();
-		}, { immediate: !0 }), T({
-			open: L,
-			close: R
-		}), (e, r) => (p(), i(t, { to: "body" }, [l(n, {
-			name: "b-message-fade",
-			onAfterLeave: z
-		}, {
-			default: b(() => [A.value ? (p(), o("div", {
-				key: 0,
-				id: _(O),
-				class: d(["b-message", [`b-message--${u.type}`, { "b-message--with-icon": u.showIcon }]]),
-				role: M.value,
-				"aria-live": M.value === "alert" ? "assertive" : "polite",
-				"aria-atomic": !0,
-				onMouseenter: B,
-				onMouseleave: V
-			}, [u.showIcon ? (p(), o("span", S, [h(e.$slots, "icon", {}, () => [(p(), o("svg", {
-				class: d(["b-message__icon-svg", { "b-message__icon-svg--spin": u.type === "loading" }]),
-				viewBox: "0 0 24 24",
-				xmlns: "http://www.w3.org/2000/svg",
-				focusable: "false"
-			}, [s("path", { d: N.value }, null, 8, C)], 2))])])) : a("", !0), s("span", w, [h(e.$slots, "default", {}, () => [c(g(u.content), 1)])])], 42, x)) : a("", !0)]),
-			_: 3
-		})]));
+	setup(c) {
+		let v = c, y = l(e);
+		return (e, c) => (u(), a("li", h, [m(y).inlineCollapsed.value ? i("", !0) : (u(), a("div", g, [f(e.$slots, "title", {}, () => [s(p(v.label), 1)])])), o("ul", {
+			class: "b-menu-item-group__list",
+			role: "group",
+			"aria-label": v.label
+		}, [f(e.$slots, "default", {}, () => [(u(!0), a(n, null, d(v.children, (e) => (u(), r(t, {
+			key: e.key,
+			"item-key": e.key,
+			label: e.label,
+			icon: e.icon,
+			disabled: e.disabled,
+			danger: e.danger,
+			extra: e.extra
+		}, null, 8, [
+			"item-key",
+			"label",
+			"icon",
+			"disabled",
+			"danger",
+			"extra"
+		]))), 128))])], 8, _)]));
 	}
 });
 //#endregion
-export { T as default };
+export { v as default };
 
 //# sourceMappingURL=design-system134.js.map

package/dist/design-system134.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system134.js","names":[],"sources":["../src/components/BMessage/BMessage.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"id\", \"role\", \"aria-live\"]\nconst _hoisted_2 = {\n  key: 0,\n  class: \"b-message__icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"d\"]\nconst _hoisted_4 = { class: \"b-message__content\" }\n\nimport { BMessageType } from '@/types.ts';\nimport { computed, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BMessage',\n  props: {\n    type: { default: () => (BMessageType.Info) },\n    content: { default: '' },\n    duration: { default: 3 },\n    showIcon: { type: Boolean, default: true },\n    modelValue: { type: Boolean, default: () => (undefined) }\n  },\n  emits: [\"close\", \"afterClose\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst messageId = useId();\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (__props.modelValue !== undefined ? __props.modelValue : internalVisible.value));\n\nconst isControlled = computed(() => __props.modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  __props.type === BMessageType.Error || __props.type === BMessageType.Warning ? 'alert' : 'status',\n);\n\n/** Map type → inline SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (__props.type) {\n    case BMessageType.Success:\n      // circle-check\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BMessageType.Warning:\n      // triangle-exclamation\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BMessageType.Error:\n      // circle-xmark\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    case BMessageType.Loading:\n      // spinner (circle arc)\n      return 'M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z';\n    default:\n      // circle-info\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\n\n\n// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (__props.duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, __props.duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Start / clear auto-close timer whenever visibility changes\nwatch(\n  isVisible,\n  (visible) => {\n    if (visible) {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// Expose open & close for imperative usage\n__expose({ open, close });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n    _createVNode(_Transition, {\n      name: \"b-message-fade\",\n      onAfterLeave: onAfterLeave\n    }, {\n      default: _withCtx(() => [\n        (isVisible.value)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 0,\n              id: _unref(messageId),\n              class: _normalizeClass([\"b-message\", [\n          `b-message--${__props.type}`,\n          {\n            'b-message--with-icon': __props.showIcon,\n          },\n        ]]),\n              role: ariaRole.value,\n              \"aria-live\": ariaRole.value === 'alert' ? 'assertive' : 'polite',\n              \"aria-atomic\": true,\n              onMouseenter: onMouseEnter,\n              onMouseleave: onMouseLeave\n            }, [\n              (__props.showIcon)\n                ? (_openBlock(), _createElementBlock(\"span\", _hoisted_2, [\n                    _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n                      (_openBlock(), _createElementBlock(\"svg\", {\n                        class: _normalizeClass([\"b-message__icon-svg\", { 'b-message__icon-svg--spin': __props.type === 'loading' }]),\n                        viewBox: \"0 0 24 24\",\n                        xmlns: \"http://www.w3.org/2000/svg\",\n                        focusable: \"false\"\n                      }, [\n                        _createElementVNode(\"path\", { d: iconPath.value }, null, 8, _hoisted_3)\n                      ], 2))\n                    ])\n                  ]))\n                : _createCommentVNode(\"\", true),\n              _createElementVNode(\"span\", _hoisted_4, [\n                _renderSlot(_ctx.$slots, \"default\", {}, () => [\n                  _createTextVNode(_toDisplayString(__props.content), 1)\n                ])\n              ])\n            ], 42, _hoisted_1))\n          : _createCommentVNode(\"\", true)\n      ]),\n      _: 3\n    })\n  ]))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system134.js","names":[],"sources":["../src/components/BMenu/BMenuItemGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject } from 'vue';\nimport BMenuItem from './BMenuItem.vue';\nimport { BMenuContextKey, type BMenuContext, type BMenuItemType } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Group title label. */\n    label?: string;\n    /** Items within this group. */\n    children?: BMenuItemType[];\n  }>(),\n  {\n    label: '',\n    children: () => [],\n  },\n);\n\ndefineSlots<{\n  default?(): unknown;\n  title?(): unknown;\n}>();\n\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\n</script>\n\n<template>\n  <li class=\"b-menu-item-group\" role=\"presentation\">\n    <div v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-item-group__title\" role=\"presentation\">\n      <slot name=\"title\">{{ props.label }}</slot>\n    </div>\n    <ul class=\"b-menu-item-group__list\" role=\"group\" :aria-label=\"props.label\">\n      <slot>\n        <BMenuItem\n          v-for=\"item in props.children\"\n          :key=\"item.key\"\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :danger=\"item.danger\"\n          :extra=\"item.extra\"\n        />\n      </slot>\n    </ul>\n  </li>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuItemGroup\n   ───────────────────────────────────────────── */\n.b-menu-item-group {\n  list-style: none;\n}\n\n.b-menu-item-group__title {\n  padding: 8px 16px 4px;\n  color: var(--b-menu-group-title-color);\n  font-size: var(--b-menu-group-title-font-size);\n  line-height: var(--b-menu-group-title-line-height);\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item-group__list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAkBR,IAAO,EAAqB,EAAgB;yBAIhD,EAkBK,MAlBL,GAkBK,CAjBS,EAAA,EAAI,CAAC,gBAAgB,QACE,EAAA,IAAA,GAAA,IADF,GAAA,EAAjC,EAEM,OAFN,GAEM,CADJ,EAA2C,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAArB,EAAM,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,GAEnC,EAaK,MAAA;GAbD,OAAM;GAA0B,MAAK;GAAS,cAAY,EAAM;MAClE,EAWO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EAVL,EASE,GAAA,MAAA,EARe,EAAM,WAAd,YADT,EASE,GAAA;GAPC,KAAK,EAAK;GACV,YAAU,EAAK;GACf,OAAO,EAAK;GACZ,MAAM,EAAK;GACX,UAAU,EAAK;GACf,QAAQ,EAAK;GACb,OAAO,EAAK"}

package/dist/design-system136.js

@@ -1,6 +1,6 @@
 import e from "./design-system134.js";
 /* empty css                 */
-//#region src/components/BMessage/BMessage.vue
+//#region src/components/BMenu/BMenuItemGroup.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system136.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system136.js","names":[],"sources":["../src/components/BMessage/BMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BMessageType } from '@/types.ts';\nimport { computed, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = BMessageType.Info,\n  content = '',\n  duration = 3,\n  showIcon = true,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Message type - controls icon and colour scheme.\n   * @default 'info'\n   */\n  type?: `${BMessageType}`;\n  /** The message content text (also accepts the default slot). */\n  content?: string;\n  /**\n   * Time (in seconds) before auto-close. Set to `0` to disable auto-close.\n   * @default 3\n   */\n  duration?: number;\n  /** Show the built-in status icon. @default true */\n  showIcon?: boolean;\n  /**\n   * Controlled visibility - when provided the component operates in\n   * controlled mode; otherwise it manages its own visibility.\n   * Bind with `v-model`.\n   */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired synchronously when the message starts closing. */\n  (e: 'close'): void;\n  /** Fired after the leave-transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst messageId = useId();\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (modelValue !== undefined ? modelValue : internalVisible.value));\n\nconst isControlled = computed(() => modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  type === BMessageType.Error || type === BMessageType.Warning ? 'alert' : 'status',\n);\n\n/** Map type → inline SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BMessageType.Success:\n      // circle-check\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BMessageType.Warning:\n      // triangle-exclamation\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BMessageType.Error:\n      // circle-xmark\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    case BMessageType.Loading:\n      // spinner (circle arc)\n      return 'M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z';\n    default:\n      // circle-info\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\ndefineSlots<{\n  /** Overrides the `content` prop. */\n  default?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Start / clear auto-close timer whenever visibility changes\nwatch(\n  isVisible,\n  (visible) => {\n    if (visible) {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// Expose open & close for imperative usage\ndefineExpose({ open, close });\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-message-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"messageId\"\n        class=\"b-message\"\n        :class=\"[\n          `b-message--${type}`,\n          {\n            'b-message--with-icon': showIcon,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaRole === 'alert' ? 'assertive' : 'polite'\"\n        :aria-atomic=\"true\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- Status icon -->\n        <span v-if=\"showIcon\" class=\"b-message__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <svg\n              class=\"b-message__icon-svg\"\n              :class=\"{ 'b-message__icon-svg--spin': type === 'loading' }\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Content -->\n        <span class=\"b-message__content\">\n          <slot>{{ content }}</slot>\n        </span>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-message {\n  /* Layout */\n  --b-message-padding-v: 0.625rem;\n  --b-message-padding-h: 1rem;\n  --b-message-border-radius: 0.5rem;\n  --b-message-icon-size: 1rem;\n  --b-message-gap: 0.5rem;\n  --b-message-font-size: 0.875rem;\n  --b-message-max-width: 32rem;\n\n  /* Colours - info (default) */\n  --b-message-bg: #ffffff;\n  --b-message-border-color: oklch(90% 0.02 240);\n  --b-message-color: oklch(30% 0.02 240);\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  /* Animation */\n  --b-message-transition-duration: 300ms;\n  --b-message-top: 8px;\n}\n\n/* ── Variant colour tokens ── */\n.b-message--success {\n  --b-message-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-message--warning {\n  --b-message-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-message--error {\n  --b-message-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n.b-message--loading {\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-message {\n  --b-message-bg: oklch(22% 0.02 240);\n  --b-message-border-color: oklch(35% 0.03 240);\n  --b-message-color: oklch(88% 0.02 240);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-message {\n    --b-message-bg: oklch(22% 0.02 240);\n    --b-message-border-color: oklch(35% 0.03 240);\n    --b-message-color: oklch(88% 0.02 240);\n    --b-message-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-message {\n  position: fixed;\n  top: var(--b-message-top);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1010;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-message-gap);\n  padding: var(--b-message-padding-v) var(--b-message-padding-h);\n  border-radius: var(--b-message-border-radius);\n  background-color: var(--b-message-bg);\n  color: var(--b-message-color);\n  font-size: var(--b-message-font-size);\n  line-height: 1.5;\n  box-shadow: var(--b-message-shadow);\n  box-sizing: border-box;\n  max-width: var(--b-message-max-width);\n  word-break: break-word;\n  pointer-events: auto;\n}\n\n/* ── Icon ── */\n.b-message__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  color: var(--b-message-icon-color);\n  line-height: 1;\n}\n\n.b-message__icon-svg {\n  width: var(--b-message-icon-size);\n  height: var(--b-message-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* Loading spinner animation */\n.b-message__icon-svg--spin {\n  animation: b-message-spin 1s linear infinite;\n}\n\n@keyframes b-message-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ── Content ── */\n.b-message__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Transition (slide-down + fade)\n   ───────────────────────────────────────────── */\n.b-message-fade-enter-active,\n.b-message-fade-leave-active {\n  transition:\n    opacity var(--b-message-transition-duration, 300ms) ease,\n    transform var(--b-message-transition-duration, 300ms) ease;\n}\n\n.b-message-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n.b-message-fade-enter-to {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-from {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-message-fade-enter-active,\n  .b-message-fade-leave-active {\n    transition: opacity var(--b-message-transition-duration, 300ms) ease;\n  }\n\n  .b-message-fade-enter-from,\n  .b-message-fade-leave-to {\n    transform: translateX(-50%);\n  }\n\n  .b-message__icon-svg--spin {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system136.js","names":[],"sources":["../src/components/BMenu/BMenuItemGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject } from 'vue';\nimport BMenuItem from './BMenuItem.vue';\nimport { BMenuContextKey, type BMenuContext, type BMenuItemType } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Group title label. */\n    label?: string;\n    /** Items within this group. */\n    children?: BMenuItemType[];\n  }>(),\n  {\n    label: '',\n    children: () => [],\n  },\n);\n\ndefineSlots<{\n  default?(): unknown;\n  title?(): unknown;\n}>();\n\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\n</script>\n\n<template>\n  <li class=\"b-menu-item-group\" role=\"presentation\">\n    <div v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-item-group__title\" role=\"presentation\">\n      <slot name=\"title\">{{ props.label }}</slot>\n    </div>\n    <ul class=\"b-menu-item-group__list\" role=\"group\" :aria-label=\"props.label\">\n      <slot>\n        <BMenuItem\n          v-for=\"item in props.children\"\n          :key=\"item.key\"\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :danger=\"item.danger\"\n          :extra=\"item.extra\"\n        />\n      </slot>\n    </ul>\n  </li>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuItemGroup\n   ───────────────────────────────────────────── */\n.b-menu-item-group {\n  list-style: none;\n}\n\n.b-menu-item-group__title {\n  padding: 8px 16px 4px;\n  color: var(--b-menu-group-title-color);\n  font-size: var(--b-menu-group-title-font-size);\n  line-height: var(--b-menu-group-title-line-height);\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.b-menu-item-group__list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n</style>\n"],"mappings":""}