bitboss-ui 3.0.0-beta.47 → 3.0.0-beta.49

package/dist/components/BbBreadcrumbs/BbBreadcrumbs.vue_vue_type_script_setup_true_lang.js

@@ -2,15 +2,15 @@ import { useLogger as e } from "../../composables/useLogger.js";
 import { usePassthrough as t } from "../../composables/usePassthrough.js";
 import { removedPropsFor as n } from "../../deprecation/removedProps.js";
 import { slotKey as r } from "../../utilities/functions/slotKey.js";
-import { warnRemovedAttrs as i } from "../../utilities/functions/warnRemovedAttrs.js";
-import a from "../BbBaseButton/BbBaseButton.vue.js";
-import { useLocale as o } from "../../composables/useLocale.js";
-import s from "../BbIcon/BbIcon.vue.js";
-import c from "../../assets/svgs/chevron_right.svg_raw.js";
-import l from "../BbDropdown/BbDropdown.vue.js";
-import { estimateBreadcrumbItemWidth as ee, estimateEllipsisWidth as te } from "./estimateBreadcrumbItemWidth.js";
-import { BB_BREADCRUMBS_PT as u } from "./types.js";
-import { Fragment as d, computed as f, createBlock as ne, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as re, createTextVNode as ie, createVNode as g, defineComponent as _, guardReactiveProps as v, mergeProps as y, normalizeProps as b, onBeforeUnmount as ae, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as oe, unref as T, useAttrs as se, useSlots as ce, watch as le, withCtx as E } from "vue";
+import { warnRemovedAttrs as ee } from "../../utilities/functions/warnRemovedAttrs.js";
+import { useLocale as i } from "../../composables/useLocale.js";
+import a from "../BbIcon/BbIcon.vue.js";
+import o from "../BbBaseButton/BbBaseButton.vue.js";
+import s from "../../assets/svgs/chevron_right.svg_raw.js";
+import c from "../BbDropdown/BbDropdown.vue.js";
+import { estimateBreadcrumbItemWidth as te, estimateEllipsisWidth as ne } from "./estimateBreadcrumbItemWidth.js";
+import { BB_BREADCRUMBS_PT as l } from "./types.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as re, createTextVNode as ie, createVNode as g, defineComponent as _, guardReactiveProps as v, mergeProps as y, normalizeProps as b, onBeforeUnmount as ae, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as oe, unref as T, useAttrs as se, useSlots as ce, watch as le, withCtx as E } from "vue";
 import { useResizeObserver as ue } from "@vueuse/core";
 //#region src/components/BbBreadcrumbs/BbBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
 var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
