@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system159.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system159.js","names":[],"sources":["../src/components/BPopconfirm/BPopconfirm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BPopconfirmPlacement, BPopconfirmTrigger } from '@/types.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  description,\n  okText = 'Yes',\n  cancelText = 'No',\n  okType = 'primary',\n  disabled = false,\n  icon: _icon,\n  showCancel = true,\n  trigger = BPopconfirmTrigger.Click,\n  placement = BPopconfirmPlacement.TopCenter,\n  arrow = true,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1060,\n  modelValue = undefined,\n} = defineProps<{\n  /** The confirmation question or text shown in the popconfirm. Also accepts the `title` slot. */\n  title?: string;\n  /** Additional description below the title. Also accepts the `description` slot. */\n  description?: string;\n  /** Text of the confirm button. */\n  okText?: string;\n  /** Text of the cancel button. */\n  cancelText?: string;\n  /** Button type of the confirm button: 'primary' | 'default' | 'dashed' | 'text' | 'link'. */\n  okType?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /** Whether the popconfirm is disabled (clicking trigger does nothing). */\n  disabled?: boolean;\n  /** Custom icon slot name override. When not provided, a default warning icon is used. */\n  icon?: string;\n  /** Whether to show the cancel button. */\n  showCancel?: boolean;\n  /** The event that triggers the popconfirm to open. */\n  trigger?: `${BPopconfirmTrigger}`;\n  /** Placement of the popconfirm relative to the target element. */\n  placement?: `${BPopconfirmPlacement}`;\n  /** Whether the popconfirm has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the popconfirm DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the popconfirm. */\n  zIndex?: number;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the confirm button is clicked. Receives a callback to close programmatically. */\n  (e: 'confirm', event: MouseEvent): void;\n  /** Emitted when the cancel button is clicked. Receives a callback to close programmatically. */\n  (e: 'cancel', event: MouseEvent): void;\n  /** Emitted when the popconfirm visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the popconfirm. */\n  default?(): unknown;\n  /** Overrides the `title` prop with custom content. */\n  title?(): unknown;\n  /** Overrides the `description` prop with custom content. */\n  description?(): unknown;\n  /** Overrides the default warning icon. */\n  icon?(): unknown;\n  /** Overrides the confirm button. */\n  okButton?(): unknown;\n  /** Overrides the cancel button. */\n  cancelButton?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst popconfirmId = useId();\nconst titleId = `${popconfirmId}-title`;\nconst descId = `${popconfirmId}-desc`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  if (disabled) return;\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popconfirmRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popconfirmRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popconfirmRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirstButton() {\n  nextTick(() => {\n    if (!popconfirmRef.value) return;\n    const first = popconfirmRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popconfirmRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !popconfirmRef.value) return;\n\n  const focusable = Array.from(\n    popconfirmRef.value.querySelectorAll<HTMLElement>(focusableSelector),\n  );\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirstButton();\n  } else {\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Button handlers\n// ─────────────────────────────────────────────\nfunction onConfirm(event: MouseEvent) {\n  emit('confirm', event);\n  requestClose();\n}\n\nfunction onCancel(event: MouseEvent) {\n  emit('cancel', event);\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (disabled) return;\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n  }\n}\n\nfunction onPopconfirmKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    requestClose();\n  }\n  trapFocus(event);\n}\n\n// ─────────────────────────────────────────────\n// Popconfirm hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopconfirmMouseEnter() {\n  if (trigger === BPopconfirmTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopconfirmMouseLeave() {\n  if (trigger === BPopconfirmTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BPopconfirmTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BPopconfirmTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BPopconfirmTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popconfirmRef.value?.showPopover();\n    } else {\n      popconfirmRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-popconfirm-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BPopconfirmPlacement.TopLeft]: 'top-left',\n    [BPopconfirmPlacement.TopCenter]: 'top-center',\n    [BPopconfirmPlacement.TopRight]: 'top-right',\n    [BPopconfirmPlacement.RightTop]: 'right-top',\n    [BPopconfirmPlacement.RightCenter]: 'right-center',\n    [BPopconfirmPlacement.RightBottom]: 'right-bottom',\n    [BPopconfirmPlacement.BottomRight]: 'bottom-right',\n    [BPopconfirmPlacement.BottomCenter]: 'bottom-center',\n    [BPopconfirmPlacement.BottomLeft]: 'bottom-left',\n    [BPopconfirmPlacement.LeftBottom]: 'left-bottom',\n    [BPopconfirmPlacement.LeftCenter]: 'left-center',\n    [BPopconfirmPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst okButtonClass = computed(() => {\n  const map: Record<string, string> = {\n    primary: 'b-popconfirm__btn--primary',\n    default: 'b-popconfirm__btn--default',\n    dashed: 'b-popconfirm__btn--dashed',\n    text: 'b-popconfirm__btn--text',\n    link: 'b-popconfirm__btn--link',\n  };\n  return map[okType] ?? 'b-popconfirm__btn--primary';\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div ref=\"toggleRef\" class=\"b-popconfirm__toggle\" :style=\"{ anchorName: anchorName }\">\n    <slot />\n  </div>\n\n  <div\n    ref=\"popconfirmRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-popconfirm__content',\n      placementClass,\n      { 'b-popconfirm__content--no-arrow': !arrow },\n    ]\"\n    :style=\"{ zIndex, positionAnchor: anchorName }\"\n    role=\"dialog\"\n    aria-modal=\"false\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descId : undefined\"\n    :id=\"popconfirmId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onPopconfirmKeydown\"\n    @mouseenter=\"onPopconfirmMouseEnter\"\n    @mouseleave=\"onPopconfirmMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-popconfirm__arrow\" aria-hidden=\"true\" />\n      <div class=\"b-popconfirm__inner\">\n        <div class=\"b-popconfirm__message\">\n          <span class=\"b-popconfirm__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n                />\n              </svg>\n            </slot>\n          </span>\n          <div class=\"b-popconfirm__text\">\n            <div :id=\"titleId\" class=\"b-popconfirm__title\">\n              <slot name=\"title\">{{ title }}</slot>\n            </div>\n            <div\n              v-if=\"description || $slots.description\"\n              :id=\"descId\"\n              class=\"b-popconfirm__description\"\n            >\n              <slot name=\"description\">{{ description }}</slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"b-popconfirm__buttons\" role=\"group\">\n          <slot name=\"cancelButton\">\n            <button\n              v-if=\"showCancel\"\n              type=\"button\"\n              class=\"b-popconfirm__btn b-popconfirm__btn--default\"\n              @click=\"onCancel\"\n            >\n              {{ cancelText }}\n            </button>\n          </slot>\n          <slot name=\"okButton\">\n            <button type=\"button\" :class=\"['b-popconfirm__btn', okButtonClass]\" @click=\"onConfirm\">\n              {{ okText }}\n            </button>\n          </slot>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-popconfirm-bg: #fff;\n  --b-popconfirm-color: oklch(25% 0 0);\n  --b-popconfirm-font-size: 0.875rem;\n  --b-popconfirm-line-height: 1.5;\n  --b-popconfirm-padding-x: 0.75rem;\n  --b-popconfirm-padding-y: 0.75rem;\n  --b-popconfirm-border-radius: 0.5rem;\n  --b-popconfirm-max-width: 320px;\n  --b-popconfirm-arrow-size: 8px;\n  --b-popconfirm-arrow-color: #fff;\n  --b-popconfirm-gap: 8px;\n  --b-popconfirm-transition-duration: 200ms;\n  --b-popconfirm-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-popconfirm-icon-color: oklch(75% 0.15 85);\n  --b-popconfirm-title-font-weight: 600;\n  --b-popconfirm-description-color: oklch(45% 0 0);\n  --b-popconfirm-btn-font-size: 0.8125rem;\n  --b-popconfirm-btn-padding-x: 0.5rem;\n  --b-popconfirm-btn-padding-y: 0.125rem;\n  --b-popconfirm-btn-border-radius: 0.25rem;\n  --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n  --b-popconfirm-btn-primary-color: #fff;\n  --b-popconfirm-btn-default-bg: transparent;\n  --b-popconfirm-btn-default-color: oklch(25% 0 0);\n  --b-popconfirm-btn-default-border: oklch(80% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-popconfirm-bg: oklch(22% 0 0);\n  --b-popconfirm-color: oklch(90% 0 0);\n  --b-popconfirm-arrow-color: oklch(22% 0 0);\n  --b-popconfirm-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-popconfirm-icon-color: oklch(80% 0.15 85);\n  --b-popconfirm-description-color: oklch(65% 0 0);\n  --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n  --b-popconfirm-btn-default-color: oklch(90% 0 0);\n  --b-popconfirm-btn-default-border: oklch(40% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-popconfirm-bg: oklch(22% 0 0);\n    --b-popconfirm-color: oklch(90% 0 0);\n    --b-popconfirm-arrow-color: oklch(22% 0 0);\n    --b-popconfirm-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-popconfirm-icon-color: oklch(80% 0.15 85);\n    --b-popconfirm-description-color: oklch(65% 0 0);\n    --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n    --b-popconfirm-btn-default-color: oklch(90% 0 0);\n    --b-popconfirm-btn-default-border: oklch(40% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-popconfirm__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Popconfirm content (popover)\n   ───────────────────────────────────────────── */\n.b-popconfirm__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-popconfirm-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-popconfirm-transition-duration),\n    opacity var(--b-popconfirm-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-popconfirm-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-popconfirm-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-popconfirm__inner {\n  background: var(--b-popconfirm-bg);\n  color: var(--b-popconfirm-color);\n  font-size: var(--b-popconfirm-font-size);\n  line-height: var(--b-popconfirm-line-height);\n  padding: var(--b-popconfirm-padding-y) var(--b-popconfirm-padding-x);\n  border-radius: var(--b-popconfirm-border-radius);\n  box-shadow: var(--b-popconfirm-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Message row (icon + text)\n   ───────────────────────────────────────────── */\n.b-popconfirm__message {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.b-popconfirm__icon {\n  flex-shrink: 0;\n  color: var(--b-popconfirm-icon-color);\n  line-height: 1;\n  margin-top: 0.125rem;\n}\n\n.b-popconfirm__text {\n  flex: 1;\n  min-width: 0;\n}\n\n.b-popconfirm__title {\n  font-weight: var(--b-popconfirm-title-font-weight);\n}\n\n.b-popconfirm__description {\n  color: var(--b-popconfirm-description-color);\n  margin-top: 0.25rem;\n  font-size: 0.8125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Buttons\n   ───────────────────────────────────────────── */\n.b-popconfirm__buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.b-popconfirm__btn {\n  cursor: pointer;\n  font-size: var(--b-popconfirm-btn-font-size);\n  line-height: 1.5;\n  padding: var(--b-popconfirm-btn-padding-y) var(--b-popconfirm-btn-padding-x);\n  border-radius: var(--b-popconfirm-btn-border-radius);\n  border: 1px solid transparent;\n  font-family: inherit;\n  transition: opacity 150ms;\n\n  &:hover {\n    opacity: 0.85;\n  }\n\n  &:focus-visible {\n    outline: 2px solid oklch(55% 0.2 260);\n    outline-offset: 1px;\n  }\n}\n\n.b-popconfirm__btn--primary {\n  background: var(--b-popconfirm-btn-primary-bg);\n  color: var(--b-popconfirm-btn-primary-color);\n}\n\n.b-popconfirm__btn--default {\n  background: var(--b-popconfirm-btn-default-bg);\n  color: var(--b-popconfirm-btn-default-color);\n  border-color: var(--b-popconfirm-btn-default-border);\n}\n\n.b-popconfirm__btn--dashed {\n  background: var(--b-popconfirm-btn-default-bg);\n  color: var(--b-popconfirm-btn-default-color);\n  border-color: var(--b-popconfirm-btn-default-border);\n  border-style: dashed;\n}\n\n.b-popconfirm__btn--text {\n  background: transparent;\n  color: var(--b-popconfirm-btn-default-color);\n  border: none;\n}\n\n.b-popconfirm__btn--link {\n  background: transparent;\n  color: var(--b-popconfirm-btn-primary-bg);\n  border: none;\n  text-decoration: underline;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-popconfirm__arrow {\n  position: absolute;\n  width: var(--b-popconfirm-arrow-size);\n  height: var(--b-popconfirm-arrow-size);\n  background: var(--b-popconfirm-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-popconfirm__content.top-left .b-popconfirm__arrow,\n.b-popconfirm__content.top-center .b-popconfirm__arrow,\n.b-popconfirm__content.top-right .b-popconfirm__arrow {\n  bottom: calc(var(--b-popconfirm-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-popconfirm__content.bottom-left .b-popconfirm__arrow,\n.b-popconfirm__content.bottom-center .b-popconfirm__arrow,\n.b-popconfirm__content.bottom-right .b-popconfirm__arrow {\n  top: calc(var(--b-popconfirm-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-popconfirm__content.right-top .b-popconfirm__arrow,\n.b-popconfirm__content.right-center .b-popconfirm__arrow,\n.b-popconfirm__content.right-bottom .b-popconfirm__arrow {\n  left: calc(var(--b-popconfirm-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-popconfirm__content.left-top .b-popconfirm__arrow,\n.b-popconfirm__content.left-center .b-popconfirm__arrow,\n.b-popconfirm__content.left-bottom .b-popconfirm__arrow {\n  right: calc(var(--b-popconfirm-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-popconfirm-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-popconfirm-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-popconfirm__content {\n    transition-duration: 0ms;\n  }\n\n  .b-popconfirm__btn {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system16.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system16.js","names":[],"sources":["../src/components/BAvatar/BAvatar.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \"vue\"\n\nconst _hoisted_1 = [\"id\", \"aria-label\"]\nconst _hoisted_2 = [\"src\", \"srcset\", \"alt\", \"crossorigin\", \"draggable\"]\nconst _hoisted_3 = {\n  key: 1,\n  class: \"b-avatar__icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_4 = {\n  key: 3,\n  class: \"b-avatar__icon b-avatar__icon--fallback\",\n  \"aria-hidden\": \"true\"\n}\n\nimport { BAvatarShape, BAvatarSize } from '@/types.ts';\nimport { computed, nextTick, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BAvatar',\n  props: {\n    shape: { default: () => (BAvatarShape.Circle) },\n    size: { default: () => (BAvatarSize.Default) },\n    src: { default: '' },\n    srcSet: { default: '' },\n    alt: { default: '' },\n    icon: { type: Boolean, default: false },\n    gap: { default: 4 },\n    crossOrigin: {},\n    draggable: { type: Boolean }\n  },\n  emits: [\"error\"],\n  setup(__props: any, { emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = _useSlots();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst avatarId = useId();\nconst isImgExist = ref(true);\nconst textRef = ref<HTMLSpanElement | null>(null);\nconst avatarRef = ref<HTMLSpanElement | null>(null);\nconst textScale = ref(1);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isCustomSize = computed(() => typeof __props.size === 'number');\nconst sizeLabel = computed(() => (isCustomSize.value ? undefined : __props.size));\n\nconst hasImage = computed(() => __props.src && isImgExist.value);\nconst hasIcon = computed(() => __props.icon || Boolean(slots.icon));\nconst hasText = computed(() => !hasImage.value && !hasIcon.value && Boolean(slots.default));\n\nconst rootClasses = computed(() => [\n  'b-avatar',\n  `b-avatar--${__props.shape}`,\n  {\n    [`b-avatar--${sizeLabel.value}`]: !isCustomSize.value,\n    'b-avatar--image': hasImage.value,\n    'b-avatar--icon': hasIcon.value,\n  },\n]);\n\nconst rootStyle = computed(() => {\n  if (!isCustomSize.value) return undefined;\n  const px = `${__props.size}px`;\n  return {\n    width: px,\n    height: px,\n    lineHeight: px,\n    fontSize: `${(__props.size as number) / 2}px`,\n  };\n});\n\nconst textStyle = computed(() => {\n  if (textScale.value === 1) return undefined;\n  return {\n    transform: `scale(${textScale.value}) translateX(-50%)`,\n  };\n});\n\nconst ariaLabel = computed(() => {\n  if (__props.alt) return __props.alt;\n  return 'Avatar';\n});\n\n// ─────────────────────────────────────────────\n// Image error handling\n// ─────────────────────────────────────────────\nfunction handleImgError(e: Event) {\n  isImgExist.value = false;\n  emit('error', e);\n}\n\n// Reset image state when src changes\nwatch(\n  () => __props.src,\n  () => {\n    isImgExist.value = true;\n  },\n);\n\n// ─────────────────────────────────────────────\n// Text auto-scaling\n// ─────────────────────────────────────────────\nfunction scaleText() {\n  if (!textRef.value || !avatarRef.value) return;\n  const avatarWidth = avatarRef.value.offsetWidth;\n  const textWidth = textRef.value.offsetWidth;\n  const availableWidth = avatarWidth - __props.gap * 2;\n  if (availableWidth <= 0) {\n    textScale.value = 1;\n    return;\n  }\n  textScale.value = textWidth > availableWidth ? availableWidth / textWidth : 1;\n}\n\nonMounted(() => {\n  nextTick(scaleText);\n});\n\nwatch([() => __props.gap, hasText], () => {\n  nextTick(scaleText);\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"span\", {\n    id: _unref(avatarId),\n    ref_key: \"avatarRef\",\n    ref: avatarRef,\n    class: _normalizeClass(rootClasses.value),\n    style: _normalizeStyle(rootStyle.value),\n    role: \"img\",\n    \"aria-label\": ariaLabel.value\n  }, [\n    (hasImage.value)\n      ? (_openBlock(), _createElementBlock(\"img\", {\n          key: 0,\n          class: \"b-avatar__image\",\n          src: __props.src,\n          srcset: __props.srcSet || undefined,\n          alt: __props.alt,\n          crossorigin: __props.crossOrigin,\n          draggable: __props.draggable,\n          onError: handleImgError\n        }, null, 40, _hoisted_2))\n      : (hasIcon.value)\n        ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, [\n            _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n              _renderSlot(_ctx.$slots, \"default\")\n            ])\n          ]))\n        : (hasText.value)\n          ? (_openBlock(), _createElementBlock(\"span\", {\n              key: 2,\n              ref_key: \"textRef\",\n              ref: textRef,\n              class: \"b-avatar__text\",\n              style: _normalizeStyle(textStyle.value),\n              \"aria-hidden\": \"true\"\n            }, [\n              _renderSlot(_ctx.$slots, \"default\")\n            ], 4))\n          : (_openBlock(), _createElementBlock(\"span\", _hoisted_4, [...(_cache[0] || (_cache[0] = [\n              _createElementVNode(\"svg\", {\n                viewBox: \"64 64 896 896\",\n                fill: \"currentColor\",\n                width: \"1em\",\n                height: \"1em\",\n                \"aria-hidden\": \"true\"\n              }, [\n                _createElementVNode(\"path\", { d: \"M512 580c-123.7 0-224-100.3-224-224S388.3 132 512 132s224 100.3 224 224-100.3 224-224 224zm0-384c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zm370 766.7c-3.7-73.2-32.7-142.4-84.3-200.1C741.5 701.6 660.1 668 574 652.2c-8.6-1.6-17.5 1.3-23.4 7.5-25.5 27.1-59.5 42.3-95.6 42.3s-70.1-15.2-95.6-42.3c-5.9-6.2-14.8-9.1-23.4-7.5-86.1 15.8-167.5 49.4-223.7 110.4-51.6 57.7-80.6 126.9-84.3 200.1-0.4 8.5 6.4 15.3 14.9 15.3h60.3c8 0 14.6-6.2 15-14.2 3.1-58.7 25.6-114 65.2-160.1 42.3-49.2 101.5-83.7 167.3-99.1 28.7 26.8 66.5 42 106.3 42s77.6-15.2 106.3-42c65.8 15.4 125 49.9 167.3 99.1 39.6 46.1 62.1 101.4 65.2 160.1 0.4 8 7 14.2 15 14.2h60.3c8.5 0 15.3-6.8 14.9-15.3z\" })\n              ], -1)\n            ]))]))\n  ], 14, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system16.js","names":[],"sources":["../src/components/BAvatar/BAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BAvatarShape, BAvatarSize } from '@/types.ts';\nimport { computed, nextTick, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  shape = BAvatarShape.Circle,\n  size = BAvatarSize.Default,\n  src = '',\n  srcSet = '',\n  alt = '',\n  icon = false,\n  gap = 4,\n  crossOrigin,\n  draggable,\n} = defineProps<{\n  /**\n   * Shape of the avatar.\n   * @default 'circle'\n   */\n  shape?: `${BAvatarShape}`;\n  /**\n   * Size of the avatar. Can be a preset string or a custom pixel number.\n   * @default 'default'\n   */\n  size?: `${BAvatarSize}` | number;\n  /**\n   * Image source URL for the avatar.\n   */\n  src?: string;\n  /**\n   * Srcset attribute for responsive image sources.\n   */\n  srcSet?: string;\n  /**\n   * Alt text for the image avatar.\n   */\n  alt?: string;\n  /**\n   * Whether the default slot contains an icon (applies icon styling).\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Pixel gap between the text content and the avatar edges for auto-scaling.\n   * @default 4\n   */\n  gap?: number;\n  /**\n   * CORS setting for the image element.\n   */\n  crossOrigin?: '' | 'anonymous' | 'use-credentials';\n  /**\n   * Whether the image is draggable.\n   */\n  draggable?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the image fails to load. Allows fallback to icon/text.\n   */\n  (e: 'error', event: Event): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Fallback content when no src or image fails: text or icon. */\n  default?(): unknown;\n  /** Custom icon slot (replaces default icon fallback). */\n  icon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst avatarId = useId();\nconst isImgExist = ref(true);\nconst textRef = ref<HTMLSpanElement | null>(null);\nconst avatarRef = ref<HTMLSpanElement | null>(null);\nconst textScale = ref(1);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isCustomSize = computed(() => typeof size === 'number');\nconst sizeLabel = computed(() => (isCustomSize.value ? undefined : size));\n\nconst hasImage = computed(() => src && isImgExist.value);\nconst hasIcon = computed(() => icon || Boolean(slots.icon));\nconst hasText = computed(() => !hasImage.value && !hasIcon.value && Boolean(slots.default));\n\nconst rootClasses = computed(() => [\n  'b-avatar',\n  `b-avatar--${shape}`,\n  {\n    [`b-avatar--${sizeLabel.value}`]: !isCustomSize.value,\n    'b-avatar--image': hasImage.value,\n    'b-avatar--icon': hasIcon.value,\n  },\n]);\n\nconst rootStyle = computed(() => {\n  if (!isCustomSize.value) return undefined;\n  const px = `${size}px`;\n  return {\n    width: px,\n    height: px,\n    lineHeight: px,\n    fontSize: `${(size as number) / 2}px`,\n  };\n});\n\nconst textStyle = computed(() => {\n  if (textScale.value === 1) return undefined;\n  return {\n    transform: `scale(${textScale.value}) translateX(-50%)`,\n  };\n});\n\nconst ariaLabel = computed(() => {\n  if (alt) return alt;\n  return 'Avatar';\n});\n\n// ─────────────────────────────────────────────\n// Image error handling\n// ─────────────────────────────────────────────\nfunction handleImgError(e: Event) {\n  isImgExist.value = false;\n  emit('error', e);\n}\n\n// Reset image state when src changes\nwatch(\n  () => src,\n  () => {\n    isImgExist.value = true;\n  },\n);\n\n// ─────────────────────────────────────────────\n// Text auto-scaling\n// ─────────────────────────────────────────────\nfunction scaleText() {\n  if (!textRef.value || !avatarRef.value) return;\n  const avatarWidth = avatarRef.value.offsetWidth;\n  const textWidth = textRef.value.offsetWidth;\n  const availableWidth = avatarWidth - gap * 2;\n  if (availableWidth <= 0) {\n    textScale.value = 1;\n    return;\n  }\n  textScale.value = textWidth > availableWidth ? availableWidth / textWidth : 1;\n}\n\nonMounted(() => {\n  nextTick(scaleText);\n});\n\nwatch([() => gap, hasText], () => {\n  nextTick(scaleText);\n});\n</script>\n\n<template>\n  <span\n    :id=\"avatarId\"\n    ref=\"avatarRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"img\"\n    :aria-label=\"ariaLabel\"\n  >\n    <!-- Image avatar -->\n    <img\n      v-if=\"hasImage\"\n      class=\"b-avatar__image\"\n      :src=\"src\"\n      :srcset=\"srcSet || undefined\"\n      :alt=\"alt\"\n      :crossorigin=\"crossOrigin\"\n      :draggable=\"draggable\"\n      @error=\"handleImgError\"\n    />\n\n    <!-- Icon avatar -->\n    <span v-else-if=\"hasIcon\" class=\"b-avatar__icon\" aria-hidden=\"true\">\n      <slot name=\"icon\">\n        <slot />\n      </slot>\n    </span>\n\n    <!-- Text avatar (auto-scaled) -->\n    <span\n      v-else-if=\"hasText\"\n      ref=\"textRef\"\n      class=\"b-avatar__text\"\n      :style=\"textStyle\"\n      aria-hidden=\"true\"\n    >\n      <slot />\n    </span>\n\n    <!-- Empty fallback -->\n    <span v-else class=\"b-avatar__icon b-avatar__icon--fallback\" aria-hidden=\"true\">\n      <svg viewBox=\"64 64 896 896\" fill=\"currentColor\" width=\"1em\" height=\"1em\" aria-hidden=\"true\">\n        <path\n          d=\"M512 580c-123.7 0-224-100.3-224-224S388.3 132 512 132s224 100.3 224 224-100.3 224-224 224zm0-384c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zm370 766.7c-3.7-73.2-32.7-142.4-84.3-200.1C741.5 701.6 660.1 668 574 652.2c-8.6-1.6-17.5 1.3-23.4 7.5-25.5 27.1-59.5 42.3-95.6 42.3s-70.1-15.2-95.6-42.3c-5.9-6.2-14.8-9.1-23.4-7.5-86.1 15.8-167.5 49.4-223.7 110.4-51.6 57.7-80.6 126.9-84.3 200.1-0.4 8.5 6.4 15.3 14.9 15.3h60.3c8 0 14.6-6.2 15-14.2 3.1-58.7 25.6-114 65.2-160.1 42.3-49.2 101.5-83.7 167.3-99.1 28.7 26.8 66.5 42 106.3 42s77.6-15.2 106.3-42c65.8 15.4 125 49.9 167.3 99.1 39.6 46.1 62.1 101.4 65.2 160.1 0.4 8 7 14.2 15 14.2h60.3c8.5 0 15.3-6.8 14.9-15.3z\"\n        />\n      </svg>\n    </span>\n  </span>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-avatar {\n  /* Sizes */\n  --b-avatar-size-small: 24px;\n  --b-avatar-size-default: 32px;\n  --b-avatar-size-large: 40px;\n\n  /* Font sizes */\n  --b-avatar-font-size-small: 14px;\n  --b-avatar-font-size-default: 18px;\n  --b-avatar-font-size-large: 24px;\n\n  /* Colors */\n  --b-avatar-bg: oklch(50% 0.06 240);\n  --b-avatar-color: oklch(100% 0 0);\n  --b-avatar-icon-color: oklch(100% 0 0);\n\n  /* Shape */\n  --b-avatar-border-radius-square: 6px;\n\n  /* Transition */\n  --b-avatar-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-avatar {\n  --b-avatar-bg: oklch(40% 0.03 240);\n  --b-avatar-color: oklch(90% 0.01 240);\n  --b-avatar-icon-color: oklch(90% 0.01 240);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-avatar {\n    --b-avatar-bg: oklch(40% 0.03 240);\n    --b-avatar-color: oklch(90% 0.01 240);\n    --b-avatar-icon-color: oklch(90% 0.01 240);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  white-space: nowrap;\n  text-align: center;\n  vertical-align: middle;\n  background: var(--b-avatar-bg);\n  color: var(--b-avatar-color);\n  width: var(--b-avatar-size-default);\n  height: var(--b-avatar-size-default);\n  line-height: var(--b-avatar-size-default);\n  font-size: var(--b-avatar-font-size-default);\n  box-sizing: border-box;\n  position: relative;\n  user-select: none;\n  transition: all var(--b-avatar-transition-duration) ease;\n}\n\n/* ── Shapes ── */\n.b-avatar--circle {\n  border-radius: 50%;\n}\n\n.b-avatar--square {\n  border-radius: var(--b-avatar-border-radius-square);\n}\n\n/* ── Sizes ── */\n.b-avatar--small {\n  width: var(--b-avatar-size-small);\n  height: var(--b-avatar-size-small);\n  line-height: var(--b-avatar-size-small);\n  font-size: var(--b-avatar-font-size-small);\n}\n\n.b-avatar--large {\n  width: var(--b-avatar-size-large);\n  height: var(--b-avatar-size-large);\n  line-height: var(--b-avatar-size-large);\n  font-size: var(--b-avatar-font-size-large);\n}\n\n/* ── Image ── */\n.b-avatar--image {\n  background: transparent;\n}\n\n.b-avatar__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ── Icon ── */\n.b-avatar__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--b-avatar-icon-color);\n}\n\n.b-avatar__icon > svg {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n}\n\n.b-avatar__icon--fallback > svg {\n  width: 1em;\n  height: 1em;\n}\n\n/* ── Text ── */\n.b-avatar__text {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  transform-origin: 0 center;\n  white-space: nowrap;\n  line-height: 1;\n  font-weight: 500;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-avatar {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,IAAM,IAAO,GAUP,IAAQ,GAKV,EAKE,IAAW,GAAO,EAClB,IAAa,EAAI,GAAK,EACtB,IAAU,EAA4B,KAAK,EAC3C,IAAY,EAA4B,KAAK,EAC7C,IAAY,EAAI,EAAE,EAKlB,IAAe,QAAe,OAAO,EAAA,QAAS,SAAS,EACvD,IAAY,QAAgB,EAAa,QAAQ,KAAA,IAAY,EAAA,KAAM,EAEnE,IAAW,QAAe,EAAA,OAAO,EAAW,MAAM,EAClD,IAAU,QAAe,EAAA,QAAQ,EAAQ,EAAM,KAAM,EACrD,IAAU,QAAe,CAAC,EAAS,SAAS,CAAC,EAAQ,SAAS,EAAQ,EAAM,QAAS,EAErF,IAAc,QAAe;GACjC;GACA,aAAa,EAAA;GACb;KACG,aAAa,EAAU,UAAU,CAAC,EAAa;IAChD,mBAAmB,EAAS;IAC5B,kBAAkB,EAAQ;IAC3B;GACF,CAAC,EAEI,IAAY,QAAe;AAC/B,OAAI,CAAC,EAAa,MAAO;GACzB,IAAM,IAAK,GAAG,EAAA,KAAK;AACnB,UAAO;IACL,OAAO;IACP,QAAQ;IACR,YAAY;IACZ,UAAU,GAAI,EAAA,OAAkB,EAAE;IACnC;IACD,EAEI,IAAY,QAAe;AAC3B,SAAU,UAAU,EACxB,QAAO,EACL,WAAW,SAAS,EAAU,MAAM,qBACrC;IACD,EAEI,IAAY,QACZ,EAAA,MAAY,EAAA,MACT,SACP;EAKF,SAAS,EAAe,GAAU;AAEhC,GADA,EAAW,QAAQ,IACnB,EAAK,SAAS,EAAE;;AAIlB,UACQ,EAAA,WACA;AACJ,KAAW,QAAQ;IAEtB;EAKD,SAAS,IAAY;AACnB,OAAI,CAAC,EAAQ,SAAS,CAAC,EAAU,MAAO;GACxC,IAAM,IAAc,EAAU,MAAM,aAC9B,IAAY,EAAQ,MAAM,aAC1B,IAAiB,IAAc,EAAA,MAAM;AAC3C,OAAI,KAAkB,GAAG;AACvB,MAAU,QAAQ;AAClB;;AAEF,KAAU,QAAQ,IAAY,IAAiB,IAAiB,IAAY;;SAG9E,QAAgB;AACd,KAAS,EAAU;IACnB,EAEF,EAAM,OAAO,EAAA,KAAK,EAAQ,QAAQ;AAChC,KAAS,EAAU;IACnB,kBAIA,EA8CO,QAAA;GA7CJ,IAAI,EAAA,EAAQ;YACT;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAW;GAClB,OAAK,EAAE,EAAA,MAAS;GACjB,MAAK;GACJ,cAAY,EAAA;MAIL,EAAA,SAAA,GAAA,EADR,EASE,OAAA;;GAPA,OAAM;GACL,KAAK,EAAA;GACL,QAAQ,EAAA,UAAU,KAAA;GAClB,KAAK,EAAA;GACL,aAAa,EAAA;GACb,WAAW,EAAA;GACX,SAAO;qBAIO,EAAA,SAAA,GAAA,EAAjB,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,QAAA,EAAA,QAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA,IAMC,EAAA,SAAA,GAAA,EADb,EAQO,QAAA;;YAND;GAAJ,KAAI;GACJ,OAAM;GACL,OAAK,EAAE,EAAA,MAAS;GACjB,eAAY;MAEZ,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,KAAA,GAAA,EAIV,EAMO,QANP,GAMO,CAAA,GAAA,AAAA,EAAA,OAAA,CALL,EAIM,OAAA;GAJD,SAAQ;GAAgB,MAAK;GAAe,OAAM;GAAM,QAAO;GAAM,eAAY;MACpF,EAEE,QAAA,EADA,GAAE,urBAAqrB,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA"}

package/dist/design-system160.js

@@ -1,9 +1,192 @@
-import e from "./design-system14.js";
-import t from "./design-system158.js";
-/* empty css                 */
-//#region src/components/BRadio/BRadio.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-58cd3e1a"]]);
+import { BPopoverPlacement as e, BPopoverTrigger as t } from "./design-system3.js";
+import { useComponentId as n } from "./design-system10.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as ee, useId as te, watch as y } from "vue";
+//#region src/components/BPopover/BPopover.vue?vue&type=script&setup=true&lang.ts
+var b = ["id"], x = {
+	key: 0,
+	class: "b-popover__arrow",
+	"aria-hidden": "true"
+}, ne = { class: "b-popover__inner" }, S = { class: "b-popover__body" }, C = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", w = /* @__PURE__ */ l({
+	__name: "BPopover",
+	props: {
+		title: {},
+		content: {},
+		trigger: { default: () => t.Hover },
+		placement: { default: () => e.TopCenter },
+		arrow: {
+			type: Boolean,
+			default: !0
+		},
+		mouseEnterDelay: { default: 100 },
+		mouseLeaveDelay: { default: 100 },
+		destroyTooltipOnHide: {
+			type: Boolean,
+			default: !1
+		},
+		zIndex: { default: 1030 },
+		fresh: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		}
+	},
+	emits: ["openChange", "update:modelValue"],
+	setup(l, { expose: w, emit: T }) {
+		let E = T, { componentUID: D } = n(), O = te(), k = `${O}-title`, A = g(!1), j = i(() => l.modelValue === void 0 ? A.value : l.modelValue), M = g(!1), re = i(() => l.fresh || l.destroyTooltipOnHide ? j.value : M.value || j.value);
+		y(j, (e) => {
+			e && (M.value = !0);
+		});
+		let N = null, P = null;
+		function F() {
+			N &&= (clearTimeout(N), null), P &&= (clearTimeout(P), null);
+		}
+		function I(e = 0) {
+			F(), !j.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
+		}
+		function L(e = 0) {
+			F(), j.value && (e > 0 ? P = setTimeout(() => z(), e) : z());
+		}
+		function R() {
+			B.value?.showPopover();
+		}
+		function z() {
+			B.value?.hidePopover();
+		}
+		function ie(e) {
+			l.modelValue === void 0 ? A.value = e : E("update:modelValue", e), E("openChange", e);
+		}
+		let ae = ({ newState: e }) => {
+			ie(e === "open");
+		}, B = g(null), V = g(null), H = null;
+		function U() {
+			u(() => {
+				if (!B.value) return;
+				let e = B.value.querySelector(C);
+				e ? e.focus() : B.value.focus();
+			});
+		}
+		function W(e) {
+			if (e.key !== "Tab" || !B.value) return;
+			let t = Array.from(B.value.querySelectorAll(C));
+			if (t.length === 0) {
+				e.preventDefault();
+				return;
+			}
+			let n = t[0], r = t[t.length - 1];
+			e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
+		}
+		y(j, (e) => {
+			e ? (H = document.activeElement, U()) : H && u(() => H?.focus());
+		});
+		function G() {
+			j.value ? L() : I();
+		}
+		function K() {
+			I(l.mouseEnterDelay);
+		}
+		function q() {
+			L(l.mouseLeaveDelay);
+		}
+		function J() {
+			I();
+		}
+		function Y() {
+			L();
+		}
+		function X(e) {
+			e.key === "Escape" && j.value && (e.preventDefault(), L());
+		}
+		function oe(e) {
+			e.key === "Escape" && (e.preventDefault(), L()), W(e);
+		}
+		function se() {
+			l.trigger === t.Hover && F();
+		}
+		function ce() {
+			l.trigger === t.Hover && L(l.mouseLeaveDelay);
+		}
+		function Z() {
+			let e = V.value;
+			if (e) switch (e.addEventListener("keydown", X), l.trigger) {
+				case t.Click:
+					e.addEventListener("click", G);
+					break;
+				case t.Focus:
+					e.addEventListener("focusin", J), e.addEventListener("focusout", Y);
+					break;
+				case t.Hover:
+				default:
+					e.addEventListener("mouseenter", K), e.addEventListener("mouseleave", q), e.addEventListener("focusin", J), e.addEventListener("focusout", Y);
+					break;
+			}
+		}
+		function Q() {
+			let e = V.value;
+			e && (e.removeEventListener("keydown", X), e.removeEventListener("click", G), e.removeEventListener("focusin", J), e.removeEventListener("focusout", Y), e.removeEventListener("mouseenter", K), e.removeEventListener("mouseleave", q));
+		}
+		m(() => {
+			Z();
+		}), p(() => {
+			Q(), F();
+		}), y(() => l.trigger, () => {
+			Q(), Z();
+		}), y(() => l.modelValue, (e) => {
+			e !== void 0 && (e ? B.value?.showPopover() : B.value?.hidePopover());
+		});
+		let $ = i(() => `--b-popover-anchor-${D.value}`), le = i(() => ({
+			[e.TopLeft]: "top-left",
+			[e.TopCenter]: "top-center",
+			[e.TopRight]: "top-right",
+			[e.RightTop]: "right-top",
+			[e.RightCenter]: "right-center",
+			[e.RightBottom]: "right-bottom",
+			[e.BottomRight]: "bottom-right",
+			[e.BottomCenter]: "bottom-center",
+			[e.BottomLeft]: "bottom-left",
+			[e.LeftBottom]: "left-bottom",
+			[e.LeftCenter]: "left-center",
+			[e.LeftTop]: "left-top"
+		})[l.placement] ?? "top-center");
+		return w({
+			open: R,
+			close: z
+		}), (e, t) => (h(), o(r, null, [s("div", {
+			ref_key: "toggleRef",
+			ref: V,
+			class: "b-popover__toggle",
+			style: f({ anchorName: $.value })
+		}, [_(e.$slots, "default")], 4), s("div", {
+			ref_key: "popoverRef",
+			ref: B,
+			popover: "manual",
+			class: d([
+				"b-popover__content",
+				le.value,
+				{ "b-popover__content--no-arrow": !l.arrow }
+			]),
+			style: f({
+				zIndex: l.zIndex,
+				positionAnchor: $.value
+			}),
+			role: "tooltip",
+			"aria-labelledby": k,
+			id: ee(O),
+			tabindex: "-1",
+			onToggle: ae,
+			onKeydown: oe,
+			onMouseenter: se,
+			onMouseleave: ce
+		}, [re.value || !l.destroyTooltipOnHide ? (h(), o(r, { key: 0 }, [l.arrow ? (h(), o("div", x)) : a("", !0), s("div", ne, [l.title || e.$slots.title ? (h(), o("div", {
+			key: 0,
+			id: k,
+			class: "b-popover__title"
+		}, [_(e.$slots, "title", {}, () => [c(v(l.title), 1)])])) : a("", !0), s("div", S, [_(e.$slots, "content", {}, () => [c(v(l.content), 1)])])])], 64)) : a("", !0)], 46, b)], 64));
+	}
+});
 //#endregion
