@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/{design-system124.js.map → design-system138.js.map}

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"design-system138.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-system139.js

@@ -1,8 +1,19 @@
-import e from "./design-system137.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenuSubMenu.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-system139.js.map

package/dist/design-system139.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system139.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-system139.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-system141.js

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

package/dist/{design-system127.js.map → design-system141.js.map}

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"design-system141.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-system142.js

@@ -1,8 +1,15 @@
-import e from "./design-system140.js";
-/* empty css                 */
-//#region src/components/BMenu/BMenu.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-system142.js.map

package/dist/design-system142.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system142.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-system142.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"}

package/dist/design-system143.js

@@ -1,98 +1,93 @@
-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",
+import { BMenuContextKey as e, BMenuSubMenuContextKey as t } from "./design-system142.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-live"
-], S = {
+	"tabindex",
+	"aria-disabled",
+	"aria-checked",
+	"title",
+	"data-menu-key"
+], g = {
 	key: 0,
-	class: "b-message__icon",
+	class: "b-menu-item__icon",
 	"aria-hidden": "true"
-}, C = ["d"], w = { class: "b-message__content" }, T = /* @__PURE__ */ u({
-	__name: "BMessage",
+}, _ = {
+	key: 1,
+	class: "b-menu-item__label"
+}, v = {
+	key: 2,
+	class: "b-menu-item__extra"
+}, y = /* @__PURE__ */ o({
+	__name: "BMenuItem",
 	props: {
-		type: { default: () => e.Info },
-		content: { default: "" },
-		duration: { default: 3 },
-		showIcon: {
+		itemKey: {},
+		label: { default: "" },
+		icon: { default: () => void 0 },
+		disabled: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		modelValue: {
+		danger: {
 			type: Boolean,
-			default: () => void 0
-		}
+			default: !1
+		},
+		extra: { default: () => void 0 },
+		title: { default: () => void 0 }
 	},
-	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;
+	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 R() {
-			D("close"), j.value ? D("update:modelValue", !1) : k.value = !1;
-		}
-		function z() {
-			D("afterClose");
-		}
-		function B() {
-			I();
-		}
-		function V() {
-			F();
+		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);
+			}
 		}
-		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
-		})]));
+		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 { T as default };
+export { y as default };
 
 //# sourceMappingURL=design-system143.js.map

package/dist/design-system143.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system143.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAO,GAYP,IAAY,GAAO,EAGnB,IAAkB,EAAI,GAAM,EAO5B,IAAY,QAAgB,EAAA,eAAe,KAAA,IAAyB,EAAgB,QAA7B,EAAA,WAAoC,EAE3F,IAAe,QAAe,EAAA,eAAe,KAAA,EAAU,EAMvD,IAAW,QACf,EAAA,SAAS,EAAa,SAAS,EAAA,SAAS,EAAa,UAAU,UAAU,SAC1E,EAGK,IAAW,QAAe;AAC9B,WAAQ,EAAA,MAAR;IACE,KAAK,EAAa,QAEhB,QAAO;IACT,KAAK,EAAa,QAEhB,QAAO;IACT,KAAK,EAAa,MAEhB,QAAO;IACT,KAAK,EAAa,QAEhB,QAAO;IACT,QAEE,QAAO;;IAEX,EAYE,IAA8C;EAElD,SAAS,IAAa;AAEpB,GADA,GAAY,EACR,EAAA,WAAW,MACb,IAAQ,iBAAiB;AACvB,OAAO;MACN,EAAA,WAAW,IAAK;;EAIvB,SAAS,IAAa;AACpB,GAAI,MAAU,SACZ,aAAa,EAAM,EACnB,IAAQ;;EAOZ,SAAS,IAAO;AACd,GAAI,EAAa,QACf,EAAK,qBAAqB,GAAK,GAE/B,EAAgB,QAAQ;;EAI5B,SAAS,IAAQ;AAEf,GADA,EAAK,QAAQ,EACT,EAAa,QACf,EAAK,qBAAqB,GAAM,GAEhC,EAAgB,QAAQ;;EAI5B,SAAS,IAAe;AACtB,KAAK,aAAa;;EAGpB,SAAS,IAAe;AACtB,MAAY;;EAGd,SAAS,IAAe;AACtB,MAAY;;SAMd,QAAkB;AAChB,MAAY;IACZ,EAGF,EACE,IACC,MAAY;AACX,GAAI,IACF,GAAY,GAEZ,GAAY;KAGhB,EAAE,WAAW,IAAM,CACpB,EAGD,EAAa;GAAE;GAAM;GAAO,CAAC,kBAI3B,EAuCW,GAAA,EAvCD,IAAG,QAAM,EAAA,CACjB,EAqCa,GAAA;GArCD,MAAK;GAA+B;;oBAoCxC,CAlCE,EAAA,SAAA,GAAA,EADR,EAmCM,OAAA;;IAjCH,IAAI,EAAA,EAAS;IACd,OAAK,EAAA,CAAC,aAAW,CAAA,cACiB,EAAA,QAAA,EAAA,wBAAwD,EAAA,UAAA,CAAA,CAAA,CAAA;IAMzF,MAAM,EAAA;IACN,aAAW,EAAA,UAAQ,UAAA,cAAA;IACnB,eAAa;IACb,cAAY;IACZ,cAAY;OAGD,EAAA,YAAA,GAAA,EAAZ,EAYO,QAZP,GAYO,CAXL,EAUO,EAAA,QAAA,QAAA,EAAA,QAAA,EAAA,GAAA,EATL,EAQM,OAAA;IAPJ,OAAK,EAAA,CAAC,uBAAqB,EAAA,6BACY,EAAA,SAAI,WAAA,CAAA,CAAA;IAC3C,SAAQ;IACR,OAAM;IACN,WAAU;OAEV,EAAsB,QAAA,EAAf,GAAG,EAAA,OAAQ,EAAA,MAAA,GAAA,EAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAMxB,EAEO,QAFP,GAEO,CADL,EAA0B,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"design-system143.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-system145.js

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