fix(components): align multi-select ListBox checkbox to the primary line

[sruthykumar]

Summary

DSYS-271. ListBoxItem inherits align-items: center from the shared Menu item rule, so in multi-select items with a stacked label/description the selection checkbox floats between the two lines. Per design review the checkbox should sit with the primary (label) line.

styles/ListBox.module.css now top-aligns the row only when the item renders a selection checkbox, and gives that checkbox height: 1lh with centered content — the same pattern Checkbox.module.css .container already uses to align a checkbox to the first line of its label:

.item {
	composes: item from './Menu.module.css';

	&:has(.checkbox) { align-items: start; }
	& .checkbox { height: 1lh; align-items: center; }
}

ListBox.tsx passes the new class through checkboxStyles({ className: styles.checkbox }). The :has() / descendant selectors are deliberate: .item composes the Menu item class, so a bare .item { align-items: start } loses the cascade to Menu.module.css in the built bundle.

Single-select and non-selectable items keep their current centering, and Menu items are untouched.

Screenshots (if appropriate):

LaunchPad Storybook — Components/Collections/ListBox → Descriptions with selectionMode: multiple.

Before:

After:

Single-line multi-select and icon items are unaffected:

Product consumers (gonfalon Storybook, built package linked in)

ContextKindSelector (multi-select, kinds with descriptions) — the ticket's case:

Before:

After:

ResourceSelector (metric picker):

Before:

After:

Single-line consumers are pixel-identical before/after (ContextKindSelector without descriptions, ContextKindSelect), and the product-analytics MultiSelect is built on Menu, so it is unchanged by this PR.

Testing approaches

• LaunchPad Storybook: ListBox multi-line, single-line, icons, single-select.
• gonfalon Storybook with a local build of @launchpad-ui/components linked into node_modules, comparing main vs this branch; verified computed styles (align-items: start, checkbox box height 1lh) and pixel-diffed each story.
• pnpm vitest run packages/components/__tests__/ListBox.spec.tsx, biome check on the changed files.
• Chromatic will show the visual diff for ListBox/Picker/Select consumers.

Link to Devin session: https://app.devin.ai/sessions/1d0c64cb604f49c4aa269f1c9313411a
Requested by: @sruthykumar

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[changeset-bot]

🦋 Changeset detected

Latest commit: c3fc03d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

yarn add https://pkg.pr.new/@launchpad-ui/components@1958.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1958.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1958.tgz

commit: c3fc03d