-export { n as default };
+export { w as default };
 
 //# sourceMappingURL=design-system160.js.map

package/dist/design-system160.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system160.js","names":[],"sources":["../src/components/BRadio/BRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio input. */\n  id?: string;\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\"\n    :class=\"{ 'b-radio--disabled b:cursor-not-allowed b:opacity-50': isDisabled }\"\n    :for=\"inputId\"\n  >\n    <span\n      class=\"b-radio__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\"\n      :class=\"{\n        'b-radio__indicator--checked': isChecked,\n        'b-radio__indicator--disabled': isDisabled,\n      }\"\n    >\n      <input\n        :id=\"inputId\"\n        type=\"radio\"\n        class=\"b-radio__input\"\n        :checked=\"isChecked\"\n        :disabled=\"isDisabled\"\n        :name=\"inputName\"\n        :value=\"value\"\n        @change=\"handleChange\"\n      />\n      <span class=\"b-radio__inner\" aria-hidden=\"true\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"b-radio__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio {\n  --b-radio-size: 16px;\n  --b-radio-dot-size: 8px;\n  --b-radio-color-primary: #1677ff;\n  --b-radio-color-primary-hover: #4096ff;\n  --b-radio-color-border: #d9d9d9;\n  --b-radio-color-bg-container: #ffffff;\n  --b-radio-color-bg-container-disabled: rgba(0, 0, 0, 0.04);\n  --b-radio-color-text-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-color-border-disabled: #d9d9d9;\n  --b-radio-dot-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-border-width: 1px;\n  --b-radio-font-size: 14px;\n  --b-radio-line-height: 1.5714;\n  --b-radio-wrapper-margin-inline-end: 8px;\n  --b-radio-transition-duration: 0.2s;\n}\n\n[data-prefers-color='dark'] .b-radio {\n  --b-radio-color-primary: #3c89e8;\n  --b-radio-color-primary-hover: #65a9f3;\n  --b-radio-color-border: #424242;\n  --b-radio-color-bg-container: #141414;\n  --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n  --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-color-border-disabled: #424242;\n  --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio {\n    --b-radio-color-primary: #3c89e8;\n    --b-radio-color-primary-hover: #65a9f3;\n    --b-radio-color-border: #424242;\n    --b-radio-color-bg-container: #141414;\n    --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n    --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-color-border-disabled: #424242;\n    --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n  }\n}\n\n.b-radio__label {\n  font-size: var(--b-radio-font-size);\n  line-height: var(--b-radio-line-height);\n  color: inherit;\n}\n\n.b-radio--disabled .b-radio__label {\n  color: var(--b-radio-color-text-disabled);\n}\n\n.b-radio__indicator {\n  width: var(--b-radio-size);\n  height: var(--b-radio-size);\n}\n\n.b-radio__inner {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: var(--b-radio-border-width) solid var(--b-radio-color-border);\n  background-color: var(--b-radio-color-bg-container);\n  transition:\n    background-color var(--b-radio-transition-duration) ease-in-out,\n    border-color var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Hover state */\n.b-radio:not(.b-radio--disabled):hover .b-radio__inner {\n  border-color: var(--b-radio-color-primary-hover);\n}\n\n/* Checked state */\n.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-primary);\n}\n\n.b-radio__indicator--checked .b-radio__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  width: var(--b-radio-dot-size);\n  height: var(--b-radio-dot-size);\n  background-color: var(--b-radio-color-primary);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  transition:\n    transform var(--b-radio-transition-duration) ease-in-out,\n    opacity var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Disabled state */\n.b-radio__indicator--disabled .b-radio__inner {\n  background-color: var(--b-radio-color-bg-container-disabled);\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner::after {\n  background-color: var(--b-radio-dot-color-disabled);\n}\n\n.b-radio__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio--disabled .b-radio__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio__input:focus-visible + .b-radio__inner {\n  outline: 2px solid var(--b-radio-color-primary);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio__inner,\n  .b-radio__inner::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system160.js","names":["$slots"],"sources":["../src/components/BPopover/BPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BPopoverPlacement, BPopoverTrigger } from '@/types.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  content,\n  trigger = BPopoverTrigger.Hover,\n  placement = BPopoverPlacement.TopCenter,\n  arrow = true,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1030,\n  fresh = false,\n  modelValue = undefined,\n} = defineProps<{\n  /** The title shown at the top of the popover. Also accepts the `title` slot. */\n  title?: string;\n  /** The main content of the popover. Also accepts the `content` slot. */\n  content?: string;\n  /** The event that triggers the popover to open. */\n  trigger?: `${BPopoverTrigger}`;\n  /** Placement of the popover relative to the target element. */\n  placement?: `${BPopoverPlacement}`;\n  /** Whether the popover has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the popover DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the popover. */\n  zIndex?: number;\n  /** Force re-render when popover is shown. */\n  fresh?: boolean;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the popover visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the popover. */\n  default?(): unknown;\n  /** Overrides the `title` prop with custom content. */\n  title?(): unknown;\n  /** Overrides the `content` prop with custom content. */\n  content?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst popoverId = useId();\nconst titleId = `${popoverId}-title`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (fresh) return isOpen.value;\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popoverRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popoverRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusPopoverContent() {\n  nextTick(() => {\n    if (!popoverRef.value) return;\n    const first = popoverRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popoverRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !popoverRef.value) return;\n\n  const focusable = Array.from(popoverRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusPopoverContent();\n  } else {\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n  }\n}\n\nfunction onPopoverKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    requestClose();\n  }\n  trapFocus(event);\n}\n\n// ─────────────────────────────────────────────\n// Popover hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopoverMouseEnter() {\n  if (trigger === BPopoverTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopoverMouseLeave() {\n  if (trigger === BPopoverTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BPopoverTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BPopoverTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BPopoverTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popoverRef.value?.showPopover();\n    } else {\n      popoverRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-popover-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BPopoverPlacement.TopLeft]: 'top-left',\n    [BPopoverPlacement.TopCenter]: 'top-center',\n    [BPopoverPlacement.TopRight]: 'top-right',\n    [BPopoverPlacement.RightTop]: 'right-top',\n    [BPopoverPlacement.RightCenter]: 'right-center',\n    [BPopoverPlacement.RightBottom]: 'right-bottom',\n    [BPopoverPlacement.BottomRight]: 'bottom-right',\n    [BPopoverPlacement.BottomCenter]: 'bottom-center',\n    [BPopoverPlacement.BottomLeft]: 'bottom-left',\n    [BPopoverPlacement.LeftBottom]: 'left-bottom',\n    [BPopoverPlacement.LeftCenter]: 'left-center',\n    [BPopoverPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div ref=\"toggleRef\" class=\"b-popover__toggle\" :style=\"{ anchorName: anchorName }\">\n    <slot />\n  </div>\n\n  <div\n    ref=\"popoverRef\"\n    popover=\"manual\"\n    :class=\"['b-popover__content', placementClass, { 'b-popover__content--no-arrow': !arrow }]\"\n    :style=\"{ zIndex, positionAnchor: anchorName }\"\n    role=\"tooltip\"\n    :aria-labelledby=\"titleId\"\n    :id=\"popoverId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onPopoverKeydown\"\n    @mouseenter=\"onPopoverMouseEnter\"\n    @mouseleave=\"onPopoverMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-popover__arrow\" aria-hidden=\"true\" />\n      <div class=\"b-popover__inner\">\n        <div v-if=\"title || $slots.title\" :id=\"titleId\" class=\"b-popover__title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </div>\n        <div class=\"b-popover__body\">\n          <slot name=\"content\">{{ content }}</slot>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-popover__content {\n  --b-popover-bg: #fff;\n  --b-popover-color: oklch(25% 0 0);\n  --b-popover-font-size: 0.875rem;\n  --b-popover-line-height: 1.5;\n  --b-popover-padding-x: 0.75rem;\n  --b-popover-padding-y: 0.75rem;\n  --b-popover-border-radius: 0.5rem;\n  --b-popover-max-width: 320px;\n  --b-popover-min-width: 177px;\n  --b-popover-arrow-size: 8px;\n  --b-popover-arrow-color: #fff;\n  --b-popover-gap: 8px;\n  --b-popover-transition-duration: 200ms;\n  --b-popover-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-popover-title-font-weight: 600;\n  --b-popover-title-font-size: 0.875rem;\n  --b-popover-title-color: oklch(15% 0 0);\n  --b-popover-title-padding-bottom: 0.5rem;\n  --b-popover-title-border-bottom: 1px solid oklch(90% 0 0);\n  --b-popover-title-margin-bottom: 0.5rem;\n  --b-popover-body-color: oklch(35% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-popover__content {\n  --b-popover-bg: oklch(22% 0 0);\n  --b-popover-color: oklch(90% 0 0);\n  --b-popover-arrow-color: oklch(22% 0 0);\n  --b-popover-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-popover-title-color: oklch(95% 0 0);\n  --b-popover-title-border-bottom: 1px solid oklch(30% 0 0);\n  --b-popover-body-color: oklch(75% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-popover__content {\n    --b-popover-bg: oklch(22% 0 0);\n    --b-popover-color: oklch(90% 0 0);\n    --b-popover-arrow-color: oklch(22% 0 0);\n    --b-popover-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-popover-title-color: oklch(95% 0 0);\n    --b-popover-title-border-bottom: 1px solid oklch(30% 0 0);\n    --b-popover-body-color: oklch(75% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-popover__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Popover content (popover)\n   ───────────────────────────────────────────── */\n.b-popover__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-popover-max-width);\n  min-width: var(--b-popover-min-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-popover-transition-duration),\n    opacity var(--b-popover-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-popover-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-popover-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-popover-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-popover-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-popover-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-popover-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-popover-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-popover-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-popover-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-popover-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-popover-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-popover-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-popover__inner {\n  background: var(--b-popover-bg);\n  color: var(--b-popover-color);\n  font-size: var(--b-popover-font-size);\n  line-height: var(--b-popover-line-height);\n  padding: var(--b-popover-padding-y) var(--b-popover-padding-x);\n  border-radius: var(--b-popover-border-radius);\n  box-shadow: var(--b-popover-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-popover__title {\n  font-weight: var(--b-popover-title-font-weight);\n  font-size: var(--b-popover-title-font-size);\n  color: var(--b-popover-title-color);\n  padding-bottom: var(--b-popover-title-padding-bottom);\n  border-bottom: var(--b-popover-title-border-bottom);\n  margin-bottom: var(--b-popover-title-margin-bottom);\n}\n\n/* ─────────────────────────────────────────────\n   Body\n   ───────────────────────────────────────────── */\n.b-popover__body {\n  color: var(--b-popover-body-color);\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-popover__arrow {\n  position: absolute;\n  width: var(--b-popover-arrow-size);\n  height: var(--b-popover-arrow-size);\n  background: var(--b-popover-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-popover__content.top-left .b-popover__arrow,\n.b-popover__content.top-center .b-popover__arrow,\n.b-popover__content.top-right .b-popover__arrow {\n  bottom: calc(var(--b-popover-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-popover__content.bottom-left .b-popover__arrow,\n.b-popover__content.bottom-center .b-popover__arrow,\n.b-popover__content.bottom-right .b-popover__arrow {\n  top: calc(var(--b-popover-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-popover__content.right-top .b-popover__arrow,\n.b-popover__content.right-center .b-popover__arrow,\n.b-popover__content.right-bottom .b-popover__arrow {\n  left: calc(var(--b-popover-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-popover__content.left-top .b-popover__arrow,\n.b-popover__content.left-center .b-popover__arrow,\n.b-popover__content.left-bottom .b-popover__arrow {\n  right: calc(var(--b-popover-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-popover-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-popover-gap);\n}\n\n@position-try --b-popover-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-popover-gap);\n}\n\n@position-try --b-popover-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-popover-gap);\n}\n\n@position-try --b-popover-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-popover-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-popover__content {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system162.js

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

package/dist/design-system162.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system162.js","names":[],"sources":["../src/components/BPopover/BPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BPopoverPlacement, BPopoverTrigger } from '@/types.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  content,\n  trigger = BPopoverTrigger.Hover,\n  placement = BPopoverPlacement.TopCenter,\n  arrow = true,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1030,\n  fresh = false,\n  modelValue = undefined,\n} = defineProps<{\n  /** The title shown at the top of the popover. Also accepts the `title` slot. */\n  title?: string;\n  /** The main content of the popover. Also accepts the `content` slot. */\n  content?: string;\n  /** The event that triggers the popover to open. */\n  trigger?: `${BPopoverTrigger}`;\n  /** Placement of the popover relative to the target element. */\n  placement?: `${BPopoverPlacement}`;\n  /** Whether the popover has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the popover DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the popover. */\n  zIndex?: number;\n  /** Force re-render when popover is shown. */\n  fresh?: boolean;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the popover visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the popover. */\n  default?(): unknown;\n  /** Overrides the `title` prop with custom content. */\n  title?(): unknown;\n  /** Overrides the `content` prop with custom content. */\n  content?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst popoverId = useId();\nconst titleId = `${popoverId}-title`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (fresh) return isOpen.value;\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popoverRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popoverRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusPopoverContent() {\n  nextTick(() => {\n    if (!popoverRef.value) return;\n    const first = popoverRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popoverRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !popoverRef.value) return;\n\n  const focusable = Array.from(popoverRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusPopoverContent();\n  } else {\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n  }\n}\n\nfunction onPopoverKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    requestClose();\n  }\n  trapFocus(event);\n}\n\n// ─────────────────────────────────────────────\n// Popover hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopoverMouseEnter() {\n  if (trigger === BPopoverTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopoverMouseLeave() {\n  if (trigger === BPopoverTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BPopoverTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BPopoverTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BPopoverTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popoverRef.value?.showPopover();\n    } else {\n      popoverRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-popover-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BPopoverPlacement.TopLeft]: 'top-left',\n    [BPopoverPlacement.TopCenter]: 'top-center',\n    [BPopoverPlacement.TopRight]: 'top-right',\n    [BPopoverPlacement.RightTop]: 'right-top',\n    [BPopoverPlacement.RightCenter]: 'right-center',\n    [BPopoverPlacement.RightBottom]: 'right-bottom',\n    [BPopoverPlacement.BottomRight]: 'bottom-right',\n    [BPopoverPlacement.BottomCenter]: 'bottom-center',\n    [BPopoverPlacement.BottomLeft]: 'bottom-left',\n    [BPopoverPlacement.LeftBottom]: 'left-bottom',\n    [BPopoverPlacement.LeftCenter]: 'left-center',\n    [BPopoverPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div ref=\"toggleRef\" class=\"b-popover__toggle\" :style=\"{ anchorName: anchorName }\">\n    <slot />\n  </div>\n\n  <div\n    ref=\"popoverRef\"\n    popover=\"manual\"\n    :class=\"['b-popover__content', placementClass, { 'b-popover__content--no-arrow': !arrow }]\"\n    :style=\"{ zIndex, positionAnchor: anchorName }\"\n    role=\"tooltip\"\n    :aria-labelledby=\"titleId\"\n    :id=\"popoverId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onPopoverKeydown\"\n    @mouseenter=\"onPopoverMouseEnter\"\n    @mouseleave=\"onPopoverMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-popover__arrow\" aria-hidden=\"true\" />\n      <div class=\"b-popover__inner\">\n        <div v-if=\"title || $slots.title\" :id=\"titleId\" class=\"b-popover__title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </div>\n        <div class=\"b-popover__body\">\n          <slot name=\"content\">{{ content }}</slot>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-popover__content {\n  --b-popover-bg: #fff;\n  --b-popover-color: oklch(25% 0 0);\n  --b-popover-font-size: 0.875rem;\n  --b-popover-line-height: 1.5;\n  --b-popover-padding-x: 0.75rem;\n  --b-popover-padding-y: 0.75rem;\n  --b-popover-border-radius: 0.5rem;\n  --b-popover-max-width: 320px;\n  --b-popover-min-width: 177px;\n  --b-popover-arrow-size: 8px;\n  --b-popover-arrow-color: #fff;\n  --b-popover-gap: 8px;\n  --b-popover-transition-duration: 200ms;\n  --b-popover-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-popover-title-font-weight: 600;\n  --b-popover-title-font-size: 0.875rem;\n  --b-popover-title-color: oklch(15% 0 0);\n  --b-popover-title-padding-bottom: 0.5rem;\n  --b-popover-title-border-bottom: 1px solid oklch(90% 0 0);\n  --b-popover-title-margin-bottom: 0.5rem;\n  --b-popover-body-color: oklch(35% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-popover__content {\n  --b-popover-bg: oklch(22% 0 0);\n  --b-popover-color: oklch(90% 0 0);\n  --b-popover-arrow-color: oklch(22% 0 0);\n  --b-popover-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-popover-title-color: oklch(95% 0 0);\n  --b-popover-title-border-bottom: 1px solid oklch(30% 0 0);\n  --b-popover-body-color: oklch(75% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-popover__content {\n    --b-popover-bg: oklch(22% 0 0);\n    --b-popover-color: oklch(90% 0 0);\n    --b-popover-arrow-color: oklch(22% 0 0);\n    --b-popover-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-popover-title-color: oklch(95% 0 0);\n    --b-popover-title-border-bottom: 1px solid oklch(30% 0 0);\n    --b-popover-body-color: oklch(75% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-popover__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Popover content (popover)\n   ───────────────────────────────────────────── */\n.b-popover__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-popover-max-width);\n  min-width: var(--b-popover-min-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-popover-transition-duration),\n    opacity var(--b-popover-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-popover-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-popover-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-popover-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-popover-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-popover-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-popover-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-popover-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-popover-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-popover-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-popover-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-popover-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-popover-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-popover__inner {\n  background: var(--b-popover-bg);\n  color: var(--b-popover-color);\n  font-size: var(--b-popover-font-size);\n  line-height: var(--b-popover-line-height);\n  padding: var(--b-popover-padding-y) var(--b-popover-padding-x);\n  border-radius: var(--b-popover-border-radius);\n  box-shadow: var(--b-popover-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-popover__title {\n  font-weight: var(--b-popover-title-font-weight);\n  font-size: var(--b-popover-title-font-size);\n  color: var(--b-popover-title-color);\n  padding-bottom: var(--b-popover-title-padding-bottom);\n  border-bottom: var(--b-popover-title-border-bottom);\n  margin-bottom: var(--b-popover-title-margin-bottom);\n}\n\n/* ─────────────────────────────────────────────\n   Body\n   ───────────────────────────────────────────── */\n.b-popover__body {\n  color: var(--b-popover-body-color);\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-popover__arrow {\n  position: absolute;\n  width: var(--b-popover-arrow-size);\n  height: var(--b-popover-arrow-size);\n  background: var(--b-popover-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-popover__content.top-left .b-popover__arrow,\n.b-popover__content.top-center .b-popover__arrow,\n.b-popover__content.top-right .b-popover__arrow {\n  bottom: calc(var(--b-popover-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-popover__content.bottom-left .b-popover__arrow,\n.b-popover__content.bottom-center .b-popover__arrow,\n.b-popover__content.bottom-right .b-popover__arrow {\n  top: calc(var(--b-popover-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-popover__content.right-top .b-popover__arrow,\n.b-popover__content.right-center .b-popover__arrow,\n.b-popover__content.right-bottom .b-popover__arrow {\n  left: calc(var(--b-popover-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-popover__content.left-top .b-popover__arrow,\n.b-popover__content.left-center .b-popover__arrow,\n.b-popover__content.left-bottom .b-popover__arrow {\n  right: calc(var(--b-popover-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popover-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-popover-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-popover-gap);\n}\n\n@position-try --b-popover-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-popover-gap);\n}\n\n@position-try --b-popover-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-popover-gap);\n}\n\n@position-try --b-popover-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-popover-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-popover__content {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system163.js

