@astrojs/starlight 0.33.1 → 0.34.0

package/components/Select.astro

@@ -37,60 +37,64 @@ interface Props {
 </label>
 
 <style>
-	label {
-		--sl-label-icon-size: 0.875rem;
-		--sl-caret-size: 1.25rem;
-		--sl-inline-padding: 0.5rem;
-		position: relative;
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		color: var(--sl-color-gray-1);
-	}
+	@layer starlight.core {
+		label {
+			--sl-label-icon-size: 0.875rem;
+			--sl-caret-size: 1.25rem;
+			--sl-inline-padding: 0.5rem;
+			position: relative;
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			color: var(--sl-color-gray-1);
+		}
 
-	label:hover {
-		color: var(--sl-color-gray-2);
-	}
+		label:hover {
+			color: var(--sl-color-gray-2);
+		}
 
-	.icon {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		pointer-events: none;
-	}
+		.icon {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			pointer-events: none;
+		}
 
-	.label-icon {
-		font-size: var(--sl-label-icon-size);
-		inset-inline-start: 0;
-	}
+		select {
+			border: 0;
+			padding-block: 0.625rem;
+			padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + 0.25rem)
+				calc(var(--sl-caret-size) + var(--sl-inline-padding) + 0.25rem);
+			margin-inline: calc(var(--sl-inline-padding) * -1);
+			width: calc(var(--sl-select-width) + var(--sl-inline-padding) * 2);
+			background-color: transparent;
+			text-overflow: ellipsis;
+			color: inherit;
+			cursor: pointer;
+			appearance: none;
+		}
 
-	.caret {
-		font-size: var(--sl-caret-size);
-		inset-inline-end: 0;
-	}
+		option {
+			background-color: var(--sl-color-bg-nav);
+			color: var(--sl-color-gray-1);
+		}
 
-	select {
-		border: 0;
-		padding-block: 0.625rem;
-		padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + 0.25rem)
-			calc(var(--sl-caret-size) + var(--sl-inline-padding) + 0.25rem);
-		margin-inline: calc(var(--sl-inline-padding) * -1);
-		width: calc(var(--sl-select-width) + var(--sl-inline-padding) * 2);
-		background-color: transparent;
-		text-overflow: ellipsis;
-		color: inherit;
-		cursor: pointer;
-		appearance: none;
+		@media (min-width: 50rem) {
+			select {
+				font-size: var(--sl-text-sm);
+			}
+		}
 	}
 
