fix(pds-combobox): shade drill-in group rows only for the keys

[QuintonJason]

Description

At Email + CRM demo day, design flagged the group-display="drill-in" panel. After you go back out of a group, the group row (for example "Email") stays shaded as if something inside it were picked, and it looks worse when that group holds the selection. Design's call is no shading for that in drill-in. flyout keeps highlighting the group that holds the selection, as designed.

What changes in drill-in, including a flyout that drills in for lack of room:

• The group holding the selection isn't shaded. The selected option still shows its check inside the group.
• Group rows and the row back shade only for the keys. That's the same row the focus ring marks. The pointer gets :hover shading while it's over a row, and nothing stays shaded once it moves on, or after a click-open or a pointer Back.
• No skipped rows for the keys. After the pointer or a click-open, the keys still start from a row that's highlighted but no longer shaded. So the first Up or Down shows that row instead of moving past it. Without this, ArrowDown after a click-open skipped the first group. Opening from the keyboard already shows the row, so keyboard users see no change.
• Touch: group-row hover shading only applies under @media (hover: hover). A touch browser keeps a tapped row hovered, so tapping Back would otherwise leave the row that takes its place shaded.
• Docs: the Drill-In Groups section explains the difference from flyout.

Fixes DSS-363

Type of change

• Bug fix (non-breaking change which fixes an issue)
• This change requires a documentation update

How Has This Been Tested?

• unit tests (new group-display="drill-in" specs):
  • no row is shaded after a pointer Back, even the one holding the selection (this fails without the fix);
  • the keys still show the row they come back to;
  • the first arrow after a click-open shows the first row, then moves on;
  • the first arrow after a pointer Back shows that row;
  • the row back isn't shaded for the pointer, but is for the keys;
  • a flyout that drills in shades no row for the selection.
• Updated specs: three existing specs assumed the first arrow moves past a row the pointer highlighted. Two of them now open from the keyboard, as a real keyboard open does. The pointer one now expects the reveal first.
• The full pds-combobox spec and e2e suites pass (268 specs, 49 e2e tests). Lint is unchanged from main.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

---

Note

Low Risk
UI and accessibility behavior change scoped to grouped drill-in/flyout-fallback panels; flyout selection highlighting is unchanged and coverage is added in unit tests.

Overview
Fixes drill-in group row styling so shaded rows no longer look like a selected option (including after navigating back and when the current value lives in that group). flyout still highlights the group that holds the selection.

For drill-in (and flyout when it falls back to drill-in), group rows and the back row get persistent highlight classes only during keyboard navigation; the pointer uses :hover via a pointerCanHover flag from pointerType (so touch doesn’t leave a stuck hover after Back). The first ArrowUp/Down after a click-open or pointer highlight reveals that row (with a dedicated aria-live region) instead of skipping past it.

Docs in the Drill-In Groups section describe the behavior; bundle size limit for pds-combobox is bumped slightly; unit tests cover shading, reveal, touch vs mouse, and flyout fallback.

^{Reviewed by Cursor Bugbot for commit e71db7d. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	e71db7d
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6ad60fbc5082e3c6b4ddac4b
😎 Deploy Preview	https://deploy-preview-879--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pixelflips]

Looks good overall. Two edge cases in the new drill-in shading are noted inline.

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 1b1fcf2. Configure here.}