# Focus & Selection v3 — All State Combinations

Starred: existing (grey 1px bar, font-weight 600) · Focus: shadow lift · Selection: #f5f9ff + blue 1px bar

Starred (grey 1px bar, bold text)
Selected (blue 1px bar + #f5f9ff bg)
Focused (white + shadow lift)

## Single States

Each state in isolation.

Normal `no classes`

[02:34]

"I found the onboarding process really confusing at first."

— p1 confusion

Starred only `.starred`

[05:12]

"Once I figured it out, it was actually pretty intuitive."

— p1 satisfaction

Focused only `.focused`

[08:45]

"I'd definitely recommend this to my team."

— p1 confidence

Selected only `.selected`

[12:03]

"The pricing page was a bit confusing though."

— p1 doubt

## Two-State Combinations

Pairs of states combined.

Starred + Focused `.starred.focused`

[02:34]

"This is a starred quote that currently has keyboard focus."

— p1 satisfaction

Starred + Selected `.starred.selected`

[05:12]

"This is a starred quote that's also in the selection set."

— p1 confidence

Focused + Selected `.focused.selected`

[08:45]

"This has focus AND is selected, but not starred."

— p1 delight

## All Three States

The full combination.

Starred + Focused + Selected `.starred.focused.selected`

[02:34]

"This quote has all three states: starred, focused, and selected."

— p1 delight

## Realistic List Context

How the states look in a real quote list with mixed states.

[02:34]

"I found the onboarding really confusing at first. The buttons weren't where I expected them to be."

— p1 confusion
[05:12]

"Once I figured it out though, it was actually pretty intuitive. I like how everything flows together."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team. We've been looking for something like this for a while now."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though. I wasn't sure which tier we actually needed."

— p1 doubt
[15:28]

"Yeah the documentation could use some work. I had to figure a lot of things out on my own."

— p1 frustration
[18:52]

"But overall I'm really happy with it. It's saved us a ton of time already."

— p1 delight

## Multi-Select Scenario

Simulating a user selecting multiple quotes for bulk action.

[02:34]

"First selected quote in the set."

— p1
[05:12]

"Second selected quote — this one is also starred."

— p1
[08:45]

"Not selected, not starred, just a normal quote in between."

— p1
[12:03]

"Third selected quote — keyboard cursor is here."

— p1
[15:28]

"Fourth selected quote in the set."

— p1

### New Tokens for tokens.css

    /* Focus state (shadow lift) */
    --bn-focus-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);

    /* Selection state (light blue + blue bar) */
    --bn-selection-bg: light-dark(#f5f9ff, #1a2332);
    /* Selection uses 1px solid var(--bn-colour-accent) for left border */

    /* Starred: no changes needed — already uses:
       --bn-colour-favourited: #999
       border-left: 1px solid
       font-weight: 600
    */