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

package/dist/components/BbDialog/BbDialog.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,34 @@
-import { useId as e } from "../../composables/useId.js";
-import { useUntil as t } from "../../composables/useUntil.js";
-import { removedPropsFor as ee } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as te } from "../../utilities/functions/warnRemovedAttrs.js";
+import { useConfig as e } from "../../composables/useConfig.js";
+import { useId as t } from "../../composables/useId.js";
+import { useUntil as ee } from "../../composables/useUntil.js";
+import { removedPropsFor as te } from "../../deprecation/removedProps.js";
+import { useLogger as ne } from "../../composables/useLogger.js";
+import { warnRemovedAttrs as re } from "../../utilities/functions/warnRemovedAttrs.js";
 import { transitions as n } from "../../utilities/misc/transitions.js";
-import { overlaySurfaceIsolation as ne } from "../../utils/overlaySurfaceIsolation.js";
-import { isTopEscapeEntry as re, pushEscapeEntry as ie, removeEscapeEntry as ae } from "../../utils/overlayEscapeStack.js";
-import { useMobile as oe } from "../../composables/useMobile.js";
-import { wait as se } from "../../utilities/functions/wait.js";
-import { parseSize as ce } from "../../utilities/functions/parseSize.js";
-import { useLocale as le } from "../../composables/useLocale.js";
-import { useBreakpoint as ue } from "../../composables/useBreakpoint.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 { useBreakpoint as fe } from "../../composables/useBreakpoint.js";
 import r from "../CloseIcon/CloseButton.vue.js";
-import { registerTopLayerHost as de } from "../../composables/useTopLayer.js";
-import fe from "../BbOffCanvas/BbOffCanvas.vue.js";
-import { useDialogStack as pe } from "./useDialogStack.js";
-import { config as i } from "virtual:bitboss-ui/config";
-import { Fragment as me, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as he, createTextVNode as ge, defineComponent as u, guardReactiveProps as d, mergeModels as f, mergeProps as p, nextTick as _e, normalizeProps as m, onBeforeUnmount as ve, onMounted as ye, openBlock as h, ref as g, renderSlot as _, toDisplayString as be, toHandlers as xe, unref as v, useModel as Se, watch as y, withCtx as b, withModifiers as Ce } from "vue";
+import { registerTopLayerHost as pe } from "../../composables/useTopLayer.js";
+import me from "../BbOffCanvas/BbOffCanvas.vue.js";
+import { useDialogStack as he } from "./useDialogStack.js";
+import { Fragment as ge, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as _e, createTextVNode as l, defineComponent as u, guardReactiveProps as d, mergeModels as f, mergeProps as p, nextTick as m, normalizeProps as h, onBeforeUnmount as ve, onMounted as ye, openBlock as g, ref as _, renderSlot as v, toDisplayString as be, toHandlers as xe, unref as y, useModel as Se, useSlots as Ce, watch as b, withCtx as x, withModifiers as we } from "vue";
 //#region src/components/BbDialog/BbDialog.vue?vue&type=script&setup=true&lang.ts
