@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system262.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system262.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-system262.js","names":[],"sources":["../src/components/BTimeline/BTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue';\n\nimport type { BTimelineItemColor, BTimelineItemPlacement, BTimelineVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color = 'blue',\n  icon,\n  loading = false,\n  placement,\n} = defineProps<{\n  /**\n   * Dot color - preset (`blue` | `red` | `green` | `gray`) or any CSS color.\n   * @default 'blue'\n   */\n  color?: BTimelineItemColor;\n  /**\n   * Custom dot content string/emoji. Use the `#icon` slot for rich content.\n   */\n  icon?: string;\n  /**\n   * Shows a spinner on this item's dot - use for in-progress items.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Override the parent timeline's mode for this item only.\n   * Pins the item to the `'start'` or `'end'` side regardless of mode.\n   */\n  placement?: BTimelineItemPlacement;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the timeline item. */\n  default?(): unknown;\n  /** Custom dot/icon content - fully replaces the standard circle. */\n  icon?(): unknown;\n  /** Label shown on the opposing side in alternate/end mode. */\n  label?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Context from parent (mode + item index + variant)\n// ─────────────────────────────────────────────\nconst timelineMode = inject<'start' | 'alternate' | 'end'>('b-timeline-mode', 'start');\nconst timelineIndex = inject<number>('b-timeline-item-index', 0);\nconst timelineVariant = inject<BTimelineVariant>('b-timeline-variant', 'filled');\n\n// ─────────────────────────────────────────────\n// Color helpers\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: string[] = ['blue', 'red', 'green', 'gray'];\n\nconst isPreset = computed(() => PRESET_COLORS.includes(color));\n\nconst colorClass = computed(() =>\n  isPreset.value ? `b-timeline-item--${color}` : 'b-timeline-item--custom',\n);\n\nconst colorStyle = computed<Record<string, string> | undefined>(() =>\n  !isPreset.value ? { '--b-timeline-item-dot-color': color } : undefined,\n);\n\n// ─────────────────────────────────────────────\n// Position class\n// ─────────────────────────────────────────────\nconst positionClass = computed(() => {\n  // Per-item placement overrides the global mode\n  if (placement) {\n    return placement === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n  }\n  if (timelineMode === 'alternate') {\n    return timelineIndex % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return timelineMode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n});\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline-item',\n  colorClass.value,\n  positionClass.value,\n  { 'b-timeline-item--pending': loading },\n]);\n\n// ─────────────────────────────────────────────\n// Variant (injected from parent BTimeline)\n// ─────────────────────────────────────────────\nconst variantClass = computed(() =>\n  timelineVariant === 'outlined' ? 'b-timeline-item__dot--outlined' : undefined,\n);\n</script>\n\n<template>\n  <li :class=\"rootClasses\" :style=\"colorStyle\">\n    <!-- Label - always rendered as a structural spacer; CSS hides it in start mode -->\n    <span class=\"b-timeline-item__label\">\n      <slot name=\"label\" />\n    </span>\n\n    <!-- Tail (connecting line) -->\n    <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n\n    <!-- Dot -->\n    <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n      <slot name=\"icon\">\n        <template v-if=\"icon\">\n          <span\n            class=\"b-timeline-item__dot b-timeline-item__dot--custom\"\n            :data-icon=\"icon\"\n            aria-hidden=\"true\"\n          />\n        </template>\n        <template v-else-if=\"loading\">\n          <span class=\"b-timeline-item__dot--pending-spinner\" />\n        </template>\n        <template v-else>\n          <span class=\"b-timeline-item__dot\" :class=\"variantClass\" />\n        </template>\n      </slot>\n    </div>\n\n    <!-- Content -->\n    <div class=\"b-timeline-item__content\">\n      <slot />\n    </div>\n  </li>\n</template>\n"],"mappings":""}

package/dist/design-system263.js

