withastro/starlight @astrojs/starlight@0.37.0

on GitHub

Minor Changes

• #3491 28810f0 Thanks @JusticeMatthew! - Changes text overflow styling in Markdown content

  ⚠️ Potentially breaking change: This release switches the overflow-wrap CSS style for common elements to break-word. In most cases, there should be little visual impact, but this change can impact how layouts with implicit sizing (such as tables) look, improving legibility in how words wrap.

  If you want to preserve the previous styling, you can add the following custom CSS to your site:

  p, h1, h2, h3, h4, h5, h6, code {
    overflow-wrap: anywhere;
  }

• #3351 239698c Thanks @HiDeoo! - Ensures that Starlight CSS layer order is predictable in custom pages using the <StarlightPage> component.

  Previously, due to how import order works in Astro, the <StarlightPage> component had to be the first import in custom pages to set up cascade layers used internally by Starlight to manage the order of its styles.

  With this change, this restriction no longer applies and Starlight’s styles will be applied correctly regardless of the import order of the <StarlightPage> component.

• #3521 ca7b771 Thanks @shubham-padia! - Fixes an issue where a vertical scrollbar could be displayed on the Starlight <Tabs> component when zooming the page

  ⚠️ Potentially breaking change: The <Tabs> component no longer uses margin-bottom and border-bottom to highlight the current tab. This is now done with a box-shadow. If you have custom styling for your tabs, you may need to update it.

  If you want to preserve the previous styling, you can add the following custom CSS to your site:

  starlight-tabs .tab {
    margin-bottom: -2px;
  }
  
  starlight-tabs .tab > [role='tab'] {
    border-bottom: 2px solid var(--sl-color-gray-5);
    box-shadow: none;
  }
  
  starlight-tabs .tab [role='tab'][aria-selected='true'] {
    border-color: var(--sl-color-text-accent);
  }

• #3549 1cf50eb Thanks @jacobdalamb! - Updates the default sans-serif system font stack, dropping support for the -apple-system and BlinkMacSystemFont font names used in older browsers. These are no longer needed in browsers officially supported by Starlight.

  If you still need to support older browsers, you can add the following custom CSS to your site:

  :root {
    --sl-font-system: ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol', 'Noto Color Emoji';
  }

• #3332 f61f99d Thanks @HiDeoo! - Adds a new markdown.processedDirs configuration option to specify additional directories where files should be processed by Starlight’s Markdown pipeline.

  By default, Starlight’s processing only applies to Markdown and MDX content loaded using Starlight’s docsLoader(). This new option allows to extend this processing to other directories, which can be useful if you are rendering content from a custom content collection using the <StarlightPage> component and expect Starlight’s Markdown processing to be applied to that content as well.