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

package/dist/components/BbCheckboxGroup/BbCheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,32 @@
 import { useLogger as e } from "../../composables/useLogger.js";
 import { isNotEmpty as t } from "../../utilities/functions/isNotEmpty.js";
-import { aliasParts as n, formControlPtActive as r, pickActive as i, usePassthrough as a } from "../../composables/usePassthrough.js";
-import { hash as o } from "../../utilities/functions/hash.js";
-import { removedPropsFor as s } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as c } from "../../utilities/functions/warnRemovedAttrs.js";
-import { useItemsGetter as l } from "../../composables/useItemsGetter.js";
-import { withItemDescribedby as ee } from "../../utilities/functions/itemProps.js";
+import { aliasParts as n, formControlPtActive as r, pickActive as i, usePassthrough as a, variantPt as o } from "../../composables/usePassthrough.js";
+import { hash as s } from "../../utilities/functions/hash.js";
+import { removedPropsFor as c } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as l } from "../../utilities/functions/warnRemovedAttrs.js";
+import { useItemsGetter as ee } from "../../composables/useItemsGetter.js";
+import { withItemDescribedby as te } from "../../utilities/functions/itemProps.js";
 import { useHashedWatcher as u } from "../../composables/useHashedWatcher.js";
-import { vAutofocus as te } from "../../utilities/misc/autofocus.js";
-import ne from "../CommonField/CommonField.vue.js";
-import re from "../BbBaseCheckboxIcon/BbBaseCheckboxIcon.vue.js";
-import { preventReadonlyClick as ie, preventReadonlyKeydown as ae, revertReadonlyChange as oe, syncCheckedToData as se, syncIndeterminate as d, toggleInputAttrs as ce, toggleInputValue as le } from "../../utilities/functions/toggleInput.js";
+import { vAutofocus as ne } from "../../utilities/misc/autofocus.js";
+import re from "../CommonField/CommonField.vue.js";
+import d from "../BbBaseCheckboxIcon/BbBaseCheckboxIcon.vue.js";
+import { preventReadonlyClick as ie, preventReadonlyKeydown as ae, revertReadonlyChange as oe, syncCheckedToData as se, syncIndeterminate as f, toggleInputAttrs as ce, toggleInputValue as le } from "../../utilities/functions/toggleInput.js";
 import { useToggleListFocus as ue } from "../../composables/useToggleInput.js";
 import { useFormBinding as de } from "../../composables/useFormBinding.js";
-import fe from "../OptionsContainer/OptionsContainer.vue.js";
-import { useIndexById as f } from "../../composables/useIndexById.js";
-import { useBaseOptions as p } from "../../composables/useBaseOptions.js";
-import { useCoherence as m } from "../../composables/useCoherence.js";
-import { usePrefill as h } from "../../composables/usePrefill.js";
-import { useActiveInactiveState as g } from "../../composables/useActiveInactiveState.js";
-import { useOnFalsy as pe } from "../../composables/useOnFalsy.js";
-import { useOnTruthy as me } from "../../composables/useOnTruthy.js";
-import { BB_CHECKBOX_GROUP_PT as _ } from "./types.js";
-import { computed as v, createBlock as he, createElementVNode as ge, createSlots as _e, createVNode as y, defineComponent as b, guardReactiveProps as x, mergeProps as S, normalizeProps as C, onBeforeMount as ve, openBlock as ye, ref as be, renderSlot as w, shallowRef as xe, toRef as T, unref as E, useAttrs as D, withCtx as O, withDirectives as k } from "vue";
+import p from "../OptionsContainer/OptionsContainer.vue.js";
+import { useChoiceIndicator as m } from "../../composables/useChoiceIndicator.js";
+import { useIndexById as h } from "../../composables/useIndexById.js";
+import { useBaseOptions as fe } from "../../composables/useBaseOptions.js";
+import { useCoherence as pe } from "../../composables/useCoherence.js";
+import { usePrefill as me } from "../../composables/usePrefill.js";
+import { useActiveInactiveState as he } from "../../composables/useActiveInactiveState.js";
+import { useOnFalsy as ge } from "../../composables/useOnFalsy.js";
+import { useOnTruthy as _e } from "../../composables/useOnTruthy.js";
+import { BB_CHECKBOX_GROUP_PT as g } from "./types.js";
+import { Fragment as ve, computed as _, createBlock as ye, createElementBlock as v, createElementVNode as be, createSlots as xe, createVNode as y, defineComponent as b, guardReactiveProps as x, mergeProps as S, normalizeProps as C, onBeforeMount as Se, openBlock as w, ref as Ce, renderList as we, renderSlot as T, shallowRef as E, toRef as D, unref as O, useAttrs as k, withCtx as A, withDirectives as Te } from "vue";
 //#region src/components/BbCheckboxGroup/BbCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var A = /*@__PURE__*/ b({
