@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system124.js

@@ -1,8 +1,277 @@
-import e from "./design-system122.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenuItem.vue
-var t = e;
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { BMentionsStatus as n, BMentionsVariant as r } from "./design-system123.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as ee, useCssVars as x, useModel as te, watch as S, withModifiers as C } from "vue";
+//#region src/components/BMentions/BMentions.vue?vue&type=script&setup=true&lang.ts
+var w = [
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+], T = [
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"rows",
+	"aria-label",
+	"aria-activedescendant"
+], E = ["id", "aria-label"], D = {
+	key: 0,
+	class: "b-mentions__options"
+}, O = [
+	"id",
+	"data-active",
+	"aria-selected",
+	"aria-disabled",
+	"onMousedown",
+	"onMouseenter"
+], k = {
+	key: 1,
+	class: "b-mentions__not-found"
+}, A = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "BMentions",
+	props: /* @__PURE__ */ d({
+		options: { default: () => [] },
+		size: { default: () => e.Medium },
+		variant: { default: () => r.Outlined },
+		placement: {},
+		prefix: { default: "@" },
+		split: { default: " " },
+		autoSize: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		allowClear: {
+			type: Boolean,
+			default: !1
+		},
+		filterOption: {
+			type: [Boolean, Function],
+			default: !0
+		},
+		notFoundContent: { default: "Not Found" },
+		disabled: { type: Boolean },
+		readOnly: { type: Boolean },
+		status: {},
+		placeholder: {},
+		rows: { default: 3 }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ d([
+		"change",
+		"select",
+		"search",
+		"focus",
+		"blur",
+		"clear",
+		"resize",
+		"popupScroll"
+	], ["update:modelValue"]),
+	setup(e, { expose: r, emit: u }) {
+		x((e) => ({ v21fd39a6: N.value }));
+		let d = ee(), A = u, j = te(e, "modelValue"), { componentUID: M } = t(), N = a(() => `--b-mentions-anchor-${M.value}`), P = a(() => `b-mentions-listbox-${M.value}`), F = g(null), I = g(null), L = g(!1), R = g(!1), z = g(-1), B = g(!1), V = g(""), H = g(""), U = g(0), W = a(() => Array.isArray(e.prefix) ? e.prefix : [e.prefix]), G = a(() => {
+			let t = H.value.toLowerCase();
+			return e.filterOption ? typeof e.filterOption == "function" ? e.options.filter((n) => e.filterOption(t, n)) : t ? e.options.filter((e) => (e.label ?? e.value).toLowerCase().includes(t)) : e.options : e.options;
+		}), K = a(() => !B.value || G.value.length === 0 && e.notFoundContent === null ? !1 : R.value), q = (e) => e.label ?? e.value;
+		function J() {
+			R.value || I.value?.showPopover();
+		}
+		function Y() {
+			R.value && I.value?.hidePopover();
+		}
+		function X({ newState: e }) {
+			let t = e === "open";
+			R.value = t, t && G.value.length > 0 ? z.value = 0 : t || (z.value = -1, B.value = !1);
+		}
+		function Z(t, n) {
+			for (let r of W.value) {
+				let i = t.slice(0, n), a = i.lastIndexOf(r);
+				if (a < 0) continue;
+				let o = i.slice(a + r.length);
+				if (!/\s/.test(o) && (a === 0 || t[a - 1] === e.split || /\s/.test(t[a - 1]))) return {
+					start: a,
+					prefix: r
+				};
+			}
+			return null;
+		}
+		function ne(e, t) {
+			let n = Z(e, t);
+			n ? (B.value = !0, V.value = n.prefix, U.value = n.start, H.value = e.slice(n.start + n.prefix.length, t), A("search", H.value, n.prefix), p(() => J())) : Q();
+		}
+		function Q() {
+			Y(), B.value = !1, H.value = "", V.value = "", U.value = 0;
+		}
+		function $(t) {
+			if (t.disabled) return;
+			let n = F.value;
+			if (!n) return;
+			let r = j.value ?? "", i = n.selectionStart, a = r.slice(0, U.value), o = r.slice(i), s = `${V.value}${t.value}`, c = o && !o.startsWith(e.split) && e.split, l = `${a}${s}${c ? e.split : ""}${o}`;
+			j.value = l, A("change", l), A("select", t, V.value), Q();
+			let u = a.length + s.length + (c ? e.split.length : 0);
+			p(() => {
+				n.focus(), n.setSelectionRange(u, u);
+			});
+		}
+		function re(e) {
+			let t = e.target, n = t.value;
+			j.value = n, A("change", n);
+			let r = t.selectionStart;
+			ne(n, r), le();
+		}
+		function ie(e) {
+			L.value = !0, A("focus", e);
+		}
+		function ae(e) {
+			let t = e.relatedTarget;
+			I.value?.contains(t) || (L.value = !1, A("blur", e), Q());
+		}
+		function oe(e) {
+			if (K.value) switch (e.key) {
+				case "ArrowDown": {
+					e.preventDefault();
+					let t = G.value;
+					if (t.length === 0) return;
+					let n = z.value + 1;
+					for (let e = 0; e < t.length; e++) {
+						let r = (n + e) % t.length;
+						if (!t[r].disabled) {
+							z.value = r;
+							break;
+						}
+					}
+					break;
+				}
+				case "ArrowUp": {
+					e.preventDefault();
+					let t = G.value;
+					if (t.length === 0) return;
+					let n = z.value - 1;
+					for (let e = 0; e < t.length; e++) {
+						let r = ((n - e) % t.length + t.length) % t.length;
+						if (!t[r].disabled) {
+							z.value = r;
+							break;
+						}
+					}
+					break;
+				}
+				case "Enter":
+					if (e.preventDefault(), z.value >= 0) {
+						let e = G.value[z.value];
+						e && !e.disabled && $(e);
+					}
+					break;
+				case "Escape":
+					e.preventDefault(), Q();
+					break;
+			}
+		}
+		function se() {
+			j.value = "", A("change", ""), A("clear"), Q(), F.value?.focus();
+		}
+		function ce(e) {
+			A("popupScroll", e);
+		}
+		function le() {
+			if (!e.autoSize || !F.value) return;
+			let t = F.value;
+			t.style.height = "auto";
+			let n = typeof e.autoSize == "object" ? e.autoSize : {}, r = parseFloat(getComputedStyle(t).lineHeight) || 20, i = t.scrollHeight;
+			n.minRows && (i = Math.max(i, n.minRows * r)), n.maxRows && (i = Math.min(i, n.maxRows * r)), t.style.height = `${i}px`, A("resize", {
+				width: t.offsetWidth,
+				height: i
+			});
+		}
+		return S(z, () => {
+			p(() => {
+				(I.value?.querySelector("[data-active=\"true\"]"))?.scrollIntoView({ block: "nearest" });
+			});
+		}), S(j, (e) => {
+			F.value && F.value.value !== e && (F.value.value = e ?? "");
+		}), r({
+			focus: () => F.value?.focus(),
+			blur: () => F.value?.blur()
+		}), (t, r) => (h(), s("div", {
+			class: m(["b-mentions", [
+				`b-mentions--${e.size}`,
+				`b-mentions--${e.variant}`,
+				{
+					"b-mentions--focused": L.value,
+					"b-mentions--disabled": e.disabled,
+					"b-mentions--error": e.status === b(n).Error,
+					"b-mentions--warning": e.status === b(n).Warning,
+					"b-mentions--has-clear": e.allowClear
+				}
+			]]),
+			role: "combobox",
+			"aria-label": e.placeholder || "Mentions input",
+			"aria-expanded": K.value,
+			"aria-haspopup": "listbox",
+			"aria-controls": K.value ? P.value : void 0
+		}, [
+			c("textarea", f({
+				ref_key: "textareaRef",
+				ref: F
+			}, b(d), {
+				value: j.value,
+				class: "b-mentions__textarea",
+				placeholder: e.placeholder,
+				disabled: e.disabled,
+				readonly: e.readOnly,
+				rows: e.autoSize ? void 0 : e.rows,
+				"aria-label": e.placeholder || "Mentions input",
+				autocomplete: "off",
+				"aria-activedescendant": z.value >= 0 ? `${P.value}-option-${z.value}` : void 0,
+				"aria-autocomplete": "list",
+				onInput: re,
+				onFocus: ie,
+				onBlur: ae,
+				onKeydown: oe
+			}), null, 16, T),
+			e.allowClear && j.value && !e.disabled ? (h(), s("button", {
+				key: 0,
+				type: "button",
+				class: "b-mentions__clear",
+				"aria-label": "Clear input",
+				tabindex: "-1",
+				onMousedown: C(se, ["prevent"])
+			}, null, 32)) : o("", !0),
+			B.value || R.value ? (h(), s("div", {
+				key: 1,
+				ref_key: "menuRef",
+				ref: I,
+				id: P.value,
+				class: "b-mentions__dropdown",
+				popover: "manual",
+				role: "listbox",
+				"aria-label": `Mention suggestions for ${V.value}`,
+				onToggle: X,
+				onScroll: ce
+			}, [G.value.length > 0 ? (h(), s("ul", D, [(h(!0), s(i, null, _(G.value, (e, n) => (h(), s("li", {
+				key: e.value,
+				id: `${P.value}-option-${n}`,
+				class: m(["b-mentions__option", {
+					"b-mentions__option--active": n === z.value && !e.disabled,
+					"b-mentions__option--disabled": e.disabled
+				}]),
+				"data-active": n === z.value,
+				"aria-selected": n === z.value,
+				"aria-disabled": e.disabled ?? !1,
+				role: "option",
+				onMousedown: C((t) => $(e), ["prevent"]),
+				onMouseenter: (e) => z.value = n
+			}, [v(t.$slots, "option", {
+				option: e,
+				index: n
+			}, () => [l(y(q(e)), 1)], !0)], 42, O))), 128))])) : e.notFoundContent ? (h(), s("div", k, [v(t.$slots, "notFoundContent", {}, () => [l(y(e.notFoundContent), 1)], !0)])) : o("", !0)], 40, E)) : o("", !0)
+		], 10, w));
+	}
+});
 //#endregion
