bitboss-ui 3.0.0-beta.47 → 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)
@@ -751,20 +751,24 @@ export type BbBadgeButtonSlots = {
 /* ---- Touch target: a chip's remove × (Q44.19) -------------------------
  * Scoped to the chips a field lays out (`.bb-tag__badge`: BbTag, and
  * BbSelect's chips row), where the library owns the spacing: chips sit 4px
- * apart. On a coarse pointer only, the × (the chip's full height, 16px wide)
- * gets an invisible `::after` 2px past the chip on every outer side, half the
- * gap, and 6px inward over the end of its own label: 24×24, the WCAG 2.5.8
- * floor. A 44px × would need a 44px chip inside a 32px field (see the notes);
- * a free-standing `clearable` badge is placed by the consumer and unchanged. */
+ * apart. On a coarse pointer only, the × gets an invisible `::after` that
+ * spans the chip's full height (the × itself sits inside the pill border,
+ * `--bw`) and reaches 2px past the chip on its outer sides, half the gap, and
+ * 6px inward over the end of its own label: a 20px chip gives 24×24, the WCAG
+ * 2.5.8 floor (Q61.24: it was 24×22, measured inside the border). The × and
+ * its glyph do not move. A 44px × would need a 44px chip inside a 32px field
+ * (see the notes); a free-standing `clearable` badge is placed by the
+ * consumer and unchanged. */
 @media (pointer: coarse) {
 	.bb-tag__badge .bb-badge__clear {
 		position: relative;
 
 		&::after {
 			content: '';
-			inset-block: -2px; /* half the 4px chip gap */
-			inset-inline-end: -2px;
-			inset-inline-start: -6px; /* over the label's end: 16 + 6 + 2 = 24 */
+			/* half the 4px chip gap, past the pill border */
+			inset-block: calc(-2px - var(--bw));
+			inset-inline-end: calc(-2px - var(--bw));
+			inset-inline-start: -6px; /* over the label's end */
 			position: absolute;
 		}
 	}

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)
@@ -625,20 +626,24 @@ export type BbBadgeButtonSlots = {
 /* ---- Touch target: a chip's remove × (Q44.19) -------------------------
  * Scoped to the chips a field lays out (`.bb-tag__badge`: BbTag, and
  * BbSelect's chips row), where the library owns the spacing: chips sit 4px
- * apart. On a coarse pointer only, the × (the chip's full height, 16px wide)
- * gets an invisible `::after` 2px past the chip on every outer side, half the
- * gap, and 6px inward over the end of its own label: 24×24, the WCAG 2.5.8
- * floor. A 44px × would need a 44px chip inside a 32px field (see the notes);
- * a free-standing `clearable` badge is placed by the consumer and unchanged. */
+ * apart. On a coarse pointer only, the × gets an invisible `::after` that
+ * spans the chip's full height (the × itself sits inside the pill border,
+ * `--bw`) and reaches 2px past the chip on its outer sides, half the gap, and
+ * 6px inward over the end of its own label: a 20px chip gives 24×24, the WCAG
+ * 2.5.8 floor (Q61.24: it was 24×22, measured inside the border). The × and
+ * its glyph do not move. A 44px × would need a 44px chip inside a 32px field
+ * (see the notes); a free-standing `clearable` badge is placed by the
+ * consumer and unchanged. */
 @media (pointer: coarse) {
 	.bb-tag__badge .bb-badge__clear {
 		position: relative;
 
 		&::after {
 			content: '';
-			inset-block: -2px; /* half the 4px chip gap */
-			inset-inline-end: -2px;
-			inset-inline-start: -6px; /* over the label's end: 16 + 6 + 2 = 24 */
+			/* half the 4px chip gap, past the pill border */
+			inset-block: calc(-2px - var(--bw));
+			inset-inline-end: calc(-2px - var(--bw));
+			inset-inline-start: -6px; /* over the label's end */
 			position: absolute;
 		}
 	}

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;