Skip to content

feat(ui): animate segmented control with solid-motion and fix button hit-testing - #53825

Merged
kitlangton merged 3 commits into
v2from
feat/animated-segmented-control
Oct 8, 2026
Merged

kitlangton merged 3 commits into
v2from
feat/animated-segmented-control

Conversation

@kitlangton

Copy link
Copy Markdown
Contributor

Why

SegmentedControl switched active segments statically without an indicator transition, did not brighten inactive segment labels on hover, and allowed child label nodes to intercept pointer hit-testing and text selection. Additionally, button.css, icon-button.css, and tabs-current.css defined an unscoped universal * rule that leaked font-smoothing and text-rendering: geometricPrecision across the entire document, and Button child elements could split hit-testing from the <button>.

What Changes

  • Animated active pill (SegmentedControl): Renders a <motion.span data-slot="segmented-control-v2-indicator" aria-hidden="true" /> driven by @kitlangton/solid-motion ({ type: "spring", visualDuration: 0.15, bounce: 0 } by default, configurable via transition), jumping immediately on initial mount, resize, or prefers-reduced-motion and spring-animating between active segments.
  • Pre-measurement fallback: Retains :not([data-ready]) active-item background and border-shadow styling before layout measurement completes.
  • Segmented control interaction & hit-testing: Brightens inactive enabled segment labels on hover (:hover:not(:disabled):not([data-pressed])), disables text selection on the control and items, and sets pointer-events: none on [data-slot="segmented-control-v2-item-label"].
  • Button hit-testing & scoped font smoothing: Adds [data-component="button-v2"] > * { pointer-events: none; } and scopes -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale to [data-component="button-v2"], [data-component="icon-button-v2"], and [data-component="tabs-v2"] instead of universal *.

Scope

Covers @opencode/ui SegmentedControl (SegmentedControlV2 / SegmentedControlItemV2 aliases included), button.css, icon-button.css, and tabs-current.css.

Verification

bun run --cwd packages/ui typecheck
bun run --cwd packages/ui test
bun run --cwd packages/ui build
bun run lint:changed
  • packages/ui typecheck (tsgo --noEmit), build (tsc -p tsconfig.build.json), and unit tests (135 passing across 8 files, including segmented-control.test.ts) pass.
  • bun run check (repo-wide oxlint, ast-grep, sdk-docs, and turbo typecheck across 36 packages) passed on push.

@kitlangton
kitlangton merged commit 6297cd5 into v2 Oct 8, 2026
9 checks passed
@kitlangton
kitlangton deleted the feat/animated-segmented-control branch October 8, 2026 00:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant