@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system260.js

@@ -1,377 +1,8 @@
-import { useComponentId as e } from "./design-system10.js";
-import { BUploadFileStatus as t, BUploadListType as n } from "./design-system259.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, useModel as x, watch as ee, withModifiers as S } from "vue";
-//#region src/components/BUpload/BUpload.vue?vue&type=script&setup=true&lang.ts
-var C = [
-	"tabindex",
-	"aria-disabled",
-	"aria-label"
-], w = {
-	key: 0,
-	class: "b-upload__card-trigger"
-}, T = {
-	key: 1,
-	class: "b-upload__default-text"
-}, E = [
-	"accept",
-	"multiple",
-	"disabled",
-	"webkitdirectory"
-], te = {
-	key: 0,
-	class: "b-upload__item-thumbnail",
-	"aria-hidden": "true"
-}, ne = ["src", "alt"], re = {
-	key: 1,
-	class: "b-upload__item-file-icon"
-}, D = { class: "b-upload__item-info" }, O = ["title"], k = { class: "b-upload__item-actions" }, A = ["onClick"], j = ["onClick"], M = ["disabled", "onClick"], N = ["aria-valuenow", "aria-label"], P = {
-	key: 2,
-	class: "b-upload__hint"
-}, F = /* @__PURE__ */ l({
-	inheritAttrs: !1,
-	__name: "BUpload",
-	props: /* @__PURE__ */ u({
-		accept: { default: "" },
-		action: {
-			type: [String, Function],
-			default: ""
-		},
-		multiple: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		directory: {
-			type: Boolean,
-			default: !1
-		},
-		maxCount: {},
-		listType: { default: () => n.Text },
-		method: { default: "POST" },
-		name: { default: "file" },
-		headers: {},
-		data: { type: [Object, Function] },
-		withCredentials: {
-			type: Boolean,
-			default: !1
-		},
-		openFileDialogOnClick: {
-			type: Boolean,
-			default: !0
-		},
-		showUploadList: {
-			type: [Boolean, Object],
-			default: !0
-		},
-		defaultFileList: { default: () => [] },
-		beforeUpload: { type: Function },
-		customRequest: { type: Function }
-	}, {
-		fileList: { default: void 0 },
-		fileListModifiers: {}
-	}),
-	emits: /* @__PURE__ */ u([
-		"change",
-		"remove",
-		"preview",
-		"download",
-		"drop"
-	], ["update:fileList"]),
-	setup(l, { expose: u, emit: F }) {
-		let I = b(), L = x(l, "fileList"), R = F, { componentUID: z } = e(), B = h(null), V = h(!1), H = h(Array.isArray(l.defaultFileList) ? [...l.defaultFileList] : []), U = i({
-			get: () => L.value === void 0 ? H.value : L.value,
-			set: (e) => {
-				H.value = e, L.value !== void 0 && (L.value = e);
-			}
-		});
-		p(() => {
-			L.value === void 0 && l.defaultFileList.length > 0 && (H.value = [...l.defaultFileList]);
-		}), ee(() => L.value, (e) => {
-			e !== void 0 && (H.value = e);
-		});
-		let W = i(() => l.listType === n.PictureCard || l.listType === n.PictureCircle), G = i(() => l.showUploadList === !1 ? !1 : l.showUploadList === !0 ? {
-			showPreviewIcon: !0,
-			showRemoveIcon: !0,
-			showDownloadIcon: !1
-		} : l.showUploadList), K = i(() => l.maxCount !== void 0 && l.maxCount !== 1 && U.value.length >= l.maxCount), q = 0;
-		function J() {
-			return q += 1, `b-upload-${z.value}-${q}-${Date.now()}`;
-		}
-		function Y(e) {
-			return {
-				uid: J(),
-				name: e.name,
-				size: e.size,
-				type: e.type,
-				status: t.Uploading,
-				percent: 0,
-				originFileObj: e
-			};
-		}
-		function X(e, t, n) {
-			U.value = t, R("change", {
-				file: e,
-				fileList: t,
-				event: n
-			});
-		}
-		function ie(e) {
-			let t = new XMLHttpRequest();
-			t.upload.addEventListener("progress", (t) => {
-				t.lengthComputable && e.onProgress && e.onProgress({ percent: Math.round(t.loaded / t.total * 100) });
-			}), t.addEventListener("load", () => {
-				t.status >= 200 && t.status < 300 ? e.onSuccess?.(t.response) : e.onError?.(/* @__PURE__ */ Error(`Upload failed with status ${t.status}`));
-			}), t.addEventListener("error", () => {
-				e.onError?.(/* @__PURE__ */ Error("Upload network error"));
-			}), t.open(e.method || "POST", e.action, !0), e.withCredentials && (t.withCredentials = !0), e.headers && Object.entries(e.headers).forEach(([e, n]) => {
-				t.setRequestHeader(e, n);
-			});
-			let n = new FormData();
-			e.data && Object.entries(e.data).forEach(([e, t]) => {
-				n.append(e, t);
-			}), n.append(e.filename, e.file), t.send(n);
-		}
-		async function ae(e, t) {
-			if (l.beforeUpload) try {
-				let n = await l.beforeUpload(e, t);
-				if (n === !1) return;
-				if (n instanceof Blob) {
-					Z(n instanceof File ? n : new File([n], e.name, { type: n.type }));
-					return;
-				}
-			} catch {
-				return;
-			}
-			Z(e);
-		}
-		function Z(e) {
-			let n = Y(e), r;
-			r = l.maxCount === 1 ? [n] : l.maxCount === void 0 ? [...U.value, n] : [...U.value, n].slice(-l.maxCount), X(n, r), (typeof l.action == "function" ? l.action(e) : Promise.resolve(l.action)).then((r) => {
-				let i = l.customRequest || ie, a = typeof l.data == "function" ? l.data(n) : l.data || {};
-				i({
-					action: r,
-					file: e,
-					filename: l.name,
-					headers: l.headers,
-					data: a,
-					withCredentials: l.withCredentials,
-					method: l.method,
-					onProgress: (e) => {
-						let t = {
-							...n,
-							percent: e.percent
-						};
-						X(t, U.value.map((e) => e.uid === n.uid ? t : e));
-					},
-					onSuccess: (e) => {
-						let r = {
-							...n,
-							status: t.Done,
-							percent: 100,
-							response: e
-						};
-						X(r, U.value.map((e) => e.uid === n.uid ? r : e));
-					},
-					onError: (e) => {
-						let r = {
-							...n,
-							status: t.Error,
-							error: e
-						};
-						X(r, U.value.map((e) => e.uid === n.uid ? r : e));
-					}
-				});
-			});
-		}
-		function Q(e) {
-			if (!e || e.length === 0) return;
-			let t = Array.from(e), n;
-			if (l.maxCount === 1) n = t.slice(0, 1);
-			else if (l.maxCount !== void 0) {
-				let e = l.maxCount - U.value.length;
-				n = e > 0 ? t.slice(0, e) : [];
-			} else n = t;
-			n.forEach((e) => ae(e, t));
-		}
-		function oe() {
-			l.disabled || !l.openFileDialogOnClick || K.value || B.value?.click();
-		}
-		function $(e) {
-			l.disabled || K.value || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), B.value?.click());
-		}
-		function se(e) {
-			let t = e.target;
-			Q(t.files), t.value = "";
-		}
-		function ce(e) {
-			e.preventDefault(), !l.disabled && (V.value = !0);
-		}
-		function le(e) {
-			e.preventDefault(), V.value = !1;
-		}
-		function ue(e) {
-			e.preventDefault(), V.value = !1, !l.disabled && (R("drop", e), Q(e.dataTransfer?.files ?? null));
-		}
-		function de(e) {
-			R("remove", e);
-			let n = U.value.filter((t) => t.uid !== e.uid);
-			X({
-				...e,
-				status: t.Removed
-			}, n);
-		}
-		function fe(e) {
-			R("preview", e);
-		}
-		function pe(e) {
-			R("download", e);
-		}
-		return u({ openFileDialog: () => B.value?.click() }), (e, i) => (m(), o("div", { class: d(["b-upload", {
-			"b-upload--disabled": l.disabled,
-			"b-upload--drag-over": V.value,
-			[`b-upload--${l.listType}`]: !0
-		}]) }, [
-			!W.value || !K.value ? (m(), o("div", {
-				key: 0,
-				class: "b-upload__trigger",
-				role: "button",
-				tabindex: l.disabled ? -1 : 0,
-				"aria-disabled": l.disabled || void 0,
-				"aria-label": y(I)["aria-label"] || "Upload file",
-				onClick: oe,
-				onKeydown: $,
-				onDragover: ce,
-				onDragleave: le,
-				onDrop: ue
-			}, [_(e.$slots, "default", {}, () => [W.value ? (m(), o("div", w, [...i[0] ||= [c("<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)]])) : (m(), o("span", T, "Click to Upload"))], !0)], 40, C)) : a("", !0),
-			s("input", {
-				ref_key: "inputRef",
-				ref: B,
-				class: "b-upload__input",
-				type: "file",
-				accept: l.accept || void 0,
-				multiple: l.multiple,
-				disabled: l.disabled,
-				webkitdirectory: l.directory || void 0,
-				"aria-hidden": "true",
-				tabindex: "-1",
-				onChange: se
-			}, null, 40, E),
-			G.value !== !1 && U.value.length > 0 ? (m(), o("div", {
-				key: 1,
-				class: d(["b-upload__list", `b-upload__list--${l.listType}`]),
-				role: "list",
-				"aria-label": "Uploaded files"
-			}, [(m(!0), o(r, null, g(U.value, (e) => (m(), o("div", {
-				key: e.uid,
-				class: d(["b-upload__item", {
-					"b-upload__item--error": e.status === y(t).Error,
-					"b-upload__item--done": e.status === y(t).Done,
-					"b-upload__item--uploading": e.status === y(t).Uploading
-				}]),
-				role: "listitem"
-			}, [
-				l.listType === y(n).Text ? a("", !0) : (m(), o("span", te, [e.thumbUrl || e.url ? (m(), o("img", {
-					key: 0,
-					src: e.thumbUrl || e.url,
-					alt: e.name,
-					class: "b-upload__item-image"
-				}, null, 8, ne)) : (m(), o("span", re, [...i[1] ||= [s("svg", {
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "1.5"
-				}, [s("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" }), s("polyline", { points: "14,2 14,8 20,8" })], -1)]]))])),
-				s("span", D, [s("span", {
-					class: "b-upload__item-name",
-					title: e.name
-				}, v(e.name), 9, O)]),
-				s("span", k, [
-					G.value && G.value.showPreviewIcon && (e.url || e.thumbUrl) ? (m(), o("button", {
-						key: 0,
-						class: "b-upload__action-btn",
-						type: "button",
-						"aria-label": "Preview file",
-						onClick: S((t) => fe(e), ["stop"])
-					}, [...i[2] ||= [s("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"aria-hidden": "true"
-					}, [s("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), s("circle", {
-						cx: "12",
-						cy: "12",
-						r: "3"
-					})], -1)]], 8, A)) : a("", !0),
-					G.value && G.value.showDownloadIcon && e.status === y(t).Done ? (m(), o("button", {
-						key: 1,
-						class: "b-upload__action-btn",
-						type: "button",
-						"aria-label": "Download file",
-						onClick: S((t) => pe(e), ["stop"])
-					}, [...i[3] ||= [s("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"aria-hidden": "true"
-					}, [
-						s("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
-						s("polyline", { points: "7,10 12,15 17,10" }),
-						s("line", {
-							x1: "12",
-							y1: "15",
-							x2: "12",
-							y2: "3"
-						})
-					], -1)]], 8, j)) : a("", !0),
-					G.value && G.value.showRemoveIcon ? (m(), o("button", {
-						key: 2,
-						class: "b-upload__action-btn b-upload__action-btn--remove",
-						type: "button",
-						"aria-label": "Remove file",
-						disabled: l.disabled,
-						onClick: S((t) => de(e), ["stop"])
-					}, [...i[4] ||= [s("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"aria-hidden": "true"
-					}, [s("line", {
-						x1: "18",
-						y1: "6",
-						x2: "6",
-						y2: "18"
-					}), s("line", {
-						x1: "6",
-						y1: "6",
-						x2: "18",
-						y2: "18"
-					})], -1)]], 8, M)) : a("", !0)
-				]),
-				e.status === y(t).Uploading ? (m(), o("div", {
-					key: 1,
-					class: "b-upload__progress",
-					role: "progressbar",
-					"aria-valuenow": e.percent ?? 0,
-					"aria-valuemin": "0",
-					"aria-valuemax": "100",
-					"aria-label": `Uploading ${e.name}`
-				}, [s("div", {
-					class: "b-upload__progress-bar",
-					style: f({ width: `${e.percent ?? 0}%` })
-				}, null, 4)], 8, N)) : a("", !0)
-			], 2))), 128))], 2)) : a("", !0),
-			e.$slots.hint ? (m(), o("div", P, [_(e.$slots, "hint", {}, void 0, !0)])) : a("", !0)
-		], 2));
-	}
-});
+import e from "./design-system258.js";
+/* empty css                 */
+//#region src/components/BTimeline/BTimeline.vue
+var t = e;
 //#endregion
-export { F as default };
+export { t as default };
 
 //# sourceMappingURL=design-system260.js.map

package/dist/design-system260.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system260.js","names":["$slots"],"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":"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"}
+{"version":3,"file":"design-system260.js","names":[],"sources":["../src/components/BTimeline/BTimeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide } from 'vue';\n\nimport type {\n  BTimelineItem,\n  BTimelineItemColor,\n  BTimelineItemPlacement,\n  BTimelineMode,\n  BTimelineOrientation,\n  BTimelineVariant,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  mode = 'start',\n  variant = 'filled',\n  orientation = 'vertical',\n  pending = false,\n  pendingDot,\n  reverse = false,\n  items,\n} = defineProps<{\n  /**\n   * Controls which side labels appear on.\n   * - `'start'`     - all content on the right of the line (default)\n   * - `'end'`       - all content on the left of the line\n   * - `'alternate'` - content alternates left/right\n   * @default 'start'\n   */\n  mode?: BTimelineMode;\n  /**\n   * Dot style.\n   * - `'filled'`   - solid filled circle (default)\n   * - `'outlined'` - hollow ring with colored border\n   * @default 'filled'\n   */\n  variant?: BTimelineVariant;\n  /**\n   * Layout direction.\n   * - `'vertical'`   - items stacked top-to-bottom (default)\n   * - `'horizontal'` - items laid out left-to-right\n   * @default 'vertical'\n   */\n  orientation?: BTimelineOrientation;\n  /**\n   * Whether to show a pending (ghost) item at the bottom.\n   * Pass `true` for the default spinner, or a string for custom content.\n   * @default false\n   */\n  pending?: boolean | string;\n  /**\n   * Custom dot for the pending item. Overridden by the `#pendingDot` slot.\n   */\n  pendingDot?: string;\n  /**\n   * Whether to reverse the order of items (newest first).\n   * @default false\n   */\n  reverse?: boolean;\n  /**\n   * Data-driven items. When provided, slot-based BTimelineItem children are\n   * ignored. Use this for simple, data-only timelines.\n   */\n  items?: BTimelineItem[];\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /**\n   * Default slot: place `<BTimelineItem>` children here.\n   * Ignored when `items` prop is provided.\n   */\n  default?(): unknown;\n  /** Custom dot for the pending ghost item. */\n  pendingDot?(): unknown;\n}>();\n\n// Provide mode to slot-based BTimelineItem children\nprovide('b-timeline-mode', mode);\nprovide('b-timeline-variant', variant);\n\n// ─────────────────────────────────────────────\n// Pending item helpers\n// ─────────────────────────────────────────────\nconst hasPending = computed(() => !!pending);\nconst pendingContent = computed(() => (pending !== true && pending ? pending : ''));\n\n// ─────────────────────────────────────────────\n// Reversed items (data-driven)\n// ─────────────────────────────────────────────\nconst orderedItems = computed<BTimelineItem[]>(() => {\n  if (!items) return [];\n  return reverse ? [...items].reverse() : items;\n});\n\n// ─────────────────────────────────────────────\n// CSS-var dot color helper\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: BTimelineItemColor[] = ['blue', 'red', 'green', 'gray'];\n\nfunction isPresetColor(color?: BTimelineItemColor): boolean {\n  return !color || PRESET_COLORS.includes(color as string);\n}\n\nfunction dotColorStyle(color?: BTimelineItemColor): Record<string, string> | undefined {\n  if (!color || isPresetColor(color)) return undefined;\n  return { '--b-timeline-item-dot-color': color };\n}\n\nfunction dotColorClass(color?: BTimelineItemColor): string {\n  const c = color ?? 'blue';\n  return isPresetColor(c) ? `b-timeline-item--${c}` : 'b-timeline-item--custom';\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline',\n  `b-timeline--${mode}`,\n  `b-timeline--${variant}`,\n  `b-timeline--${orientation}`,\n  {\n    'b-timeline--pending': hasPending.value,\n    'b-timeline--reverse': reverse,\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Item position helper\n// ─────────────────────────────────────────────\nfunction itemPositionClass(index: number, placement?: BTimelineItemPlacement): string {\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 (mode === 'alternate') {\n    return index % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return mode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n}\n</script>\n\n<template>\n  <ol :class=\"rootClasses\" aria-label=\"Timeline\">\n    <!-- ── Data-driven items ── -->\n    <template v-if=\"items && items.length\">\n      <li\n        v-for=\"(item, i) in orderedItems\"\n        :key=\"i\"\n        class=\"b-timeline-item\"\n        :class=\"[\n          dotColorClass(item.color),\n          itemPositionClass(i, item.placement),\n          { 'b-timeline-item--pending': item.loading },\n          item.className,\n        ]\"\n        :style=\"[\n          dotColorStyle(item.color),\n          typeof item.style === 'string' ? item.style : item.style,\n        ]\"\n      >\n        <!-- Label / title (opposing side) - always rendered as structural spacer; CSS hides in start mode -->\n        <span class=\"b-timeline-item__label\">{{ item.title ?? '' }}</span>\n\n        <!-- Line + dot -->\n        <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n        <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n          <template v-if=\"item.icon\">\n            <span class=\"b-timeline-item__dot--custom\" :data-icon=\"item.icon\" aria-hidden=\"true\" />\n          </template>\n          <template v-else-if=\"item.loading\">\n            <span class=\"b-timeline-item__dot--pending-spinner\" />\n          </template>\n          <template v-else>\n            <span class=\"b-timeline-item__dot\" />\n          </template>\n        </div>\n\n        <!-- Content -->\n        <div class=\"b-timeline-item__content\">{{ item.content }}</div>\n      </li>\n    </template>\n\n    <!-- ── Slot-based items (default slot children) ── -->\n    <template v-else>\n      <slot />\n    </template>\n\n    <!-- ── Pending ghost item ── -->\n    <li\n      v-if=\"hasPending\"\n      class=\"b-timeline-item b-timeline-item--pending\"\n      :class=\"[itemPositionClass(items ? orderedItems.length : 0)]\"\n      aria-label=\"Pending\"\n    >\n      <!-- Label spacer (structural; hidden in start mode via CSS) -->\n      <span class=\"b-timeline-item__label\" />\n      <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n      <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n        <slot name=\"pendingDot\">\n          <span\n            v-if=\"pendingDot\"\n            class=\"b-timeline-item__dot--custom\"\n            :data-icon=\"pendingDot\"\n            aria-hidden=\"true\"\n          />\n          <span v-else class=\"b-timeline-item__dot--pending-spinner\" aria-hidden=\"true\" />\n        </slot>\n      </div>\n      <div class=\"b-timeline-item__content\">{{ pendingContent }}</div>\n    </li>\n  </ol>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTimeline - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-timeline {\n  /* ── Structural ── */\n  --b-timeline-line-width: 2px;\n  --b-timeline-line-color: oklch(90% 0.005 260);\n  --b-timeline-item-padding-bottom: 20px;\n\n  /* ── Dot ── */\n  --b-timeline-dot-size: 10px;\n  --b-timeline-dot-offset: 0px; /* fine-tune vertical alignment */\n  --b-timeline-dot-border-width: 2px;\n  --b-timeline-custom-dot-font-size: 20px; /* emoji / text custom dots */\n\n  /* ── Blue (default) ── */\n  --b-timeline-color-blue: oklch(54.6% 0.245 262.881);\n  /* ── Green ── */\n  --b-timeline-color-green: oklch(52% 0.17 145);\n  /* ── Red ── */\n  --b-timeline-color-red: oklch(50% 0.2 20);\n  /* ── Gray ── */\n  --b-timeline-color-gray: oklch(68% 0.01 260);\n\n  /* ── Content text ── */\n  --b-timeline-content-color: oklch(32% 0.02 260);\n  --b-timeline-content-font-size: 14px;\n\n  /* ── Label text ── */\n  --b-timeline-label-color: oklch(52% 0.01 260);\n  --b-timeline-label-font-size: 14px;\n\n  /* ── Pending ── */\n  --b-timeline-pending-line-style: dashed;\n  --b-timeline-pending-dot-color: oklch(70% 0.01 260);\n\n  /* ── Spinner ── */\n  --b-timeline-spinner-size: 14px;\n  --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 20%);\n  --b-timeline-spinner-accent-color: oklch(54.6% 0.245 262.881);\n  --b-timeline-spinner-duration: 700ms;\n\n  /* ── Transition ── */\n  --b-timeline-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--b-timeline-content-font-size);\n  line-height: 1.5;\n  color: var(--b-timeline-content-color);\n}\n\n/* ─────────────────────────────────────────────\n   Item\n   ───────────────────────────────────────────── */\n.b-timeline-item {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding-bottom: var(--b-timeline-item-padding-bottom);\n  margin: 0;\n  list-style: none;\n}\n\n/* last item - hide tail, collapse bottom padding */\n.b-timeline-item:last-child {\n  padding-bottom: 0;\n}\n\n.b-timeline-item:last-child .b-timeline-item__tail {\n  display: none;\n}\n\n/* ── Tail (vertical line) ── */\n.b-timeline-item__tail {\n  position: absolute;\n  top: calc(var(--b-timeline-dot-size) + 4px);\n  left: calc(\n    (var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2)\n  ); /* overridden per-mode */\n  height: calc(100% - var(--b-timeline-dot-size) - 4px);\n  width: var(--b-timeline-line-width);\n  background: var(--b-timeline-line-color);\n  transition: background var(--b-timeline-transition-duration);\n}\n\n/* ── Dot wrapper ── */\n.b-timeline-item__dot-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--b-timeline-dot-size);\n  height: var(--b-timeline-dot-size);\n  margin-top: var(--b-timeline-dot-offset);\n  z-index: 1;\n  overflow: visible;\n}\n\n/* ── Standard dot ── */\n.b-timeline-item__dot {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n  box-sizing: border-box;\n}\n\n/* ── Custom dot (icon / text) ── */\n.b-timeline-item__dot--custom {\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-timeline-custom-dot-font-size);\n  line-height: 1;\n  width: var(--b-timeline-custom-dot-font-size);\n  height: var(--b-timeline-custom-dot-font-size);\n  /* shift left/up so the icon stays centred over the dot position */\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n}\n\n/* Symbol rendered via ::before so no text node exists - avoids axe non-text-char rule */\n.b-timeline-item__dot--custom::before {\n  content: attr(data-icon);\n}\n\n/* ─────────────────────────────────────────────\n   Preset colors - set --b-timeline-item-current-color\n   ───────────────────────────────────────────── */\n.b-timeline-item--blue {\n  --b-timeline-item-current-color: var(--b-timeline-color-blue);\n}\n\n.b-timeline-item--green {\n  --b-timeline-item-current-color: var(--b-timeline-color-green);\n}\n\n.b-timeline-item--red {\n  --b-timeline-item-current-color: var(--b-timeline-color-red);\n}\n\n.b-timeline-item--gray {\n  --b-timeline-item-current-color: var(--b-timeline-color-gray);\n}\n\n/* Custom (non-preset) color: provided via inline var */\n.b-timeline-item--custom {\n  --b-timeline-item-current-color: var(--b-timeline-item-dot-color);\n}\n\n/* ─────────────────────────────────────────────\n   Content & Label\n   ───────────────────────────────────────────── */\n.b-timeline-item__content {\n  flex: 1;\n  padding-left: 12px;\n  color: var(--b-timeline-content-color);\n  font-size: var(--b-timeline-content-font-size);\n  word-break: break-word;\n}\n\n.b-timeline-item__label {\n  display: none; /* hidden in start mode; shown in alternate/end */\n  color: var(--b-timeline-label-color);\n  font-size: var(--b-timeline-label-font-size);\n  text-align: right;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: start (default) - content right of line\n   Each item: [dot] [content]\n   ───────────────────────────────────────────── */\n.b-timeline--start .b-timeline-item {\n  flex-direction: row;\n}\n\n.b-timeline--start .b-timeline-item__tail {\n  left: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n}\n\n.b-timeline--start .b-timeline-item__label {\n  display: none;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: end - content left of line\n   Each item: [content] [dot]\n   ───────────────────────────────────────────── */\n.b-timeline--end .b-timeline-item {\n  flex-direction: row-reverse;\n}\n\n.b-timeline--end .b-timeline-item__content {\n  padding-left: 0;\n  padding-right: 12px;\n  text-align: right;\n}\n\n.b-timeline--end .b-timeline-item__tail {\n  right: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n  left: auto;\n}\n\n.b-timeline--end .b-timeline-item__label {\n  display: none;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: alternate\n   Each row is always: [left-half][dot][right-half]\n   Left items  (even): left-half = label (right-aligned)\n                       right-half = content (left-aligned)\n   Right items (odd):  left-half = content (right-aligned)\n                       right-half = label (left-aligned)\n   We use CSS `order` to swap - never flex-direction:row-reverse,\n   which would flip the padding direction and break the gap.\n   ───────────────────────────────────────────── */\n\n/* Label: always rendered as a structural spacer; hidden in start mode */\n.b-timeline--alternate .b-timeline-item__label {\n  display: block;\n  /* Each half = 50% of the row minus half the dot width.\n     box-sizing:border-box means padding is included in this width,\n     so the dot centre lands exactly at 50% of the row. */\n  flex: 0 0 calc(50% - var(--b-timeline-dot-size) / 2);\n  box-sizing: border-box;\n  font-size: var(--b-timeline-label-font-size);\n  color: var(--b-timeline-label-color);\n  word-break: break-word;\n}\n\n/* Content: same symmetric half-width */\n.b-timeline--alternate .b-timeline-item__content {\n  flex: 0 0 calc(50% - var(--b-timeline-dot-size) / 2);\n  box-sizing: border-box;\n}\n\n/* Tail: always at exactly 50% of the row, regardless of which items have labels */\n.b-timeline--alternate .b-timeline-item__tail {\n  left: calc(50% - var(--b-timeline-line-width) / 2);\n  transform: none;\n}\n\n/* ── Left items (even): label LEFT → dot → content RIGHT ── */\n/* DOM order: label(1) tail(abs) dot(2) content(3) - already correct, no reordering needed */\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__label {\n  order: 1;\n  text-align: right;\n  padding-right: 12px;\n  padding-left: 0;\n}\n\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__content {\n  order: 3;\n  text-align: left;\n  padding-left: 12px;\n  padding-right: 0;\n}\n\n/* ── Right items (odd): content LEFT → dot → label RIGHT ── */\n/* Use `order` to pull content before dot, push label after dot */\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__content {\n  order: 1;\n  text-align: right;\n  padding-right: 12px;\n  padding-left: 0;\n}\n\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__label {\n  order: 3;\n  text-align: left;\n  padding-left: 12px;\n  padding-right: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Variant: outlined - hollow ring dot\n   ───────────────────────────────────────────── */\n.b-timeline--outlined .b-timeline-item__dot {\n  background: transparent;\n  border: var(--b-timeline-dot-border-width) solid\n    var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n}\n\n/* ─────────────────────────────────────────────\n   Orientation: horizontal\n   Items laid out left-to-right; tail becomes a\n   horizontal bar running to the right.\n   ───────────────────────────────────────────── */\n.b-timeline--horizontal {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  overflow-x: auto;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item,\n.b-timeline--horizontal.b-timeline--end .b-timeline-item {\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n  padding-bottom: 0;\n  padding-right: 0;\n  min-width: 80px;\n}\n\n/* Horizontal tail: runs right from the dot */\n.b-timeline--horizontal .b-timeline-item__tail {\n  top: calc(var(--b-timeline-dot-size) / 2 - var(--b-timeline-line-width) / 2);\n  left: calc(var(--b-timeline-dot-size) + 4px);\n  width: calc(100% - var(--b-timeline-dot-size) - 4px);\n  height: var(--b-timeline-line-width);\n  right: auto;\n  bottom: auto;\n}\n\n/* In horizontal mode the last item still hides its tail */\n.b-timeline--horizontal .b-timeline-item:last-child .b-timeline-item__tail {\n  display: none;\n}\n\n/* Dot: centred horizontally above content */\n.b-timeline--horizontal .b-timeline-item__dot-wrapper {\n  margin-top: 0;\n  flex-shrink: 0;\n}\n\n/* Content sits below the dot row */\n.b-timeline--horizontal .b-timeline-item__content {\n  padding-left: 0;\n  padding-top: 8px;\n  text-align: center;\n  width: 100%;\n}\n\n/* Label sits above the dot row (for start mode) */\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__label {\n  display: block;\n  text-align: center;\n  padding-bottom: 8px;\n  order: 1;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__content {\n  order: 3;\n}\n\n/* For end mode, label goes below content */\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__content {\n  order: 1;\n  padding-top: 8px;\n  padding-right: 0;\n  text-align: center;\n}\n\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__label {\n  display: block;\n  text-align: center;\n  padding-top: 8px;\n  order: 3;\n}\n\n/* ─────────────────────────────────────────────\n   Pending item\n   ───────────────────────────────────────────── */\n.b-timeline-item--pending .b-timeline-item__tail {\n  border-left: var(--b-timeline-line-width) var(--b-timeline-pending-line-style)\n    var(--b-timeline-line-color);\n  background: transparent;\n}\n\n.b-timeline--start .b-timeline-item--pending .b-timeline-item__tail {\n  /* override the absolute left, matches .b-timeline--start logic */\n  left: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n}\n\n/* Horizontal pending tail */\n.b-timeline--horizontal .b-timeline-item--pending .b-timeline-item__tail {\n  border-left: none;\n  border-top: var(--b-timeline-line-width) var(--b-timeline-pending-line-style)\n    var(--b-timeline-line-color);\n  background: transparent;\n  height: 0;\n}\n\n/* ── Default pending spinner ── */\n.b-timeline-item__dot--pending-spinner {\n  display: block;\n  width: var(--b-timeline-spinner-size);\n  height: var(--b-timeline-spinner-size);\n  margin-left: calc((var(--b-timeline-dot-size) - var(--b-timeline-spinner-size)) / 2);\n  border-radius: 50%;\n  border: var(--b-timeline-dot-border-width) solid var(--b-timeline-spinner-border-color);\n  border-top-color: var(--b-timeline-spinner-accent-color);\n  animation: b-timeline-spin var(--b-timeline-spinner-duration) linear infinite;\n}\n\n@keyframes b-timeline-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-timeline {\n  --b-timeline-line-color: oklch(32% 0.012 260);\n  --b-timeline-content-color: oklch(82% 0.01 260);\n  --b-timeline-label-color: oklch(60% 0.01 260);\n  --b-timeline-color-gray: oklch(50% 0.01 260);\n  --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 15%);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-timeline {\n    --b-timeline-line-color: oklch(32% 0.012 260);\n    --b-timeline-content-color: oklch(82% 0.01 260);\n    --b-timeline-label-color: oklch(60% 0.01 260);\n    --b-timeline-color-gray: oklch(50% 0.01 260);\n    --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 15%);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-timeline {\n    --b-timeline-transition-duration: 0ms;\n    --b-timeline-spinner-duration: 0ms;\n  }\n\n  .b-timeline-item__dot--pending-spinner {\n    animation: none;\n    border-top-color: var(--b-timeline-spinner-border-color);\n    opacity: 0.6;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system261.js

@@ -0,0 +1,57 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, inject as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c } from "vue";
+//#region src/components/BTimeline/BTimelineItem.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "b-timeline-item__label" }, u = {
+	class: "b-timeline-item__dot-wrapper",
+	"aria-hidden": "true"
+}, d = ["data-icon"], f = {
+	key: 1,
+	class: "b-timeline-item__dot--pending-spinner"
+}, p = { class: "b-timeline-item__content" }, m = /* @__PURE__ */ r({
+	__name: "BTimelineItem",
+	props: {
+		color: { default: "blue" },
+		icon: {},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		placement: {}
+	},
+	setup(r) {
+		let m = i("b-timeline-mode", "start"), h = i("b-timeline-item-index", 0), g = i("b-timeline-variant", "filled"), _ = [
+			"blue",
+			"red",
+			"green",
+			"gray"
+		], v = e(() => _.includes(r.color)), y = e(() => v.value ? `b-timeline-item--${r.color}` : "b-timeline-item--custom"), b = e(() => v.value ? void 0 : { "--b-timeline-item-dot-color": r.color }), x = e(() => r.placement ? r.placement === "end" ? "b-timeline-item--right" : "b-timeline-item--left" : m === "alternate" ? h % 2 == 0 ? "b-timeline-item--left" : "b-timeline-item--right" : m === "end" ? "b-timeline-item--right" : "b-timeline-item--left"), S = e(() => [
+			"b-timeline-item",
+			y.value,
+			x.value,
+			{ "b-timeline-item--pending": r.loading }
+		]), C = e(() => g === "outlined" ? "b-timeline-item__dot--outlined" : void 0);
+		return (e, i) => (s(), t("li", {
+			class: a(S.value),
+			style: o(b.value)
+		}, [
+			n("span", l, [c(e.$slots, "label")]),
+			i[0] ||= n("div", {
+				class: "b-timeline-item__tail",
+				"aria-hidden": "true"
+			}, null, -1),
+			n("div", u, [c(e.$slots, "icon", {}, () => [r.icon ? (s(), t("span", {
+				key: 0,
+				class: "b-timeline-item__dot b-timeline-item__dot--custom",
+				"data-icon": r.icon,
+				"aria-hidden": "true"
+			}, null, 8, d)) : r.loading ? (s(), t("span", f)) : (s(), t("span", {
+				key: 2,
+				class: a(["b-timeline-item__dot", C.value])
+			}, null, 2))])]),
+			n("div", p, [c(e.$slots, "default")])
+		], 6));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=design-system261.js.map

package/dist/design-system261.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system261.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":";;;;;;;;;;;;;;;;;;;;EAkDA,IAAM,IAAe,EAAsC,mBAAmB,QAAQ,EAChF,IAAgB,EAAe,yBAAyB,EAAE,EAC1D,IAAkB,EAAyB,sBAAsB,SAAS,EAK1E,IAA0B;GAAC;GAAQ;GAAO;GAAS;GAAO,EAE1D,IAAW,QAAe,EAAc,SAAS,EAAA,MAAM,CAAC,EAExD,IAAa,QACjB,EAAS,QAAQ,oBAAoB,EAAA,UAAU,0BAChD,EAEK,IAAa,QAChB,EAAS,QAAmD,KAAA,IAA3C,EAAE,+BAA+B,EAAA,OAAO,CAC3D,EAKK,IAAgB,QAEhB,EAAA,YACK,EAAA,cAAc,QAAQ,2BAA2B,0BAEtD,MAAiB,cACZ,IAAgB,KAAM,IAAI,0BAA0B,2BAEtD,MAAiB,QAAQ,2BAA2B,wBAC3D,EAKI,IAAc,QAAe;GACjC;GACA,EAAW;GACX,EAAc;GACd,EAAE,4BAA4B,EAAA,SAAS;GACxC,CAAC,EAKI,IAAe,QACnB,MAAoB,aAAa,mCAAmC,KAAA,EACrE;yBAIC,EAgCK,MAAA;GAhCA,OAAK,EAAE,EAAA,MAAW;GAAG,OAAK,EAAE,EAAA,MAAU;;GAEzC,EAEO,QAFP,GAEO,CADL,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;YAIvB,EAAwD,OAAA;IAAnD,OAAM;IAAwB,eAAY;;GAG/C,EAgBM,OAhBN,GAgBM,CAfJ,EAcO,EAAA,QAAA,QAAA,EAAA,QAAA,CAbW,EAAA,QAAA,GAAA,EACd,EAIE,QAAA;;IAHA,OAAM;IACL,aAAW,EAAA;IACZ,eAAY;qBAGK,EAAA,WAAA,GAAA,EACnB,EAAsD,QAAtD,EAAsD,KAAA,GAAA,EAGtD,EAA2D,QAAA;;IAArD,OAAK,EAAA,CAAC,wBAA+B,EAAA,MAAY,CAAA;;GAM7D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/design-system262.js

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