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

package/dist/ai/source/BbAlert.md

@@ -506,7 +506,7 @@ export type BbAlertSlots = {
 				letter-spacing: -0.01em;
 				line-height: var(--title-lh);
 				margin-bottom: 2px;
-				padding-right: calc(var(--close-size) + var(--gap));
+				padding-inline-end: calc(var(--close-size) + var(--gap));
 			}
 
 			.bb-alert__text {
@@ -526,9 +526,9 @@ export type BbAlertSlots = {
 			);
 			--right-p: var(--top-p); /* same inset on the right edge */
 			color: var(--fg-muted);
+			inset-inline-end: var(--right-p);
 			padding: 2px;
 			position: absolute;
-			right: var(--right-p);
 			top: var(--top-p);
 			.bb-icon {
 				--size: var(--close-size);
@@ -569,8 +569,8 @@ export type BbAlertSlots = {
 		--hit: 44px;
 		content: '';
 		height: var(--hit);
+		inset-inline-end: calc(-1 * var(--right-p));
 		position: absolute;
-		right: calc(-1 * var(--right-p));
 		top: calc(-1 * var(--top-p));
 		width: var(--hit);
 	}

package/dist/ai/source/BbBadge.md

@@ -632,7 +632,7 @@ export type BbBadgeButtonSlots = {
 	&:has(> .bb-badge__trailing) {
 		.bb-badge__body {
 			border-radius: var(--r) 0 0 var(--r);
-			padding-right: 0;
+			padding-inline-end: 0;
 		}
 	}
 
@@ -659,7 +659,7 @@ export type BbBadgeButtonSlots = {
 		/* Overlap the (hidden) clear button onto the append icon so they share the
 		   trailing slot and cross-fade in place on hover/focus. */
 		&:has(+ .bb-badge__clear) {
-			margin-right: calc(
+			margin-inline-end: calc(
 				(
 						var(--gap) + (var(--clear-size) - var(--icon-size)) / 2 +
 							var(--icon-size)

package/dist/ai/source/BbBadgeButton.md

@@ -88,8 +88,9 @@ const bindings = computed(() => {
 		.concat(onClick ?? [])
 		.filter((fn): fn is ClickListener => typeof fn === 'function');
 	return mergeProps(rest, props as Record<string, unknown>, {
-		'aria-disabled': loading.value ? true : undefined,
-		tabindex: loading.value ? -1 : undefined,
+		// Only while loading: an `undefined` here would erase the consumer's own
+		// `aria-disabled` / `tabindex`, which `rest` carries.
+		...(loading.value ? { 'aria-disabled': true, tabindex: -1 } : {}),
 		onClick: (event: MouseEvent) => {
 			if (loading.value) {
 				// A link or submit body must not act either.
@@ -506,7 +507,7 @@ export type BbBadgeButtonSlots = {
 	&:has(> .bb-badge__trailing) {
 		.bb-badge__body {
 			border-radius: var(--r) 0 0 var(--r);
-			padding-right: 0;
+			padding-inline-end: 0;
 		}
 	}
 
@@ -533,7 +534,7 @@ export type BbBadgeButtonSlots = {
 		/* Overlap the (hidden) clear button onto the append icon so they share the
 		   trailing slot and cross-fade in place on hover/focus. */
 		&:has(+ .bb-badge__clear) {
-			margin-right: calc(
+			margin-inline-end: calc(
 				(
 						var(--gap) + (var(--clear-size) - var(--icon-size)) / 2 +
 							var(--icon-size)

package/dist/ai/source/BbBaseButton.md

@@ -883,7 +883,7 @@ export const BB_BASE_BUTTON_PROP_KEYS = Object.keys(baseButtonPropMap) as Array<
 	cursor: pointer;
 	outline: 2px solid transparent;
 	outline-offset: 2px;
-	text-align: left;
+	text-align: start;
 	transition-duration: var(--bb-transition-fast);
 	transition-property:
 		color, background-color, border-color, text-decoration-color, box-shadow;

package/dist/ai/source/BbBaseRadioIcon.md

@@ -205,6 +205,7 @@ export type BbBaseRadioIconProps = {
 		/* Inner disc inset must track the glyph stroke, not a leftover 2px,
 		   or a 3px plate theme clips the checked dot. */
 		height: calc(100% - 2 * var(--bb-border-w-sm) - var(--space));
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: centred with a physical translate */
 		left: 50%;
 		position: absolute;
 		top: 50%;

package/dist/ai/source/BbBaseSwitchIcon.md

@@ -234,6 +234,7 @@ export type BbBaseSwitchIconProps = {
 		border-radius: calc(var(--r) * 0.8);
 		display: inline-block;
 		height: var(--thumb);
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb travels by a physical translate */
 		left: var(--inset);
 		position: absolute;
 		top: var(--inset);

package/dist/ai/source/BbBreadcrumbs.md

@@ -80,7 +80,7 @@
 				<!-- Visible breadcrumb items (index >= overflowCount) -->
 				<template
 					v-for="(item, index) in items"
-					:key="item.key ?? `:keyless-${index}`"
+					:key="item.value ?? `:keyless-${index}`"
 				>
 					<template v-if="index >= overflowCount">
 						<li
@@ -109,13 +109,13 @@
 								:disabled="item.disabled || disabled"
 								:tag="isCurrent(item, index) ? 'span' : undefined"
 							>
-								<!-- prepend: <key>:prepend | item:prepend | inline prepend:icon -->
+								<!-- prepend: <value>:prepend | item:prepend | inline prepend:icon -->
 								<slot
 									:disabled="!!(item.disabled || disabled)"
 									:index="index"
 									:item="item"
+									:label="item.label"
 									:name="edgeSlot(item, 'prepend').name"
-									:text="item.text"
 								/>
 								<BbIcon
 									v-if="
@@ -135,7 +135,7 @@
 									class="bb-breadcrumbs__text"
 									:title="
 										items.length > 1 && overflowCount === items.length - 1
-											? item.text
+											? item.label
 											: undefined
 									"
 									v-bind="
@@ -149,18 +149,18 @@
 										:disabled="!!(item.disabled || disabled)"
 										:index="index"
 										:item="item"
+										:label="item.label"
 										:name="itemSlotBase(item)"
-										:text="item.text"
-										>{{ item.text }}</slot
+										>{{ item.label }}</slot
 									>
 								</span>
-								<!-- append: <key>:append | item:append | inline append:icon -->
+								<!-- append: <value>:append | item:append | inline append:icon -->
 								<slot
 									:disabled="!!(item.disabled || disabled)"
 									:index="index"
 									:item="item"
+									:label="item.label"
 									:name="edgeSlot(item, 'append').name"
-									:text="item.text"
 								/>
 								<BbIcon
 									v-if="!edgeSlot(item, 'append').exists && item['append:icon']"
@@ -233,12 +233,12 @@ const props = withDefaults(defineProps<BbBreadcrumbsProps>(), {
 
 defineSlots<BbBreadcrumbsSlots>();
 
-// Per-crumb slots are named after each item's `key` through `slotKey`, so a
+// Per-crumb slots are named after each item's `value` through `slotKey`, so a
 // removed prop or a slot spelled the pre-reset way is reported, as on BbTable
 // / BbTabs (Q56.28).
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbBreadcrumbs', removedPropsFor('BbBreadcrumbs'), {
-		slotKeys: () => props.items.map((item) => item.key),
+		slotKeys: () => props.items.map((item) => item.value),
 	});
 /**
  * Passthrough (plans/passthrough/BbBreadcrumbs.md). `item` is resolved per crumb (`active` = the current page: the last crumb, when it has no target).
@@ -291,14 +291,16 @@ const STRUCTURAL_SLOTS = new Set([
 ]);
 
 /**
- * Normalized slot base for an item (`slotKey(key)`), shared with every family
- * component. A crumb without a `key` gets `:keyless` — a name `slotKey` never
+ * Normalized slot base for an item (`slotKey(value)`), shared with every family
+ * component. A crumb without a `value` gets `:keyless` — a name `slotKey` never
  * produces and no template can write — so it has no slot of its own and falls
  * back to the generic ones (Q53.16 / owner doctrine 2026-09-24: slot names are
- * written, never derived from the text).
+ * written, never derived from the label).
  */
 const itemSlotBase = (item: Item) =>
-	item.key == null || item.key === '' ? ':keyless' : slotKey(String(item.key));
+	item.value == null || item.value === ''
+		? ':keyless'
+		: slotKey(String(item.value));
 
 /**
  * Item props forwarded to the inner `BbBaseButton`, minus the edge-icon fields
@@ -324,14 +326,20 @@ const isCurrent = (item: Item, index: number) =>
 	!item.onClick;
 
 const buttonProps = (item: Item, index: number) => {
-	const { ['prepend:icon']: _p, ['append:icon']: _a, ...rest } = item;
+	const {
+		['prepend:icon']: _p,
+		['append:icon']: _a,
+		value: _value,
+		label: _label,
+		...rest
+	} = item;
 	return isCurrent(item, index)
 		? { ...rest, 'aria-current': 'page' as const }
 		: rest;
 };
 
 /**
- * Resolves an edge region's precedence — `<key>:suffix` (per-item) →
+ * Resolves an edge region's precedence — `<value>:suffix` (per-item) →
  * `item:suffix` (generic) → inline `prepend:icon`/`append:icon`. Returns the
  * winning slot `name` plus whether a slot actually `exists`; when it doesn't,
  * `name` is the (absent) per-key name so the outlet renders nothing and the
@@ -369,7 +377,7 @@ const resolvedEllipsisAriaLabel = computed(
  * Estimates one breadcrumb item width using weighted character categories.
  */
 const estimateItemWidth = (item: Item) => {
-	const label = item.text ?? String(item.key);
+	const label = item.label ?? '';
 	return estimateBreadcrumbItemWidth(label, {
 		estimationBias: resolvedEstimationBias.value,
 		fontWidth: FONT_WIDTH,
@@ -492,7 +500,9 @@ const recompute = (availableWidth: number) => {
 // Observe this component width so overflow is based on real allocated space.
 const breadcrumbsEl = computed(() => navRef.value);
 const itemsWidthSignature = computed(() =>
-	props.items.map((item) => `${String(item.key)}::${item.text ?? ''}`).join('|')
+	props.items
+		.map((item) => `${String(item.value)}::${item.label ?? ''}`)
+		.join('|')
 );
 // --- Recompute scheduling + runaway-loop guard ------------------------------
 // The ResizeObserver watches this element, but a recompute can flip
@@ -641,15 +651,15 @@ onBeforeUnmount(() => {
 	}
 });
 
-// Map hidden items to BbDropdown item format. `prepend:icon` / `append:icon`
-// carry over verbatim (same field names as a dropdown item), and per-item slots
-// are forwarded below, so an overflowed item renders the same content.
-const overflowDropdownItems = computed<DropdownItem[]>(() => {
-	return props.items.slice(0, overflowCount.value).map((item) => ({
-		...item,
-		text: item.text ?? item.key ?? '',
-	}));
-});
+// Hidden crumbs ARE dropdown rows: the same `{ label, value }` shape and the
+// same `prepend:icon` / `append:icon`, so they pass straight through, and the
+// per-crumb slots are forwarded below, so an overflowed crumb renders the same
+// content. A crumb without a label is a row without one.
+const overflowDropdownItems = computed<DropdownItem[]>(() =>
+	props.items
+		.slice(0, overflowCount.value)
+		.map((item) => ({ ...item, label: item.label ?? '' }) as DropdownItem)
+);
 </script>
 
 <style lang="postcss">
@@ -664,27 +674,38 @@ import type { BbBaseButtonProps } from '../BbBaseButton/types';
 import type { PtMap, PtValue } from '@/types/passthrough';
 import type { 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>;
+	/** The crumb's text. */
+	label?: string;
 	/**
-	 * 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).
+	 * 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`.
 	 */
-	key?: string;
+	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;
 };
@@ -786,8 +807,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. */
@@ -806,9 +827,9 @@ export type BbBreadcrumbsEllipsisSlotProps = {
 };
 
 /**
- * @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 = {
 	/**
@@ -821,14 +842,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/ai/source/BbButton.md

@@ -69,7 +69,8 @@
 <script setup lang="ts">
 import { BbBaseButton, BbSpinner } from '@/index';
 import BbIcon from '../BbIcon/BbIcon.vue';
-import { computed, mergeProps, ref, useAttrs, watchEffect } from 'vue';
+import { computed, inject, mergeProps, ref, useAttrs, watchEffect } from 'vue';
+import { BB_FORM_SUBMIT_LOCK } from '@/composables/formSubmitLock';
 import { pickBy } from '@/utilities/functions/pickBy';
 import { noop } from '@/utilities/functions/noop';
 import { useLocale } from '@/composables/useLocale';
@@ -81,6 +82,7 @@ import { extractDomContainer } 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 { useToggleRoving } from './toggleRoving';
 import type { Sizes as SizeMap } from '@/types/SizeScale';
 type Sizes = keyof SizeMap;
 
@@ -143,8 +145,16 @@ const forwardedAttrs = computed(() => {
 
 const internalLoading = ref(0);
 
+// Q60.17: a `type="submit"` button inside a BbForm spins while the form's
+// save runs (unless the form sets `disable-submit-lock`). Other buttons in
+// the form (Cancel, a row action) are untouched.
+const formLock = inject(BB_FORM_SUBMIT_LOCK, null);
+
 const loading = computed(
-	() => props.loading || (!!internalLoading.value && !props.disableAutoLoading)
+	() =>
+		props.loading ||
+		(!!internalLoading.value && !props.disableAutoLoading) ||
+		(props.type === 'submit' && !!formLock?.locked())
 );
 
 /** Latches on the first load; gates the spinner's <Transition> — see the template. */
@@ -289,11 +299,35 @@ const softDisabled = computed(
 	() => loading.value && !props.interactiveWhileLoading
 );
 
+/**
+ * Adjacent `group` toggles are one Tab stop with arrow keys inside
+ * (Q44.25-001, see `toggleRoving.ts`). A consumer `tabindex` opts a button out.
+ */
+const roving = useToggleRoving(
+	buttonDom,
+	computed(() => !!props.group && isToggle.value && !('tabindex' in attrs)),
+	() => [isPressed.value, props.disabled, softDisabled.value]
+);
+
+/**
+ * The `tabindex` / `aria-disabled` we mean, or nothing. Written as `undefined`
+ * they used to reach `mergeProps` after the forwarded attrs and erase a
+ * consumer's own `tabindex` / `aria-disabled`: an explicit attr wins unless we
+ * mean one (loading takes the button out of the tab order either way).
+ */
+const managedFocus = computed(() => {
+	const tabindex = softDisabled.value ? -1 : roving.tabindex.value;
+	return {
+		...(softDisabled.value ? { 'aria-disabled': true } : {}),
+		...(tabindex === undefined ? {} : { tabindex }),
+	};
+});
+
 const rootBindings = computed(() =>
 	mergeProps(
 		propsToPass.value,
 		{
-			'aria-disabled': softDisabled.value ? true : undefined,
+			...managedFocus.value,
 			'aria-pressed': isToggle.value ? isPressed.value : undefined,
 			class: [
 				'bb-button',
@@ -308,8 +342,9 @@ const rootBindings = computed(() =>
 				},
 			],
 			disabled: props.disabled,
-			tabindex: softDisabled.value ? -1 : undefined,
 			onClick,
+			onFocusin: roving.onFocusin,
+			onKeydown: roving.onKeydown,
 		},
 		passthrough.root
 	)
@@ -463,7 +498,10 @@ export type BbButtonProps = {
 	exactActiveClass?: string;
 
 	/**
-	 * Identifies the button as part of a button group.
+	 * Identifies the button as part of a button group: adjacent `group`
+	 * buttons fuse into one segment (shared borders and radius). Adjacent
+	 * `group` toggles (each with a `v-model`) are also one Tab stop, with
+	 * ArrowLeft / ArrowRight / Home / End moving between them.
 	 */
 	group?: boolean;
 
@@ -885,15 +923,6 @@ export type BbButtonSlots = {
 	border-radius: var(--r);
 	border-style: solid;
 	border-width: var(--bw);
-	/* Resting lift, but only on a PLATE — primary, secondary, outline and
-	   destructive opt in below. Ghost, link and `none` stay flat whatever the
-	   theme asks for, because a lift on a transparent box reads as a bug.
-
-	   The plates read `--elev-tier`, not `--bb-elev` directly, so the size
-	   blocks can drop xs and sm to the small tier without handing a shadow to
-	   the flat variants. */
-	--elev-tier: var(--bb-elev); /* the shadow a plate variant may take */
-	--elev: 0 0 0 0 transparent; /* the shadow painted; flat variants keep this */
 	box-shadow:
 		var(--elev),
 		0px 0px 0px 0px var(--ring-color);
@@ -905,14 +934,23 @@ export type BbButtonSlots = {
 	justify-content: center;
 	line-height: var(--fs);
 	min-height: var(--h);
-	padding-left: var(--px);
-	padding-right: var(--px);
+	padding-inline-end: var(--px);
+	padding-inline-start: var(--px);
 	transition-duration: var(--bb-transition-fast);
 	transition-property:
 		box-shadow, color, background-color, border-color, min-height, font-size,
 		padding-left;
 	transition-timing-function: var(--bb-ease);
 	vertical-align: top;
+	/* Resting lift, but only on a PLATE — primary, secondary, outline and
+	   destructive opt in below. Ghost, link and `none` stay flat whatever the
+	   theme asks for, because a lift on a transparent box reads as a bug.
+
+	   The plates read `--elev-tier`, not `--bb-elev` directly, so the size
+	   blocks can drop xs and sm to the small tier without handing a shadow to
+	   the flat variants. */
+	--elev-tier: var(--bb-elev); /* the shadow a plate variant may take */
+	--elev: 0 0 0 0 transparent; /* the shadow painted; flat variants keep this */
 
 	&:hover:not(.bb-base-button--disabled) {
 		background-color: var(--bg-hover);
@@ -1012,7 +1050,7 @@ export type BbButtonSlots = {
 		   rules above, which paint `border-color` on the button and would
 		   otherwise take the left edge with them. */
 		& + .bb-button.bb-button--group {
-			border-left-color: color-mix(
+			border-inline-start-color: color-mix(
 				in oklab,
 				var(--bb-primary) 60%,
 				var(--bb-border)
@@ -1030,7 +1068,7 @@ export type BbButtonSlots = {
 		--elev: var(--elev-tier);
 
 		& + .bb-button.bb-button--group {
-			border-left-color: var(--bb-secondary-pressed);
+			border-inline-start-color: var(--bb-secondary-pressed);
 		}
 	}
 
@@ -1100,19 +1138,19 @@ export type BbButtonSlots = {
 
 	&.bb-button--icon {
 		min-width: var(--h);
-		padding-left: 0;
-		padding-right: 0;
+		padding-inline-end: 0;
+		padding-inline-start: 0;
 	}
 
 	&:has(.bb-button__prepend-icon),
 	&.bb-button--loading:not(.bb-button--icon):not(
 			:has(.bb-button__append-icon)
 		) {
-		padding-left: calc(var(--px) * 0.65);
+		padding-inline-start: calc(var(--px) * 0.65);
 	}
 
 	&:has(.bb-button__append-icon) {
-		padding-right: calc(var(--px) * 0.65);
+		padding-inline-end: calc(var(--px) * 0.65);
 	}
 
 	&.bb-button--soft-disabled {
@@ -1133,7 +1171,7 @@ export type BbButtonSlots = {
 
 			/* No icon to hide behind: carve the spinner's slot out of the label. */
 			+ .bb-button__text {
-				margin-left: calc(var(--gap) + var(--icon-size));
+				margin-inline-start: calc(var(--gap) + var(--icon-size));
 			}
 		}
 
@@ -1145,21 +1183,21 @@ export type BbButtonSlots = {
 			}
 
 			.bb-spinner + .bb-button__text {
-				margin-left: 0;
+				margin-inline-start: 0;
 			}
 		}
 	}
 
 	&.bb-button--group {
 		&:has(+ .bb-button--group) {
-			border-bottom-right-radius: 0;
-			border-right-width: 0;
-			border-top-right-radius: 0;
+			border-end-end-radius: 0;
+			border-inline-end-width: 0;
+			border-start-end-radius: 0;
 		}
 
 		& + .bb-button--group {
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
+			border-end-start-radius: 0;
+			border-start-start-radius: 0;
 		}
 	}
 
@@ -1229,7 +1267,7 @@ export type BbButtonSlots = {
 		--elev-tier: var(--bb-elev);
 	}
 	.bb-button__text {
-		margin-left: 0;
+		margin-inline-start: 0;
 		transition: margin-left var(--bb-transition-medium) var(--bb-ease);
 
 		/* Optical centering, as on BbBadge's label. Flex centers the LINE BOX,
@@ -1273,7 +1311,7 @@ export type BbButtonSlots = {
 	   by an equal negative margin, so it lands exactly on top of the neighbour
 	   it stands in for. The fade itself is the Vue <Transition> below. */
 	.bb-spinner {
-		margin-right: calc((var(--gap) + var(--icon-size)) * -1);
+		margin-inline-end: calc((var(--gap) + var(--icon-size)) * -1);
 	}
 
 	/* <Transition name="bb-button-spinner"> endpoints; the duration comes from
@@ -1288,8 +1326,8 @@ export type BbButtonSlots = {
 	   it overlays the append icon by the same zero-cost trick. */
 	&:has(.bb-button__append-icon):not(:has(.bb-button__prepend-icon)) {
 		.bb-spinner {
-			margin-left: calc((var(--gap) + var(--icon-size)) * -1);
-			margin-right: 0;
+			margin-inline-end: 0;
+			margin-inline-start: calc((var(--gap) + var(--icon-size)) * -1);
 			order: 1;
 		}
 	}