+var j = /*@__PURE__*/ b({
+	mixins: [o(g)],
 	inheritAttrs: !1,
 	__name: "BbCheckboxGroup",
 	props: {
@@ -110,7 +112,6 @@ var A = /*@__PURE__*/ b({
 		"pt:icon": {},
 		"pt:label": {},
 		"pt:itemDescription": {},
-		pt: {},
 		autofocus: {},
 		compact: { type: Boolean },
 		dependencies: {},
@@ -163,7 +164,38 @@ var A = /*@__PURE__*/ b({
 		validationLabel: {},
 		rules: {},
 		validationMode: {},
-		formless: { type: Boolean }
+		formless: { type: Boolean },
+		"pt:indicator": {},
+		"pt:indicator:hasValue": {},
+		"pt:indicator:readonly": {},
+		"pt:indicator:disabled": {},
+		"pt:indicator:warnings": {},
+		"pt:indicator:errors": {},
+		"pt:indicator:loading": {},
+		"pt:root:pill": {},
+		"pt:root:line": {},
+		"pt:legend:pill": {},
+		"pt:legend:line": {},
+		"pt:description:pill": {},
+		"pt:description:line": {},
+		"pt:message:pill": {},
+		"pt:message:line": {},
+		"pt:hint:pill": {},
+		"pt:hint:line": {},
+		"pt:list:pill": {},
+		"pt:list:line": {},
+		"pt:indicator:pill": {},
+		"pt:indicator:line": {},
+		"pt:item:pill": {},
+		"pt:item:line": {},
+		"pt:icon:pill": {},
+		"pt:icon:line": {},
+		"pt:label:pill": {},
+		"pt:label:line": {},
+		"pt:itemDescription:pill": {},
+		"pt:itemDescription:line": {},
+		pt: {},
+		variant: {}
 	},
 	emits: [
 		"blur",
@@ -178,82 +210,86 @@ var A = /*@__PURE__*/ b({
 		"mouseup",
 		"update:modelValue"
 	],
-	setup(b, { emit: A }) {
-		let j = b, { props: M, emit: N, showAsterisk: Se, errors: Ce, readonly: P } = de(j, A, {
+	setup(o, { emit: b }) {
+		let j = o, { props: M, emit: N, showAsterisk: P, errors: Ee, readonly: F } = de(j, b, {
 			componentName: "BbCheckboxGroup",
 			identifierFallback: () => j.legend,
 			emptyValue: () => [],
 			leaveOn: "inactive"
 		});
-		process.env.NODE_ENV !== "production" && c("BbCheckboxGroup", s("BbCheckboxGroup"));
-		let F = e();
-		ve(() => {
-			M.multiple && !Array.isArray(M.modelValue) && F.throw("BbCheckboxGroup: multiple is set to \"true\" but modelValue is not an array.");
+		process.env.NODE_ENV !== "production" && l("BbCheckboxGroup", c("BbCheckboxGroup"));
+		let De = e();
+		Se(() => {
+			M.multiple && !Array.isArray(M.modelValue) && De.throw("BbCheckboxGroup: multiple is set to \"true\" but modelValue is not an array.");
 		});
-		let we = [], I = v(() => M.items === void 0 ? we : M.items), L = xe(null), Te = (e) => {
+		let Oe = [], I = _(() => M.items === void 0 ? Oe : M.items), L = E(null), ke = (e) => {
 			L.value = e?.$el ?? null;
-		}, { active: R } = g(L), z = be(!1), Ee = v(() => M.persistentHint || z.value);
-		pe(R, () => {
+		}, { active: R } = he(L), z = Ce(!1), Ae = _(() => M.persistentHint || z.value);
+		ge(R, () => {
 			z.value = !1, N("inactive");
-		}), me(R, () => {
+		}), _e(R, () => {
 			z.value = !0, N("active");
 		});
-		let { getter: B, clientReproducible: De, hydratedFromSsr: Oe, items: ke, loading: V, error: Ae, ssrMarker: je } = l({
+		let { getter: B, clientReproducible: je, hydratedFromSsr: Me, items: Ne, loading: V, error: Pe, ssrMarker: Fe } = ee({
 			items: I,
 			marker: !0
 		}), H = () => {
-			M.enforceCoherence && !q.value && N("update:modelValue", Ie.value);
-		}, { hasPrefilled: U, whenPrefilled: Me } = h({
-			alreadyLoaded: Oe,
-			clientReproducible: De,
+			M.enforceCoherence && !q.value && N("update:modelValue", Be.value);
+		}, { hasPrefilled: U, whenPrefilled: Ie } = me({
+			alreadyLoaded: Me,
+			clientReproducible: je,
 			trigger: !0,
 			currentValue: M.modelValue,
 			multiple: M.multiple,
 			fn: async () => {
 				await B(void 0, "initial", M.modelValue) === "applied" && H();
 			}
-		}), W = v(() => M.multiple ? [].concat(M.modelValue) : [M.modelValue]), { data: G } = f({ items: W }), { options: K } = p({
-			disabled: T(M, "disabled"),
-			items: ke,
+		}), W = _(() => M.multiple ? [].concat(M.modelValue) : [M.modelValue]), { data: G } = h({ items: W }), { options: K } = fe({
+			disabled: D(M, "disabled"),
+			items: Ne,
 			itemText: M.itemText,
-			itemProps: T(M, "itemProps"),
+			itemProps: D(M, "itemProps"),
 			itemValue: M.itemValue,
 			optionDefaults: !0,
-			max: T(M, "max"),
-			selectable: T(M, "selectable"),
+			max: D(M, "max"),
+			selectable: D(M, "selectable"),
 			selectedIndexedByHash: G
-		}), Ne = (e) => {
+		}), Le = (e) => {
 			if (M.multiple) {
 				N("update:modelValue", [...W.value, e.value]);
 				return;
 			}
 			N("update:modelValue", e.value);
-		}, Pe = (e) => {
+		}, Re = (e) => {
 			if (!M.multiple) {
 				N("update:modelValue", null);
 				return;
 			}
 			let t = { ...G.value };
 			delete t[e.valueHash], N("update:modelValue", Object.values(t));
-		}, { data: Fe } = f({
+		}, { data: ze } = h({
 			items: K,
 			key: "valueHash"
-		}), { coherent: q, coherentValue: Ie } = m({
-			modelValue: T(M, "modelValue"),
+		}), { coherent: q, coherentValue: Be } = pe({
+			modelValue: D(M, "modelValue"),
 			multiple: M.multiple,
-			iteratee: (e) => !!Fe.value[o(e)]
+			iteratee: (e) => !!ze.value[s(e)]
 		}), J = 0;
 		u(() => M.modelValue, async () => {
 			J++, q.value || await B(void 0, "model", M.modelValue) === "applied" && H(), J--;
 		}, { debounce: M.modelValueDebounceTime === void 0 ? 0 : M.modelValueDebounceTime }), u(() => [M.dependencies, I.value], async () => {
-			U.value || await Me(), U.value && (J++, await B(void 0, "dependencies", M.modelValue) === "applied" && J === 1 && H(), J--);
+			U.value || await Ie(), U.value && (J++, await B(void 0, "dependencies", M.modelValue) === "applied" && J === 1 && H(), J--);
 		}, { debounce: M.depsDebounceTime === void 0 ? 0 : M.depsDebounceTime });
-		let Y = v(() => t(M.modelValue)), X = a({
+		let Y = _(() => t(M.modelValue)), X = a({
 			component: "BbCheckboxGroup",
-			attrs: D(),
+			attrs: k(),
 			props: M,
-			parts: _.parts,
-			states: _.states,
+			parts: g.parts,
+			states: g.states,
+			variant: {
+				...g.variant,
+				current: () => M.variant
+			},
 			active: {
 				...i(r(M, () => Y.value), [
 					"errors",
@@ -264,21 +300,28 @@ var A = /*@__PURE__*/ b({
 				]),
 				loading: () => V.value
 			}
-		}), Le = n(X, { label: "legend" }), Z = ue(), Q = (e) => e.value === void 0 || e.value, $ = (e, t) => {
+		}), Ve = _(() => M.listLayout === "vertical" || M.listLayout === "vertical-stretch"), { boxes: He, ready: Ue, styleOf: We } = m({
+			kind: "checkbox",
+			variant: () => M.variant,
+			vertical: () => Ve.value,
+			list: () => L.value,
+			rows: () => K.value,
+			rowClass: "bb-checkbox-group__item"
+		}), Ge = n(X, { label: "legend" }), Z = ue(), Q = (e) => e.value === void 0 || e.value, $ = (e, t) => {
 			if (t) return [t, e.valueHash].filter(Boolean).join("-");
-		}, Re = (e, t) => {
-			N("change", e), t.selected ? Pe(t) : Ne(t);
-		}, ze = (e) => ({
+		}, Ke = (e, t) => {
+			N("change", e), t.selected ? Re(t) : Le(t);
+		}, qe = (e) => ({
 			onBlur: (t) => {
 				Z.onBlur(e.valueHash), N("blur", t);
 			},
 			onChange: (t) => {
 				if (!(t.target instanceof HTMLInputElement)) return;
 				if (oe(t.target, M.readonly, !!e.selected)) {
-					d(t.target, !1);
+					f(t.target, !1);
 					return;
 				}
-				d(t.target, !1), Re(t, e);
+				f(t.target, !1), Ke(t, e);
 				let n = t.target;
 				se(() => n, () => !!K.value.find((t) => t.valueHash === e.valueHash)?.selected);
 			},
@@ -294,9 +337,9 @@ var A = /*@__PURE__*/ b({
 			},
 			onMousedown: (e) => N("mousedown", e),
 			onMouseup: (e) => N("mouseup", e)
-		}), Be = (e, t, n, r, i, a) => ({
+		}), Je = (e, t, n, r, i, a) => ({
 			...ce("checkbox", {
-				ariaDescribedby: ee(r, a),
+				ariaDescribedby: te(r, a),
 				ariaLabelledby: i,
 				autofocus: M.autofocus && !t,
 				checked: !!e.selected,
@@ -308,8 +351,8 @@ var A = /*@__PURE__*/ b({
 				required: !1,
 				value: Q(e)
 			}),
-			...ze(e)
-		}), Ve = (e, t, n, r) => {
+			...qe(e)
+		}), Ye = (e, t, n, r) => {
 			let i = !!e.selected;
 			return {
 				checked: i,
@@ -328,13 +371,13 @@ var A = /*@__PURE__*/ b({
 				value: i ? Q(e) : !1
 			};
 		};
-		return (e, t) => (ye(), he(ne, S({
+		return (e, t) => (w(), ye(re, S({
 			id: e.id,
 			class: "bb-checkbox-group",
 			compact: e.compact,
 			description: e.description,
 			disabled: e.disabled,
-			errors: E(Ce),
+			errors: O(Ee),
 			"has-errors": e.hasErrors,
 			"has-value": Y.value,
 			"has-warnings": e.hasWarnings,
@@ -348,54 +391,62 @@ var A = /*@__PURE__*/ b({
 			"label-position": e.legendPosition,
 			"label-tag": "legend",
 			layout: e.layout,
-			loading: E(V),
+			loading: O(V),
 			name: e.name,
-			passthrough: E(Le),
-			readonly: E(P),
+			passthrough: O(Ge),
+			readonly: O(F),
 			reverse: e.reverse,
-			"show-asterisk": E(Se),
-			"show-hint": Ee.value,
-			"ssr-marker": E(je),
+			"show-asterisk": O(P),
+			"show-hint": Ae.value,
+			"ssr-marker": O(Fe),
 			tag: "fieldset",
 			warnings: e.warnings
-		}, E(X).forwardAttrs), _e({
-			label: O((t) => [w(e.$slots, "legend", C(x(t)))]),
-			input: O(({ id: t, hasErrors: n, hasWarnings: r, ariaDescribedby: i }) => [y(fe, {
-				ref: Te,
+		}, O(X).forwardAttrs), xe({
+			label: A((t) => [T(e.$slots, "legend", C(x(t)))]),
+			input: A(({ id: t, hasErrors: n, hasWarnings: r, ariaDescribedby: i }) => [y(p, {
+				ref: ke,
 				block: "bb-checkbox-group",
 				"empty-text": e.emptyText,
-				error: E(Ae),
+				error: O(Pe),
 				"failed-text": e.failedText,
 				"has-errors": n,
 				"has-warnings": r,
 				"hide-label": e.hideLabel,
+				"indicator-ready": O(Ue),
 				"item-input-align": e.itemInputAlign,
 				"item-label-align": e.itemLabelAlign,
 				"item-layout": e.itemLayout,
 				"item-reverse": e.itemReverse,
 				"list-layout": e.listLayout,
-				loading: !!E(V),
+				loading: !!O(V),
 				"loading-text": e.loadingText,
-				options: E(K),
-				passthrough: E(X)
+				options: O(K),
+				passthrough: O(X),
+				variant: e.variant
 			}, {
-				prepend: O(() => [w(e.$slots, "prepend")]),
-				loading: O(() => [w(e.$slots, "loading")]),
-				empty: O((t) => [w(e.$slots, "empty", C(x(t)))]),
-				label: O((t) => [w(e.$slots, "label", C(x(t)))]),
-				input: O(({ option: a, index: o, labelId: s, descriptionId: c, rowStates: l }) => [k(ge("input", C(x(Be(a, o, t, i, s, c))), null, 16), [[E(te)]]), w(e.$slots, "icon", S({
+				prepend: A(() => [(w(!0), v(ve, null, we(O(He), (e) => (w(), v("span", S({
+					key: e.key,
+					"aria-hidden": "true",
+					class: "bb-checkbox-group__indicator",
+					style: O(We)(e),
+					ref_for: !0
+				}, O(X).indicator), null, 16))), 128)), T(e.$slots, "prepend")]),
+				loading: A(() => [T(e.$slots, "loading")]),
+				empty: A((t) => [T(e.$slots, "empty", C(x(t)))]),
+				label: A((t) => [T(e.$slots, "label", C(x(t)))]),
+				input: A(({ option: a, index: o, labelId: s, descriptionId: c, rowStates: l }) => [Te(be("input", C(x(Je(a, o, t, i, s, c))), null, 16), [[O(ne)]]), T(e.$slots, "icon", S({
 					item: a.item,
 					text: a.text
-				}, Ve(a, t, n, r)), () => [y(re, S({
+				}, Ye(a, t, n, r)), () => [y(d, S({
 					checked: !!a.selected,
 					disabled: !!a.disabled,
-					"focus-visible": E(Z).focusVisible(a.valueHash),
-					focused: E(Z).focused(a.valueHash),
+					"focus-visible": O(Z).focusVisible(a.valueHash),
+					focused: O(Z).focused(a.valueHash),
 					"has-errors": !!n,
 					"has-warnings": !!r && !n,
 					indeterminate: !1,
-					readonly: !!E(P)
-				}, E(X).part("icon", l, a.item)), null, 16, [
+					readonly: !!O(F)
+				}, O(X).part("icon", l, a.item)), null, 16, [
 					"checked",
 					"disabled",
 					"focus-visible",
@@ -404,7 +455,7 @@ var A = /*@__PURE__*/ b({
 					"has-warnings",
 					"readonly"
 				])])]),
-				append: O(() => [w(e.$slots, "append")]),
+				append: A(() => [T(e.$slots, "append")]),
 				_: 2
 			}, 1032, [
 				"empty-text",
@@ -413,6 +464,7 @@ var A = /*@__PURE__*/ b({
 				"has-errors",
 				"has-warnings",
 				"hide-label",
+				"indicator-ready",
 				"item-input-align",
 				"item-label-align",
 				"item-layout",
@@ -421,15 +473,16 @@ var A = /*@__PURE__*/ b({
 				"loading",
 				"loading-text",
 				"options",
-				"passthrough"
+				"passthrough",
+				"variant"
 			])]),
 			_: 2
 		}, [e.$slots.description ? {
 			name: "description",
-			fn: O((t) => [w(e.$slots, "description", C(x(t)))]),
+			fn: A((t) => [T(e.$slots, "description", C(x(t)))]),
 			key: "0"
 		} : void 0]), 1040, /* @__PURE__ */ "id.compact.description.disabled.errors.has-errors.has-value.has-warnings.hide-label.hint.input-align.input-position.label.label-align.label-mode.label-position.layout.loading.name.passthrough.readonly.reverse.show-asterisk.show-hint.ssr-marker.warnings".split(".")));
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };

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

@@ -1,7 +1,8 @@
 import { Responsive } from '../../types/ResponsiveSize';
+import { CheckboxVariantBuiltIn, CheckboxVariantRegistry, CheckboxVariantType } from '../../types/CheckboxVariant';
 import { BbOptionGroupItemProps } from '../../types/ItemProps';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
-import { GroupFieldPtPart, GroupPtMap, GroupRowPtPart, GroupWidePtState, GroupPtPart, GroupPtState, PtItemCtx, PtNoInfer, PtItemResult, PtValue } from '../../types/passthrough';
+import { PtVariantAttrs, ChoiceFieldPtPart, ChoicePtMap, ChoicePtPart, GroupFieldPtPart, GroupRowPtPart, GroupWidePtState, GroupPtState, PtItemCtx, PtNoInfer, PtItemResult, PtValue } from '../../types/passthrough';
 import { FieldCrossAlign, FieldLayout, ListLayout } from '../../types/FieldLayout';
 import { ItemAccessor } from '../../types/ItemAccessor';
 import { BbCheckboxGroupItemsContext } from '../../types/ItemsProvider';
@@ -13,27 +14,32 @@ import { CommonFieldAsteriskSlotProps } from '../CommonField/types';
  *
  * Per-item functions: on the instance, a row part (`item`, `icon`, `label`, `itemDescription`) also accepts `({ item, checked, … }) => PtValue | false | null | undefined` — `item` is the raw item of that row, and every state a boolean beside it, on for it (`checked`, `disabled`, …) — in the `pt` object or the `:pt:<part>` attribute, never on a `<part>:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the row as it was. See the passthrough guide, _Per-item functions_.
  */
-export type BbCheckboxGroupPtPart = GroupPtPart;
+export type BbCheckboxGroupPtPart = ChoicePtPart;
 /** Passthrough states of `BbCheckboxGroup`, true while the matching `--` modifier is on. */
 export type BbCheckboxGroupPtState = GroupPtState;
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
 export declare const BB_CHECKBOX_GROUP_PT: {
-    readonly parts: readonly ["root", "legend", "description", "message", "hint", "list", "item", "icon", "label", "itemDescription"];
+    readonly parts: readonly ["root", "legend", "description", "message", "hint", "list", "item", "icon", "label", "itemDescription", "indicator"];
     readonly states: readonly ["hasValue", "checked", "readonly", "disabled", "warnings", "errors", "focused", "focusVisible", "loading"];
     /** `rowStates` are declared on `rowParts` only — the field parts never have them. */
     readonly rowParts: readonly ["item", "icon", "label", "itemDescription"];
     readonly rowStates: readonly ["checked", "focused", "focusVisible"];
+    readonly variant: {
+        readonly names: readonly ["pill", "line"];
+        readonly option: "checkboxVariants";
+    };
 };
-export type BbCheckboxGroupProps<T> = {
-    [K in `pt:${GroupFieldPtPart}` | `pt:${GroupFieldPtPart}:${GroupWidePtState}` | `pt:${GroupRowPtPart}:${BbCheckboxGroupPtState}`]?: PtValue;
+/**
+ * The props BbCheckboxGroup shares with BbSwitchGroup: everything but the
+ * object `pt` (each spells its own), the `variant` (a tab-strip look, Q76.11
+ * d), its `indicator` part and its pt states, which are the checkbox group's
+ * alone.
+ */
+export type BbCheckboxGroupBaseProps<T> = {
+    [K in `pt:${GroupFieldPtPart}` | `pt:${GroupFieldPtPart}:${GroupWidePtState}` | `pt:${GroupRowPtPart}:${GroupPtState}`]?: PtValue;
 } & {
-    [K in `pt:${GroupRowPtPart}`]?: PtValue | ((ctx: PtItemCtx<PtNoInfer<T>, BbCheckboxGroupPtState>) => PtItemResult);
+    [K in `pt:${GroupRowPtPart}`]?: PtValue | ((ctx: PtItemCtx<PtNoInfer<T>, GroupPtState>) => PtItemResult);
 } & {
-    /**
-     * Passthrough, object form: the same keys as the `pt:*` attributes
-     * without the prefix. See the `pt:<part>` row.
-     */
-    pt?: GroupPtMap<PtNoInfer<T>>;
     /**
      * Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.
      */
@@ -326,6 +332,23 @@ export type BbCheckboxGroupEvents = {
      */
     (e: 'update:modelValue', value: any): void;
 };
+export type BbCheckboxGroupProps<T> = BbCheckboxGroupBaseProps<T> & {
+    [K in `pt:${ChoiceFieldPtPart}` | `pt:${ChoiceFieldPtPart}:${GroupWidePtState}` | `pt:${ChoiceFieldPtPart}:${CheckboxVariantBuiltIn}` | `pt:${GroupRowPtPart}:${CheckboxVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<ChoicePtPart, keyof CheckboxVariantRegistry> & {
+    /**
+     * Passthrough, object form: the same keys as the `pt:*` attributes
+     * without the prefix. See the `pt:<part>` row.
+     */
+    pt?: ChoicePtMap<PtNoInfer<T>> & {
+        [K in `${ChoicePtPart}:${CheckboxVariantBuiltIn | keyof CheckboxVariantRegistry}`]?: PtValue;
+    };
+    /**
+     * A tab-strip look (Q76.11 d): `'pill'` (a pill per run of adjacent picks)
+     * or `'line'` (a bar under each pick). `list-layout="vertical"` stacks it.
+     * Register more with `checkboxVariants`. Unset: the group's own rows.
+     */
+    variant?: CheckboxVariantType;
+};
 /**
  * Props exposed by the `icon` slot for each option: the checkbox state plus
  * the source item and its display text.

package/dist/components/BbCheckboxGroup/types.js

@@ -1,10 +1,15 @@
-import { GROUP_PT_PARTS as e, GROUP_PT_STATES as t, GROUP_ROW_PT_PARTS as n, GROUP_ROW_PT_STATES as r } from "../../types/passthrough.js";
+import { CHOICE_PT_PARTS as e, GROUP_PT_STATES as t, GROUP_ROW_PT_PARTS as n, GROUP_ROW_PT_STATES as r } from "../../types/passthrough.js";
+import { CHECKBOX_VARIANTS as i } from "../../types/CheckboxVariant.js";
 //#region src/components/BbCheckboxGroup/types.ts
-var i = {
+var a = {
 	parts: e,
 	states: t,
 	rowParts: n,
-	rowStates: r
+	rowStates: r,
+	variant: {
+		names: i,
+		option: "checkboxVariants"
+	}
 };
 //#endregion
-export { i as BB_CHECKBOX_GROUP_PT };
+export { a as BB_CHECKBOX_GROUP_PT };

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

@@ -2,9 +2,9 @@ import { BbCollapsibleProps, BbCollapsibleSlots } from './types';
 export type { BbCollapsibleProps, BbCollapsibleSlots };
 type __VLS_Slots = BbCollapsibleSlots;
 declare const __VLS_base: import('vue').DefineComponent<BbCollapsibleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BbCollapsibleProps> & Readonly<{}>, {
+    tag: import('../../types/CommonProps').LayoutTag;
     modelValue: boolean;
     transitionDuration: number;
-    tag: import('../../types/CommonProps').LayoutTag;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;