@@ -1,9 +1,6 @@
-import e from "./design-system14.js";
-import t from "./design-system161.js";
-/* empty css                 */
-//#region src/components/BRadio/BRadioButton.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-401aa983"]]);
+//#region src/components/BRadio/types.ts
+var e = Symbol("BRadioGroup");
 //#endregion
-export { n as default };
+export { e as B_RADIO_GROUP_KEY };
 
 //# sourceMappingURL=design-system163.js.map

package/dist/design-system163.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system163.js","names":[],"sources":["../src/components/BRadio/BRadioButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio button input. */\n  id?: string;\n  /** Whether the radio button is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio button.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\nconst groupSize = computed(() => group?.size.value || 'middle');\nconst groupButtonStyle = computed(() => group?.buttonStyle.value || 'outline');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-button-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio-button b:relative b:inline-flex b:cursor-pointer b:items-center b:justify-center b:leading-none b:select-none\"\n    :class=\"[\n      `b-radio-button--${groupSize}`,\n      `b-radio-button--${groupButtonStyle}`,\n      {\n        'b-radio-button--checked': isChecked,\n        'b-radio-button--disabled b:cursor-not-allowed': isDisabled,\n      },\n    ]\"\n    :for=\"inputId\"\n  >\n    <input\n      :id=\"inputId\"\n      type=\"radio\"\n      class=\"b-radio-button__input\"\n      :checked=\"isChecked\"\n      :disabled=\"isDisabled\"\n      :name=\"inputName\"\n      :value=\"value\"\n      @change=\"handleChange\"\n    />\n    <span class=\"b-radio-button__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio-button {\n  --b-radio-button-bg: #ffffff;\n  --b-radio-button-checked-bg: #ffffff;\n  --b-radio-button-color: rgba(0, 0, 0, 0.88);\n  --b-radio-button-color-primary: #0958d9;\n  --b-radio-button-color-primary-hover: #0958d9;\n  --b-radio-button-color-primary-active: #003eb3;\n  --b-radio-button-color-border: #d9d9d9;\n  --b-radio-button-color-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-radio-button-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-button-solid-checked-bg: #0958d9;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #003eb3;\n  --b-radio-button-solid-checked-active-bg: #002b80;\n  --b-radio-button-padding-inline: 15px;\n  --b-radio-button-border-width: 1px;\n  --b-radio-button-transition-duration: 0.2s;\n\n  border: var(--b-radio-button-border-width) solid var(--b-radio-button-color-border);\n  background-color: var(--b-radio-button-bg);\n  color: var(--b-radio-button-color);\n  padding-inline: var(--b-radio-button-padding-inline);\n  transition:\n    color var(--b-radio-button-transition-duration) ease-in-out,\n    background-color var(--b-radio-button-transition-duration) ease-in-out,\n    border-color var(--b-radio-button-transition-duration) ease-in-out;\n  margin-inline-start: calc(-1 * var(--b-radio-button-border-width));\n}\n\n.b-radio-button:first-child {\n  margin-inline-start: 0;\n  border-start-start-radius: 6px;\n  border-end-start-radius: 6px;\n}\n\n.b-radio-button:last-child {\n  border-start-end-radius: 6px;\n  border-end-end-radius: 6px;\n}\n\n/* Sizes */\n.b-radio-button--large {\n  padding-block: 8px;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.b-radio-button--middle {\n  padding-block: 5px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n.b-radio-button--small {\n  padding-block: 1px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n/* Outline style — checked */\n.b-radio-button--outline.b-radio-button--checked {\n  color: var(--b-radio-button-color-primary);\n  border-color: var(--b-radio-button-color-primary);\n  background-color: var(--b-radio-button-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--outline:not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Solid style — checked */\n.b-radio-button--solid.b-radio-button--checked {\n  color: var(--b-radio-button-solid-checked-color);\n  background-color: var(--b-radio-button-solid-checked-bg);\n  border-color: var(--b-radio-button-solid-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--solid.b-radio-button--checked:hover {\n  background-color: var(--b-radio-button-solid-checked-hover-bg);\n  border-color: var(--b-radio-button-solid-checked-hover-bg);\n}\n\n.b-radio-button--solid:not(.b-radio-button--checked):not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Disabled */\n.b-radio-button--disabled {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n  opacity: 1;\n}\n\n.b-radio-button--disabled.b-radio-button--checked {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n}\n\n/* Hidden input */\n.b-radio-button__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio-button--disabled .b-radio-button__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio-button__input:focus-visible ~ .b-radio-button__label {\n  outline: 2px solid var(--b-radio-button-color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-radio-button {\n  --b-radio-button-bg: #141414;\n  --b-radio-button-checked-bg: #141414;\n  --b-radio-button-color: rgba(255, 255, 255, 0.85);\n  --b-radio-button-color-primary: #4d94e8;\n  --b-radio-button-color-primary-hover: #4d94e8;\n  --b-radio-button-color-primary-active: #3c89e8;\n  --b-radio-button-color-border: #424242;\n  --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-button-solid-checked-bg: #1668dc;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #0958d9;\n  --b-radio-button-solid-checked-active-bg: #003eb3;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio-button {\n    --b-radio-button-bg: #141414;\n    --b-radio-button-checked-bg: #141414;\n    --b-radio-button-color: rgba(255, 255, 255, 0.85);\n    --b-radio-button-color-primary: #4d94e8;\n    --b-radio-button-color-primary-hover: #4d94e8;\n    --b-radio-button-color-primary-active: #3c89e8;\n    --b-radio-button-color-border: #424242;\n    --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-button-solid-checked-bg: #1668dc;\n    --b-radio-button-solid-checked-color: #fff;\n    --b-radio-button-solid-checked-hover-bg: #0958d9;\n    --b-radio-button-solid-checked-active-bg: #003eb3;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio-button {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system163.js","names":[],"sources":["../src/components/BRadio/types.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\n\nexport interface BRadioOption {\n  /** Display label for the radio */\n  label: string;\n  /** Value associated with this radio */\n  value: string | number;\n  /** Whether this specific radio is disabled */\n  disabled?: boolean;\n}\n\nexport interface BRadioGroupContext {\n  modelValue: Ref<string | number | undefined>;\n  disabled: Ref<boolean>;\n  name: Ref<string>;\n  size: Ref<'large' | 'middle' | 'small'>;\n  optionType: Ref<'default' | 'button'>;\n  buttonStyle: Ref<'outline' | 'solid'>;\n  setValue: (val: string | number) => void;\n}\n\nexport const B_RADIO_GROUP_KEY: InjectionKey<BRadioGroupContext> = Symbol('BRadioGroup');\n"],"mappings":";AAqBA,IAAa,IAAsD,OAAO,cAAc"}