bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/BbOffCanvas/BbOffCanvas.vue_vue_type_script_setup_true_lang.js

@@ -1,32 +1,39 @@
-import { useId as e } from "../../composables/useId.js";
-import { useUntil as t } from "../../composables/useUntil.js";
-import { removedPropsFor as n } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as r } from "../../utilities/functions/warnRemovedAttrs.js";
-import { transitions as i } from "../../utilities/misc/transitions.js";
-import { overlaySurfaceIsolation as a } from "../../utils/overlaySurfaceIsolation.js";
-import { isTopEscapeEntry as ee, pushEscapeEntry as te, removeEscapeEntry as ne } from "../../utils/overlayEscapeStack.js";
-import { useMobile as re } from "../../composables/useMobile.js";
-import { wait as ie } from "../../utilities/functions/wait.js";
-import { parseSize as ae } from "../../utilities/functions/parseSize.js";
-import { useLocale as oe } from "../../composables/useLocale.js";
-import { viewportHeight as se, viewportWidth as ce } from "../../composables/useViewportWidth.js";
-import { useBreakpoint as le } from "../../composables/useBreakpoint.js";
-import ue from "../CloseIcon/CloseButton.vue.js";
-import { useOffCanvasStack as de } from "./useOffCanvasStack.js";
-import { registerTopLayerHost as fe } from "../../composables/useTopLayer.js";
-import { config as pe } from "virtual:bitboss-ui/config";
-import { Fragment as me, computed as o, createBlock as he, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as ge, defineComponent as u, mergeModels as d, mergeProps as _e, nextTick as ve, onBeforeUnmount as ye, onMounted as be, openBlock as f, ref as p, renderSlot as m, toDisplayString as xe, toHandlers as Se, unref as h, useModel as Ce, useSlots as we, watch as g, withModifiers as Te } from "vue";
+import { useConfig as e } from "../../composables/useConfig.js";
+import { useId as t } from "../../composables/useId.js";
+import { useUntil as n } from "../../composables/useUntil.js";
+import { removedPropsFor as ee } from "../../deprecation/removedProps.js";
+import { useLogger as te } from "../../composables/useLogger.js";
+import { warnRemovedAttrs as ne } from "../../utilities/functions/warnRemovedAttrs.js";
+import { transitions as re } from "../../utilities/misc/transitions.js";
+import { overlaySurfaceIsolation as ie } from "../../utils/overlaySurfaceIsolation.js";
+import { isTopEscapeEntry as ae, pushEscapeEntry as oe, removeEscapeEntry as se } from "../../utils/overlayEscapeStack.js";
+import { useMobile as ce } from "../../composables/useMobile.js";
+import { wait as le } from "../../utilities/functions/wait.js";
+import { useLocale as ue } from "../../composables/useLocale.js";
+import { parseSize as de } from "../../utilities/functions/parseSize.js";
+import { viewportHeight as fe, viewportWidth as pe } from "../../composables/useViewportWidth.js";
+import { useBreakpoint as me } from "../../composables/useBreakpoint.js";
+import he from "../CloseIcon/CloseButton.vue.js";
+import { useOffCanvasStack as ge } from "./useOffCanvasStack.js";
+import { registerTopLayerHost as _e } from "../../composables/useTopLayer.js";
+import { Fragment as ve, computed as r, createBlock as ye, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as be, defineComponent as xe, mergeModels as s, mergeProps as Se, nextTick as Ce, onBeforeUnmount as we, onMounted as Te, openBlock as c, ref as l, renderSlot as u, toDisplayString as Ee, toHandlers as De, unref as d, useModel as Oe, useSlots as ke, watch as f, withModifiers as Ae } from "vue";
+import { useSwipe as je } from "@vueuse/core";
 //#region src/components/BbOffCanvas/BbOffCanvas.vue?vue&type=script&setup=true&lang.ts
