@drivenets/design-system 0.18.1 → 0.19.0

package/src/components/ds-table/utils/column-size.unit.test.ts

@@ -13,8 +13,13 @@ import {
 	getResizableColumnStyle,
 	getResizableHeaderStyle,
 	getResizeOriginSize,
+	getUtilityColumnSizing,
+	growFillLeavesToContainer,
 	isExplicitColumnWidth,
 	omitBuiltinColumnSizing,
+	resolveUtilityColumnWidth,
+	shiftColumnTrack,
+	withUtilityColumnSizing,
 } from './column-size';
 import {
 	EXPANDER_COLUMN_ID,
@@ -179,6 +184,115 @@ describe('collectMissingLeafSizing', () => {
 	it('returns an empty map when every measured id already has a sizing entry', () => {
 		expect(collectMissingLeafSizing({ a: 100 }, { a: 90 })).toEqual({});
 	});
+
+	it('reconciles independent rounding so seeded widths match the measured total', () => {
+		const next = collectMissingLeafSizing({ a: 500.6, b: 500.6 }, {});
+
+		expect(next).toEqual({ a: 501, b: 500 });
+	});
+
+	it('absorbs rounding drift into missing ids and leaves existing widths unchanged', () => {
+		expect(collectMissingLeafSizing({ a: 500.6, b: 500.6 }, { b: 501 }, 1001)).toEqual({ a: 500 });
+	});
+
+	it('does not snap seeded widths to the container when measured columns overflow it', () => {
+		expect(collectMissingLeafSizing({ a: 1000, b: 1000 }, {}, 1116)).toEqual({ a: 1000, b: 1000 });
+	});
+
+	it('snaps a 1px measured overflow to the container width', () => {
+		const next = collectMissingLeafSizing({ a: 558.5, b: 558.5 }, {}, 1116);
+		const total = Object.values(next).reduce((sum, width) => sum + width, 0);
+
+		expect(total).toBe(1116);
+	});
+
+	it('distributes container underflow across fill leaves by their measured share', () => {
+		const next = collectMissingLeafSizing({ a: 200, b: 200 }, {}, 1200, ['a', 'b']);
+
+		expect(next).toEqual({ a: 600, b: 600 });
+	});
+
+	it('grows only fill leaves when the container is wider than the measured total', () => {
+		const next = collectMissingLeafSizing({ a: 200, b: 200, c: 200 }, {}, 1200, ['b', 'c']);
+
+		expect(next).toEqual({ a: 200, b: 500, c: 500 });
+	});
+});
+
+describe('growFillLeavesToContainer', () => {
+	it('moves leftover space onto uncapped fill leaves after a sibling hits maxSize', () => {
+		const next = growFillLeavesToContainer(
+			{ a: 280, b: 360, c: 360 },
+			{},
+			['a', 'b', 'c'],
+			1200,
+			['a', 'b', 'c'],
+			[
+				{ id: 'a', columnDef: { maxSize: 280 } },
+				{ id: 'b', columnDef: {} },
+				{ id: 'c', columnDef: {} },
+			],
+		);
+
+		expect(next.a).toBe(280);
+		expect(next.b).toBeGreaterThan(360);
+		expect(next.c).toBeGreaterThan(360);
+		expect((next.a ?? 0) + (next.b ?? 0) + (next.c ?? 0)).toBe(1200);
+	});
+
+	it('does not grow an explicit leaf when filling leftover space', () => {
+		const next = growFillLeavesToContainer(
+			{ a: 280, b: 360, c: 360 },
+			{},
+			['a', 'b', 'c'],
+			1200,
+			['b', 'c'],
+			[
+				{ id: 'a', columnDef: { maxSize: 280 } },
+				{ id: 'b', columnDef: {} },
+				{ id: 'c', columnDef: {} },
+			],
+		);
+
+		expect(next).toEqual({ a: 280, b: 460, c: 460 });
+	});
+});
+
+describe('shiftColumnTrack', () => {
+	const bounds = [
+		{ id: 'a', columnDef: {} },
+		{ id: 'b', columnDef: {} },
+	];
+
+	it('returns the same map when delta is 0', () => {
+		const sizing = { a: 200, b: 200 };
+
+		expect(shiftColumnTrack(sizing, ['a', 'b'], 0, bounds)).toBe(sizing);
+	});
+
+	it('shrinks from the last leaf when the spacer appears', () => {
+		const next = shiftColumnTrack({ a: 500, b: 500 }, ['a', 'b'], -10, bounds);
+
+		expect(next.a).toBe(500);
+		expect(next.b).toBe(490);
+		expect((next.a ?? 0) + (next.b ?? 0)).toBe(990);
+	});
+
+	it('grows leaves when the spacer disappears', () => {
+		const next = shiftColumnTrack({ a: 500, b: 490 }, ['a', 'b'], 10, bounds);
+
+		expect((next.a ?? 0) + (next.b ?? 0)).toBe(1000);
+	});
+
+	it('does not shrink a leaf below minSize', () => {
+		const next = shiftColumnTrack({ a: 200, b: 52 }, ['a', 'b'], -10, [
+			{ id: 'a', columnDef: {} },
+			{ id: 'b', columnDef: { minSize: 52 } },
+		]);
+
+		expect(next.b).toBe(52);
+		expect(next.a).toBe(190);
+	});
 });
 
 describe('omitBuiltinColumnSizing', () => {
@@ -211,3 +325,46 @@ describe('omitBuiltinColumnSizing', () => {
 		expect(next).not.toBe(sizing);
 	});
 });
+
+describe('resolveUtilityColumnWidth', () => {
+	it('returns the fallback when the width is omitted, non-finite, or not positive', () => {
+		expect(resolveUtilityColumnWidth(undefined, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(0, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(-8, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(Number.NaN, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(Number.POSITIVE_INFINITY, 36)).toBe(36);
+	});
+
+	it('returns a positive finite width as-is', () => {
+		expect(resolveUtilityColumnWidth(48, 36)).toBe(48);
+		expect(resolveUtilityColumnWidth(1, 36)).toBe(1);
+	});
+});
+
+describe('withUtilityColumnSizing', () => {
+	it('strips inbound utility ids and overlays the authored widths', () => {
+		expect(
+			withUtilityColumnSizing(
+				{ [SELECT_COLUMN_ID]: 80, firstName: 200 },
+				{ [SELECT_COLUMN_ID]: 48, [EXPANDER_COLUMN_ID]: 40 },
+			),
+		).toEqual({ firstName: 200, [SELECT_COLUMN_ID]: 48, [EXPANDER_COLUMN_ID]: 40 });
+	});
+});
+
+describe('getUtilityColumnSizing', () => {
+	it('collects size entries for injected utility leaves only', () => {
+		expect(
+			getUtilityColumnSizing([
+				{ id: REORDER_COLUMN_ID, size: 80 },
+				{ id: EXPANDER_COLUMN_ID, size: 40 },
+				{ id: SELECT_COLUMN_ID, size: 48 },
+				{ id: 'firstName', size: 200 },
+			]),
+		).toEqual({
+			[REORDER_COLUMN_ID]: 80,
+			[EXPANDER_COLUMN_ID]: 40,
+			[SELECT_COLUMN_ID]: 48,
+		});
+	});
+});

package/src/components/ds-table/utils/constants.ts

@@ -1,8 +1,3 @@
-/**
- * Default text for empty table state
- */
-export const EMPTY_TABLE_STATE_TEXT = 'No results.';
-
 /**
  * Column id used for the synthetic expander column injected when `expandable` is set.
  */
@@ -55,6 +50,19 @@ export const SKELETON_ROW_COUNT = 5;
  */
 export const RESIZE_MIN_COLUMN_WIDTH = 52;
 
+/**
+ * Pixel width of the full-height resize overlay divider. Must match
+ * `$resize-divider-width` in `styles/_variables.scss`.
+ */
+export const RESIZE_DIVIDER_WIDTH = 2;
+
+/**
+ * Rest width of the header **Scrollbar spacer** when the body overflows
+ * vertically. Must match `$scrollbar-default-size` in `styles/_scrollbars.scss`.
+ * Hover (12px) is intentionally not tracked.
+ */
+export const SCROLLBAR_SPACER_WIDTH = 10;
+
 /**
  * Width change (in px) applied per Arrow key press when a resize handle is
  * focused.

package/src/components/ds-table/utils/table-columns.tsx

@@ -3,6 +3,7 @@ import { DsSkeletonText } from '../../ds-skeleton';
 import { DsTableHeaderSelectableCell } from '../components/ds-table-header-selectable-cell';
 import { DsTableRowExpandableCell } from '../components/ds-table-row-expandable-cell';
 import { DsTableRowSelectableCell } from '../components/ds-table-row-selectable-cell';
+import { resolveUtilityColumnWidth } from './column-size';
 import {
 	EXPANDER_COLUMN_ID,
 	EXPANDER_COLUMN_WIDTH,
@@ -19,6 +20,9 @@ export type GetAugmentedColumnsOptions = {
 	reorderable: boolean;
 	virtualized: boolean;
 	showSelectAllCheckbox: boolean;
+	selectableColumnWidth?: number;
+	expandableColumnWidth?: number;
+	reorderableColumnWidth?: number;
 };
 
 const EXPLICIT_SIZE_META = { hasExplicitSize: true } as const;
@@ -41,6 +45,13 @@ const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]):
 		return { ...column, meta: { ...column.meta, ...EXPLICIT_SIZE_META } };
 	});
 
+/** Pin min/max so the table-wide resize `minSize` cannot stretch this column. */
+const pinUtilityColumnSize = (width: number) => ({
+	size: width,
+	minSize: width,
+	maxSize: width,
+});
+
 /**
  * Prepends the builtin select / expander / reorder columns when those features
  * are on. Reorder is omitted for virtualized tables. Unshift order yields
@@ -48,19 +59,24 @@ const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]):
  */
 export const getAugmentedColumns = <TData, TValue>(
 	columns: ColumnDef<TData, TValue>[],
-	{ selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }: GetAugmentedColumnsOptions,
+	{
+		selectable,
+		expandable,
+		reorderable,
+		virtualized,
+		showSelectAllCheckbox,
+		selectableColumnWidth,
+		expandableColumnWidth,
+		reorderableColumnWidth,
+	}: GetAugmentedColumnsOptions,
 ): ColumnDef<TData, TValue>[] => {
 	const augmentedColumns: ColumnDef<TData, TValue>[] = stampExplicitSize(columns);
 
 	if (selectable) {
+		const width = resolveUtilityColumnWidth(selectableColumnWidth, SELECT_COLUMN_WIDTH);
 		augmentedColumns.unshift({
 			id: SELECT_COLUMN_ID,
-			size: SELECT_COLUMN_WIDTH,
-			// Pin min/max to the fixed width: `enableResizing: false` blocks the
-			// handle but not the table-wide resize `minSize`, which would otherwise
-			// stretch this column.
-			minSize: SELECT_COLUMN_WIDTH,
-			maxSize: SELECT_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,
@@ -70,11 +86,10 @@ export const getAugmentedColumns = <TData, TValue>(
 	}
 
 	if (expandable) {
+		const width = resolveUtilityColumnWidth(expandableColumnWidth, EXPANDER_COLUMN_WIDTH);
 		augmentedColumns.unshift({
 			id: EXPANDER_COLUMN_ID,
-			size: EXPANDER_COLUMN_WIDTH,
-			minSize: EXPANDER_COLUMN_WIDTH,
-			maxSize: EXPANDER_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,
@@ -84,13 +99,12 @@ export const getAugmentedColumns = <TData, TValue>(
 	}
 
 	if (reorderable && !virtualized) {
+		const width = resolveUtilityColumnWidth(reorderableColumnWidth, REORDER_COLUMN_WIDTH);
 		// Cell is rendered inline by DsTableRow when it encounters REORDER_COLUMN_ID,
 		// since the drag handle needs row-level useSortable state.
 		augmentedColumns.unshift({
 			id: REORDER_COLUMN_ID,
-			size: REORDER_COLUMN_WIDTH,
-			minSize: REORDER_COLUMN_WIDTH,
-			maxSize: REORDER_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,

package/src/components/ds-table/utils/table-columns.unit.test.ts

@@ -100,6 +100,50 @@ describe('getAugmentedColumns', () => {
 		}
 	});
 
+	it('pins custom utility column widths and ignores them when the feature is off', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+			selectableColumnWidth: 48,
+			expandableColumnWidth: 40,
+			reorderableColumnWidth: 80,
+		});
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		expect(boundsById.get(SELECT_COLUMN_ID)?.size).toBe(48);
+		expect(boundsById.get(SELECT_COLUMN_ID)?.minSize).toBe(48);
+		expect(boundsById.get(SELECT_COLUMN_ID)?.maxSize).toBe(48);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.size).toBe(40);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.minSize).toBe(40);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.maxSize).toBe(40);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.size).toBe(80);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.minSize).toBe(80);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.maxSize).toBe(80);
+
+		expect(
+			columnIds(getAugmentedColumns([nameColumn], { ...noFeatures, selectableColumnWidth: 48 })),
+		).toEqual(['name']);
+	});
+
+	it('falls back to the default width when the custom width is invalid', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+			selectableColumnWidth: 0,
+			expandableColumnWidth: Number.NaN,
+			reorderableColumnWidth: -10,
+		});
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		expect(boundsById.get(SELECT_COLUMN_ID)?.size).toBe(SELECT_COLUMN_WIDTH);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.size).toBe(EXPANDER_COLUMN_WIDTH);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.size).toBe(REORDER_COLUMN_WIDTH);
+	});
+
 	it('stamps hasExplicitSize on authored leaves and builtins, not on unsized leaves', () => {
 		const columns = getAugmentedColumns(
 			[

package/src/components/ds-toggle/ds-toggle.module.scss

@@ -144,6 +144,24 @@
 		pointer-events: none;
 	}
 
+	// Overlay the native input over the control so `getByRole('checkbox')` clicks
+	// land on a real interactive surface. Ark applies `visuallyHiddenStyle` inline
+	// (1x1, clipped, off-screen) which Playwright refuses to click; `!important`
+	// is required to beat inline-style specificity.
+	.hiddenInput {
+		position: absolute !important;
+		inset-block-start: 0 !important;
+		inset-inline-start: 0 !important;
+		width: calc(var(--switch-track-width) + var(--thumb-gap) * 2) !important;
+		height: calc(var(--thumb-size) + var(--thumb-gap) * 2) !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		clip: auto !important;
+		overflow: visible !important;
+		opacity: 0 !important;
+		cursor: pointer !important;
+	}
+
 	.iconCheck {
 		left: var(--icon-spacing);
 	}

package/src/components/ds-toggle/ds-toggle.tsx

@@ -58,19 +58,21 @@ const DsToggle = ({
 				<DsIcon icon="close" size={iconSize} className={closeIconClass} />
 			</Switch.Control>
 
-			{label ? (
-				<Switch.Label>
-					<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
-					{!!labelInfo && (
-						<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
-							{labelInfo}
-						</DsTypography>
-					)}
-				</Switch.Label>
-			) : (
-				children
-			)}
-			<Switch.HiddenInput />
+			<Switch.Label>
+				{label ? (
+					<>
+						<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
+						{!!labelInfo && (
+							<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+								{labelInfo}
+							</DsTypography>
+						)}
+					</>
+				) : (
+					children
+				)}
+			</Switch.Label>
+			<Switch.HiddenInput className={styles.hiddenInput} />
 		</Switch.Root>
 	);
 };

package/src/components/ds-tooltip/ds-tooltip.tsx

@@ -14,6 +14,9 @@ const DsTooltip: FC<DsTooltipProps> = ({
 	children,
 	placement = 'top',
 	disabled = false,
+	interactive = false,
+	openDelay = OPEN_DELAY_MS,
+	closeDelay = CLOSE_DELAY_MS,
 	getAnchorRect,
 	slotProps,
 }) => {
@@ -23,8 +26,9 @@ const DsTooltip: FC<DsTooltipProps> = ({
 
 	return (
 		<Tooltip.Root
-			openDelay={OPEN_DELAY_MS}
-			closeDelay={CLOSE_DELAY_MS}
+			interactive={interactive}
+			openDelay={openDelay}
+			closeDelay={closeDelay}
 			disabled={disabled}
 			positioning={{ placement, gutter: TOOLTIP_GUTTER_PX, getAnchorRect: getAnchorRect ?? undefined }}
 			lazyMount

package/src/components/ds-tooltip/ds-tooltip.types.ts

@@ -44,6 +44,23 @@ export interface DsTooltipProps {
 	 * When true the trigger renders but the tooltip never opens.
 	 */
 	disabled?: boolean;
+	/**
+	 * When true, content is pointer-reachable and the tooltip stays open while the
+	 * pointer is over it. Pair with a non-zero `closeDelay` (e.g. 150) so the pointer
+	 * can travel from the trigger onto the content; `0` can lose that handoff.
+	 * @default false
+	 */
+	interactive?: boolean;
+	/**
+	 * Milliseconds after pointer enter or focus before the tooltip opens.
+	 * @default 200
+	 */
+	openDelay?: number;
+	/**
+	 * Milliseconds after pointer leave before the tooltip closes.
+	 * @default 0
+	 */
+	closeDelay?: number;
 	/**
 	 * Anchors the tooltip to a virtual rect instead of the trigger, re-evaluated on
 	 * each reposition. Return `null` to fall back to the trigger.

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.figma.ts

@@ -0,0 +1,35 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=9543-40942
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-top-bar-navigation
+// component=DsTopBarNavigation
+//
+// `DsTopBarNavigationV1` maps to the `DsTopBarNavigation` compound component. Figma models the
+// bar as a fixed 920px left frame with an absolutely-positioned breadcrumb; in code the zones
+// are flex (`.Logo` fixed-basis, `.Breadcrumb` shrinkable, `.Center` reserved, `.Actions`
+// pinned right), so none of that geometry maps to props.
+//
+// The brand glyph and wordmark are consumer slots — no brand asset ships with the design
+// system — so they are emitted as placeholders. Figma's `DsBotButtonV1` maps to `DsBotButton`,
+// which is connected separately in `ds-bot-button/ds-bot-button.figma.ts`.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTopBarNavigation>
+	<DsTopBarNavigation.Logo logo={<img src="/brand-mark.svg" alt="" />} wordmark="DAP" href="/" onAppsClick={() => {}} />
+	<DsTopBarNavigation.Breadcrumb>
+		<DsBreadcrumb items={[]} />
+	</DsTopBarNavigation.Breadcrumb>
+	<DsTopBarNavigation.Center />
+	<DsTopBarNavigation.Actions>
+		<DsTopBarNavigation.Notifications count={13} onClick={() => {}} />
+		<DsBotButton />
+		<DsTopBarNavigation.UserMenu name="Full Name">
+			<DsDropdownMenu.Item value="profile">Profile</DsDropdownMenu.Item>
+		</DsTopBarNavigation.UserMenu>
+	</DsTopBarNavigation.Actions>
+</DsTopBarNavigation>`,
+	imports: [
+		"import { DsTopBarNavigation, DsBotButton, DsBreadcrumb, DsDropdownMenu } from '@drivenets/design-system';",
+	],
+	id: 'ds-top-bar-navigation',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.module.scss

@@ -0,0 +1,150 @@
+$focus-outline-width: 2px;
+$disabled-avatar-opacity: 0.55;
+
+.root {
+	--ds-top-bar-navigation-height: 54px;
+	--ds-top-bar-navigation-logo-min-width: 174px;
+	--ds-top-bar-navigation-logo-glyph-size: 32px;
+	--ds-top-bar-navigation-wordmark-font-size: 24px;
+	--ds-top-bar-navigation-breadcrumb-offset: var(--lg);
+	--ds-top-bar-navigation-zone-gap: var(--lg);
+	--ds-top-bar-navigation-badge-size: 16px;
+	--ds-top-bar-navigation-caret-size: 20px;
+
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: var(--ds-top-bar-navigation-height);
+	padding-right: var(--md);
+	border-bottom: 1px solid var(--border);
+	background: var(--background);
+}
+
+.logo {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	gap: var(--sm);
+	align-self: stretch;
+	min-width: var(--ds-top-bar-navigation-logo-min-width);
+	padding: 0 var(--lg);
+	background: var(--background-primary);
+	color: var(--font-on-action);
+}
+
+.logoLockup {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	color: inherit;
+	text-decoration: none;
+}
+
+.logoGlyph {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-top-bar-navigation-logo-glyph-size);
+	height: var(--ds-top-bar-navigation-logo-glyph-size);
+}
+
+.logoWordmark {
+	font-family: var(--font-family-heading);
+	font-size: var(--ds-top-bar-navigation-wordmark-font-size);
+	font-weight: var(--font-weight-bold);
+	white-space: nowrap;
+}
+
+.breadcrumb {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	margin-left: var(--ds-top-bar-navigation-breadcrumb-offset);
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.center {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	gap: var(--standard);
+	margin-inline-start: auto;
+	padding-inline-start: var(--ds-top-bar-navigation-zone-gap);
+}
+
+.notificationsBadge {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: var(--ds-top-bar-navigation-badge-size);
+	height: var(--ds-top-bar-navigation-badge-size);
+	padding: 0 var(--3xs);
+	border-radius: 9999px;
+	background: var(--background-error);
+	color: var(--font-on-action);
+	font-size: var(--body-font-size-xs);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--body-line-height-xs);
+
+	&[data-empty] {
+		display: none;
+	}
+}
+
+.userMenuTrigger {
+	display: flex;
+	align-items: center;
+	gap: var(--3xs);
+	padding: 0;
+	border: none;
+	border-radius: var(--3xs);
+	background: transparent;
+	color: var(--font-main);
+	cursor: pointer;
+
+	// Nested for the extra class of specificity: `DsAvatar` paints its own `background-color`
+	// and `color` from a single-class rule, so a standalone `.userMenuAvatar` ties with it and
+	// bundle order picks the winner.
+	.userMenuAvatar {
+		background-color: var(--light-buttons-tertiary);
+		color: var(--font-main);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: $focus-outline-width;
+	}
+
+	&:disabled {
+		color: var(--font-disabled);
+		cursor: not-allowed;
+
+		// The caret follows `color`; the avatar sets its own fill and text color above, so
+		// neither inherits the disabled tone — dim the whole lockup instead.
+		.userMenuAvatar {
+			opacity: $disabled-avatar-opacity;
+		}
+	}
+}
+
+.userMenuCaret {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-top-bar-navigation-caret-size);
+	height: var(--ds-top-bar-navigation-caret-size);
+}