@@ -0,0 +1,173 @@
+import { BTooltipPlacement as e, BTooltipTrigger as t } from "./design-system3.js";
+import { useComponentId as n } from "./design-system10.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, watch as b } from "vue";
+//#region src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-describedby"], S = ["id"], ee = {
+	key: 0,
+	class: "b-tooltip__arrow",
+	"aria-hidden": "true"
+}, C = /* @__PURE__ */ l({
+	__name: "BTooltip",
+	props: {
+		title: {},
+		trigger: { default: () => t.Hover },
+		placement: { default: () => e.TopCenter },
+		arrow: {
+			type: Boolean,
+			default: !0
+		},
+		color: {},
+		mouseEnterDelay: { default: 100 },
+		mouseLeaveDelay: { default: 100 },
+		destroyTooltipOnHide: {
+			type: Boolean,
+			default: !1
+		},
+		zIndex: { default: 1070 },
+		fresh: {
+			type: Boolean,
+			default: !1
+		},
+		autoAdjustOverflow: { type: Boolean },
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		},
+		toggleClass: {},
+		tooltipClass: {},
+		tooltipInnerClass: {}
+	},
+	emits: ["openChange", "update:modelValue"],
+	setup(l, { expose: C, emit: w }) {
+		let T = w, { componentUID: E } = n(), D = y(), O = h(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = h(!1), j = i(() => l.fresh || l.destroyTooltipOnHide ? k.value : A.value || k.value);
+		b(k, (e) => {
+			e && (A.value = !0);
+		});
+		let M = null, N = null;
+		function P() {
+			M &&= (clearTimeout(M), null), N &&= (clearTimeout(N), null);
+		}
+		function F(e = 0) {
+			P(), !k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
+		}
+		function I(e = 0) {
+			P(), k.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
+		}
+		function L() {
+			V.value?.showPopover();
+		}
+		function R() {
+			V.value?.hidePopover();
+		}
+		function z(e) {
+			l.modelValue === void 0 ? O.value = e : T("update:modelValue", e), T("openChange", e);
+		}
+		let B = ({ newState: e }) => {
+			z(e === "open");
+		}, V = h(null), H = h(null);
+		function U() {
+			k.value ? I() : F();
+		}
+		function W() {
+			F(l.mouseEnterDelay);
+		}
+		function G() {
+			I(l.mouseLeaveDelay);
+		}
+		function K() {
+			F();
+		}
+		function q() {
+			I();
+		}
+		function J(e) {
+			e.key === "Escape" && k.value && (e.preventDefault(), I(), H.value?.focus());
+		}
+		function Y() {
+			l.trigger === t.Hover && P();
+		}
+		function X() {
+			l.trigger === t.Hover && I(l.mouseLeaveDelay);
+		}
+		function Z() {
+			let e = H.value;
+			if (e) switch (e.addEventListener("keydown", J), l.trigger) {
+				case t.Click:
+					e.addEventListener("click", U);
+					break;
+				case t.Focus:
+					e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+					break;
+				case t.Hover:
+				default:
+					e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", G), e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+					break;
+			}
+		}
+		function Q() {
+			let e = H.value;
+			e && (e.removeEventListener("keydown", J), e.removeEventListener("click", U), e.removeEventListener("focusin", K), e.removeEventListener("focusout", q), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", G));
+		}
+		p(() => {
+			Z();
+		}), f(() => {
+			Q(), P();
+		}), b(() => l.trigger, () => {
+			Q(), Z();
+		}), b(() => l.modelValue, (e) => {
+			e !== void 0 && (e ? V.value?.showPopover() : V.value?.hidePopover());
+		});
+		let $ = i(() => `--b-tooltip-anchor-${E.value}`), te = i(() => ({
+			[e.TopLeft]: "top-left",
+			[e.TopCenter]: "top-center",
+			[e.TopRight]: "top-right",
+			[e.RightTop]: "right-top",
+			[e.RightCenter]: "right-center",
+			[e.RightBottom]: "right-bottom",
+			[e.BottomRight]: "bottom-right",
+			[e.BottomCenter]: "bottom-center",
+			[e.BottomLeft]: "bottom-left",
+			[e.LeftBottom]: "left-bottom",
+			[e.LeftCenter]: "left-center",
+			[e.LeftTop]: "left-top"
+		})[l.placement] ?? "top-center"), ne = i(() => {
+			if (l.color) return {
+				"--b-tooltip-bg": l.color,
+				"--b-tooltip-arrow-color": l.color
+			};
+		});
+		return C({
+			open: L,
+			close: R
+		}), (e, t) => (m(), o(r, null, [s("div", {
+			ref_key: "toggleRef",
+			ref: H,
+			class: u(["b-tooltip__toggle", l.toggleClass]),
+			style: d({ anchorName: $.value }),
+			"aria-describedby": k.value ? v(D) : void 0
+		}, [g(e.$slots, "default")], 14, x), s("div", {
+			ref_key: "tooltipRef",
+			ref: V,
+			popover: "manual",
+			class: u([
+				"b-tooltip__content",
+				te.value,
+				{ "b-tooltip__content--no-arrow": !l.arrow },
+				l.tooltipClass
+			]),
+			style: d([{
+				zIndex: l.zIndex,
+				positionAnchor: $.value
+			}, ne.value]),
+			role: "tooltip",
+			id: v(D),
+			onToggle: B,
+			onMouseenter: Y,
+			onMouseleave: X
+		}, [j.value || !l.destroyTooltipOnHide ? (m(), o(r, { key: 0 }, [l.arrow ? (m(), o("div", ee)) : a("", !0), s("div", { class: u(["b-tooltip__inner", l.tooltipInnerClass]) }, [g(e.$slots, "title", {}, () => [c(_(l.title), 1)])], 2)], 64)) : a("", !0)], 46, S)], 64));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=design-system263.js.map

package/dist/design-system263.js.map

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

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

package/dist/design-system265.js.map

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

package/dist/design-system266.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system266.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-system249.js → design-system267.js}

@@ -1,4 +1,4 @@
-import { BTourPlacement as e, BTourType as t } from "./design-system248.js";
+import { BTourPlacement as e, BTourType as t } from "./design-system266.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-system249.js.map
+//# sourceMappingURL=design-system267.js.map