@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system201.js

@@ -1,8 +1,335 @@
-import e from "./design-system199.js";
-/* empty css                 */
-//#region src/components/BTabs/BTabs.vue
-var t = e;
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useAttrs as h, useModel as ee, withModifiers as te } from "vue";
+//#region src/components/BSlider/BSlider.vue?vue&type=script&setup=true&lang.ts
+var ne = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-disabled",
+	"aria-orientation",
+	"aria-label"
+], re = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-disabled",
+	"aria-orientation",
+	"aria-label"
+], g = {
+	key: 0,
+	class: "b-slider__marks"
+}, _ = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "BSlider",
+	props: /* @__PURE__ */ o({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		dots: {
+			type: Boolean,
+			default: !1
+		},
+		included: {
+			type: Boolean,
+			default: !0
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		max: { default: 100 },
+		min: { default: 0 },
+		range: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		reverse: {
+			type: Boolean,
+			default: !1
+		},
+		step: { default: 1 },
+		vertical: {
+			type: Boolean,
+			default: !1
+		},
+		tooltip: { default: () => ({}) },
+		marks: {}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ o(["change", "changeComplete"], ["update:modelValue"]),
+	setup(a, { expose: o, emit: _ }) {
+		let v = h(), y = ee(a, "modelValue"), b = _, x = d(null), S = d(null), C = d(null), w = d(!1), T = d(null), E = d({
+			lower: !1,
+			upper: !1
+		}), D = d(null), O = d(0), k = t(() => a.range !== !1), A = t(() => typeof a.range == "object" && a.range.draggableTrack), j = t(() => k.value ? y.value[0] : a.min), M = t(() => k.value ? y.value[1] : y.value);
+		function N(e) {
+			return a.max === a.min ? 0 : (e - a.min) / (a.max - a.min) * 100;
+		}
+		function P(e) {
+			return F(a.min + e / 100 * (a.max - a.min));
+		}
+		function F(e) {
+			if (a.step === null) {
+				if (!a.marks) return I(e);
+				let t = Object.keys(a.marks).map(Number), n = t[0] ?? a.min, r = Math.abs(e - n);
+				for (let i of t) {
+					let t = Math.abs(e - i);
+					t < r && (n = i, r = t);
+				}
+				return I(n);
+			}
+			return I(Math.round((e - a.min) / a.step) * a.step + a.min);
+		}
+		function I(e) {
+			return Math.min(a.max, Math.max(a.min, e));
+		}
+		let L = t(() => N(j.value)), R = t(() => N(M.value)), z = t(() => {
+			let e = k.value ? L.value : 0, t = k.value ? R.value - L.value : R.value;
+			return a.vertical ? a.reverse ? {
+				top: `${100 - e - t}%`,
+				height: `${t}%`
+			} : {
+				bottom: `${100 - e - t}%`,
+				height: `${t}%`
+			} : a.reverse ? {
+				right: `${e}%`,
+				width: `${t}%`
+			} : {
+				left: `${e}%`,
+				width: `${t}%`
+			};
+		}), ie = t(() => {
+			let e = L.value;
+			return a.vertical ? a.reverse ? { top: `${100 - e}%` } : { bottom: `${100 - e}%` } : a.reverse ? { right: `${e}%` } : { left: `${e}%` };
+		}), ae = t(() => {
+			let e = R.value;
+			return a.vertical ? a.reverse ? { top: `${100 - e}%` } : { bottom: `${100 - e}%` } : a.reverse ? { right: `${e}%` } : { left: `${e}%` };
+		}), B = t(() => a.marks ? Object.entries(a.marks).map(([e, t]) => {
+			let n = Number(e);
+			return {
+				value: n,
+				percent: N(n),
+				isActive: a.included && (k.value ? n >= j.value && n <= M.value : n <= M.value),
+				label: typeof t == "string" ? t : t.label,
+				style: typeof t == "object" ? t.style : void 0
+			};
+		}) : []), oe = t(() => {
+			if (!a.dots || a.step === null) return [];
+			let e = [];
+			for (let t = a.min; t <= a.max; t += a.step) {
+				let n = N(t), r = a.included && (k.value ? t >= j.value && t <= M.value : t <= M.value);
+				e.push({
+					value: t,
+					percent: n,
+					isActive: r
+				});
+			}
+			return e;
+		});
+		function V(e) {
+			return a.tooltip.formatter === null ? null : a.tooltip.formatter ? a.tooltip.formatter(e) : String(e);
+		}
+		let H = t(() => V(j.value)), U = t(() => V(M.value)), se = t(() => a.tooltip.formatter === null ? !1 : a.tooltip.open === void 0 ? E.value.lower || C.value === "lower" || C.value === "track" : a.tooltip.open), ce = t(() => a.tooltip.formatter === null ? !1 : a.tooltip.open === void 0 ? E.value.upper || C.value === "upper" || C.value === "track" : a.tooltip.open);
+		function W(e) {
+			if (!x.value) return 0;
+			let t = x.value.getBoundingClientRect(), n, r;
+			if (n = "touches" in e ? a.vertical ? e.touches[0].clientY : e.touches[0].clientX : a.vertical ? e.clientY : e.clientX, a.vertical) {
+				r = t.height;
+				let e = n - t.top;
+				return a.reverse ? e / r * 100 : (r - e) / r * 100;
+			} else {
+				r = t.width;
+				let e = n - t.left;
+				return a.reverse ? (r - e) / r * 100 : e / r * 100;
+			}
+		}
+		function le(e) {
+			if (!k.value) return "upper";
+			let t = Math.abs(e - L.value), n = Math.abs(e - R.value);
+			return t < n ? "lower" : n < t ? "upper" : e < L.value ? "lower" : "upper";
+		}
+		function G(e, t) {
+			if (k.value) {
+				let n = y.value, r;
+				r = e === "lower" ? [Math.min(t, n[1]), n[1]] : [n[0], Math.max(t, n[0])], y.value = r, b("change", r);
+			} else y.value = t, b("change", t);
+		}
+		function ue(e) {
+			if (a.disabled || e.target.closest(".b-slider__handle")) return;
+			let t = W(e), n = P(t), r = le(t);
+			if (A.value && k.value) {
+				let e = L.value, n = R.value;
+				if (t >= e && t <= n) return;
+			}
+			G(r, n), b("changeComplete", (k.value, y.value));
+		}
+		function K(e, t) {
+			a.disabled || (t.preventDefault(), C.value = e, e === "track" && k.value && (D.value = [...y.value], O.value = W(t)), document.addEventListener("mousemove", q), document.addEventListener("mouseup", J), document.addEventListener("touchmove", q), document.addEventListener("touchend", J));
+		}
+		function q(e) {
+			if (!C.value || a.disabled) return;
+			let t = W(e);
+			if (C.value === "track" && D.value) {
+				let e = t - O.value, n = D.value[0], r = D.value[1], i = N(n) + e, o = N(r) + e, s = P(i), c = P(o);
+				s >= a.min && c <= a.max && (y.value = [s, c], b("change", [s, c]));
+				return;
+			}
+			let n = P(t);
+			G(C.value, n);
+		}
+		function J() {
+			C.value && b("changeComplete", (k.value, y.value)), C.value = null, D.value = null, document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J);
+		}
+		function Y(e, t) {
+			if (a.disabled || !a.keyboard) return;
+			let n = a.step ?? 1, r = 0;
+			switch (e.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					r = n;
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					r = -n;
+					break;
+				case "Home":
+					r = a.min - (t === "lower" ? j.value : M.value);
+					break;
+				case "End":
+					r = a.max - (t === "lower" ? j.value : M.value);
+					break;
+				default: return;
+			}
+			e.preventDefault(), G(t, F((t === "lower" ? j.value : M.value) + r)), b("changeComplete", (k.value, y.value));
+		}
+		function X(e) {
+			T.value = e, E.value[e] = !0;
+		}
+		function Z(e) {
+			T.value = null, E.value[e] = !1;
+		}
+		function Q(e) {
+			E.value[e] = !0;
+		}
+		function $(e) {
+			T.value !== e && C.value !== e && (E.value[e] = !1);
+		}
+		function de() {
+			w.value = !0;
+		}
+		function fe() {
+			w.value = !1;
+		}
+		function pe(e) {
+			a.disabled || !A.value || K("track", e);
+		}
+		function me() {
+			(S.value?.querySelector(".b-slider__handle"))?.focus();
+		}
+		function he() {
+			(S.value?.querySelector(".b-slider__handle:focus"))?.blur();
+		}
+		return o({
+			focus: me,
+			blur: he
+		}), l(() => {
+			document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J);
+		}), (t, o) => (u(), r("div", {
+			ref_key: "rootRef",
+			ref: S,
+			class: s(["b-slider", [{
+				"b-slider--vertical": a.vertical,
+				"b-slider--disabled": a.disabled,
+				"b-slider--with-marks": !!a.marks,
+				"b-slider--reverse": a.reverse,
+				"b-slider--hovered": w.value
+			}]]),
+			onMouseenter: de,
+			onMouseleave: fe
+		}, [i("div", {
+			ref_key: "railRef",
+			ref: x,
+			class: "b-slider__rail",
+			onMousedown: ue
+		}, [
+			a.included ? (u(), r("div", {
+				key: 0,
+				class: "b-slider__track",
+				style: c(z.value),
+				onMousedown: te(pe, ["stop"])
+			}, null, 36)) : n("", !0),
+			(u(!0), r(e, null, f(oe.value, (e) => (u(), r("span", {
+				key: `dot-${e.value}`,
+				class: s(["b-slider__dot", { "b-slider__dot--active": e.isActive }]),
+				style: c(a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` })
+			}, null, 6))), 128)),
+			(u(!0), r(e, null, f(B.value, (e) => (u(), r("span", {
+				key: `mark-dot-${e.value}`,
+				class: s(["b-slider__dot", { "b-slider__dot--active": e.isActive }]),
+				style: c(a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` })
+			}, null, 6))), 128)),
+			k.value ? (u(), r("div", {
+				key: 1,
+				class: s(["b-slider__handle", { "b-slider__handle--active": C.value === "lower" || T.value === "lower" }]),
+				style: c(ie.value),
+				role: "slider",
+				tabindex: a.disabled ? -1 : 0,
+				"aria-valuemin": a.min,
+				"aria-valuemax": M.value,
+				"aria-valuenow": j.value,
+				"aria-disabled": a.disabled || void 0,
+				"aria-orientation": a.vertical ? "vertical" : "horizontal",
+				"aria-label": m(v)["aria-label"] ? `${m(v)["aria-label"]} - minimum` : "Minimum",
+				onMousedown: o[0] ||= (e) => K("lower", e),
+				onTouchstart: o[1] ||= (e) => K("lower", e),
+				onKeydown: o[2] ||= (e) => Y(e, "lower"),
+				onFocus: o[3] ||= (e) => X("lower"),
+				onBlur: o[4] ||= (e) => Z("lower"),
+				onMouseenter: o[5] ||= (e) => Q("lower"),
+				onMouseleave: o[6] ||= (e) => $("lower")
+			}, [H.value === null ? n("", !0) : (u(), r("div", {
+				key: 0,
+				class: s(["b-slider__tooltip", { "b-slider__tooltip--visible": se.value }]),
+				role: "tooltip"
+			}, p(H.value), 3))], 46, ne)) : n("", !0),
+			i("div", {
+				class: s(["b-slider__handle", { "b-slider__handle--active": C.value === "upper" || T.value === "upper" }]),
+				style: c(ae.value),
+				role: "slider",
+				tabindex: a.disabled ? -1 : 0,
+				"aria-valuemin": k.value ? j.value : a.min,
+				"aria-valuemax": a.max,
+				"aria-valuenow": M.value,
+				"aria-disabled": a.disabled || void 0,
+				"aria-orientation": a.vertical ? "vertical" : "horizontal",
+				"aria-label": m(v)["aria-label"] || (k.value ? "Maximum" : "Slider"),
+				onMousedown: o[7] ||= (e) => K("upper", e),
+				onTouchstart: o[8] ||= (e) => K("upper", e),
+				onKeydown: o[9] ||= (e) => Y(e, "upper"),
+				onFocus: o[10] ||= (e) => X("upper"),
+				onBlur: o[11] ||= (e) => Z("upper"),
+				onMouseenter: o[12] ||= (e) => Q("upper"),
+				onMouseleave: o[13] ||= (e) => $("upper")
+			}, [U.value === null ? n("", !0) : (u(), r("div", {
+				key: 0,
+				class: s(["b-slider__tooltip", { "b-slider__tooltip--visible": ce.value }]),
+				role: "tooltip"
+			}, p(U.value), 3))], 46, re)
+		], 544), a.marks ? (u(), r("div", g, [(u(!0), r(e, null, f(B.value, (e) => (u(), r("span", {
+			key: `mark-label-${e.value}`,
+			class: s(["b-slider__mark-text", { "b-slider__mark-text--active": e.isActive }]),
+			style: c({
+				...a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` },
+				...e.style
+			})
+		}, p(e.label), 7))), 128))])) : n("", !0)], 34));
+	}
+});
 //#endregion
-export { t as default };
+export { _ as default };
 
 //# sourceMappingURL=design-system201.js.map

package/dist/design-system201.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system201.js","names":[],"sources":["../src/components/BTabs/BTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, VNode } from 'vue';\nimport { computed, defineComponent, h, nextTick, onMounted, provide, ref, useId, watch } from 'vue';\n\nimport type {\n  BTabItem,\n  BTabPaneRegistration,\n  BTabsContext,\n  BTabsPlacement,\n  BTabsSize,\n  BTabsType,\n} from './types';\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  activeKey,\n  defaultActiveKey,\n  items = [],\n  type = 'line',\n  placement = 'top',\n  size = 'middle',\n  centered = false,\n  animated = true,\n  hideAdd = false,\n  destroyOnHidden = false,\n  keepAlive = false,\n  tabBarGutter,\n} = defineProps<{\n  /** Current active tab key (controlled via v-model:activeKey). */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. @default first non-disabled tab */\n  defaultActiveKey?: string;\n  /** Tab items configuration. When provided and non-empty, BTabPane children are ignored. */\n  items?: BTabItem[];\n  /** Visual style of the tabs. @default 'line' */\n  type?: BTabsType;\n  /** Position of the tab bar. @default 'top' */\n  placement?: BTabsPlacement;\n  /** Size preset for the tab bar. @default 'middle' */\n  size?: BTabsSize;\n  /** Whether to center the tab items. @default false */\n  centered?: boolean;\n  /** Whether content switching is animated. @default true */\n  animated?: boolean;\n  /** Whether to hide the add button in editable-card mode. @default false */\n  hideAdd?: boolean;\n  /** Whether to destroy inactive tab content globally. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to keep component state alive when switching tabs globally. @default false */\n  keepAlive?: boolean;\n  /** Gap between tabs in pixels. */\n  tabBarGutter?: number;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the active tab changes. */\n  (e: 'update:activeKey', key: string): void;\n  /** Fires when the active tab changes (alias for update:activeKey). */\n  (e: 'change', key: string): void;\n  /** Fires when a tab is clicked. */\n  (e: 'tabClick', key: string, event: MouseEvent): void;\n  /** Fires when a tab is added or removed (editable-card only). */\n  (e: 'edit', key: string | null, action: 'add' | 'remove'): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Items mode: receives { item } scoped prop. Pane mode: contains BTabPane children (no props). */\n  default?: (props: { item?: BTabItem }) => unknown;\n  /** Custom label renderer for each tab (items mode). */\n  label?: (props: { item: BTabItem; active: boolean }) => unknown;\n  /** Extra content on the left side of the tab bar. */\n  leftExtra?: () => unknown;\n  /** Extra content on the right side of the tab bar. */\n  rightExtra?: () => unknown;\n  /** Custom add button (editable-card type). */\n  addIcon?: () => unknown;\n  /** Custom remove/close icon (editable-card type). */\n  removeIcon?: (props: { item: BTabItem }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Instance-scoped ID prefix (prevents duplicate IDs when multiple BTabs on page)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst tabId = (key: string) => `${uid}-tab-${key}`;\nconst panelId = (key: string) => `${uid}-tabpanel-${key}`;\n\n// ─────────────────────────────────────────────\n// Pane registry (for BTabPane child component API)\n// ─────────────────────────────────────────────\nconst paneRegistry = ref(new Map<string, BTabPaneRegistration>());\nconst paneOrder = ref<string[]>([]);\n\nfunction registerPane(pane: BTabPaneRegistration) {\n  paneRegistry.value.set(pane.key, pane);\n  if (!paneOrder.value.includes(pane.key)) {\n    paneOrder.value = [...paneOrder.value, pane.key];\n  }\n}\n\nfunction unregisterPane(key: string) {\n  paneRegistry.value.delete(key);\n  paneOrder.value = paneOrder.value.filter((k) => k !== key);\n}\n\nfunction updatePane(key: string, pane: BTabPaneRegistration) {\n  paneRegistry.value.set(key, pane);\n}\n\n// ─────────────────────────────────────────────\n// Mode detection + effective items\n// ─────────────────────────────────────────────\nconst isItemsMode = computed(() => items && items.length > 0);\n\nconst effectiveItems = computed<BTabItem[]>(() => {\n  if (isItemsMode.value) return items;\n  return paneOrder.value\n    .map((key) => paneRegistry.value.get(key))\n    .filter((p): p is BTabPaneRegistration => p !== undefined)\n    .map((pane) => ({\n      key: pane.key,\n      label: pane.label,\n      disabled: pane.disabled,\n      closable: pane.closable,\n      destroyOnHidden: pane.destroyOnHidden,\n      forceRender: pane.forceRender,\n      keepAlive: pane.keepAlive,\n    }));\n});\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => activeKey !== undefined);\n\nconst firstEnabledKey = computed(\n  () => effectiveItems.value.find((i) => !i.disabled)?.key ?? effectiveItems.value[0]?.key ?? '',\n);\n\nconst internalKey = ref<string>(activeKey ?? defaultActiveKey ?? firstEnabledKey.value);\n\nwatch(\n  () => activeKey,\n  (val) => {\n    if (val !== undefined) internalKey.value = val;\n  },\n);\n\nwatch(effectiveItems, () => {\n  if (\n    internalKey.value === undefined ||\n    !effectiveItems.value.find((i) => i.key === internalKey.value)\n  ) {\n    internalKey.value = firstEnabledKey.value;\n  }\n});\n\nconst currentKey = computed(() => (isControlled.value ? activeKey! : internalKey.value));\n\n// ─────────────────────────────────────────────\n// Provide context to BTabPane children\n// ─────────────────────────────────────────────\nconst context: BTabsContext = {\n  activeKey: currentKey,\n  type: computed(() => type),\n  size: computed(() => size),\n  placement: computed(() => placement),\n  keepAlive: computed(() => keepAlive),\n  destroyOnHidden: computed(() => destroyOnHidden),\n  register: registerPane,\n  unregister: unregisterPane,\n  update: updatePane,\n};\n\nprovide(BTabsContextKey, context);\n\n// ─────────────────────────────────────────────\n// Tab activation\n// ─────────────────────────────────────────────\nfunction activateTab(key: string, event?: MouseEvent) {\n  const item = effectiveItems.value.find((i) => i.key === key);\n  if (!item || item.disabled) return;\n\n  if (event) {\n    emit('tabClick', key, event);\n  }\n\n  if (key === currentKey.value) return;\n\n  if (!isControlled.value) {\n    internalKey.value = key;\n  }\n  emit('update:activeKey', key);\n  emit('change', key);\n}\n\n// ─────────────────────────────────────────────\n// Editable-card actions\n// ─────────────────────────────────────────────\nfunction onAdd() {\n  emit('edit', null, 'add');\n}\n\nfunction onRemove(key: string, event: MouseEvent) {\n  event.stopPropagation();\n  emit('edit', key, 'remove');\n}\n\n// ─────────────────────────────────────────────\n// Ink bar positioning\n// ─────────────────────────────────────────────\nconst tabListRef = ref<HTMLElement | null>(null);\nconst inkBarStyle = ref<Record<string, string>>({});\n\nfunction updateInkBar() {\n  if (!tabListRef.value || type !== 'line') return;\n  const activeEl = tabListRef.value.querySelector<HTMLElement>('.b-tabs__tab--active');\n  if (!activeEl) return;\n\n  const isVertical = placement === 'left' || placement === 'right';\n\n  if (isVertical) {\n    inkBarStyle.value = {\n      top: `${activeEl.offsetTop}px`,\n      height: `${activeEl.offsetHeight}px`,\n    };\n  } else {\n    inkBarStyle.value = {\n      left: `${activeEl.offsetLeft}px`,\n      width: `${activeEl.offsetWidth}px`,\n    };\n  }\n}\n\nwatch(currentKey, async () => {\n  await nextTick();\n  updateInkBar();\n});\n\nonMounted(() => {\n  updateInkBar();\n});\n\n// ─────────────────────────────────────────────\n// Keyboard navigation (roving tabindex)\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent) {\n  const isVertical = placement === 'left' || placement === 'right';\n  const nextKeys = isVertical ? ['ArrowDown'] : ['ArrowRight'];\n  const prevKeys = isVertical ? ['ArrowUp'] : ['ArrowLeft'];\n\n  // Delete key closes the active tab in editable-card mode\n  if (event.key === 'Delete' && type === 'editable-card') {\n    const item = effectiveItems.value.find((i) => i.key === currentKey.value);\n    if (item && item.closable !== false) {\n      event.preventDefault();\n      emit('edit', currentKey.value, 'remove');\n    }\n    return;\n  }\n\n  if ([...nextKeys, ...prevKeys, 'Home', 'End'].includes(event.key)) {\n    event.preventDefault();\n    const enabledItems = effectiveItems.value.filter((i) => !i.disabled);\n    if (enabledItems.length === 0) return;\n\n    const currentIdx = enabledItems.findIndex((i) => i.key === currentKey.value);\n\n    let targetIdx: number;\n    if (nextKeys.includes(event.key)) {\n      targetIdx = (currentIdx + 1) % enabledItems.length;\n    } else if (prevKeys.includes(event.key)) {\n      targetIdx = (currentIdx - 1 + enabledItems.length) % enabledItems.length;\n    } else if (event.key === 'Home') {\n      targetIdx = 0;\n    } else {\n      targetIdx = enabledItems.length - 1;\n    }\n\n    const targetKey = enabledItems[targetIdx].key;\n    activateTab(targetKey);\n\n    nextTick(() => {\n      if (!tabListRef.value) return;\n      const targetEl = tabListRef.value.querySelector<HTMLElement>(`[data-tab-key=\"${targetKey}\"]`);\n      targetEl?.focus();\n    });\n  }\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive + content visibility\n// ─────────────────────────────────────────────\nconst renderedKeys = ref<Set<string>>(new Set([currentKey.value]));\n\nwatch(currentKey, (key) => {\n  renderedKeys.value.add(key);\n});\n\nfunction shouldUseKeepAlive(item: BTabItem): boolean {\n  if (item.destroyOnHidden) return false;\n  if (item.keepAlive !== undefined) return item.keepAlive;\n  if (destroyOnHidden) return false;\n  return keepAlive;\n}\n\nfunction shouldRender(item: BTabItem): boolean {\n  if (item.forceRender) return true;\n  if (shouldUseKeepAlive(item)) return true;\n  const itemDestroy = item.destroyOnHidden ?? destroyOnHidden;\n  if (itemDestroy) return item.key === currentKey.value;\n  return renderedKeys.value.has(item.key);\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive panel wrapper components\n// ─────────────────────────────────────────────\nconst panelWrappers = computed<Record<string, Component>>(() => {\n  const wrappers: Record<string, Component> = {};\n  for (const item of effectiveItems.value) {\n    if (!shouldUseKeepAlive(item)) continue;\n    wrappers[item.key] = defineComponent({\n      name: `BTabPanel_${item.key}`,\n      setup() {\n        return () => {\n          const pane = paneRegistry.value.get(item.key);\n          if (pane) {\n            return pane.renderContent();\n          }\n          return null;\n        };\n      },\n    });\n  }\n  return wrappers;\n});\n\nfunction getPaneContent(key: string): VNode[] {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderContent() ?? [];\n}\n\nfunction getPaneLabel(key: string): VNode[] | undefined {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderLabel?.();\n}\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tabs',\n  `b-tabs--${type}`,\n  `b-tabs--${placement}`,\n  `b-tabs--${size}`,\n  { 'b-tabs--centered': centered },\n]);\n\nconst tabBarGutterStyle = computed(() =>\n  tabBarGutter !== undefined ? { gap: `${tabBarGutter}px` } : undefined,\n);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Tab bar -->\n    <div class=\"b-tabs__header\">\n      <div v-if=\"$slots.leftExtra\" class=\"b-tabs__extra b-tabs__extra--left\">\n        <slot name=\"leftExtra\" />\n      </div>\n\n      <div\n        ref=\"tabListRef\"\n        class=\"b-tabs__list\"\n        role=\"tablist\"\n        :aria-orientation=\"\n          placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n        \"\n        :style=\"tabBarGutterStyle\"\n      >\n        <div\n          v-for=\"item in effectiveItems\"\n          :key=\"item.key\"\n          :data-tab-key=\"item.key\"\n          class=\"b-tabs__tab\"\n          :class=\"{\n            'b-tabs__tab--active': item.key === currentKey,\n            'b-tabs__tab--disabled': item.disabled,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"item.key === currentKey\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :aria-controls=\"panelId(item.key)\"\n          :id=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          @click=\"!item.disabled && activateTab(item.key, $event)\"\n          @keydown=\"onKeydown\"\n        >\n          <span class=\"b-tabs__tab-label\">\n            <!-- Items mode: use label slot or item.label -->\n            <template v-if=\"isItemsMode\">\n              <slot name=\"label\" :item=\"item\" :active=\"item.key === currentKey\">\n                {{ item.label }}\n              </slot>\n            </template>\n            <!-- Pane mode: use pane's renderLabel or label string -->\n            <template v-else>\n              <component\n                v-if=\"getPaneLabel(item.key)\"\n                :is=\"() => h('span', getPaneLabel(item.key)!)\"\n              />\n              <template v-else>{{ item.label }}</template>\n            </template>\n          </span>\n          <span\n            v-if=\"type === 'editable-card' && item.closable !== false\"\n            class=\"b-tabs__tab-remove\"\n            aria-hidden=\"true\"\n            @click.stop=\"onRemove(item.key, $event)\"\n          >\n            <slot name=\"removeIcon\" :item=\"item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"b-tabs__close-icon\">\n                <path\n                  d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n                />\n              </svg>\n            </slot>\n          </span>\n        </div>\n\n        <!-- Ink bar (line type only) -->\n        <div\n          v-if=\"type === 'line'\"\n          class=\"b-tabs__ink-bar\"\n          aria-hidden=\"true\"\n          :style=\"inkBarStyle\"\n        />\n      </div>\n\n      <!-- Add button (outside tablist to avoid aria-required-children violation) -->\n      <button\n        v-if=\"type === 'editable-card' && !hideAdd\"\n        class=\"b-tabs__add\"\n        aria-label=\"Add tab\"\n        @click=\"onAdd\"\n      >\n        <slot name=\"addIcon\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"b-tabs__add-icon\">\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div v-if=\"$slots.rightExtra\" class=\"b-tabs__extra b-tabs__extra--right\">\n        <slot name=\"rightExtra\" />\n      </div>\n    </div>\n\n    <!-- Hidden slot area for BTabPane registration (pane mode only) -->\n    <div v-if=\"!isItemsMode\" v-show=\"false\" aria-hidden=\"true\" style=\"display: none\">\n      <slot />\n    </div>\n\n    <!-- Tab panels -->\n    <div class=\"b-tabs__content\">\n      <template v-for=\"item in effectiveItems\" :key=\"item.key\">\n        <!-- KeepAlive panels -->\n        <div\n          v-if=\"shouldUseKeepAlive(item)\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n          v-show=\"item.key === currentKey\"\n        >\n          <!-- Pane mode: KeepAlive caches wrapper component instances -->\n          <KeepAlive v-if=\"!isItemsMode\">\n            <component\n              v-if=\"item.key === currentKey\"\n              :is=\"panelWrappers[item.key] ?? (() => null)\"\n              :key=\"item.key\"\n            />\n          </KeepAlive>\n          <!-- Items mode: always render slot content; v-show on parent preserves state -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n        </div>\n\n        <!-- Standard panels (no KeepAlive) -->\n        <div\n          v-else-if=\"shouldRender(item)\"\n          v-show=\"item.key === currentKey\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n        >\n          <!-- Items mode: scoped slot -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n          <!-- Pane mode: render registered content -->\n          <component v-else :is=\"() => getPaneContent(item.key)\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTabs - Design tokens (scoped to .b-tabs)\n   ───────────────────────────────────────────── */\n.b-tabs {\n  --b-tabs-ink-bar-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-active-color: oklch(35% 0.2 260);\n  --b-tabs-item-color: oklch(30% 0.02 260 / 88%);\n  --b-tabs-item-hover-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-selected-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-disabled-color: oklch(30% 0.02 260 / 25%);\n  --b-tabs-title-font-size: 14px;\n  --b-tabs-title-font-size-lg: 16px;\n  --b-tabs-title-font-size-sm: 14px;\n  --b-tabs-card-bg: oklch(97% 0.003 260 / 50%);\n  --b-tabs-card-height: 40px;\n  --b-tabs-card-height-lg: 48px;\n  --b-tabs-card-height-sm: 32px;\n  --b-tabs-card-padding: 8px 16px;\n  --b-tabs-card-padding-lg: 11px 16px;\n  --b-tabs-card-padding-sm: 4px 8px;\n  --b-tabs-card-gutter: 2px;\n  --b-tabs-card-border-radius: 8px 8px 0 0;\n  --b-tabs-horizontal-item-gutter: 32px;\n  --b-tabs-horizontal-item-padding: 12px 0;\n  --b-tabs-horizontal-item-padding-lg: 16px 0;\n  --b-tabs-horizontal-item-padding-sm: 8px 0;\n  --b-tabs-horizontal-margin: 0 0 16px 0;\n  --b-tabs-vertical-item-margin: 16px 0 0 0;\n  --b-tabs-vertical-item-padding: 8px 24px;\n  --b-tabs-border-color: oklch(80% 0.005 260);\n  --b-tabs-content-min-height: 0;\n  --b-tabs-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n  --b-tabs-transition-duration: 200ms;\n\n  display: flex;\n  flex-direction: column;\n  font-size: var(--b-tabs-title-font-size);\n  line-height: 1.5;\n}\n\n/* ── Placement layouts ── */\n.b-tabs--left {\n  flex-direction: row;\n}\n\n.b-tabs--right {\n  flex-direction: row-reverse;\n}\n\n.b-tabs--bottom {\n  flex-direction: column-reverse;\n}\n\n/* ── Size variants ── */\n.b-tabs--large {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-lg);\n}\n\n.b-tabs--small {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Header\n   ───────────────────────────────────────────── */\n.b-tabs__header {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.b-tabs--top .b-tabs__header,\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n  margin: var(--b-tabs-horizontal-margin);\n}\n\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: none;\n  border-top: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--left .b-tabs__header,\n.b-tabs--right .b-tabs__header {\n  flex-direction: column;\n  align-items: stretch;\n  border-right: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--right .b-tabs__header {\n  border-right: none;\n  border-left: 1px solid var(--b-tabs-border-color);\n}\n\n/* Card type removes border from header */\n.b-tabs--card .b-tabs__header,\n.b-tabs--editable-card .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n}\n\n/* ─────────────────────────────────────────────\n   Tab list (roving tabindex container)\n   ───────────────────────────────────────────── */\n.b-tabs__list {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: var(--b-tabs-horizontal-item-gutter);\n}\n\n.b-tabs--centered .b-tabs__list {\n  justify-content: center;\n}\n\n.b-tabs--left .b-tabs__list,\n.b-tabs--right .b-tabs__list {\n  flex-direction: column;\n  gap: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Individual tab\n   ───────────────────────────────────────────── */\n.b-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  padding: var(--b-tabs-horizontal-item-padding);\n  border: none;\n  background: none;\n  color: var(--b-tabs-item-color);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  outline: none;\n  transition: color var(--b-tabs-transition-duration);\n  line-height: 1.5;\n}\n\n.b-tabs__tab:hover:not(.b-tabs__tab--disabled) {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__tab--active {\n  color: var(--b-tabs-item-selected-color);\n  font-weight: 500;\n}\n\n.b-tabs__tab--active:hover {\n  color: var(--b-tabs-item-active-color);\n}\n\n.b-tabs__tab--disabled {\n  color: var(--b-tabs-item-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-tabs__tab:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n  border-radius: 4px;\n}\n\n/* Large size - tab padding */\n.b-tabs--large .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-lg);\n}\n\n/* Small size - tab padding */\n.b-tabs--small .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-sm);\n}\n\n/* Vertical tabs */\n.b-tabs--left .b-tabs__tab,\n.b-tabs--right .b-tabs__tab {\n  padding: var(--b-tabs-vertical-item-padding);\n  justify-content: flex-start;\n}\n\n.b-tabs--left .b-tabs__tab:not(:first-child),\n.b-tabs--right .b-tabs__tab:not(:first-child) {\n  margin: var(--b-tabs-vertical-item-margin);\n}\n\n/* ─────────────────────────────────────────────\n   Card-type tab\n   ───────────────────────────────────────────── */\n.b-tabs--card .b-tabs__list,\n.b-tabs--editable-card .b-tabs__list {\n  gap: var(--b-tabs-card-gutter);\n}\n\n.b-tabs--card .b-tabs__tab,\n.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n}\n\n.b-tabs--card .b-tabs__tab--active,\n.b-tabs--editable-card .b-tabs__tab--active {\n  background: white;\n  border-bottom-color: white;\n}\n\n.b-tabs--large.b-tabs--card .b-tabs__tab,\n.b-tabs--large.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-lg);\n  height: var(--b-tabs-card-height-lg);\n}\n\n.b-tabs--small.b-tabs--card .b-tabs__tab,\n.b-tabs--small.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-sm);\n  height: var(--b-tabs-card-height-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Ink bar (line type indicator)\n   ───────────────────────────────────────────── */\n.b-tabs__ink-bar {\n  position: absolute;\n  background: var(--b-tabs-ink-bar-color);\n  transition:\n    left var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    width var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    top var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    height var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);\n  pointer-events: none;\n}\n\n.b-tabs--top .b-tabs__ink-bar,\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: 0;\n  height: 2px;\n}\n\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: auto;\n  top: 0;\n}\n\n.b-tabs--left .b-tabs__ink-bar {\n  right: 0;\n  width: 2px;\n}\n\n.b-tabs--right .b-tabs__ink-bar {\n  left: 0;\n  width: 2px;\n}\n\n/* ─────────────────────────────────────────────\n   Close / Remove button\n   ───────────────────────────────────────────── */\n.b-tabs__tab-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.6;\n  transition:\n    opacity var(--b-tabs-transition-duration),\n    background var(--b-tabs-transition-duration);\n}\n\n.b-tabs__tab-remove:hover {\n  opacity: 1;\n  background: oklch(0% 0 0 / 8%);\n}\n\n.b-tabs__close-icon {\n  width: 12px;\n  height: 12px;\n}\n\n/* ─────────────────────────────────────────────\n   Add button\n   ───────────────────────────────────────────── */\n.b-tabs__add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n  cursor: pointer;\n  color: var(--b-tabs-item-color);\n  transition: color var(--b-tabs-transition-duration);\n}\n\n.b-tabs__add:hover {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__add:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n}\n\n.b-tabs__add-icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* ─────────────────────────────────────────────\n   Extra content slots\n   ───────────────────────────────────────────── */\n.b-tabs__extra {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Content area\n   ───────────────────────────────────────────── */\n.b-tabs__content {\n  flex: 1;\n  min-height: var(--b-tabs-content-min-height);\n}\n\n.b-tabs__panel {\n  outline: none;\n}\n\n.b-tabs__panel--animated {\n  animation: b-tabs-fade-in var(--b-tabs-transition-duration) ease-in-out;\n}\n\n@keyframes b-tabs-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tabs {\n  --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n  --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n  --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n  --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n  --b-tabs-border-color: oklch(35% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tabs--card .b-tabs__tab--active,\n[data-prefers-color='dark'] .b-tabs--editable-card .b-tabs__tab--active {\n  background: oklch(20% 0.015 260);\n  border-bottom-color: oklch(20% 0.015 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tabs {\n    --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n    --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n    --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n    --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n    --b-tabs-border-color: oklch(35% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tabs--editable-card .b-tabs__tab--active {\n    background: oklch(20% 0.015 260);\n    border-bottom-color: oklch(20% 0.015 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tabs {\n    --b-tabs-transition-duration: 0ms;\n  }\n\n  .b-tabs__panel--animated {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system201.js","names":[],"sources":["../src/components/BSlider/BSlider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false });\n\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue';\nimport type { BSliderMarks, BSliderRange, BSliderTooltip } from './types.ts';\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  disabled = false,\n  dots = false,\n  included = true,\n  keyboard = true,\n  max = 100,\n  min = 0,\n  range = false,\n  reverse = false,\n  step = 1,\n  vertical = false,\n  tooltip = {},\n  marks,\n} = defineProps<{\n  /** Whether the slider is disabled. */\n  disabled?: boolean;\n  /** Whether only dots can be selected (step snap). */\n  dots?: boolean;\n  /** Whether the track between handles is filled. */\n  included?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Maximum value. */\n  max?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Whether range mode is enabled (dual handles). Can also be an object with draggableTrack. */\n  range?: boolean | BSliderRange;\n  /** Whether the slider is reversed. */\n  reverse?: boolean;\n  /** Step granularity. null means only marks are selectable. */\n  step?: number | null;\n  /** Whether the slider is vertical. */\n  vertical?: boolean;\n  /** Tooltip configuration. */\n  tooltip?: BSliderTooltip;\n  /** Tick marks on the slider. Keys are percentages (0–100 mapped to min–max). */\n  marks?: BSliderMarks;\n}>();\n\nconst model = defineModel<number | [number, number]>({ default: 0 });\n\nconst emit = defineEmits<{\n  change: [value: number | [number, number]];\n  changeComplete: [value: number | [number, number]];\n}>();\n//#endregion\n\n//#region Internal state\nconst railRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst dragging = ref<null | 'lower' | 'upper' | 'track'>(null);\nconst hovered = ref(false);\nconst focusedHandle = ref<'lower' | 'upper' | null>(null);\nconst tooltipVisible = ref<{ lower: boolean; upper: boolean }>({ lower: false, upper: false });\n\nconst trackDragStartValue = ref<[number, number] | null>(null);\nconst trackDragStartPos = ref(0);\n//#endregion\n\n//#region Computed values\nconst isRange = computed(() => range !== false);\nconst draggableTrack = computed(() => typeof range === 'object' && range.draggableTrack);\n\nconst lowerValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[0];\n  }\n  return min;\n});\n\nconst upperValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[1];\n  }\n  return model.value as number;\n});\n\nfunction valueToPercent(value: number): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction percentToValue(percent: number): number {\n  const raw = min + (percent / 100) * (max - min);\n  return snapToStep(raw);\n}\n\nfunction snapToStep(value: number): number {\n  if (step === null) {\n    if (!marks) return clamp(value);\n    const markValues = Object.keys(marks).map(Number);\n    let closest = markValues[0] ?? min;\n    let closestDist = Math.abs(value - closest);\n    for (const mv of markValues) {\n      const dist = Math.abs(value - mv);\n      if (dist < closestDist) {\n        closest = mv;\n        closestDist = dist;\n      }\n    }\n    return clamp(closest);\n  }\n  const stepped = Math.round((value - min) / step) * step + min;\n  return clamp(stepped);\n}\n\nfunction clamp(value: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nconst lowerPercent = computed(() => valueToPercent(lowerValue.value));\nconst upperPercent = computed(() => valueToPercent(upperValue.value));\n\nconst trackStyle = computed(() => {\n  const start = isRange.value ? lowerPercent.value : 0;\n  const length = isRange.value\n    ? upperPercent.value - lowerPercent.value\n    : upperPercent.value;\n\n  if (vertical) {\n    return reverse\n      ? { top: `${100 - start - length}%`, height: `${length}%` }\n      : { bottom: `${100 - start - length}%`, height: `${length}%` };\n  }\n  return reverse\n    ? { right: `${start}%`, width: `${length}%` }\n    : { left: `${start}%`, width: `${length}%` };\n});\n\nconst lowerHandleStyle = computed(() => {\n  const pct = lowerPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst upperHandleStyle = computed(() => {\n  const pct = upperPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst markList = computed(() => {\n  if (!marks) return [];\n  return Object.entries(marks).map(([key, val]) => {\n    const numKey = Number(key);\n    const percent = valueToPercent(numKey);\n    const isActive =\n      included &&\n      (isRange.value\n        ? numKey >= lowerValue.value && numKey <= upperValue.value\n        : numKey <= upperValue.value);\n    const label = typeof val === 'string' ? val : val.label;\n    const style = typeof val === 'object' ? val.style : undefined;\n    return { value: numKey, percent, isActive, label, style };\n  });\n});\n\nconst dotList = computed(() => {\n  if (!dots || step === null) return [];\n  const result: { value: number; percent: number; isActive: boolean }[] = [];\n  for (let v = min; v <= max; v += step) {\n    const percent = valueToPercent(v);\n    const isActive =\n      included &&\n      (isRange.value\n        ? v >= lowerValue.value && v <= upperValue.value\n        : v <= upperValue.value);\n    result.push({ value: v, percent, isActive });\n  }\n  return result;\n});\n\nfunction formatTooltip(value: number): string | null {\n  if (tooltip.formatter === null) return null;\n  if (tooltip.formatter) return tooltip.formatter(value);\n  return String(value);\n}\n\nconst lowerTooltipText = computed(() => formatTooltip(lowerValue.value));\nconst upperTooltipText = computed(() => formatTooltip(upperValue.value));\n\nconst showLowerTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.lower || dragging.value === 'lower' || dragging.value === 'track';\n});\n\nconst showUpperTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.upper || dragging.value === 'upper' || dragging.value === 'track';\n});\n//#endregion\n\n//#region Event handlers\nfunction getPercentFromEvent(event: MouseEvent | TouchEvent): number {\n  if (!railRef.value) return 0;\n  const rect = railRef.value.getBoundingClientRect();\n  let clientPos: number;\n  let size: number;\n\n  if ('touches' in event) {\n    clientPos = vertical ? event.touches[0].clientY : event.touches[0].clientX;\n  } else {\n    clientPos = vertical ? event.clientY : event.clientX;\n  }\n\n  if (vertical) {\n    size = rect.height;\n    const offset = clientPos - rect.top;\n    return reverse ? (offset / size) * 100 : ((size - offset) / size) * 100;\n  } else {\n    size = rect.width;\n    const offset = clientPos - rect.left;\n    return reverse ? ((size - offset) / size) * 100 : (offset / size) * 100;\n  }\n}\n\nfunction getCloserHandle(percent: number): 'lower' | 'upper' {\n  if (!isRange.value) return 'upper';\n  const distToLower = Math.abs(percent - lowerPercent.value);\n  const distToUpper = Math.abs(percent - upperPercent.value);\n  if (distToLower < distToUpper) return 'lower';\n  if (distToUpper < distToLower) return 'upper';\n  return percent < lowerPercent.value ? 'lower' : 'upper';\n}\n\nfunction updateValue(handle: 'lower' | 'upper', newValue: number) {\n  if (isRange.value) {\n    const current = model.value as [number, number];\n    let updated: [number, number];\n    if (handle === 'lower') {\n      updated = [Math.min(newValue, current[1]), current[1]];\n    } else {\n      updated = [current[0], Math.max(newValue, current[0])];\n    }\n    model.value = updated;\n    emit('change', updated);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleRailClick(event: MouseEvent) {\n  if (disabled) return;\n  if ((event.target as HTMLElement).closest('.b-slider__handle')) return;\n\n  const percent = getPercentFromEvent(event);\n  const value = percentToValue(percent);\n  const handle = getCloserHandle(percent);\n\n  if (draggableTrack.value && isRange.value) {\n    const lp = lowerPercent.value;\n    const up = upperPercent.value;\n    if (percent >= lp && percent <= up) return;\n  }\n\n  updateValue(handle, value);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleDragStart(handle: 'lower' | 'upper' | 'track', event: MouseEvent | TouchEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  dragging.value = handle;\n\n  if (handle === 'track' && isRange.value) {\n    trackDragStartValue.value = [...(model.value as [number, number])] as [number, number];\n    trackDragStartPos.value = getPercentFromEvent(event);\n  }\n\n  document.addEventListener('mousemove', handleDragMove);\n  document.addEventListener('mouseup', handleDragEnd);\n  document.addEventListener('touchmove', handleDragMove);\n  document.addEventListener('touchend', handleDragEnd);\n}\n\nfunction handleDragMove(event: MouseEvent | TouchEvent) {\n  if (!dragging.value || disabled) return;\n  const percent = getPercentFromEvent(event);\n\n  if (dragging.value === 'track' && trackDragStartValue.value) {\n    const delta = percent - trackDragStartPos.value;\n    const startLower = trackDragStartValue.value[0];\n    const startUpper = trackDragStartValue.value[1];\n    const lowerPct = valueToPercent(startLower) + delta;\n    const upperPct = valueToPercent(startUpper) + delta;\n\n    const newLower = percentToValue(lowerPct);\n    const newUpper = percentToValue(upperPct);\n\n    if (newLower >= min && newUpper <= max) {\n      model.value = [newLower, newUpper];\n      emit('change', [newLower, newUpper]);\n    }\n    return;\n  }\n\n  const value = percentToValue(percent);\n  updateValue(dragging.value as 'lower' | 'upper', value);\n}\n\nfunction handleDragEnd() {\n  if (dragging.value) {\n    emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n  }\n  dragging.value = null;\n  trackDragStartValue.value = null;\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n}\n\nfunction handleKeyDown(event: KeyboardEvent, handle: 'lower' | 'upper') {\n  if (disabled || !keyboard) return;\n  const effectiveStep = step ?? 1;\n  let delta = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      delta = effectiveStep;\n      break;\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      delta = -effectiveStep;\n      break;\n    case 'Home':\n      delta = min - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    case 'End':\n      delta = max - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    default:\n      return;\n  }\n\n  event.preventDefault();\n  const currentVal = handle === 'lower' ? lowerValue.value : upperValue.value;\n  const newValue = snapToStep(currentVal + delta);\n  updateValue(handle, newValue);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleHandleFocus(handle: 'lower' | 'upper') {\n  focusedHandle.value = handle;\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleBlur(handle: 'lower' | 'upper') {\n  focusedHandle.value = null;\n  tooltipVisible.value[handle] = false;\n}\n\nfunction handleHandleMouseEnter(handle: 'lower' | 'upper') {\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleMouseLeave(handle: 'lower' | 'upper') {\n  if (focusedHandle.value !== handle && dragging.value !== handle) {\n    tooltipVisible.value[handle] = false;\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true;\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false;\n}\n\nfunction handleTrackMouseDown(event: MouseEvent) {\n  if (disabled || !draggableTrack.value) return;\n  handleDragStart('track', event);\n}\n//#endregion\n\n//#region Expose\nfunction focus() {\n  const el = rootRef.value?.querySelector('.b-slider__handle') as HTMLElement | null;\n  el?.focus();\n}\n\nfunction blur() {\n  const el = rootRef.value?.querySelector('.b-slider__handle:focus') as HTMLElement | null;\n  el?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Cleanup\nonBeforeUnmount(() => {\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-slider\"\n    :class=\"[\n      {\n        'b-slider--vertical': vertical,\n        'b-slider--disabled': disabled,\n        'b-slider--with-marks': !!marks,\n        'b-slider--reverse': reverse,\n        'b-slider--hovered': hovered,\n      },\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <!-- Rail -->\n    <div\n      ref=\"railRef\"\n      class=\"b-slider__rail\"\n      @mousedown=\"handleRailClick\"\n    >\n      <!-- Track -->\n      <div\n        v-if=\"included\"\n        class=\"b-slider__track\"\n        :style=\"trackStyle\"\n        @mousedown.stop=\"handleTrackMouseDown\"\n      />\n\n      <!-- Dots -->\n      <span\n        v-for=\"dot in dotList\"\n        :key=\"`dot-${dot.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': dot.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - dot.percent}%` } : { bottom: `${100 - dot.percent}%` })\n          : (reverse ? { right: `${dot.percent}%` } : { left: `${dot.percent}%` })\n        \"\n      />\n\n      <!-- Marks -->\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-dot-${mark.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': mark.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n          : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n        \"\n      />\n\n      <!-- Lower handle (range only) -->\n      <div\n        v-if=\"isRange\"\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'lower' || focusedHandle === 'lower',\n        }\"\n        :style=\"lowerHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"min\"\n        :aria-valuemax=\"upperValue\"\n        :aria-valuenow=\"lowerValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) ? `${attrs['aria-label']} - minimum` : 'Minimum'\"\n        @mousedown=\"(e) => handleDragStart('lower', e)\"\n        @touchstart=\"(e) => handleDragStart('lower', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'lower')\"\n        @focus=\"handleHandleFocus('lower')\"\n        @blur=\"handleHandleBlur('lower')\"\n        @mouseenter=\"handleHandleMouseEnter('lower')\"\n        @mouseleave=\"handleHandleMouseLeave('lower')\"\n      >\n        <div\n          v-if=\"lowerTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showLowerTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ lowerTooltipText }}\n        </div>\n      </div>\n\n      <!-- Upper handle (always) -->\n      <div\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'upper' || focusedHandle === 'upper',\n        }\"\n        :style=\"upperHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"isRange ? lowerValue : min\"\n        :aria-valuemax=\"max\"\n        :aria-valuenow=\"upperValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) || (isRange ? 'Maximum' : 'Slider')\"\n        @mousedown=\"(e) => handleDragStart('upper', e)\"\n        @touchstart=\"(e) => handleDragStart('upper', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'upper')\"\n        @focus=\"handleHandleFocus('upper')\"\n        @blur=\"handleHandleBlur('upper')\"\n        @mouseenter=\"handleHandleMouseEnter('upper')\"\n        @mouseleave=\"handleHandleMouseLeave('upper')\"\n      >\n        <div\n          v-if=\"upperTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showUpperTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ upperTooltipText }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Mark labels -->\n    <div v-if=\"marks\" class=\"b-slider__marks\">\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-label-${mark.value}`\"\n        class=\"b-slider__mark-text\"\n        :class=\"{ 'b-slider__mark-text--active': mark.isActive }\"\n        :style=\"{\n          ...(vertical\n            ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n            : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n          ),\n          ...mark.style,\n        }\"\n      >\n        {{ mark.label }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-slider {\n  --b-slider-rail-bg: rgba(0, 0, 0, 0.04);\n  --b-slider-rail-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-slider-rail-size: 4px;\n  --b-slider-track-bg: #91caff;\n  --b-slider-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-slider-track-hover-bg: #69b1ff;\n  --b-slider-handle-color: #91caff;\n  --b-slider-handle-color-disabled: #bfbfbf;\n  --b-slider-handle-active-color: #1677ff;\n  --b-slider-handle-active-outline-color: rgba(22, 119, 255, 0.2);\n  --b-slider-handle-line-width: 2px;\n  --b-slider-handle-line-width-hover: 2.5px;\n  --b-slider-handle-size: 10px;\n  --b-slider-handle-size-hover: 12px;\n  --b-slider-dot-border-color: #f0f0f0;\n  --b-slider-dot-active-border-color: #91caff;\n  --b-slider-dot-size: 8px;\n  --b-slider-control-size: 10px;\n\n  position: relative;\n  box-sizing: border-box;\n  padding: 4px 0;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.b-slider--vertical {\n  display: inline-block;\n  height: 100%;\n  min-height: 200px;\n  padding: 0 4px;\n}\n\n.b-slider--disabled {\n  cursor: not-allowed;\n}\n\n/* Rail */\n.b-slider__rail {\n  position: relative;\n  width: 100%;\n  height: var(--b-slider-rail-size);\n  background-color: var(--b-slider-rail-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__rail {\n  background-color: var(--b-slider-rail-hover-bg);\n}\n\n.b-slider--vertical .b-slider__rail {\n  width: var(--b-slider-rail-size);\n  height: 100%;\n}\n\n/* Track */\n.b-slider__track {\n  position: absolute;\n  height: 100%;\n  background-color: var(--b-slider-track-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__track {\n  background-color: var(--b-slider-track-hover-bg);\n}\n\n.b-slider--disabled .b-slider__track {\n  background-color: var(--b-slider-track-bg-disabled);\n}\n\n.b-slider--vertical .b-slider__track {\n  width: 100%;\n  height: auto;\n}\n\n/* Handle */\n.b-slider__handle {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  background-color: #fff;\n  border: var(--b-slider-handle-line-width) solid var(--b-slider-handle-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  outline: none;\n  transition:\n    width 0.2s,\n    height 0.2s,\n    border-color 0.2s,\n    border-width 0.2s,\n    box-shadow 0.2s;\n  touch-action: none;\n  z-index: 1;\n}\n\n.b-slider--vertical .b-slider__handle {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__handle:hover,\n.b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n}\n\n.b-slider__handle--active {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n  cursor: grabbing;\n}\n\n.b-slider__handle:focus-visible {\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n}\n\n.b-slider--disabled .b-slider__handle {\n  border-color: var(--b-slider-handle-color-disabled);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.b-slider--disabled .b-slider__handle:hover,\n.b-slider--disabled .b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  border-width: var(--b-slider-handle-line-width);\n  border-color: var(--b-slider-handle-color-disabled);\n  box-shadow: none;\n}\n\n/* Tooltip */\n.b-slider__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.8);\n  padding: 4px 8px;\n  background-color: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.4;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity 0.2s,\n    transform 0.2s;\n}\n\n.b-slider__tooltip--visible {\n  opacity: 1;\n  transform: translateX(-50%) scale(1);\n}\n\n.b-slider--vertical .b-slider__tooltip {\n  bottom: auto;\n  left: calc(100% + 8px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.8);\n}\n\n.b-slider--vertical .b-slider__tooltip--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n/* Dots */\n.b-slider__dot {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-dot-size);\n  height: var(--b-slider-dot-size);\n  background-color: #fff;\n  border: 2px solid var(--b-slider-dot-border-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.b-slider--vertical .b-slider__dot {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__dot--active {\n  border-color: var(--b-slider-dot-active-border-color);\n}\n\n/* Marks */\n.b-slider__marks {\n  position: relative;\n}\n\n.b-slider--vertical .b-slider__marks {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n  pointer-events: none;\n}\n\n.b-slider__mark-text {\n  position: absolute;\n  top: 8px;\n  transform: translateX(-50%);\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.65);\n  white-space: nowrap;\n  user-select: none;\n}\n\n.b-slider--vertical .b-slider__mark-text {\n  top: auto;\n  left: 20px;\n  transform: translateY(50%);\n}\n\n.b-slider__mark-text--active {\n  color: rgba(0, 0, 0, 0.88);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-slider {\n  --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n  --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n  --b-slider-track-bg: #177ddc;\n  --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-slider-track-hover-bg: #3c9ae8;\n  --b-slider-handle-color: #177ddc;\n  --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-slider-handle-active-color: #3c9ae8;\n  --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n  --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n  --b-slider-dot-active-border-color: #177ddc;\n}\n\n[data-prefers-color='dark'] .b-slider__tooltip {\n  background-color: rgba(255, 255, 255, 0.9);\n  color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__handle {\n  background-color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text--active {\n  color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-slider {\n    --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n    --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n    --b-slider-track-bg: #177ddc;\n    --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-slider-track-hover-bg: #3c9ae8;\n    --b-slider-handle-color: #177ddc;\n    --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-slider-handle-active-color: #3c9ae8;\n    --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n    --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n    --b-slider-dot-active-border-color: #177ddc;\n  }\n  [data-prefers-color='system'] .b-slider__tooltip {\n    background-color: rgba(255, 255, 255, 0.9);\n    color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__handle {\n    background-color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__mark-text {\n    color: rgba(255, 255, 255, 0.65);\n  }\n  [data-prefers-color='system'] .b-slider__mark-text--active {\n    color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-slider__handle,\n  .b-slider__track,\n  .b-slider__rail,\n  .b-slider__tooltip {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system203.js

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

package/dist/design-system203.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system203.js","names":[],"sources":["../src/components/BSlider/BSlider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false });\n\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue';\nimport type { BSliderMarks, BSliderRange, BSliderTooltip } from './types.ts';\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  disabled = false,\n  dots = false,\n  included = true,\n  keyboard = true,\n  max = 100,\n  min = 0,\n  range = false,\n  reverse = false,\n  step = 1,\n  vertical = false,\n  tooltip = {},\n  marks,\n} = defineProps<{\n  /** Whether the slider is disabled. */\n  disabled?: boolean;\n  /** Whether only dots can be selected (step snap). */\n  dots?: boolean;\n  /** Whether the track between handles is filled. */\n  included?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Maximum value. */\n  max?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Whether range mode is enabled (dual handles). Can also be an object with draggableTrack. */\n  range?: boolean | BSliderRange;\n  /** Whether the slider is reversed. */\n  reverse?: boolean;\n  /** Step granularity. null means only marks are selectable. */\n  step?: number | null;\n  /** Whether the slider is vertical. */\n  vertical?: boolean;\n  /** Tooltip configuration. */\n  tooltip?: BSliderTooltip;\n  /** Tick marks on the slider. Keys are percentages (0–100 mapped to min–max). */\n  marks?: BSliderMarks;\n}>();\n\nconst model = defineModel<number | [number, number]>({ default: 0 });\n\nconst emit = defineEmits<{\n  change: [value: number | [number, number]];\n  changeComplete: [value: number | [number, number]];\n}>();\n//#endregion\n\n//#region Internal state\nconst railRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst dragging = ref<null | 'lower' | 'upper' | 'track'>(null);\nconst hovered = ref(false);\nconst focusedHandle = ref<'lower' | 'upper' | null>(null);\nconst tooltipVisible = ref<{ lower: boolean; upper: boolean }>({ lower: false, upper: false });\n\nconst trackDragStartValue = ref<[number, number] | null>(null);\nconst trackDragStartPos = ref(0);\n//#endregion\n\n//#region Computed values\nconst isRange = computed(() => range !== false);\nconst draggableTrack = computed(() => typeof range === 'object' && range.draggableTrack);\n\nconst lowerValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[0];\n  }\n  return min;\n});\n\nconst upperValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[1];\n  }\n  return model.value as number;\n});\n\nfunction valueToPercent(value: number): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction percentToValue(percent: number): number {\n  const raw = min + (percent / 100) * (max - min);\n  return snapToStep(raw);\n}\n\nfunction snapToStep(value: number): number {\n  if (step === null) {\n    if (!marks) return clamp(value);\n    const markValues = Object.keys(marks).map(Number);\n    let closest = markValues[0] ?? min;\n    let closestDist = Math.abs(value - closest);\n    for (const mv of markValues) {\n      const dist = Math.abs(value - mv);\n      if (dist < closestDist) {\n        closest = mv;\n        closestDist = dist;\n      }\n    }\n    return clamp(closest);\n  }\n  const stepped = Math.round((value - min) / step) * step + min;\n  return clamp(stepped);\n}\n\nfunction clamp(value: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nconst lowerPercent = computed(() => valueToPercent(lowerValue.value));\nconst upperPercent = computed(() => valueToPercent(upperValue.value));\n\nconst trackStyle = computed(() => {\n  const start = isRange.value ? lowerPercent.value : 0;\n  const length = isRange.value\n    ? upperPercent.value - lowerPercent.value\n    : upperPercent.value;\n\n  if (vertical) {\n    return reverse\n      ? { top: `${100 - start - length}%`, height: `${length}%` }\n      : { bottom: `${100 - start - length}%`, height: `${length}%` };\n  }\n  return reverse\n    ? { right: `${start}%`, width: `${length}%` }\n    : { left: `${start}%`, width: `${length}%` };\n});\n\nconst lowerHandleStyle = computed(() => {\n  const pct = lowerPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst upperHandleStyle = computed(() => {\n  const pct = upperPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst markList = computed(() => {\n  if (!marks) return [];\n  return Object.entries(marks).map(([key, val]) => {\n    const numKey = Number(key);\n    const percent = valueToPercent(numKey);\n    const isActive =\n      included &&\n      (isRange.value\n        ? numKey >= lowerValue.value && numKey <= upperValue.value\n        : numKey <= upperValue.value);\n    const label = typeof val === 'string' ? val : val.label;\n    const style = typeof val === 'object' ? val.style : undefined;\n    return { value: numKey, percent, isActive, label, style };\n  });\n});\n\nconst dotList = computed(() => {\n  if (!dots || step === null) return [];\n  const result: { value: number; percent: number; isActive: boolean }[] = [];\n  for (let v = min; v <= max; v += step) {\n    const percent = valueToPercent(v);\n    const isActive =\n      included &&\n      (isRange.value\n        ? v >= lowerValue.value && v <= upperValue.value\n        : v <= upperValue.value);\n    result.push({ value: v, percent, isActive });\n  }\n  return result;\n});\n\nfunction formatTooltip(value: number): string | null {\n  if (tooltip.formatter === null) return null;\n  if (tooltip.formatter) return tooltip.formatter(value);\n  return String(value);\n}\n\nconst lowerTooltipText = computed(() => formatTooltip(lowerValue.value));\nconst upperTooltipText = computed(() => formatTooltip(upperValue.value));\n\nconst showLowerTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.lower || dragging.value === 'lower' || dragging.value === 'track';\n});\n\nconst showUpperTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.upper || dragging.value === 'upper' || dragging.value === 'track';\n});\n//#endregion\n\n//#region Event handlers\nfunction getPercentFromEvent(event: MouseEvent | TouchEvent): number {\n  if (!railRef.value) return 0;\n  const rect = railRef.value.getBoundingClientRect();\n  let clientPos: number;\n  let size: number;\n\n  if ('touches' in event) {\n    clientPos = vertical ? event.touches[0].clientY : event.touches[0].clientX;\n  } else {\n    clientPos = vertical ? event.clientY : event.clientX;\n  }\n\n  if (vertical) {\n    size = rect.height;\n    const offset = clientPos - rect.top;\n    return reverse ? (offset / size) * 100 : ((size - offset) / size) * 100;\n  } else {\n    size = rect.width;\n    const offset = clientPos - rect.left;\n    return reverse ? ((size - offset) / size) * 100 : (offset / size) * 100;\n  }\n}\n\nfunction getCloserHandle(percent: number): 'lower' | 'upper' {\n  if (!isRange.value) return 'upper';\n  const distToLower = Math.abs(percent - lowerPercent.value);\n  const distToUpper = Math.abs(percent - upperPercent.value);\n  if (distToLower < distToUpper) return 'lower';\n  if (distToUpper < distToLower) return 'upper';\n  return percent < lowerPercent.value ? 'lower' : 'upper';\n}\n\nfunction updateValue(handle: 'lower' | 'upper', newValue: number) {\n  if (isRange.value) {\n    const current = model.value as [number, number];\n    let updated: [number, number];\n    if (handle === 'lower') {\n      updated = [Math.min(newValue, current[1]), current[1]];\n    } else {\n      updated = [current[0], Math.max(newValue, current[0])];\n    }\n    model.value = updated;\n    emit('change', updated);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleRailClick(event: MouseEvent) {\n  if (disabled) return;\n  if ((event.target as HTMLElement).closest('.b-slider__handle')) return;\n\n  const percent = getPercentFromEvent(event);\n  const value = percentToValue(percent);\n  const handle = getCloserHandle(percent);\n\n  if (draggableTrack.value && isRange.value) {\n    const lp = lowerPercent.value;\n    const up = upperPercent.value;\n    if (percent >= lp && percent <= up) return;\n  }\n\n  updateValue(handle, value);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleDragStart(handle: 'lower' | 'upper' | 'track', event: MouseEvent | TouchEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  dragging.value = handle;\n\n  if (handle === 'track' && isRange.value) {\n    trackDragStartValue.value = [...(model.value as [number, number])] as [number, number];\n    trackDragStartPos.value = getPercentFromEvent(event);\n  }\n\n  document.addEventListener('mousemove', handleDragMove);\n  document.addEventListener('mouseup', handleDragEnd);\n  document.addEventListener('touchmove', handleDragMove);\n  document.addEventListener('touchend', handleDragEnd);\n}\n\nfunction handleDragMove(event: MouseEvent | TouchEvent) {\n  if (!dragging.value || disabled) return;\n  const percent = getPercentFromEvent(event);\n\n  if (dragging.value === 'track' && trackDragStartValue.value) {\n    const delta = percent - trackDragStartPos.value;\n    const startLower = trackDragStartValue.value[0];\n    const startUpper = trackDragStartValue.value[1];\n    const lowerPct = valueToPercent(startLower) + delta;\n    const upperPct = valueToPercent(startUpper) + delta;\n\n    const newLower = percentToValue(lowerPct);\n    const newUpper = percentToValue(upperPct);\n\n    if (newLower >= min && newUpper <= max) {\n      model.value = [newLower, newUpper];\n      emit('change', [newLower, newUpper]);\n    }\n    return;\n  }\n\n  const value = percentToValue(percent);\n  updateValue(dragging.value as 'lower' | 'upper', value);\n}\n\nfunction handleDragEnd() {\n  if (dragging.value) {\n    emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n  }\n  dragging.value = null;\n  trackDragStartValue.value = null;\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n}\n\nfunction handleKeyDown(event: KeyboardEvent, handle: 'lower' | 'upper') {\n  if (disabled || !keyboard) return;\n  const effectiveStep = step ?? 1;\n  let delta = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      delta = effectiveStep;\n      break;\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      delta = -effectiveStep;\n      break;\n    case 'Home':\n      delta = min - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    case 'End':\n      delta = max - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    default:\n      return;\n  }\n\n  event.preventDefault();\n  const currentVal = handle === 'lower' ? lowerValue.value : upperValue.value;\n  const newValue = snapToStep(currentVal + delta);\n  updateValue(handle, newValue);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleHandleFocus(handle: 'lower' | 'upper') {\n  focusedHandle.value = handle;\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleBlur(handle: 'lower' | 'upper') {\n  focusedHandle.value = null;\n  tooltipVisible.value[handle] = false;\n}\n\nfunction handleHandleMouseEnter(handle: 'lower' | 'upper') {\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleMouseLeave(handle: 'lower' | 'upper') {\n  if (focusedHandle.value !== handle && dragging.value !== handle) {\n    tooltipVisible.value[handle] = false;\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true;\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false;\n}\n\nfunction handleTrackMouseDown(event: MouseEvent) {\n  if (disabled || !draggableTrack.value) return;\n  handleDragStart('track', event);\n}\n//#endregion\n\n//#region Expose\nfunction focus() {\n  const el = rootRef.value?.querySelector('.b-slider__handle') as HTMLElement | null;\n  el?.focus();\n}\n\nfunction blur() {\n  const el = rootRef.value?.querySelector('.b-slider__handle:focus') as HTMLElement | null;\n  el?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Cleanup\nonBeforeUnmount(() => {\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-slider\"\n    :class=\"[\n      {\n        'b-slider--vertical': vertical,\n        'b-slider--disabled': disabled,\n        'b-slider--with-marks': !!marks,\n        'b-slider--reverse': reverse,\n        'b-slider--hovered': hovered,\n      },\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <!-- Rail -->\n    <div\n      ref=\"railRef\"\n      class=\"b-slider__rail\"\n      @mousedown=\"handleRailClick\"\n    >\n      <!-- Track -->\n      <div\n        v-if=\"included\"\n        class=\"b-slider__track\"\n        :style=\"trackStyle\"\n        @mousedown.stop=\"handleTrackMouseDown\"\n      />\n\n      <!-- Dots -->\n      <span\n        v-for=\"dot in dotList\"\n        :key=\"`dot-${dot.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': dot.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - dot.percent}%` } : { bottom: `${100 - dot.percent}%` })\n          : (reverse ? { right: `${dot.percent}%` } : { left: `${dot.percent}%` })\n        \"\n      />\n\n      <!-- Marks -->\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-dot-${mark.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': mark.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n          : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n        \"\n      />\n\n      <!-- Lower handle (range only) -->\n      <div\n        v-if=\"isRange\"\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'lower' || focusedHandle === 'lower',\n        }\"\n        :style=\"lowerHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"min\"\n        :aria-valuemax=\"upperValue\"\n        :aria-valuenow=\"lowerValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) ? `${attrs['aria-label']} - minimum` : 'Minimum'\"\n        @mousedown=\"(e) => handleDragStart('lower', e)\"\n        @touchstart=\"(e) => handleDragStart('lower', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'lower')\"\n        @focus=\"handleHandleFocus('lower')\"\n        @blur=\"handleHandleBlur('lower')\"\n        @mouseenter=\"handleHandleMouseEnter('lower')\"\n        @mouseleave=\"handleHandleMouseLeave('lower')\"\n      >\n        <div\n          v-if=\"lowerTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showLowerTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ lowerTooltipText }}\n        </div>\n      </div>\n\n      <!-- Upper handle (always) -->\n      <div\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'upper' || focusedHandle === 'upper',\n        }\"\n        :style=\"upperHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"isRange ? lowerValue : min\"\n        :aria-valuemax=\"max\"\n        :aria-valuenow=\"upperValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) || (isRange ? 'Maximum' : 'Slider')\"\n        @mousedown=\"(e) => handleDragStart('upper', e)\"\n        @touchstart=\"(e) => handleDragStart('upper', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'upper')\"\n        @focus=\"handleHandleFocus('upper')\"\n        @blur=\"handleHandleBlur('upper')\"\n        @mouseenter=\"handleHandleMouseEnter('upper')\"\n        @mouseleave=\"handleHandleMouseLeave('upper')\"\n      >\n        <div\n          v-if=\"upperTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showUpperTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ upperTooltipText }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Mark labels -->\n    <div v-if=\"marks\" class=\"b-slider__marks\">\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-label-${mark.value}`\"\n        class=\"b-slider__mark-text\"\n        :class=\"{ 'b-slider__mark-text--active': mark.isActive }\"\n        :style=\"{\n          ...(vertical\n            ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n            : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n          ),\n          ...mark.style,\n        }\"\n      >\n        {{ mark.label }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-slider {\n  --b-slider-rail-bg: rgba(0, 0, 0, 0.04);\n  --b-slider-rail-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-slider-rail-size: 4px;\n  --b-slider-track-bg: #91caff;\n  --b-slider-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-slider-track-hover-bg: #69b1ff;\n  --b-slider-handle-color: #91caff;\n  --b-slider-handle-color-disabled: #bfbfbf;\n  --b-slider-handle-active-color: #1677ff;\n  --b-slider-handle-active-outline-color: rgba(22, 119, 255, 0.2);\n  --b-slider-handle-line-width: 2px;\n  --b-slider-handle-line-width-hover: 2.5px;\n  --b-slider-handle-size: 10px;\n  --b-slider-handle-size-hover: 12px;\n  --b-slider-dot-border-color: #f0f0f0;\n  --b-slider-dot-active-border-color: #91caff;\n  --b-slider-dot-size: 8px;\n  --b-slider-control-size: 10px;\n\n  position: relative;\n  box-sizing: border-box;\n  padding: 4px 0;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.b-slider--vertical {\n  display: inline-block;\n  height: 100%;\n  min-height: 200px;\n  padding: 0 4px;\n}\n\n.b-slider--disabled {\n  cursor: not-allowed;\n}\n\n/* Rail */\n.b-slider__rail {\n  position: relative;\n  width: 100%;\n  height: var(--b-slider-rail-size);\n  background-color: var(--b-slider-rail-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__rail {\n  background-color: var(--b-slider-rail-hover-bg);\n}\n\n.b-slider--vertical .b-slider__rail {\n  width: var(--b-slider-rail-size);\n  height: 100%;\n}\n\n/* Track */\n.b-slider__track {\n  position: absolute;\n  height: 100%;\n  background-color: var(--b-slider-track-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__track {\n  background-color: var(--b-slider-track-hover-bg);\n}\n\n.b-slider--disabled .b-slider__track {\n  background-color: var(--b-slider-track-bg-disabled);\n}\n\n.b-slider--vertical .b-slider__track {\n  width: 100%;\n  height: auto;\n}\n\n/* Handle */\n.b-slider__handle {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  background-color: #fff;\n  border: var(--b-slider-handle-line-width) solid var(--b-slider-handle-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  outline: none;\n  transition:\n    width 0.2s,\n    height 0.2s,\n    border-color 0.2s,\n    border-width 0.2s,\n    box-shadow 0.2s;\n  touch-action: none;\n  z-index: 1;\n}\n\n.b-slider--vertical .b-slider__handle {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__handle:hover,\n.b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n}\n\n.b-slider__handle--active {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n  cursor: grabbing;\n}\n\n.b-slider__handle:focus-visible {\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n}\n\n.b-slider--disabled .b-slider__handle {\n  border-color: var(--b-slider-handle-color-disabled);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.b-slider--disabled .b-slider__handle:hover,\n.b-slider--disabled .b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  border-width: var(--b-slider-handle-line-width);\n  border-color: var(--b-slider-handle-color-disabled);\n  box-shadow: none;\n}\n\n/* Tooltip */\n.b-slider__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.8);\n  padding: 4px 8px;\n  background-color: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.4;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity 0.2s,\n    transform 0.2s;\n}\n\n.b-slider__tooltip--visible {\n  opacity: 1;\n  transform: translateX(-50%) scale(1);\n}\n\n.b-slider--vertical .b-slider__tooltip {\n  bottom: auto;\n  left: calc(100% + 8px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.8);\n}\n\n.b-slider--vertical .b-slider__tooltip--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n/* Dots */\n.b-slider__dot {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-dot-size);\n  height: var(--b-slider-dot-size);\n  background-color: #fff;\n  border: 2px solid var(--b-slider-dot-border-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.b-slider--vertical .b-slider__dot {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__dot--active {\n  border-color: var(--b-slider-dot-active-border-color);\n}\n\n/* Marks */\n.b-slider__marks {\n  position: relative;\n}\n\n.b-slider--vertical .b-slider__marks {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n  pointer-events: none;\n}\n\n.b-slider__mark-text {\n  position: absolute;\n  top: 8px;\n  transform: translateX(-50%);\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.65);\n  white-space: nowrap;\n  user-select: none;\n}\n\n.b-slider--vertical .b-slider__mark-text {\n  top: auto;\n  left: 20px;\n  transform: translateY(50%);\n}\n\n.b-slider__mark-text--active {\n  color: rgba(0, 0, 0, 0.88);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-slider {\n  --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n  --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n  --b-slider-track-bg: #177ddc;\n  --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-slider-track-hover-bg: #3c9ae8;\n  --b-slider-handle-color: #177ddc;\n  --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-slider-handle-active-color: #3c9ae8;\n  --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n  --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n  --b-slider-dot-active-border-color: #177ddc;\n}\n\n[data-prefers-color='dark'] .b-slider__tooltip {\n  background-color: rgba(255, 255, 255, 0.9);\n  color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__handle {\n  background-color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text--active {\n  color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-slider {\n    --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n    --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n    --b-slider-track-bg: #177ddc;\n    --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-slider-track-hover-bg: #3c9ae8;\n    --b-slider-handle-color: #177ddc;\n    --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-slider-handle-active-color: #3c9ae8;\n    --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n    --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n    --b-slider-dot-active-border-color: #177ddc;\n  }\n  [data-prefers-color='system'] .b-slider__tooltip {\n    background-color: rgba(255, 255, 255, 0.9);\n    color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__handle {\n    background-color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__mark-text {\n    color: rgba(255, 255, 255, 0.65);\n  }\n  [data-prefers-color='system'] .b-slider__mark-text--active {\n    color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-slider__handle,\n  .b-slider__track,\n  .b-slider__rail,\n  .b-slider__tooltip {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}