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

package/dist/ai/source/BbButton.md

@@ -34,13 +34,27 @@
 		</Transition>
 		<!-- `passthrough.icon` is a BROADCAST: the same binding lands on whichever content
 		     icons render (at most two of the three). Bound LAST on each so a
-		     consumer attribute beats ours and a consumer class appends. -->
+		     consumer attribute beats ours and a consumer class appends. An icon
+		     slot (Q81.4) beats its prop and renders INSIDE the part, a box of the
+		     same class, so `pt:icon`, `--icon-size` and the spinner swap hold. -->
+		<span
+			v-if="slots.icon"
+			class="bb-button__icon bb-button__icon-slot"
+			v-bind="passthrough.icon"
+			><slot name="icon" v-bind="iconScope"
+		/></span>
 		<BbIcon
-			v-if="props['icon']"
+			v-else-if="props['icon']"
 			class="bb-button__icon"
 			:icon="props['icon']"
 			v-bind="passthrough.icon"
 		/>
+		<span
+			v-else-if="slots['prepend:icon']"
+			class="bb-button__prepend-icon bb-button__icon-slot"
+			v-bind="passthrough.icon"
+			><slot name="prepend:icon" v-bind="iconScope"
+		/></span>
 		<BbIcon
 			v-else-if="props['prepend:icon']"
 			class="bb-button__prepend-icon"
@@ -49,20 +63,28 @@
 		/>
 		<span
 			class="bb-button__text"
-			:class="{ 'bb-sr-only': !!icon }"
+			:class="{ 'bb-sr-only': iconOnly }"
 			v-bind="passthrough.text"
-			><slot>{{ text }}</slot></span
+			><slot v-bind="linkState">{{ text }}</slot></span
 		>
 		<span v-if="loading" class="bb-button__loading-label bb-sr-only">{{
 			t('common.loadingText')
 		}}</span>
 
-		<BbIcon
-			v-if="!icon && props['append:icon']"
-			class="bb-button__append-icon"
-			:icon="props['append:icon']"
-			v-bind="passthrough.icon"
-		/>
+		<template v-if="!iconOnly">
+			<span
+				v-if="slots['append:icon']"
+				class="bb-button__append-icon bb-button__icon-slot"
+				v-bind="passthrough.icon"
+				><slot name="append:icon" v-bind="iconScope"
+			/></span>
+			<BbIcon
+				v-else-if="props['append:icon']"
+				class="bb-button__append-icon"
+				:icon="props['append:icon']"
+				v-bind="passthrough.icon"
+			/>
+		</template>
 	</BbBaseButton>
 </template>
 
@@ -79,15 +101,23 @@ import { useLogger } from '@/composables/useLogger';
 import { useUntil } from '../../composables/useUntil';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
-import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
+import { extractHtmlContainer } from '@/utilities/functions/extractDomContainer';
 import { isEqual } from '@/utilities/functions/isEqual';
-import { usePassthrough } from '@/composables/usePassthrough';
-import { BB_BUTTON_PT, type BbButtonProps, type BbButtonSlots } from './types';
+import { usePassthrough, variantPt } from '@/composables/usePassthrough';
+import {
+	BB_BUTTON_PT,
+	type BbButtonIconSlotProps,
+	type BbButtonProps,
+	type BbButtonSlots,
+} from './types';
 import { useToggleRoving } from './toggleRoving';
+import { provideLinkState, useLinkState } from '../BbBaseButton/useLinkState';
 import type { Sizes as SizeMap } from '@/types/SizeScale';
 type Sizes = keyof SizeMap;
 
 defineOptions({
+	// An app's own variants as declared `pt:<part>:<name>` props (Q76.7).
+	mixins: [variantPt(BB_BUTTON_PT)],
 	inheritAttrs: false,
 });
 /**
@@ -102,7 +132,7 @@ const props = withDefaults(defineProps<BbButtonProps>(), {
 	trueValue: true,
 	variant: 'primary',
 });
-defineSlots<BbButtonSlots>();
+const slots = defineSlots<BbButtonSlots>();
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbButton', removedPropsFor('BbButton'));
@@ -134,7 +164,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 const setButtonRef = (el: unknown) => {
-	buttonDom.value = extractDomContainer(el) ?? undefined;
+	buttonDom.value = extractHtmlContainer(el) ?? undefined;
 };
 
 // `class` is not forwarded: it is the instance's base `root` passthrough entry
@@ -176,6 +206,21 @@ const loading = computed(
 /** Latches on the first load; gates the spinner's <Transition> — see the template. */
 const hasLoadedOnce = useUntil(loading);
 
