bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.65

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

@@ -6,6 +6,8 @@ import { Responsive } from '../../types/ResponsiveSize';
 import { BbSnapPoint } from './sheetSnap';
 export type { Sizes, BbSnapPoint };
 type OffCanvasSize = NonNullable<Size<Sizes>['size']> | 'auto';
+/** The viewport edge a `BbOffCanvas` docks to. */
+export type OffCanvasSide = 'left' | 'top' | 'right' | 'bottom';
 /**
  * Passthrough parts of `BbOffCanvas` (plans/passthrough/BbOffCanvas.md).
  *
@@ -167,11 +169,13 @@ export type BbOffCanvasProps = {
      */
     transitionDuration?: number;
     /**
-     * Which viewport edge the offcanvas docks to (and slides in from).
+     * Which viewport edge the offcanvas docks to (and slides in from). Also a
+     * per-breakpoint map (e.g. `{ default: 'bottom', md: 'right' }`), resolved
+     * when the panel opens: an open panel keeps its side through a resize.
      *
      * @defaultValue `'left'`
      */
-    side?: 'left' | 'top' | 'right' | 'bottom';
+    side?: Responsive<'left' | 'top' | 'right' | 'bottom'>;
 };
 export type BbOffCanvasEvents = {
     /** Emitted as soon as the user triggers the open action (model becomes true). */

package/dist/components/BbPopover/BbPopover.vue_vue_type_script_setup_true_lang.js

@@ -6,19 +6,20 @@ import { isTopEscapeEntry as a, pushEscapeEntry as ee, removeEscapeEntry as te,
 import { useUntil as re } from "../../composables/useUntil.js";
 import { removedPropsFor as ie } from "../../deprecation/removedProps.js";
 import { warnRemovedAttrs as ae } from "../../utilities/functions/warnRemovedAttrs.js";
-import { extractDomContainer as oe } from "../../utilities/functions/extractDomContainer.js";
+import { domElement as oe, extractDomContainer as se, extractHtmlContainer as ce } from "../../utilities/functions/extractDomContainer.js";
 import { transitions as o } from "../../utilities/misc/transitions.js";
-import se from "../CommonPopover/CommonPopover.vue.js";
-import { useMobile as ce } from "../../composables/useMobile.js";
-import { useClosingInert as le } from "../../composables/useClosingInert.js";
-import { BB_OFF_CANVAS_PT as ue } from "../BbOffCanvas/types.js";
-import de from "../BbOffCanvas/BbOffCanvas.vue.js";
-import { parseWidthString as fe } from "../../utilities/functions/parseWidthString.js";
-import { BB_POPOVER_PT as pe } from "./types.js";
-import { Fragment as me, computed as s, createBlock as he, createCommentVNode as c, createElementBlock as l, createElementVNode as ge, createSlots as _e, defineComponent as ve, mergeModels as u, mergeProps as d, nextTick as ye, normalizeProps as be, onBeforeUnmount as xe, onDeactivated as Se, onMounted as Ce, openBlock as f, ref as p, renderSlot as m, unref as h, useModel as we, useTemplateRef as Te, watch as g, withCtx as _ } from "vue";
-import { useElementSize as Ee, useIntersectionObserver as De } from "@vueuse/core";
+import le from "../CommonPopover/CommonPopover.vue.js";
+import { useMobile as ue } from "../../composables/useMobile.js";
+import { useClosingInert as de } from "../../composables/useClosingInert.js";
+import { firstFocusableMatch as fe } from "../../utils/focusVisibility.js";
+import { BB_OFF_CANVAS_PT as pe } from "../BbOffCanvas/types.js";
+import me from "../BbOffCanvas/BbOffCanvas.vue.js";
+import { parseWidthString as he } from "../../utilities/functions/parseWidthString.js";
+import { BB_POPOVER_PT as ge } from "./types.js";
+import { Fragment as _e, computed as s, createBlock as ve, createCommentVNode as c, createElementBlock as l, createElementVNode as ye, createSlots as be, defineComponent as xe, mergeModels as u, mergeProps as d, nextTick as Se, normalizeProps as Ce, onBeforeUnmount as we, onDeactivated as Te, onMounted as Ee, openBlock as f, ref as p, renderSlot as m, unref as h, useModel as De, useTemplateRef as Oe, watch as g, withCtx as _ } from "vue";
+import { useElementSize as ke, useIntersectionObserver as Ae } from "@vueuse/core";
 //#region src/components/BbPopover/BbPopover.vue?vue&type=script&setup=true&lang.ts
-var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
+var je = 500, Me = 10, v = /*@__PURE__*/ xe({
 	inheritAttrs: !1,
 	__name: "BbPopover",
 	props: /*@__PURE__*/ u({
@@ -73,13 +74,13 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 		"shown",
 		"hidden"
 	], ["update:modelValue"]),
-	setup(o, { emit: ve }) {
-		let u = we(o, "modelValue"), v = o, y = ve, Ae = r();
+	setup(o, { emit: xe }) {
+		let u = De(o, "modelValue"), v = o, y = xe, Ne = r();
 		process.env.NODE_ENV !== "production" && ae("BbPopover", ie("BbPopover"));
-		let { id: je } = i(), b = v.id ?? je.value, x = `bbp_${b}`, S = p(), Me = s(() => T.value && S.value?.id || b), Ne = Te("popover-ref"), C = s(() => oe(Ne.value)), w = re(u), T = s(() => v.activator != null), { isMobile: Pe } = ce(), E = () => (v.adaptive ?? Ae.adaptive) && Pe.value ? "canvas" : "popover", D = p(E()), O = s(() => D.value === "canvas");
+		let { id: Pe } = i(), b = v.id ?? Pe.value, x = `bbp_${b}`, S = p(), Fe = s(() => T.value && S.value?.id || b), Ie = Oe("popover-ref"), C = s(() => ce(Ie.value)), w = re(u), T = s(() => v.activator != null), { isMobile: Le } = ue(), E = () => (v.adaptive ?? Ne.adaptive) && Le.value ? "canvas" : "popover", D = p(E()), O = s(() => D.value === "canvas");
 		g([
 			() => v.adaptive,
-			Pe,
+			Le,
 			u
 		], () => {
 			u.value || (D.value = E());
@@ -87,10 +88,10 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 		let k = n({
 			component: "BbPopover",
 			props: v,
-			parts: pe.parts,
-			states: pe.states,
+			parts: ge.parts,
+			states: ge.states,
 			active: { open: () => u.value }
-		}), Fe = s(() => ({
+		}), Re = s(() => ({
 			side: "bottom",
 			size: "auto",
 			draggable: !0,
@@ -98,10 +99,10 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			focusTarget: v.focusTarget,
 			transitionDuration: v.transitionDuration,
 			...t(v.offCanvasProps),
-			...w.value && !v.offCanvasProps?.title ? { "aria-labelledby": Me.value } : {}
-		})), Ie = () => {
+			...w.value && !v.offCanvasProps?.title ? { "aria-labelledby": Fe.value } : {}
+		})), ze = () => {
 			S.value?.focus(), y("hidden");
-		}, Le = s(() => {
+		}, Be = s(() => {
 			let e = v.trigger;
 			return new Set(Array.isArray(e) ? e : [e]);
 		}), A = (e, t) => ({ getBoundingClientRect: () => ({
@@ -116,19 +117,19 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			toJSON() {
 				return this;
 			}
-		}) }), j = p(null), Re = s(() => v.placement === "cursor" && j.value ? j.value : S.value), M, N = null, P = !1, F = () => {
+		}) }), j = p(null), Ve = s(() => v.placement === "cursor" && j.value ? j.value : S.value), M, N = null, P = !1, F = () => {
 			clearTimeout(M), N = null;
-		}, ze = (e) => {
-			S.value = oe(e) ?? void 0;
-		}, Be = s(() => {
-			let e = Le.value;
+		}, He = (e) => {
+			S.value = se(e) ?? void 0;
+		}, Ue = s(() => {
+			let e = Be.value;
 			return {
 				"aria-expanded": w.value ? u.value : void 0,
 				"aria-controls": w.value ? x : void 0,
 				"aria-haspopup": "dialog",
 				id: b,
 				disabled: !!v.disabled,
-				ref: ze,
+				ref: He,
 				...e.has("click") ? { onClick: J } : {},
 				...e.has("contextMenu") ? {
 					onContextmenu: Y,
@@ -140,8 +141,8 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			};
 		});
 		g(() => v.activator, (e) => {
-			e && ze(e);
-		}, { immediate: !0 }), g([S, Le], ([e, t], n, r) => {
+			e && He(e);
+		}, { immediate: !0 }), g([S, Be], ([e, t], n, r) => {
 			if (!e || !T.value) return;
 			let i = [];
 			t.has("click") && (e.addEventListener("click", J), i.push(() => e.removeEventListener("click", J))), t.has("contextMenu") && (e.addEventListener("contextmenu", Y), e.addEventListener("pointerdown", X), e.addEventListener("pointermove", Z), e.addEventListener("pointerup", Q), e.addEventListener("pointercancel", Q), i.push(() => {
@@ -157,7 +158,7 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			w
 		], ([e, t, n]) => {
 			!e || !T.value || !n || (e.setAttribute("aria-expanded", String(t)), e.setAttribute("aria-controls", x));
-		}, { immediate: !0 }), De(S, ([{ intersectionRatio: e }]) => {
+		}, { immediate: !0 }), Ae(() => oe(S.value), ([{ intersectionRatio: e }]) => {
 			!(e >= .99) && u.value && !O.value && $();
 		}, { threshold: [0, 1] });
 		let I = 0, L = (e) => {
@@ -166,17 +167,17 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			if (!(t instanceof Node)) return;
 			let n = C.value?.contains(t), r = S.value?.contains(t);
 			!n && !r && $();
-		}, Ve = s(() => v.modal ? {} : { role: "dialog" }), R = !1, z = !1, B = (e) => {
+		}, We = s(() => v.modal ? {} : { role: "dialog" }), R = !1, z = !1, B = (e) => {
 			if (a(W)) return !1;
 			let t = ne();
 			return t ? !t.element || t.element.contains(e) : !1;
-		}, V = /* @__PURE__ */ new Set(), He = () => {
+		}, V = /* @__PURE__ */ new Set(), Ge = () => {
 			V = /* @__PURE__ */ new Set();
 			let e = S.value?.closest("dialog");
 			for (; e;) e.open && V.add(e), e = e.parentElement?.closest("dialog");
 		}, H = () => {
 			R = !0, $();
-		}, Ue = (e) => {
+		}, Ke = (e) => {
 			if (e.timeStamp <= I) return;
 			let t = e.target;
 			if (t instanceof Node) {
@@ -190,7 +191,7 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			if (!u.value || e.timeStamp <= I) return;
 			let t = e.target;
 			t instanceof Node && (S.value?.contains(t) || C.value?.contains(t) || B(t) || H());
-		}, We = (e) => {
+		}, qe = (e) => {
 			let t = e.target;
 			if (!(t instanceof Node)) return;
 			let n = C.value;
@@ -201,42 +202,42 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 				return;
 			}
 			B(t) || H();
-		}, W = Symbol("bb-popover"), Ge = (e) => {
+		}, W = Symbol("bb-popover"), Je = (e) => {
 			e.key === "Escape" && a(W) && (e.preventDefault(), e.stopImmediatePropagation(), $());
-		}, Ke = () => {
-			ee(W, { element: () => C.value }), I = performance.now(), v.modal ? (document.addEventListener("click", L, { passive: !0 }), document.addEventListener("contextmenu", L, { passive: !0 })) : (R = !1, He(), document.addEventListener("pointerdown", Ue, {
+		}, Ye = () => {
+			ee(W, { element: () => C.value }), I = performance.now(), v.modal ? (document.addEventListener("click", L, { passive: !0 }), document.addEventListener("contextmenu", L, { passive: !0 })) : (R = !1, Ge(), document.addEventListener("pointerdown", Ke, {
 				passive: !0,
 				capture: !0
-			}), document.addEventListener("focusin", We, { passive: !0 }), document.addEventListener("click", U, { passive: !0 }), document.addEventListener("contextmenu", U, { passive: !0 })), document.addEventListener("keydown", Ge, { capture: !0 });
-		}, qe = () => {
-			te(W), document.removeEventListener("click", L), document.removeEventListener("contextmenu", L), document.removeEventListener("pointerdown", Ue, { capture: !0 }), document.removeEventListener("focusin", We), document.removeEventListener("click", U), document.removeEventListener("contextmenu", U), document.removeEventListener("keydown", Ge, { capture: !0 });
-		}, G = !1, Je = async () => {
+			}), document.addEventListener("focusin", qe, { passive: !0 }), document.addEventListener("click", U, { passive: !0 }), document.addEventListener("contextmenu", U, { passive: !0 })), document.addEventListener("keydown", Je, { capture: !0 });
+		}, Xe = () => {
+			te(W), document.removeEventListener("click", L), document.removeEventListener("contextmenu", L), document.removeEventListener("pointerdown", Ke, { capture: !0 }), document.removeEventListener("focusin", qe), document.removeEventListener("click", U), document.removeEventListener("contextmenu", U), document.removeEventListener("keydown", Je, { capture: !0 });
+		}, G = !1, Ze = async () => {
 			if (O.value) return;
-			G = !0, K = !1, y("show"), Ke(), await ye();
-			let e = v.focusTarget ?? "[tabindex]:not([tabindex=\"-1\"]), button, a, input, select, textarea", t = C.value?.querySelector(e);
-			t instanceof HTMLElement && t.focus();
-		}, Ye = () => {
-			G && (G = !1, K = !0, y("hide"), qe(), R ? R = !1 : S.value && S.value.focus());
-		}, K = !1, Xe = () => {
-			K && (K = !1, v.modal && Ze(), y("hidden"));
-		}, Ze = () => {
+			G = !0, K = !1, y("show"), Ye(), await Se();
+			let e = v.focusTarget ?? "[tabindex]:not([tabindex=\"-1\"]), button, a, input, select, textarea";
+			fe(C.value, e)?.focus();
+		}, Qe = () => {
+			G && (G = !1, K = !0, y("hide"), Xe(), R ? R = !1 : S.value && S.value.focus());
+		}, K = !1, $e = () => {
+			K && (K = !1, v.modal && et(), y("hidden"));
+		}, et = () => {
 			let e = document.activeElement;
 			(!e || e === document.body || C.value?.contains(e)) && S.value?.focus();
 		};
 		g(O, (e) => {
-			e && Xe();
+			e && $e();
 		});
-		let Qe = le(u, () => v.transitionDuration), $e = ({ availableHeight: e }) => d({
+		let tt = de(u, () => v.transitionDuration), nt = ({ availableHeight: e }) => d({
 			class: ["bb-popover__panel", { "bb-popover__panel--scrollable": v.scrollable }],
-			inert: Qe.value,
+			inert: tt.value,
 			style: { "--max-h": v.scrollable && e != null ? `${e}px` : void 0 }
 		}, k.panel);
 		g(u, (e) => {
-			e ? (D.value = E(), Je()) : Ye();
-		}), Ce(() => {
-			u.value && Je();
-		}), xe(() => {
-			F(), qe();
+			e ? (D.value = E(), Ze()) : Qe();
+		}), Ee(() => {
+			u.value && Ze();
+		}), we(() => {
+			F(), Xe();
 		});
 		function q() {
 			v.disabled || (u.value = !0);
@@ -261,12 +262,12 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 				y: e.clientY
 			}, M = setTimeout(() => {
 				P = !0, v.placement === "cursor" && N && (j.value = A(N.x, N.y)), N = null, q();
-			}, Oe));
+			}, je));
 		}
 		function Z(e) {
 			if (!N) return;
 			let t = e.clientX - N.x, n = e.clientY - N.y;
-			Math.sqrt(t * t + n * n) > ke && F();
+			Math.sqrt(t * t + n * n) > Me && F();
 		}
 		function Q() {
 			F();
@@ -274,24 +275,24 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 		function $() {
 			u.value = !1;
 		}
-		let et = s(() => {
+		let rt = s(() => {
 			if (!v.width) return !1;
-			let { unit: e } = fe(v.width);
+			let { unit: e } = he(v.width);
 			return e === "%";
-		}), { width: tt } = Ee(s(() => et.value ? S.value : void 0), {
+		}), { width: it } = ke(s(() => oe(rt.value ? S.value : void 0)), {
 			width: 0,
 			height: 0
-		}, { box: "border-box" }), nt = s(() => {
+		}, { box: "border-box" }), at = s(() => {
 			if (!v.width) return;
-			let { value: e, unit: t } = fe(v.width);
-			return t === "%" && S.value ? `${tt.value * (e / 100)}px` : `${e}px`;
+			let { value: e, unit: t } = he(v.width);
+			return t === "%" && S.value ? `${it.value * (e / 100)}px` : `${e}px`;
 		});
-		return Se($), (t, n) => (f(), l(me, null, [T.value ? c("", !0) : m(t.$slots, "activator", be(d({ key: 0 }, {
-			props: Be.value,
+		return Te($), (t, n) => (f(), l(_e, null, [T.value ? c("", !0) : m(t.$slots, "activator", Ce(d({ key: 0 }, {
+			props: Ue.value,
 			disabled: !!t.disabled,
 			open: u.value,
 			placement: t.placement
-		}))), O.value ? (f(), he(de, d({
+		}))), O.value ? (f(), ve(me, d({
 			key: 1,
 			id: x,
 			modelValue: u.value,
@@ -303,13 +304,13 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 				footer: "footer",
 				panel: "root",
 				sheet: "root"
-			}, h(ue).states, () => t.offCanvasProps?.pt)
-		}, d(Fe.value, {
-			onHidden: Ie,
+			}, h(pe).states, () => t.offCanvasProps?.pt)
+		}, d(Re.value, {
+			onHidden: ze,
 			onHide: () => y("hide"),
 			onShow: () => y("show"),
 			onShown: () => y("shown")
-		}, h(e)(t.$attrs))), _e({
+		}, h(e)(t.$attrs))), be({
 			default: _(() => [m(t.$slots, "default", {
 				close: $,
 				disabled: !!t.disabled,
@@ -335,16 +336,16 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 				placement: t.placement
 			})]),
 			key: "1"
-		} : void 0]), 1040, ["modelValue", "pt"])) : (f(), he(se, d({
+		} : void 0]), 1040, ["modelValue", "pt"])) : (f(), ve(le, d({
 			key: 2,
 			id: x,
 			ref: "popover-ref",
 			modelValue: u.value,
 			"onUpdate:modelValue": n[1] ||= (e) => u.value = e,
-			anchor: Re.value,
-			"aria-labelledby": h(w) ? Me.value : void 0,
+			anchor: Ve.value,
+			"aria-labelledby": h(w) ? Fe.value : void 0,
 			boundary: t.boundary,
-			"bubble-attrs": $e,
+			"bubble-attrs": nt,
 			class: "bb-popover",
 			dialog: t.modal,
 			eager: t.eager,
@@ -352,10 +353,10 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 			offset: t.offset,
 			padding: t.padding,
 			placement: t.placement === "cursor" ? "bottom-start" : t.placement,
-			style: { width: nt.value },
+			style: { width: at.value },
 			"transition-duration": t.transitionDuration
-		}, d(Ve.value, t.$attrs, h(k).root), {
-			onHidden: Xe,
+		}, d(We.value, t.$attrs, h(k).root), {
+			onHidden: $e,
 			onShown: n[2] ||= (e) => y("shown")
 		}), {
 			default: _(() => [
@@ -368,7 +369,7 @@ var Oe = 500, ke = 10, v = /*@__PURE__*/ ve({
 					open: u.value,
 					placement: t.placement
 				})], 16)) : c("", !0),
-				ge("div", d({ class: "bb-popover__content scrollbar-border" }, h(k).content), [m(t.$slots, "default", {
+				ye("div", d({ class: "bb-popover__content scrollbar-border" }, h(k).content), [m(t.$slots, "default", {
 					close: $,
 					disabled: !!t.disabled,
 					open: u.value,