-export { t as default };
+export { A as default };
 
 //# sourceMappingURL=design-system124.js.map

package/dist/design-system124.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system124.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":""}
+{"version":3,"file":"design-system124.js","names":[],"sources":["../src/components/BMentions/BMentions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\n\nimport { BMentionsStatus, BMentionsVariant, type BMentionsOption } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BMentionsVariant.Outlined,\n  prefix = '@',\n  split = ' ',\n  autoSize = false,\n  allowClear = false,\n  filterOption = true,\n  notFoundContent = 'Not Found',\n  placeholder,\n  rows = 3,\n} = defineProps<{\n  /** Data source for mention suggestions. */\n  options?: BMentionsOption[];\n  /** Size of the textarea. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BMentionsVariant}`;\n  /** Popup positioning relative to cursor. */\n  placement?: 'top' | 'bottom';\n  /** Trigger character(s) for mention lookup. */\n  prefix?: string | string[];\n  /** Delimiter character(s) inserted before/after mention. */\n  split?: string;\n  /** Auto-resize the textarea height. Can be boolean or { minRows, maxRows }. */\n  autoSize?: boolean | { minRows?: number; maxRows?: number };\n  /** Show clear button when there is content. */\n  allowClear?: boolean;\n  /** Filter options by search text. `true` for default filter, function for custom. */\n  filterOption?: boolean | ((search: string, option: BMentionsOption) => boolean);\n  /** Content shown when no results match. Set to `null` to hide dropdown when empty. */\n  notFoundContent?: string | null;\n  /** Whether the textarea is disabled. */\n  disabled?: boolean;\n  /** Whether the textarea is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BMentionsStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Number of visible text lines (when autoSize is false). */\n  rows?: number;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the input value changes. */\n  change: [value: string];\n  /** Fired when an option is selected. */\n  select: [option: BMentionsOption, prefix: string];\n  /** Fired when a prefix character is typed and search begins. */\n  search: [text: string, prefix: string];\n  /** Fired when input gains focus. */\n  focus: [event: FocusEvent];\n  /** Fired when input loses focus. */\n  blur: [event: FocusEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired on textarea resize (when autoSize is active). */\n  resize: [size: { width: number; height: number }];\n  /** Fired during popup scroll. */\n  popupScroll: [event: Event];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-mentions-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-mentions-listbox-${componentUID.value}`);\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isFocused = ref(false);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst measuring = ref(false);\nconst measurePrefix = ref('');\nconst measureText = ref('');\nconst measureStart = ref(0);\n\nconst prefixes = computed(() => (Array.isArray(prefix) ? prefix : [prefix]));\n\nconst filteredOptions = computed(() => {\n  const search = measureText.value.toLowerCase();\n  if (!filterOption) return options;\n  if (typeof filterOption === 'function') {\n    return options.filter((opt) => filterOption(search, opt));\n  }\n  if (!search) return options;\n  return options.filter((opt) => {\n    const text = (opt.label ?? opt.value).toLowerCase();\n    return text.includes(search);\n  });\n});\n\nconst showDropdown = computed(() => {\n  if (!measuring.value) return false;\n  if (filteredOptions.value.length === 0 && notFoundContent === null) return false;\n  return isOpen.value;\n});\n\nconst getOptionLabel = (opt: BMentionsOption) => opt.label ?? opt.value;\n\nfunction openMenu() {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n}\n\nfunction closeMenu() {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n}\n\nfunction handleToggle({ newState }: ToggleEvent) {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  if (nowOpen && filteredOptions.value.length > 0) {\n    activeIndex.value = 0;\n  } else if (!nowOpen) {\n    activeIndex.value = -1;\n    measuring.value = false;\n  }\n}\n\nfunction getLastMeasureIndex(\n  text: string,\n  cursorPos: number,\n): { start: number; prefix: string } | null {\n  for (const p of prefixes.value) {\n    const beforeCursor = text.slice(0, cursorPos);\n    const lastPrefixIdx = beforeCursor.lastIndexOf(p);\n    if (lastPrefixIdx < 0) continue;\n    const afterPrefix = beforeCursor.slice(lastPrefixIdx + p.length);\n    if (/\\s/.test(afterPrefix)) continue;\n    if (\n      lastPrefixIdx === 0 ||\n      text[lastPrefixIdx - 1] === split ||\n      /\\s/.test(text[lastPrefixIdx - 1])\n    ) {\n      return { start: lastPrefixIdx, prefix: p };\n    }\n  }\n  return null;\n}\n\nfunction startMeasure(text: string, cursorPos: number) {\n  const measure = getLastMeasureIndex(text, cursorPos);\n  if (measure) {\n    measuring.value = true;\n    measurePrefix.value = measure.prefix;\n    measureStart.value = measure.start;\n    measureText.value = text.slice(measure.start + measure.prefix.length, cursorPos);\n    emit('search', measureText.value, measure.prefix);\n    nextTick(() => openMenu());\n  } else {\n    stopMeasure();\n  }\n}\n\nfunction stopMeasure() {\n  closeMenu();\n  measuring.value = false;\n  measureText.value = '';\n  measurePrefix.value = '';\n  measureStart.value = 0;\n}\n\nfunction selectOption(opt: BMentionsOption) {\n  if (opt.disabled) return;\n\n  const textarea = textareaRef.value;\n  if (!textarea) return;\n\n  const value = model.value ?? '';\n  const cursorPos = textarea.selectionStart;\n  const beforeMention = value.slice(0, measureStart.value);\n  const afterMention = value.slice(cursorPos);\n\n  const mentionValue = `${measurePrefix.value}${opt.value}`;\n  const needsTrailingSplit = afterMention && !afterMention.startsWith(split) && split;\n  const newValue = `${beforeMention}${mentionValue}${needsTrailingSplit ? split : ''}${afterMention}`;\n\n  model.value = newValue;\n  emit('change', newValue);\n  emit('select', opt, measurePrefix.value);\n\n  stopMeasure();\n\n  const newCursorPos =\n    beforeMention.length + mentionValue.length + (needsTrailingSplit ? split.length : 0);\n  nextTick(() => {\n    textarea.focus();\n    textarea.setSelectionRange(newCursorPos, newCursorPos);\n  });\n}\n\nfunction handleInput(e: Event) {\n  const target = e.target as HTMLTextAreaElement;\n  const value = target.value;\n  model.value = value;\n  emit('change', value);\n\n  const cursorPos = target.selectionStart;\n  startMeasure(value, cursorPos);\n  adjustHeight();\n}\n\nfunction handleFocus(e: FocusEvent) {\n  isFocused.value = true;\n  emit('focus', e);\n}\n\nfunction handleBlur(e: FocusEvent) {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  isFocused.value = false;\n  emit('blur', e);\n  stopMeasure();\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (!showDropdown.value) return;\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const next = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (next + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const prev = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prev - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      stopMeasure();\n      break;\n    }\n  }\n}\n\nfunction handleClear() {\n  model.value = '';\n  emit('change', '');\n  emit('clear');\n  stopMeasure();\n  textareaRef.value?.focus();\n}\n\nfunction handlePopupScroll(e: Event) {\n  emit('popupScroll', e);\n}\n\nfunction adjustHeight() {\n  if (!autoSize || !textareaRef.value) return;\n  const textarea = textareaRef.value;\n  textarea.style.height = 'auto';\n\n  const config = typeof autoSize === 'object' ? autoSize : {};\n  const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n\n  let newHeight = textarea.scrollHeight;\n  if (config.minRows) {\n    newHeight = Math.max(newHeight, config.minRows * lineHeight);\n  }\n  if (config.maxRows) {\n    newHeight = Math.min(newHeight, config.maxRows * lineHeight);\n  }\n\n  textarea.style.height = `${newHeight}px`;\n  emit('resize', { width: textarea.offsetWidth, height: newHeight });\n}\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(model, (val) => {\n  if (textareaRef.value && textareaRef.value.value !== val) {\n    textareaRef.value.value = val ?? '';\n  }\n});\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n  blur: () => textareaRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-mentions\"\n    :class=\"[\n      `b-mentions--${size}`,\n      `b-mentions--${variant}`,\n      {\n        'b-mentions--focused': isFocused,\n        'b-mentions--disabled': disabled,\n        'b-mentions--error': status === BMentionsStatus.Error,\n        'b-mentions--warning': status === BMentionsStatus.Warning,\n        'b-mentions--has-clear': allowClear,\n      },\n    ]\"\n    role=\"combobox\"\n    :aria-label=\"placeholder || 'Mentions input'\"\n    :aria-expanded=\"showDropdown\"\n    :aria-haspopup=\"'listbox'\"\n    :aria-controls=\"showDropdown ? listboxId : undefined\"\n  >\n    <textarea\n      ref=\"textareaRef\"\n      v-bind=\"attrs\"\n      :value=\"model\"\n      class=\"b-mentions__textarea\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readOnly\"\n      :rows=\"autoSize ? undefined : rows\"\n      :aria-label=\"placeholder || 'Mentions input'\"\n      autocomplete=\"off\"\n      :aria-activedescendant=\"activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-autocomplete=\"list\"\n      @input=\"handleInput\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @keydown=\"handleKeyDown\"\n    />\n\n    <button\n      v-if=\"allowClear && model && !disabled\"\n      type=\"button\"\n      class=\"b-mentions__clear\"\n      aria-label=\"Clear input\"\n      tabindex=\"-1\"\n      @mousedown.prevent=\"handleClear\"\n    ></button>\n\n    <div\n      v-if=\"measuring || isOpen\"\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-mentions__dropdown\"\n      popover=\"manual\"\n      role=\"listbox\"\n      :aria-label=\"`Mention suggestions for ${measurePrefix}`\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <ul v-if=\"filteredOptions.length > 0\" class=\"b-mentions__options\">\n        <li\n          v-for=\"(opt, idx) in filteredOptions\"\n          :key=\"opt.value\"\n          :id=\"`${listboxId}-option-${idx}`\"\n          class=\"b-mentions__option\"\n          :class=\"{\n            'b-mentions__option--active': idx === activeIndex && !opt.disabled,\n            'b-mentions__option--disabled': opt.disabled,\n          }\"\n          :data-active=\"idx === activeIndex\"\n          :aria-selected=\"idx === activeIndex\"\n          :aria-disabled=\"opt.disabled ?? false\"\n          role=\"option\"\n          @mousedown.prevent=\"selectOption(opt)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <slot name=\"option\" :option=\"opt\" :index=\"idx\">\n            {{ getOptionLabel(opt) }}\n          </slot>\n        </li>\n      </ul>\n      <div v-else-if=\"notFoundContent\" class=\"b-mentions__not-found\">\n        <slot name=\"notFoundContent\">\n          {{ notFoundContent }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-mentions {\n  --b-mentions-active-bg: #ffffff;\n  --b-mentions-active-border-color: #1677ff;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-mentions-hover-bg: #ffffff;\n  --b-mentions-hover-border-color: #4096ff;\n  --b-mentions-border-color: #d9d9d9;\n  --b-mentions-bg: #ffffff;\n  --b-mentions-color: rgba(0, 0, 0, 0.88);\n  --b-mentions-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-font-size: 14px;\n  --b-mentions-font-size-lg: 16px;\n  --b-mentions-font-size-sm: 14px;\n  --b-mentions-padding-block: 4px;\n  --b-mentions-padding-block-lg: 7px;\n  --b-mentions-padding-block-sm: 0px;\n  --b-mentions-padding-inline: 11px;\n  --b-mentions-padding-inline-lg: 11px;\n  --b-mentions-padding-inline-sm: 7px;\n  --b-mentions-border-radius: 6px;\n  --b-mentions-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-error-border-color: #ff4d4f;\n  --b-mentions-error-hover-border-color: #ff7875;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-mentions-warning-border-color: #faad14;\n  --b-mentions-warning-hover-border-color: #ffc53d;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-mentions-dropdown-bg: #ffffff;\n  --b-mentions-dropdown-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-mentions-dropdown-height: 250px;\n  --b-mentions-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-option-selected-bg: #e6f4ff;\n  --b-mentions-option-font-size: 14px;\n  --b-mentions-option-padding-x: 12px;\n  --b-mentions-option-padding-y: 5px;\n  --b-mentions-clear-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-mentions-z-index-popup: 1050;\n\n  display: flex;\n  width: 100%;\n}\n\n.b-mentions--has-clear {\n  position: relative;\n}\n\n/* ── Textarea ── */\n.b-mentions__textarea {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5714;\n  color: var(--b-mentions-color);\n  background-color: var(--b-mentions-bg);\n  border: 1px solid var(--b-mentions-border-color);\n  border-radius: var(--b-mentions-border-radius);\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s,\n    background-color 0.2s;\n  anchor-name: v-bind('anchorName');\n}\n\n.b-mentions__textarea::placeholder {\n  color: var(--b-mentions-placeholder-color);\n}\n\n/* ── Sizes ── */\n.b-mentions--sm .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-sm) var(--b-mentions-padding-inline-sm);\n  font-size: var(--b-mentions-font-size-sm);\n}\n\n.b-mentions--md .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block) var(--b-mentions-padding-inline);\n  font-size: var(--b-mentions-font-size);\n}\n\n.b-mentions--lg .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-lg) var(--b-mentions-padding-inline-lg);\n  font-size: var(--b-mentions-font-size-lg);\n}\n\n/* ── Variants ── */\n.b-mentions--outlined .b-mentions__textarea {\n  border-color: var(--b-mentions-border-color);\n}\n\n.b-mentions--filled .b-mentions__textarea {\n  border-color: transparent;\n  background-color: var(--b-mentions-disabled-bg);\n}\n\n.b-mentions--borderless .b-mentions__textarea {\n  border-color: transparent;\n  background-color: transparent;\n  box-shadow: none;\n}\n\n/* ── States ── */\n.b-mentions--focused:not(.b-mentions--disabled) .b-mentions__textarea {\n  border-color: var(--b-mentions-active-border-color);\n  box-shadow: var(--b-mentions-active-shadow);\n  background-color: var(--b-mentions-active-bg);\n}\n\n.b-mentions:not(.b-mentions--focused):not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-hover-border-color);\n  background-color: var(--b-mentions-hover-bg);\n}\n\n.b-mentions--borderless.b-mentions--focused .b-mentions__textarea {\n  box-shadow: none;\n}\n\n/* ── Disabled ── */\n.b-mentions--disabled .b-mentions__textarea {\n  cursor: not-allowed;\n  background-color: var(--b-mentions-disabled-bg);\n  color: var(--b-mentions-disabled-color);\n}\n\n/* ── Error status ── */\n.b-mentions--error .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n}\n\n.b-mentions--error:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-error-hover-border-color);\n}\n\n.b-mentions--error.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n  box-shadow: var(--b-mentions-error-active-shadow);\n}\n\n/* ── Warning status ── */\n.b-mentions--warning .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n}\n\n.b-mentions--warning:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-hover-border-color);\n}\n\n.b-mentions--warning.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n  box-shadow: var(--b-mentions-warning-active-shadow);\n}\n\n/* ── Clear button ── */\n.b-mentions__clear {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--b-mentions-clear-color);\n  font-size: 10px;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.b-mentions__clear::after {\n  content: '\\2715';\n}\n\n.b-mentions__clear:hover {\n  color: var(--b-mentions-clear-hover-color);\n}\n\n/* ── Dropdown ── */\n.b-mentions__dropdown {\n  margin: 0;\n  padding: 4px;\n  border: none;\n  border-radius: var(--b-mentions-border-radius);\n  background: var(--b-mentions-dropdown-bg);\n  box-shadow: var(--b-mentions-dropdown-shadow);\n  max-height: var(--b-mentions-dropdown-height);\n  overflow-y: auto;\n  z-index: var(--b-mentions-z-index-popup);\n\n  position: absolute;\n  position-anchor: v-bind('anchorName');\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  width: anchor-size(width);\n  position-try-fallbacks: --b-mentions-top;\n\n  opacity: 0;\n  transition:\n    display 0.2s allow-discrete,\n    opacity 0.2s;\n}\n\n.b-mentions__dropdown:popover-open {\n  opacity: 1;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n@position-try --b-mentions-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n/* ── Options list ── */\n.b-mentions__options {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.b-mentions__option {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  line-height: 1.5714;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.b-mentions__option--active {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option:hover:not(.b-mentions__option--disabled) {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n/* ── Not found ── */\n.b-mentions__not-found {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  color: var(--b-mentions-disabled-color);\n  text-align: center;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-mentions {\n  --b-mentions-active-bg: #1f1f1f;\n  --b-mentions-active-border-color: #1668dc;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-mentions-hover-bg: #1f1f1f;\n  --b-mentions-hover-border-color: #3c89e8;\n  --b-mentions-border-color: #424242;\n  --b-mentions-bg: #1f1f1f;\n  --b-mentions-color: rgba(255, 255, 255, 0.88);\n  --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-dropdown-bg: #2a2a2a;\n  --b-mentions-dropdown-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  --b-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-option-selected-bg: #111a2c;\n  --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-mentions-error-border-color: #d32029;\n  --b-mentions-error-hover-border-color: #e84749;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n  --b-mentions-warning-border-color: #d89614;\n  --b-mentions-warning-hover-border-color: #e8b339;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-mentions {\n    --b-mentions-active-bg: #1f1f1f;\n    --b-mentions-active-border-color: #1668dc;\n    --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-mentions-hover-bg: #1f1f1f;\n    --b-mentions-hover-border-color: #3c89e8;\n    --b-mentions-border-color: #424242;\n    --b-mentions-bg: #1f1f1f;\n    --b-mentions-color: rgba(255, 255, 255, 0.88);\n    --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-dropdown-bg: #2a2a2a;\n    --b-mentions-dropdown-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    --b-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-option-selected-bg: #111a2c;\n    --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-mentions-error-border-color: #d32029;\n    --b-mentions-error-hover-border-color: #e84749;\n    --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n    --b-mentions-warning-border-color: #d89614;\n    --b-mentions-warning-hover-border-color: #e8b339;\n    --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-mentions__textarea,\n  .b-mentions__dropdown,\n  .b-mentions__option,\n  .b-mentions__clear {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system126.js

@@ -0,0 +1,9 @@
+import e from "./design-system14.js";
+import t from "./design-system124.js";
+/* empty css                 */
+//#region src/components/BMentions/BMentions.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-8c92c351"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=design-system126.js.map

package/dist/design-system126.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system126.js","names":[],"sources":["../src/components/BMentions/BMentions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\n\nimport { BMentionsStatus, BMentionsVariant, type BMentionsOption } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BMentionsVariant.Outlined,\n  prefix = '@',\n  split = ' ',\n  autoSize = false,\n  allowClear = false,\n  filterOption = true,\n  notFoundContent = 'Not Found',\n  placeholder,\n  rows = 3,\n} = defineProps<{\n  /** Data source for mention suggestions. */\n  options?: BMentionsOption[];\n  /** Size of the textarea. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BMentionsVariant}`;\n  /** Popup positioning relative to cursor. */\n  placement?: 'top' | 'bottom';\n  /** Trigger character(s) for mention lookup. */\n  prefix?: string | string[];\n  /** Delimiter character(s) inserted before/after mention. */\n  split?: string;\n  /** Auto-resize the textarea height. Can be boolean or { minRows, maxRows }. */\n  autoSize?: boolean | { minRows?: number; maxRows?: number };\n  /** Show clear button when there is content. */\n  allowClear?: boolean;\n  /** Filter options by search text. `true` for default filter, function for custom. */\n  filterOption?: boolean | ((search: string, option: BMentionsOption) => boolean);\n  /** Content shown when no results match. Set to `null` to hide dropdown when empty. */\n  notFoundContent?: string | null;\n  /** Whether the textarea is disabled. */\n  disabled?: boolean;\n  /** Whether the textarea is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BMentionsStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Number of visible text lines (when autoSize is false). */\n  rows?: number;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the input value changes. */\n  change: [value: string];\n  /** Fired when an option is selected. */\n  select: [option: BMentionsOption, prefix: string];\n  /** Fired when a prefix character is typed and search begins. */\n  search: [text: string, prefix: string];\n  /** Fired when input gains focus. */\n  focus: [event: FocusEvent];\n  /** Fired when input loses focus. */\n  blur: [event: FocusEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired on textarea resize (when autoSize is active). */\n  resize: [size: { width: number; height: number }];\n  /** Fired during popup scroll. */\n  popupScroll: [event: Event];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-mentions-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-mentions-listbox-${componentUID.value}`);\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isFocused = ref(false);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst measuring = ref(false);\nconst measurePrefix = ref('');\nconst measureText = ref('');\nconst measureStart = ref(0);\n\nconst prefixes = computed(() => (Array.isArray(prefix) ? prefix : [prefix]));\n\nconst filteredOptions = computed(() => {\n  const search = measureText.value.toLowerCase();\n  if (!filterOption) return options;\n  if (typeof filterOption === 'function') {\n    return options.filter((opt) => filterOption(search, opt));\n  }\n  if (!search) return options;\n  return options.filter((opt) => {\n    const text = (opt.label ?? opt.value).toLowerCase();\n    return text.includes(search);\n  });\n});\n\nconst showDropdown = computed(() => {\n  if (!measuring.value) return false;\n  if (filteredOptions.value.length === 0 && notFoundContent === null) return false;\n  return isOpen.value;\n});\n\nconst getOptionLabel = (opt: BMentionsOption) => opt.label ?? opt.value;\n\nfunction openMenu() {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n}\n\nfunction closeMenu() {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n}\n\nfunction handleToggle({ newState }: ToggleEvent) {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  if (nowOpen && filteredOptions.value.length > 0) {\n    activeIndex.value = 0;\n  } else if (!nowOpen) {\n    activeIndex.value = -1;\n    measuring.value = false;\n  }\n}\n\nfunction getLastMeasureIndex(\n  text: string,\n  cursorPos: number,\n): { start: number; prefix: string } | null {\n  for (const p of prefixes.value) {\n    const beforeCursor = text.slice(0, cursorPos);\n    const lastPrefixIdx = beforeCursor.lastIndexOf(p);\n    if (lastPrefixIdx < 0) continue;\n    const afterPrefix = beforeCursor.slice(lastPrefixIdx + p.length);\n    if (/\\s/.test(afterPrefix)) continue;\n    if (\n      lastPrefixIdx === 0 ||\n      text[lastPrefixIdx - 1] === split ||\n      /\\s/.test(text[lastPrefixIdx - 1])\n    ) {\n      return { start: lastPrefixIdx, prefix: p };\n    }\n  }\n  return null;\n}\n\nfunction startMeasure(text: string, cursorPos: number) {\n  const measure = getLastMeasureIndex(text, cursorPos);\n  if (measure) {\n    measuring.value = true;\n    measurePrefix.value = measure.prefix;\n    measureStart.value = measure.start;\n    measureText.value = text.slice(measure.start + measure.prefix.length, cursorPos);\n    emit('search', measureText.value, measure.prefix);\n    nextTick(() => openMenu());\n  } else {\n    stopMeasure();\n  }\n}\n\nfunction stopMeasure() {\n  closeMenu();\n  measuring.value = false;\n  measureText.value = '';\n  measurePrefix.value = '';\n  measureStart.value = 0;\n}\n\nfunction selectOption(opt: BMentionsOption) {\n  if (opt.disabled) return;\n\n  const textarea = textareaRef.value;\n  if (!textarea) return;\n\n  const value = model.value ?? '';\n  const cursorPos = textarea.selectionStart;\n  const beforeMention = value.slice(0, measureStart.value);\n  const afterMention = value.slice(cursorPos);\n\n  const mentionValue = `${measurePrefix.value}${opt.value}`;\n  const needsTrailingSplit = afterMention && !afterMention.startsWith(split) && split;\n  const newValue = `${beforeMention}${mentionValue}${needsTrailingSplit ? split : ''}${afterMention}`;\n\n  model.value = newValue;\n  emit('change', newValue);\n  emit('select', opt, measurePrefix.value);\n\n  stopMeasure();\n\n  const newCursorPos =\n    beforeMention.length + mentionValue.length + (needsTrailingSplit ? split.length : 0);\n  nextTick(() => {\n    textarea.focus();\n    textarea.setSelectionRange(newCursorPos, newCursorPos);\n  });\n}\n\nfunction handleInput(e: Event) {\n  const target = e.target as HTMLTextAreaElement;\n  const value = target.value;\n  model.value = value;\n  emit('change', value);\n\n  const cursorPos = target.selectionStart;\n  startMeasure(value, cursorPos);\n  adjustHeight();\n}\n\nfunction handleFocus(e: FocusEvent) {\n  isFocused.value = true;\n  emit('focus', e);\n}\n\nfunction handleBlur(e: FocusEvent) {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  isFocused.value = false;\n  emit('blur', e);\n  stopMeasure();\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (!showDropdown.value) return;\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const next = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (next + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const prev = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prev - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      stopMeasure();\n      break;\n    }\n  }\n}\n\nfunction handleClear() {\n  model.value = '';\n  emit('change', '');\n  emit('clear');\n  stopMeasure();\n  textareaRef.value?.focus();\n}\n\nfunction handlePopupScroll(e: Event) {\n  emit('popupScroll', e);\n}\n\nfunction adjustHeight() {\n  if (!autoSize || !textareaRef.value) return;\n  const textarea = textareaRef.value;\n  textarea.style.height = 'auto';\n\n  const config = typeof autoSize === 'object' ? autoSize : {};\n  const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n\n  let newHeight = textarea.scrollHeight;\n  if (config.minRows) {\n    newHeight = Math.max(newHeight, config.minRows * lineHeight);\n  }\n  if (config.maxRows) {\n    newHeight = Math.min(newHeight, config.maxRows * lineHeight);\n  }\n\n  textarea.style.height = `${newHeight}px`;\n  emit('resize', { width: textarea.offsetWidth, height: newHeight });\n}\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(model, (val) => {\n  if (textareaRef.value && textareaRef.value.value !== val) {\n    textareaRef.value.value = val ?? '';\n  }\n});\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n  blur: () => textareaRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-mentions\"\n    :class=\"[\n      `b-mentions--${size}`,\n      `b-mentions--${variant}`,\n      {\n        'b-mentions--focused': isFocused,\n        'b-mentions--disabled': disabled,\n        'b-mentions--error': status === BMentionsStatus.Error,\n        'b-mentions--warning': status === BMentionsStatus.Warning,\n        'b-mentions--has-clear': allowClear,\n      },\n    ]\"\n    role=\"combobox\"\n    :aria-label=\"placeholder || 'Mentions input'\"\n    :aria-expanded=\"showDropdown\"\n    :aria-haspopup=\"'listbox'\"\n    :aria-controls=\"showDropdown ? listboxId : undefined\"\n  >\n    <textarea\n      ref=\"textareaRef\"\n      v-bind=\"attrs\"\n      :value=\"model\"\n      class=\"b-mentions__textarea\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readOnly\"\n      :rows=\"autoSize ? undefined : rows\"\n      :aria-label=\"placeholder || 'Mentions input'\"\n      autocomplete=\"off\"\n      :aria-activedescendant=\"activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-autocomplete=\"list\"\n      @input=\"handleInput\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @keydown=\"handleKeyDown\"\n    />\n\n    <button\n      v-if=\"allowClear && model && !disabled\"\n      type=\"button\"\n      class=\"b-mentions__clear\"\n      aria-label=\"Clear input\"\n      tabindex=\"-1\"\n      @mousedown.prevent=\"handleClear\"\n    ></button>\n\n    <div\n      v-if=\"measuring || isOpen\"\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-mentions__dropdown\"\n      popover=\"manual\"\n      role=\"listbox\"\n      :aria-label=\"`Mention suggestions for ${measurePrefix}`\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <ul v-if=\"filteredOptions.length > 0\" class=\"b-mentions__options\">\n        <li\n          v-for=\"(opt, idx) in filteredOptions\"\n          :key=\"opt.value\"\n          :id=\"`${listboxId}-option-${idx}`\"\n          class=\"b-mentions__option\"\n          :class=\"{\n            'b-mentions__option--active': idx === activeIndex && !opt.disabled,\n            'b-mentions__option--disabled': opt.disabled,\n          }\"\n          :data-active=\"idx === activeIndex\"\n          :aria-selected=\"idx === activeIndex\"\n          :aria-disabled=\"opt.disabled ?? false\"\n          role=\"option\"\n          @mousedown.prevent=\"selectOption(opt)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <slot name=\"option\" :option=\"opt\" :index=\"idx\">\n            {{ getOptionLabel(opt) }}\n          </slot>\n        </li>\n      </ul>\n      <div v-else-if=\"notFoundContent\" class=\"b-mentions__not-found\">\n        <slot name=\"notFoundContent\">\n          {{ notFoundContent }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-mentions {\n  --b-mentions-active-bg: #ffffff;\n  --b-mentions-active-border-color: #1677ff;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-mentions-hover-bg: #ffffff;\n  --b-mentions-hover-border-color: #4096ff;\n  --b-mentions-border-color: #d9d9d9;\n  --b-mentions-bg: #ffffff;\n  --b-mentions-color: rgba(0, 0, 0, 0.88);\n  --b-mentions-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-font-size: 14px;\n  --b-mentions-font-size-lg: 16px;\n  --b-mentions-font-size-sm: 14px;\n  --b-mentions-padding-block: 4px;\n  --b-mentions-padding-block-lg: 7px;\n  --b-mentions-padding-block-sm: 0px;\n  --b-mentions-padding-inline: 11px;\n  --b-mentions-padding-inline-lg: 11px;\n  --b-mentions-padding-inline-sm: 7px;\n  --b-mentions-border-radius: 6px;\n  --b-mentions-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-error-border-color: #ff4d4f;\n  --b-mentions-error-hover-border-color: #ff7875;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-mentions-warning-border-color: #faad14;\n  --b-mentions-warning-hover-border-color: #ffc53d;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-mentions-dropdown-bg: #ffffff;\n  --b-mentions-dropdown-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-mentions-dropdown-height: 250px;\n  --b-mentions-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-option-selected-bg: #e6f4ff;\n  --b-mentions-option-font-size: 14px;\n  --b-mentions-option-padding-x: 12px;\n  --b-mentions-option-padding-y: 5px;\n  --b-mentions-clear-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-mentions-z-index-popup: 1050;\n\n  display: flex;\n  width: 100%;\n}\n\n.b-mentions--has-clear {\n  position: relative;\n}\n\n/* ── Textarea ── */\n.b-mentions__textarea {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5714;\n  color: var(--b-mentions-color);\n  background-color: var(--b-mentions-bg);\n  border: 1px solid var(--b-mentions-border-color);\n  border-radius: var(--b-mentions-border-radius);\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s,\n    background-color 0.2s;\n  anchor-name: v-bind('anchorName');\n}\n\n.b-mentions__textarea::placeholder {\n  color: var(--b-mentions-placeholder-color);\n}\n\n/* ── Sizes ── */\n.b-mentions--sm .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-sm) var(--b-mentions-padding-inline-sm);\n  font-size: var(--b-mentions-font-size-sm);\n}\n\n.b-mentions--md .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block) var(--b-mentions-padding-inline);\n  font-size: var(--b-mentions-font-size);\n}\n\n.b-mentions--lg .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-lg) var(--b-mentions-padding-inline-lg);\n  font-size: var(--b-mentions-font-size-lg);\n}\n\n/* ── Variants ── */\n.b-mentions--outlined .b-mentions__textarea {\n  border-color: var(--b-mentions-border-color);\n}\n\n.b-mentions--filled .b-mentions__textarea {\n  border-color: transparent;\n  background-color: var(--b-mentions-disabled-bg);\n}\n\n.b-mentions--borderless .b-mentions__textarea {\n  border-color: transparent;\n  background-color: transparent;\n  box-shadow: none;\n}\n\n/* ── States ── */\n.b-mentions--focused:not(.b-mentions--disabled) .b-mentions__textarea {\n  border-color: var(--b-mentions-active-border-color);\n  box-shadow: var(--b-mentions-active-shadow);\n  background-color: var(--b-mentions-active-bg);\n}\n\n.b-mentions:not(.b-mentions--focused):not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-hover-border-color);\n  background-color: var(--b-mentions-hover-bg);\n}\n\n.b-mentions--borderless.b-mentions--focused .b-mentions__textarea {\n  box-shadow: none;\n}\n\n/* ── Disabled ── */\n.b-mentions--disabled .b-mentions__textarea {\n  cursor: not-allowed;\n  background-color: var(--b-mentions-disabled-bg);\n  color: var(--b-mentions-disabled-color);\n}\n\n/* ── Error status ── */\n.b-mentions--error .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n}\n\n.b-mentions--error:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-error-hover-border-color);\n}\n\n.b-mentions--error.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n  box-shadow: var(--b-mentions-error-active-shadow);\n}\n\n/* ── Warning status ── */\n.b-mentions--warning .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n}\n\n.b-mentions--warning:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-hover-border-color);\n}\n\n.b-mentions--warning.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n  box-shadow: var(--b-mentions-warning-active-shadow);\n}\n\n/* ── Clear button ── */\n.b-mentions__clear {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--b-mentions-clear-color);\n  font-size: 10px;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.b-mentions__clear::after {\n  content: '\\2715';\n}\n\n.b-mentions__clear:hover {\n  color: var(--b-mentions-clear-hover-color);\n}\n\n/* ── Dropdown ── */\n.b-mentions__dropdown {\n  margin: 0;\n  padding: 4px;\n  border: none;\n  border-radius: var(--b-mentions-border-radius);\n  background: var(--b-mentions-dropdown-bg);\n  box-shadow: var(--b-mentions-dropdown-shadow);\n  max-height: var(--b-mentions-dropdown-height);\n  overflow-y: auto;\n  z-index: var(--b-mentions-z-index-popup);\n\n  position: absolute;\n  position-anchor: v-bind('anchorName');\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  width: anchor-size(width);\n  position-try-fallbacks: --b-mentions-top;\n\n  opacity: 0;\n  transition:\n    display 0.2s allow-discrete,\n    opacity 0.2s;\n}\n\n.b-mentions__dropdown:popover-open {\n  opacity: 1;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n@position-try --b-mentions-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n/* ── Options list ── */\n.b-mentions__options {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.b-mentions__option {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  line-height: 1.5714;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.b-mentions__option--active {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option:hover:not(.b-mentions__option--disabled) {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n/* ── Not found ── */\n.b-mentions__not-found {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  color: var(--b-mentions-disabled-color);\n  text-align: center;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-mentions {\n  --b-mentions-active-bg: #1f1f1f;\n  --b-mentions-active-border-color: #1668dc;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-mentions-hover-bg: #1f1f1f;\n  --b-mentions-hover-border-color: #3c89e8;\n  --b-mentions-border-color: #424242;\n  --b-mentions-bg: #1f1f1f;\n  --b-mentions-color: rgba(255, 255, 255, 0.88);\n  --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-dropdown-bg: #2a2a2a;\n  --b-mentions-dropdown-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  --b-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-option-selected-bg: #111a2c;\n  --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-mentions-error-border-color: #d32029;\n  --b-mentions-error-hover-border-color: #e84749;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n  --b-mentions-warning-border-color: #d89614;\n  --b-mentions-warning-hover-border-color: #e8b339;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-mentions {\n    --b-mentions-active-bg: #1f1f1f;\n    --b-mentions-active-border-color: #1668dc;\n    --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-mentions-hover-bg: #1f1f1f;\n    --b-mentions-hover-border-color: #3c89e8;\n    --b-mentions-border-color: #424242;\n    --b-mentions-bg: #1f1f1f;\n    --b-mentions-color: rgba(255, 255, 255, 0.88);\n    --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-dropdown-bg: #2a2a2a;\n    --b-mentions-dropdown-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    --b-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-option-selected-bg: #111a2c;\n    --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-mentions-error-border-color: #d32029;\n    --b-mentions-error-hover-border-color: #e84749;\n    --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n    --b-mentions-warning-border-color: #d89614;\n    --b-mentions-warning-hover-border-color: #e8b339;\n    --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-mentions__textarea,\n  .b-mentions__dropdown,\n  .b-mentions__option,\n  .b-mentions__clear {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system127.js

@@ -1,8 +1,19 @@
-import e from "./design-system125.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenuItemGroup.vue
-var t = e;
+import { createElementBlock as e, defineComponent as t, normalizeClass as n, openBlock as r } from "vue";
+//#region src/components/BMenu/BMenuDivider.vue?vue&type=script&setup=true&lang.ts
+var i = /* @__PURE__ */ t({
+	__name: "BMenuDivider",
+	props: { dashed: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(t) {
+		return (i, a) => (r(), e("li", {
+			class: n(["b-menu-divider", { "b-menu-divider--dashed": t.dashed }]),
+			role: "separator"
+		}, null, 2));
+	}
+});
 //#endregion
-export { t as default };
+export { i as default };
 
 //# sourceMappingURL=design-system127.js.map

package/dist/design-system127.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system127.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":""}
+{"version":3,"file":"design-system127.js","names":[],"sources":["../src/components/BMenu/BMenuDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst { dashed = false } = defineProps<{\n  /** Whether divider line is dashed. @default false */\n  dashed?: boolean;\n}>();\n</script>\n\n<template>\n  <li :class=\"['b-menu-divider', { 'b-menu-divider--dashed': dashed }]\" role=\"separator\" />\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuDivider\n   ───────────────────────────────────────────── */\n.b-menu-divider {\n  height: 1px;\n  margin: 4px 12px;\n  background: rgba(5, 5, 5, 0.06);\n  list-style: none;\n}\n\n.b-menu-divider--dashed {\n  background: none;\n  border-top: 1px dashed rgba(5, 5, 5, 0.06);\n}\n\n[data-prefers-color='dark'] .b-menu-divider,\n.b-menu--dark .b-menu-divider {\n  background: rgba(253, 253, 253, 0.12);\n}\n\n[data-prefers-color='dark'] .b-menu-divider--dashed,\n.b-menu--dark .b-menu-divider--dashed {\n  background: none;\n  border-top-color: rgba(253, 253, 253, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu-divider {\n    background: rgba(253, 253, 253, 0.12);\n  }\n\n  [data-prefers-color='system'] .b-menu-divider--dashed {\n    background: none;\n    border-top-color: rgba(253, 253, 253, 0.12);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;yBAWE,EAAyF,MAAA;GAApF,OAAK,EAAA,CAAA,kBAAA,EAAA,0BAAiD,EAAA,QAAM,CAAA,CAAA;GAAK,MAAK"}

package/dist/design-system129.js

@@ -0,0 +1,8 @@
+import e from "./design-system127.js";
+/* empty css                 */
+//#region src/components/BMenu/BMenuDivider.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system129.js.map

package/dist/design-system129.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system129.js","names":[],"sources":["../src/components/BMenu/BMenuDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst { dashed = false } = defineProps<{\n  /** Whether divider line is dashed. @default false */\n  dashed?: boolean;\n}>();\n</script>\n\n<template>\n  <li :class=\"['b-menu-divider', { 'b-menu-divider--dashed': dashed }]\" role=\"separator\" />\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuDivider\n   ───────────────────────────────────────────── */\n.b-menu-divider {\n  height: 1px;\n  margin: 4px 12px;\n  background: rgba(5, 5, 5, 0.06);\n  list-style: none;\n}\n\n.b-menu-divider--dashed {\n  background: none;\n  border-top: 1px dashed rgba(5, 5, 5, 0.06);\n}\n\n[data-prefers-color='dark'] .b-menu-divider,\n.b-menu--dark .b-menu-divider {\n  background: rgba(253, 253, 253, 0.12);\n}\n\n[data-prefers-color='dark'] .b-menu-divider--dashed,\n.b-menu--dark .b-menu-divider--dashed {\n  background: none;\n  border-top-color: rgba(253, 253, 253, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu-divider {\n    background: rgba(253, 253, 253, 0.12);\n  }\n\n  [data-prefers-color='system'] .b-menu-divider--dashed {\n    background: none;\n    border-top-color: rgba(253, 253, 253, 0.12);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system130.js

@@ -1,8 +1,15 @@
-import e from "./design-system128.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenuSubMenu.vue
-var t = e;
+//#region src/components/BMenu/types.ts
+var e = Symbol("BMenuContext"), t = Symbol("BMenuSubMenuContext");
+function n(e) {
+	return "children" in e && ("type" in e ? e.type !== "group" : !0);
+}
+function r(e) {
+	return "type" in e && e.type === "group";
+}
+function i(e) {
+	return "type" in e && e.type === "divider";
+}
 //#endregion
-export { t as default };
+export { e as BMenuContextKey, t as BMenuSubMenuContextKey, i as isDivider, r as isItemGroup, n as isSubMenu };
 
 //# sourceMappingURL=design-system130.js.map

package/dist/design-system130.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system130.js","names":[],"sources":["../src/components/BMenu/BMenuSubMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, provide, ref } from 'vue';\nimport BMenuDivider from './BMenuDivider.vue';\nimport BMenuItem from './BMenuItem.vue';\nimport BMenuItemGroup from './BMenuItemGroup.vue';\nimport {\n  BMenuContextKey,\n  BMenuSubMenuContextKey,\n  isDivider,\n  isItemGroup,\n  isSubMenu,\n  type BMenuContext,\n  type BMenuItemUnion,\n  type BMenuSubMenuContext,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Unique key identifying this submenu. */\n    itemKey: string;\n    /** Display label of the submenu title. */\n    label?: string;\n    /** Icon name rendered before the label. */\n    icon?: string;\n    /** Whether the submenu is disabled. @default false */\n    disabled?: boolean;\n    /** Child menu items. */\n    children?: BMenuItemUnion[];\n    /** Extra class for popup container. */\n    popupClassName?: string;\n  }>(),\n  {\n    label: '',\n    icon: undefined,\n    disabled: false,\n    children: () => [],\n    popupClassName: '',\n  },\n);\n\ndefineSlots<{\n  default?(): unknown;\n  icon?(): unknown;\n  title?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Inject context\n// ─────────────────────────────────────────────\nconst menu = inject<BMenuContext>(BMenuContextKey)!;\nconst parentSubMenu = inject<BMenuSubMenuContext | null>(BMenuSubMenuContextKey, null);\n\nconst level = computed(() => (parentSubMenu?.level ?? 0) + 1);\nconst keyPath = computed(() => [...(parentSubMenu?.keyPath ?? []), props.itemKey]);\n\n// Provide context for children\nprovide<BMenuSubMenuContext>(BMenuSubMenuContextKey, {\n  level: level.value,\n  keyPath: keyPath.value,\n});\n\n// ─────────────────────────────────────────────\n// Open state\n// ─────────────────────────────────────────────\nconst isOpen = computed(() => menu.openKeys.value.includes(props.itemKey));\n\nconst hasSelectedChild = computed(() => {\n  function checkChildren(items: BMenuItemUnion[]): boolean {\n    for (const item of items) {\n      if ('key' in item && menu.selectedKeys.value.includes(item.key!)) return true;\n      if (isSubMenu(item) && item.children) {\n        if (checkChildren(item.children)) return true;\n      }\n      if (isItemGroup(item) && item.children) {\n        if (checkChildren(item.children)) return true;\n      }\n    }\n    return false;\n  }\n  return checkChildren(props.children);\n});\n\n// ─────────────────────────────────────────────\n// Inline indentation\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\n// ─────────────────────────────────────────────\n// Popup positioning (vertical / horizontal)\n// ─────────────────────────────────────────────\nconst isPopupMode = computed(() => menu.mode.value !== 'inline' || menu.inlineCollapsed.value);\n\nconst titleRef = ref<HTMLElement | null>(null);\nconst popupRef = ref<HTMLElement | null>(null);\n\nlet openTimer: ReturnType<typeof setTimeout> | null = null;\nlet closeTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (openTimer) {\n    clearTimeout(openTimer);\n    openTimer = null;\n  }\n  if (closeTimer) {\n    clearTimeout(closeTimer);\n    closeTimer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction toggleOpen() {\n  if (props.disabled) return;\n  menu.onOpenChange(props.itemKey, !isOpen.value);\n}\n\nfunction handleTitleClick() {\n  if (props.disabled) return;\n  if (!isPopupMode.value) {\n    toggleOpen();\n  } else if (menu.triggerSubMenuAction.value === 'click') {\n    toggleOpen();\n  }\n}\n\nfunction handleTitleKeydown(e: KeyboardEvent) {\n  if (props.disabled) return;\n\n  switch (e.key) {\n    case 'Enter':\n    case ' ':\n      e.preventDefault();\n      toggleOpen();\n      break;\n    case 'ArrowRight':\n      if (menu.mode.value !== 'inline' && !isOpen.value) {\n        e.preventDefault();\n        menu.onOpenChange(props.itemKey, true);\n      }\n      break;\n    case 'ArrowLeft':\n      if (menu.mode.value !== 'inline' && isOpen.value) {\n        e.preventDefault();\n        menu.onOpenChange(props.itemKey, false);\n      }\n      break;\n    case 'Escape':\n      if (isOpen.value) {\n        e.preventDefault();\n        menu.onOpenChange(props.itemKey, false);\n        titleRef.value?.focus();\n      }\n      break;\n  }\n}\n\nfunction handleMouseEnter() {\n  if (props.disabled || !isPopupMode.value) return;\n  if (menu.triggerSubMenuAction.value !== 'hover') return;\n\n  clearTimers();\n  const delay = menu.subMenuOpenDelay.value;\n  if (delay > 0) {\n    openTimer = setTimeout(() => menu.onOpenChange(props.itemKey, true), delay);\n  } else {\n    menu.onOpenChange(props.itemKey, true);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (props.disabled || !isPopupMode.value) return;\n  if (menu.triggerSubMenuAction.value !== 'hover') return;\n\n  clearTimers();\n  const delay = menu.subMenuCloseDelay.value;\n  if (delay > 0) {\n    closeTimer = setTimeout(() => menu.onOpenChange(props.itemKey, false), delay);\n  } else {\n    menu.onOpenChange(props.itemKey, false);\n  }\n}\n\nonBeforeUnmount(() => {\n  clearTimers();\n});\n\n// ─────────────────────────────────────────────\n// Classes\n// ─────────────────────────────────────────────\nconst titleClasses = computed(() => [\n  'b-menu-submenu__title',\n  {\n    'b-menu-submenu__title--open': isOpen.value,\n    'b-menu-submenu__title--disabled': props.disabled,\n    'b-menu-submenu__title--selected': hasSelectedChild.value,\n    'b-menu-submenu__title--horizontal': menu.mode.value === 'horizontal',\n  },\n]);\n\nconst submenuClasses = computed(() => [\n  'b-menu-submenu',\n  {\n    'b-menu-submenu--open': isOpen.value,\n    'b-menu-submenu--disabled': props.disabled,\n    'b-menu-submenu--horizontal': menu.mode.value === 'horizontal',\n    'b-menu-submenu--collapsed': menu.inlineCollapsed.value,\n    'b-menu-submenu--popup': isPopupMode.value,\n  },\n]);\n\nconst popupClasses = computed(() => [\n  'b-menu-submenu__popup',\n  props.popupClassName,\n  {\n    'b-menu-submenu__popup--visible': isOpen.value,\n    'b-menu-submenu__popup--horizontal': menu.mode.value === 'horizontal',\n    'b-menu-submenu__popup--vertical': menu.mode.value === 'vertical' || menu.inlineCollapsed.value,\n  },\n]);\n\nconst inlineContentClasses = computed(() => [\n  'b-menu-submenu__inline',\n  {\n    'b-menu-submenu__inline--open': isOpen.value,\n  },\n]);\n</script>\n\n<template>\n  <li\n    :class=\"submenuClasses\"\n    :data-menu-key=\"props.itemKey\"\n    role=\"none\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <!-- Title -->\n    <div\n      ref=\"titleRef\"\n      :class=\"titleClasses\"\n      :style=\"{ paddingInlineStart: paddingLeft }\"\n      role=\"menuitem\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n      :aria-haspopup=\"true\"\n      :aria-expanded=\"isOpen\"\n      :aria-disabled=\"props.disabled || undefined\"\n      @click=\"handleTitleClick\"\n      @keydown=\"handleTitleKeydown\"\n    >\n      <span v-if=\"props.icon || $slots.icon\" class=\"b-menu-submenu__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">{{ props.icon }}</slot>\n      </span>\n      <span v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-submenu__label\">\n        <slot name=\"title\">{{ props.label }}</slot>\n      </span>\n      <span v-if=\"!menu.inlineCollapsed.value\" class=\"b-menu-submenu__arrow\" aria-hidden=\"true\" />\n    </div>\n\n    <!-- Inline content (inline mode) -->\n    <div v-if=\"!isPopupMode\" :class=\"inlineContentClasses\" role=\"none\">\n      <ul class=\"b-menu-submenu__inline-list\" role=\"menu\">\n        <slot>\n          <template v-for=\"item in props.children\" :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            />\n          </template>\n        </slot>\n      </ul>\n    </div>\n\n    <!-- Popup content (vertical / horizontal / collapsed) -->\n    <div v-if=\"isPopupMode\" ref=\"popupRef\" :class=\"popupClasses\" role=\"none\">\n      <ul class=\"b-menu-submenu__popup-inner\" role=\"menu\">\n        <slot>\n          <template v-for=\"item in props.children\" :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            />\n          </template>\n        </slot>\n      </ul>\n    </div>\n  </li>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenuSubMenu\n   ───────────────────────────────────────────── */\n.b-menu-submenu {\n  list-style: none;\n  position: relative;\n}\n\n.b-menu-submenu--horizontal {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n}\n\n/* ── Title ── */\n.b-menu-submenu__title {\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  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}\n\n.b-menu-submenu__title:hover:not(.b-menu-submenu__title--disabled) {\n  background: var(--b-menu-item-hover-bg);\n  color: var(--b-menu-item-hover-color);\n}\n\n.b-menu-submenu__title:focus-visible {\n  outline: 2px solid #1677ff;\n  outline-offset: -2px;\n}\n\n.b-menu-submenu__title--selected {\n  color: var(--b-menu-sub-menu-item-selected-color);\n}\n\n.b-menu-submenu__title--disabled {\n  color: var(--b-menu-item-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ── Horizontal title ── */\n.b-menu-submenu__title--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}\n\n.b-menu-submenu__title--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-submenu__title--horizontal:hover:not(.b-menu-submenu__title--disabled) {\n  background: var(--b-menu-horizontal-item-hover-bg);\n  color: var(--b-menu-horizontal-item-hover-color);\n}\n\n.b-menu-submenu__title--horizontal.b-menu-submenu__title--selected {\n  color: var(--b-menu-horizontal-item-selected-color);\n}\n\n.b-menu-submenu__title--horizontal.b-menu-submenu__title--selected::after {\n  background: var(--b-menu-horizontal-item-selected-color);\n}\n\n/* ── Icon & Label ── */\n.b-menu-submenu__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-submenu__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Expand arrow (CSS-only) ── */\n.b-menu-submenu__arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-inline-start: auto;\n  padding-inline-start: 8px;\n  position: relative;\n}\n\n.b-menu-submenu__arrow::before,\n.b-menu-submenu__arrow::after {\n  content: '';\n  position: absolute;\n  width: 6px;\n  height: 1.5px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform var(--b-menu-transition-duration);\n  top: 50%;\n}\n\n.b-menu-submenu__arrow::before {\n  transform: rotate(-45deg) translateX(2px);\n}\n\n.b-menu-submenu__arrow::after {\n  transform: rotate(45deg) translateX(-2px);\n}\n\n.b-menu-submenu__title--open .b-menu-submenu__arrow::before {\n  transform: rotate(45deg) translateX(2px);\n}\n\n.b-menu-submenu__title--open .b-menu-submenu__arrow::after {\n  transform: rotate(-45deg) translateX(-2px);\n}\n\n/* Collapsed submenu hides arrow */\n.b-menu-submenu--collapsed .b-menu-submenu__title {\n  justify-content: center;\n  padding-inline: 0;\n}\n\n.b-menu-submenu--collapsed .b-menu-submenu__icon {\n  font-size: var(--b-menu-collapsed-icon-size);\n  margin-inline-end: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Inline content (expand/collapse via grid)\n   ───────────────────────────────────────────── */\n.b-menu-submenu__inline {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--b-menu-transition-duration) ease;\n  overflow: hidden;\n}\n\n.b-menu-submenu__inline--open {\n  grid-template-rows: 1fr;\n}\n\n.b-menu-submenu__inline-list {\n  min-height: 0;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  background: var(--b-menu-sub-menu-item-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Popup content (fly-out)\n   ───────────────────────────────────────────── */\n.b-menu-submenu__popup {\n  position: absolute;\n  z-index: var(--b-menu-popup-z-index);\n  min-width: var(--b-menu-dropdown-width);\n  visibility: hidden;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    opacity var(--b-menu-transition-duration),\n    visibility var(--b-menu-transition-duration);\n}\n\n.b-menu-submenu__popup--visible {\n  visibility: visible;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.b-menu-submenu__popup--horizontal {\n  top: 100%;\n  left: 0;\n  padding-top: 4px;\n}\n\n.b-menu-submenu__popup--vertical {\n  top: 0;\n  left: 100%;\n  padding-inline-start: 4px;\n}\n\n.b-menu-submenu__popup-inner {\n  background: var(--b-menu-popup-bg);\n  border-radius: var(--b-menu-popup-border-radius);\n  box-shadow: var(--b-menu-popup-shadow);\n  padding: 4px;\n  list-style: none;\n  margin: 0;\n}\n\n.b-menu-submenu__popup-inner .b-menu-item {\n  border-radius: var(--b-menu-sub-menu-item-border-radius);\n  margin-inline: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu-submenu__title {\n    transition: none;\n  }\n\n  .b-menu-submenu__arrow::before,\n  .b-menu-submenu__arrow::after {\n    transition: none;\n  }\n\n  .b-menu-submenu__inline {\n    transition: none;\n  }\n\n  .b-menu-submenu__popup {\n    transition: none;\n  }\n\n  .b-menu-submenu__title--horizontal::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system130.js","names":[],"sources":["../src/components/BMenu/types.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue';\n\n// ─────────────────────────────────────────────\n// Enums & Literals\n// ─────────────────────────────────────────────\nexport type BMenuMode = 'horizontal' | 'vertical' | 'inline';\nexport type BMenuTheme = 'light' | 'dark';\nexport type BMenuTriggerAction = 'hover' | 'click';\n\n// ─────────────────────────────────────────────\n// Item types (data-driven API)\n// ─────────────────────────────────────────────\nexport interface BMenuItemType {\n  key: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  title?: string;\n  extra?: string;\n}\n\nexport interface BMenuSubMenuType {\n  key: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  children?: BMenuItemUnion[];\n  popupClassName?: string;\n}\n\nexport interface BMenuItemGroupType {\n  type: 'group';\n  key?: string;\n  label?: string;\n  children?: BMenuItemType[];\n}\n\nexport interface BMenuDividerType {\n  type: 'divider';\n  key?: string;\n  dashed?: boolean;\n}\n\nexport type BMenuItemUnion =\n  | BMenuItemType\n  | BMenuSubMenuType\n  | BMenuItemGroupType\n  | BMenuDividerType;\n\n// ─────────────────────────────────────────────\n// Event payloads\n// ─────────────────────────────────────────────\nexport interface BMenuClickInfo {\n  key: string;\n  keyPath: string[];\n  domEvent: MouseEvent | KeyboardEvent;\n}\n\nexport interface BMenuSelectInfo {\n  key: string;\n  keyPath: string[];\n  selectedKeys: string[];\n  domEvent: MouseEvent | KeyboardEvent;\n}\n\n// ─────────────────────────────────────────────\n// Context (provided by BMenu to children)\n// ─────────────────────────────────────────────\nexport interface BMenuContext {\n  mode: ComputedRef<BMenuMode>;\n  theme: ComputedRef<BMenuTheme>;\n  inlineCollapsed: ComputedRef<boolean>;\n  inlineIndent: ComputedRef<number>;\n  selectedKeys: ComputedRef<string[]>;\n  openKeys: ComputedRef<string[]>;\n  multiple: ComputedRef<boolean>;\n  selectable: ComputedRef<boolean>;\n  triggerSubMenuAction: ComputedRef<BMenuTriggerAction>;\n  subMenuOpenDelay: ComputedRef<number>;\n  subMenuCloseDelay: ComputedRef<number>;\n  onItemClick: (info: BMenuClickInfo) => void;\n  onOpenChange: (key: string, open: boolean) => void;\n  registerKeyPath: (key: string, path: string[]) => void;\n}\n\nexport const BMenuContextKey: InjectionKey<BMenuContext> = Symbol('BMenuContext');\n\n// ─────────────────────────────────────────────\n// SubMenu context (nesting depth)\n// ─────────────────────────────────────────────\nexport interface BMenuSubMenuContext {\n  level: number;\n  keyPath: string[];\n}\n\nexport const BMenuSubMenuContextKey: InjectionKey<BMenuSubMenuContext> =\n  Symbol('BMenuSubMenuContext');\n\n// ─────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────\nexport function isSubMenu(item: BMenuItemUnion): item is BMenuSubMenuType {\n  return 'children' in item && ('type' in item ? item.type !== 'group' : true);\n}\n\nexport function isItemGroup(item: BMenuItemUnion): item is BMenuItemGroupType {\n  return 'type' in item && item.type === 'group';\n}\n\nexport function isDivider(item: BMenuItemUnion): item is BMenuDividerType {\n  return 'type' in item && item.type === 'divider';\n}\n\nexport function isMenuItem(item: BMenuItemUnion): item is BMenuItemType {\n  return !isSubMenu(item) && !isItemGroup(item) && !isDivider(item);\n}\n"],"mappings":";AAsFA,IAAa,IAA8C,OAAO,eAAe,EAUpE,IACX,OAAO,sBAAsB;AAK/B,SAAgB,EAAU,GAAgD;AACxE,QAAO,cAAc,MAAS,UAAU,IAAO,EAAK,SAAS,UAAU;;AAGzE,SAAgB,EAAY,GAAkD;AAC5E,QAAO,UAAU,KAAQ,EAAK,SAAS;;AAGzC,SAAgB,EAAU,GAAgD;AACxE,QAAO,UAAU,KAAQ,EAAK,SAAS"}