@@ -54,15 +54,15 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 	},
 	setup(_) {
 		let k = _;
-		process.env.NODE_ENV !== "production" && i("BbBreadcrumbs", n("BbBreadcrumbs"), { slotKeys: () => k.items.map((e) => e.key) });
+		process.env.NODE_ENV !== "production" && ee("BbBreadcrumbs", n("BbBreadcrumbs"), { slotKeys: () => k.items.map((e) => e.value) });
 		let A = t({
 			component: "BbBreadcrumbs",
 			attrs: se(),
 			props: k,
-			parts: u.parts,
-			states: u.states,
+			parts: l.parts,
+			states: l.states,
 			active: { disabled: () => !!k.disabled }
-		}), { t: j } = o();
+		}), { t: j } = i();
 		e();
 		let M = ce(), we = /* @__PURE__ */ new Set([
 			"prepend",
@@ -70,12 +70,12 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 			"ellipsis",
 			"divider",
 			"activator"
-		]), N = (e) => e.key == null || e.key === "" ? ":keyless" : r(String(e.key)), P = (e, t) => t === k.items.length - 1 && !e.href && !e.to && !e.onClick, Te = (e, t) => {
-			let { "prepend:icon": n, "append:icon": r, ...i } = e;
+		]), N = (e) => e.value == null || e.value === "" ? ":keyless" : r(String(e.value)), P = (e, t) => t === k.items.length - 1 && !e.href && !e.to && !e.onClick, Te = (e, t) => {
+			let { "prepend:icon": n, "append:icon": r, value: ee, label: i, ...a } = e;
 			return P(e, t) ? {
-				...i,
+				...a,
 				"aria-current": "page"
-			} : i;
+			} : a;
 		}, F = (e, t) => {
 			let n = `${N(e)}:${t}`;
 			return M[n] ? {
@@ -88,10 +88,10 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 				name: n,
 				exists: !1
 			};
-		}, Ee = f(() => Object.keys(M).filter((e) => !we.has(e))), I = S(null), L = S(0), R = f(() => k.gapWidth), z = f(() => Math.max(0, k.offsetWidth)), De = f(() => k.estimationBias), B = f(() => k.ellipsisWidth ?? te(O)), Oe = f(() => j("breadcrumbs.label").value), ke = f(() => j("breadcrumbs.openHiddenLabelCount", L.value).value), V = (e) => ee(e.text ?? String(e.key), {
+		}, Ee = d(() => Object.keys(M).filter((e) => !we.has(e))), I = S(null), L = S(0), R = d(() => k.gapWidth), z = d(() => Math.max(0, k.offsetWidth)), De = d(() => k.estimationBias), B = d(() => k.ellipsisWidth ?? ne(O)), Oe = d(() => j("breadcrumbs.label").value), ke = d(() => j("breadcrumbs.openHiddenLabelCount", L.value).value), V = (e) => te(e.label ?? "", {
 			estimationBias: De.value,
 			fontWidth: O
-		}), Ae = f(() => {
+		}), Ae = d(() => {
 			let e = k.items.length;
 			if (e === 0) return 0;
 			let t = k.dividerWidth, n = R.value;
@@ -101,7 +101,7 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 			if (!e) return;
 			let t = getComputedStyle(e);
 			H.value = t.display.includes("flex") && t.flexDirection.startsWith("column");
-		}, je = f(() => ({
+		}, je = d(() => ({
 			"--flex-basis": H.value ? "auto" : `${Math.ceil(Ae.value)}px`,
 			"--flex-grow": L.value > 0 ? "1" : "0",
 			"--gap": `${R.value}px`
@@ -111,11 +111,11 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 				L.value = 0;
 				return;
 			}
-			let n = Math.max(0, e - be - z.value - D), r = k.dividerWidth, i = B.value, a = R.value, o = k.items.map(V), s = Array.from({ length: t + 1 }, () => 0);
-			for (let e = t - 1; e >= 0; e--) s[e] = s[e + 1] + o[e];
-			let c = (e) => n - e <= D / 2, l = s[0] + (t > 1 ? (t - 1) * (r + 2 * a) : 0);
-			if (l <= n) {
-				if (t > 1 && c(l)) {
+			let n = Math.max(0, e - be - z.value - D), r = k.dividerWidth, ee = B.value, i = R.value, a = k.items.map(V), o = Array.from({ length: t + 1 }, () => 0);
+			for (let e = t - 1; e >= 0; e--) o[e] = o[e + 1] + a[e];
+			let s = (e) => n - e <= D / 2, c = o[0] + (t > 1 ? (t - 1) * (r + 2 * i) : 0);
+			if (c <= n) {
+				if (t > 1 && s(c)) {
 					L.value = 1;
 					return;
 				}
@@ -123,9 +123,9 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 				return;
 			}
 			for (let e = t - 1; e >= 1; e--) {
-				let o = s[t - e], l = i + e * (r + 2 * a) + o;
-				if (l <= n) {
-					if (e > 0 && c(l)) {
+				let a = o[t - e], c = ee + e * (r + 2 * i) + a;
+				if (c <= n) {
+					if (e > 0 && s(c)) {
 						L.value = t - (e - 1);
 						return;
 					}
@@ -134,7 +134,7 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 				}
 			}
 			L.value = t - 1;
-		}, W = f(() => I.value), Ne = f(() => k.items.map((e) => `${String(e.key)}::${e.text ?? ""}`).join("|")), G = null, K = null, q = null, J = null, Y = 0, X = null, Z = (e, t) => Math.abs(e - t) <= xe, Q = () => {
+		}, W = d(() => I.value), Ne = d(() => k.items.map((e) => `${String(e.value)}::${e.label ?? ""}`).join("|")), G = null, K = null, q = null, J = null, Y = 0, X = null, Z = (e, t) => Math.abs(e - t) <= xe, Q = () => {
 			X != null && clearTimeout(X), X = setTimeout(() => {
 				X = null, Y = 0;
 			}, Ce);
@@ -168,9 +168,9 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 		}, { immediate: !0 }), ae(() => {
 			K != null && cancelAnimationFrame(K), X != null && clearTimeout(X);
 		});
-		let Fe = f(() => k.items.slice(0, L.value).map((e) => ({
+		let Fe = d(() => k.items.slice(0, L.value).map((e) => ({
 			...e,
-			text: e.text ?? e.key ?? ""
+			label: e.label ?? ""
 		})));
 		return (e, t) => (x(), m("nav", y({
 			ref_key: "navRef",
@@ -183,7 +183,7 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 			h("ol", me, [L.value > 0 ? (x(), m("li", y({
 				key: 0,
 				class: "bb-breadcrumbs__item"
-			}, T(A).part("item", { disabled: e.disabled || void 0 })), [g(l, {
+			}, T(A).part("item", { disabled: e.disabled || void 0 })), [g(c, {
 				items: Fe.value,
 				padding: 0,
 				placement: "bottom-start"
@@ -203,10 +203,10 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 			}, [C(Ee.value, (t) => ({
 				name: t,
 				fn: E((n) => [w(e.$slots, t, b(v(n)))])
-			}))]), 1032, ["items"]), L.value < e.items.length ? (x(), m("span", ge, [w(e.$slots, "divider", {}, () => [g(s, {
-				icon: T(c),
+			}))]), 1032, ["items"]), L.value < e.items.length ? (x(), m("span", ge, [w(e.$slots, "divider", {}, () => [g(a, {
+				icon: T(s),
 				size: "14"
-			}, null, 8, ["icon"])])])) : p("", !0)], 16)) : p("", !0), (x(!0), m(d, null, C(e.items, (t, n) => (x(), m(d, { key: t.key ?? `:keyless-${n}` }, [n >= L.value ? (x(), m("li", y({
+			}, null, 8, ["icon"])])])) : p("", !0)], 16)) : p("", !0), (x(!0), m(u, null, C(e.items, (t, n) => (x(), m(u, { key: t.value ?? `:keyless-${n}` }, [n >= L.value ? (x(), m("li", y({
 				key: 0,
 				class: ["bb-breadcrumbs__item", {
 					"bb-breadcrumbs__item--active": P(t, n),
@@ -216,7 +216,7 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 			}, T(A).part("item", {
 				active: P(t, n),
 				disabled: t.disabled || e.disabled || void 0
-			})), [g(a, y({ ref_for: !0 }, Te(t, n), {
+			})), [g(o, y({ ref_for: !0 }, Te(t, n), {
 				class: "bb-breadcrumbs__breadcrumb",
 				disabled: t.disabled || e.disabled,
 				tag: P(t, n) ? "span" : void 0
@@ -226,9 +226,9 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 						disabled: !!(t.disabled || e.disabled),
 						index: n,
 						item: t,
-						text: t.text
+						label: t.label
 					}),
-					!F(t, "prepend").exists && t["prepend:icon"] ? (x(), ne(s, y({
+					!F(t, "prepend").exists && t["prepend:icon"] ? (x(), f(a, y({
 						key: 0,
 						class: "bb-breadcrumbs__item-icon bb-breadcrumbs__item-icon--prepend",
 						icon: t["prepend:icon"],
@@ -240,7 +240,7 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 					})), null, 16, ["icon"])) : p("", !0),
 					h("span", y({
 						class: "bb-breadcrumbs__text",
-						title: e.items.length > 1 && L.value === e.items.length - 1 ? t.text : void 0,
+						title: e.items.length > 1 && L.value === e.items.length - 1 ? t.label : void 0,
 						ref_for: !0
 					}, T(A).part("text", {
 						active: P(t, n),
@@ -249,15 +249,15 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 						disabled: !!(t.disabled || e.disabled),
 						index: n,
 						item: t,
-						text: t.text
-					}, () => [ie(oe(t.text), 1)])], 16, _e),
+						label: t.label
+					}, () => [ie(oe(t.label), 1)])], 16, _e),
 					w(e.$slots, F(t, "append").name, {
 						disabled: !!(t.disabled || e.disabled),
 						index: n,
 						item: t,
-						text: t.text
+						label: t.label
 					}),
-					!F(t, "append").exists && t["append:icon"] ? (x(), ne(s, y({
+					!F(t, "append").exists && t["append:icon"] ? (x(), f(a, y({
 						key: 1,
 						class: "bb-breadcrumbs__item-icon bb-breadcrumbs__item-icon--append",
 						icon: t["append:icon"],
@@ -269,8 +269,8 @@ var de = ["aria-label"], fe = { class: "bb-breadcrumbs__container" }, pe = {
 					})), null, 16, ["icon"])) : p("", !0)
 				]),
 				_: 2
-			}, 1040, ["disabled", "tag"]), n < e.items.length - 1 ? (x(), m("span", ve, [w(e.$slots, "divider", {}, () => [g(s, {
-				icon: T(c),
+			}, 1040, ["disabled", "tag"]), n < e.items.length - 1 ? (x(), m("span", ve, [w(e.$slots, "divider", {}, () => [g(a, {
+				icon: T(s),
 				size: "14"
 			}, null, 8, ["icon"])])])) : p("", !0)], 16)) : p("", !0)], 64))), 128))]),
 			e.$slots.append ? (x(), m("div", ye, [w(e.$slots, "append", { disabled: e.disabled })])) : p("", !0)

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

@@ -1,27 +1,35 @@
 import { BbBaseButtonProps } from '../BbBaseButton/types';
 import { PtMap, PtValue } from '../../types/passthrough';
 import { IconType } from '../../types/Icon';
-export type Item = Omit<BbBaseButtonProps, 'block' | 'tag' | 'type'> & {
+export type Item = Omit<BbBaseButtonProps, 'block' | 'tag' | 'type' | 'text'> & {
     /**
      * Click handler of the button.
      */
     onClick?: (event: MouseEvent) => void | Promise<void>;
-    /**
-     * Key that uniquely identifies the breadcrumb, and the base for its own
-     * named slots (`slotKey(key)`, kebab-case). Optional unless the crumb has a
-     * slot of its own: a keyless crumb renders with the generic slots only
-     * (Q53.17 — slot names are written, never derived from the text).
-     */
-    key?: string;
+    /** The crumb's text. */
+    label?: string;
+    /**
+     * Identifies the crumb, and names its own slots (`slotKey(value)`,
+     * kebab-case: `#<value>`, `#<value>:prepend`, `#<value>:append`). Optional
+     * unless the crumb has a slot of its own: a crumb without one renders with
+     * the generic slots only (Q53.17 — slot names are written, never derived
+     * from the label). A crumb hidden in the overflow menu is a dropdown row with
+     * the same `label` and `value`.
+     */
+    value?: string;
+    /** Crumbs have no `key` (that is `value`). Guards against the old shape. */
+    key?: never;
+    /** Crumbs have no `text` (that is `label`). Guards against the old shape. */
+    text?: never;
     /**
      * Icon rendered before the breadcrumb label, in the leading edge region
      * (outside the link, so it never inherits the link's text styling). Acts as
-     * the fallback when no `<key>:prepend` / `item:prepend` slot is provided.
+     * the fallback when no `<value>:prepend` / `item:prepend` slot is provided.
      */
     'prepend:icon'?: IconType;
     /**
      * Icon rendered after the breadcrumb label, in the trailing edge region.
-     * Fallback when no `<key>:append` / `item:append` slot is provided.
+     * Fallback when no `<value>:append` / `item:append` slot is provided.
      */
     'append:icon'?: IconType;
 };
@@ -111,8 +119,8 @@ export type BbBreadcrumbsItemSlotProps = {
     index: number;
     /** The raw item object from the `items` prop. */
     item: Item;
-    /** The resolved display text for this item. */
-    text?: string;
+    /** The crumb's label. */
+    label?: string;
 };
 /** Props exposed by the `ellipsis` slot. */
 export type BbBreadcrumbsEllipsisSlotProps = {
@@ -129,9 +137,9 @@ export type BbBreadcrumbsEllipsisSlotProps = {
     ellipsisWidth: number;
 };
 /**
- * @dynamicSlot `<key>` {BbBreadcrumbsItemSlotProps} - One crumb's label, by its `key` through `slotKey`; falls back to `item.text`. A crumb folded into the overflow menu follows BbDropdown's slot rules instead.
- * @dynamicSlot `<key>:prepend` {BbBreadcrumbsItemSlotProps} - The glyph before one crumb's label; beats `item:prepend`, which beats its `prepend:icon`.
- * @dynamicSlot `<key>:append` {BbBreadcrumbsItemSlotProps} - The glyph after one crumb's label; beats `item:append`, which beats its `append:icon`.
+ * @dynamicSlot `<value>` {BbBreadcrumbsItemSlotProps} - One crumb's label, by its `value` through `slotKey`; falls back to `item.label`. A crumb folded into the overflow menu follows BbDropdown's slot rules instead (the same `#<value>` names).
+ * @dynamicSlot `<value>:prepend` {BbBreadcrumbsItemSlotProps} - The glyph before one crumb's label; beats `item:prepend`, which beats its `prepend:icon`.
+ * @dynamicSlot `<value>:append` {BbBreadcrumbsItemSlotProps} - The glyph after one crumb's label; beats `item:append`, which beats its `append:icon`.
  */
 export type BbBreadcrumbsSlots = {
     /**
@@ -144,14 +152,14 @@ export type BbBreadcrumbsSlots = {
     append?: (props: BbBreadcrumbsEdgeSlotProps) => any;
     /**
      * Content rendered before **every** breadcrumb item's link/button, in the
-     * leading edge region. Generic fallback: a per-item `<key>:prepend` slot
+     * leading edge region. Generic fallback: a per-item `<value>:prepend` slot
      * takes precedence, and the item's `prepend:icon` is used when neither slot
      * is present.
      */
     'item:prepend'?: (props: BbBreadcrumbsItemSlotProps) => any;
     /**
      * Content rendered after **every** breadcrumb item's link/button. Generic
-     * fallback below a per-item `<key>:append` slot and above the item's
+     * fallback below a per-item `<value>:append` slot and above the item's
      * `append:icon`.
      */
     'item:append'?: (props: BbBreadcrumbsItemSlotProps) => any;

package/dist/components/BbButton/BbButton.vue_vue_type_script_setup_true_lang.js

@@ -4,35 +4,41 @@ import { useUntil as n } from "../../composables/useUntil.js";
 import { removedPropsFor as r } from "../../deprecation/removedProps.js";
 import { warnRemovedAttrs as i } from "../../utilities/functions/warnRemovedAttrs.js";
 import { extractDomContainer as a } from "../../utilities/functions/extractDomContainer.js";
-import o from "../BbBaseButton/BbBaseButton.vue.js";
-import { useLocale as s } from "../../composables/useLocale.js";
-import c from "../BbIcon/BbIcon.vue.js";
-import l from "../BbSpinner/BbSpinner.vue.js";
+import { useLocale as o } from "../../composables/useLocale.js";
+import s from "../BbIcon/BbIcon.vue.js";
+import ee from "../BbSpinner/BbSpinner.vue.js";
+import c from "../BbBaseButton/BbBaseButton.vue.js";
+import { BB_FORM_SUBMIT_LOCK as l } from "../../composables/formSubmitLock.js";
 import { pickBy as u } from "../../utilities/functions/pickBy.js";
 import { noop as d } from "../../utilities/functions/noop.js";
 import { isEqual as f } from "../../utilities/functions/isEqual.js";
 import { BB_BUTTON_PT as p } from "./types.js";
-import { Transition as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, defineComponent as x, mergeModels as S, mergeProps as C, openBlock as w, ref as T, renderSlot as E, toDisplayString as D, unref as O, useAttrs as k, useModel as A, watchEffect as j, withCtx as M } from "vue";
+import { useToggleRoving as m } from "./toggleRoving.js";
+import { Transition as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createTextVNode as te, defineComponent as x, inject as S, mergeModels as C, mergeProps as w, openBlock as T, ref as E, renderSlot as D, toDisplayString as O, unref as k, useAttrs as A, useModel as j, watchEffect as M, withCtx as N } from "vue";
 //#region src/components/BbButton/BbButton.vue?vue&type=script&setup=true&lang.ts
-var N = {
+var P = {
 	key: 3,
 	class: "bb-button__loading-label bb-sr-only"
-}, P = /*@__PURE__*/ x({
+}, F = /*@__PURE__*/ x({
 	inheritAttrs: !1,
 	__name: "BbButton",
-	props: /*@__PURE__*/ S({
+	props: /*@__PURE__*/ C({
 		"pt:root": {},
 		"pt:icon": {},
 		"pt:spinner": {},
 		"pt:text": {},
 		"pt:root:loading": {},
 		"pt:root:disabled": {},
+		"pt:root:pressed": {},
 		"pt:icon:loading": {},
 		"pt:icon:disabled": {},
+		"pt:icon:pressed": {},
 		"pt:spinner:loading": {},
 		"pt:spinner:disabled": {},
+		"pt:spinner:pressed": {},
 		"pt:text:loading": {},
 		"pt:text:disabled": {},
+		"pt:text:pressed": {},
 		pt: {},
 		disableAutoLoading: { type: Boolean },
 		activeClass: {},
@@ -99,60 +105,61 @@ var N = {
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(x, { expose: S }) {
-		let P = A(x, "modelValue"), F = x;
+	setup(x, { expose: C }) {
+		let F = j(x, "modelValue"), I = x;
 		process.env.NODE_ENV !== "production" && i("BbButton", r("BbButton"));
-		let I = [
+		let L = [
 			"xs",
 			"sm",
 			"md",
 			"lg",
 			"xl",
 			"2xl"
-		], L = e(), R = h(() => P.value !== void 0), z = h(() => f(P.value, F.trueValue)), { t: B } = s(), V = k(), H = T();
-		process.env.NODE_ENV !== "production" && j(() => {
-			R.value || "aria-pressed" in V && L.warn("BbButton: `aria-pressed` is managed by the component and your binding is ignored. Bind `v-model` (with `true-value`/`false-value` when the state is not boolean) — that sets `aria-pressed`, applies `bb-button--active`, and flips the value on click.");
+		], R = e(), z = g(() => F.value !== void 0), B = g(() => f(F.value, I.trueValue)), { t: V } = o(), H = A(), U = E();
+		process.env.NODE_ENV !== "production" && M(() => {
+			z.value || "aria-pressed" in H && R.warn("BbButton: `aria-pressed` is managed by the component and your binding is ignored. Bind `v-model` (with `true-value`/`false-value` when the state is not boolean) — that sets `aria-pressed`, applies `bb-button--pressed`, and flips the value on click.");
 		});
-		let U = (e) => {
-			H.value = a(e) ?? void 0;
-		}, W = h(() => {
-			let { onClick: e, class: t, ...n } = V;
+		let W = (e) => {
+			U.value = a(e) ?? void 0;
+		}, G = g(() => {
+			let { onClick: e, class: t, ...n } = H;
 			return n;
-		}), G = T(0), K = h(() => F.loading || !!G.value && !F.disableAutoLoading), q = n(K), J = t({
+		}), K = E(0), q = S(l, null), J = g(() => I.loading || !!K.value && !I.disableAutoLoading || I.type === "submit" && !!q?.locked()), Y = n(J), X = t({
 			component: "BbButton",
-			attrs: V,
-			props: F,
+			attrs: H,
+			props: I,
 			parts: p.parts,
 			states: p.states,
 			active: {
-				loading: () => K.value,
-				disabled: () => !!F.disabled
+				loading: () => J.value,
+				disabled: () => !!I.disabled,
+				pressed: () => z.value && B.value
 			}
-		}), Y = async (e) => {
-			if (K.value && !F.interactiveWhileLoading) return (F.type === "submit" || F.href || F.to) && e.preventDefault(), null;
-			if (R.value) {
-				let e = F.trueValue, t = F.falseValue;
-				P.value = f(P.value, e) ? t : e;
+		}), Z = async (e) => {
+			if (J.value && !I.interactiveWhileLoading) return (I.type === "submit" || I.href || I.to) && e.preventDefault(), null;
+			if (z.value) {
+				let e = I.trueValue, t = I.falseValue;
+				F.value = f(F.value, e) ? t : e;
 			}
-			let t = [V.onClick ?? d].flat(), n = t.map((t) => t(e)), r = n.filter((e) => e && typeof e.then == "function");
+			let t = [H.onClick ?? d].flat(), n = t.map((t) => t(e)), r = n.filter((e) => e && typeof e.then == "function");
 			if (!r.length) return n[0];
 			let i = t.length === 1 ? n[0] : Promise.all(r).then(() => {});
-			G.value++;
+			K.value++;
 			try {
 				return await i;
 			} finally {
-				G.value--;
+				K.value--;
 			}
-		}, X = h(() => {
-			let e = typeof F.size == "string" ? { default: F.size } : {
+		}, ne = g(() => {
+			let e = typeof I.size == "string" ? { default: I.size } : {
 				default: "md",
-				...F.size
+				...I.size
 			};
 			return Object.fromEntries(Object.entries(e).map(([e, t]) => {
 				let n = t;
-				return I.includes(t) || (L.warn(`Invalid size: "${t}" in BbButton. Expected one of: ${I.join(", ")}. Falling back to "md".`), n = "md"), [e === "default" ? `bb-button--${n}` : `bb-button--${e}-${n}`, !0];
+				return L.includes(t) || (R.warn(`Invalid size: "${t}" in BbButton. Expected one of: ${L.join(", ")}. Falling back to "md".`), n = "md"), [e === "default" ? `bb-button--${n}` : `bb-button--${e}-${n}`, !0];
 			}));
-		}), Z = /* @__PURE__ */ new Set([
+		}), re = /* @__PURE__ */ new Set([
 			"append:icon",
 			"disableAutoLoading",
 			"disabled",
@@ -166,61 +173,72 @@ var N = {
 			"size",
 			"trueValue",
 			"variant"
-		]), Q = h(() => ({
-			...W.value,
-			...u(F, (e, t) => !Z.has(t) && t !== "pt" && !t.startsWith("pt:"))
-		})), $ = h(() => K.value && !F.interactiveWhileLoading), ee = h(() => C(Q.value, {
-			"aria-disabled": $.value ? !0 : void 0,
-			"aria-pressed": R.value ? z.value : void 0,
+		]), ie = g(() => ({
+			...G.value,
+			...u(I, (e, t) => !re.has(t) && t !== "pt" && !t.startsWith("pt:"))
+		})), Q = g(() => J.value && !I.interactiveWhileLoading), $ = m(U, g(() => !!I.group && z.value && !("tabindex" in H)), () => [
+			B.value,
+			I.disabled,
+			Q.value
+		]), ae = g(() => {
+			let e = Q.value ? -1 : $.tabindex.value;
+			return {
+				...Q.value ? { "aria-disabled": !0 } : {},
+				...e === void 0 ? {} : { tabindex: e }
+			};
+		}), oe = g(() => w(ie.value, {
+			...ae.value,
+			"aria-pressed": z.value ? B.value : void 0,
 			class: [
 				"bb-button",
-				X.value,
+				ne.value,
 				{
-					"bb-button--loading": K.value,
-					"bb-button--soft-disabled": $.value,
-					"bb-button--group": F.group,
-					"bb-button--icon": !!F.icon,
-					"bb-button--active": R.value && z.value,
-					[`bb-button--${F.variant}`]: F.variant !== "none"
+					"bb-button--loading": J.value,
+					"bb-button--soft-disabled": Q.value,
+					"bb-button--group": I.group,
+					"bb-button--icon": !!I.icon,
+					"bb-button--pressed": z.value && B.value,
+					[`bb-button--${I.variant}`]: I.variant !== "none"
 				}
 			],
-			disabled: F.disabled,
-			tabindex: $.value ? -1 : void 0,
-			onClick: Y
-		}, J.root));
-		return S({ $el: H }), (e, t) => (w(), g(O(o), C({ ref: U }, ee.value), {
-			default: M(() => [
-				O(q) ? (w(), g(m, {
+			disabled: I.disabled,
+			onClick: Z,
+			onFocusin: $.onFocusin,
+			onKeydown: $.onKeydown
+		}, X.root));
+		return C({ $el: U }), (e, t) => (T(), _(k(c), w({ ref: W }, oe.value), {
+			default: N(() => [
+				k(Y) ? (T(), _(h, {
 					key: 0,
 					appear: "",
 					name: "bb-button-spinner"
 				}, {
-					default: M(() => [K.value ? (w(), g(O(l), C({
+					default: N(() => [J.value ? (T(), _(k(ee), w({
 						key: 0,
 						class: "bb-button__spinner"
-					}, O(J).spinner), null, 16)) : _("", !0)]),
+					}, k(X).spinner), null, 16)) : v("", !0)]),
 					_: 1
-				})) : _("", !0),
-				F.icon ? (w(), g(c, C({
+				})) : v("", !0),
+				I.icon ? (T(), _(s, w({
 					key: 1,
 					class: "bb-button__icon",
-					icon: F.icon
-				}, O(J).icon), null, 16, ["icon"])) : F["prepend:icon"] ? (w(), g(c, C({
+					icon: I.icon
+				}, k(X).icon), null, 16, ["icon"])) : I["prepend:icon"] ? (T(), _(s, w({
 					key: 2,
 					class: "bb-button__prepend-icon",
-					icon: F["prepend:icon"]
-				}, O(J).icon), null, 16, ["icon"])) : _("", !0),
-				y("span", C({ class: ["bb-button__text", { "bb-sr-only": !!e.icon }] }, O(J).text), [E(e.$slots, "default", {}, () => [b(D(e.text), 1)])], 16),
-				K.value ? (w(), v("span", N, D(O(B)("common.loadingText")), 1)) : _("", !0),
-				!e.icon && F["append:icon"] ? (w(), g(c, C({
+					icon: I["prepend:icon"]
+				}, k(X).icon), null, 16, ["icon"])) : v("", !0),
+				b("span", w({ class: ["bb-button__text", { "bb-sr-only": !!e.icon }] }, k(X).text), [D(e.$slots, "default", {}, () => [te(O(e.text), 1)])], 16),
+				J.value ? (T(), y("span", P, O(k(V)("common.loadingText")), 1)) : v("", !0),
+				!e.icon && I["append:icon"] ? (T(), _(s, w({
 					key: 4,
 					class: "bb-button__append-icon",
-					icon: F["append:icon"]
-				}, O(J).icon), null, 16, ["icon"])) : _("", !0)
+					icon: I["append:icon"]
+				}, k(X).icon), null, 16, ["icon"])) : v("", !0)
 			]),
 			_: 3
 		}, 16));
 	}
 });
 //#endregion
-export { P as default };
+export { F as default };

package/dist/components/BbButton/toggleRoving.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+export declare function useToggleRoving(el: Ref<HTMLElement | undefined>, engaged: Ref<boolean>, deps: () => unknown): {
+    tabindex: import('vue').ComputedRef<0 | -1 | undefined>;
+    onFocusin: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/components/BbButton/toggleRoving.js

@@ -0,0 +1,45 @@
+import { computed as e, nextTick as t, onBeforeUnmount as n, onMounted as r, shallowRef as i, watch as a } from "vue";
+//#region src/components/BbButton/toggleRoving.ts
+var o = ".bb-button--group[aria-pressed]", s = i(0), c = () => t(() => s.value++), l = /* @__PURE__ */ new WeakMap(), u = (e) => {
+	if (!e.matches(o)) return [];
+	let t = [e];
+	for (let n = e.previousElementSibling; n?.matches(o); n = n.previousElementSibling) t.unshift(n);
+	for (let n = e.nextElementSibling; n?.matches(o); n = n.nextElementSibling) t.push(n);
+	return t;
+}, d = (e) => !e.disabled && e.getAttribute("aria-disabled") !== "true", f = (e) => {
+	let t = e.filter(d), n = document.activeElement, r = e[0]?.parentElement && l.get(e[0].parentElement);
+	return t.find((e) => e === n) ?? t.find((e) => e === r) ?? t.find((e) => e.getAttribute("aria-pressed") === "true") ?? t[0];
+};
+function p(t, i, o) {
+	return a(i, c), a(o, () => i.value && c()), r(() => i.value && c()), n(() => i.value && c()), {
+		tabindex: e(() => {
+			if (!i.value) return;
+			s.value;
+			let e = t.value;
+			if (!e) return;
+			let n = u(e);
+			if (!(n.length < 2 || !d(e))) return f(n) === e ? 0 : -1;
+		}),
+		onFocusin: () => {
+			let e = t.value;
+			!i.value || !e?.parentElement || (l.set(e.parentElement, e), s.value++);
+		},
+		onKeydown: (e) => {
+			let n = t.value;
+			if (!i.value || !n || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let r = u(n);
+			if (r.length < 2) return;
+			let a = r.filter(d), o = a.indexOf(n);
+			if (o === -1) return;
+			let s = getComputedStyle(n).direction === "rtl", c = e.key === (s ? "ArrowLeft" : "ArrowRight"), l = e.key === "Home" ? a[0] : e.key === "End" ? a[a.length - 1] : a[(o + (c ? 1 : -1) + a.length) % a.length];
+			e.preventDefault(), l?.focus();
+		}
+	};
+}
+//#endregion
+export { p as useToggleRoving };