-	option {
-		background-color: var(--sl-color-bg-nav);
-		color: var(--sl-color-gray-1);
-	}
+	@layer starlight.components {
+		.label-icon {
+			font-size: var(--sl-label-icon-size);
+			inset-inline-start: 0;
+		}
 
-	@media (min-width: 50rem) {
-		select {
-			font-size: var(--sl-text-sm);
+		.caret {
+			font-size: var(--sl-caret-size);
+			inset-inline-end: 0;
 		}
 	}
 </style>

package/components/SidebarPersister.astro

@@ -70,7 +70,9 @@ declare global {
 </sl-sidebar-state-persist>
 
 <style>
-	sl-sidebar-state-persist {
-		display: contents;
+	@layer starlight.core {
+		sl-sidebar-state-persist {
+			display: contents;
+		}
 	}
 </style>

package/components/SidebarSublist.astro

@@ -60,93 +60,95 @@ const { sublist, nested } = Astro.props;
 </ul>
 
 <style>
-	ul {
-		--sl-sidebar-item-padding-inline: 0.5rem;
-		list-style: none;
-		padding: 0;
-	}
-
-	li {
-		overflow-wrap: anywhere;
-	}
-
-	ul ul li {
-		margin-inline-start: var(--sl-sidebar-item-padding-inline);
-		border-inline-start: 1px solid var(--sl-color-hairline-light);
-		padding-inline-start: var(--sl-sidebar-item-padding-inline);
-	}
+	@layer starlight.core {
+		ul {
+			--sl-sidebar-item-padding-inline: 0.5rem;
+			list-style: none;
+			padding: 0;
+		}
 
-	.large {
-		font-size: var(--sl-text-lg);
-		font-weight: 600;
-		color: var(--sl-color-white);
-	}
+		li {
+			overflow-wrap: anywhere;
+		}
 
-	.top-level > li + li {
-		margin-top: 0.75rem;
-	}
+		ul ul li {
+			margin-inline-start: var(--sl-sidebar-item-padding-inline);
+			border-inline-start: 1px solid var(--sl-color-hairline-light);
+			padding-inline-start: var(--sl-sidebar-item-padding-inline);
+		}
 
-	summary {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.2em var(--sl-sidebar-item-padding-inline);
-		line-height: 1.4;
-		cursor: pointer;
-		user-select: none;
-	}
-	summary::marker,
-	summary::-webkit-details-marker {
-		display: none;
-	}
+		.large {
+			font-size: var(--sl-text-lg);
+			font-weight: 600;
+			color: var(--sl-color-white);
+		}
 
-	.caret {
-		transition: transform 0.2s ease-in-out;
-		flex-shrink: 0;
-	}
-	:global([dir='rtl']) .caret {
-		transform: rotateZ(180deg);
-	}
-	[open] > summary .caret {
-		transform: rotateZ(90deg);
-	}
+		.top-level > li + li {
+			margin-top: 0.75rem;
+		}
 
-	a {
-		display: block;
-		border-radius: 0.25rem;
-		text-decoration: none;
-		color: var(--sl-color-gray-2);
-		padding: 0.3em var(--sl-sidebar-item-padding-inline);
-		line-height: 1.4;
-	}
+		summary {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0.2em var(--sl-sidebar-item-padding-inline);
+			line-height: 1.4;
+			cursor: pointer;
+			user-select: none;
+		}
+		summary::marker,
+		summary::-webkit-details-marker {
+			display: none;
+		}
 
-	a:hover,
-	a:focus {
-		color: var(--sl-color-white);
-	}
+		.caret {
+			transition: transform 0.2s ease-in-out;
+			flex-shrink: 0;
+		}
+		:global([dir='rtl']) .caret {
+			transform: rotateZ(180deg);
+		}
+		[open] > summary .caret {
+			transform: rotateZ(90deg);
+		}
 
-	[aria-current='page'],
-	[aria-current='page']:hover,
-	[aria-current='page']:focus {
-		font-weight: 600;
-		color: var(--sl-color-text-invert);
-		background-color: var(--sl-color-text-accent);
-	}
+		a {
+			display: block;
+			border-radius: 0.25rem;
+			text-decoration: none;
+			color: var(--sl-color-gray-2);
+			padding: 0.3em var(--sl-sidebar-item-padding-inline);
+			line-height: 1.4;
+		}
 
-	a > *:not(:last-child),
-	.group-label > *:not(:last-child) {
-		margin-inline-end: 0.25em;
-	}
+		a:hover,
+		a:focus {
+			color: var(--sl-color-white);
+		}
 
-	@media (min-width: 50rem) {
-		.top-level > li + li {
-			margin-top: 0.5rem;
+		[aria-current='page'],
+		[aria-current='page']:hover,
+		[aria-current='page']:focus {
+			font-weight: 600;
+			color: var(--sl-color-text-invert);
+			background-color: var(--sl-color-text-accent);
 		}
-		.large {
-			font-size: var(--sl-text-base);
+
+		a > *:not(:last-child),
+		.group-label > *:not(:last-child) {
+			margin-inline-end: 0.25em;
 		}
-		a {
-			font-size: var(--sl-text-sm);
+
+		@media (min-width: 50rem) {
+			.top-level > li + li {
+				margin-top: 0.5rem;
+			}
+			.large {
+				font-size: var(--sl-text-base);
+			}
+			a {
+				font-size: var(--sl-text-sm);
+			}
 		}
 	}
 </style>

package/components/SiteTitle.astro

@@ -34,20 +34,22 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 </a>
 
 <style>
-	.site-title {
-		align-items: center;
-		gap: var(--sl-nav-gap);
-		font-size: var(--sl-text-h4);
-		font-weight: 600;
-		color: var(--sl-color-text-accent);
-		text-decoration: none;
-		white-space: nowrap;
-	}
-	img {
-		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
-		width: auto;
-		max-width: 100%;
-		object-fit: contain;
-		object-position: 0 50%;
+	@layer starlight.core {
+		.site-title {
+			align-items: center;
+			gap: var(--sl-nav-gap);
+			font-size: var(--sl-text-h4);
+			font-weight: 600;
+			color: var(--sl-color-text-accent);
+			text-decoration: none;
+			white-space: nowrap;
+		}
+		img {
+			height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+			width: auto;
+			max-width: 100%;
+			object-fit: contain;
+			object-position: 0 50%;
+		}
 	}
 </style>

package/components/SkipLink.astro

@@ -5,20 +5,22 @@ import { PAGE_TITLE_ID } from '../constants';
 <a href={`#${PAGE_TITLE_ID}`}>{Astro.locals.t('skipLink.label')}</a>
 
 <style>
-	a {
-		clip: rect(0, 0, 0, 0);
-		position: fixed;
-		top: 0.75rem;
-		inset-inline-start: 0.75rem;
-	}
-	a:focus {
-		clip: unset;
-		z-index: var(--sl-z-index-skiplink);
-		display: block;
-		padding: 0.5rem 1rem;
-		text-decoration: none;
-		color: var(--sl-color-text-invert);
-		background-color: var(--sl-color-text-accent);
-		box-shadow: var(--sl-shadow-lg);
+	@layer starlight.core {
+		a {
+			clip: rect(0, 0, 0, 0);
+			position: fixed;
+			top: 0.75rem;
+			inset-inline-start: 0.75rem;
+		}
+		a:focus {
+			clip: unset;
+			z-index: var(--sl-z-index-skiplink);
+			display: block;
+			padding: 0.5rem 1rem;
+			text-decoration: none;
+			color: var(--sl-color-text-invert);
+			background-color: var(--sl-color-text-accent);
+			box-shadow: var(--sl-shadow-lg);
+		}
 	}
 </style>

package/components/SocialIcons.astro

@@ -19,12 +19,14 @@ const links = config.social || [];
 }
 
 <style>
-	a {
-		color: var(--sl-color-text-accent);
-		padding: 0.5em;
-		margin: -0.5em;
-	}
-	a:hover {
-		opacity: 0.66;
+	@layer starlight.core {
+		a {
+			color: var(--sl-color-text-accent);
+			padding: 0.5em;
+			margin: -0.5em;
+		}
+		a:hover {
+			opacity: 0.66;
+		}
 	}
 </style>

package/components/TableOfContents/TableOfContentsList.astro

@@ -26,52 +26,54 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
 </ul>
 
 <style define:vars={{ depth }}>
-	ul {
-		padding: 0;
-		list-style: none;
-	}
-	a {
-		--pad-inline: 0.5rem;
-		display: block;
-		border-radius: 0.25rem;
-		padding-block: 0.25rem;
-		padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline);
-		line-height: 1.25;
-	}
-	a[aria-current='true'] {
-		color: var(--sl-color-text-accent);
-	}
-	.isMobile a {
-		--pad-inline: 1rem;
-		display: flex;
-		justify-content: space-between;
-		gap: var(--pad-inline);
-		border-top: 1px solid var(--sl-color-gray-6);
-		border-radius: 0;
-		padding-block: 0.5rem;
-		color: var(--sl-color-text);
-		font-size: var(--sl-text-sm);
-		text-decoration: none;
-		outline-offset: var(--sl-outline-offset-inside);
-	}
-	.isMobile:first-child > li:first-child > a {
-		border-top: 0;
-	}
-	.isMobile a[aria-current='true'],
-	.isMobile a[aria-current='true']:hover,
-	.isMobile a[aria-current='true']:focus {
-		color: var(--sl-color-white);
-		background-color: unset;
-	}
-	.isMobile a[aria-current='true']::after {
-		content: '';
-		width: 1rem;
-		background-color: var(--sl-color-text-accent);
-		/* Check mark SVG icon */
-		-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
-		mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
-		-webkit-mask-repeat: no-repeat;
-		mask-repeat: no-repeat;
-		flex-shrink: 0;
+	@layer starlight.core {
+		ul {
+			padding: 0;
+			list-style: none;
+		}
+		a {
+			--pad-inline: 0.5rem;
+			display: block;
+			border-radius: 0.25rem;
+			padding-block: 0.25rem;
+			padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline);
+			line-height: 1.25;
+		}
+		a[aria-current='true'] {
+			color: var(--sl-color-text-accent);
+		}
+		.isMobile a {
+			--pad-inline: 1rem;
+			display: flex;
+			justify-content: space-between;
+			gap: var(--pad-inline);
+			border-top: 1px solid var(--sl-color-gray-6);
+			border-radius: 0;
+			padding-block: 0.5rem;
+			color: var(--sl-color-text);
+			font-size: var(--sl-text-sm);
+			text-decoration: none;
+			outline-offset: var(--sl-outline-offset-inside);
+		}
+		.isMobile:first-child > li:first-child > a {
+			border-top: 0;
+		}
+		.isMobile a[aria-current='true'],
+		.isMobile a[aria-current='true']:hover,
+		.isMobile a[aria-current='true']:focus {
+			color: var(--sl-color-white);
+			background-color: unset;
+		}
+		.isMobile a[aria-current='true']::after {
+			content: '';
+			width: 1rem;
+			background-color: var(--sl-color-text-accent);
+			/* Check mark SVG icon */
+			-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
+			mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==');
+			-webkit-mask-repeat: no-repeat;
+			mask-repeat: no-repeat;
+			flex-shrink: 0;
+		}
 	}
 </style>

package/components/TwoColumnContent.astro

@@ -12,41 +12,43 @@
 </div>
 
 <style>
-	.main-pane {
-		isolation: isolate;
-	}
-
-	@media (min-width: 72rem) {
-		.right-sidebar-container {
-			order: 2;
-			position: relative;
-			width: calc(
-				var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
-			);
+	@layer starlight.core {
+		.main-pane {
+			isolation: isolate;
 		}
 
-		.right-sidebar {
-			position: fixed;
-			top: 0;
-			border-inline-start: 1px solid var(--sl-color-hairline);
-			padding-top: var(--sl-nav-height);
-			width: 100%;
-			height: 100vh;
-			overflow-y: auto;
-			scrollbar-width: none;
-		}
+		@media (min-width: 72rem) {
+			.right-sidebar-container {
+				order: 2;
+				position: relative;
+				width: calc(
+					var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
+				);
+			}
 
-		.main-pane {
-			width: 100%;
-		}
+			.right-sidebar {
+				position: fixed;
+				top: 0;
+				border-inline-start: 1px solid var(--sl-color-hairline);
+				padding-top: var(--sl-nav-height);
+				width: 100%;
+				height: 100vh;
+				overflow-y: auto;
+				scrollbar-width: none;
+			}
+
+			.main-pane {
+				width: 100%;
+			}
 
-		:global([data-has-sidebar][data-has-toc]) .main-pane {
-			--sl-content-margin-inline: auto 0;
+			:global([data-has-sidebar][data-has-toc]) .main-pane {
+				--sl-content-margin-inline: auto 0;
 
-			order: 1;
-			width: calc(
-				var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
-			);
+				order: 1;
+				width: calc(
+					var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
+				);
+			}
 		}
 	}
 </style>

package/index.ts

@@ -26,6 +26,7 @@ import {
 } from './utils/plugins';
 import { processI18nConfig } from './utils/i18n';
 import type { StarlightConfig } from './types';
+import { starlightAutolinkHeadings } from './integrations/heading-links';
 
 export default function StarlightIntegration(
 	userOpts: StarlightUserConfigWithPlugins
@@ -127,10 +128,16 @@ export default function StarlightIntegration(
 								absolutePathToLang,
 							}),
 						],
-						rehypePlugins: [rehypeRtlCodeSupport()],
-						shikiConfig:
-							// Configure Shiki theme if the user is using the default github-dark theme.
-							config.markdown.shikiConfig.theme !== 'github-dark' ? {} : { theme: 'css-variables' },
+						rehypePlugins: [
+							rehypeRtlCodeSupport(),
+							// Process headings and add anchor links.
+							...starlightAutolinkHeadings({
+								starlightConfig,
+								astroConfig: config,
+								useTranslations,
+								absolutePathToLang,
+							}),
+						],
 					},
 					scopedStyleStrategy: 'where',
 					// If not already configured, default to prefetching all links on hover.

package/integrations/expressive-code/index.ts

@@ -81,6 +81,7 @@ export function getStarlightEcConfigPreprocessor({
 
 		const {
 			themes: themesInput,
+			cascadeLayer,
 			customizeTheme,
 			styleOverrides: { textMarkers: textMarkersStyleOverrides, ...otherStyleOverrides } = {},
 			useStarlightDarkModeSwitch,
@@ -136,6 +137,7 @@ export function getStarlightEcConfigPreprocessor({
 				// Return the default selector
 				return `[data-theme='${theme.name}']`;
 			},
+			cascadeLayer: cascadeLayer ?? 'starlight.components',
 			styleOverrides: {
 				borderRadius: '0px',
 				borderWidth: '1px',