@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system245.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system245.js","names":[],"sources":["../src/components/BUpload/BUpload.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, withModifiers as _withModifiers, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = [\"tabindex\", \"aria-disabled\", \"aria-label\"]\nconst _hoisted_2 = {\n  key: 0,\n  class: \"b-upload__card-trigger\"\n}\nconst _hoisted_3 = {\n  key: 1,\n  class: \"b-upload__default-text\"\n}\nconst _hoisted_4 = [\"accept\", \"multiple\", \"disabled\", \"webkitdirectory\"]\nconst _hoisted_5 = {\n  key: 0,\n  class: \"b-upload__item-thumbnail\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = [\"src\", \"alt\"]\nconst _hoisted_7 = {\n  key: 1,\n  class: \"b-upload__item-file-icon\"\n}\nconst _hoisted_8 = { class: \"b-upload__item-info\" }\nconst _hoisted_9 = [\"title\"]\nconst _hoisted_10 = { class: \"b-upload__item-actions\" }\nconst _hoisted_11 = [\"onClick\"]\nconst _hoisted_12 = [\"onClick\"]\nconst _hoisted_13 = [\"disabled\", \"onClick\"]\nconst _hoisted_14 = [\"aria-valuenow\", \"aria-label\"]\nconst _hoisted_15 = {\n  key: 2,\n  class: \"b-upload__hint\"\n}\n\nimport { ref, computed, watch, onMounted, useAttrs } from 'vue';\nimport { useComponentId } from '@/composables/useComponentId';\nimport {\n  BUploadListType,\n  BUploadFileStatus,\n  type BUploadFile,\n  type BUploadChangeInfo,\n  type BUploadRequestOption,\n  type BUploadShowUploadList,\n} from './types';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  ...{ inheritAttrs: false },\n  __name: 'BUpload',\n  props: /*@__PURE__*/_mergeModels({\n    accept: { default: '' },\n    action: { type: [String, Function], default: '' },\n    multiple: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    directory: { type: Boolean, default: false },\n    maxCount: {},\n    listType: { default: () => (BUploadListType.Text) },\n    method: { default: 'POST' },\n    name: { default: 'file' },\n    headers: {},\n    data: { type: [Object, Function] },\n    withCredentials: { type: Boolean, default: false },\n    openFileDialogOnClick: { type: Boolean, default: true },\n    showUploadList: { type: [Boolean, Object], default: true },\n    defaultFileList: { default: () => ([]) },\n    beforeUpload: { type: Function },\n    customRequest: { type: Function }\n  }, {\n    \"fileList\": { default: undefined },\n    \"fileListModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\", \"remove\", \"preview\", \"download\", \"drop\"], [\"update:fileList\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst attrs = useAttrs();\n\n//#region Props\n\n//#endregion\n\n//#region Model & Events\nconst model = _useModel<BUploadFile[]>(__props, 'fileList');\n\nconst emit = __emit;\n//#endregion\n\n//#region Internal State\nconst { componentUID } = useComponentId();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst dragOver = ref(false);\nconst internalFileList = ref<BUploadFile[]>(Array.isArray(__props.defaultFileList) ? [...__props.defaultFileList] : []);\n\nconst fileList = computed<BUploadFile[]>({\n  get: () => (model.value !== undefined ? model.value : internalFileList.value),\n  set: (val) => {\n    internalFileList.value = val;\n    if (model.value !== undefined) {\n      model.value = val;\n    }\n  },\n});\n\nonMounted(() => {\n  if (model.value === undefined && __props.defaultFileList.length > 0) {\n    internalFileList.value = [...__props.defaultFileList];\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalFileList.value = val;\n    }\n  },\n);\n\nconst isPictureCard = computed(\n  () =>\n    __props.listType === BUploadListType.PictureCard ||\n    __props.listType === BUploadListType.PictureCircle,\n);\n\nconst showListConfig = computed<BUploadShowUploadList | false>(() => {\n  if (__props.showUploadList === false) return false;\n  if (__props.showUploadList === true) {\n    return { showPreviewIcon: true, showRemoveIcon: true, showDownloadIcon: false };\n  }\n  return __props.showUploadList;\n});\n\nconst atMaxCount = computed(() => __props.maxCount !== undefined && __props.maxCount !== 1 && fileList.value.length >= __props.maxCount);\n//#endregion\n\n//#region Upload Logic\nlet fileUidCounter = 0;\n\nfunction genUid(): string {\n  fileUidCounter += 1;\n  return `b-upload-${componentUID.value}-${fileUidCounter}-${Date.now()}`;\n}\n\nfunction fileToUploadFile(file: File): BUploadFile {\n  return {\n    uid: genUid(),\n    name: file.name,\n    size: file.size,\n    type: file.type,\n    status: BUploadFileStatus.Uploading,\n    percent: 0,\n    originFileObj: file,\n  };\n}\n\nfunction triggerChange(file: BUploadFile, newFileList: BUploadFile[], event?: ProgressEvent) {\n  fileList.value = newFileList;\n  emit('change', { file, fileList: newFileList, event });\n}\n\nfunction defaultUpload(options: BUploadRequestOption) {\n  const xhr = new XMLHttpRequest();\n\n  xhr.upload.addEventListener('progress', (e) => {\n    if (e.lengthComputable && options.onProgress) {\n      options.onProgress({ percent: Math.round((e.loaded / e.total) * 100) });\n    }\n  });\n\n  xhr.addEventListener('load', () => {\n    if (xhr.status >= 200 && xhr.status < 300) {\n      options.onSuccess?.(xhr.response);\n    } else {\n      options.onError?.(new Error(`Upload failed with status ${xhr.status}`));\n    }\n  });\n\n  xhr.addEventListener('error', () => {\n    options.onError?.(new Error('Upload network error'));\n  });\n\n  xhr.open(options.method || 'POST', options.action, true);\n\n  if (options.withCredentials) {\n    xhr.withCredentials = true;\n  }\n\n  if (options.headers) {\n    Object.entries(options.headers).forEach(([key, val]) => {\n      xhr.setRequestHeader(key, val);\n    });\n  }\n\n  const formData = new FormData();\n  if (options.data) {\n    Object.entries(options.data).forEach(([key, val]) => {\n      formData.append(key, val as string);\n    });\n  }\n  formData.append(options.filename, options.file);\n\n  xhr.send(formData);\n}\n\nasync function uploadFile(file: File, rawFiles: File[]) {\n  if (__props.beforeUpload) {\n    try {\n      const result = await __props.beforeUpload(file, rawFiles);\n      if (result === false) return;\n      if (result instanceof Blob) {\n        const transformed = result instanceof File ? result : new File([result], file.name, { type: result.type });\n        processUpload(transformed);\n        return;\n      }\n    } catch {\n      return;\n    }\n  }\n  processUpload(file);\n}\n\nfunction processUpload(file: File) {\n  const uploadFile = fileToUploadFile(file);\n  let newList: BUploadFile[];\n\n  if (__props.maxCount === 1) {\n    newList = [uploadFile];\n  } else if (__props.maxCount !== undefined) {\n    newList = [...fileList.value, uploadFile].slice(-__props.maxCount);\n  } else {\n    newList = [...fileList.value, uploadFile];\n  }\n\n  triggerChange(uploadFile, newList);\n\n  const resolvedAction = typeof __props.action === 'function' ? __props.action(file) : Promise.resolve(__props.action);\n\n  resolvedAction.then((url: string) => {\n    const requestFn = __props.customRequest || defaultUpload;\n    const extraData = typeof __props.data === 'function' ? __props.data(uploadFile) : (__props.data || {});\n\n    requestFn({\n      action: url,\n      file,\n      filename: __props.name,\n      headers: __props.headers,\n      data: extraData,\n      withCredentials: __props.withCredentials,\n      method: __props.method,\n      onProgress: (e) => {\n        const updatedFile = { ...uploadFile, percent: e.percent };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onSuccess: (response) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Done,\n          percent: 100,\n          response,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onError: (error) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Error,\n          error,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n    });\n  });\n}\n\nfunction handleFiles(files: FileList | null) {\n  if (!files || files.length === 0) return;\n\n  const rawFiles = Array.from(files);\n  let filesToUpload: File[];\n\n  if (__props.maxCount === 1) {\n    filesToUpload = rawFiles.slice(0, 1);\n  } else if (__props.maxCount !== undefined) {\n    const remaining = __props.maxCount - fileList.value.length;\n    filesToUpload = remaining > 0 ? rawFiles.slice(0, remaining) : [];\n  } else {\n    filesToUpload = rawFiles;\n  }\n\n  filesToUpload.forEach((file) => uploadFile(file, rawFiles));\n}\n//#endregion\n\n//#region Event Handlers\nfunction handleClick() {\n  if (__props.disabled || !__props.openFileDialogOnClick || atMaxCount.value) return;\n  inputRef.value?.click();\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (__props.disabled || atMaxCount.value) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    inputRef.value?.click();\n  }\n}\n\nfunction handleInputChange(event: Event) {\n  const input = event.target as HTMLInputElement;\n  handleFiles(input.files);\n  input.value = '';\n}\n\nfunction handleDragOver(event: DragEvent) {\n  event.preventDefault();\n  if (__props.disabled) return;\n  dragOver.value = true;\n}\n\nfunction handleDragLeave(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n}\n\nfunction handleDrop(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n  if (__props.disabled) return;\n  emit('drop', event);\n  handleFiles(event.dataTransfer?.files ?? null);\n}\n\nfunction handleRemove(file: BUploadFile) {\n  emit('remove', file);\n  const newList = fileList.value.filter((f) => f.uid !== file.uid);\n  triggerChange({ ...file, status: BUploadFileStatus.Removed }, newList);\n}\n\nfunction handlePreview(file: BUploadFile) {\n  emit('preview', file);\n}\n\nfunction handleDownload(file: BUploadFile) {\n  emit('download', file);\n}\n//#endregion\n\n//#region Expose\n__expose({\n  /** Open the native file dialog programmatically. */\n  openFileDialog: () => inputRef.value?.click(),\n});\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass([\"b-upload\", {\n      'b-upload--disabled': __props.disabled,\n      'b-upload--drag-over': dragOver.value,\n      [`b-upload--${__props.listType}`]: true,\n    }])\n  }, [\n    (!isPictureCard.value || !atMaxCount.value)\n      ? (_openBlock(), _createElementBlock(\"div\", {\n          key: 0,\n          class: \"b-upload__trigger\",\n          role: \"button\",\n          tabindex: __props.disabled ? -1 : 0,\n          \"aria-disabled\": __props.disabled || undefined,\n          \"aria-label\": (_unref(attrs)['aria-label'] as string) || 'Upload file',\n          onClick: handleClick,\n          onKeydown: handleKeyDown,\n          onDragover: handleDragOver,\n          onDragleave: handleDragLeave,\n          onDrop: handleDrop\n        }, [\n          _renderSlot(_ctx.$slots, \"default\", {}, () => [\n            (isPictureCard.value)\n              ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, [...(_cache[0] || (_cache[0] = [\n                  _createStaticVNode(\"<span class=\\\"b-upload__plus-icon\\\" aria-hidden=\\\"true\\\" data-v-36315fd9><svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" data-v-36315fd9><line x1=\\\"12\\\" y1=\\\"5\\\" x2=\\\"12\\\" y2=\\\"19\\\" data-v-36315fd9></line><line x1=\\\"5\\\" y1=\\\"12\\\" x2=\\\"19\\\" y2=\\\"12\\\" data-v-36315fd9></line></svg></span><span class=\\\"b-upload__card-text\\\" data-v-36315fd9>Upload</span>\", 2)\n                ]))]))\n              : (_openBlock(), _createElementBlock(\"span\", _hoisted_3, \"Click to Upload\"))\n          ], true)\n        ], 40, _hoisted_1))\n      : _createCommentVNode(\"\", true),\n    _createElementVNode(\"input\", {\n      ref_key: \"inputRef\",\n      ref: inputRef,\n      class: \"b-upload__input\",\n      type: \"file\",\n      accept: __props.accept || undefined,\n      multiple: __props.multiple,\n      disabled: __props.disabled,\n      webkitdirectory: __props.directory || undefined,\n      \"aria-hidden\": \"true\",\n      tabindex: \"-1\",\n      onChange: handleInputChange\n    }, null, 40, _hoisted_4),\n    (showListConfig.value !== false && fileList.value.length > 0)\n      ? (_openBlock(), _createElementBlock(\"div\", {\n          key: 1,\n          class: _normalizeClass([\"b-upload__list\", `b-upload__list--${__props.listType}`]),\n          role: \"list\",\n          \"aria-label\": \"Uploaded files\"\n        }, [\n          (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(fileList.value, (file) => {\n            return (_openBlock(), _createElementBlock(\"div\", {\n              key: file.uid,\n              class: _normalizeClass([\"b-upload__item\", {\n          'b-upload__item--error': file.status === _unref(BUploadFileStatus).Error,\n          'b-upload__item--done': file.status === _unref(BUploadFileStatus).Done,\n          'b-upload__item--uploading': file.status === _unref(BUploadFileStatus).Uploading,\n        }]),\n              role: \"listitem\"\n            }, [\n              (__props.listType !== _unref(BUploadListType).Text)\n                ? (_openBlock(), _createElementBlock(\"span\", _hoisted_5, [\n                    (file.thumbUrl || file.url)\n                      ? (_openBlock(), _createElementBlock(\"img\", {\n                          key: 0,\n                          src: file.thumbUrl || file.url,\n                          alt: file.name,\n                          class: \"b-upload__item-image\"\n                        }, null, 8, _hoisted_6))\n                      : (_openBlock(), _createElementBlock(\"span\", _hoisted_7, [...(_cache[1] || (_cache[1] = [\n                          _createElementVNode(\"svg\", {\n                            viewBox: \"0 0 24 24\",\n                            fill: \"none\",\n                            stroke: \"currentColor\",\n                            \"stroke-width\": \"1.5\"\n                          }, [\n                            _createElementVNode(\"path\", { d: \"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z\" }),\n                            _createElementVNode(\"polyline\", { points: \"14,2 14,8 20,8\" })\n                          ], -1)\n                        ]))]))\n                  ]))\n                : _createCommentVNode(\"\", true),\n              _createElementVNode(\"span\", _hoisted_8, [\n                _createElementVNode(\"span\", {\n                  class: \"b-upload__item-name\",\n                  title: file.name\n                }, _toDisplayString(file.name), 9, _hoisted_9)\n              ]),\n              _createElementVNode(\"span\", _hoisted_10, [\n                (showListConfig.value && showListConfig.value.showPreviewIcon && (file.url || file.thumbUrl))\n                  ? (_openBlock(), _createElementBlock(\"button\", {\n                      key: 0,\n                      class: \"b-upload__action-btn\",\n                      type: \"button\",\n                      \"aria-label\": \"Preview file\",\n                      onClick: _withModifiers(($event: any) => (handlePreview(file)), [\"stop\"])\n                    }, [...(_cache[2] || (_cache[2] = [\n                      _createElementVNode(\"svg\", {\n                        viewBox: \"0 0 24 24\",\n                        fill: \"none\",\n                        stroke: \"currentColor\",\n                        \"stroke-width\": \"2\",\n                        \"aria-hidden\": \"true\"\n                      }, [\n                        _createElementVNode(\"path\", { d: \"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" }),\n                        _createElementVNode(\"circle\", {\n                          cx: \"12\",\n                          cy: \"12\",\n                          r: \"3\"\n                        })\n                      ], -1)\n                    ]))], 8, _hoisted_11))\n                  : _createCommentVNode(\"\", true),\n                (showListConfig.value && showListConfig.value.showDownloadIcon && file.status === _unref(BUploadFileStatus).Done)\n                  ? (_openBlock(), _createElementBlock(\"button\", {\n                      key: 1,\n                      class: \"b-upload__action-btn\",\n                      type: \"button\",\n                      \"aria-label\": \"Download file\",\n                      onClick: _withModifiers(($event: any) => (handleDownload(file)), [\"stop\"])\n                    }, [...(_cache[3] || (_cache[3] = [\n                      _createElementVNode(\"svg\", {\n                        viewBox: \"0 0 24 24\",\n                        fill: \"none\",\n                        stroke: \"currentColor\",\n                        \"stroke-width\": \"2\",\n                        \"aria-hidden\": \"true\"\n                      }, [\n                        _createElementVNode(\"path\", { d: \"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\" }),\n                        _createElementVNode(\"polyline\", { points: \"7,10 12,15 17,10\" }),\n                        _createElementVNode(\"line\", {\n                          x1: \"12\",\n                          y1: \"15\",\n                          x2: \"12\",\n                          y2: \"3\"\n                        })\n                      ], -1)\n                    ]))], 8, _hoisted_12))\n                  : _createCommentVNode(\"\", true),\n                (showListConfig.value && showListConfig.value.showRemoveIcon)\n                  ? (_openBlock(), _createElementBlock(\"button\", {\n                      key: 2,\n                      class: \"b-upload__action-btn b-upload__action-btn--remove\",\n                      type: \"button\",\n                      \"aria-label\": \"Remove file\",\n                      disabled: __props.disabled,\n                      onClick: _withModifiers(($event: any) => (handleRemove(file)), [\"stop\"])\n                    }, [...(_cache[4] || (_cache[4] = [\n                      _createElementVNode(\"svg\", {\n                        viewBox: \"0 0 24 24\",\n                        fill: \"none\",\n                        stroke: \"currentColor\",\n                        \"stroke-width\": \"2\",\n                        \"aria-hidden\": \"true\"\n                      }, [\n                        _createElementVNode(\"line\", {\n                          x1: \"18\",\n                          y1: \"6\",\n                          x2: \"6\",\n                          y2: \"18\"\n                        }),\n                        _createElementVNode(\"line\", {\n                          x1: \"6\",\n                          y1: \"6\",\n                          x2: \"18\",\n                          y2: \"18\"\n                        })\n                      ], -1)\n                    ]))], 8, _hoisted_13))\n                  : _createCommentVNode(\"\", true)\n              ]),\n              (file.status === _unref(BUploadFileStatus).Uploading)\n                ? (_openBlock(), _createElementBlock(\"div\", {\n                    key: 1,\n                    class: \"b-upload__progress\",\n                    role: \"progressbar\",\n                    \"aria-valuenow\": file.percent ?? 0,\n                    \"aria-valuemin\": \"0\",\n                    \"aria-valuemax\": \"100\",\n                    \"aria-label\": `Uploading ${file.name}`\n                  }, [\n                    _createElementVNode(\"div\", {\n                      class: \"b-upload__progress-bar\",\n                      style: _normalizeStyle({ width: `${file.percent ?? 0}%` })\n                    }, null, 4)\n                  ], 8, _hoisted_14))\n                : _createCommentVNode(\"\", true)\n            ], 2))\n          }), 128))\n        ], 2))\n      : _createCommentVNode(\"\", true),\n    (_ctx.$slots.hint)\n      ? (_openBlock(), _createElementBlock(\"div\", _hoisted_15, [\n          _renderSlot(_ctx.$slots, \"hint\", {}, undefined, true)\n        ]))\n      : _createCommentVNode(\"\", true)\n  ], 2))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system245.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":"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"}

