bitboss-ui 3.0.0-beta.19 → 3.0.0-beta.20

package/dist/ai/BbDropdown.md

@@ -686,9 +686,12 @@ What each knob does:
   then searching for something else leaves the earlier selection unresolvable
   and breaks the `v-model` round-trip. **Recommended for every `multiple`
   searchable group.**
-- **`maxHeight`** defaults to `280` (≈ 10 rows) on a searchable group, because a
-  searched list should scroll rather than grow. Non-searchable groups are
-  uncapped unless you set it.
+- **`maxHeight`** defaults to `280` (≈ 10 rows) on a searchable group **in the
+  flyout**, because a searched list should scroll rather than grow. The
+  adaptive sheet ignores that default (and any explicit cap): the off-canvas
+  body is the only scrollport, so a downward swipe on a row can dismiss the
+  sheet the same way a swipe on the handle does. Non-searchable flyout groups
+  are uncapped unless you set it.
 
 Two knobs live on the **dropdown**, not the group, because they apply to every
 searchable group in the menu:
@@ -1125,8 +1128,11 @@ mid-session never swaps a live menu between flyout and sheet.
   stay a flyout everywhere — e.g. deterministic UI tests or dense desktop-only
   tooling.
 - `offCanvasProps` forwards overrides to the underlying `BbOffCanvas` (merged
-  over `direction: 'bottom'`, `size: 'auto'`, `draggable: true`); it is
-  ignored when `adaptive` resolves to `false`.
+  over `direction: 'bottom'`, `size: 'auto'`, `draggable: true`,
+  `hideClose: true`); it is ignored when `adaptive` resolves to `false`.
+  Pass `hideClose: false` to bring the close control back. The sheet search
+  field (on `searchable` groups) uses the same soft filled treatment as
+  `BbSelect`'s adaptive sheet.
 
 ### Works well with
 

package/dist/ai/BbOffCanvas.md

@@ -621,15 +621,26 @@ Set `draggable` to let the user flick the panel toward its edge to dismiss; a
 grab handle appears on the inner edge as the affordance. A draggable,
 `auto`-sized bottom panel is the canonical mobile sheet.
 
-The gesture is physical, not just a tap target:
-
-- Dragging past **a quarter of the panel's extent**, or a fast **flick toward
-  the edge**, dismisses it; a shorter drag springs back to fully open.
-- On a vertical (top/bottom) sheet with a scrollable body, the drag **hands off
-  to native scrolling** first — you only start dragging the sheet once the body
-  is scrolled to its edge, so scrolling a long sheet never accidentally closes
-  it.
-- `persistent` / `disabled` still win: a drag that would dismiss instead plays
+The gesture is powered by VueUse `useSwipe` with a **fixed pixel threshold**
+(not a fraction of the panel height), so a tall filters sheet and a short menu
+dismiss with the same motion:
+
+- Swiping **about 50px toward the exit edge** dismisses it; a shorter swipe
+  springs back. Motion matches Vaul: the sheet exits on inline `transform`
+  (iOS easing, 500ms) while the backdrop fades on the same clock. Styles stay
+  frozen off-screen until the normal close wait finishes, so `dialog.close()`
+  does not flash the panel or jump the blur. Escape / backdrop / × still use
+  the open/close `translate` path.
+- Only travel on the dismiss axis counts — a mostly horizontal flick on a short
+  bottom sheet does not latch or close it.
+- On a vertical sheet with a scrollable body, the swipe **hands off to native
+  scrolling** first — you only drag the sheet once every scrollable ancestor
+  under the finger is at its dismiss edge (latched at touchstart, so a row
+  button and the empty panel chrome behave the same). A downward flick that
+  starts by scrolling _into_ the list stays a scroll for the rest of the
+  gesture; once the sheet is following the finger, reversing back to rest
+  does not start a scroll — lift to cancel.
+- `persistent` / `disabled` still win: a swipe that would dismiss instead plays
   the "deny" nudge and springs back.
 
 **A draggable bottom sheet**
