@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system247.js

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

package/dist/design-system247.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system247.js","names":[],"sources":["../src/components/BTooltip/BTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BTooltipPlacement, BTooltipTrigger } from '@/types.ts';\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  trigger = BTooltipTrigger.Hover,\n  placement = BTooltipPlacement.TopCenter,\n  arrow = true,\n  color,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1070,\n  fresh = false,\n  modelValue = undefined,\n} = defineProps<{\n  /** The text shown inside the tooltip. Also accepts the `title` slot. */\n  title?: string;\n  /** The event that triggers the tooltip to open. */\n  trigger?: `${BTooltipTrigger}`;\n  /** Placement of the tooltip relative to the target element. */\n  placement?: `${BTooltipPlacement}`;\n  /** Whether the tooltip has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Custom background color of the tooltip. */\n  color?: string;\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 tooltip DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the tooltip. */\n  zIndex?: number;\n  /** Force re-render when tooltip is shown. */\n  fresh?: boolean;\n  /** Whether to auto-adjust placement when tooltip overflows viewport. */\n  autoAdjustOverflow?: boolean;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n  /** Additional classes to apply to the toggle wrapper. */\n  toggleClass?: string;\n  /** Additional classes to apply to the tooltip content container. */\n  tooltipClass?: string;\n  /** Additional classes to apply to the tooltip inner element. */\n  tooltipInnerClass?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the tooltip 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 tooltip. */\n  default?(): unknown;\n  /** Overrides the `title` prop. */\n  title?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst tooltipId = useId();\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  tooltipRef.value?.showPopover();\n}\n\nfunction doClose() {\n  tooltipRef.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 tooltipRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\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    toggleRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Tooltip hover (keep tooltip open when hovering it)\n// ─────────────────────────────────────────────\nfunction onTooltipMouseEnter() {\n  if (trigger === BTooltipTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onTooltipMouseLeave() {\n  if (trigger === BTooltipTrigger.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  // Keyboard always attached\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BTooltipTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BTooltipTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BTooltipTrigger.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      tooltipRef.value?.showPopover();\n    } else {\n      tooltipRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-tooltip-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BTooltipPlacement.TopLeft]: 'top-left',\n    [BTooltipPlacement.TopCenter]: 'top-center',\n    [BTooltipPlacement.TopRight]: 'top-right',\n    [BTooltipPlacement.RightTop]: 'right-top',\n    [BTooltipPlacement.RightCenter]: 'right-center',\n    [BTooltipPlacement.RightBottom]: 'right-bottom',\n    [BTooltipPlacement.BottomRight]: 'bottom-right',\n    [BTooltipPlacement.BottomCenter]: 'bottom-center',\n    [BTooltipPlacement.BottomLeft]: 'bottom-left',\n    [BTooltipPlacement.LeftBottom]: 'left-bottom',\n    [BTooltipPlacement.LeftCenter]: 'left-center',\n    [BTooltipPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst customColorStyle = computed(() => {\n  if (!color) return undefined;\n  return {\n    '--b-tooltip-bg': color,\n    '--b-tooltip-arrow-color': color,\n  } as Record<string, string>;\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-tooltip__toggle', toggleClass]\"\n    :style=\"{ anchorName: anchorName }\"\n    :aria-describedby=\"isOpen ? tooltipId : undefined\"\n  >\n    <slot />\n  </div>\n\n  <div\n    ref=\"tooltipRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-tooltip__content',\n      placementClass,\n      { 'b-tooltip__content--no-arrow': !arrow },\n      tooltipClass,\n    ]\"\n    :style=\"[{ zIndex, positionAnchor: anchorName }, customColorStyle]\"\n    role=\"tooltip\"\n    :id=\"tooltipId\"\n    @toggle=\"onPopoverToggle\"\n    @mouseenter=\"onTooltipMouseEnter\"\n    @mouseleave=\"onTooltipMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-tooltip__arrow\" aria-hidden=\"true\" />\n      <div :class=\"['b-tooltip__inner', tooltipInnerClass]\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-tooltip-bg: oklch(20% 0 0);\n  --b-tooltip-color: #fff;\n  --b-tooltip-font-size: 0.875rem;\n  --b-tooltip-line-height: 1.5;\n  --b-tooltip-padding-x: 0.5rem;\n  --b-tooltip-padding-y: 0.375rem;\n  --b-tooltip-border-radius: 0.375rem;\n  --b-tooltip-max-width: 250px;\n  --b-tooltip-arrow-size: 8px;\n  --b-tooltip-arrow-color: oklch(20% 0 0);\n  --b-tooltip-gap: 8px;\n  --b-tooltip-transition-duration: 200ms;\n  --b-tooltip-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\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-tooltip-bg: oklch(35% 0 0);\n  --b-tooltip-arrow-color: oklch(35% 0 0);\n  --b-tooltip-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}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-tooltip-bg: oklch(35% 0 0);\n    --b-tooltip-arrow-color: oklch(35% 0 0);\n    --b-tooltip-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  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-tooltip__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip content (popover)\n   ───────────────────────────────────────────── */\n.b-tooltip__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-tooltip-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-tooltip-transition-duration),\n    opacity var(--b-tooltip-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-tooltip-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-tooltip-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-tooltip-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-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-tooltip-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-tooltip-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-tooltip-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-tooltip__inner {\n  background: var(--b-tooltip-bg);\n  color: var(--b-tooltip-color);\n  font-size: var(--b-tooltip-font-size);\n  line-height: var(--b-tooltip-line-height);\n  padding: var(--b-tooltip-padding-y) var(--b-tooltip-padding-x);\n  border-radius: var(--b-tooltip-border-radius);\n  box-shadow: var(--b-tooltip-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tooltip__arrow {\n  position: absolute;\n  width: var(--b-tooltip-arrow-size);\n  height: var(--b-tooltip-arrow-size);\n  background: var(--b-tooltip-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-tooltip__content.top-left .b-tooltip__arrow,\n.b-tooltip__content.top-center .b-tooltip__arrow,\n.b-tooltip__content.top-right .b-tooltip__arrow {\n  bottom: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-tooltip__content.bottom-left .b-tooltip__arrow,\n.b-tooltip__content.bottom-center .b-tooltip__arrow,\n.b-tooltip__content.bottom-right .b-tooltip__arrow {\n  top: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-tooltip__content.right-top .b-tooltip__arrow,\n.b-tooltip__content.right-center .b-tooltip__arrow,\n.b-tooltip__content.right-bottom .b-tooltip__arrow {\n  left: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-tooltip__content.left-top .b-tooltip__arrow,\n.b-tooltip__content.left-center .b-tooltip__arrow,\n.b-tooltip__content.left-bottom .b-tooltip__arrow {\n  right: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-tooltip-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-tooltip-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tooltip__content {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system248.js

@@ -0,0 +1,10 @@
+//#region src/components/BTour/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Center = "center", e.Top = "top", e.TopLeft = "topLeft", e.TopRight = "topRight", e.Bottom = "bottom", e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.Left = "left", e.LeftTop = "leftTop", e.LeftBottom = "leftBottom", e.Right = "right", e.RightTop = "rightTop", e.RightBottom = "rightBottom", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Default = "default", e.Primary = "primary", e;
+}({});
+//#endregion
+export { e as BTourPlacement, t as BTourType };
+
+//# sourceMappingURL=design-system248.js.map

package/dist/design-system248.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system248.js","names":[],"sources":["../src/components/BTour/types.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\n\n// ─────────────────────────────────────────────\n// Enums\n// ─────────────────────────────────────────────\n\nexport enum BTourPlacement {\n  Center = 'center',\n  Top = 'top',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  Bottom = 'bottom',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  Left = 'left',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n  Right = 'right',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n}\n\nexport enum BTourType {\n  Default = 'default',\n  Primary = 'primary',\n}\n\n// ─────────────────────────────────────────────\n// Interfaces\n// ─────────────────────────────────────────────\n\nexport interface BTourArrowOptions {\n  /** Point the arrow at the center of the target element. */\n  pointAtCenter?: boolean;\n}\n\nexport interface BTourGapOptions {\n  /** Pixel offset between the highlight box and the target element. */\n  offset?: number | [number, number];\n  /** Border-radius of the highlight box (px). */\n  radius?: number;\n}\n\nexport interface BTourButtonProps {\n  children?: string;\n  onClick?: () => void;\n  className?: string;\n  style?: Record<string, string>;\n}\n\nexport interface BTourScrollIntoViewOptions {\n  behavior?: ScrollBehavior;\n  block?: ScrollLogicalPosition;\n  inline?: ScrollLogicalPosition;\n}\n\nexport interface BTourStep {\n  /** Title of the step. */\n  title: string;\n  /** Description text for the step. */\n  description?: string;\n  /** Cover image or video URL shown above title, or arbitrary HTML. */\n  cover?: string;\n  /**\n   * CSS selector string, HTMLElement reference, or getter function\n   * returning an element. Passing `null` centers the tour popup.\n   */\n  target?: string | HTMLElement | (() => HTMLElement | null) | null;\n  /** Arrow configuration for this step (overrides Tour-level). */\n  arrow?: boolean | BTourArrowOptions;\n  /** Placement for this step (overrides Tour-level). */\n  placement?: `${BTourPlacement}`;\n  /** Mask configuration for this step (overrides Tour-level). */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Type variant for this step (overrides Tour-level). */\n  type?: `${BTourType}`;\n  /** Custom next-button props. */\n  nextButtonProps?: BTourButtonProps;\n  /** Custom prev-button props. */\n  prevButtonProps?: BTourButtonProps;\n  /** Custom close icon for this step. */\n  closeIcon?: boolean | string;\n  /** Scroll-into-view options for this step. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Fired when this step's close button is clicked. */\n  onClose?: () => void;\n}\n\n// ─────────────────────────────────────────────\n// Internal computed step (resolved)\n// ─────────────────────────────────────────────\n\nexport interface BTourResolvedStep extends BTourStep {\n  resolvedTarget: HTMLElement | null;\n  index: number;\n}\n\n// ─────────────────────────────────────────────\n// Injection key (unused currently - kept for extensibility)\n// ─────────────────────────────────────────────\n\nexport const BTourContextKey: InjectionKey<null> = Symbol('BTourContext');\n"],"mappings":";AAMA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,MAAA,OACA,EAAA,UAAA,WACA,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,OAAA,QACA,EAAA,UAAA,WACA,EAAA,aAAA,cACA,EAAA,QAAA,SACA,EAAA,WAAA,YACA,EAAA,cAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA;KACD"}