package/dist/design-system247.js

@@ -1,9 +1,8 @@
-import e from "./design-system14.js";
-import t from "./design-system245.js";
+import e from "./design-system245.js";
 /* empty css                 */
-//#region src/components/BUpload/BUpload.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-36315fd9"]]);
+//#region src/components/BTooltip/BTooltip.vue
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };
 
 //# sourceMappingURL=design-system247.js.map

package/dist/design-system247.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system247.js","names":[],"sources":["../src/components/BUpload/BUpload.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch, onMounted, useAttrs } from 'vue';\nimport { useComponentId } from '@/composables/useComponentId';\nimport {\n  BUploadListType,\n  BUploadFileStatus,\n  type BUploadFile,\n  type BUploadChangeInfo,\n  type BUploadRequestOption,\n  type BUploadShowUploadList,\n} from './types';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  accept = '',\n  action = '',\n  multiple = false,\n  disabled = false,\n  directory = false,\n  maxCount,\n  listType = BUploadListType.Text,\n  method = 'POST',\n  name: fieldName = 'file',\n  headers,\n  data,\n  withCredentials = false,\n  openFileDialogOnClick = true,\n  showUploadList = true,\n  defaultFileList = [],\n  beforeUpload,\n  customRequest,\n} = defineProps<{\n  /** File types that can be accepted (MIME types or extensions). */\n  accept?: string;\n  /** Uploading URL. */\n  action?: string | ((file: File) => Promise<string>);\n  /** Whether to support multiple file selection. */\n  multiple?: boolean;\n  /** Whether to disable the upload button. */\n  disabled?: boolean;\n  /** Support uploading directories. */\n  directory?: boolean;\n  /** Limit the number of uploaded files. */\n  maxCount?: number;\n  /** Built-in style of the upload list. */\n  listType?: BUploadListType | `${BUploadListType}`;\n  /** HTTP method for upload request. */\n  method?: string;\n  /** The name of the file field in the upload request. */\n  name?: string;\n  /** Custom request headers for upload. */\n  headers?: Record<string, string>;\n  /** Extra data to include with the upload request. */\n  data?: Record<string, unknown> | ((file: BUploadFile) => Record<string, unknown>);\n  /** Whether to send cookies with the request. */\n  withCredentials?: boolean;\n  /** Whether clicking the component opens the file dialog. */\n  openFileDialogOnClick?: boolean;\n  /** Whether to show the upload list. */\n  showUploadList?: boolean | BUploadShowUploadList;\n  /** Initial file list for uncontrolled usage. */\n  defaultFileList?: BUploadFile[];\n  /** Hook before uploading. Return false or a rejected Promise to stop. */\n  beforeUpload?: (file: File, fileList: File[]) => boolean | Promise<File | Blob | boolean | void>;\n  /** Override the default upload behavior. */\n  customRequest?: (options: BUploadRequestOption) => void;\n}>();\n//#endregion\n\n//#region Model & Events\nconst model = defineModel<BUploadFile[]>('fileList', { default: undefined });\n\nconst emit = defineEmits<{\n  change: [info: BUploadChangeInfo];\n  remove: [file: BUploadFile];\n  preview: [file: BUploadFile];\n  download: [file: BUploadFile];\n  drop: [event: DragEvent];\n}>();\n//#endregion\n\n//#region Internal State\nconst { componentUID } = useComponentId();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst dragOver = ref(false);\nconst internalFileList = ref<BUploadFile[]>(Array.isArray(defaultFileList) ? [...defaultFileList] : []);\n\nconst fileList = computed<BUploadFile[]>({\n  get: () => (model.value !== undefined ? model.value : internalFileList.value),\n  set: (val) => {\n    internalFileList.value = val;\n    if (model.value !== undefined) {\n      model.value = val;\n    }\n  },\n});\n\nonMounted(() => {\n  if (model.value === undefined && defaultFileList.length > 0) {\n    internalFileList.value = [...defaultFileList];\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalFileList.value = val;\n    }\n  },\n);\n\nconst isPictureCard = computed(\n  () =>\n    listType === BUploadListType.PictureCard ||\n    listType === BUploadListType.PictureCircle,\n);\n\nconst showListConfig = computed<BUploadShowUploadList | false>(() => {\n  if (showUploadList === false) return false;\n  if (showUploadList === true) {\n    return { showPreviewIcon: true, showRemoveIcon: true, showDownloadIcon: false };\n  }\n  return showUploadList;\n});\n\nconst atMaxCount = computed(() => maxCount !== undefined && maxCount !== 1 && fileList.value.length >= maxCount);\n//#endregion\n\n//#region Upload Logic\nlet fileUidCounter = 0;\n\nfunction genUid(): string {\n  fileUidCounter += 1;\n  return `b-upload-${componentUID.value}-${fileUidCounter}-${Date.now()}`;\n}\n\nfunction fileToUploadFile(file: File): BUploadFile {\n  return {\n    uid: genUid(),\n    name: file.name,\n    size: file.size,\n    type: file.type,\n    status: BUploadFileStatus.Uploading,\n    percent: 0,\n    originFileObj: file,\n  };\n}\n\nfunction triggerChange(file: BUploadFile, newFileList: BUploadFile[], event?: ProgressEvent) {\n  fileList.value = newFileList;\n  emit('change', { file, fileList: newFileList, event });\n}\n\nfunction defaultUpload(options: BUploadRequestOption) {\n  const xhr = new XMLHttpRequest();\n\n  xhr.upload.addEventListener('progress', (e) => {\n    if (e.lengthComputable && options.onProgress) {\n      options.onProgress({ percent: Math.round((e.loaded / e.total) * 100) });\n    }\n  });\n\n  xhr.addEventListener('load', () => {\n    if (xhr.status >= 200 && xhr.status < 300) {\n      options.onSuccess?.(xhr.response);\n    } else {\n      options.onError?.(new Error(`Upload failed with status ${xhr.status}`));\n    }\n  });\n\n  xhr.addEventListener('error', () => {\n    options.onError?.(new Error('Upload network error'));\n  });\n\n  xhr.open(options.method || 'POST', options.action, true);\n\n  if (options.withCredentials) {\n    xhr.withCredentials = true;\n  }\n\n  if (options.headers) {\n    Object.entries(options.headers).forEach(([key, val]) => {\n      xhr.setRequestHeader(key, val);\n    });\n  }\n\n  const formData = new FormData();\n  if (options.data) {\n    Object.entries(options.data).forEach(([key, val]) => {\n      formData.append(key, val as string);\n    });\n  }\n  formData.append(options.filename, options.file);\n\n  xhr.send(formData);\n}\n\nasync function uploadFile(file: File, rawFiles: File[]) {\n  if (beforeUpload) {\n    try {\n      const result = await beforeUpload(file, rawFiles);\n      if (result === false) return;\n      if (result instanceof Blob) {\n        const transformed = result instanceof File ? result : new File([result], file.name, { type: result.type });\n        processUpload(transformed);\n        return;\n      }\n    } catch {\n      return;\n    }\n  }\n  processUpload(file);\n}\n\nfunction processUpload(file: File) {\n  const uploadFile = fileToUploadFile(file);\n  let newList: BUploadFile[];\n\n  if (maxCount === 1) {\n    newList = [uploadFile];\n  } else if (maxCount !== undefined) {\n    newList = [...fileList.value, uploadFile].slice(-maxCount);\n  } else {\n    newList = [...fileList.value, uploadFile];\n  }\n\n  triggerChange(uploadFile, newList);\n\n  const resolvedAction = typeof action === 'function' ? action(file) : Promise.resolve(action);\n\n  resolvedAction.then((url: string) => {\n    const requestFn = customRequest || defaultUpload;\n    const extraData = typeof data === 'function' ? data(uploadFile) : (data || {});\n\n    requestFn({\n      action: url,\n      file,\n      filename: fieldName,\n      headers,\n      data: extraData,\n      withCredentials,\n      method,\n      onProgress: (e) => {\n        const updatedFile = { ...uploadFile, percent: e.percent };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onSuccess: (response) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Done,\n          percent: 100,\n          response,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onError: (error) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Error,\n          error,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n    });\n  });\n}\n\nfunction handleFiles(files: FileList | null) {\n  if (!files || files.length === 0) return;\n\n  const rawFiles = Array.from(files);\n  let filesToUpload: File[];\n\n  if (maxCount === 1) {\n    filesToUpload = rawFiles.slice(0, 1);\n  } else if (maxCount !== undefined) {\n    const remaining = maxCount - fileList.value.length;\n    filesToUpload = remaining > 0 ? rawFiles.slice(0, remaining) : [];\n  } else {\n    filesToUpload = rawFiles;\n  }\n\n  filesToUpload.forEach((file) => uploadFile(file, rawFiles));\n}\n//#endregion\n\n//#region Event Handlers\nfunction handleClick() {\n  if (disabled || !openFileDialogOnClick || atMaxCount.value) return;\n  inputRef.value?.click();\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || atMaxCount.value) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    inputRef.value?.click();\n  }\n}\n\nfunction handleInputChange(event: Event) {\n  const input = event.target as HTMLInputElement;\n  handleFiles(input.files);\n  input.value = '';\n}\n\nfunction handleDragOver(event: DragEvent) {\n  event.preventDefault();\n  if (disabled) return;\n  dragOver.value = true;\n}\n\nfunction handleDragLeave(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n}\n\nfunction handleDrop(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n  if (disabled) return;\n  emit('drop', event);\n  handleFiles(event.dataTransfer?.files ?? null);\n}\n\nfunction handleRemove(file: BUploadFile) {\n  emit('remove', file);\n  const newList = fileList.value.filter((f) => f.uid !== file.uid);\n  triggerChange({ ...file, status: BUploadFileStatus.Removed }, newList);\n}\n\nfunction handlePreview(file: BUploadFile) {\n  emit('preview', file);\n}\n\nfunction handleDownload(file: BUploadFile) {\n  emit('download', file);\n}\n//#endregion\n\n//#region Expose\ndefineExpose({\n  /** Open the native file dialog programmatically. */\n  openFileDialog: () => inputRef.value?.click(),\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    class=\"b-upload\"\n    :class=\"{\n      'b-upload--disabled': disabled,\n      'b-upload--drag-over': dragOver,\n      [`b-upload--${listType}`]: true,\n    }\"\n  >\n    <!-- Upload trigger area -->\n    <div\n      v-if=\"!isPictureCard || !atMaxCount\"\n      class=\"b-upload__trigger\"\n      role=\"button\"\n      :tabindex=\"disabled ? -1 : 0\"\n      :aria-disabled=\"disabled || undefined\"\n      :aria-label=\"(attrs['aria-label'] as string) || 'Upload file'\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeyDown\"\n      @dragover=\"handleDragOver\"\n      @dragleave=\"handleDragLeave\"\n      @drop=\"handleDrop\"\n    >\n      <slot>\n        <div v-if=\"isPictureCard\" class=\"b-upload__card-trigger\">\n          <span class=\"b-upload__plus-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </span>\n          <span class=\"b-upload__card-text\">Upload</span>\n        </div>\n        <span v-else class=\"b-upload__default-text\">Click to Upload</span>\n      </slot>\n    </div>\n\n    <!-- Hidden file input -->\n    <input\n      ref=\"inputRef\"\n      class=\"b-upload__input\"\n      type=\"file\"\n      :accept=\"accept || undefined\"\n      :multiple=\"multiple\"\n      :disabled=\"disabled\"\n      :webkitdirectory=\"directory || undefined\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      @change=\"handleInputChange\"\n    />\n\n    <!-- File list -->\n    <div\n      v-if=\"showListConfig !== false && fileList.length > 0\"\n      class=\"b-upload__list\"\n      :class=\"`b-upload__list--${listType}`\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      <div\n        v-for=\"file in fileList\"\n        :key=\"file.uid\"\n        class=\"b-upload__item\"\n        :class=\"{\n          'b-upload__item--error': file.status === BUploadFileStatus.Error,\n          'b-upload__item--done': file.status === BUploadFileStatus.Done,\n          'b-upload__item--uploading': file.status === BUploadFileStatus.Uploading,\n        }\"\n        role=\"listitem\"\n      >\n        <!-- Thumbnail for picture types -->\n        <span\n          v-if=\"listType !== BUploadListType.Text\"\n          class=\"b-upload__item-thumbnail\"\n          aria-hidden=\"true\"\n        >\n          <img\n            v-if=\"file.thumbUrl || file.url\"\n            :src=\"file.thumbUrl || file.url\"\n            :alt=\"file.name\"\n            class=\"b-upload__item-image\"\n          />\n          <span v-else class=\"b-upload__item-file-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z\" />\n              <polyline points=\"14,2 14,8 20,8\" />\n            </svg>\n          </span>\n        </span>\n\n        <!-- File info -->\n        <span class=\"b-upload__item-info\">\n          <span class=\"b-upload__item-name\" :title=\"file.name\">\n            {{ file.name }}\n          </span>\n        </span>\n\n        <!-- Actions -->\n        <span class=\"b-upload__item-actions\">\n          <button\n            v-if=\"showListConfig && showListConfig.showPreviewIcon && (file.url || file.thumbUrl)\"\n            class=\"b-upload__action-btn\"\n            type=\"button\"\n            aria-label=\"Preview file\"\n            @click.stop=\"handlePreview(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n              <circle cx=\"12\" cy=\"12\" r=\"3\" />\n            </svg>\n          </button>\n          <button\n            v-if=\"showListConfig && showListConfig.showDownloadIcon && file.status === BUploadFileStatus.Done\"\n            class=\"b-upload__action-btn\"\n            type=\"button\"\n            aria-label=\"Download file\"\n            @click.stop=\"handleDownload(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\" />\n              <polyline points=\"7,10 12,15 17,10\" />\n              <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" />\n            </svg>\n          </button>\n          <button\n            v-if=\"showListConfig && showListConfig.showRemoveIcon\"\n            class=\"b-upload__action-btn b-upload__action-btn--remove\"\n            type=\"button\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled\"\n            @click.stop=\"handleRemove(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n            </svg>\n          </button>\n        </span>\n\n        <!-- Progress bar -->\n        <div\n          v-if=\"file.status === BUploadFileStatus.Uploading\"\n          class=\"b-upload__progress\"\n          role=\"progressbar\"\n          :aria-valuenow=\"file.percent ?? 0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          :aria-label=\"`Uploading ${file.name}`\"\n        >\n          <div\n            class=\"b-upload__progress-bar\"\n            :style=\"{ width: `${file.percent ?? 0}%` }\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Hint slot -->\n    <div v-if=\"$slots.hint\" class=\"b-upload__hint\">\n      <slot name=\"hint\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-upload {\n  --b-upload-actions-color: rgba(0, 0, 0, 0.45);\n  --b-upload-card-size: 102px;\n  --b-upload-color-primary: #1677ff;\n  --b-upload-color-error: #d32f2f;\n  --b-upload-color-success: #52c41a;\n  --b-upload-color-border: #d9d9d9;\n  --b-upload-color-bg: #fafafa;\n  --b-upload-color-bg-hover: #f0f0f0;\n  --b-upload-color-text: rgba(0, 0, 0, 0.88);\n  --b-upload-color-text-secondary: rgba(0, 0, 0, 0.6);\n  --b-upload-border-radius: 8px;\n  --b-upload-line-height: 1.5715;\n  --b-upload-font-size: 14px;\n  --b-upload-progress-stroke-width: 2px;\n\n  position: relative;\n  font-size: var(--b-upload-font-size);\n  line-height: var(--b-upload-line-height);\n  color: var(--b-upload-color-text);\n}\n\n/* Picture-card/circle layout: root becomes flex container */\n.b-upload--picture-card,\n.b-upload--picture-circle {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Hidden file input */\n.b-upload__input {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/* Trigger */\n.b-upload__trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: var(--b-upload-border-radius);\n}\n\n.b-upload__trigger:focus-visible {\n  outline: 2px solid var(--b-upload-color-primary);\n  outline-offset: 2px;\n}\n\n.b-upload--disabled .b-upload__trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Default text trigger */\n.b-upload__default-text {\n  padding: 4px 15px;\n  border: 1px solid var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  background: #fff;\n  color: var(--b-upload-color-text);\n  transition: border-color 0.2s, color 0.2s;\n}\n\n.b-upload__trigger:hover .b-upload__default-text {\n  color: var(--b-upload-color-primary);\n  border-color: var(--b-upload-color-primary);\n}\n\n/* Picture card trigger */\n.b-upload--picture-card .b-upload__trigger,\n.b-upload--picture-circle .b-upload__trigger {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-upload-card-size);\n  height: var(--b-upload-card-size);\n  border: 1px dashed var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  background: var(--b-upload-color-bg);\n  transition: border-color 0.2s;\n}\n\n.b-upload--picture-circle .b-upload__trigger {\n  border-radius: 50%;\n}\n\n.b-upload--picture-card .b-upload__trigger:hover,\n.b-upload--picture-circle .b-upload__trigger:hover {\n  border-color: var(--b-upload-color-primary);\n}\n\n.b-upload__card-trigger {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: var(--b-upload-color-text-secondary);\n}\n\n.b-upload__plus-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.b-upload__plus-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.b-upload__card-text {\n  font-size: var(--b-upload-font-size);\n}\n\n/* Drag states */\n.b-upload--drag-over .b-upload__trigger {\n  border-color: var(--b-upload-color-primary);\n  background: color-mix(in srgb, var(--b-upload-color-primary) 5%, transparent);\n}\n\n/* File list - text type */\n.b-upload__list {\n  margin-top: 8px;\n}\n\n.b-upload__list--text .b-upload__item,\n.b-upload__list--picture .b-upload__item {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: var(--b-upload-border-radius);\n  transition: background-color 0.2s;\n  position: relative;\n}\n\n.b-upload__list--text .b-upload__item:hover,\n.b-upload__list--picture .b-upload__item:hover {\n  background: var(--b-upload-color-bg);\n}\n\n/* File list - picture-card type */\n.b-upload__list--picture-card,\n.b-upload__list--picture-circle {\n  display: contents;\n}\n\n.b-upload__list--picture-card .b-upload__item,\n.b-upload__list--picture-circle .b-upload__item {\n  position: relative;\n  width: var(--b-upload-card-size);\n  height: var(--b-upload-card-size);\n  border: 1px solid var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.b-upload__list--picture-circle .b-upload__item {\n  border-radius: 50%;\n}\n\n/* Thumbnails */\n.b-upload__item-thumbnail {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n  margin-right: 8px;\n}\n\n.b-upload__list--picture-card .b-upload__item-thumbnail,\n.b-upload__list--picture-circle .b-upload__item-thumbnail {\n  width: 100%;\n  height: 100%;\n  margin-right: 0;\n}\n\n.b-upload__item-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n}\n\n.b-upload__item-file-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--b-upload-color-text-secondary);\n}\n\n.b-upload__item-file-icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* File info */\n.b-upload__item-info {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.b-upload__item-name {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-upload-color-text);\n  transition: color 0.2s;\n}\n\n.b-upload__item--error .b-upload__item-name {\n  color: var(--b-upload-color-error);\n}\n\n/* For card mode, hide file info text */\n.b-upload__list--picture-card .b-upload__item-info,\n.b-upload__list--picture-circle .b-upload__item-info {\n  display: none;\n}\n\n/* Actions */\n.b-upload__item-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\n\n.b-upload__list--picture-card .b-upload__item-actions,\n.b-upload__list--picture-circle .b-upload__item-actions {\n  position: absolute;\n  inset: 0;\n  margin-left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-upload__list--picture-card .b-upload__item:hover .b-upload__item-actions,\n.b-upload__list--picture-circle .b-upload__item:hover .b-upload__item-actions {\n  opacity: 1;\n}\n\n.b-upload__action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--b-upload-actions-color);\n  transition: color 0.2s;\n}\n\n.b-upload__action-btn:hover {\n  color: var(--b-upload-color-primary);\n}\n\n.b-upload__action-btn--remove:hover {\n  color: var(--b-upload-color-error);\n}\n\n.b-upload__action-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.b-upload__action-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.b-upload__list--picture-card .b-upload__action-btn,\n.b-upload__list--picture-circle .b-upload__action-btn {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.b-upload__list--picture-card .b-upload__action-btn svg,\n.b-upload__list--picture-circle .b-upload__action-btn svg {\n  width: 24px;\n  height: 24px;\n}\n\n.b-upload__list--picture-card .b-upload__action-btn:hover,\n.b-upload__list--picture-circle .b-upload__action-btn:hover {\n  color: #fff;\n}\n\n/* Progress bar */\n.b-upload__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--b-upload-progress-stroke-width);\n  background: var(--b-upload-color-bg-hover);\n  overflow: hidden;\n}\n\n.b-upload__progress-bar {\n  height: 100%;\n  background: var(--b-upload-color-primary);\n  transition: width 0.2s;\n}\n\n/* Hint */\n.b-upload__hint {\n  margin-top: 8px;\n  color: var(--b-upload-color-text-secondary);\n  font-size: 12px;\n}\n\n/* Dark mode - explicit */\n[data-prefers-color='dark'] .b-upload {\n  --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n  --b-upload-color-border: #424242;\n  --b-upload-color-bg: #1f1f1f;\n  --b-upload-color-bg-hover: #2f2f2f;\n  --b-upload-color-text: rgba(255, 255, 255, 0.85);\n  --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-upload {\n    --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n    --b-upload-color-border: #424242;\n    --b-upload-color-bg: #1f1f1f;\n    --b-upload-color-bg-hover: #2f2f2f;\n    --b-upload-color-text: rgba(255, 255, 255, 0.85);\n    --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n  }\n}\n\n/* Dark mode - follow system (only when no explicit preference is set) */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-prefers-color]) .b-upload {\n    --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n    --b-upload-color-border: #424242;\n    --b-upload-color-bg: #1f1f1f;\n    --b-upload-color-bg-hover: #2f2f2f;\n    --b-upload-color-text: rgba(255, 255, 255, 0.85);\n    --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-upload__trigger,\n  .b-upload__default-text,\n  .b-upload__item-name,\n  .b-upload__action-btn,\n  .b-upload__progress-bar,\n  .b-upload__item-actions,\n  .b-upload__list--text .b-upload__item,\n  .b-upload__list--picture .b-upload__item {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"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-system238.js → design-system249.js}

@@ -1,4 +1,4 @@
-import { BTourPlacement as e, BTourType as t } from "./design-system237.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-system238.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":"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"}

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":""}