@@ -987,7 +998,7 @@ The panel is a native `<dialog>` opened with `showModal()` — the same mechanic
 | --- | --- | --- | --- | --- |
 | `description` | `string \| undefined` |  |  | One short line under the title, in the header — the shadcn `DialogDescription` shape: same block as the title, lower hierarchy, muted. It is also what `aria-describedby` points at. That wiring was dropped in v3 along with the old `descripti… |
 | `disabled` | `boolean \| undefined` | `false` |  | Disable EVERY user-initiated dismissal: backdrop click, Escape, drag-to-dismiss AND the header close (×) button (denied attempts play the deny nudge). Use it while an operation is in flight (e.g. a save) so the drawer cannot be dismissed mi… |
-| `draggable` | `boolean \| undefined` | `false` |  | Enable drag-to-dismiss. The panel can be dragged from anywhere toward its edge to close, and a grab handle is shown on the inner edge as the affordance. When `false`, the panel is static (dismiss via the close button, backdrop, or Escape on… |
+| `draggable` | `boolean \| undefined` | `false` |  | Enable drag-to-dismiss via VueUse `useSwipe` (fixed ~50px threshold toward the exit edge, including from the scrollable body once it is at its scroll edge). A grab handle on the inner edge is the visual cue. When `false`, the panel is stati… |
 | `eager` | `boolean \| undefined` | `false` |  | Render offcanvas content immediately instead of waiting for the first open. |
 | `focusTarget` | `string \| undefined` |  |  | CSS selector of the element to focus after opening. Defaults to the first tabbable element. |
 | `fullscreen` | `boolean \| "mobile" \| undefined` |  |  | Display the offcanvas fullscreen. Use `'mobile'` to restrict fullscreen to small devices. |

package/dist/ai/BbSelectPopover.md

@@ -1172,8 +1172,10 @@ const variantFor = (value: Status | null): BadgeVariantType =>
 With `adaptive` (default: global `config.adaptive`, which is `true`), the panel
 opens as a bottom off-canvas sheet on mobile viewports (below
 `config.mobileMaxWidth`) instead of a floating popover — same search, options and
-`#header`/`#footer` slots, plus a representation of the current selection between
-them. The surface is **latched per open cycle**: a mid-open resize never swaps
+`#header`/`#footer` slots. In **multiple** mode the current selection also shows
+as removable chips above the search (so picks stay clearable when filtered or
+scrolled away); single select relies on the listbox checkmark and closes on pick.
+The surface is **latched per open cycle**: a mid-open resize never swaps
 popover ↔ sheet. `off-canvas-props` forwards extra `BbOffCanvas` props to the
 sheet (`size`, `draggable`, `fullscreen`, `stack`); `:adaptive="false"` keeps a
 floating popover everywhere.

package/dist/ai/changelog.json