-var Ee = ["aria-labelledby", "inert"], De = {
+var Me = [
+	"aria-describedby",
+	"aria-labelledby",
+	"inert"
+], Ne = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "bb-offcanvas__handle"
-}, Oe = {
+}, Pe = {
 	key: 1,
 	class: "bb-offcanvas__header"
-}, ke = { class: "bb-offcanvas__body-content" }, Ae = { class: "bb-offcanvas__footer" }, _ = 4, je = 2, v = 6, Me = .25, Ne = .5, y = /*@__PURE__*/ u({
+}, Fe = { class: "bb-offcanvas__body-content" }, Ie = { class: "bb-offcanvas__footer" }, Le = 4, Re = 2, ze = 50, Be = 8, p = 500, Ve = "cubic-bezier(0.32, 0.72, 0, 1)", m = /*@__PURE__*/ xe({
 	__name: "BbOffCanvas",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ s({
+		description: {},
 		disabled: { type: Boolean },
 		eager: { type: Boolean },
 		focusTarget: {},
@@ -41,7 +48,7 @@ var Ee = ["aria-labelledby", "inert"], De = {
 		hideClose: { type: Boolean },
 		size: { default: "sm" },
 		title: {},
-		transitionDuration: { default: i.medium },
+		transitionDuration: { default: re.medium },
 		side: { default: "left" }
 	}, {
 		modelValue: {
@@ -50,233 +57,272 @@ var Ee = ["aria-labelledby", "inert"], De = {
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ d([
+	emits: /*@__PURE__*/ s([
 		"show",
 		"hide",
 		"shown",
 		"hidden"
 	], ["update:modelValue"]),
-	setup(i, { emit: u }) {
-		let d = Ce(i, "modelValue"), y = i, b = u, Pe = we();
-		process.env.NODE_ENV !== "production" && r("BbOffCanvas", n("BbOffCanvas"));
-		let { t: Fe } = oe(), x = () => !!y.title || !!Pe.header, S = o(() => !!(y.disabled || y.persistent)), C = () => typeof document < "u", w = p(null), Ie = t(() => d.value || y.eager, { initialValue: d.value || y.eager }), T = `title_${e().id.value}`, E = p(0), D = p(!1), O = p(null), Le = () => {
-			O.value = null;
-		}, Re = (e) => {
-			O.value = {
+	setup(re, { emit: xe }) {
+		let s = Oe(re, "modelValue"), m = re, h = xe, g = ke(), He = e();
+		process.env.NODE_ENV !== "production" && ne("BbOffCanvas", ee("BbOffCanvas"));
+		let { t: Ue } = ue(), _ = () => !!m.title || !!g.title, v = () => _() || !!g.header || w(), y = r(() => !!(m.disabled || m.persistent)), b = () => typeof document < "u", x = l(null), S = n(() => s.value || m.eager, { initialValue: s.value || m.eager }), C = `title_${t().id.value}`, We = `desc_${t().id.value}`, w = () => !!m.description || !!g.description, T = l(0), E = l(!1), D = l(null), Ge = () => {
+			D.value = null;
+		}, Ke = (e) => {
+			D.value = {
 				startX: e.clientX,
 				startY: e.clientY,
 				startedOnBackdrop: e.target === e.currentTarget
 			};
-		}, ze = (e) => {
-			let t = O.value;
-			Le(), !(t && !t.startedOnBackdrop) && (t && (Math.abs(e.clientX - t.startX) > _ || Math.abs(e.clientY - t.startY) > _) || We(e));
-		}, k, A = (e) => {
-			clearTimeout(k), I.value = !0, k = setTimeout(() => {
-				I.value = !1;
+		}, qe = (e) => {
+			let t = D.value;
+			Ge(), !(t && !t.startedOnBackdrop) && (t && (Math.abs(e.clientX - t.startX) > Le || Math.abs(e.clientY - t.startY) > Le) || tt(e));
+		}, O, k = (e) => {
+			clearTimeout(O), N.value = !0, O = setTimeout(() => {
+				N.value = !1;
 			}, e);
-		}, j = Symbol("bb-off-canvas-escape"), Be = () => {
-			te(j), C() && document.addEventListener("keydown", N, { capture: !0 });
-		}, M = () => {
-			ne(j), C() && document.removeEventListener("keydown", N, { capture: !0 });
-		}, Ve = () => {
-			if (!y.focusTarget) return;
-			let e = w.value?.querySelector(y.focusTarget);
+		}, A = Symbol("bb-off-canvas-escape"), Je = () => {
+			oe(A), b() && document.addEventListener("keydown", Ze, { capture: !0 });
+		}, Ye = () => {
+			se(A), b() && document.removeEventListener("keydown", Ze, { capture: !0 });
+		}, Xe = () => {
+			if (!m.focusTarget) return;
+			let e = x.value?.querySelector(m.focusTarget);
 			e instanceof HTMLElement && e.focus();
-		}, N = (e) => {
-			if (e.key === "Escape" && !q.value && ee(j) && (e.stopImmediatePropagation(), S.value)) return e.preventDefault(), A(200), !1;
-		}, P = null, He = async (e) => {
-			if (e) b("show"), E.value++, C() && !document.documentElement.style.getPropertyValue("--scrollbar-width") && document.documentElement.style.setProperty("--scrollbar-width", `${Ke()}px`), Be(), await ve(), D.value = !0, w.value && !w.value.open && w.value.showModal(), it(), w.value && (P = fe(w.value)), Ve(), b("shown");
+		}, Ze = (e) => {
+			if (e.key === "Escape" && !H.value && ae(A) && (e.stopImmediatePropagation(), y.value)) return e.preventDefault(), k(200), !1;
+		}, j = null, Qe = async (e) => {
+			if (e) h("show"), T.value++, b() && !document.documentElement.style.getPropertyValue("--scrollbar-width") && document.documentElement.style.setProperty("--scrollbar-width", `${rt()}px`), Je(), await Ce(), E.value = !0, x.value && !x.value.open && x.value.showModal(), _t(), x.value && (j = _e(x.value)), Xe(), h("shown");
 			else {
-				b("hide");
-				let e = E.value;
-				if (await ie(y.transitionDuration), e !== E.value) return;
-				M(), at(), w.value?.close(), P?.(), P = null, D.value = !1, mt(), b("hidden");
+				h("hide");
+				let e = T.value;
+				if (await le(m.transitionDuration), e !== T.value) return;
+				Ye(), vt(), x.value?.close(), j?.(), j = null, E.value = !1, q = !1, K.value = !1, kt(), h("hidden");
 			}
+		}, $e = () => {
+			process.env.NODE_ENV !== "production" && (!g.header || m.title || Ce(() => {
+				!x.value || document.getElementById(C) || te().warn(`BbOffCanvas: the #header slot does not contain an element with id="${C}", so aria-labelledby points at nothing and the panel announces as unnamed. Bind the slot's \`titleId\` to your heading: <template #header="{ titleId }"><h2 :id="titleId">…</h2></template>.`);
+			}));
 		};
-		g(d, He), be(() => {
-			d.value && He(!0);
-		}), ye(() => {
-			clearTimeout(k), M(), $(), at(), P?.(), P = null;
+		f(s, Qe), Te(() => {
+			s.value && Qe(!0), $e();
+		}), we(() => {
+			clearTimeout(O), Ye(), W.value?.removeEventListener("scroll", Ct), J?.disconnect(), J = null, vt(), j?.(), j = null;
 		});
-		let Ue = o(() => {
-			if (R.value) return "100%";
-			let e = qe(y.size);
-			return e === "auto" ? "fit-content" : ae(e, pe.offCanvasDefaultSizes);
-		}), We = (e) => {
-			if (e.preventDefault(), S.value) return A(300), !1;
-			F();
-		}, F = () => {
-			d.value = !1;
-		}, Ge = () => {
-			if (y.disabled) {
-				A(300);
+		let et = r(() => {
+			if (ot.value) return "100%";
+			let e = at(m.size);
+			return e === "auto" ? "fit-content" : de(e, He.offCanvasDefaultSizes);
+		}), tt = (e) => {
+			if (e.preventDefault(), y.value) return k(300), !1;
+			M();
+		}, M = () => {
+			s.value = !1;
+		}, nt = () => {
+			if (m.disabled) {
+				k(300);
 				return;
 			}
-			F();
-		}, I = p(!1), Ke = () => C() ? window.innerWidth - document.documentElement.clientWidth : 0, { isMobile: L } = re(), { resolve: qe } = le(), R = o(() => y.fullscreen === !0 || y.fullscreen === "mobile" && L.value), z = Symbol("bb-offcanvas"), { stacks: B, push: Je, setSize: Ye, remove: Xe, offset: Ze, openOrder: Qe, registerOpen: $e, deregisterOpen: et } = de(), V = o(() => y.side === "left" || y.side === "right" ? "x" : "y"), H = o(() => y.side === "right" || y.side === "bottom" ? 1 : -1), tt = `bb-offcanvas-${e().id.value}`, U = o(() => y.stack || tt), W = null, G = () => {
-			let e = w.value?.getBoundingClientRect();
-			return e ? V.value === "x" ? e.width : e.height : 0;
-		}, K = null, nt = () => {
-			typeof ResizeObserver > "u" || !w.value || (K = new ResizeObserver(() => {
-				W !== null && Ye(W, z, G());
-			}), K.observe(w.value));
-		}, rt = () => {
-			K?.disconnect(), K = null;
-		}, it = () => {
-			W = U.value, Je(W, z, y.side, G(), y.stackGap), $e(z), nt();
-		}, at = () => {
-			rt(), et(z), W !== null && (Xe(W, z), W = null);
-		}, q = o(() => {
-			let e = Qe.value.indexOf(z);
-			return D.value && e !== -1 && e < Qe.value.length - je;
+			M();
+		}, N = l(!1), rt = () => b() ? window.innerWidth - document.documentElement.clientWidth : 0, { isMobile: it } = ce(), { resolve: at } = me(), ot = r(() => m.fullscreen === !0 || m.fullscreen === "mobile" && it.value), P = Symbol("bb-offcanvas"), { stacks: F, push: st, setSize: ct, remove: lt, offset: ut, openOrder: dt, registerOpen: ft, deregisterOpen: pt } = ge(), I = r(() => m.side === "left" || m.side === "right" ? "x" : "y"), L = r(() => m.side === "right" || m.side === "bottom" ? 1 : -1), mt = `bb-offcanvas-${t().id.value}`, R = r(() => m.stack || mt), z = null, B = () => {
+			let e = x.value?.getBoundingClientRect();
+			return e ? I.value === "x" ? e.width : e.height : 0;
+		}, V = null, ht = () => {
+			typeof ResizeObserver > "u" || !x.value || (V = new ResizeObserver(() => {
+				z !== null && ct(z, P, B());
+			}), V.observe(x.value));
+		}, gt = () => {
+			V?.disconnect(), V = null;
+		}, _t = () => {
+			z = R.value, st(z, P, m.side, B(), m.stackGap), ft(P), ht();
+		}, vt = () => {
+			gt(), pt(P), z !== null && (lt(z, P), z = null);
+		}, H = r(() => {
+			let e = dt.value.indexOf(P);
+			return E.value && e !== -1 && e < dt.value.length - Re;
 		});
-		g([
-			U,
-			() => y.side,
-			() => y.stackGap
+		f([
+			R,
+			() => m.side,
+			() => m.stackGap
 		], ([e]) => {
-			W !== null && (Xe(W, z), W = e, Je(e, z, y.side, G(), y.stackGap));
+			z !== null && (lt(z, P), z = e, st(e, P, m.side, B(), m.stackGap));
 		});
-		let ot = o(() => L.value ? 14 : 20), st = o(() => {
-			B.value;
-			let e = V.value === "x" ? ce.value : se.value, t = Ze(U.value, z, e, ot.value);
+		let yt = r(() => it.value ? 14 : 20), bt = r(() => {
+			F.value;
+			let e = I.value === "x" ? pe.value : fe.value, t = ut(R.value, P, e, yt.value);
 			return {
-				[V.value === "x" ? "--stack-x" : "--stack-y"]: `${-H.value * t}px`,
+				[I.value === "x" ? "--stack-x" : "--stack-y"]: `${-L.value * t}px`,
 				"--stack-fill": `${t}px`
 			};
-		}), J = p(!1), ct = 0, lt = () => {
-			let e = B.value[U.value];
+		}), U = l(!1), xt = 0, St = () => {
+			let e = F.value[R.value];
 			if (!e) return !1;
-			let t = e.filter((e) => e.direction === y.side), n = t.findIndex((e) => e.id === z);
+			let t = e.filter((e) => e.direction === m.side), n = t.findIndex((e) => e.id === P);
 			return n !== -1 && n !== t.length - 1;
 		};
-		g(() => B.value[U.value], (e) => {
-			let t = e?.length ?? 0, n = t > 0 && t === ct;
-			ct = t, J.value = n && lt(), J.value && ve(() => J.value = !1);
+		f(() => F.value[R.value], (e) => {
+			let t = e?.length ?? 0, n = t > 0 && t === xt;
+			xt = t, U.value = n && St(), U.value && Ce(() => U.value = !1);
 		});
-		let Y = p(null), X = p(!1), Z = null, ut = (e, t) => V.value === "x" ? e.clientX - t.startX : e.clientY - t.startY, dt = (e) => V.value === "x" ? e.clientX : e.clientY, ft = () => {
-			w.value && (w.value.style.transition = "none");
-		}, pt = (e) => {
-			let t = w.value;
+		let W = l(null), G = l(!1), K = l(!1), q = !1, J = null, Y = !1, X = !1, Z = !1, Q = !1, $ = () => {
+			W.value?.style.removeProperty("touch-action");
+		}, Ct = () => $();
+		f(W, (e, t) => {
+			t?.removeEventListener("scroll", Ct), J?.disconnect(), J = null, e && (e.addEventListener("scroll", Ct, { passive: !0 }), typeof ResizeObserver < "u" && (J = new ResizeObserver(() => $()), J.observe(e)), $());
+		}, { flush: "post" }), f([
+			() => m.draggable,
+			() => m.side,
+			E
+		], () => $());
+		let wt = () => I.value === "y" ? L.value === 1 ? -It.value : It.value : L.value === 1 ? -Ft.value : Ft.value, Tt = () => {
+			x.value && (x.value.style.transition = "none"), W.value && I.value === "y" && (W.value.style.touchAction = "none");
+		}, Et = (e) => {
+			let t = x.value;
 			if (!t) return;
-			let n = e > 0 ? e * H.value : 0;
-			t.style.transform = V.value === "x" ? `translate3d(${n}px, 0, 0)` : `translate3d(0, ${n}px, 0)`;
-		}, Q = (e) => {
-			let t = w.value;
-			t && (t.style.transition = "", e && (t.style.transform = ""));
-		}, mt = () => {
-			let e = w.value;
-			e && (e.style.removeProperty("transition"), e.style.removeProperty("transform"));
-		}, ht = (e) => V.value !== "y" || !Y.value ? !1 : e <= 0 ? !0 : H.value === 1 ? Y.value.scrollTop > 0 : Y.value.scrollTop + Y.value.clientHeight < Y.value.scrollHeight - 1, $ = () => {
-			window.removeEventListener("pointermove", vt), window.removeEventListener("pointerup", bt), window.removeEventListener("pointercancel", xt);
-		}, gt = () => {
-			$(), Z = null;
-		}, _t = (e) => {
-			if (Re(e), !y.draggable || e.target === e.currentTarget || e.button !== 0 || !w.value) return;
-			Z && gt();
-			let t = w.value.getBoundingClientRect();
-			Z = {
-				pointerId: e.pointerId,
-				startX: e.clientX,
-				startY: e.clientY,
-				size: V.value === "x" ? t.width : t.height,
-				startedInBody: !!e.target.closest?.(".bb-offcanvas__body"),
-				decided: !1,
-				active: !1,
-				samples: [{
-					t: performance.now(),
-					pos: dt(e)
-				}]
-			}, window.addEventListener("pointermove", vt, { passive: !1 }), window.addEventListener("pointerup", bt), window.addEventListener("pointercancel", xt);
-		}, vt = (e) => {
-			if (!Z || e.pointerId !== Z.pointerId) return;
-			let t = ut(e, Z), n = V.value === "x" ? e.clientY - Z.startY : e.clientX - Z.startX;
-			if (!Z.decided) {
-				if (Math.abs(t) < v && Math.abs(n) < v) return;
-				Z.decided = !0;
-				let e = t * H.value;
-				if (!(Math.abs(t) >= Math.abs(n)) || Z.startedInBody && ht(e)) {
-					gt();
+			let n = e > 0 ? e * L.value : 0;
+			t.style.transform = I.value === "x" ? `translate3d(${n}px, 0, 0)` : `translate3d(0, ${n}px, 0)`;
+		}, Dt = () => {
+			let e = x.value;
+			e && (e.style.transform = m.side === "bottom" ? "translate3d(0, 100%, 0)" : m.side === "top" ? "translate3d(0, -100%, 0)" : m.side === "left" ? "translate3d(-100%, 0, 0)" : "translate3d(100%, 0, 0)");
+		}, Ot = (e) => {
+			let t = x.value;
+			if (t) {
+				if (e) {
+					t.style.transition = `transform ${p}ms ${Ve}`, t.style.transform = "translate3d(0, 0, 0)", window.setTimeout(() => {
+						!t.isConnected || q || (t.style.removeProperty("transform"), t.style.removeProperty("transition"), $());
+					}, p);
 					return;
 				}
-				Z.active = !0, X.value = !0, ft();
+				t.style.transition = "", $();
 			}
-			Z.active && (e.preventDefault(), Z.samples.push({
-				t: performance.now(),
-				pos: dt(e)
-			}), Z.samples.length > 6 && Z.samples.shift(), pt(t * H.value));
-		}, yt = (e) => {
-			if (e.length < 2) return 0;
-			let t = e[e.length - 1], n = e[0];
-			for (let r = e.length - 2; r >= 0 && (n = e[r], !(t.t - e[r].t >= 50)); r--);
-			let r = t.t - n.t;
-			return r > 0 ? (t.pos - n.pos) / r * H.value : 0;
-		}, bt = (e) => {
-			if (!Z || e.pointerId !== Z.pointerId) return;
-			let { active: t, size: n, samples: r } = Z, i = ut(e, Z) * H.value;
-			if ($(), Z = null, !t) return;
-			X.value = !1;
-			let a = i > n * Me || yt(r) > Ne && i > v;
-			if (a && !S.value) {
-				Q(!1), F();
+		}, kt = () => {
+			let e = x.value;
+			e && (q || (e.style.removeProperty("transition"), e.style.removeProperty("transform")));
+		}, At = async () => {
+			let e = x.value;
+			if (!e) {
+				M();
 				return;
 			}
-			Q(!0), a && A(300);
-		}, xt = (e) => {
-			if (!Z || e.pointerId !== Z.pointerId) return;
-			let t = Z.active;
-			$(), Z = null, t && (X.value = !1, Q(!0));
-		};
-		return (e, t) => (f(), c("dialog", _e({
+			if (q = !0, K.value = !0, e.style.transition = `transform ${p}ms ${Ve}`, Dt(), await le(p), !s.value) {
+				q = !1, K.value = !1, e.style.removeProperty("transform"), e.style.removeProperty("transition"), $();
+				return;
+			}
+			e.style.transition = "none", Dt(), M();
+		}, jt = (e) => {
+			let { overflowY: t } = getComputedStyle(e);
+			return t !== "auto" && t !== "scroll" ? !1 : e.scrollHeight > e.clientHeight + 1;
+		}, Mt = (e) => L.value === 1 ? e.scrollTop <= 1 : e.scrollTop + e.clientHeight >= e.scrollHeight - 1, Nt = (e) => {
+			let t = x.value;
+			if (!t) return !1;
+			let n = e;
+			for (; n && n !== t;) {
+				if (n instanceof HTMLElement && jt(n) && !Mt(n)) return !0;
+				n = n.parentElement;
+			}
+			return !1;
+		}, Pt = () => {
+			Y = !1, X = !1, Z = !1, Q = !1, G.value = !1;
+		}, { lengthX: Ft, lengthY: It } = je(x, {
+			threshold: Be,
+			passive: !1,
+			onSwipeStart: (e) => {
+				if (Pt(), !m.draggable || !E.value || e.target === x.value) return;
+				let t = e.target;
+				t instanceof Element && (Y = !0, X = !!t.closest(".bb-offcanvas__body"), Q = X && Nt(t));
+			},
+			onSwipe: (e) => {
+				if (!Y || !m.draggable || Q) return;
+				let t = wt();
+				if (!Z) {
+					if (X && t < -8) {
+						Q = !0;
+						return;
+					}
+					if (t < Be) return;
+					Z = !0, G.value = !0, Tt();
+				}
+				e.preventDefault(), Et(t);
+			},
+			onSwipeEnd: () => {
+				if (!Z) {
+					Pt();
+					return;
+				}
+				let e = wt();
+				if (Pt(), e >= ze && !y.value) {
+					At();
+					return;
+				}
+				Ot(!0), e >= ze && k(300);
+			}
+		});
+		return (e, t) => (c(), a("dialog", Se({
 			ref_key: "dialog",
-			ref: w,
-			"aria-labelledby": h(Ie) && x() ? T : void 0,
+			ref: x,
+			"aria-describedby": d(S) && w() ? We : void 0,
+			"aria-labelledby": d(S) && (_() || e.$slots.header) ? C : void 0,
 			class: ["bb-offcanvas", [{
-				"bb-offcanvas--open": d.value,
-				"bb-offcanvas--visible": D.value,
-				"bb-offcanvas--fullscreen": R.value,
-				"bb-offcanvas--deny-close": I.value,
-				"bb-offcanvas--dragging": X.value,
-				"bb-offcanvas--instant-stack": J.value,
-				"bb-offcanvas--covered": q.value,
+				"bb-offcanvas--open": s.value,
+				"bb-offcanvas--visible": E.value,
+				"bb-offcanvas--fullscreen": ot.value,
+				"bb-offcanvas--deny-close": N.value,
+				"bb-offcanvas--dragging": G.value,
+				"bb-offcanvas--swipe-exit": K.value,
+				"bb-offcanvas--instant-stack": U.value,
+				"bb-offcanvas--covered": H.value,
 				"bb-offcanvas--has-handle": e.draggable,
-				"bb-offcanvas--no-header": !x(),
-				[`bb-offcanvas--${y.side}`]: !0
+				"bb-offcanvas--no-header": !v(),
+				[`bb-offcanvas--${m.side}`]: !0
 			}].flat()],
-			inert: !d.value && !D.value || q.value,
+			inert: !s.value && !E.value || H.value,
 			style: {
-				"--max-size": Ue.value,
-				"--transition-duration": `${y.transitionDuration}ms`,
-				"--stack-gap": `${y.stackGap}px`,
-				...st.value
+				"--max-size": et.value,
+				"--transition-duration": `${m.transitionDuration}ms`,
+				"--stack-gap": `${m.stackGap}px`,
+				...bt.value
 			}
-		}, Se(h(a), !0), {
-			onCancel: We,
-			onClick: Te(ze, ["self"]),
-			onPointercancel: Le,
-			onPointerdown: _t
-		}), [h(Ie) ? (f(), c(me, { key: 0 }, [
-			e.draggable ? (f(), c("div", De)) : s("", !0),
-			x() ? (f(), c("div", Oe, [m(e.$slots, "header", {
-				close: F,
+		}, De(d(ie), !0), {
+			onCancel: tt,
+			onClick: Ae(qe, ["self"]),
+			onPointercancel: Ge,
+			onPointerdown: Ke
+		}), [d(S) ? (c(), a(ve, { key: 0 }, [
+			e.draggable ? (c(), a("div", Ne)) : i("", !0),
+			v() ? (c(), a("div", Pe, [u(e.$slots, "header", {
+				close: M,
 				title: e.title,
-				titleId: T
-			}, () => [l("span", {
-				id: T,
-				class: "bb-offcanvas__title"
-			}, [m(e.$slots, "title", { text: e.title }, () => [ge(xe(e.title), 1)])]), e.hideClose ? s("", !0) : (f(), he(ue, {
-				key: 0,
-				"aria-label": h(Fe)("offCanvas.closeLabel").value,
-				onClick: Ge
-			}, null, 8, ["aria-label"]))])])) : s("", !0),
-			l("div", {
+				titleId: C
+			}, () => [
+				_() ? (c(), a("span", {
+					key: 0,
+					id: C,
+					class: "bb-offcanvas__title"
+				}, [u(e.$slots, "title", { text: e.title }, () => [be(Ee(e.title), 1)])])) : i("", !0),
+				w() ? (c(), a("p", {
+					key: 1,
+					id: We,
+					class: "bb-offcanvas__description"
+				}, [u(e.$slots, "description", { text: e.description }, () => [be(Ee(e.description), 1)])])) : i("", !0),
+				e.hideClose ? i("", !0) : (c(), ye(he, {
+					key: 2,
+					"aria-label": d(Ue)("offCanvas.closeLabel").value,
+					onClick: nt
+				}, null, 8, ["aria-label"]))
+			])])) : i("", !0),
+			o("div", {
 				ref_key: "body",
-				ref: Y,
+				ref: W,
 				class: "bb-offcanvas__body scrollbar-border"
-			}, [l("div", ke, [m(e.$slots, "default", { close: F })])], 512),
-			l("div", Ae, [m(e.$slots, "footer")])
-		], 64)) : s("", !0)], 16, Ee));
+			}, [o("div", Fe, [u(e.$slots, "default", { close: M }), !v() && !e.hideClose ? (c(), ye(he, {
+				key: 0,
+				"aria-label": d(Ue)("offCanvas.closeLabel").value,
+				onClick: nt
+			}, null, 8, ["aria-label"])) : i("", !0)])], 512),
+			o("div", Ie, [u(e.$slots, "footer")])
+		], 64)) : i("", !0)], 16, Me));
 	}
 });
 //#endregion
-export { y as default };
+export { m as default };

package/dist/components/BbOffCanvas/types.d.ts

@@ -4,6 +4,18 @@ import { Responsive } from '../../types/ResponsiveSize';
 export type { Sizes };
 type OffCanvasSize = NonNullable<Size<Sizes>['size']> | 'auto';
 export type BbOffCanvasProps = {
+    /**
+     * One short line under the title, in the header — the shadcn
+     * `DialogDescription` shape: same block as the title, lower hierarchy,
+     * muted.
+     *
+     * It is also what `aria-describedby` points at. That wiring was dropped in
+     * v3 along with the old `description` prop, on the reasoning that pointing
+     * it at arbitrary body content would read whole forms aloud — true, and the
+     * reason it aims at THIS element only. Keep it to a sentence; anything
+     * longer belongs in the body.
+     */
+    description?: string;
     /**
      * Disable EVERY user-initiated dismissal: backdrop click, Escape,
      * drag-to-dismiss AND the header close (×) button (denied attempts play the
@@ -26,10 +38,10 @@ export type BbOffCanvasProps = {
      */
     fullscreen?: boolean | 'mobile';
     /**
-     * Enable drag-to-dismiss. The panel can be dragged from anywhere toward its
-     * edge to close, and a grab handle is shown on the inner edge as the
-     * affordance. When `false`, the panel is static (dismiss via the close button,
-     * backdrop, or Escape only).
+     * Enable drag-to-dismiss via VueUse `useSwipe` (fixed ~50px threshold toward
+     * the exit edge, including from the scrollable body once it is at its scroll
+     * edge). A grab handle on the inner edge is the visual cue. When `false`, the
+     * panel is static (dismiss via the close button, backdrop, or Escape only).
      * @defaultValue `false`
      */
     draggable?: boolean;
@@ -103,17 +115,30 @@ export type BbOffCanvasHeaderSlotProps = {
     title: BbOffCanvasProps['title'];
 };
 /** Props exposed by the `title` slot. */
+/** Props exposed by the `description` slot. */
+export type BbOffCanvasDescriptionSlotProps = {
+    /** The `description` prop value. */
+    text: BbOffCanvasProps['description'];
+};
 export type BbOffCanvasTitleSlotProps = {
     /** The `title` prop value. */
     text: BbOffCanvasProps['title'];
 };
 export type BbOffCanvasSlots = {
+    /**
+     * Replaces the description text under the title. Renders the header even
+     * when `title` and `description` are unset — a slotted description is a
+     * description, the same rule `#title` follows.
+     */
+    description?: (props: BbOffCanvasDescriptionSlotProps) => any;
     /**
      * Replaces the entire off-canvas header section (title + close button). Maintains accessibility wiring via the provided props.
      */
     header?: (props: BbOffCanvasHeaderSlotProps) => any;
     /**
-     * Replaces the default title text inside the header. Remains linked to the panel through `aria-labelledby`.
+     * Replaces the default title text inside the header. Remains linked to the
+     * panel through `aria-labelledby`. Providing this slot renders the header even
+     * when `title` is unset — a slotted title is a title.
      */
     title?: (props: BbOffCanvasTitleSlotProps) => any;
     /**

package/dist/components/BbPagination/BbPagination.vue.d.ts

@@ -18,9 +18,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     queryKey: string;
-    align: "left" | "right" | "center";
     ellipsis: string;
     maxSize: number | string;
+    align: "left" | "right" | "center";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;