-var we = ["aria-labelledby", "inert"], Te = {
+var Te = [
+	"aria-describedby",
+	"aria-labelledby",
+	"inert"
+], Ee = {
 	key: 0,
 	class: "bb-dialog__header"
-}, Ee = { class: "bb-dialog__body scrollbar-border" }, De = { class: "bb-dialog__body-content" }, Oe = { class: "bb-dialog__footer" }, x = 4, S = /*@__PURE__*/ u({
+}, De = { class: "bb-dialog__body scrollbar-border" }, Oe = { class: "bb-dialog__body-content" }, ke = { class: "bb-dialog__footer" }, Ae = 4, S = /*@__PURE__*/ u({
 	__name: "BbDialog",
 	props: /*@__PURE__*/ f({
+		description: {},
 		disabled: { type: Boolean },
 		eager: { type: Boolean },
 		focusTarget: {},
@@ -52,13 +58,14 @@ var we = ["aria-labelledby", "inert"], Te = {
 		"hidden"
 	], ["update:modelValue"]),
 	setup(n, { emit: u }) {
-		let f = Se(n, "modelValue"), S = n, C = u;
-		process.env.NODE_ENV !== "production" && te("BbDialog", ee("BbDialog"));
-		let { t: w } = le(), { isMobile: T } = oe(), { resolve: ke } = ue(), E = () => (S.adaptive ?? i.adaptive) && T.value ? "canvas" : "dialog", D = g(E());
-		y([() => S.adaptive, T], () => {
-			f.value || (D.value = E());
+		let f = Se(n, "modelValue"), S = n, C = u, w = Ce(), T = e();
+		process.env.NODE_ENV !== "production" && re("BbDialog", te("BbDialog"));
+		let { t: E } = ue(), { isMobile: D } = ce(), { resolve: je } = fe(), O = () => (S.adaptive ?? T.adaptive) && D.value ? "canvas" : "dialog", k = _(O());
+		b([() => S.adaptive, D], () => {
+			f.value || (k.value = O());
 		});
-		let Ae = a(() => ({
+		let Me = i(() => ({
+			description: S.description,
 			disabled: S.disabled,
 			eager: S.eager,
 			focusTarget: S.focusTarget,
@@ -72,140 +79,159 @@ var we = ["aria-labelledby", "inert"], Te = {
 			draggable: !0,
 			size: "auto",
 			...S.offCanvasProps
-		})), O = g(null), k = `title_${e().id.value}`, A = a(() => !!S.title), j = t(() => f.value || S.eager, { initialValue: f.value || S.eager }), M = a(() => S.fullscreen === !0 || S.fullscreen === "mobile" && T.value), N = () => typeof document < "u", P = a(() => !!(S.disabled || S.persistent)), F = g(!1), I = g(null), L = () => {
-			I.value = null;
-		}, je = (e) => {
-			I.value = {
+		})), A = _(null), j = `title_${t().id.value}`, M = `desc_${t().id.value}`, N = () => !!S.description || !!w.description, P = () => !!S.title || !!w.title, F = () => P() || N(), I = ee(() => f.value || S.eager, { initialValue: f.value || S.eager }), L = i(() => S.fullscreen === !0 || S.fullscreen === "mobile" && D.value), R = () => typeof document < "u", Ne = i(() => !!(S.disabled || S.persistent)), z = _(!1), B = _(null), V = () => {
+			B.value = null;
+		}, Pe = (e) => {
+			B.value = {
 				startX: e.clientX,
 				startY: e.clientY,
 				startedOnBackdrop: e.target === e.currentTarget
 			};
-		}, Me = (e) => {
-			let t = I.value;
-			L(), !(t && !t.startedOnBackdrop) && (t && (Math.abs(e.clientX - t.startX) > x || Math.abs(e.clientY - t.startY) > x) || Z(e));
-		}, R, z = (e) => {
-			clearTimeout(R), F.value = !0, R = setTimeout(() => {
-				F.value = !1;
+		}, Fe = (e) => {
+			let t = B.value;
+			V(), !(t && !t.startedOnBackdrop) && (t && (Math.abs(e.clientX - t.startX) > Ae || Math.abs(e.clientY - t.startY) > Ae) || Ge(e));
+		}, H, U = (e) => {
+			clearTimeout(H), z.value = !0, H = setTimeout(() => {
+				z.value = !1;
 			}, e);
-		}, B = Symbol("bb-dialog-escape"), Ne = () => {
-			ie(B), N() && document.addEventListener("keydown", H, { capture: !0 });
-		}, V = () => {
-			ae(B), N() && document.removeEventListener("keydown", H, { capture: !0 });
-		}, Pe = () => {
+		}, W = Symbol("bb-dialog-escape"), Ie = () => {
+			oe(W), R() && document.addEventListener("keydown", K, { capture: !0 });
+		}, G = () => {
+			se(W), R() && document.removeEventListener("keydown", K, { capture: !0 });
+		}, Le = () => {
 			if (!S.focusTarget) return;
-			let e = O.value?.querySelector(S.focusTarget);
+			let e = A.value?.querySelector(S.focusTarget);
 			e instanceof HTMLElement && e.focus();
-		}, H = (e) => {
-			if (e.key === "Escape" && !J.value && re(B) && (e.stopImmediatePropagation(), P.value)) return e.preventDefault(), z(200), !1;
-		}, U = g(0), W = g(!1), G = Symbol("bb-dialog"), { stacks: Fe, enter: Ie, leave: Le } = pe(), K = () => {
-			S.stack && Ie(S.stack, G);
-		}, q = () => {
-			S.stack && Le(S.stack, G);
-		}, J = a(() => {
+		}, K = (e) => {
+			if (e.key === "Escape" && !Z.value && ae(W) && (e.stopImmediatePropagation(), Ne.value)) return e.preventDefault(), U(200), !1;
+		}, q = _(0), J = _(!1), Y = Symbol("bb-dialog"), { stacks: Re, enter: ze, leave: Be } = he(), Ve = () => {
+			S.stack && ze(S.stack, Y);
+		}, X = () => {
+			S.stack && Be(S.stack, Y);
+		}, Z = i(() => {
 			if (!S.stack) return !1;
-			let e = Fe.value[S.stack];
-			return !e || !e.includes(G) ? !1 : e[e.length - 1] !== G;
-		}), Y = null, X = async (e) => {
-			if (e) C("show"), U.value++, N() && !document.documentElement.style.getPropertyValue("--scrollbar-width") && document.documentElement.style.setProperty("--scrollbar-width", `${ze()}px`), Ne(), await _e(), W.value = !0, O.value && !O.value.open && O.value.showModal(), K(), O.value && (Y = de(O.value)), Pe(), C("shown");
+			let e = Re.value[S.stack];
+			return !e || !e.includes(Y) ? !1 : e[e.length - 1] !== Y;
+		}), Q = null, He = async (e) => {
+			if (e) C("show"), q.value++, R() && !document.documentElement.style.getPropertyValue("--scrollbar-width") && document.documentElement.style.setProperty("--scrollbar-width", `${qe()}px`), Ie(), await m(), J.value = !0, A.value && !A.value.open && A.value.showModal(), Ve(), A.value && (Q = pe(A.value)), Le(), C("shown");
 			else {
 				C("hide");
-				let e = U.value;
-				if (await se(S.transitionDuration), e !== U.value) return;
-				V(), q(), O.value?.close(), Y?.(), Y = null, W.value = !1, C("hidden");
+				let e = q.value;
+				if (await le(S.transitionDuration), e !== q.value) return;
+				G(), X(), A.value?.close(), Q?.(), Q = null, J.value = !1, C("hidden");
 			}
+		}, Ue = () => {
+			process.env.NODE_ENV !== "production" && (!w.header || S.title || m(() => {
+				!A.value || document.getElementById(j) || ne().warn(`BbDialog: the #header slot does not contain an element with id="${j}", so aria-labelledby points at nothing and the dialog announces as unnamed. Bind the slot's \`titleId\` to your heading: <template #header="{ titleId }"><h2 :id="titleId">…</h2></template>.`);
+			}));
 		};
-		y(f, (e) => {
-			e && (D.value = E()), D.value === "dialog" && X(e);
+		b(f, (e) => {
+			e && (k.value = O()), k.value === "dialog" && He(e);
 		}), ye(() => {
-			f.value && D.value === "dialog" && X(!0);
+			f.value && k.value === "dialog" && He(!0), Ue();
 		}), ve(() => {
-			clearTimeout(R), V(), q(), Y?.(), Y = null;
+			clearTimeout(H), G(), X(), Q?.(), Q = null;
 		});
-		let Re = a(() => M.value ? "100%" : ce(ke(S.size), i.dialogDefaultSizes)), Z = (e) => {
-			if (e.preventDefault(), P.value) return z(300), !1;
-			Q();
-		}, Q = () => {
-			f.value = !1;
+		let We = i(() => L.value ? "100%" : de(je(S.size), T.dialogDefaultSizes)), Ge = (e) => {
+			if (e.preventDefault(), Ne.value) return U(300), !1;
+			$();
 		}, $ = () => {
+			f.value = !1;
+		}, Ke = () => {
 			if (S.disabled) {
-				z(300);
+				U(300);
 				return;
 			}
-			Q();
-		}, ze = () => N() ? window.innerWidth - document.documentElement.clientWidth : 0;
-		return (e, t) => D.value === "canvas" ? (h(), o(fe, p({
+			$();
+		}, qe = () => R() ? window.innerWidth - document.documentElement.clientWidth : 0;
+		return (e, t) => k.value === "canvas" ? (g(), a(me, p({
 			key: 0,
 			modelValue: f.value,
 			"onUpdate:modelValue": t[0] ||= (e) => f.value = e
-		}, Ae.value, {
+		}, Me.value, {
 			onHidden: t[1] ||= (e) => C("hidden"),
 			onHide: t[2] ||= (e) => C("hide"),
 			onShow: t[3] ||= (e) => C("show"),
 			onShown: t[4] ||= (e) => C("shown")
-		}), he({ _: 2 }, [
+		}), _e({ _: 2 }, [
 			e.$slots.default ? {
 				name: "default",
-				fn: b((t) => [_(e.$slots, "default", m(d(t)))]),
+				fn: x((t) => [v(e.$slots, "default", h(d(t)))]),
 				key: "0"
 			} : void 0,
 			e.$slots.header ? {
 				name: "header",
-				fn: b((t) => [_(e.$slots, "header", m(d(t)))]),
+				fn: x((t) => [v(e.$slots, "header", h(d(t)))]),
 				key: "1"
 			} : void 0,
 			e.$slots.title ? {
 				name: "title",
-				fn: b((t) => [_(e.$slots, "title", m(d(t)))]),
+				fn: x((t) => [v(e.$slots, "title", h(d(t)))]),
 				key: "2"
 			} : void 0,
+			e.$slots.description ? {
+				name: "description",
+				fn: x((t) => [v(e.$slots, "description", h(d(t)))]),
+				key: "3"
+			} : void 0,
 			e.$slots.footer ? {
 				name: "footer",
-				fn: b(() => [_(e.$slots, "footer")]),
-				key: "3"
+				fn: x(() => [v(e.$slots, "footer")]),
+				key: "4"
 			} : void 0
-		]), 1040, ["modelValue"])) : (h(), c("dialog", p({
+		]), 1040, ["modelValue"])) : (g(), s("dialog", p({
 			key: 1,
 			ref_key: "dialog",
-			ref: O,
-			"aria-labelledby": v(j) && (A.value || e.$slots.header) ? k : void 0,
+			ref: A,
+			"aria-describedby": y(I) && N() ? M : void 0,
+			"aria-labelledby": y(I) && (P() || e.$slots.header) ? j : void 0,
 			class: ["bb-dialog", {
 				"bb-dialog--open": f.value,
-				"bb-dialog--visible": W.value,
-				"bb-dialog--fullscreen": M.value,
-				"bb-dialog--mobile": v(T),
-				"bb-dialog--deny-close": F.value,
-				"bb-dialog--covered": J.value
+				"bb-dialog--visible": J.value,
+				"bb-dialog--fullscreen": L.value,
+				"bb-dialog--mobile": y(D),
+				"bb-dialog--deny-close": z.value,
+				"bb-dialog--covered": Z.value
 			}],
-			inert: !f.value && !W.value || J.value,
+			inert: !f.value && !J.value || Z.value,
 			style: {
-				"--max-width": Re.value,
+				"--max-width": We.value,
 				"--transition-duration": `${S.transitionDuration}ms`
 			}
-		}, xe(v(ne), !0), {
-			onCancel: Z,
-			onClick: Ce(Me, ["self"]),
-			onPointercancel: L,
-			onPointerdown: je
-		}), [v(j) ? (h(), c(me, { key: 0 }, [
-			A.value || e.$slots.header ? (h(), c("div", Te, [_(e.$slots, "header", {
-				close: Q,
+		}, xe(y(ie), !0), {
+			onCancel: Ge,
+			onClick: we(Fe, ["self"]),
+			onPointercancel: V,
+			onPointerdown: Pe
+		}), [y(I) ? (g(), s(ge, { key: 0 }, [
+			F() || e.$slots.header ? (g(), s("div", Ee, [v(e.$slots, "header", {
+				close: $,
 				title: e.title,
-				titleId: k
-			}, () => [l("span", {
-				id: k,
-				class: "bb-dialog__title"
-			}, [_(e.$slots, "title", { text: e.title }, () => [ge(be(e.title), 1)])]), e.hideClose ? s("", !0) : (h(), o(r, {
-				key: 0,
-				"aria-label": v(w)("dialog.closeLabel").value,
-				onClick: $
-			}, null, 8, ["aria-label"]))])])) : s("", !0),
-			l("div", Ee, [l("div", De, [!A.value && !e.$slots.header && !e.hideClose ? (h(), o(r, {
+				titleId: j
+			}, () => [
+				P() ? (g(), s("span", {
+					key: 0,
+					id: j,
+					class: "bb-dialog__title"
+				}, [v(e.$slots, "title", { text: e.title }, () => [l(be(e.title), 1)])])) : o("", !0),
+				N() ? (g(), s("p", {
+					key: 1,
+					id: M,
+					class: "bb-dialog__description"
+				}, [v(e.$slots, "description", { text: e.description }, () => [l(be(e.description), 1)])])) : o("", !0),
+				e.hideClose ? o("", !0) : (g(), a(r, {
+					key: 2,
+					"aria-label": y(E)("dialog.closeLabel").value,
+					onClick: Ke
+				}, null, 8, ["aria-label"]))
+			])])) : o("", !0),
+			c("div", De, [c("div", Oe, [!F() && !e.$slots.header && !e.hideClose ? (g(), a(r, {
 				key: 0,
-				"aria-label": v(w)("dialog.closeLabel").value,
-				onClick: $
-			}, null, 8, ["aria-label"])) : s("", !0), _(e.$slots, "default", { close: Q })])]),
-			l("div", Oe, [_(e.$slots, "footer")])
-		], 64)) : s("", !0)], 16, we));
+				"aria-label": y(E)("dialog.closeLabel").value,
+				onClick: Ke
+			}, null, 8, ["aria-label"])) : o("", !0), v(e.$slots, "default", { close: $ })])]),
+			c("div", ke, [v(e.$slots, "footer")])
+		], 64)) : o("", !0)], 16, Te));
 	}
 });
 //#endregion

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

@@ -7,6 +7,18 @@ export type { Sizes };
  * Props controlling the BbDialog appearance, accessibility, and closing behaviour.
  */
 export type BbDialogProps = {
+    /**
+     * 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 AND the
      * header close (×) button (denied attempts play the deny nudge). Use it
@@ -40,7 +52,7 @@ export type BbDialogProps = {
     /**
      * Overrides merged over the offcanvas (mobile) surface's props. The drawer
      * defaults to a bottom, draggable, content-sized sheet
-     * (`direction: 'bottom'`, `draggable: true`, `size: 'auto'`); use this to
+     * (`side: 'bottom'`, `draggable: true`, `size: 'auto'`); use this to
      * override those, set other drawer-only options (`stackGap`), or override
      * shared props whose meaning differs on the drawer (`stack`). Ignored on the
      * desktop dialog surface.
@@ -111,11 +123,22 @@ export type BbDialogHeaderSlotProps = {
     title: BbDialogProps['title'];
 };
 /** Props exposed by the `title` slot. */
+/** Props exposed by the `description` slot. */
+export type BbDialogDescriptionSlotProps = {
+    /** The `description` prop value. */
+    text: BbDialogProps['description'];
+};
 export type BbDialogTitleSlotProps = {
     /** The `title` prop value. */
     text: BbDialogProps['title'];
 };
 export type BbDialogSlots = {
+    /**
+     * 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: BbDialogDescriptionSlotProps) => any;
     /** Primary body content of the dialog, rendered in the scrollable body area. */
     default?: (props: BbDialogDefaultSlotProps) => any;
     /** Content rendered in the dialog footer, below the body area. Typically used for action buttons. */
@@ -135,7 +158,11 @@ export type BbDialogSlots = {
      * width, or it renders squeezed against the left edge.
      */
     header?: (props: BbDialogHeaderSlotProps) => any;
-    /** Replaces the default title text inside the header. Remains linked to the dialog through `aria-labelledby`. */
+    /**
+     * Replaces the default title text inside the header. Remains linked to the
+     * dialog through `aria-labelledby`. Providing this slot renders the header
+     * even when `title` is unset — a slotted title is a title.
+     */
     title?: (props: BbDialogTitleSlotProps) => any;
 };
 /** @deprecated Use `BbDialogProps` instead. */

package/dist/components/BbDropdown/AdaptiveDropdown.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     rootGroups: NormalizedGroup[];
     /** Bindings forwarded to `BbOffCanvas` (direction, size, draggable, …). */
     offCanvasProps?: Record<string, unknown>;
+    /** The dropdown's density, forwarded so the sheet reads the same ladder. */
+    compact?: boolean;
 };
 type __VLS_ModelProps = {
     /**