@@ -1,7 +1,7 @@
 {
 	"schemaVersion": 1,
 	"library": "bitboss-ui",
-	"version": "3.0.0-beta.19",
+	"version": "3.0.0-beta.20",
 	"upgrade": "v2-to-v3",
 	"guide": "ai/guides/migration/v2-to-v3.md",
 	"summary": {

package/dist/ai/components.json

@@ -1,8 +1,8 @@
 {
 	"schemaVersion": 1,
 	"library": "bitboss-ui",
-	"version": "3.0.0-beta.19",
-	"generatedAt": "2026-09-01T10:39:24.755Z",
+	"version": "3.0.0-beta.20",
+	"generatedAt": "2026-09-01T16:02:37.101Z",
 	"composables": [
 		{
 			"name": "useBbConfig",
@@ -9456,7 +9456,7 @@
 					"type": "boolean | undefined",
 					"required": false,
 					"default": "false",
-					"description": "Enable drag-to-dismiss. The panel can be dragged from anywhere toward its\nedge to close, and a grab handle is shown on the inner edge as the\naffordance. When `false`, the panel is static (dismiss via the close button,\nbackdrop, or Escape only)."
+					"description": "Enable drag-to-dismiss via VueUse `useSwipe` (fixed ~50px threshold toward\nthe exit edge, including from the scrollable body once it is at its scroll\nedge). A grab handle on the inner edge is the visual cue. When `false`, the\npanel is static (dismiss via the close button, backdrop, or Escape only)."
 				},
 				{
 					"name": "eager",

package/dist/ai/source/BbDropdown.md

@@ -275,6 +275,13 @@ const offcanvasBindings = computed(() => ({
 	eager: props.eager,
 	disabled: props.disabled,
 	transitionDuration: props.transitionDuration,
+	/*
+	 * No ✕ on this sheet — same call as BbSelectPopover. A bottom sheet already
+	 * offers drag-down, backdrop tap and Escape; the picker's own job (tap a
+	 * row) dismisses most menus too. Before the spread so
+	 * `offCanvasProps: { hideClose: false }` still brings it back.
+	 */
+	hideClose: true,
 	...props.offCanvasProps,
 }));
 
@@ -1573,11 +1580,14 @@ export type InternalGroup = DropdownEntryBase & {
 	 * predictable size regardless of row content. A `number` is pixels; a `string`
 	 * is any CSS length (`'50vh'`, `'20rem'`). `'none'` (or `0`) removes the cap.
 	 *
-	 * `searchable` groups default to `280` (≈ 10 rows of 28px), since a searched
-	 * list is usually long; set your own value to tweak, or `'none'` to uncap.
-	 * Non-searchable groups are uncapped unless you set this.
+	 * `searchable` groups default to `280` (≈ 10 rows of 28px) **on the flyout**,
+	 * since a searched list is usually long; set your own value to tweak, or
+	 * `'none'` to uncap. The adaptive sheet ignores the cap so the OffCanvas
+	 * body stays the only scroller (nested group overflow trapped swipes that
+	 * started on a row). Non-searchable flyout groups are uncapped unless you
+	 * set this.
 	 *
-	 * @defaultValue `280` for `searchable` groups, otherwise unset
+	 * @defaultValue `280` for `searchable` flyout groups, otherwise unset
 	 */
 	maxHeight?: number | string;
 	/**
@@ -2038,7 +2048,9 @@ export type BbDropdownGroupEvents = {
 ## Styles
 
 ```css
-/* @inherit --transition-duration — set inline by the adaptive surface */
+/* @inherit --transition-duration — set inline by the adaptive surface;
+   @inherit --py — the adaptive sheet's rules target BbOffCanvas elements, which
+   declare it on the panel */
 .bb-dropdown {
 	overflow: visible;
 
@@ -2561,6 +2573,98 @@ export type BbDropdownGroupEvents = {
 	   up smaller than the list beneath it whatever that constant becomes. */
 	--dialog-title-fs: var(--sheet-option-fs, 1rem);
 
+	/* Root sheet title via `offCanvasProps.title` (no drill nav / custom
+	   `#header`): centre it and tighten the title→divider air like BbSelect.
+	   `:not(:has(.bb-dropdown__nav))` keeps consumer `#header` content and the
+	   drill nav on their own layouts. */
+	.bb-offcanvas__header:not(:has(.bb-dropdown__nav)) {
+		border-bottom: var(--bb-border-w) solid var(--bb-border);
+		padding-bottom: calc(var(--py) - 6px);
+
+		> .bb-offcanvas__title {
+			flex: 1 1 auto;
+			text-align: center;
+		}
+	}
+
+	/* Drill nav owns the title→body air. Drop the OffCanvas header's own bottom
+	   pad so it does not stack under the nav and push chips / search below
+	   BbSelect's. */
+	.bb-offcanvas__header:has(.bb-dropdown__nav--drill) {
+		padding-bottom: 0;
+	}
+
+	/* Body used to start flush under the header. Match BbSelect's step down
+	   from the title rule. Specificity beats OffCanvas's nested shorthand.
+	   Skip headerless sheets (`--no-header`): OffCanvas already supplies the
+	   top inset (and the handle clearance) that this would otherwise crush to
+	   0.5rem — the filters root with no title / drill nav / `#header`. */
+	&.bb-offcanvas:not(.bb-offcanvas--no-header)
+		.bb-offcanvas__body
+		.bb-offcanvas__body-content {
+		padding-top: 0.5rem;
+	}
+
+	/* Flat multi-group sheets: space a following section after the previous
+	   group's items/search. */
+	.bb-dropdown__group-items + .bb-dropdown__group-title,
+	.bb-dropdown__group-search + .bb-dropdown__group-title,
+	.bb-dropdown__divider + .bb-dropdown__group-title {
+		margin-top: 0.5rem;
+	}
+
+	/* Group headers on the sheet read as BbSelect's sheet label — centred title
+	   weight/size, not the flyout's faint left-aligned section caption. No
+	   hairline here: the select sheet label's rule lives on the OffCanvas
+	   header, and repeating it under every group stacked like extra chrome.
+	   Nested drills with `hideLabel` skip this entirely; the drill nav title is
+	   already that label. */
+	.bb-dropdown__group-title {
+		align-items: center;
+		border-bottom: 0;
+		color: var(--bb-text);
+		column-gap: 6px;
+		display: flex;
+		font-size: var(--dialog-title-fs, var(--sheet-option-fs, 1rem));
+		font-weight: 500;
+		justify-content: center;
+		letter-spacing: normal;
+		/* Match select's title→body air (`padding-bottom: calc(var(--py) - 6px)`
+		   on the OffCanvas header) so the label sits above the soft search the
+		   same way City sits above its field. */
+		padding: 0.25rem 0 calc(var(--py, var(--bb-panel-p)) - 6px);
+
+		.group-title__content {
+			flex: 1 1 auto;
+			line-height: normal;
+			overflow-x: clip;
+			overflow-y: visible;
+			text-align: center;
+		}
+
+		.group-title__prepend-icon,
+		.group-title__append-icon {
+			--size: 1.25rem;
+			font-size: var(--size);
+		}
+	}
+
+	/* Headerless sheet: the first group title IS the sheet label (Flat filters'
+	   "Status" beside BbSelect's "City"). Body already clears the handle via
+	   `--no-header` padding (`calc(var(--py) + 12px)`); the items-container's
+	   4px (meant for air under a nav divider) and the title's own 0.25rem top
+	   pad were stacking on top and dropping the label ~8px below City.
+	   Measured: City title @29px, Flat Status @33–37px before this. */
+	&.bb-offcanvas--no-header .bb-dropdown__items-container {
+		padding-top: 0;
+	}
+
+	&.bb-offcanvas--no-header
+		.bb-dropdown__items-container
+		> .bb-dropdown__group-title:first-child {
+		padding-top: 0;
+	}
+
 	/* Clip the sideways level slide so it never spills a horizontal scrollbar. */
 	.bb-dropdown__adaptive-body {
 		overflow-x: clip;
@@ -2589,6 +2693,14 @@ export type BbDropdownGroupEvents = {
 	 * construction, so this selector needs no viewport clause of its own. The
 	 * JS half lives in `useTouchRowLadder`, for the virtualized option lists
 	 * whose row heights feed a virtualizer instead of a stylesheet. */
+	/* Belt for an explicit `maxHeight` leaking onto the sheet: never nest a
+	   second scrollport inside the OffCanvas body. */
+	.bb-dropdown__group-items--capped {
+		display: contents;
+		max-height: none;
+		overflow: visible;
+	}
+
 	.bb-dropdown__items-container {
 		/* Published by AdaptiveDropdown from `listboxMetrics`, the same helpers the
 		   select's sheet reads. The fallbacks are the shipped touch values, so the
@@ -2597,19 +2709,31 @@ export type BbDropdownGroupEvents = {
 		max-height: none;
 		min-width: 0;
 		overflow-y: visible;
-		/* A row's hover wash is a filled rounded rect; without this it begins
-		   flush against the nav divider and the two read as one smudged block. */
+		/* Horizontal inset is the OffCanvas body's `--px`. Do not re-pad here
+		   (or on the rows) to fake alignment with search/chips. */
 		padding: 4px 0 0;
 		width: 100%;
 
 		.bb-dropdown__item {
 			height: var(--sheet-row-h, 44px);
-			padding: 2px 10px;
+			/* Flyout rows are `2px 6px`. +4px start so the label shares the
+			   search field's text edge (`padding-inline: 0.75rem` on the fill). */
+			padding-left: calc(6px + 4px);
+			/* iOS treats a <button> as a tap target and will not hand the pan to
+			   the sheet body unless the control itself opts into vertical panning.
+			   Without this, dismiss/scroll work on the handle and miss on rows. */
+			touch-action: pan-y;
 
 			&.bb-dropdown__item--description {
 				min-height: var(--sheet-row-h, 44px);
 			}
 
+			.item__content {
+				line-height: normal;
+				overflow-x: clip;
+				overflow-y: visible;
+			}
+
 			/* One step under the row label, the same step the listbox puts between
 			   an option and its group header — so the two sheets' secondary text
 			   agrees as well as their primary. */
@@ -2621,7 +2745,7 @@ export type BbDropdownGroupEvents = {
 
 		.bb-dropdown__placeholder {
 			min-height: var(--sheet-row-h, 44px);
-			padding: 2px 10px;
+			padding-left: calc(6px + 4px);
 		}
 
 		/* Icons scale with the label they sit beside. The desktop sizes (16px
@@ -2629,37 +2753,72 @@ export type BbDropdownGroupEvents = {
 		   44px row with an 18px label they read as undersized — the chevron that
 		   says "this opens another level" ended up the smallest thing in the row.
 		   One step up, so the glyph keeps roughly the proportion to its label that
-		   it has on the desktop panel. */
+		   it has on the desktop panel. BbIcon reads `--size`; keep `font-size` on
+		   the same token so the glyph box and the type size cannot drift. */
 		.item__prepend-icon,
 		.item__append-icon,
 		.item__check,
 		.item__chevron {
-			--size: 20px;
-			font-size: 20px;
+			--size: 1.25rem;
+			font-size: var(--size);
 		}
 
-		.bb-dropdown__group-title {
-			font-size: calc(var(--sheet-option-fs, 1rem) - 2px);
-			padding: 8px 10px 4px;
-		}
+		/* Group titles are restyled as select-sheet labels on `--adaptive`
+		   (see block above); do not re-apply the flyout caption metrics here. */
 	}
 
+	/* Soft filled search — mirrors BbSelectPopover's sheet field: no underline
+	   rule, faint `--bb-muted` wash, and the same inset as sheet chips / row
+	   padding so the fill lines up. */
 	.bb-dropdown__group-search {
-		padding: 8px 10px;
+		background-color: var(--bb-muted);
+		border-bottom: 0;
+		border-radius: var(--bb-radius);
+		/* Undo the flyout's full-bleed negative margins. No extra inline inset —
+		   the OffCanvas body already pads `--px`. */
+		margin: 0 0 0.25rem;
+		padding: 0.625rem 0.75rem;
+		position: relative;
+		top: auto;
+		transition: background-color var(--bb-transition-fast) ease;
+		/* Flyout search is sticky `z-index: 1`; that same stacking painted over
+		   the sheet's grab handle once the body scrolled. */
+		z-index: auto;
+
+		/* One emphasis stop above the resting --bb-muted (6%) fill. */
+		&:focus-within {
+			background-color: color-mix(in oklab, var(--bb-text) 8%, var(--bb-panel));
+		}
+
+		/* Lens on the trailing edge, same side as BbSelect's sheet search. */
+		.bb-dropdown__search-icon {
+			order: 1;
+		}
+
+		.bb-dropdown__search-input {
+			font-size: var(--bb-input-fs);
+			order: 0;
+		}
+
+		/* Busy strip sits on the field's bottom edge (no border to overlay). */
+		.bb-dropdown__group-loading {
+			border-radius: 0 0 var(--bb-radius) var(--bb-radius);
+			bottom: 0;
+		}
 	}
 
 	/* Removable selection chips for the current multi-select level — sit above the
 	   menu (and its search), mirroring BbSelect's sheet. */
 	.bb-dropdown__sheet-selection {
 		flex-shrink: 0;
-		padding: 0 4px 8px;
+		padding: 0 0 0.5rem;
 		text-align: left;
 	}
 
 	.bb-dropdown__sheet-chips {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 8px;
+		gap: 0.5rem;
 	}
 
 	/* Touch target: the xl badge is a ~24px pill — fine inline on desktop, too
@@ -2668,9 +2827,9 @@ export type BbDropdownGroupEvents = {
 	   padding and a bigger clear glyph; the badge API stays untouched. Mirrors
 	   BbSelectPopover's sheet chips. */
 	.bb-dropdown__sheet-chip {
-		--min-size: 34px;
-		--padding-inline: 12px;
-		--clear-size: 20px;
+		--min-size: 2.125rem;
+		--padding-inline: 0.75rem;
+		--clear-size: 1.25rem;
 	}
 
 	.bb-dropdown__nav {
@@ -2679,83 +2838,66 @@ export type BbDropdownGroupEvents = {
 		display: flex;
 		width: 100%;
 
-		/* Drilled in: a navigation bar. Equal gutters either side so the title is
-		   truly centred and cannot drift as the back button appears; the sheet's
-		   own body padding provides the outer inset. */
+		/* Drilled in: a navigation bar. The TITLE LINE sets the bar height — same
+		   as BbSelect's OffCanvas title — so City and Status share one baseline.
+		   The back control is a BbButton ghost sm, absolutely pinned to the
+		   OffCanvas header with equal inset from the sheet's top and left. */
 		&--drill {
-			/* A hairline under the bar. The list starts immediately below it and a
-			   hovered first row's wash ran right up to the title, so the header
-			   read as part of the list rather than as the thing you came back
-			   through. INSET to the body padding rather than full-bleed: bleeding
-			   it needed negative inline margins, and against this grid only the
-			   leading one took (the bar measured 1→357 inside a 0→390 sheet), so
-			   the rule that was meant to look deliberate looked like a mistake.
-			   Inset, it lines up with the rows it separates. */
-			border-bottom: var(--bb-border-w) solid var(--bb-border);
-			column-gap: 4px;
-			display: grid;
-			grid-template-columns: 40px minmax(0, 1fr) 40px;
-			padding-bottom: 6px;
-
-			/* No overhang in the bar. The base rule pulls the button 8px into the
-			   sheet's padding to keep a 40px touch target without looking inset;
-			   here the grid column already reserves that space, and the pull only
-			   broke the symmetry the centred title depends on. Centred in its own
-			   column, the glyph lands within a pixel of the row labels below —
-			   which is the alignment the eye actually reads. */
+			/* Title line sets the bar height — same as BbSelect's OffCanvas title.
+			   Sit in the header's `--px`; do not pull out and re-pad to fake a
+			   full-bleed bar. Bottom pad matches BbSelect's
+			   `calc(var(--py) - 6px)`. No `position: relative` — the back button's
+			   containing block is the header. */
+			display: block;
+			padding-bottom: calc(var(--py, var(--bb-panel-p)) - 6px);
+
+			/* Equal inset from the sheet edges. Header is `position: relative`
+			   in OffCanvas. Size/chrome come from BbButton ghost sm.
+			   Use `--bb-panel-p`, not `--px`: BbButton redefines `--px` as its
+			   own padding token, which collapsed the inset to 10px. */
 			.bb-dropdown__nav-back {
-				margin-inline-start: 0;
+				left: var(--bb-panel-p);
+				position: absolute;
+				top: var(--bb-panel-p);
+
+				/* Same chevron_right asset the submenu rows use, pointed back. */
+				.bb-button__icon {
+					transform: rotate(180deg);
+				}
+			}
+
+			/* Spacer kept in the DOM for the drill a11y tests; layout is now the
+			   title's equal inline gutters below. */
+			.bb-dropdown__nav-gutter {
+				display: none;
 			}
 		}
 	}
 
-	/* Pure spacer, mirroring the back button's box. */
+	/* Pure spacer, mirroring the back button's box (root / non-drill layouts). */
 	.bb-dropdown__nav-gutter {
-		height: 40px;
-		width: 40px;
-	}
-
-	.bb-dropdown__nav-back {
-		align-items: center;
-		background: transparent;
-		border: none;
-		border-radius: var(--bb-radius-sm);
-		color: var(--bb-text);
-		cursor: pointer;
-		display: inline-flex;
-		flex-shrink: 0;
-		/* Touch target: this is the sheet's only way back up a level. */
-		height: 40px;
-		justify-content: center;
-		margin-inline-start: -8px;
-		width: 40px;
-
-		&:hover {
-			background-color: color-mix(in oklab, var(--bb-text) 8%, transparent);
-		}
-
-		.bb-dropdown__nav-back-icon {
-			/* The same glyph, at the same size and weight, as the `>` a row shows
-			   for a submenu — they are the two halves of one navigation and used to
-			   differ in colour, so the way OUT looked like a different kind of
-			   control from the way IN. */
-			--size: 20px;
-			color: var(--bb-text-muted);
-			/* Reuse `chevron_right` pointed the other way (no left asset exists). */
-			transform: rotate(180deg);
-		}
+		height: 24px;
+		width: 24px;
 	}
 
-	.bb-dropdown__nav-title {
+	.bb-offcanvas__title.bb-dropdown__nav-title {
 		flex: auto;
 		font-weight: 500;
+		/* Same 1em line box as BbSelect's sheet title so the cap sits on the
+		   same baseline. Descenders ("Tags") paint into the drill nav's bottom
+		   pad — `overflow-y: visible`; ellipsis still clips on X only. */
 		min-width: 0;
-		overflow: hidden;
+		overflow-x: clip;
+		overflow-y: visible;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
 	.bb-dropdown__nav--drill .bb-dropdown__nav-title {
+		/* Equal side gutters matching BbButton sm icon-only (24px) so the label
+		   centres. */
+		display: block;
+		padding-inline: 24px;
 		text-align: center;
 	}
 }