@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system151.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system151.js","names":["$slots"],"sources":["../src/components/BNotification/BNotification.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BNotificationPlacement, BNotificationType } from '@/types.ts';\nimport { computed, nextTick, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = undefined,\n  message = '',\n  description = '',\n  placement = BNotificationPlacement.TopRight,\n  duration = 4.5,\n  closable = true,\n  showIcon = true,\n  icon,\n  closeIcon,\n  btn,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Notification type - controls the icon and colour scheme.\n   * When omitted no type-colour is applied (plain notification).\n   */\n  type?: `${BNotificationType}`;\n  /** Short title / heading of the notification. */\n  message?: string;\n  /** Optional detailed description below the title. */\n  description?: string;\n  /**\n   * Placement of the notification on the viewport.\n   * @default 'top-right'\n   */\n  placement?: `${BNotificationPlacement}`;\n  /**\n   * Auto-close delay in seconds. Set to `0` to disable auto-close.\n   * @default 4.5\n   */\n  duration?: number;\n  /** Show the close button. @default true */\n  closable?: boolean;\n  /** Show the built-in status icon when `type` is set. @default true */\n  showIcon?: boolean;\n  /**\n   * Custom icon content - overrides the built-in type icon.\n   * Also accepts the `icon` slot.\n   */\n  icon?: string;\n  /**\n   * Custom close-icon content.\n   * Also accepts the `closeIcon` slot.\n   */\n  closeIcon?: string;\n  /**\n   * Custom action button area content.\n   * Also accepts the `btn` slot.\n   */\n  btn?: string;\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 notification 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\ndefineSlots<{\n  /** Overrides the `message` prop - the notification title. */\n  message?(): unknown;\n  /** Overrides the `description` prop. */\n  description?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n  /** Overrides the default close icon. */\n  closeIcon?(): unknown;\n  /** Action button area rendered below the description. */\n  btn?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst notificationId = useId();\nconst titleId = `${notificationId}-title`;\nconst descId = `${notificationId}-desc`;\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/** Ref to the notification DOM element for focus return. */\nconst notificationRef = ref<HTMLElement | null>(null);\n\n/** Element that had focus before the notification appeared. */\nconst previousFocusRef = ref<HTMLElement | null>(null);\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 === BNotificationType.Error || type === BNotificationType.Warning ? 'alert' : 'status',\n);\n\n/** aria-live polarity mirrors the role. */\nconst ariaLive = computed(() => (ariaRole.value === 'alert' ? 'assertive' : 'polite'));\n\n/** Whether to show the icon area (needs type and showIcon). */\nconst showIconArea = computed(() => Boolean(type && showIcon) || Boolean(icon) || false);\n\n/** Whether the description is provided via prop or slot. */\nconst hasDescription = computed(() => Boolean(description));\n\n/** Built-in SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BNotificationType.Success:\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 BNotificationType.Warning:\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BNotificationType.Error:\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    default:\n      // info (also fallback)\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\n// Close icon SVG path (× mark)\nconst closeIconPath =\n  'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';\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  // Return focus to the previously-focused element\n  if (previousFocusRef.value && document.contains(previousFocusRef.value)) {\n    previousFocusRef.value.focus();\n    previousFocusRef.value = null;\n  }\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && closable) {\n    event.stopPropagation();\n    close();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Visibility watcher - manage timer + focus\n// ─────────────────────────────────────────────\nwatch(\n  isVisible,\n  async (visible) => {\n    if (visible) {\n      // Capture current focus for return-on-close\n      previousFocusRef.value = document.activeElement as HTMLElement | null;\n      startTimer();\n      // Focus the close button (if closable) once the DOM updates\n      if (closable) {\n        await nextTick();\n        const closeBtn =\n          notificationRef.value?.querySelector<HTMLElement>('.b-notification__close');\n        closeBtn?.focus();\n      }\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\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-notification-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"notificationId\"\n        ref=\"notificationRef\"\n        class=\"b-notification\"\n        :class=\"[\n          placement && `b-notification--${placement}`,\n          type && `b-notification--${type}`,\n          {\n            'b-notification--with-icon': showIconArea,\n            'b-notification--with-description': hasDescription,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaLive\"\n        :aria-atomic=\"true\"\n        :aria-labelledby=\"titleId\"\n        :aria-describedby=\"hasDescription ? descId : undefined\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @keydown=\"onKeydown\"\n      >\n        <!-- Icon area -->\n        <span v-if=\"showIconArea\" class=\"b-notification__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <!-- Custom icon prop as raw HTML (consumer's responsibility) -->\n            <span v-if=\"icon\" v-html=\"icon\" />\n            <!-- Built-in type icon -->\n            <svg\n              v-else-if=\"type\"\n              class=\"b-notification__icon-svg\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n              aria-hidden=\"true\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Body -->\n        <div class=\"b-notification__body\">\n          <!-- Title -->\n          <div :id=\"titleId\" class=\"b-notification__message\">\n            <slot name=\"message\">{{ message }}</slot>\n          </div>\n\n          <!-- Description -->\n          <div\n            v-if=\"hasDescription || $slots.description\"\n            :id=\"descId\"\n            class=\"b-notification__description\"\n          >\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n\n          <!-- Action button area -->\n          <div v-if=\"btn || $slots.btn\" class=\"b-notification__btn\">\n            <slot name=\"btn\">{{ btn }}</slot>\n          </div>\n        </div>\n\n        <!-- Close button -->\n        <button\n          v-if=\"closable\"\n          type=\"button\"\n          class=\"b-notification__close\"\n          aria-label=\"Close notification\"\n          @click=\"close\"\n        >\n          <slot name=\"closeIcon\">\n            <span v-if=\"closeIcon\" v-html=\"closeIcon\" />\n            <svg\n              v-else\n              class=\"b-notification__close-svg\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n              aria-hidden=\"true\"\n            >\n              <path :d=\"closeIconPath\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-notification {\n  /* Layout */\n  --b-notification-width: 22rem;\n  --b-notification-padding-v: 1rem;\n  --b-notification-padding-h: 1.5rem;\n  --b-notification-border-radius: 0.5rem;\n  --b-notification-icon-size: 1.5rem;\n  --b-notification-gap: 0.75rem;\n  --b-notification-close-size: 1rem;\n  --b-notification-font-size-title: 1rem;\n  --b-notification-font-size-desc: 0.875rem;\n  --b-notification-line-height: 1.5;\n  --b-notification-z-index: 1010;\n\n  /* Offset from viewport edge */\n  --b-notification-offset: 1.5rem;\n\n  /* Colours (default / plain) */\n  --b-notification-bg: #ffffff;\n  --b-notification-border-color: oklch(90% 0.02 240);\n  --b-notification-title-color: oklch(20% 0.02 240);\n  --b-notification-desc-color: oklch(45% 0.02 240);\n  --b-notification-close-color: oklch(50% 0.02 240);\n  --b-notification-close-hover-color: oklch(20% 0.02 240);\n  --b-notification-icon-color: oklch(62.3% 0.214 259.815);\n  --b-notification-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-notification-transition-duration: 300ms;\n}\n\n/* ── Variant colour tokens ── */\n.b-notification--success {\n  --b-notification-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-notification--info {\n  --b-notification-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n.b-notification--warning {\n  --b-notification-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-notification--error {\n  --b-notification-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-notification {\n  --b-notification-bg: oklch(22% 0.02 240);\n  --b-notification-border-color: oklch(35% 0.03 240);\n  --b-notification-title-color: oklch(92% 0.02 240);\n  --b-notification-desc-color: oklch(70% 0.02 240);\n  --b-notification-close-color: oklch(60% 0.02 240);\n  --b-notification-close-hover-color: oklch(90% 0.02 240);\n  --b-notification-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-notification {\n    --b-notification-bg: oklch(22% 0.02 240);\n    --b-notification-border-color: oklch(35% 0.03 240);\n    --b-notification-title-color: oklch(92% 0.02 240);\n    --b-notification-desc-color: oklch(70% 0.02 240);\n    --b-notification-close-color: oklch(60% 0.02 240);\n    --b-notification-close-hover-color: oklch(90% 0.02 240);\n    --b-notification-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-notification {\n  position: fixed;\n  z-index: var(--b-notification-z-index);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-notification-gap);\n  width: var(--b-notification-width);\n  max-width: calc(100vw - 2 * var(--b-notification-offset));\n  padding: var(--b-notification-padding-v) var(--b-notification-padding-h);\n  border-radius: var(--b-notification-border-radius);\n  background-color: var(--b-notification-bg);\n  box-shadow: var(--b-notification-shadow);\n  box-sizing: border-box;\n  word-break: break-word;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ── Placement ── */\n.b-notification--top-right {\n  top: var(--b-notification-offset);\n  right: var(--b-notification-offset);\n}\n\n.b-notification--top-left {\n  top: var(--b-notification-offset);\n  left: var(--b-notification-offset);\n}\n\n.b-notification--bottom-right {\n  bottom: var(--b-notification-offset);\n  right: var(--b-notification-offset);\n}\n\n.b-notification--bottom-left {\n  bottom: var(--b-notification-offset);\n  left: var(--b-notification-offset);\n}\n\n/* ── Icon area ── */\n.b-notification__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  padding-top: 0.125rem;\n  color: var(--b-notification-icon-color);\n  line-height: 1;\n}\n\n.b-notification__icon-svg {\n  width: var(--b-notification-icon-size);\n  height: var(--b-notification-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* ── Body ── */\n.b-notification__body {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ── Title ── */\n.b-notification__message {\n  font-size: var(--b-notification-font-size-title);\n  font-weight: 600;\n  line-height: var(--b-notification-line-height);\n  color: var(--b-notification-title-color);\n  padding-right: 1.5rem; /* space for close button */\n}\n\n/* When no close button, remove the padding */\n.b-notification:not(:has(.b-notification__close)) .b-notification__message {\n  padding-right: 0;\n}\n\n/* ── Description ── */\n.b-notification__description {\n  margin-top: 0.375rem;\n  font-size: var(--b-notification-font-size-desc);\n  line-height: var(--b-notification-line-height);\n  color: var(--b-notification-desc-color);\n}\n\n/* ── Action button area ── */\n.b-notification__btn {\n  margin-top: 0.75rem;\n}\n\n/* ── Close button ── */\n.b-notification__close {\n  position: absolute;\n  top: 0.875rem;\n  right: 1rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.125rem;\n  background: transparent;\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  color: var(--b-notification-close-color);\n  line-height: 1;\n  transition: color var(--b-notification-transition-duration) ease;\n}\n\n.b-notification__close:hover {\n  color: var(--b-notification-close-hover-color);\n}\n\n.b-notification__close:focus-visible {\n  outline: 2px solid oklch(62.3% 0.214 259.815);\n  outline-offset: 2px;\n}\n\n.b-notification__close-svg {\n  width: var(--b-notification-close-size);\n  height: var(--b-notification-close-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Transition – slide-in + fade per placement\n   ───────────────────────────────────────────── */\n.b-notification-fade-enter-active,\n.b-notification-fade-leave-active {\n  transition:\n    opacity var(--b-notification-transition-duration, 300ms) ease,\n    transform var(--b-notification-transition-duration, 300ms) ease;\n}\n\n/* top-right / bottom-right - slide in from right */\n.b-notification--top-right.b-notification-fade-enter-from,\n.b-notification--bottom-right.b-notification-fade-enter-from {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.b-notification--top-right.b-notification-fade-enter-to,\n.b-notification--bottom-right.b-notification-fade-enter-to,\n.b-notification--top-right.b-notification-fade-leave-from,\n.b-notification--bottom-right.b-notification-fade-leave-from {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.b-notification--top-right.b-notification-fade-leave-to,\n.b-notification--bottom-right.b-notification-fade-leave-to {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n/* top-left / bottom-left - slide in from left */\n.b-notification--top-left.b-notification-fade-enter-from,\n.b-notification--bottom-left.b-notification-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-100%);\n}\n\n.b-notification--top-left.b-notification-fade-enter-to,\n.b-notification--bottom-left.b-notification-fade-enter-to,\n.b-notification--top-left.b-notification-fade-leave-from,\n.b-notification--bottom-left.b-notification-fade-leave-from {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.b-notification--top-left.b-notification-fade-leave-to,\n.b-notification--bottom-left.b-notification-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-notification-fade-enter-active,\n  .b-notification-fade-leave-active {\n    transition: opacity var(--b-notification-transition-duration, 300ms) ease;\n  }\n\n  .b-notification--top-right.b-notification-fade-enter-from,\n  .b-notification--bottom-right.b-notification-fade-enter-from,\n  .b-notification--top-left.b-notification-fade-enter-from,\n  .b-notification--bottom-left.b-notification-fade-enter-from,\n  .b-notification--top-right.b-notification-fade-leave-to,\n  .b-notification--bottom-right.b-notification-fade-leave-to,\n  .b-notification--top-left.b-notification-fade-leave-to,\n  .b-notification--bottom-left.b-notification-fade-leave-to {\n    transform: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system151.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":""}

package/dist/{design-system140.js → design-system152.js}

@@ -1,8 +1,8 @@
-import e from "./design-system129.js";
-import { BMenuContextKey as t, isDivider as n, isItemGroup as r, isSubMenu as i } from "./design-system130.js";
-import a from "./design-system133.js";
-import o from "./design-system136.js";
-import s from "./design-system139.js";
+import e from "./design-system141.js";
+import { BMenuContextKey as t, isDivider as n, isItemGroup as r, isSubMenu as i } from "./design-system142.js";
+import a from "./design-system145.js";
+import o from "./design-system148.js";
+import s from "./design-system151.js";
 import { Fragment as c, computed as l, createBlock as u, createElementBlock as d, defineComponent as f, normalizeClass as p, openBlock as m, provide as h, ref as g, renderList as _, renderSlot as v, unref as y, watch as b } from "vue";
 //#region src/components/BMenu/BMenu.vue?vue&type=script&setup=true&lang.ts
 var x = [
@@ -151,4 +151,4 @@ var x = [
 //#endregion
 export { S as default };
 
-//# sourceMappingURL=design-system140.js.map
+//# sourceMappingURL=design-system152.js.map

package/dist/{design-system140.js.map → design-system152.js.map}

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

package/dist/design-system154.js

@@ -1,310 +1,8 @@
-import e from "./design-system27.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, toDisplayString as f, unref as p, watch as m } from "vue";
-//#region src/components/BPagination/BPagination.vue?vue&type=script&setup=true&lang.ts
-var h = ["aria-label"], g = {
-	key: 0,
-	class: "b-pagination__total"
-}, _ = [
-	"disabled",
-	"aria-disabled",
-	"title"
-], v = { class: "b-pagination__simple-pager" }, y = [
-	"value",
-	"disabled",
-	"aria-label"
-], b = {
-	key: 1,
-	class: "b-pagination__simple-current",
-	"aria-current": "page"
-}, x = { class: "b-pagination__simple-total" }, S = [
-	"disabled",
-	"aria-disabled",
-	"title"
-], C = [
-	"disabled",
-	"aria-disabled",
-	"title"
-], w = [
-	"disabled",
-	"title",
-	"aria-label",
-	"onClick"
-], ee = [
-	"disabled",
-	"aria-current",
-	"aria-label",
-	"title",
-	"onClick"
-], T = [
-	"disabled",
-	"aria-disabled",
-	"title"
-], E = ["value", "disabled"], D = ["value"], O = {
-	key: 4,
-	class: "b-pagination__quick-jumper"
-}, k = ["value", "disabled"], A = /* @__PURE__ */ s({
-	__name: "BPagination",
-	props: {
-		current: {},
-		defaultCurrent: { default: 1 },
-		defaultPageSize: { default: 10 },
-		pageSize: {},
-		pageSizeOptions: { default: () => [
-			10,
-			20,
-			50,
-			100
-		] },
-		total: { default: 0 },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		hideOnSinglePage: {
-			type: Boolean,
-			default: !1
-		},
-		showLessItems: {
-			type: Boolean,
-			default: !1
-		},
-		showQuickJumper: {
-			type: [Boolean, Object],
-			default: !1
-		},
-		showSizeChanger: {
-			type: Boolean,
-			default: void 0
-		},
-		showTitle: {
-			type: Boolean,
-			default: !0
-		},
-		showTotal: {},
-		simple: {
-			type: [Boolean, Object],
-			default: !1
-		},
-		size: { default: "default" },
-		align: { default: "start" },
-		totalBoundaryShowSizeChanger: { default: 50 },
-		ariaLabel: { default: "Pagination" }
-	},
-	emits: [
-		"change",
-		"showSizeChange",
-		"update:current",
-		"update:pageSize"
-	],
-	setup(s, { emit: A }) {
-		let j = s, M = A, N = u(j.current ?? j.defaultCurrent), P = u(j.pageSize ?? j.defaultPageSize), F = n(() => j.current !== void 0), I = n(() => j.pageSize !== void 0);
-		m(() => j.current, (e) => {
-			e !== void 0 && (N.value = e);
-		}), m(() => j.pageSize, (e) => {
-			e !== void 0 && (P.value = e);
-		});
-		let L = n(() => F.value ? j.current : N.value), R = n(() => I.value ? j.pageSize : P.value), z = n(() => j.total <= 0 || R.value <= 0 ? 0 : Math.ceil(j.total / R.value)), B = n(() => j.hideOnSinglePage && z.value <= 1), V = n(() => j.showSizeChanger === void 0 ? j.total > j.totalBoundaryShowSizeChanger : j.showSizeChanger), H = n(() => !!j.simple), U = n(() => typeof j.simple == "object" && j.simple.readOnly === !0), W = n(() => {
-			if (!j.showTotal) return "";
-			let e = (L.value - 1) * R.value + 1, t = Math.min(L.value * R.value, j.total);
-			return j.showTotal(j.total, [e, t]);
-		}), G = n(() => {
-			let e = z.value;
-			if (e <= 0) return [];
-			let t = j.showLessItems ? 1 : 2, n = L.value, r = [];
-			if (r.push({
-				type: "page",
-				page: 1
-			}), e <= (j.showLessItems ? 4 : 6) + 2) {
-				for (let t = 2; t <= e; t++) r.push({
-					type: "page",
-					page: t
-				});
-				return r;
-			}
-			let i = Math.max(2, n - t), a = Math.min(e - 1, n + t);
-			i > 2 && r.push({
-				type: "prev-ellipsis",
-				page: Math.max(1, n - (j.showLessItems ? 3 : 5))
-			});
-			for (let e = i; e <= a; e++) r.push({
-				type: "page",
-				page: e
-			});
-			return a < e - 1 && r.push({
-				type: "next-ellipsis",
-				page: Math.min(e, n + (j.showLessItems ? 3 : 5))
-			}), e > 1 && r.push({
-				type: "page",
-				page: e
-			}), r;
-		});
-		function K(e) {
-			if (j.disabled) return;
-			let t = Math.max(1, Math.min(e, z.value));
-			t !== L.value && (F.value || (N.value = t), M("update:current", t), M("change", t, R.value));
-		}
-		function q(e) {
-			if (j.disabled || e === R.value) return;
-			let t = Math.ceil(j.total / e), n = Math.min(L.value, t) || 1;
-			I.value || (P.value = e), F.value || (N.value = n), M("update:pageSize", e), M("update:current", n), M("showSizeChange", n, e), M("change", n, e);
-		}
-		function J() {
-			K(L.value - 1);
-		}
-		function Y() {
-			K(L.value + 1);
-		}
-		let X = u("");
-		function Z(e) {
-			e.key === "Enter" && Q();
-		}
-		function Q() {
-			let e = parseInt(X.value, 10);
-			!isNaN(e) && e >= 1 && e <= z.value && K(e), X.value = "";
-		}
-		let $ = u(String(L.value));
-		m(L, (e) => {
-			$.value = String(e);
-		});
-		function te(e) {
-			if (e.key === "Enter") {
-				let e = parseInt($.value, 10);
-				isNaN(e) ? $.value = String(L.value) : K(e);
-			}
-		}
-		function ne() {
-			let e = parseInt($.value, 10);
-			!isNaN(e) && e >= 1 && e <= z.value ? K(e) : $.value = String(L.value);
-		}
-		let re = n(() => ["b-pagination", {
-			"b-pagination--disabled": j.disabled,
-			"b-pagination--simple": H.value,
-			"b-pagination--small": j.size === "small",
-			"b-pagination--large": j.size === "large",
-			"b-pagination--align-start": j.align === "start",
-			"b-pagination--align-center": j.align === "center",
-			"b-pagination--align-end": j.align === "end"
-		}]);
-		return (n, u) => B.value ? r("", !0) : (l(), i("nav", {
-			key: 0,
-			class: c(re.value),
-			role: "navigation",
-			"aria-label": j.ariaLabel
-		}, [
-			j.showTotal ? (l(), i("span", g, f(W.value), 1)) : r("", !0),
-			H.value ? (l(), i(t, { key: 1 }, [
-				a("button", {
-					class: "b-pagination__item b-pagination__prev",
-					type: "button",
-					disabled: j.disabled || L.value <= 1,
-					"aria-disabled": j.disabled || L.value <= 1 ? "true" : void 0,
-					title: j.showTitle ? "Previous Page" : void 0,
-					"aria-label": "Previous Page",
-					onClick: J
-				}, [o(p(e), {
-					icon: "chevron-left",
-					"aria-hidden": "true"
-				})], 8, _),
-				a("span", v, [
-					U.value ? (l(), i("span", b, f(L.value), 1)) : (l(), i("input", {
-						key: 0,
-						class: "b-pagination__simple-input",
-						type: "text",
-						inputmode: "numeric",
-						value: $.value,
-						disabled: j.disabled,
-						"aria-label": `Page ${L.value} of ${z.value}`,
-						onInput: u[0] ||= (e) => $.value = e.target.value,
-						onKeydown: te,
-						onBlur: ne
-					}, null, 40, y)),
-					u[3] ||= a("span", {
-						class: "b-pagination__simple-separator",
-						"aria-hidden": "true"
-					}, "/", -1),
-					a("span", x, f(z.value), 1)
-				]),
-				a("button", {
-					class: "b-pagination__item b-pagination__next",
-					type: "button",
-					disabled: j.disabled || L.value >= z.value,
-					"aria-disabled": j.disabled || L.value >= z.value ? "true" : void 0,
-					title: j.showTitle ? "Next Page" : void 0,
-					"aria-label": "Next Page",
-					onClick: Y
-				}, [o(p(e), {
-					icon: "chevron-right",
-					"aria-hidden": "true"
-				})], 8, S)
-			], 64)) : (l(), i(t, { key: 2 }, [
-				a("button", {
-					class: "b-pagination__item b-pagination__prev",
-					type: "button",
-					disabled: j.disabled || L.value <= 1,
-					"aria-disabled": j.disabled || L.value <= 1 ? "true" : void 0,
-					title: j.showTitle ? "Previous Page" : void 0,
-					"aria-label": "Previous Page",
-					onClick: J
-				}, [o(p(e), {
-					icon: "chevron-left",
-					"aria-hidden": "true"
-				})], 8, C),
-				(l(!0), i(t, null, d(G.value, (e) => (l(), i(t, { key: `${e.type}-${e.page}` }, [e.type === "prev-ellipsis" || e.type === "next-ellipsis" ? (l(), i("button", {
-					key: 0,
-					class: "b-pagination__item b-pagination__ellipsis",
-					type: "button",
-					disabled: j.disabled,
-					title: j.showTitle ? e.type === "prev-ellipsis" ? "Previous 5 Pages" : "Next 5 Pages" : void 0,
-					"aria-label": e.type === "prev-ellipsis" ? "Previous 5 Pages" : "Next 5 Pages",
-					onClick: (t) => K(e.page)
-				}, [...u[4] ||= [a("span", { "aria-hidden": "true" }, "•••", -1)]], 8, w)) : (l(), i("button", {
-					key: 1,
-					class: c(["b-pagination__item b-pagination__page", { "b-pagination__page--active": e.page === L.value }]),
-					type: "button",
-					disabled: j.disabled,
-					"aria-current": e.page === L.value ? "page" : void 0,
-					"aria-label": `Page ${e.page}`,
-					title: j.showTitle ? `${e.page}` : void 0,
-					onClick: (t) => K(e.page)
-				}, f(e.page), 11, ee))], 64))), 128)),
-				a("button", {
-					class: "b-pagination__item b-pagination__next",
-					type: "button",
-					disabled: j.disabled || L.value >= z.value,
-					"aria-disabled": j.disabled || L.value >= z.value ? "true" : void 0,
-					title: j.showTitle ? "Next Page" : void 0,
-					"aria-label": "Next Page",
-					onClick: Y
-				}, [o(p(e), {
-					icon: "chevron-right",
-					"aria-hidden": "true"
-				})], 8, T)
-			], 64)),
-			V.value && !H.value ? (l(), i("select", {
-				key: 3,
-				class: "b-pagination__size-changer",
-				value: R.value,
-				disabled: j.disabled,
-				"aria-label": "Items per page",
-				onChange: u[1] ||= (e) => q(Number(e.target.value))
-			}, [(l(!0), i(t, null, d(s.pageSizeOptions, (e) => (l(), i("option", {
-				key: e,
-				value: e
-			}, f(e) + " / page", 9, D))), 128))], 40, E)) : r("", !0),
-			j.showQuickJumper && !H.value ? (l(), i("span", O, [u[5] ||= a("span", null, "Go to", -1), a("input", {
-				class: "b-pagination__jumper-input",
-				type: "text",
-				inputmode: "numeric",
-				value: X.value,
-				disabled: j.disabled,
-				"aria-label": "Go to page",
-				onInput: u[2] ||= (e) => X.value = e.target.value,
-				onKeydown: Z
-			}, null, 40, k)])) : r("", !0)
-		], 10, h));
-	}
-});
+import e from "./design-system152.js";
+/* empty css                 */
+//#region src/components/BMenu/BMenu.vue
+var t = e;
 //#endregion
-export { A as default };
+export { t as default };
 
 //# sourceMappingURL=design-system154.js.map