🐞 Patch Changes
- #4396
46a5020Thanks @trueberryless! - Fixes a regression where the icon of the<Aside>component was rendered smaller than the icon of Markdown asides.
46a5020 Thanks @trueberryless! - Fixes a regression where the icon of the <Aside> component was rendered smaller than the icon of Markdown asides.
#4190 3f2336b Thanks @delucis! - ⚠️ BREAKING CHANGE: Adds support for any Astro scopedStyleStrategy configuration.
Previously, Starlight forced the "where" strategy, resulting in CSS selectors like :where(.astro-HASH). Starlight now respects the strategy set in astro.config.mjs and will default to Astro’s default "attribute" strategy, resulting in attribute selectors like [data-astro-cid-HASH].
The new default can change some styling behaviour, so we recommend checking for visual changes in your site when updating. In particular, note the following:
Attribute selectors have a higher specificity than :where() selectors. Check to ensure styles still apply and no CSS changes are needed to ensure the relative specificity of declarations remains the same.
Astro’s "attribute" strategy does not automatically pass along a parent component’s scope when passing a class down to a child component. If you have components that depended on this, you will need to update the child component to spread the parent’s data attribute where you are reusing the class name, for example:
<Child class="special-case" />
<style> .special-case { --accent-color: red; }</style>---const { class: className } = Astro.props;const { class: className, ...attributes } = Astro.props;---
<div class={className}><div class={className} {...attributes}> <!-- ... --></div>See “Passing a class to a child component” in the Astro docs for more details.
Alternatively, if you wish to continue using the previous scoping strategy in your site, set it explicitly in your Astro configuration file:
import { defineConfig } from 'astro/config';
export default defineConfig({ scopedStyleStrategy: "where", // ...});#3674 993ac27 Thanks @controversial! - Adds support for Pagefind’s excludeSelectors and includeCharacters configuration to customize how search indexes are built
#4219 35abe4f Thanks @delucis! - Refactors Starlight’s theme select menu to reduce its JavaScript use
⚠️ Potentially breaking change: If your project or theme plugin overrides the ThemeSelect component, check that it still works after updating. The global API previously used by theme select components has been removed and calling StarlightThemeProvider.updatePickers() will no longer work.
See ThemeProvider.astro, ThemeSelect.astro, and LanguageSelect.astro on GitHub for the full source code of the updated components.
#4385 c130349 Thanks @delucis! - Updates dependency i18next to v27
⚠️ Potentially breaking change: If you use Starlight’s translation APIs directly, see i18next’s migration guide for details. We don’t expect any changes to impact Starlight users, but let us know if they do.
ad19424 Thanks @RaphaelFakhri! - Fixes the twitter:site meta tag including a trailing slash when the configured X or Twitter social link ends with /#4354 56b8587 Thanks @jasikpark! - Improves the color contrast of the search input placeholder text
#4337 c5d0a7f Thanks @moonmeister! - Fixes search not loading when the search script runs after the page has finished loading, for example when a Content Security Policy requires scripts to be added dynamically
#4352 3edab29 Thanks @delucis! - Fixes the Astro trailingSlash and build.format options not being applied correctly to sidebar links that include a query string or hash
#4218 effea21 Thanks @delucis! - Reduces install size by ~400 KB by switching the YAML parser used internally for projects using Astro 7.3.6 or later
#4316 8679b1c Thanks @clean99! - Fixes localized routes and language switcher links for pages in directories named like Object.prototype properties, such as constructor.
#4341 e1ac1b4 Thanks @delucis! - Prevents tables overflowing and clipping when printing a page
#4309 3490c80 Thanks @athulsreekumar! - Fixes autogenerated sidebar groups omitting directories whose names match Object.prototype properties, such as constructor or toString
#4290 bf93823 Thanks @RaphaelFakhri! - Fixes missing last-updated dates in production builds for pages whose file path contains special characters
#4295 af9557e Thanks @delucis! - Fixes a formatting issue in some error messages impacting projects with Zod ≥4.5 installed
#4299 a103f38 Thanks @clean99! - Fixes empty sidebars when autogenerating entries from the docs root directory using directory: ''
#4264 94e0985 Thanks @chrispezza! - Fixes a layout shift where the table of contents could be painted at the start of the content area and then jump to the end when a page’s HTML arrived in several chunks
#4285 6f22edd Thanks @tunetheweb! - Improves hero image loading by adding fetchpriority="high" hint for browsers
#4252 40a2584 Thanks @olafur-andri! - Adds Icelandic language support
#4229 e4a3d82 Thanks @HiDeoo! - Fixes a potential issue with icons being cut off in Firefox when pinch-zooming.
#4226 fb562dd Thanks @HiDeoo! - Fixes an issue where pages not importing components from @astrojs/starlight/components included styles of Starlight components used on other pages.
#4250 531af7d Thanks @HiDeoo! - Fixes Failed to resolve dependency warnings logged when running the development server in projects using the Cloudflare adapter.
#4229 e4a3d82 Thanks @HiDeoo! - Fixes the codePen and node icons slightly extending beyond their bounding box.
#4149 fa10e87 Thanks @ematipico! - Optimizes rendering of large nested sidebars
#4215 f791de6 Thanks @HiDeoo! - Adds a new seti:coffee icon for CoffeeScript files in the <FileTree> component.
#4215 f791de6 Thanks @HiDeoo! - Fixes <FileTree> icons for .ejs and npm-debug.log files displaying the default file icon.
33e21ec Thanks @HiDeoo! - Fixes a potential page freeze due to table of contents highlighting when a <PageTitle> component override does not render a heading with the required id="_top".fafd989 Thanks @linux-universe! - Add 1 new icon: fluxer
#3572 292fb17 Thanks @HiDeoo! - Distributes package as JavaScript files with dedicated type declaration files instead of TypeScript source files.
#4121 2623ae6 Thanks @delucis! - Simplifies markup for Starlight’s mobile menu toggle
⚠️ Potentially breaking change: If you use a theme plugin, custom styles, or component overrides targeting the MobileMenuToggle button or PageFrame components, you may need to adjust these for the new markup. The button is no longer wrapped in a <starlight-menu-button> custom element and no longer uses the aria-expanded attribute. Instead, you can use the .sl-menu-button class name to target the button and the :popover-open pseudo-class to style the menu open state specifically.
In the following example, custom styles for the menu button are updated for the new approach:
starlight-menu-button button { .sl-menu-button { color: var(--sl-color-text);}
starlight-menu-button[aria-expanded='true'] button { .sl-menu-button:has(~ :popover-open) { color: var(--sl-color-text-accent-high);}See MobileMenuToggle.astro and PageFrame.astro on GitHub for the full source code of the updated components.
#3572 292fb17 Thanks @HiDeoo! - Removes the tagline configuration option, which was never used.
If your configuration included a tagline option, you can safely remove it without any replacement.
#4134 6135f01 Thanks @HiDeoo! - Updates internal @astrojs/mdx, @astrojs/markdown-satteri, and satteri dependencies.
⚠️ BREAKING CHANGE: The following minimum versions are now required:
astro v7.2.10 or later@astrojs/markdown-satteri 0.4.0 or later (if you use it)@astrojs/markdown-remark 7.3.0 or later (if you use it)Please update Starlight and Astro together:
npx @astrojs/upgrade#4121 2623ae6 Thanks @delucis! - Refactors Starlight’s mobile menu toggle to work when JavaScript fails or is disabled
⚠️ BREAKING CHANGE: This release drops official support for Chromium-based browsers prior to version 116 (released August 2023), Safari-based browsers prior to version 17.0 (released September 2023), and Firefox prior to version 125 (released April 2024). You can find a list of currently supported browsers and their versions using this browserslist query.
This change also removes the data-mobile-menu-expanded attribute, which was previously added to <body> while the mobile menu is open. If you have custom code that was depending on this attribute, you will need to update it to use a new selector to check if the mobile menu is open.
In the following example, a custom background colour for the site header while the menu is open is updated for the new approach:
[data-mobile-menu-expanded] header { body:has(sl-sidebar-pane:popover-open) header { background-color: var(--sl-color-bg);}#4167 32a5e29 Thanks @HiDeoo! - Fixes a layout issue and anchor links appearing for hidden headings, e.g. footnote headings, when markdown.headingLinks is enabled or the <AnchorHeading> component is used.
#4148 cdfafd8 Thanks @ematipico! - Optimizes sidebar data generation logic to speed up sites with large sidebars
#4160 88442c3 Thanks @ArmandPhilippot! - Adds the missing translations for Expressive Code in the following locales: ar, hi, it, ja, ko, pt, zh-CN, and zh-TW.
#4159 a0e0ba2 Thanks @trueberryless! - Adds 1 new icon: npmx
#4142 cacbc9f Thanks @alebelcor! - Adds 1 new icon: whatsApp
#4133 3944311 Thanks @delucis! - Internal refactor: numbered id attributes in the <Tabs> component are now page-specific instead of using a global counter
#4138 cd4b665 Thanks @delucis! - Fixes localisation of code block UI elements when using the Sätteri Markdown processor