@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system174.js.map

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

@@ -1,9 +1,192 @@
-import e from "./design-system14.js";
-import t from "./design-system173.js";
-/* empty css                 */
-//#region src/components/BRate/BRate.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-60355169"]]);
+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-system175.js.map

package/dist/design-system175.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system175.js","names":[],"sources":["../src/components/BRate/BRate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\nconst {\n  allowClear = true,\n  allowHalf = false,\n  count = 5,\n  disabled = false,\n  keyboard = true,\n  size = 'default',\n  tooltips = [],\n  character,\n} = defineProps<{\n  /** Whether to allow clearing the value when clicking the same star again. */\n  allowClear?: boolean;\n  /** Whether to allow half-star selection. */\n  allowHalf?: boolean;\n  /** Total number of stars. */\n  count?: number;\n  /** If true, the component is read-only and cannot be interacted with. */\n  disabled?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Size of the stars. */\n  size?: 'small' | 'default' | 'large';\n  /** Array of tooltip strings displayed on hover for each star. */\n  tooltips?: string[];\n  /** Custom character/icon rendered as each star. Receives `{ index }`. */\n  character?: string;\n}>();\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  'hover-change': [value: number];\n  change: [value: number];\n  focus: [];\n  blur: [];\n  keydown: [event: KeyboardEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (disabled) return;\n\n  const newValue = isHalf && allowHalf ? index - 0.5 : index;\n\n  if (allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || !keyboard) return;\n  emit('keydown', event);\n\n  const step = allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-rate\"\n    :class=\"[\n      `b-rate--${size}`,\n      {\n        'b-rate--disabled': disabled,\n        'b-rate--focused': isFocused,\n      },\n    ]\"\n    role=\"slider\"\n    :aria-label=\"$attrs['aria-label'] as string || 'Rating'\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-valuenow=\"model\"\n    :aria-valuemin=\"0\"\n    :aria-valuemax=\"count\"\n    :aria-valuetext=\"`${model} out of ${count} stars`\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @mouseleave=\"handleMouseLeave\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div\n      v-for=\"star in stars\"\n      :key=\"star.index\"\n      class=\"b-rate__star\"\n      :class=\"{\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue > 0,\n        'b-rate__star--focused': isFocused && focusedIndex === star.index,\n      }\"\n      :title=\"tooltips[star.index - 1] || undefined\"\n      @mousemove=\"(e) => handleMouseMove(star.index, e)\"\n      @click=\"(e) => handleClick(star.index, allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\"\n    >\n      <div class=\"b-rate__star-first\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n      <div class=\"b-rate__star-second\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n    </div>\n\n    <input\n      type=\"hidden\"\n      :name=\"`b-rate-${componentUID}`\"\n      :value=\"model\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.b-rate {\n  --b-rate-star-bg: rgba(0, 0, 0, 0.06);\n  --b-rate-star-color: #fadb14;\n  --b-rate-star-hover-scale: scale(1.1);\n  --b-rate-star-size: 20px;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  outline: none;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-rate--small {\n  --b-rate-star-size: 15px;\n  gap: 6px;\n}\n\n.b-rate--large {\n  --b-rate-star-size: 25px;\n  gap: 10px;\n}\n\n.b-rate--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.b-rate:focus-visible {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 4px;\n  border-radius: 2px;\n}\n\n.b-rate__star {\n  position: relative;\n  display: inline-flex;\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.b-rate--disabled .b-rate__star {\n  cursor: not-allowed;\n}\n\n.b-rate__star:not(.b-rate--disabled .b-rate__star):hover {\n  transform: var(--b-rate-star-hover-scale);\n}\n\n.b-rate__star--focused {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.b-rate__star-first,\n.b-rate__star-second {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  user-select: none;\n}\n\n.b-rate__star-first {\n  width: 50%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.b-rate__star-second {\n  z-index: 0;\n}\n\n/* Zero state: both halves use background color */\n.b-rate__star--zero .b-rate__star-first,\n.b-rate__star--zero .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n/* Full state: both halves use active color */\n.b-rate__star--full .b-rate__star-first,\n.b-rate__star--full .b-rate__star-second {\n  color: var(--b-rate-star-color);\n}\n\n/* Half state: first half active, second half background */\n.b-rate__star--half .b-rate__star-first {\n  color: var(--b-rate-star-color);\n}\n\n.b-rate__star--half .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n.b-rate__icon {\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  flex-shrink: 0;\n  display: block;\n}\n\n.b-rate__character {\n  font-size: var(--b-rate-star-size);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.b-rate__character::before {\n  content: attr(data-character);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-rate {\n  --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n  --b-rate-star-color: #fadb14;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-rate {\n    --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n    --b-rate-star-color: #fadb14;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-rate__star {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system175.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":";;;;;;;;yEA0JM,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA9GF,IAAM,IAAO,GAmBP,EAAE,oBAAiB,GAAgB,EACnC,IAAY,IAAO,EACnB,IAAU,GAAG,EAAU,SAEvB,IAAe,EAAI,GAAM,EACzB,IAAS,QAAgB,EAAA,eAAe,KAAA,IAAyB,EAAa,QAA1B,EAAA,WAAiC,EAErF,IAAgB,EAAI,GAAM,EAC1B,KAAe,QACf,EAAA,SACA,EAAA,uBAA6B,EAAO,QACjC,EAAc,SAAS,EAAO,MACrC;AAEF,IAAM,IAAS,MAAQ;AACrB,GAAI,MAAK,EAAc,QAAQ;IAC/B;EAKF,IAAI,IAAkD,MAClD,IAAkD;EAEtD,SAAS,IAAc;AAKrB,GAJA,AAEE,OADA,aAAa,EAAU,EACX,OAEd,AAEE,OADA,aAAa,EAAU,EACX;;EAIhB,SAAS,EAAY,IAAQ,GAAG;AAC9B,MAAa,EACT,GAAO,UACP,IAAQ,IACV,IAAY,iBAAiB,GAAQ,EAAE,EAAM,GAE7C,GAAQ;;EAIZ,SAAS,EAAa,IAAQ,GAAG;AAC/B,MAAa,EACR,EAAO,UACR,IAAQ,IACV,IAAY,iBAAiB,GAAS,EAAE,EAAM,GAE9C,GAAS;;EAIb,SAAS,IAAS;AAChB,KAAW,OAAO,aAAa;;EAGjC,SAAS,IAAU;AACjB,KAAW,OAAO,aAAa;;EAGjC,SAAS,GAAQ,GAAc;AAM7B,GALI,EAAA,eAAe,KAAA,IAGjB,EAAa,QAAQ,IAFrB,EAAK,qBAAqB,EAAI,EAIhC,EAAK,cAAc,EAAI;;EAMzB,IAAM,MAAmB,EAAE,kBAA4B;AACrD,MAAQ,MAAa,OAAO;KAMxB,IAAa,EAA2B,KAAK,EAC7C,IAAY,EAA2B,KAAK,EAK9C,IAA+C;EAKnD,SAAS,IAAsB;AAC7B,WAAe;AACb,QAAI,CAAC,EAAW,MAAO;IACvB,IAAM,IAAQ,EAAW,MAAM,cAA2B,EAAkB;AAC5E,IAAI,IACF,EAAM,OAAO,GAEb,EAAW,MAAM,OAAO;KAE1B;;EAGJ,SAAS,EAAU,GAAsB;AACvC,OAAI,EAAM,QAAQ,SAAS,CAAC,EAAW,MAAO;GAE9C,IAAM,IAAY,MAAM,KAAK,EAAW,MAAM,iBAA8B,EAAkB,CAAC;AAC/F,OAAI,EAAU,WAAW,GAAG;AAC1B,MAAM,gBAAgB;AACtB;;GAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,GAAI,EAAM,WACJ,SAAS,kBAAkB,MAC7B,EAAM,gBAAgB,EACtB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAM,gBAAgB,EACtB,EAAM,OAAO;;AAKnB,IAAM,IAAS,MAAQ;AACrB,GAAI,KACF,IAA2B,SAAS,eACpC,GAAqB,IAEjB,KACF,QAAe,GAA0B,OAAO,CAAC;IAGrD;EAKF,SAAS,IAAU;AACjB,GAAI,EAAO,QACT,GAAc,GAEd,GAAa;;EAIjB,SAAS,IAAe;AACtB,KAAY,EAAA,gBAAgB;;EAG9B,SAAS,IAAe;AACtB,KAAa,EAAA,gBAAgB;;EAG/B,SAAS,IAAY;AACnB,MAAa;;EAGf,SAAS,IAAa;AACpB,MAAc;;EAGhB,SAAS,EAAU,GAAsB;AACvC,GAAI,EAAM,QAAQ,YAAY,EAAO,UACnC,EAAM,gBAAgB,EACtB,GAAc;;EAIlB,SAAS,GAAiB,GAAsB;AAK9C,GAJI,EAAM,QAAQ,aAChB,EAAM,gBAAgB,EACtB,GAAc,GAEhB,EAAU,EAAM;;EAMlB,SAAS,KAAsB;AAC7B,GAAI,EAAA,YAAY,EAAgB,SAC9B,GAAa;;EAIjB,SAAS,KAAsB;AAC7B,GAAI,EAAA,YAAY,EAAgB,SAC9B,EAAa,EAAA,gBAAgB;;EAOjC,SAAS,IAAkB;GACzB,IAAM,IAAK,EAAU;AAChB,SAIL,SAFA,EAAG,iBAAiB,WAAW,EAAU,EAEjC,EAAA,SAAR;IACE,KAAK,EAAgB;AACnB,OAAG,iBAAiB,SAAS,EAAQ;AACrC;IACF,KAAK,EAAgB;AAEnB,KADA,EAAG,iBAAiB,WAAW,EAAU,EACzC,EAAG,iBAAiB,YAAY,EAAW;AAC3C;IACF,KAAK,EAAgB;IACrB;AAIE,KAHA,EAAG,iBAAiB,cAAc,EAAa,EAC/C,EAAG,iBAAiB,cAAc,EAAa,EAC/C,EAAG,iBAAiB,WAAW,EAAU,EACzC,EAAG,iBAAiB,YAAY,EAAW;AAC3C;;;EAIN,SAAS,IAAkB;GACzB,IAAM,IAAK,EAAU;AAChB,SAEL,EAAG,oBAAoB,WAAW,EAAU,EAC5C,EAAG,oBAAoB,SAAS,EAAQ,EACxC,EAAG,oBAAoB,WAAW,EAAU,EAC5C,EAAG,oBAAoB,YAAY,EAAW,EAC9C,EAAG,oBAAoB,cAAc,EAAa,EAClD,EAAG,oBAAoB,cAAc,EAAa;;AAqBpD,EAlBA,QAAgB;AACd,MAAiB;IACjB,EAEF,QAAsB;AAEpB,GADA,GAAiB,EACjB,GAAa;IACb,EAEF,QACQ,EAAA,eACA;AAEJ,GADA,GAAiB,EACjB,GAAiB;IAEpB,EAGD,QACQ,EAAA,aACL,MAAQ;AACH,SAAQ,KAAA,MACR,IACF,EAAW,OAAO,aAAa,GAE/B,EAAW,OAAO,aAAa;IAGpC;EAKD,IAAM,IAAa,QAAe,sBAAsB,EAAa,QAAQ,EAEvE,KAAiB,SACe;IACjC,EAAkB,UAAU;IAC5B,EAAkB,YAAY;IAC9B,EAAkB,WAAW;IAC7B,EAAkB,WAAW;IAC7B,EAAkB,cAAc;IAChC,EAAkB,cAAc;IAChC,EAAkB,cAAc;IAChC,EAAkB,eAAe;IACjC,EAAkB,aAAa;IAC/B,EAAkB,aAAa;IAC/B,EAAkB,aAAa;IAC/B,EAAkB,UAAU;GAC9B,EACU,EAAA,cAAc,aACzB;SAKF,EAAa;GAAE,MAAM;GAAQ,OAAO;GAAS,CAAC,8BAI5C,EAEM,OAAA;YAFG;GAAJ,KAAI;GAAY,OAAM;GAAqB,OAAK,EAAA,EAAA,YAAgB,EAAA,OAAU,CAAA;MAC7E,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGV,EAyBM,OAAA;YAxBA;GAAJ,KAAI;GACJ,SAAQ;GACP,OAAK,EAAA;IAAA;IAAyB,GAAA;IAAc,EAAA,gCAAA,CAAqC,EAAA,OAAK;IAAA,CAAA;GACtF,OAAK,EAAA;IAAA,QAAI,EAAA;IAAM,gBAAkB,EAAA;IAAU,CAAA;GAC5C,MAAK;GACJ,mBAAiB;GACjB,IAAI,GAAA,EAAS;GACd,UAAS;GACR,UAAQ;GACR,WAAS;GACT,cAAY;GACZ,cAAY;MAEG,GAAA,SAAY,CAAK,EAAA,wBAAA,GAAA,EAAjC,EAUW,GAAA,EAAA,KAAA,GAAA,EAAA,CATE,EAAA,SAAA,GAAA,EAAX,EAAgE,OAAhE,EAAgE,IAAA,EAAA,IAAA,GAAA,EAChE,EAOM,OAPN,IAOM,CANO,EAAA,SAASA,EAAAA,OAAO,SAAA,GAAA,EAA3B,EAEM,OAAA;;GAF6B,IAAI;GAAS,OAAM;MACpD,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAE7B,EAEM,OAFN,GAEM,CADJ,EAAyC,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/design-system177.js

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

package/dist/design-system177.js.map

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

@@ -1,8 +1,6 @@
-import e from "./design-system176.js";
-/* empty css                 */
-//#region src/components/BSegmented/BSegmented.vue
-var t = e;
+//#region src/components/BRadio/types.ts
+var e = Symbol("BRadioGroup");
 //#endregion
-export { t as default };
+export { e as B_RADIO_GROUP_KEY };
 
 //# sourceMappingURL=design-system178.js.map

package/dist/design-system178.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system178.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultValue,\n  options = [],\n  disabled = false,\n  size = 'default',\n  block = false,\n} = defineProps<{\n  /**\n   * Currently selected value (controlled / two-way binding via v-model).\n   * When provided, the component is in controlled mode.\n   */\n  modelValue?: string | number;\n  /**\n   * Initial selected value for uncontrolled mode.\n   * Ignored when `modelValue` is set.\n   * @default first option value\n   */\n  defaultValue?: string | number;\n  /** Segmented options. Accepts strings, numbers, or option objects. */\n  options?: BSegmentedRawOption[];\n  /** Whether the whole control is disabled. @default false */\n  disabled?: boolean;\n  /** Size of the component. @default 'default' */\n  size?: 'small' | 'default' | 'large';\n  /** Whether the segmented fills the full width of its container. @default false */\n  block?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the selected value changes. */\n  (e: 'update:modelValue', value: string | number): void;\n  /** Fires when the selected value changes (mirrors `update:modelValue`). */\n  (e: 'change', value: string | number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom label renderer for each option. Receives the resolved option object. */\n  label?: (props: { option: BSegmentedOption }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  modelValue ?? defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': disabled,\n    'b-segmented--block': block,\n    'b-segmented--small': size === 'small',\n    'b-segmented--large': size === 'large',\n  },\n]);\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    role=\"group\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <!-- Animated thumb - positioned via JS -->\n    <div\n      v-if=\"thumbStyle\"\n      class=\"b-segmented__thumb\"\n      aria-hidden=\"true\"\n      :style=\"{ transform: thumbStyle.transform, width: thumbStyle.width }\"\n    />\n\n    <!-- Items -->\n    <div\n      v-for=\"opt in normalizedOptions\"\n      :key=\"String(opt.value)\"\n      class=\"b-segmented__item\"\n      :class=\"{\n        'b-segmented__item--selected': opt.value === selectedValue,\n        'b-segmented__item--disabled': opt.disabled || disabled,\n      }\"\n      role=\"radio\"\n      :aria-label=\"opt.label\"\n      :aria-checked=\"opt.value === selectedValue\"\n      :aria-disabled=\"opt.disabled || disabled ? 'true' : undefined\"\n      :tabindex=\"disabled || opt.disabled ? -1 : opt.value === selectedValue ? 0 : -1\"\n      @click=\"select(opt)\"\n      @keydown=\"onKeydown($event, opt)\"\n    >\n      <div class=\"b-segmented__item-inner\">\n        <!-- Icon -->\n        <span v-if=\"opt.icon\" class=\"b-segmented__item-icon\" aria-hidden=\"true\">{{\n          opt.icon\n        }}</span>\n\n        <!-- Label - slot or prop -->\n        <span class=\"b-segmented__item-label\">\n          <slot name=\"label\" :option=\"opt\">{{ opt.label }}</slot>\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BSegmented - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-segmented {\n  /* Surface */\n  --b-segmented-bg: oklch(95% 0.003 260);\n  --b-segmented-border-radius: 8px;\n  --b-segmented-padding: 2px;\n\n  /* Item */\n  --b-segmented-item-color: oklch(40% 0.02 260);\n  --b-segmented-item-hover-color: oklch(20% 0.02 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 50%);\n  --b-segmented-item-padding: 0 11px;\n  --b-segmented-item-border-radius: 6px;\n\n  /* Selected thumb */\n  --b-segmented-thumb-bg: oklch(100% 0 0);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 10%), 0 0 0 1px oklch(0% 0 0 / 6%);\n  --b-segmented-thumb-transition:\n    transform 200ms cubic-bezier(0.34, 0.69, 0.1, 1), width 200ms cubic-bezier(0.34, 0.69, 0.1, 1);\n\n  /* Selected text */\n  --b-segmented-selected-color: oklch(20% 0.02 260);\n  --b-segmented-selected-font-weight: 500;\n\n  /* Disabled */\n  --b-segmented-disabled-opacity: 0.4;\n  --b-segmented-disabled-cursor: not-allowed;\n\n  /* Height variants */\n  --b-segmented-height: 32px;\n\n  /* Focus ring */\n  --b-segmented-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n\n  /* Transition */\n  --b-segmented-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  background: var(--b-segmented-bg);\n  border-radius: var(--b-segmented-border-radius);\n  padding: var(--b-segmented-padding);\n  box-sizing: border-box;\n  user-select: none;\n  height: var(--b-segmented-height);\n  font-size: 14px;\n  line-height: 1;\n}\n\n/* ── Block (full width) ── */\n.b-segmented--block {\n  display: flex;\n  width: 100%;\n}\n\n.b-segmented--block .b-segmented__item {\n  flex: 1;\n}\n\n/* ── Size variants ── */\n.b-segmented--small {\n  --b-segmented-height: 24px;\n  --b-segmented-item-padding: 0 7px;\n  font-size: 12px;\n}\n\n.b-segmented--large {\n  --b-segmented-height: 40px;\n  --b-segmented-item-padding: 0 15px;\n  font-size: 16px;\n}\n\n/* ── Thumb (sliding indicator) ── */\n.b-segmented__thumb {\n  position: absolute;\n  top: var(--b-segmented-padding);\n  left: 0;\n  height: calc(100% - var(--b-segmented-padding) * 2);\n  background: var(--b-segmented-thumb-bg);\n  border-radius: var(--b-segmented-item-border-radius);\n  box-shadow: var(--b-segmented-thumb-shadow);\n  transition: var(--b-segmented-thumb-transition);\n  pointer-events: none;\n  will-change: transform, width;\n}\n\n/* ── Item ── */\n.b-segmented__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--b-segmented-height) - var(--b-segmented-padding) * 2);\n  padding: var(--b-segmented-item-padding);\n  border-radius: var(--b-segmented-item-border-radius);\n  color: var(--b-segmented-item-color);\n  cursor: pointer;\n  transition:\n    color var(--b-segmented-transition-duration),\n    background var(--b-segmented-transition-duration);\n  white-space: nowrap;\n  outline: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n.b-segmented__item:hover:not(.b-segmented__item--selected):not(.b-segmented__item--disabled) {\n  color: var(--b-segmented-item-hover-color);\n  background: var(--b-segmented-item-hover-bg);\n}\n\n.b-segmented__item:focus-visible {\n  box-shadow: var(--b-segmented-focus-ring);\n}\n\n/* ── Selected item ── */\n.b-segmented__item--selected {\n  color: var(--b-segmented-selected-color);\n  font-weight: var(--b-segmented-selected-font-weight);\n}\n\n/* ── Disabled ── */\n.b-segmented--disabled,\n.b-segmented__item--disabled {\n  opacity: var(--b-segmented-disabled-opacity);\n  cursor: var(--b-segmented-disabled-cursor);\n  pointer-events: none;\n}\n\n/* Re-enable pointer events on items when only the item is disabled (not whole control) */\n.b-segmented:not(.b-segmented--disabled) .b-segmented__item--disabled {\n  pointer-events: auto;\n  cursor: var(--b-segmented-disabled-cursor);\n}\n\n/* ── Inner wrapper (icon + label) ── */\n.b-segmented__item-inner {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1;\n}\n\n.b-segmented__item-icon {\n  display: flex;\n  align-items: center;\n  font-size: 1em;\n  flex-shrink: 0;\n}\n\n.b-segmented__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-segmented {\n  --b-segmented-bg: oklch(22% 0.02 260);\n  --b-segmented-item-color: oklch(72% 0.01 260);\n  --b-segmented-item-hover-color: oklch(92% 0.005 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n  --b-segmented-thumb-bg: oklch(30% 0.02 260);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n  --b-segmented-selected-color: oklch(95% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-segmented {\n    --b-segmented-bg: oklch(22% 0.02 260);\n    --b-segmented-item-color: oklch(72% 0.01 260);\n    --b-segmented-item-hover-color: oklch(92% 0.005 260);\n    --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n    --b-segmented-thumb-bg: oklch(30% 0.02 260);\n    --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n    --b-segmented-selected-color: oklch(95% 0.005 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-segmented {\n    --b-segmented-thumb-transition: none;\n    --b-segmented-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system178.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"}

package/dist/design-system179.js

@@ -1,14 +1,61 @@
-//#region src/components/BSelect/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Multiple = "multiple", e.Tags = "tags", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Error = "error", e.Warning = "warning", e;
-}({}), r = /* @__PURE__ */ function(e) {
-	return e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
-}({});
+import { useComponentId as e } from "./design-system10.js";
+import { B_RADIO_GROUP_KEY as t } from "./design-system178.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, useModel as f } from "vue";
+//#region src/components/BRadio/BRadio.vue?vue&type=script&setup=true&lang.ts
+var p = ["for"], m = [
+	"id",
+	"checked",
+	"disabled",
+	"name",
+	"value"
+], h = {
+	key: 0,
+	class: "b-radio__label"
+}, g = /* @__PURE__ */ o({
+	__name: "BRadio",
+	props: /* @__PURE__ */ c({
+		id: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		value: { default: "" },
+		name: { default: "" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ c(["change"], ["update:modelValue"]),
+	setup(o, { emit: c }) {
+		let g = f(o, "modelValue"), _ = c, v = s(t, null), y = n(() => o.disabled || v?.disabled.value || !1), b = n(() => o.name || v?.name.value || ""), x = n(() => v ? v.modelValue.value === o.value : g.value), { componentUID: S } = e(), C = n(() => o.id || `b-radio-${S.value}`);
+		function w(e) {
+			y.value || (v ? v.setValue(o.value) : g.value = !0, _("change", !0, e));
+		}
+		return (e, t) => (u(), i("label", {
+			class: l(["b-radio b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none", { "b-radio--disabled b:cursor-not-allowed b:opacity-50": y.value }]),
+			for: C.value
+		}, [a("span", { class: l(["b-radio__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center", {
+			"b-radio__indicator--checked": x.value,
+			"b-radio__indicator--disabled": y.value
+		}]) }, [a("input", {
+			id: C.value,
+			type: "radio",
+			class: "b-radio__input",
+			checked: x.value,
+			disabled: y.value,
+			name: b.value,
+			value: o.value,
+			onChange: w
+		}, null, 40, m), t[0] ||= a("span", {
+			class: "b-radio__inner",
+			"aria-hidden": "true"
+		}, null, -1)], 2), e.$slots.default ? (u(), i("span", h, [d(e.$slots, "default", {}, void 0, !0)])) : r("", !0)], 10, p));
+	}
+});
 //#endregion
-export { e as BSelectMode, r as BSelectPlacement, n as BSelectStatus, t as BSelectVariant };
+export { g as default };
 
 //# sourceMappingURL=design-system179.js.map

package/dist/design-system179.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system179.js","names":[],"sources":["../src/components/BSelect/types.ts"],"sourcesContent":["export interface BSelectOption {\n  /** Display label for the option. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value submitted when this option is selected. */\n  value: string | number;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  /** Grouping: nested options under this group label. */\n  options?: BSelectOption[];\n}\n\nexport enum BSelectMode {\n  Multiple = 'multiple',\n  Tags = 'tags',\n}\n\nexport enum BSelectVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BSelectStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BSelectPlacement {\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport interface BSelectFieldNames {\n  label?: string;\n  value?: string;\n  options?: string;\n  groupLabel?: string;\n}\n"],"mappings":";AAWA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,OAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"design-system179.js","names":["$slots"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAQ,EAAoB,GAAA,aAAoB,EAEhD,IAAO,GAMP,IAAQ,EAAkC,GAAmB,KAAK,EAElE,IAAa,QAAe,EAAA,YAAY,GAAO,SAAS,SAAS,GAAM,EACvE,IAAY,QAAe,EAAA,QAAQ,GAAO,KAAK,SAAS,GAAG,EAE3D,IAAY,QACZ,IACK,EAAM,WAAW,UAAU,EAAA,QAE7B,EAAM,MACb,EAII,EAAE,oBAAiB,GAAgB,EACnC,IAAU,QAAe,EAAA,MAAM,WAAW,EAAa,QAAQ;EAIrE,SAAS,EAAa,GAAc;AAC9B,KAAW,UAEX,IACF,EAAM,SAAS,EAAA,MAAM,GAErB,EAAM,QAAQ,IAEhB,EAAK,UAAU,IAAM,EAAM;;yBAM3B,EA2BQ,SAAA;GA1BN,OAAK,EAAA,CAAC,8FAA4F,EAAA,uDACjC,EAAA,OAAU,CAAA,CAAA;GAC1E,KAAK,EAAA;MAEN,EAkBO,QAAA,EAjBL,OAAK,EAAA,CAAC,0FAAwF;kCAC7C,EAAA;mCAAmD,EAAA;UAKpG,EASE,SAAA;GARC,IAAI,EAAA;GACL,MAAK;GACL,OAAM;GACL,SAAS,EAAA;GACT,UAAU,EAAA;GACV,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAQ;4BAEX,EAAkD,QAAA;GAA5C,OAAM;GAAiB,eAAY;qBAE/BA,EAAAA,OAAO,WAAA,GAAA,EAAnB,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system181.js

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