@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system159.js

@@ -1,8 +1,40 @@
-import e from "./design-system157.js";
-/* empty css                 */
-//#region src/components/BPopconfirm/BPopconfirm.vue
-var t = e;
+import e from "./design-system29.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
+//#region src/components/BModal/BModalFooter.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "b:mt-2 b:flex b:items-center b:bg-white" }, p = { class: "b:flex b:flex-initial b:gap-x-2" }, m = /* @__PURE__ */ o({
+	__name: "BModalFooter",
+	props: {
+		cancelText: { default: "Cancel" },
+		hideCancel: { type: Boolean },
+		cancelDisabled: { type: Boolean },
+		okText: { default: "OK" },
+		hideOk: { type: Boolean },
+		okDisabled: { type: Boolean }
+	},
+	emits: ["cancel", "ok"],
+	setup(o, { emit: m }) {
+		let h = m;
+		return (m, g) => (s(), r("div", f, [c(m.$slots, "left", {}, () => [g[2] ||= i("div", { class: "b:flex-auto" }, null, -1)]), c(m.$slots, "right", {}, () => [i("div", p, [o.hideCancel ? n("", !0) : (s(), t(u(e), {
+			key: 0,
+			variant: "outlined",
+			color: "secondary",
+			autofocus: "",
+			disabled: o.cancelDisabled,
+			onClick: g[0] ||= (e) => h("cancel")
+		}, {
+			default: d(() => [a(l(o.cancelText), 1)]),
+			_: 1
+		}, 8, ["disabled"])), o.hideOk ? n("", !0) : (s(), t(u(e), {
+			key: 1,
+			disabled: o.okDisabled,
+			onClick: g[1] ||= (e) => h("ok")
+		}, {
+			default: d(() => [a(l(o.okText), 1)]),
+			_: 1
+		}, 8, ["disabled"]))])])]));
+	}
+});
 //#endregion
-export { t as default };
+export { m as default };
 
 //# sourceMappingURL=design-system159.js.map

package/dist/design-system159.js.map

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

package/dist/design-system160.js

@@ -1,192 +1,7 @@
-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));
-	}
-});
+import e from "./design-system159.js";
+//#region src/components/BModal/BModalFooter.vue
+var t = e;
 //#endregion
-export { w as default };
+export { t as default };
 
 //# sourceMappingURL=design-system160.js.map

package/dist/design-system160.js.map

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

package/dist/design-system161.js

@@ -0,0 +1,24 @@
+import e from "./design-system29.js";
+import { createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, getCurrentInstance as a, openBlock as o, renderSlot as s, toDisplayString as c, unref as l } from "vue";
+//#region src/components/BModal/BModalHeader.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "b:mb-2 b:flex b:items-center b:bg-white" }, d = { class: "b:flex-auto b:font-semibold" }, f = /* @__PURE__ */ i({
+	__name: "BModalHeader",
+	props: { title: {} },
+	setup(i) {
+		let f = a(), p = () => {
+			f?.parent?.emit("update:modelValue", !1);
+		};
+		return (a, f) => (o(), t("div", u, [s(a.$slots, "title", {}, () => [n("h2", d, c(i.title), 1)]), s(a.$slots, "icon", {}, () => [r(l(e), {
+			variant: "text",
+			color: "secondary",
+			"prepend-icon": "xmark",
+			"prepend-icon-size": "md",
+			autofocus: "",
+			onClick: p
+		})])]));
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=design-system161.js.map

package/dist/{design-system150.js.map → design-system161.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system150.js","names":[],"sources":["../src/components/BModal/BModalHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BButton } from '@/components';\nimport { getCurrentInstance } from 'vue';\n\nconst { title } = defineProps<{\n  title?: string;\n}>();\n\nconst instance = getCurrentInstance();\n\nconst close = () => {\n  instance?.parent?.emit('update:modelValue', false);\n};\n</script>\n\n<template>\n  <div class=\"b:mb-2 b:flex b:items-center b:bg-white\">\n    <slot name=\"title\">\n      <h2 class=\"b:flex-auto b:font-semibold\">\n        {{ title }}\n      </h2>\n    </slot>\n    <slot name=\"icon\">\n      <BButton\n        variant=\"text\"\n        color=\"secondary\"\n        prepend-icon=\"xmark\"\n        prepend-icon-size=\"md\"\n        autofocus\n        @click=\"close\"\n      />\n    </slot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"design-system161.js","names":[],"sources":["../src/components/BModal/BModalHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BButton } from '@/components';\nimport { getCurrentInstance } from 'vue';\n\nconst { title } = defineProps<{\n  title?: string;\n}>();\n\nconst instance = getCurrentInstance();\n\nconst close = () => {\n  instance?.parent?.emit('update:modelValue', false);\n};\n</script>\n\n<template>\n  <div class=\"b:mb-2 b:flex b:items-center b:bg-white\">\n    <slot name=\"title\">\n      <h2 class=\"b:flex-auto b:font-semibold\">\n        {{ title }}\n      </h2>\n    </slot>\n    <slot name=\"icon\">\n      <BButton\n        variant=\"text\"\n        color=\"secondary\"\n        prepend-icon=\"xmark\"\n        prepend-icon-size=\"md\"\n        autofocus\n        @click=\"close\"\n      />\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;EAQA,IAAM,IAAW,GAAoB,EAE/B,UAAc;AAClB,MAAU,QAAQ,KAAK,qBAAqB,GAAM;;yBAKlD,EAgBM,OAhBN,GAgBM,CAfJ,EAIO,EAAA,QAAA,SAAA,EAAA,QAAA,CAHL,EAEK,MAFL,GAEK,EADA,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,EAGZ,EASO,EAAA,QAAA,QAAA,EAAA,QAAA,CARL,EAOE,EAAA,EAAA,EAAA;GANA,SAAQ;GACR,OAAM;GACN,gBAAa;GACb,qBAAkB;GAClB,WAAA;GACC,SAAO"}

package/dist/design-system162.js

@@ -1,6 +1,5 @@
-import e from "./design-system160.js";
-/* empty css                 */
-//#region src/components/BPopover/BPopover.vue
+import e from "./design-system161.js";
+//#region src/components/BModal/BModalHeader.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system162.js.map

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