+/** Whether the link points at the current page: `pt` states and slot props, here and in the base button. */
+const linkState = useLinkState(props);
+provideLinkState(linkState);
+
+/** An icon-only button: the `icon` prop or slot, the label visually hidden. */
+const iconOnly = computed(() => !!props.icon || !!slots.icon);
+
+/** What an icon slot sees: the button's `pt` states (Q81.4). */
+const iconScope = computed<BbButtonIconSlotProps>(() => ({
+	...linkState.value,
+	pressed: isToggle.value && isPressed.value,
+	loading: loading.value,
+	disabled: !!props.disabled,
+}));
+
 /**
  * Passthrough (plans/passthrough/BbButton.md — the exemplar). Named
  * `passthrough`, not `pt`: in the template a bare `pt` is the `pt` PROP (the
@@ -193,7 +238,10 @@ const passthrough = usePassthrough({
 		loading: () => loading.value,
 		disabled: () => !!props.disabled,
 		pressed: () => isToggle.value && isPressed.value,
+		activeLink: () => linkState.value.activeLink,
+		exactActiveLink: () => linkState.value.exactActiveLink,
 	},
+	variant: { ...BB_BUTTON_PT.variant, current: () => props.variant },
 });
 
 const onClick = async (event: Event) => {
@@ -352,7 +400,7 @@ const rootBindings = computed(() =>
 					'bb-button--loading': loading.value,
 					'bb-button--soft-disabled': softDisabled.value,
 					'bb-button--group': props.group,
-					'bb-button--icon': !!props.icon,
+					'bb-button--icon': iconOnly.value,
 					'bb-button--pressed': isToggle.value && isPressed.value,
 					[`bb-button--${props.variant}`]: props.variant !== 'none',
 				},
@@ -384,9 +432,15 @@ defineExpose({ $el: buttonDom });
 import type { RouteLocationRaw } from 'vue-router';
 import type { ButtonTag } from '@/types/CommonProps';
 import type { IconType } from '@/types/Icon';
-import type { ButtonVariantType } from '@/types/ButtonVariant';
+import {
+	BUTTON_VARIANTS,
+	type ButtonVariantBuiltIn,
+	type ButtonVariantRegistry,
+	type ButtonVariantType,
+} from '@/types/ButtonVariant';
 import type { Responsive } from '@/types/ResponsiveSize';
-import type { PtMap, PtValue } from '@/types/passthrough';
+import type { PtMap, PtValue, PtVariantAttrs } from '@/types/passthrough';
+import type { BbLinkSlotProps } from '../BbBaseButton/types';
 
 type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
@@ -411,26 +465,43 @@ type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type BbButtonPtPart = 'root' | 'icon' | 'spinner' | 'text';
 /**
  * Passthrough states of `BbButton`: true while `--loading` / `--disabled` /
- * `--pressed`. There is no `active` state (the pointer press is Tailwind's
- * `active:` variant) and no `current` state (a link to the current route is
- * `activeClass` / `exactActiveClass`).
+ * `--pressed`, and for a link while `activeClass` / `exactActiveClass` are on.
+ * There is no `active` state (the pointer press is Tailwind's `active:`
+ * variant). A link to the current page is `activeLink` / `exactActiveLink`,
+ * on every part: the sidebar entry of the page you are on styles its root,
+ * icon and text from them, and the default slot gets the same two booleans.
  *
+ * @state activeLink - Component-wide: a link to the current page or one of
+ *   its ancestors (`/users` on `/users/5`) — exactly when `activeClass` is on.
+ *   The weakest state: `pressed`, `disabled` and `loading` win a conflict.
+ * @state exactActiveLink - Component-wide: a link to the current page itself
+ *   — exactly when `exactActiveClass` is on (`activeLink` is on too, so its
+ *   entries apply first and these win).
  * @state disabled - Component-wide: the button is `disabled`.
  * @state loading - Component-wide: `loading` is on — the spinner shows and
  *   the button ignores the pointer.
  * @state pressed - Component-wide: a toggle button (`v-model`) is on —
  *   `aria-pressed="true"`, `--pressed` on the root.
  */
