@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system153.js.map

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

package/dist/design-system154.js

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