Refactor <ThemeSelect> script to avoid double media query event listener

[delucis]

Description

• Follow up to fix: respond to media query change events when theme is auto #1731
• That PR introduces a media query event listener so that the colour theme can stay in sync with the system theme when using the default auto theme. But because we often have two <ThemeSelect> components on each page (nav bar and mobile menu), this meant a double listener, each updating both select menus.
• To solve this I pulled most of the logic out of the StarlightThemeSelect class, which wasn’t actually instance-specific, so the media query event listener can just run once at the top level.
• The diff is a bit overwhelming but it’s mainly moving the private class methods up to top-level constants. The media query gets moved from the custom element constructor to the top level so we only have one.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8e37346

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

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Apr 10, 2024 7:26pm

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
starlight-i18n	⬜️ Ignored (Inspect)		Apr 10, 2024 7:26pm

[astrobot-houston]

size-limit report 📦

Path	Size
/index.html	6.1 KB (-0.04% 🔽)
/_astro/*.js	21.57 KB (-0.05% 🔽)
/_astro/*.css	13.45 KB (0%)

[HiDeoo]

Thanks, this looks like a thorough refactor to me and my local tests did not spot any issues. Looks perfect to me 👍

Unrelated to this change, we should probably do a follow-up to the follow-up to fix the Property 'StarlightThemeProvider' does not exist on type 'Window & typeof globalThis'.ts(2339) TS error, I would guess it's just missing an export for declare in packages/starlight/global.d.ts.

[delucis]

Unrelated to this change, we should probably do a follow-up to the follow-up to fix the Property 'StarlightThemeProvider' does not exist on type 'Window & typeof globalThis'.ts(2339) TS error, I would guess it's just missing an export for declare in packages/starlight/global.d.ts.

I could do that in this PR I think — you’re right that export declare ... fixes the error on my end.

[techfg]

@delucis - Great stuff here and thank you! I had mis-interpreted the previous logic when making the media change mod in that I thought the double event listener issue already existed for the select itself but realize now that the event listener that existed on the select wasn't doubled up since it was instance specific, so my change did introduce the new bug - it didn't exist prior. Sorry I overlooked that originally and again, appreciate you getting this cleaned-up!