-export type BbButtonPtState = 'loading' | 'disabled' | 'pressed';
+export type BbButtonPtState =
+	| 'activeLink'
+	| 'exactActiveLink'
+	| 'loading'
+	| 'disabled'
+	| 'pressed';
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
 export const BB_BUTTON_PT = {
 	parts: ['root', 'icon', 'spinner', 'text'],
 	// Order = precedence, last wins: a pressed toggle that is also disabled or
-	// loading shows the disabled / loading styling.
-	states: ['pressed', 'disabled', 'loading'],
+	// loading shows the disabled / loading styling; the link states sit below
+	// all three.
+	states: ['activeLink', 'exactActiveLink', 'pressed', 'disabled', 'loading'],
+	// The `variant` is a state on every part (Q76.7), below the real ones.
+	variant: { names: BUTTON_VARIANTS, option: 'buttonVariants' },
 } as const satisfies {
 	parts: readonly BbButtonPtPart[];
 	states: readonly BbButtonPtState[];
+	variant: { names: readonly ButtonVariantBuiltIn[]; option: string };
 };
 
 // The passthrough props are a mapped type written INLINE with this
@@ -445,15 +516,23 @@ export const BB_BUTTON_PT = {
 export type BbButtonProps = {
 	[K in
 		| `pt:${BbButtonPtPart}`
-		| `pt:${BbButtonPtPart}:${BbButtonPtState}`]?: PtValue;
-} & {
-	/**
-	 * Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same
-	 * keys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`,
-	 * `spinner`, `text`. States: `loading`, `disabled`.
-	 */
-	pt?: PtMap<BbButtonPtPart, BbButtonPtState>;
-} & BbButtonOwnProps;
+		| `pt:${BbButtonPtPart}:${BbButtonPtState}`
+		| `pt:${BbButtonPtPart}:${ButtonVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<
+	BbButtonPtPart,
+	keyof ButtonVariantRegistry
+> & {
+		/**
+		 * Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same
+		 * keys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`,
+		 * `spinner`, `text`. States: `loading`, `disabled`, `pressed`, and the
+		 * registered variants (an app's own included).
+		 */
+		pt?: PtMap<
+			BbButtonPtPart,
+			BbButtonPtState | ButtonVariantBuiltIn | keyof ButtonVariantRegistry
+		>;
+	} & BbButtonOwnProps;
 
 /**
  * BbButton's props without its passthrough. `BbDropdownButton` takes them for
@@ -797,11 +876,35 @@ export type BbButtonOwnProps = {
 	viewTransition?: boolean;
 };
 
+/**
+ * What `#icon` / `#prepend:icon` / `#append:icon` see: the button's `pt`
+ * states, so a glyph can follow them (a filled icon on the current page's link).
+ */
+export type BbButtonIconSlotProps = BbLinkSlotProps & {
+	/** A toggle (`v-model`) that is on. */
+	pressed: boolean;
+	/** Loading, the automatic loading included: the spinner shows. */
+	loading: boolean;
+	/** The `disabled` prop. */
+	disabled: boolean;
+};
+
 export type BbButtonSlots = {
 	/**
-	 * Primary content rendered inside the button. Falls back to the `text` prop when empty.
+	 * Primary content rendered inside the button. Falls back to the `text` prop
+	 * when empty. A link's slot gets `{ activeLink, exactActiveLink }`: whether it
+	 * points at the current page (both `false` on a button).
 	 */
-	default?: (props: object) => any;
+	default?: (props: BbLinkSlotProps) => any;
+	/**
+	 * The icon of an icon-only button, replacing the `icon` prop. Renders inside
+	 * the `icon` part: `pt:icon`, `--icon-size` and the loading spinner apply.
+	 */
+	icon?: (props: BbButtonIconSlotProps) => any;
+	/** The leading icon, replacing `prepend:icon`; inside the `icon` part. */
+	'prepend:icon'?: (props: BbButtonIconSlotProps) => any;
+	/** The trailing icon, replacing `append:icon`; inside the `icon` part. */
+	'append:icon'?: (props: BbButtonIconSlotProps) => any;
 };
 ```
 
@@ -1181,7 +1284,8 @@ export type BbButtonSlots = {
 		.bb-spinner {
 			/* Whatever icon the spinner is parked on top of — the icon-only glyph
 			   or the prepend icon — fades out from under it. */
-			+ .bb-icon {
+			+ .bb-icon,
+			+ .bb-button__icon-slot {
 				opacity: 0;
 			}
 
@@ -1322,6 +1426,19 @@ export type BbButtonSlots = {
 		width: var(--icon-size);
 	}
 
+	/* An icon slot's box (Q81.4): it is the `icon` part, the consumer's glyph
+	   sits centred in it, and a BbIcon there takes the part's size, as the
+	   prop's own BbIcon does. */
+	.bb-button__icon-slot {
+		align-items: center;
+		display: inline-flex;
+		justify-content: center;
+
+		> .bb-icon {
+			--size: var(--icon-size);
+		}
+	}
+
 	/* The spinner mounts only while loading (plus its fade-out), first in the
 	   DOM and at zero layout cost: its width plus the flex gap are cancelled
 	   by an equal negative margin, so it lands exactly on top of the neighbour

package/dist/ai/source/BbCheckboxGroup.md

@@ -59,6 +59,7 @@
 				:has-errors="fieldHasErrors"
 				:has-warnings="fieldHasWarnings"
 				:hide-label="hideLabel"
+				:indicator-ready="indicatorReady"
 				:item-input-align="itemInputAlign"
 				:item-label-align="itemLabelAlign"
 				:item-layout="itemLayout"
@@ -68,8 +69,22 @@
 				:loading-text="loadingText"
 				:options="options"
 				:passthrough="passthrough"
+				:variant="variant"
 			>
-				<template #prepend><slot name="prepend"></slot></template>
+				<template #prepend>
+					<!-- The `variant` indicators (Q76.11 d): first in the list, so the
+					     positioned rows paint over them; hidden from the tree (the
+					     checked state is the inputs'). -->
+					<span
+						v-for="box in indicatorBoxes"
+						:key="box.key"
+						aria-hidden="true"
+						class="bb-checkbox-group__indicator"
+						:style="indicatorStyle(box)"
+						v-bind="passthrough.indicator"
+					></span>
+					<slot name="prepend"></slot>
+				</template>
 				<template #loading><slot name="loading"></slot></template>
 				<template #empty="data"
 					><slot name="empty" v-bind="data"></slot
@@ -135,6 +150,7 @@ import {
 	formControlPtActive,
 	pickActive,
 	usePassthrough,
+	variantPt,
 } from '@/composables/usePassthrough';
 import {
 	computed,
@@ -159,6 +175,7 @@ import {
 	toggleInputValue,
 } from '@/utilities/functions/toggleInput';
 import { useToggleListFocus } from '@/composables/useToggleInput';
+import { useChoiceIndicator } from '@/composables/useChoiceIndicator';
 import { useItemsGetter } from '@/composables/useItemsGetter';
 import { useIndexById } from '../../composables/useIndexById';
 import { useBaseOptions } from '@/composables/useBaseOptions';
@@ -180,7 +197,11 @@ import {
 } from './types';
 import { useFormBinding } from '@/composables/useFormBinding';
 
-defineOptions({ inheritAttrs: false });
+defineOptions({
+	// An app's own variants as declared `pt:<part>:<name>` props (Q76.7).
+	mixins: [variantPt(BB_CHECKBOX_GROUP_PT)],
+	inheritAttrs: false,
+});
 const declaredProps = withDefaults(defineProps<BbCheckboxGroupProps<T>>(), {
 	inputPosition: 'left',
 	multiple: true,
@@ -396,6 +417,7 @@ const passthrough = usePassthrough({
 	props,
 	parts: BB_CHECKBOX_GROUP_PT.parts,
 	states: BB_CHECKBOX_GROUP_PT.states,
+	variant: { ...BB_CHECKBOX_GROUP_PT.variant, current: () => props.variant },
 	active: {
 		...pickActive(
 			formControlPtActive(props, () => passthroughHasValue.value),
@@ -404,6 +426,28 @@ const passthrough = usePassthrough({
 		loading: () => loading.value,
 	},
 });
+/**
+ * BbTabs' look (`variant`, Q76.11 d): the indicators under the checked rows,
+ * measured on the list. A pill per run of adjacent picks (`pill`), a bar per pick (`line`).
+ */
+/** `list-layout="vertical"` / `"vertical-stretch"` stack the strip into a column. */
+const stripVertical = computed(
+	() =>
+		props.listLayout === 'vertical' || props.listLayout === 'vertical-stretch'
+);
+const {
+	boxes: indicatorBoxes,
+	ready: indicatorReady,
+	styleOf: indicatorStyle,
+} = useChoiceIndicator({
+	kind: 'checkbox',
+	variant: () => props.variant,
+	vertical: () => stripVertical.value,
+	list: () => optionsElement.value,
+	rows: () => options.value,
+	rowClass: 'bb-checkbox-group__item',
+});
+
 /** The container names the heading `label`; this group names it `legend`, after its props. */
 const containerPassthrough = aliasParts(passthrough, { label: 'legend' });
 
@@ -474,7 +518,7 @@ const rowListeners = (option: Option) => ({
 	onMouseup: (event: MouseEvent) => emit('mouseup', event),
 });
 
-/** One row's native checkbox: named by its text when described, described by the group then its own description. */
+/** One row's native checkbox: named by its text alone, described by the group then its own description. */
 const rowInputAttrs = (
 	option: Option,
 	index: number,
@@ -535,18 +579,26 @@ const rowIconSlotProps = (
 
 ```ts
 import type { Responsive } from '@/types/ResponsiveSize';
+import {
+	CHECKBOX_VARIANTS,
+	type CheckboxVariantBuiltIn,
+	type CheckboxVariantRegistry,
+	type CheckboxVariantType,
+} from '@/types/CheckboxVariant';
 import type { BbOptionGroupItemProps } from '@/types/ItemProps';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import {
-	GROUP_PT_PARTS,
+	CHOICE_PT_PARTS,
+	type PtVariantAttrs,
 	GROUP_PT_STATES,
 	GROUP_ROW_PT_PARTS,
 	GROUP_ROW_PT_STATES,
+	type ChoiceFieldPtPart,
+	type ChoicePtMap,
+	type ChoicePtPart,
 	type GroupFieldPtPart,
-	type GroupPtMap,
 	type GroupRowPtPart,
 	type GroupWidePtState,
-	type GroupPtPart,
 	type GroupPtState,
 	type PtItemCtx,
 	type PtNoInfer,
@@ -569,46 +621,50 @@ import type { 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 const BB_CHECKBOX_GROUP_PT = {
-	parts: GROUP_PT_PARTS,
+	parts: CHOICE_PT_PARTS,
 	states: GROUP_PT_STATES,
 	/** `rowStates` are declared on `rowParts` only — the field parts never have them. */
 	rowParts: GROUP_ROW_PT_PARTS,
 	rowStates: GROUP_ROW_PT_STATES,
+	// The `variant` is a state on every part (Q76.7).
+	variant: { names: CHECKBOX_VARIANTS, option: 'checkboxVariants' },
 } as const satisfies {
 	parts: readonly BbCheckboxGroupPtPart[];
 	states: readonly BbCheckboxGroupPtState[];
 	rowParts: readonly GroupRowPtPart[];
 	rowStates: readonly BbCheckboxGroupPtState[];
+	variant: { names: readonly CheckboxVariantBuiltIn[]; option: string };
 };
 
 // Spelled INLINE with this component's own unions (Vue's SFC type resolver
 // does not substitute a generic alias's type parameters — PASSTHROUGH.md T20).
 // Two mapped types, never `Partial<Record<…>>`: the lint autofix rewrites one
 // into the other and the SFC resolver reads only the mapped spelling (T23).
+/**
+ * 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.
+ */
 /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
-export type BbCheckboxGroupProps<T> = {
+export type BbCheckboxGroupBaseProps<T> = {
 	[K in
 		| `pt:${GroupFieldPtPart}`
 		| `pt:${GroupFieldPtPart}:${GroupWidePtState}`
-		| `pt:${GroupRowPtPart}:${BbCheckboxGroupPtState}`]?: PtValue;
+		| `pt:${GroupRowPtPart}:${GroupPtState}`]?: PtValue;
 } & {
 	// The row parts also take a per-item function, typed on this group's
 	// item — a literal function type, not `PtItemFn<T, …>` (T23).
 	[K in `pt:${GroupRowPtPart}`]?:
 		| PtValue
-		| ((ctx: PtItemCtx<PtNoInfer<T>, BbCheckboxGroupPtState>) => PtItemResult);
+		| ((ctx: PtItemCtx<PtNoInfer<T>, GroupPtState>) => PtItemResult);
 } & {
 	/* eslint-enable @typescript-eslint/consistent-indexed-object-style */
-	/**
-	 * 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.
 	 */
@@ -945,6 +1001,33 @@ export type BbCheckboxGroupEvents = {
 	(e: 'update:modelValue', value: any): void;
 };
 
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+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;
+		};
+		/* eslint-enable @typescript-eslint/consistent-indexed-object-style */
+		/**
+		 * 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.
@@ -1048,6 +1131,8 @@ export type BbCheckboxGroupSlots<T> = {
 ## Styles
 
 ```css
+@import '../OptionsContainer/choice-strip.css';
+
 .bb-checkbox-group {
 	.bb-field__layout--horizontal {
 		.bb-field__label {
@@ -1261,7 +1346,7 @@ export type BbCheckboxGroupSlots<T> = {
 			}
 			> :where(
 				:not(
-					input,
+					[type='hidden'],
 					.bb-checkbox-group__label,
 					.bb-checkbox-group__item-description
 				)
@@ -1294,7 +1379,7 @@ export type BbCheckboxGroupSlots<T> = {
 			)
 			> :where(
 				:not(
-					input,
+					[type='hidden'],
 					.bb-checkbox-group__label,
 					.bb-checkbox-group__item-description
 				)
@@ -1368,6 +1453,19 @@ export type BbCheckboxGroupSlots<T> = {
 	}
 }
 
+/* A side hidden with the library's or Tailwind's hiding classes takes its gap
+   with it (ATT-11 e): `hideLabel` / `pt:label="sr-only"` (out of flow) or
+   `pt:icon="hidden"` would leave an empty track AND the gap beside it (the
+   row gap in a `vertical` item, Q76.11 c), and the side still shown sat
+   off-centre. `:where` keeps the rule at the row's
+   one class, so a consumer `gap-*` on `pt:item` still wins. */
+.bb-checkbox-group__item:where(
+	:has(> .bb-checkbox-group__label:is(.bb-sr-only, .sr-only)),
+	:has(> .bb-toggle-input + :is(.hidden, .sr-only, .bb-sr-only))
+) {
+	gap: 0;
+}
+
 .bb-checkbox-group__label {
 	color: var(--bb-text);
 	font-size: var(--bb-label-fs);
@@ -1400,6 +1498,32 @@ export type BbCheckboxGroupSlots<T> = {
 	user-select: none;
 }
 
+/*
+ * `tiles` (ATT-11 d): the invisible native input covers the WHOLE tile,
+ * padding included, not only the glyph's cell, so a click, a hover tooltip on
+ * the input and a test runner's hit-target check land on it anywhere on the
+ * tile. `grid-area: auto` is load-bearing: an absolutely positioned grid child
+ * is sized against its grid area, so `inset: 0` would still be the glyph
+ * cell. A link or a button inside a tile sits above the input and keeps its
+ * own click. List rows keep the cell overlay.
+ */
+.bb-checkbox-group__list--tiles > .bb-checkbox-group__item {
+	position: relative;
+
+	> .bb-toggle-input {
+		border-radius: inherit;
+		grid-area: auto;
+		inset: 0;
+		position: absolute;
+		z-index: 1;
+	}
+
+	:is(a, button) {
+		position: relative;
+		z-index: 2;
+	}
+}
+
 /* ---- Touch targets (Q44.19) -------------------------------------------
  * A row is one label line (`--bb-label-lh`, 18px) and the rows sit
  * `--row-gap` (10px) apart. On a coarse pointer only, each row gets an