package/dist/{design-system214.js → design-system249.js}

@@ -1,4 +1,4 @@
-import { BTourPlacement as e, BTourType as t } from "./design-system213.js";
+import { BTourPlacement as e, BTourType as t } from "./design-system248.js";
 import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as ee, onMounted as te, openBlock as g, ref as _, renderList as ne, renderSlot as v, toDisplayString as y, watch as re, withCtx as ie } from "vue";
 //#region src/components/BTour/BTour.vue?vue&type=script&setup=true&lang.ts
 var b = ["aria-label"], ae = ["viewBox"], x = [
@@ -373,4 +373,4 @@ var b = ["aria-label"], ae = ["viewBox"], x = [
 //#endregion
 export { C as default };
 
-//# sourceMappingURL=design-system214.js.map
+//# sourceMappingURL=design-system249.js.map

package/dist/design-system249.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system249.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n  BTourPlacement,\n  BTourType,\n  type BTourArrowOptions,\n  type BTourButtonProps,\n  type BTourGapOptions,\n  type BTourResolvedStep,\n  type BTourScrollIntoViewOptions,\n  type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  steps = [],\n  open = undefined,\n  current = undefined,\n  defaultCurrent = 0,\n  arrow = true,\n  placement = BTourPlacement.Bottom,\n  type = BTourType.Default,\n  mask = true,\n  gap = { offset: 6, radius: 2 },\n  zIndex = 1070,\n  keyboard = true,\n  scrollIntoViewOptions = true,\n  getPopupContainer: _getPopupContainer = undefined,\n  closeIcon = true,\n  disabledInteraction = false,\n} = defineProps<{\n  /** Array of step definition objects. */\n  steps?: BTourStep[];\n  /**\n   * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n   * Omit to use uncontrolled mode.\n   */\n  open?: boolean;\n  /**\n   * Controlled current step index.\n   * Omit to use uncontrolled mode.\n   */\n  current?: number;\n  /** Initial step index in uncontrolled mode. @default 0 */\n  defaultCurrent?: number;\n  /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n  arrow?: boolean | BTourArrowOptions;\n  /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n  placement?: `${BTourPlacement}`;\n  /** Visual type variant. @default 'default' */\n  type?: `${BTourType}`;\n  /**\n   * Mask overlay. `false` disables, `true` uses defaults,\n   * or object `{ color, style }` for custom styling.\n   */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Gap between highlight box and target element. */\n  gap?: BTourGapOptions;\n  /** z-index of the tour popup and mask. @default 1070 */\n  zIndex?: number;\n  /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n  keyboard?: boolean;\n  /** Scroll target into view. Pass options object or `false` to disable. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Container element for the tour popup. Defaults to `document.body`. */\n  getPopupContainer?: () => HTMLElement;\n  /** Custom close icon. `false` hides the close button. */\n  closeIcon?: boolean | string;\n  /** Disable pointer interaction on the highlighted region. @default false */\n  disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the current step changes. */\n  (e: 'change', current: number): void;\n  /** Fired when the tour is closed (X button or Finish). */\n  (e: 'close', current: number): void;\n  /** Fires when open state changes (v-model:open). */\n  (e: 'update:open', value: boolean): void;\n  /** Fires when current step changes (v-model:current). */\n  (e: 'update:current', value: number): void;\n  /** Fired after the tour finishes (last step next). */\n  (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n  /** Custom cover content for the tour step. */\n  cover?(): unknown;\n  /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n  indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n  steps.map((step, index) => {\n    let resolvedTarget: HTMLElement | null = null;\n    if (step.target) {\n      if (typeof step.target === 'string') {\n        resolvedTarget = document.querySelector<HTMLElement>(step.target);\n      } else if (typeof step.target === 'function') {\n        resolvedTarget = step.target();\n      } else {\n        resolvedTarget = step.target;\n      }\n    }\n    return { ...step, resolvedTarget, index };\n  }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n  () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n  () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n    return effectiveMask.value.color;\n  }\n  return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n  const stepClose = activeStep.value?.closeIcon;\n  const val = stepClose !== undefined ? stepClose : closeIcon;\n  return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n  const o = gap?.offset ?? 6;\n  return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n  const step = activeStep.value;\n  if (!step || !isOpen.value) {\n    highlightRect.value = null;\n    popupStyle.value = {};\n    return;\n  }\n\n  const target = step.resolvedTarget;\n  if (!target) {\n    // Center the popup when no target\n    highlightRect.value = null;\n    popupStyle.value = {\n      position: 'fixed',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n    };\n    return;\n  }\n\n  const rect = target.getBoundingClientRect();\n  const [offsetV, offsetH] = gapOffset.value;\n  highlightRect.value = {\n    top: rect.top - offsetV,\n    left: rect.left - offsetH,\n    width: rect.width + offsetH * 2,\n    height: rect.height + offsetV * 2,\n    radius: gapRadius.value,\n  };\n\n  // Position the popup relative to the highlight\n  computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n  const GAP = 12;\n  const eff = effectivePlacement.value;\n  const style: Record<string, string> = { position: 'fixed' };\n  const [offsetV, offsetH] = gapOffset.value;\n\n  const top = rect.top - offsetV;\n  const bottom = rect.bottom + offsetV;\n  const left = rect.left - offsetH;\n  const right = rect.right + offsetH;\n  const midX = rect.left + rect.width / 2;\n  const midY = rect.top + rect.height / 2;\n\n  switch (eff) {\n    case BTourPlacement.Top:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.TopLeft:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.TopRight:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Bottom:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.BottomLeft:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.BottomRight:\n      style.top = `${bottom + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Left:\n      style.top = `${midY}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.LeftTop:\n      style.top = `${top}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.LeftBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.Right:\n      style.top = `${midY}px`;\n      style.left = `${right + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.RightTop:\n      style.top = `${top}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.RightBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.Center:\n      style.top = '50%';\n      style.left = '50%';\n      style.transform = 'translate(-50%, -50%)';\n      break;\n    default:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n  }\n\n  popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n  if (!showArrow.value) return '';\n  const eff = effectivePlacement.value;\n\n  if (\n    [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--top';\n  }\n  if (\n    [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--bottom';\n  }\n  if (\n    [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--left';\n  }\n  if (\n    [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--right';\n  }\n  return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n  emit('close', currentStep.value);\n  if (isControlledOpen.value) {\n    emit('update:open', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction setCurrentStep(step: number) {\n  emit('change', step);\n  if (isControlledCurrent.value) {\n    emit('update:current', step);\n  } else {\n    internalCurrent.value = step;\n  }\n}\n\nfunction goNext() {\n  if (currentStep.value >= totalSteps.value - 1) {\n    emit('finish');\n    doClose();\n    return;\n  }\n  setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n  if (currentStep.value <= 0) return;\n  setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n  const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n  if (opt === false) return;\n  const options: ScrollIntoViewOptions =\n    typeof opt === 'object'\n      ? (opt as ScrollIntoViewOptions)\n      : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n  el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n  nextTick(() => {\n    if (!popupRef.value) return;\n    const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popupRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n  if (e.key !== 'Tab' || !popupRef.value) return;\n  const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    e.preventDefault();\n    return;\n  }\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  if (e.shiftKey && document.activeElement === first) {\n    e.preventDefault();\n    last.focus();\n  } else if (!e.shiftKey && document.activeElement === last) {\n    e.preventDefault();\n    first.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n  if (!keyboard) return;\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    doClose();\n  } else if (e.key === 'ArrowRight') {\n    e.preventDefault();\n    goNext();\n  } else if (e.key === 'ArrowLeft') {\n    e.preventDefault();\n    goPrev();\n  }\n  trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n  targetObserver?.disconnect();\n  if (!el) return;\n  targetObserver = new ResizeObserver(updateHighlight);\n  targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n  if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(onScrollOrResize);\n  resizeObserver.observe(document.documentElement);\n  window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  targetObserver?.disconnect();\n  window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  [isOpen, currentStep],\n  ([open]) => {\n    if (!open) {\n      highlightRect.value = null;\n      popupStyle.value = {};\n      targetObserver?.disconnect();\n      nextTick(() => previouslyFocused?.focus());\n      return;\n    }\n    const step = resolvedSteps.value[currentStep.value];\n    if (step?.resolvedTarget) {\n      scrollIntoView(step.resolvedTarget);\n      observeTarget(step.resolvedTarget);\n    }\n    nextTick(() => {\n      updateHighlight();\n      if (open) {\n        previouslyFocused = document.activeElement as HTMLElement | null;\n        focusFirst();\n      }\n    });\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n  const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n  const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n  return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n    return effectiveMask.value.style;\n  }\n  return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n  if (!props) return {};\n  const { onClick: _onClick, children: _children, ...rest } = props;\n  return rest;\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-tour-fade\">\n      <div\n        v-if=\"isOpen && totalSteps > 0\"\n        class=\"b-tour\"\n        :class=\"[`b-tour--${effectiveType}`]\"\n        :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"activeStep?.title\"\n      >\n        <!-- ── Mask overlay (SVG spotlight) ── -->\n        <svg\n          v-if=\"showMask\"\n          class=\"b-tour__mask\"\n          :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          :viewBox=\"svgViewBox\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <mask :id=\"maskId\">\n              <!-- White = visible (full viewport) -->\n              <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n              <!-- Black = transparent cutout (target spotlight) -->\n              <rect\n                v-if=\"highlightRect\"\n                :x=\"highlightRect.left\"\n                :y=\"highlightRect.top\"\n                :width=\"highlightRect.width\"\n                :height=\"highlightRect.height\"\n                :rx=\"highlightRect.radius\"\n                fill=\"black\"\n              />\n            </mask>\n          </defs>\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n            :mask=\"`url(#${maskId})`\"\n            :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n          />\n        </svg>\n\n        <!-- ── Highlight border around target ── -->\n        <div\n          v-if=\"highlightRect\"\n          class=\"b-tour__spotlight\"\n          :style=\"{\n            top: `${highlightRect.top}px`,\n            left: `${highlightRect.left}px`,\n            width: `${highlightRect.width}px`,\n            height: `${highlightRect.height}px`,\n            borderRadius: `${highlightRect.radius}px`,\n            zIndex: zIndex - 1,\n            pointerEvents: disabledInteraction ? 'none' : 'auto',\n          }\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- ── Popup card ── -->\n        <div\n          ref=\"popupRef\"\n          class=\"b-tour__popup\"\n          :class=\"[\n            `b-tour__popup--${effectivePlacement}`,\n            { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n          ]\"\n          :style=\"[{ zIndex }, popupStyle]\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Arrow -->\n          <div\n            v-if=\"showArrow && highlightRect && arrowClass\"\n            class=\"b-tour__arrow\"\n            :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n            aria-hidden=\"true\"\n          />\n\n          <!-- Cover media -->\n          <div v-if=\"hasCover\" class=\"b-tour__cover\">\n            <img\n              v-if=\"typeof activeStep?.cover === 'string'\"\n              :src=\"activeStep.cover\"\n              class=\"b-tour__cover-img\"\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n            <slot v-else name=\"cover\" />\n          </div>\n\n          <!-- Header -->\n          <div class=\"b-tour__header\">\n            <h4 class=\"b-tour__title\">\n              {{ activeStep?.title }}\n            </h4>\n\n            <!-- Close button -->\n            <button\n              v-if=\"showCloseIcon\"\n              type=\"button\"\n              class=\"b-tour__close\"\n              aria-label=\"Close tour\"\n              @click=\"doClose\"\n            >\n              <svg\n                v-if=\"\n                  closeIcon === true ||\n                  activeStep?.closeIcon === true ||\n                  activeStep?.closeIcon === undefined\n                \"\n                class=\"b-tour__close-icon\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path\n                  d=\"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              </svg>\n              <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n            </button>\n          </div>\n\n          <!-- Description -->\n          <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n            {{ activeStep.description }}\n          </div>\n\n          <!-- Footer -->\n          <div class=\"b-tour__footer\">\n            <!-- Indicators -->\n            <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n              <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n                <span\n                  v-for=\"(_, i) in steps\"\n                  :key=\"i\"\n                  class=\"b-tour__indicator\"\n                  :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n                  role=\"presentation\"\n                  :aria-current=\"i === currentStep ? 'step' : undefined\"\n                />\n              </slot>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"b-tour__actions\">\n              <!-- Prev button -->\n              <button\n                v-if=\"currentStep > 0\"\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--prev\"\n                v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.prevButtonProps?.onClick?.();\n                    goPrev();\n                  }\n                \"\n              >\n                {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n              </button>\n\n              <!-- Next / Finish button -->\n              <button\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--next\"\n                v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.nextButtonProps?.onClick?.();\n                    goNext();\n                  }\n                \"\n              >\n                {{\n                  activeStep?.nextButtonProps?.children ??\n                  (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n                }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   Design tokens - scoped to component root\n   (Never on :root - always on .b-tour)\n   ──────────────────────────────────────────── */\n.b-tour {\n  /* AntD token: zIndexPopup → 1070 */\n  --b-tour-z-index: 1070;\n\n  /* AntD token: closeBtnSize → 22px */\n  --b-tour-close-btn-size: 22px;\n\n  /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n  --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n  /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n  --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n  /* Extended tokens for full component coverage */\n  --b-tour-popup-bg: #fff;\n  --b-tour-popup-color: oklch(25% 0 0);\n  --b-tour-popup-font-size: 0.875rem;\n  --b-tour-popup-line-height: 1.5;\n  --b-tour-popup-border-radius: 0.5rem;\n  --b-tour-popup-max-width: 320px;\n  --b-tour-popup-min-width: 220px;\n  --b-tour-popup-padding: 1rem;\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  --b-tour-title-font-size: 1rem;\n  --b-tour-title-font-weight: 600;\n  --b-tour-title-color: oklch(15% 0 0);\n\n  --b-tour-description-color: oklch(35% 0 0);\n  --b-tour-description-font-size: 0.875rem;\n\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n  --b-tour-arrow-size: 10px;\n  --b-tour-arrow-bg: #fff;\n\n  --b-tour-indicator-size: 6px;\n  --b-tour-indicator-bg: oklch(80% 0 0);\n  --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n  --b-tour-btn-font-size: 0.875rem;\n  --b-tour-btn-border-radius: 0.375rem;\n  --b-tour-btn-padding: 0.25rem 0.75rem;\n\n  --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n  --b-tour-next-btn-color: #fff;\n  --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n  --b-tour-prev-btn-bg: transparent;\n  --b-tour-prev-btn-color: oklch(35% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n  --b-tour-close-color: oklch(55% 0 0);\n  --b-tour-close-hover-color: oklch(25% 0 0);\n\n  --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n  --b-tour-transition-duration: 250ms;\n\n  /* Primary type overrides */\n  --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n  --b-tour-primary-title-color: #fff;\n  --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n  --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n  --b-tour-primary-close-hover-color: #fff;\n  --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n  --b-tour-primary-indicator-active-bg: #fff;\n  --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n  --b-tour-popup-bg: oklch(22% 0 0);\n  --b-tour-popup-color: oklch(90% 0 0);\n  --b-tour-popup-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  --b-tour-title-color: oklch(95% 0 0);\n  --b-tour-description-color: oklch(72% 0 0);\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-tour-arrow-bg: oklch(22% 0 0);\n  --b-tour-indicator-bg: oklch(40% 0 0);\n  --b-tour-prev-btn-color: oklch(85% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n  --b-tour-close-color: oklch(65% 0 0);\n  --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tour {\n    --b-tour-popup-bg: oklch(22% 0 0);\n    --b-tour-popup-color: oklch(90% 0 0);\n    --b-tour-popup-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    --b-tour-title-color: oklch(95% 0 0);\n    --b-tour-description-color: oklch(72% 0 0);\n    --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-tour-arrow-bg: oklch(22% 0 0);\n    --b-tour-indicator-bg: oklch(40% 0 0);\n    --b-tour-prev-btn-color: oklch(85% 0 0);\n    --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n    --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n    --b-tour-close-color: oklch(65% 0 0);\n    --b-tour-close-hover-color: oklch(90% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Tour container (fullscreen overlay wrapper)\n   ───────────────────────────────────────────── */\n.b-tour {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n   Mask (SVG spotlight overlay)\n   ───────────────────────────────────────────── */\n.b-tour__mask {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n   Spotlight border ring\n   ───────────────────────────────────────────── */\n.b-tour__spotlight {\n  position: fixed;\n  box-shadow: 0 0 0 9999px transparent;\n  box-sizing: border-box;\n  pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Popup card\n   ───────────────────────────────────────────── */\n.b-tour__popup {\n  position: fixed;\n  background: var(--b-tour-popup-bg);\n  color: var(--b-tour-popup-color);\n  font-size: var(--b-tour-popup-font-size);\n  line-height: var(--b-tour-popup-line-height);\n  border-radius: var(--b-tour-popup-border-radius);\n  box-shadow: var(--b-tour-popup-shadow);\n  max-width: var(--b-tour-popup-max-width);\n  min-width: var(--b-tour-popup-min-width);\n  width: max-content;\n  box-sizing: border-box;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tour__arrow {\n  position: absolute;\n  width: var(--b-tour-arrow-size);\n  height: var(--b-tour-arrow-size);\n  background: var(--b-tour-arrow-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n  top: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n  bottom: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n  left: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n  right: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n   Cover image\n   ───────────────────────────────────────────── */\n.b-tour__cover {\n  border-radius: var(--b-tour-cover-border-radius);\n  overflow: hidden;\n  margin: 0;\n}\n\n.b-tour__cover-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n   Header (title + close)\n   ───────────────────────────────────────────── */\n.b-tour__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--b-tour-title-font-size);\n  font-weight: var(--b-tour-title-font-weight);\n  color: var(--b-tour-title-color);\n  line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n   Close button\n   ───────────────────────────────────────────── */\n.b-tour__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-tour-close-btn-size);\n  height: var(--b-tour-close-btn-size);\n  padding: 0;\n  margin-top: 0.1em;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-tour-close-color);\n  cursor: pointer;\n  transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n  color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-tour__description {\n  padding: 0.5rem var(--b-tour-popup-padding);\n  font-size: var(--b-tour-description-font-size);\n  color: var(--b-tour-description-color);\n  line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (indicators + actions)\n   ───────────────────────────────────────────── */\n.b-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n  gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n  display: inline-block;\n  width: var(--b-tour-indicator-size);\n  height: var(--b-tour-indicator-size);\n  border-radius: 50%;\n  background: var(--b-tour-indicator-bg);\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n  background: var(--b-tour-indicator-active-bg);\n  width: calc(var(--b-tour-indicator-size) * 2.5);\n  border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tour-btn-padding);\n  border-radius: var(--b-tour-btn-border-radius);\n  font-size: var(--b-tour-btn-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    color var(--b-tour-transition-duration) ease;\n  white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n  background: var(--b-tour-prev-btn-bg);\n  color: var(--b-tour-prev-btn-color);\n  border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n  background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n  background: var(--b-tour-next-btn-bg);\n  color: var(--b-tour-next-btn-color);\n  border: none;\n}\n\n.b-tour__btn--next:hover {\n  background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Primary type variant\n   ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n  background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n  color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n  color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n  color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n  color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n  background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n  background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n  background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n  background: var(--b-tour-primary-prev-btn-bg);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n  background: #fff;\n  color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n  background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Transition\n   ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n  transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n  opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tour-fade-enter-active,\n  .b-tour-fade-leave-active {\n    transition-duration: 0ms;\n  }\n\n  .b-tour__indicator,\n  .b-tour__btn,\n  .b-tour__close {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;6DAwYM,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA/TF,IAAM,IAAO,GAuBP,IAAe,EAAI,GAAM,EACzB,IAAkB,EAAI,EAAA,eAAe,EAErC,IAAmB,QAAe,EAAA,SAAS,KAAA,EAAU,EACrD,IAAsB,QAAe,EAAA,YAAY,KAAA,EAAU,EAE3D,IAAS,QAAgB,EAAiB,QAAQ,EAAA,OAAQ,EAAa,MAAO,EAC9E,IAAc,QAAgB,EAAoB,QAAQ,EAAA,UAAW,EAAgB,MAAO,EAK5F,IAAa,QAAe,EAAA,MAAM,OAAO,EAEzC,IAAgB,QACpB,EAAA,MAAM,KAAK,GAAM,MAAU;GACzB,IAAI,IAAqC;AAUzC,UATI,EAAK,WACP,AAKE,IALE,OAAO,EAAK,UAAW,WACR,SAAS,cAA2B,EAAK,OAAO,GACxD,OAAO,EAAK,UAAW,aACf,EAAK,QAAQ,GAEb,EAAK,SAGnB;IAAE,GAAG;IAAM;IAAgB;IAAO;IACzC,CACH,EAEK,IAAa,QACX,EAAc,MAAM,EAAY,OACvC,EAGK,IAAqB,QAAe,EAAW,OAAO,aAAa,EAAA,UAAU,EAG7E,IAAiB,QAAe,EAAW,OAAO,SAAS,EAAA,MAAM,EAEjE,IAAY,QAAe,EAAe,UAAU,GAAM,EAE1D,IAAqB,QACnB,OAAO,EAAe,SAAU,YAAY,EAAe,MAAM,cACxE,EAGK,KAAgB,QAAe,EAAW,OAAO,QAAQ,EAAA,KAAK,EAG9D,IAAgB,QAAe,EAAW,OAAO,QAAQ,EAAA,KAAK,EAE9D,KAAW,QAAe,EAAc,UAAU,GAAM,EAExD,KAAY,QAAe;AAC/B,OAAI,OAAO,EAAc,SAAU,YAAY,EAAc,MAAM,MACjE,QAAO,EAAc,MAAM;IAG7B,EAGI,KAAgB,QAAe;GACnC,IAAM,IAAY,EAAW,OAAO;AAEpC,WADY,MAAc,KAAA,IAAwB,EAAA,YAAZ,OACvB;IACf,EAaI,IAAgB,EAA0B,KAAK,EAC/C,IAAa,EAA4B,EAAE,CAAC,EAE5C,IAAY,QAAe;GAC/B,IAAM,IAAI,EAAA,KAAK,UAAU;AACzB,UAAO,MAAM,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;IACpC,EACI,KAAY,QAAe,EAAA,KAAK,UAAU,EAAE;EAElD,SAAS,IAAkB;GACzB,IAAM,IAAO,EAAW;AACxB,OAAI,CAAC,KAAQ,CAAC,EAAO,OAAO;AAE1B,IADA,EAAc,QAAQ,MACtB,EAAW,QAAQ,EAAE;AACrB;;GAGF,IAAM,IAAS,EAAK;AACpB,OAAI,CAAC,GAAQ;AAGX,IADA,EAAc,QAAQ,MACtB,EAAW,QAAQ;KACjB,UAAU;KACV,KAAK;KACL,MAAM;KACN,WAAW;KACZ;AACD;;GAGF,IAAM,IAAO,EAAO,uBAAuB,EACrC,CAAC,GAAS,KAAW,EAAU;AAUrC,GATA,EAAc,QAAQ;IACpB,KAAK,EAAK,MAAM;IAChB,MAAM,EAAK,OAAO;IAClB,OAAO,EAAK,QAAQ,IAAU;IAC9B,QAAQ,EAAK,SAAS,IAAU;IAChC,QAAQ,GAAU;IACnB,EAGD,GAAkB,EAAK;;EAGzB,SAAS,GAAkB,GAAe;GACxC,IACM,IAAM,EAAmB,OACzB,IAAgC,EAAE,UAAU,SAAS,EACrD,CAAC,GAAS,KAAW,EAAU,OAE/B,IAAM,EAAK,MAAM,GACjB,IAAS,EAAK,SAAS,GACvB,IAAO,EAAK,OAAO,GACnB,IAAQ,EAAK,QAAQ,GACrB,IAAO,EAAK,OAAO,EAAK,QAAQ,GAChC,IAAO,EAAK,MAAM,EAAK,SAAS;AAEtC,WAAQ,GAAR;IACE,KAAK,EAAe;AAGlB,KAFA,EAAM,SAAS,GAAG,OAAO,cAAc,IAAM,GAAI,KACjD,EAAM,OAAO,GAAG,EAAK,KACrB,EAAM,YAAY;AAClB;IACF,KAAK,EAAe;AAElB,KADA,EAAM,SAAS,GAAG,OAAO,cAAc,IAAM,GAAI,KACjD,EAAM,OAAO,GAAG,EAAK;AACrB;IACF,KAAK,EAAe;AAElB,KADA,EAAM,SAAS,GAAG,OAAO,cAAc,IAAM,GAAI,KACjD,EAAM,QAAQ,GAAG,OAAO,aAAa,EAAM;AAC3C;IACF,KAAK,EAAe;AAGlB,KAFA,EAAM,MAAM,GAAG,IAAS,GAAI,KAC5B,EAAM,OAAO,GAAG,EAAK,KACrB,EAAM,YAAY;AAClB;IACF,KAAK,EAAe;AAElB,KADA,EAAM,MAAM,GAAG,IAAS,GAAI,KAC5B,EAAM,OAAO,GAAG,EAAK;AACrB;IACF,KAAK,EAAe;AAElB,KADA,EAAM,MAAM,GAAG,IAAS,GAAI,KAC5B,EAAM,QAAQ,GAAG,OAAO,aAAa,EAAM;AAC3C;IACF,KAAK,EAAe;AAGlB,KAFA,EAAM,MAAM,GAAG,EAAK,KACpB,EAAM,QAAQ,GAAG,OAAO,aAAa,IAAO,GAAI,KAChD,EAAM,YAAY;AAClB;IACF,KAAK,EAAe;AAElB,KADA,EAAM,MAAM,GAAG,EAAI,KACnB,EAAM,QAAQ,GAAG,OAAO,aAAa,IAAO,GAAI;AAChD;IACF,KAAK,EAAe;AAElB,KADA,EAAM,SAAS,GAAG,OAAO,cAAc,EAAO,KAC9C,EAAM,QAAQ,GAAG,OAAO,aAAa,IAAO,GAAI;AAChD;IACF,KAAK,EAAe;AAGlB,KAFA,EAAM,MAAM,GAAG,EAAK,KACpB,EAAM,OAAO,GAAG,IAAQ,GAAI,KAC5B,EAAM,YAAY;AAClB;IACF,KAAK,EAAe;AAElB,KADA,EAAM,MAAM,GAAG,EAAI,KACnB,EAAM,OAAO,GAAG,IAAQ,GAAI;AAC5B;IACF,KAAK,EAAe;AAElB,KADA,EAAM,SAAS,GAAG,OAAO,cAAc,EAAO,KAC9C,EAAM,OAAO,GAAG,IAAQ,GAAI;AAC5B;IACF,KAAK,EAAe;AAGlB,KAFA,EAAM,MAAM,OACZ,EAAM,OAAO,OACb,EAAM,YAAY;AAClB;IACF,QAGE,CAFA,EAAM,MAAM,GAAG,IAAS,GAAI,KAC5B,EAAM,OAAO,GAAG,EAAK,KACrB,EAAM,YAAY;;AAGtB,KAAW,QAAQ;;EAMrB,IAAM,IAAa,QAAe;AAChC,OAAI,CAAC,EAAU,MAAO,QAAO;GAC7B,IAAM,IAAM,EAAmB;AA8B/B,UA3BE;IAAC,EAAe;IAAQ,EAAe;IAAY,EAAe;IAAY,CAAC,SAC7E,EACF,GAEO,uBAGP;IAAC,EAAe;IAAK,EAAe;IAAS,EAAe;IAAS,CAAC,SACpE,EACF,GAEO,0BAGP;IAAC,EAAe;IAAO,EAAe;IAAU,EAAe;IAAY,CAAC,SAC1E,EACF,GAEO,wBAGP;IAAC,EAAe;IAAM,EAAe;IAAS,EAAe;IAAW,CAAC,SACvE,EACF,GAEO,yBAEF;IACP;EAKF,SAAS,IAAU;AAEjB,GADA,EAAK,SAAS,EAAY,MAAM,EAC5B,EAAiB,QACnB,EAAK,eAAe,GAAM,GAE1B,EAAa,QAAQ;;EAIzB,SAAS,EAAe,GAAc;AAEpC,GADA,EAAK,UAAU,EAAK,EAChB,EAAoB,QACtB,EAAK,kBAAkB,EAAK,GAE5B,EAAgB,QAAQ;;EAI5B,SAAS,IAAS;AAChB,OAAI,EAAY,SAAS,EAAW,QAAQ,GAAG;AAE7C,IADA,EAAK,SAAS,EACd,GAAS;AACT;;AAEF,KAAe,EAAY,QAAQ,EAAE;;EAGvC,SAAS,IAAS;AACZ,KAAY,SAAS,KACzB,EAAe,EAAY,QAAQ,EAAE;;EAMvC,SAAS,GAAe,GAAiB;GACvC,IAAM,IAAM,EAAW,OAAO,yBAAyB,EAAA;AACvD,OAAI,MAAQ,GAAO;GACnB,IAAM,IACJ,OAAO,KAAQ,WACV,IACD;IAAE,UAAU;IAAU,OAAO;IAAU,QAAQ;IAAW;AAChE,KAAG,eAAe,EAAQ;;EAM5B,IAAI,IAAwC,MACtC,IAAW,EAA2B,KAAK;EAKjD,SAAS,KAAa;AACpB,WAAe;AACb,QAAI,CAAC,EAAS,MAAO;IACrB,IAAM,IAAQ,EAAS,MAAM,cAA2B,EAAkB;AAC1E,IAAI,IACF,EAAM,OAAO,GAEb,EAAS,MAAM,OAAO;KAExB;;EAGJ,SAAS,GAAU,GAAkB;AACnC,OAAI,EAAE,QAAQ,SAAS,CAAC,EAAS,MAAO;GACxC,IAAM,IAAY,MAAM,KAAK,EAAS,MAAM,iBAA8B,EAAkB,CAAC;AAC7F,OAAI,EAAU,WAAW,GAAG;AAC1B,MAAE,gBAAgB;AAClB;;GAEF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAC1C,GAAI,EAAE,YAAY,SAAS,kBAAkB,KAC3C,EAAE,gBAAgB,EAClB,EAAK,OAAO,IACH,CAAC,EAAE,YAAY,SAAS,kBAAkB,MACnD,EAAE,gBAAgB,EAClB,EAAM,OAAO;;EAOjB,SAAS,GAAU,GAAkB;AAC9B,KAAA,aACD,EAAE,QAAQ,YACZ,EAAE,gBAAgB,EAClB,GAAS,IACA,EAAE,QAAQ,gBACnB,EAAE,gBAAgB,EAClB,GAAQ,IACC,EAAE,QAAQ,gBACnB,EAAE,gBAAgB,EAClB,GAAQ,GAEV,GAAU,EAAE;;EAMd,IAAI,IAAwC,MACxC,IAAwC;EAE5C,SAAS,GAAc,GAAwB;AAC7C,MAAgB,YAAY,EACvB,MACL,IAAiB,IAAI,eAAe,EAAgB,EACpD,EAAe,QAAQ,EAAG;;EAG5B,SAAS,IAAmB;AAC1B,GAAI,EAAO,SAAO,GAAiB;;AAkBrC,EAfA,SAAgB;AAGd,GAFA,IAAiB,IAAI,eAAe,EAAiB,EACrD,EAAe,QAAQ,SAAS,gBAAgB,EAChD,OAAO,iBAAiB,UAAU,GAAkB,EAAE,SAAS,IAAM,CAAC;IACtE,EAEF,SAAsB;AAGpB,GAFA,GAAgB,YAAY,EAC5B,GAAgB,YAAY,EAC5B,OAAO,oBAAoB,UAAU,EAAiB;IACtD,EAKF,GACE,CAAC,GAAQ,EAAY,GACpB,CAAC,OAAU;AACV,OAAI,CAAC,GAAM;AAIT,IAHA,EAAc,QAAQ,MACtB,EAAW,QAAQ,EAAE,EACrB,GAAgB,YAAY,EAC5B,QAAe,GAAmB,OAAO,CAAC;AAC1C;;GAEF,IAAM,IAAO,EAAc,MAAM,EAAY;AAK7C,GAJI,GAAM,mBACR,GAAe,EAAK,eAAe,EACnC,GAAc,EAAK,eAAe,GAEpC,QAAe;AAEb,IADA,GAAiB,EACb,MACF,IAAoB,SAAS,eAC7B,IAAY;KAEd;KAEJ;GAAE,WAAW;GAAM,OAAO;GAAQ,CACnC;EAKD,IAAM,IAAS,eAAe,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,IAE9D,KAAa,QAGV,OAFI,OAAO,SAAW,MAAc,OAAO,aAAa,KAE9C,GADN,OAAO,SAAW,MAAc,OAAO,cAAc,MAEhE,EAEI,KAAY,QACZ,OAAO,EAAc,SAAU,YAAY,EAAc,MAAM,QAC1D,EAAc,MAAM,QAEtB,EAAE,CACT,EAKI,KAAW,QAAe,EAAQ,EAAW,OAAO,MAAO;EAEjE,SAAS,EAAc,GAAqC;AAC1D,OAAI,CAAC,EAAO,QAAO,EAAE;GACrB,IAAM,EAAE,SAAS,GAAU,UAAU,GAAW,GAAG,MAAS;AAC5D,UAAO;;yBAKP,EA+LW,GAAA,EA/LD,IAAG,QAAM,EAAA,CACjB,EA6La,GAAA,EA7LD,MAAK,eAAa,EAAA;qBA4LtB,CA1LE,EAAA,SAAU,EAAA,QAAU,KAAA,GAAA,EAD5B,EA2LM,OAAA;;IAzLJ,OAAK,EAAA,CAAC,UAAQ,CAAA,WACM,GAAA,QAAa,CAAA,CAAA;IAChC,OAAK,EAAA,EAAA,oBAAwB,OAAO,EAAA,OAAM,EAAA,CAAA;IAC3C,MAAK;IACL,cAAW;IACV,cAAY,EAAA,OAAY;;IAIjB,GAAA,SAAA,GAAA,EADR,EAkCM,OAAA;;KAhCJ,OAAM;KACL,OAAK,EAAA,CAAA,EAAA,QAAa,EAAA,SAAM,GAAA,EAAQ,GAAA,MAAS,CAAA;KAC1C,OAAM;KACL,SAAS,GAAA;KACV,eAAY;KACZ,WAAU;QAEV,EAeO,QAAA,MAAA,CAdL,EAaO,QAAA,EAbA,IAAI,GAAM,EAAA,CAAA,AAAA,EAAA,OAEf,EAA4D,QAAA;KAAtD,GAAE;KAAI,GAAE;KAAI,OAAM;KAAO,QAAO;KAAO,MAAK;kBAG1C,EAAA,SAAA,GAAA,EADR,EAQE,QAAA;;KANC,GAAG,EAAA,MAAc;KACjB,GAAG,EAAA,MAAc;KACjB,OAAO,EAAA,MAAc;KACrB,QAAQ,EAAA,MAAc;KACtB,IAAI,EAAA,MAAc;KACnB,MAAK;qCAIX,EAQE,QAAA;KAPA,GAAE;KACF,GAAE;KACF,OAAM;KACN,QAAO;KACN,MAAM,GAAA,SAAS;KACf,MAAI,QAAU,EAAM;KACpB,OAAK,EAAA,EAAA,eAAmB,EAAA,sBAAmB,QAAA,QAAA,CAAA;;IAMxC,EAAA,SAAA,GAAA,EADR,EAaE,OAAA;;KAXA,OAAM;KACL,OAAK,EAAA;cAAwB,EAAA,MAAc,IAAG;eAA2B,EAAA,MAAc,KAAI;gBAA4B,EAAA,MAAc,MAAK;iBAA6B,EAAA,MAAc,OAAM;uBAAmC,EAAA,MAAc,OAAM;cAA0B,EAAA,SAAM;qBAAiC,EAAA,sBAAmB,SAAA;;KASvU,eAAY;;IAId,EA2HM,OAAA;cA1HA;KAAJ,KAAI;KACJ,OAAK,EAAA,CAAC,iBAAe,CAAA,kBACmB,EAAA,SAAA,EAAA,2BAAA,CAAgE,EAAA,SAAS,CAAK,EAAA,OAAa,CAAA,CAAA,CAAA;KAIlI,OAAK,EAAA,CAAA,EAAA,QAAK,EAAA,QAAM,EAAI,EAAA,MAAU,CAAA;KAC/B,UAAS;KACC;;KAIF,EAAA,SAAa,EAAA,SAAiB,EAAA,SAAA,GAAA,EADtC,EAKE,OAAA;;MAHA,OAAK,EAAA,CAAC,iBAAe,CACZ,EAAA,OAAU,EAAA,yBAA6B,EAAA,OAAkB,CAAA,CAAA,CAAA;MAClE,eAAY;;KAIH,GAAA,SAAA,GAAA,EAAX,EASM,OATN,IASM,CAAA,OAPW,EAAA,OAAY,SAAK,YAAA,GAAA,EADhC,EAME,OAAA;;MAJC,KAAK,EAAA,MAAW;MACjB,OAAM;MACN,KAAI;MACJ,eAAY;wBAEd,EAA4B,EAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;KAI9B,EA+BM,OA/BN,IA+BM,CA9BJ,EAEK,MAFL,IAEK,EADA,EAAA,OAAY,MAAK,EAAA,EAAA,EAKd,GAAA,SAAA,GAAA,EADR,EAwBS,UAAA;;MAtBP,MAAK;MACL,OAAM;MACN,cAAW;MACV,SAAO;SAGmB,EAAA,cAAS,MAA+B,EAAA,OAAY,cAAS,MAA+B,EAAA,OAAY,cAAc,KAAA,KAAA,GAAA,EADjJ,EAeM,OAfN,IAeM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEE,QAAA,EADA,GAAE,yGAAuG,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,KAAA,GAAA,EAG7G,EAAyE,QAAA,IAAA,EAAA,OAAlD,EAAA,aAAS,WAAgB,EAAA,YAAS,IAAA,EAAA,EAAA,EAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;KAKlD,EAAA,OAAY,eAAA,GAAA,EAAvB,EAEM,OAFN,IAEM,EADD,EAAA,MAAW,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAI3B,EAmDM,OAnDN,IAmDM,CAjDJ,EAWM,OAXN,IAWM,CAVJ,EASO,EAAA,QAAA,oBAAA;MATwB,SAAS,EAAA;MAAc,OAAO,EAAA;cAStD,EAAA,EAAA,GAAA,EARL,EAOE,GAAA,MAAA,GANiB,EAAA,QAAT,GAAG,YADb,EAOE,QAAA;MALC,KAAK;MACN,OAAK,EAAA,CAAC,qBAAmB,EAAA,6BACc,MAAM,EAAA,OAAW,CAAA,CAAA;MACxD,MAAK;MACJ,gBAAc,MAAM,EAAA,QAAW,SAAY,KAAA;oCAMlD,EAkCM,OAlCN,IAkCM,CA/BI,EAAA,QAAW,KAAA,GAAA,EADnB,EAaS,UAbT,EAaS;;MAXP,MAAK;MACL,OAAM;QACE,EAAc,EAAA,OAAY,gBAAe,EAAA,EAChD,SAAK,AAAA,EAAA,aAAA;AAA+G,MAA9D,EAAA,OAAY,iBAAiB,WAAO,EAA0B,GAAM;aAOxH,EAAA,OAAY,iBAAiB,YAAQ,WAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,EAI1C,EAeS,UAfT,EAeS;MAdP,MAAK;MACL,OAAM;QACE,EAAc,EAAA,OAAY,gBAAe,EAAA,EAChD,SAAK,AAAA,EAAA,aAAA;AAA+G,MAA9D,EAAA,OAAY,iBAAiB,WAAO,EAA0B,GAAM;aAQzH,EAAA,OAAY,iBAAiB,aAA+B,EAAA,SAAe,EAAA,QAAU,IAAA,WAAA,QAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/design-system25.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system25.js","names":[],"sources":["../src/components/BIcon/BIcon.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useCssVars as _useCssVars, unref as _unref, defineComponent as _defineComponent } from 'vue'\nimport { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = [\"aria-hidden\", \"aria-label\", \"aria-labelledby\", \"innerHTML\"]\n\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BIcon',\n  props: {\n    icon: {},\n    variant: { default: () => (BIconVariant.Regular) },\n    size: { default: () => (BIconSize.Medium) },\n    color: { default: 'currentColor' },\n    width: {},\n    height: {},\n    decorative: { type: Boolean, default: true },\n    ariaLabel: {},\n    ariaLabelledby: {},\n    rotate: { default: 0 },\n    brand: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n_useCssVars(_ctx => ({\n  \"v46b8c47b\": (svgStyle.value.width),\n  \"v7690d112\": (svgStyle.value.height),\n  \"v3d749fa1\": (svgStyle.value.transform),\n  \"v75dd342e\": (svgStyle.value.fill)\n}))\n\n\n\nconst ICONS_BASE_URL = import.meta.env.DEV\n  ? '/src/assets/icons'\n  : `/node_modules/${__PACKAGE_NAME__}/dist/assets/icons`;\n\nconst svgStyle = computed(() => ({\n  width: __props.width || `${BIconSizeMap[__props.size]}rem`,\n  height: __props.height || `${BIconSizeMap[__props.size]}rem`,\n  transform: `rotate(${__props.rotate}deg)`,\n  fill: ['currentColor', ...Object.values(BCommonColor)].includes(__props.color) ? undefined : __props.color,\n}));\n\nconst iconFolder = computed(() => (__props.brand ? 'brands' : __props.variant));\n\n/**\n * SVG markup fetched at runtime from the static assets folder.\n * No dynamic import() - icons are NOT bundled as JS chunks.\n * They are served as plain .svg files copied to dist/assets/icons by viteStaticCopy.\n */\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n  svgMarkup.value = '';\n  const url = `${ICONS_BASE_URL}/${iconFolder.value}/${__props.icon}.svg`;\n  try {\n    const res = await fetch(url);\n    if (!res.ok) {\n      console.warn(`[BIcon] Could not load icon '${__props.icon}' from '${url}' (HTTP ${res.status})`);\n      return;\n    }\n    svgMarkup.value = await res.text();\n  } catch {\n    console.warn(`[BIcon] Could not load icon '${__props.icon}' from '${url}'`);\n  }\n};\n\nwatch(() => [__props.icon, iconFolder.value], loadIcon, { immediate: true });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"span\", {\n    class: _normalizeClass([\"b-icon\", [\n      {\n        'b:fill-current': __props.color === 'currentColor',\n        'b:fill-primary': __props.color === 'primary',\n        'b:fill-secondary': __props.color === 'secondary',\n        'b:fill-success': __props.color === 'success',\n        'b:fill-failure': __props.color === 'failure',\n        'b:fill-warning': __props.color === 'warning',\n        'b:fill-info': __props.color === 'info',\n        'b-icon--color': !!svgStyle.value.fill,\n      },\n    ]]),\n    \"aria-hidden\": !!__props.decorative || undefined,\n    \"aria-label\": __props.ariaLabel,\n    \"aria-labelledby\": __props.ariaLabelledby,\n    innerHTML: svgMarkup.value\n  }, null, 10, _hoisted_1))\n}\n}\n\n})"],"mappings":";;;;AAGA,IAAM,IAAa;CAAC;CAAe;CAAc;CAAmB;CAAY,EAQhF,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,MAAM,EAAE;EACR,SAAS,EAAE,eAAgB,EAAa,SAAU;EAClD,MAAM,EAAE,eAAgB,EAAU,QAAS;EAC3C,OAAO,EAAE,SAAS,gBAAgB;EAClC,OAAO,EAAE;EACT,QAAQ,EAAE;EACV,YAAY;GAAE,MAAM;GAAS,SAAS;GAAM;EAC5C,WAAW,EAAE;EACb,gBAAgB,EAAE;EAClB,QAAQ,EAAE,SAAS,GAAG;EACtB,OAAO;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC;CACD,MAAM,GAAc;AAEtB,KAAY,OAAS;GACnB,WAAc,EAAS,MAAM;GAC7B,WAAc,EAAS,MAAM;GAC7B,WAAc,EAAS,MAAM;GAC7B,WAAc,EAAS,MAAM;GAC9B,EAAE;EAIH,IAIM,IAAW,SAAgB;GAC/B,OAAO,EAAQ,SAAS,GAAG,EAAa,EAAQ,MAAM;GACtD,QAAQ,EAAQ,UAAU,GAAG,EAAa,EAAQ,MAAM;GACxD,WAAW,UAAU,EAAQ,OAAO;GACpC,MAAM,CAAC,gBAAgB,GAAG,OAAO,OAAO,EAAa,CAAC,CAAC,SAAS,EAAQ,MAAM,GAAG,KAAA,IAAY,EAAQ;GACtG,EAAE,EAEG,IAAa,QAAgB,EAAQ,QAAQ,WAAW,EAAQ,QAAS,EAOzE,IAAY,EAAY,GAAG;AAmBjC,SAFA,QAAY,CAAC,EAAQ,MAAM,EAAW,MAAM,EAf3B,YAAY;AAC3B,KAAU,QAAQ;GAClB,IAAM,IAAM,0DAAqB,EAAW,MAAM,GAAG,EAAQ,KAAK;AAClE,OAAI;IACF,IAAM,IAAM,MAAM,MAAM,EAAI;AAC5B,QAAI,CAAC,EAAI,IAAI;AACX,aAAQ,KAAK,gCAAgC,EAAQ,KAAK,UAAU,EAAI,UAAU,EAAI,OAAO,GAAG;AAChG;;AAEF,MAAU,QAAQ,MAAM,EAAI,MAAM;WAC5B;AACN,YAAQ,KAAK,gCAAgC,EAAQ,KAAK,UAAU,EAAI,GAAG;;KAIvB,EAAE,WAAW,IAAM,CAAC,GAEpE,GAAU,OACR,GAAY,EAAE,EAAoB,QAAQ;GAChD,OAAO,EAAgB,CAAC,UAAU,CAChC;IACE,kBAAkB,EAAQ,UAAU;IACpC,kBAAkB,EAAQ,UAAU;IACpC,oBAAoB,EAAQ,UAAU;IACtC,kBAAkB,EAAQ,UAAU;IACpC,kBAAkB,EAAQ,UAAU;IACpC,kBAAkB,EAAQ,UAAU;IACpC,eAAe,EAAQ,UAAU;IACjC,iBAAiB,CAAC,CAAC,EAAS,MAAM;IACnC,CACF,CAAC,CAAC;GACH,eAAe,CAAC,CAAC,EAAQ,cAAc,KAAA;GACvC,cAAc,EAAQ;GACtB,mBAAmB,EAAQ;GAC3B,WAAW,EAAU;GACtB,EAAE,MAAM,IAAI,EAAW;;CAIzB,CAAA"}
+{"version":3,"file":"design-system25.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n  icon,\n  variant = BIconVariant.Regular,\n  size = BIconSize.Medium,\n  decorative = true,\n  rotate = 0,\n  brand = false,\n  color = 'currentColor',\n  width,\n  height,\n} = defineProps<{\n  /**\n   * Icon name, should match the file name in the assets/icons folder\n   * @example 'check', 'cross', 'arrow-right'\n   */\n  icon: `${BIconName}` | `${BIconBrandName}`;\n  /**\n   * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n   * @default 'regular'\n   */\n  variant?: `${BIconVariant}`;\n  /**\n   * Predefined icon sizes\n   * @default 'medium'\n   */\n  size?: `${BIconSize}`;\n  /**\n   * Custom color for the icon, can be a CSS color value or a theme color\n   * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n   */\n  color?: string | 'currentColor' | `${BCommonColor}`;\n  /**\n   * Custom width\n   * @example '2rem', '24px', '1.5em'\n   */\n  width?: string;\n  /**\n   * Custom height\n   * @example '2rem', '24px', '1.5em'\n   */\n  height?: string;\n  /**\n   * Whether icon is decorative (sets aria-hidden)\n   * @default true\n   */\n  decorative?: boolean;\n  /**\n   * Accessible label for meaningful icons\n   */\n  ariaLabel?: string;\n  /**\n   * ID of element that labels this icon\n   */\n  ariaLabelledby?: string;\n  /**\n   * Icon rotation in degrees\n   * @default 0\n   */\n  rotate?: number;\n  /**\n   * Whether the icon is a brand icon\n   */\n  brand?: boolean;\n}>();\n\nconst ICONS_BASE_URL = import.meta.env.DEV\n  ? '/src/assets/icons'\n  : `/node_modules/${__PACKAGE_NAME__}/dist/assets/icons`;\n\nconst svgStyle = computed(() => ({\n  width: width || `${BIconSizeMap[size]}rem`,\n  height: height || `${BIconSizeMap[size]}rem`,\n  transform: `rotate(${rotate}deg)`,\n  fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * SVG markup fetched at runtime from the static assets folder.\n * No dynamic import() - icons are NOT bundled as JS chunks.\n * They are served as plain .svg files copied to dist/assets/icons by viteStaticCopy.\n */\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n  svgMarkup.value = '';\n  const url = `${ICONS_BASE_URL}/${iconFolder.value}/${icon}.svg`;\n  try {\n    const res = await fetch(url);\n    if (!res.ok) {\n      console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n      return;\n    }\n    svgMarkup.value = await res.text();\n  } catch {\n    console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n  }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n  <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n  <span\n    class=\"b-icon\"\n    :class=\"[\n      {\n        'b:fill-current': color === 'currentColor',\n        'b:fill-primary': color === 'primary',\n        'b:fill-secondary': color === 'secondary',\n        'b:fill-success': color === 'success',\n        'b:fill-failure': color === 'failure',\n        'b:fill-warning': color === 'warning',\n        'b:fill-info': color === 'info',\n        'b-icon--color': !!svgStyle.fill,\n      },\n    ]\"\n    :aria-hidden=\"!!decorative || undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-html=\"svgMarkup\"\n  />\n</template>\n\n<style scoped>\n.b-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: v-bind('svgStyle.width');\n  height: v-bind('svgStyle.height');\n  transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n  width: 100%;\n  height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n  fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEA,IAIM,IAAW,SAAgB;GAC/B,OAAO,EAAA,SAAS,GAAG,EAAa,EAAA,MAAM;GACtC,QAAQ,EAAA,UAAU,GAAG,EAAa,EAAA,MAAM;GACxC,WAAW,UAAU,EAAA,OAAO;GAC5B,MAAM,CAAC,gBAAgB,GAAG,OAAO,OAAO,EAAa,CAAC,CAAC,SAAS,EAAA,MAAM,GAAG,KAAA,IAAY,EAAA;GACtF,EAAE,EAEG,IAAa,QAAgB,EAAA,QAAQ,WAAW,EAAA,QAAS,EAOzD,IAAY,EAAY,GAAG;SAiBjC,QAAY,CAAC,EAAA,MAAM,EAAW,MAAM,EAfnB,YAAY;AAC3B,KAAU,QAAQ;GAClB,IAAM,IAAM,0DAAqB,EAAW,MAAM,GAAG,EAAA,KAAK;AAC1D,OAAI;IACF,IAAM,IAAM,MAAM,MAAM,EAAI;AAC5B,QAAI,CAAC,EAAI,IAAI;AACX,aAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,UAAU,EAAI,OAAO,GAAG;AACxF;;AAEF,MAAU,QAAQ,MAAM,EAAI,MAAM;WAC5B;AACN,YAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,GAAG;;KAIvB,EAAE,WAAW,IAAM,CAAC,kBAKlE,EAkBE,QAAA;GAjBA,OAAK,EAAA,CAAC,UAAQ,CAAA;sBAC8B,EAAA,UAAK;sBAA+C,EAAA,UAAK;wBAA4C,EAAA,UAAK;sBAA4C,EAAA,UAAK;sBAA0C,EAAA,UAAK;sBAA0C,EAAA,UAAK;mBAAuC,EAAA,UAAK;uBAAwC,EAAA,MAAS;;GAYjY,eAAW,CAAA,CAAI,EAAA,cAAc,KAAA;GAC7B,cAAY,EAAA;GACZ,mBAAiB,EAAA;GAClB,WAAQ,EAAA"}

package/dist/design-system251.js

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

package/dist/design-system251.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system251.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n  BTourPlacement,\n  BTourType,\n  type BTourArrowOptions,\n  type BTourButtonProps,\n  type BTourGapOptions,\n  type BTourResolvedStep,\n  type BTourScrollIntoViewOptions,\n  type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  steps = [],\n  open = undefined,\n  current = undefined,\n  defaultCurrent = 0,\n  arrow = true,\n  placement = BTourPlacement.Bottom,\n  type = BTourType.Default,\n  mask = true,\n  gap = { offset: 6, radius: 2 },\n  zIndex = 1070,\n  keyboard = true,\n  scrollIntoViewOptions = true,\n  getPopupContainer: _getPopupContainer = undefined,\n  closeIcon = true,\n  disabledInteraction = false,\n} = defineProps<{\n  /** Array of step definition objects. */\n  steps?: BTourStep[];\n  /**\n   * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n   * Omit to use uncontrolled mode.\n   */\n  open?: boolean;\n  /**\n   * Controlled current step index.\n   * Omit to use uncontrolled mode.\n   */\n  current?: number;\n  /** Initial step index in uncontrolled mode. @default 0 */\n  defaultCurrent?: number;\n  /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n  arrow?: boolean | BTourArrowOptions;\n  /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n  placement?: `${BTourPlacement}`;\n  /** Visual type variant. @default 'default' */\n  type?: `${BTourType}`;\n  /**\n   * Mask overlay. `false` disables, `true` uses defaults,\n   * or object `{ color, style }` for custom styling.\n   */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Gap between highlight box and target element. */\n  gap?: BTourGapOptions;\n  /** z-index of the tour popup and mask. @default 1070 */\n  zIndex?: number;\n  /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n  keyboard?: boolean;\n  /** Scroll target into view. Pass options object or `false` to disable. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Container element for the tour popup. Defaults to `document.body`. */\n  getPopupContainer?: () => HTMLElement;\n  /** Custom close icon. `false` hides the close button. */\n  closeIcon?: boolean | string;\n  /** Disable pointer interaction on the highlighted region. @default false */\n  disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the current step changes. */\n  (e: 'change', current: number): void;\n  /** Fired when the tour is closed (X button or Finish). */\n  (e: 'close', current: number): void;\n  /** Fires when open state changes (v-model:open). */\n  (e: 'update:open', value: boolean): void;\n  /** Fires when current step changes (v-model:current). */\n  (e: 'update:current', value: number): void;\n  /** Fired after the tour finishes (last step next). */\n  (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n  /** Custom cover content for the tour step. */\n  cover?(): unknown;\n  /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n  indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n  steps.map((step, index) => {\n    let resolvedTarget: HTMLElement | null = null;\n    if (step.target) {\n      if (typeof step.target === 'string') {\n        resolvedTarget = document.querySelector<HTMLElement>(step.target);\n      } else if (typeof step.target === 'function') {\n        resolvedTarget = step.target();\n      } else {\n        resolvedTarget = step.target;\n      }\n    }\n    return { ...step, resolvedTarget, index };\n  }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n  () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n  () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n    return effectiveMask.value.color;\n  }\n  return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n  const stepClose = activeStep.value?.closeIcon;\n  const val = stepClose !== undefined ? stepClose : closeIcon;\n  return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n  const o = gap?.offset ?? 6;\n  return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n  const step = activeStep.value;\n  if (!step || !isOpen.value) {\n    highlightRect.value = null;\n    popupStyle.value = {};\n    return;\n  }\n\n  const target = step.resolvedTarget;\n  if (!target) {\n    // Center the popup when no target\n    highlightRect.value = null;\n    popupStyle.value = {\n      position: 'fixed',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n    };\n    return;\n  }\n\n  const rect = target.getBoundingClientRect();\n  const [offsetV, offsetH] = gapOffset.value;\n  highlightRect.value = {\n    top: rect.top - offsetV,\n    left: rect.left - offsetH,\n    width: rect.width + offsetH * 2,\n    height: rect.height + offsetV * 2,\n    radius: gapRadius.value,\n  };\n\n  // Position the popup relative to the highlight\n  computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n  const GAP = 12;\n  const eff = effectivePlacement.value;\n  const style: Record<string, string> = { position: 'fixed' };\n  const [offsetV, offsetH] = gapOffset.value;\n\n  const top = rect.top - offsetV;\n  const bottom = rect.bottom + offsetV;\n  const left = rect.left - offsetH;\n  const right = rect.right + offsetH;\n  const midX = rect.left + rect.width / 2;\n  const midY = rect.top + rect.height / 2;\n\n  switch (eff) {\n    case BTourPlacement.Top:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.TopLeft:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.TopRight:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Bottom:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.BottomLeft:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.BottomRight:\n      style.top = `${bottom + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Left:\n      style.top = `${midY}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.LeftTop:\n      style.top = `${top}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.LeftBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.Right:\n      style.top = `${midY}px`;\n      style.left = `${right + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.RightTop:\n      style.top = `${top}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.RightBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.Center:\n      style.top = '50%';\n      style.left = '50%';\n      style.transform = 'translate(-50%, -50%)';\n      break;\n    default:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n  }\n\n  popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n  if (!showArrow.value) return '';\n  const eff = effectivePlacement.value;\n\n  if (\n    [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--top';\n  }\n  if (\n    [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--bottom';\n  }\n  if (\n    [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--left';\n  }\n  if (\n    [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--right';\n  }\n  return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n  emit('close', currentStep.value);\n  if (isControlledOpen.value) {\n    emit('update:open', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction setCurrentStep(step: number) {\n  emit('change', step);\n  if (isControlledCurrent.value) {\n    emit('update:current', step);\n  } else {\n    internalCurrent.value = step;\n  }\n}\n\nfunction goNext() {\n  if (currentStep.value >= totalSteps.value - 1) {\n    emit('finish');\n    doClose();\n    return;\n  }\n  setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n  if (currentStep.value <= 0) return;\n  setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n  const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n  if (opt === false) return;\n  const options: ScrollIntoViewOptions =\n    typeof opt === 'object'\n      ? (opt as ScrollIntoViewOptions)\n      : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n  el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n  nextTick(() => {\n    if (!popupRef.value) return;\n    const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popupRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n  if (e.key !== 'Tab' || !popupRef.value) return;\n  const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    e.preventDefault();\n    return;\n  }\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  if (e.shiftKey && document.activeElement === first) {\n    e.preventDefault();\n    last.focus();\n  } else if (!e.shiftKey && document.activeElement === last) {\n    e.preventDefault();\n    first.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n  if (!keyboard) return;\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    doClose();\n  } else if (e.key === 'ArrowRight') {\n    e.preventDefault();\n    goNext();\n  } else if (e.key === 'ArrowLeft') {\n    e.preventDefault();\n    goPrev();\n  }\n  trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n  targetObserver?.disconnect();\n  if (!el) return;\n  targetObserver = new ResizeObserver(updateHighlight);\n  targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n  if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(onScrollOrResize);\n  resizeObserver.observe(document.documentElement);\n  window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  targetObserver?.disconnect();\n  window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  [isOpen, currentStep],\n  ([open]) => {\n    if (!open) {\n      highlightRect.value = null;\n      popupStyle.value = {};\n      targetObserver?.disconnect();\n      nextTick(() => previouslyFocused?.focus());\n      return;\n    }\n    const step = resolvedSteps.value[currentStep.value];\n    if (step?.resolvedTarget) {\n      scrollIntoView(step.resolvedTarget);\n      observeTarget(step.resolvedTarget);\n    }\n    nextTick(() => {\n      updateHighlight();\n      if (open) {\n        previouslyFocused = document.activeElement as HTMLElement | null;\n        focusFirst();\n      }\n    });\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n  const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n  const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n  return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n    return effectiveMask.value.style;\n  }\n  return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n  if (!props) return {};\n  const { onClick: _onClick, children: _children, ...rest } = props;\n  return rest;\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-tour-fade\">\n      <div\n        v-if=\"isOpen && totalSteps > 0\"\n        class=\"b-tour\"\n        :class=\"[`b-tour--${effectiveType}`]\"\n        :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"activeStep?.title\"\n      >\n        <!-- ── Mask overlay (SVG spotlight) ── -->\n        <svg\n          v-if=\"showMask\"\n          class=\"b-tour__mask\"\n          :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          :viewBox=\"svgViewBox\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <mask :id=\"maskId\">\n              <!-- White = visible (full viewport) -->\n              <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n              <!-- Black = transparent cutout (target spotlight) -->\n              <rect\n                v-if=\"highlightRect\"\n                :x=\"highlightRect.left\"\n                :y=\"highlightRect.top\"\n                :width=\"highlightRect.width\"\n                :height=\"highlightRect.height\"\n                :rx=\"highlightRect.radius\"\n                fill=\"black\"\n              />\n            </mask>\n          </defs>\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n            :mask=\"`url(#${maskId})`\"\n            :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n          />\n        </svg>\n\n        <!-- ── Highlight border around target ── -->\n        <div\n          v-if=\"highlightRect\"\n          class=\"b-tour__spotlight\"\n          :style=\"{\n            top: `${highlightRect.top}px`,\n            left: `${highlightRect.left}px`,\n            width: `${highlightRect.width}px`,\n            height: `${highlightRect.height}px`,\n            borderRadius: `${highlightRect.radius}px`,\n            zIndex: zIndex - 1,\n            pointerEvents: disabledInteraction ? 'none' : 'auto',\n          }\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- ── Popup card ── -->\n        <div\n          ref=\"popupRef\"\n          class=\"b-tour__popup\"\n          :class=\"[\n            `b-tour__popup--${effectivePlacement}`,\n            { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n          ]\"\n          :style=\"[{ zIndex }, popupStyle]\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Arrow -->\n          <div\n            v-if=\"showArrow && highlightRect && arrowClass\"\n            class=\"b-tour__arrow\"\n            :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n            aria-hidden=\"true\"\n          />\n\n          <!-- Cover media -->\n          <div v-if=\"hasCover\" class=\"b-tour__cover\">\n            <img\n              v-if=\"typeof activeStep?.cover === 'string'\"\n              :src=\"activeStep.cover\"\n              class=\"b-tour__cover-img\"\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n            <slot v-else name=\"cover\" />\n          </div>\n\n          <!-- Header -->\n          <div class=\"b-tour__header\">\n            <h4 class=\"b-tour__title\">\n              {{ activeStep?.title }}\n            </h4>\n\n            <!-- Close button -->\n            <button\n              v-if=\"showCloseIcon\"\n              type=\"button\"\n              class=\"b-tour__close\"\n              aria-label=\"Close tour\"\n              @click=\"doClose\"\n            >\n              <svg\n                v-if=\"\n                  closeIcon === true ||\n                  activeStep?.closeIcon === true ||\n                  activeStep?.closeIcon === undefined\n                \"\n                class=\"b-tour__close-icon\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path\n                  d=\"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              </svg>\n              <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n            </button>\n          </div>\n\n          <!-- Description -->\n          <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n            {{ activeStep.description }}\n          </div>\n\n          <!-- Footer -->\n          <div class=\"b-tour__footer\">\n            <!-- Indicators -->\n            <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n              <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n                <span\n                  v-for=\"(_, i) in steps\"\n                  :key=\"i\"\n                  class=\"b-tour__indicator\"\n                  :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n                  role=\"presentation\"\n                  :aria-current=\"i === currentStep ? 'step' : undefined\"\n                />\n              </slot>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"b-tour__actions\">\n              <!-- Prev button -->\n              <button\n                v-if=\"currentStep > 0\"\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--prev\"\n                v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.prevButtonProps?.onClick?.();\n                    goPrev();\n                  }\n                \"\n              >\n                {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n              </button>\n\n              <!-- Next / Finish button -->\n              <button\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--next\"\n                v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.nextButtonProps?.onClick?.();\n                    goNext();\n                  }\n                \"\n              >\n                {{\n                  activeStep?.nextButtonProps?.children ??\n                  (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n                }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   Design tokens - scoped to component root\n   (Never on :root - always on .b-tour)\n   ──────────────────────────────────────────── */\n.b-tour {\n  /* AntD token: zIndexPopup → 1070 */\n  --b-tour-z-index: 1070;\n\n  /* AntD token: closeBtnSize → 22px */\n  --b-tour-close-btn-size: 22px;\n\n  /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n  --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n  /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n  --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n  /* Extended tokens for full component coverage */\n  --b-tour-popup-bg: #fff;\n  --b-tour-popup-color: oklch(25% 0 0);\n  --b-tour-popup-font-size: 0.875rem;\n  --b-tour-popup-line-height: 1.5;\n  --b-tour-popup-border-radius: 0.5rem;\n  --b-tour-popup-max-width: 320px;\n  --b-tour-popup-min-width: 220px;\n  --b-tour-popup-padding: 1rem;\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  --b-tour-title-font-size: 1rem;\n  --b-tour-title-font-weight: 600;\n  --b-tour-title-color: oklch(15% 0 0);\n\n  --b-tour-description-color: oklch(35% 0 0);\n  --b-tour-description-font-size: 0.875rem;\n\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n  --b-tour-arrow-size: 10px;\n  --b-tour-arrow-bg: #fff;\n\n  --b-tour-indicator-size: 6px;\n  --b-tour-indicator-bg: oklch(80% 0 0);\n  --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n  --b-tour-btn-font-size: 0.875rem;\n  --b-tour-btn-border-radius: 0.375rem;\n  --b-tour-btn-padding: 0.25rem 0.75rem;\n\n  --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n  --b-tour-next-btn-color: #fff;\n  --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n  --b-tour-prev-btn-bg: transparent;\n  --b-tour-prev-btn-color: oklch(35% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n  --b-tour-close-color: oklch(55% 0 0);\n  --b-tour-close-hover-color: oklch(25% 0 0);\n\n  --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n  --b-tour-transition-duration: 250ms;\n\n  /* Primary type overrides */\n  --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n  --b-tour-primary-title-color: #fff;\n  --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n  --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n  --b-tour-primary-close-hover-color: #fff;\n  --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n  --b-tour-primary-indicator-active-bg: #fff;\n  --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n  --b-tour-popup-bg: oklch(22% 0 0);\n  --b-tour-popup-color: oklch(90% 0 0);\n  --b-tour-popup-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  --b-tour-title-color: oklch(95% 0 0);\n  --b-tour-description-color: oklch(72% 0 0);\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-tour-arrow-bg: oklch(22% 0 0);\n  --b-tour-indicator-bg: oklch(40% 0 0);\n  --b-tour-prev-btn-color: oklch(85% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n  --b-tour-close-color: oklch(65% 0 0);\n  --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tour {\n    --b-tour-popup-bg: oklch(22% 0 0);\n    --b-tour-popup-color: oklch(90% 0 0);\n    --b-tour-popup-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    --b-tour-title-color: oklch(95% 0 0);\n    --b-tour-description-color: oklch(72% 0 0);\n    --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-tour-arrow-bg: oklch(22% 0 0);\n    --b-tour-indicator-bg: oklch(40% 0 0);\n    --b-tour-prev-btn-color: oklch(85% 0 0);\n    --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n    --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n    --b-tour-close-color: oklch(65% 0 0);\n    --b-tour-close-hover-color: oklch(90% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Tour container (fullscreen overlay wrapper)\n   ───────────────────────────────────────────── */\n.b-tour {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n   Mask (SVG spotlight overlay)\n   ───────────────────────────────────────────── */\n.b-tour__mask {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n   Spotlight border ring\n   ───────────────────────────────────────────── */\n.b-tour__spotlight {\n  position: fixed;\n  box-shadow: 0 0 0 9999px transparent;\n  box-sizing: border-box;\n  pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Popup card\n   ───────────────────────────────────────────── */\n.b-tour__popup {\n  position: fixed;\n  background: var(--b-tour-popup-bg);\n  color: var(--b-tour-popup-color);\n  font-size: var(--b-tour-popup-font-size);\n  line-height: var(--b-tour-popup-line-height);\n  border-radius: var(--b-tour-popup-border-radius);\n  box-shadow: var(--b-tour-popup-shadow);\n  max-width: var(--b-tour-popup-max-width);\n  min-width: var(--b-tour-popup-min-width);\n  width: max-content;\n  box-sizing: border-box;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tour__arrow {\n  position: absolute;\n  width: var(--b-tour-arrow-size);\n  height: var(--b-tour-arrow-size);\n  background: var(--b-tour-arrow-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n  top: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n  bottom: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n  left: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n  right: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n   Cover image\n   ───────────────────────────────────────────── */\n.b-tour__cover {\n  border-radius: var(--b-tour-cover-border-radius);\n  overflow: hidden;\n  margin: 0;\n}\n\n.b-tour__cover-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n   Header (title + close)\n   ───────────────────────────────────────────── */\n.b-tour__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--b-tour-title-font-size);\n  font-weight: var(--b-tour-title-font-weight);\n  color: var(--b-tour-title-color);\n  line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n   Close button\n   ───────────────────────────────────────────── */\n.b-tour__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-tour-close-btn-size);\n  height: var(--b-tour-close-btn-size);\n  padding: 0;\n  margin-top: 0.1em;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-tour-close-color);\n  cursor: pointer;\n  transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n  color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-tour__description {\n  padding: 0.5rem var(--b-tour-popup-padding);\n  font-size: var(--b-tour-description-font-size);\n  color: var(--b-tour-description-color);\n  line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (indicators + actions)\n   ───────────────────────────────────────────── */\n.b-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n  gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n  display: inline-block;\n  width: var(--b-tour-indicator-size);\n  height: var(--b-tour-indicator-size);\n  border-radius: 50%;\n  background: var(--b-tour-indicator-bg);\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n  background: var(--b-tour-indicator-active-bg);\n  width: calc(var(--b-tour-indicator-size) * 2.5);\n  border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tour-btn-padding);\n  border-radius: var(--b-tour-btn-border-radius);\n  font-size: var(--b-tour-btn-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    color var(--b-tour-transition-duration) ease;\n  white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n  background: var(--b-tour-prev-btn-bg);\n  color: var(--b-tour-prev-btn-color);\n  border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n  background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n  background: var(--b-tour-next-btn-bg);\n  color: var(--b-tour-next-btn-color);\n  border: none;\n}\n\n.b-tour__btn--next:hover {\n  background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Primary type variant\n   ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n  background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n  color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n  color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n  color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n  color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n  background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n  background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n  background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n  background: var(--b-tour-primary-prev-btn-bg);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n  background: #fff;\n  color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n  background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Transition\n   ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n  transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n  opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tour-fade-enter-active,\n  .b-tour-fade-leave-active {\n    transition-duration: 0ms;\n  }\n\n  .b-tour__indicator,\n  .b-tour__btn,\n  .b-tour__close {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}