@astrojs/starlight 0.33.2 → 0.34.0

package/style/props.css

@@ -1,184 +1,186 @@
-:root,
-::backdrop {
-	/* Colors (dark mode) */
-	--sl-color-white: hsl(0, 0%, 100%); /* “white” */
-	--sl-color-gray-1: hsl(224, 20%, 94%);
-	--sl-color-gray-2: hsl(224, 6%, 77%);
-	--sl-color-gray-3: hsl(224, 6%, 56%);
-	--sl-color-gray-4: hsl(224, 7%, 36%);
-	--sl-color-gray-5: hsl(224, 10%, 23%);
-	--sl-color-gray-6: hsl(224, 14%, 16%);
-	--sl-color-black: hsl(224, 10%, 10%);
-
-	--sl-hue-orange: 41;
-	--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);
-	--sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);
-	--sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);
-	--sl-hue-green: 101;
-	--sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);
-	--sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);
-	--sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);
-	--sl-hue-blue: 234;
-	--sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);
-	--sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);
-	--sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);
-	--sl-hue-purple: 281;
-	--sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);
-	--sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);
-	--sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);
-	--sl-hue-red: 339;
-	--sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);
-	--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);
-	--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);
-
-	--sl-color-accent-low: hsl(224, 54%, 20%);
-	--sl-color-accent: hsl(224, 100%, 60%);
-	--sl-color-accent-high: hsl(224, 100%, 85%);
-
-	--sl-color-text: var(--sl-color-gray-2);
-	--sl-color-text-accent: var(--sl-color-accent-high);
-	--sl-color-text-invert: var(--sl-color-accent-low);
-	--sl-color-bg: var(--sl-color-black);
-	--sl-color-bg-nav: var(--sl-color-gray-6);
-	--sl-color-bg-sidebar: var(--sl-color-gray-6);
-	--sl-color-bg-inline-code: var(--sl-color-gray-5);
-	--sl-color-bg-accent: var(--sl-color-accent-high);
-	--sl-color-hairline-light: var(--sl-color-gray-5);
-	--sl-color-hairline: var(--sl-color-gray-6);
-	--sl-color-hairline-shade: var(--sl-color-black);
-
-	--sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);
-
-	/* Shadows (dark mode) */
-	--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);
-	--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08),
-		0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);
-	--sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1),
-		0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75),
-		0px 4px 2px hsla(0, 0%, 0%, 0.25);
-
-	/* Text size and line height */
-	--sl-text-2xs: 0.75rem; /* 12px */
-	--sl-text-xs: 0.8125rem; /* 13px */
-	--sl-text-sm: 0.875rem; /* 14px */
-	--sl-text-base: 1rem; /* 16px */
-	--sl-text-lg: 1.125rem; /* 18px */
-	--sl-text-xl: 1.25rem; /* 20px */
-	--sl-text-2xl: 1.5rem; /* 24px */
-	--sl-text-3xl: 1.8125rem; /* 29px */
-	--sl-text-4xl: 2.1875rem; /* 35px */
-	--sl-text-5xl: 2.625rem; /* 42px */
-	--sl-text-6xl: 4rem; /* 64px */
-
-	--sl-text-body: var(--sl-text-base);
-	--sl-text-body-sm: var(--sl-text-xs);
-	--sl-text-code: var(--sl-text-sm);
-	--sl-text-code-sm: var(--sl-text-xs);
-	--sl-text-h1: var(--sl-text-4xl);
-	--sl-text-h2: var(--sl-text-3xl);
-	--sl-text-h3: var(--sl-text-2xl);
-	--sl-text-h4: var(--sl-text-xl);
-	--sl-text-h5: var(--sl-text-lg);
-
-	--sl-line-height: 1.75;
-	--sl-line-height-headings: 1.2;
-
-	--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';
-	--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-		'Courier New', monospace;
-	--__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);
-	--__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)), var(--sl-font-system-mono);
-
-	/** Key layout values */
-	--sl-nav-height: 3.5rem;
-	--sl-nav-pad-x: 1rem;
-	--sl-nav-pad-y: 0.75rem;
-	--sl-mobile-toc-height: 3rem;
-	--sl-sidebar-width: 18.75rem;
-	--sl-sidebar-pad-x: 1rem;
-	--sl-content-width: 45rem;
-	--sl-content-pad-x: 1rem;
-	--sl-menu-button-size: 2rem;
-	--sl-nav-gap: var(--sl-content-pad-x);
-	/* Offset required to show outline inside an element instead of round the outside */
-	--sl-outline-offset-inside: -0.1875rem;
-
-	/* Global z-index values */
-	--sl-z-index-toc: 4;
-	--sl-z-index-menu: 5;
-	--sl-z-index-navbar: 10;
-	--sl-z-index-skiplink: 20;
-}
+@layer starlight.base {
+	:root,
+	::backdrop {
+		/* Colors (dark mode) */
+		--sl-color-white: hsl(0, 0%, 100%); /* “white” */
+		--sl-color-gray-1: hsl(224, 20%, 94%);
+		--sl-color-gray-2: hsl(224, 6%, 77%);
+		--sl-color-gray-3: hsl(224, 6%, 56%);
+		--sl-color-gray-4: hsl(224, 7%, 36%);
+		--sl-color-gray-5: hsl(224, 10%, 23%);
+		--sl-color-gray-6: hsl(224, 14%, 16%);
+		--sl-color-black: hsl(224, 10%, 10%);
+
+		--sl-hue-orange: 41;
+		--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);
+		--sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);
+		--sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);
+		--sl-hue-green: 101;
+		--sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);
+		--sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);
+		--sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);
+		--sl-hue-blue: 234;
+		--sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);
+		--sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);
+		--sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);
+		--sl-hue-purple: 281;
+		--sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);
+		--sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);
+		--sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);
+		--sl-hue-red: 339;
+		--sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);
+		--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);
+		--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);
+
+		--sl-color-accent-low: hsl(224, 54%, 20%);
+		--sl-color-accent: hsl(224, 100%, 60%);
+		--sl-color-accent-high: hsl(224, 100%, 85%);
+
+		--sl-color-text: var(--sl-color-gray-2);
+		--sl-color-text-accent: var(--sl-color-accent-high);
+		--sl-color-text-invert: var(--sl-color-accent-low);
+		--sl-color-bg: var(--sl-color-black);
+		--sl-color-bg-nav: var(--sl-color-gray-6);
+		--sl-color-bg-sidebar: var(--sl-color-gray-6);
+		--sl-color-bg-inline-code: var(--sl-color-gray-5);
+		--sl-color-bg-accent: var(--sl-color-accent-high);
+		--sl-color-hairline-light: var(--sl-color-gray-5);
+		--sl-color-hairline: var(--sl-color-gray-6);
+		--sl-color-hairline-shade: var(--sl-color-black);
+
+		--sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);
+
+		/* Shadows (dark mode) */
+		--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);
+		--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08),
+			0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);
+		--sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1),
+			0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75),
+			0px 4px 2px hsla(0, 0%, 0%, 0.25);
+
+		/* Text size and line height */
+		--sl-text-2xs: 0.75rem; /* 12px */
+		--sl-text-xs: 0.8125rem; /* 13px */
+		--sl-text-sm: 0.875rem; /* 14px */
+		--sl-text-base: 1rem; /* 16px */
+		--sl-text-lg: 1.125rem; /* 18px */
+		--sl-text-xl: 1.25rem; /* 20px */
+		--sl-text-2xl: 1.5rem; /* 24px */
+		--sl-text-3xl: 1.8125rem; /* 29px */
+		--sl-text-4xl: 2.1875rem; /* 35px */
+		--sl-text-5xl: 2.625rem; /* 42px */
+		--sl-text-6xl: 4rem; /* 64px */
+
+		--sl-text-body: var(--sl-text-base);
+		--sl-text-body-sm: var(--sl-text-xs);
+		--sl-text-code: var(--sl-text-sm);
+		--sl-text-code-sm: var(--sl-text-xs);
+		--sl-text-h1: var(--sl-text-4xl);
+		--sl-text-h2: var(--sl-text-3xl);
+		--sl-text-h3: var(--sl-text-2xl);
+		--sl-text-h4: var(--sl-text-xl);
+		--sl-text-h5: var(--sl-text-lg);
+
+		--sl-line-height: 1.75;
+		--sl-line-height-headings: 1.2;
+
+		--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';
+		--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+			'Courier New', monospace;
+		--__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);
+		--__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)), var(--sl-font-system-mono);
+
+		/** Key layout values */
+		--sl-nav-height: 3.5rem;
+		--sl-nav-pad-x: 1rem;
+		--sl-nav-pad-y: 0.75rem;
+		--sl-mobile-toc-height: 3rem;
+		--sl-sidebar-width: 18.75rem;
+		--sl-sidebar-pad-x: 1rem;
+		--sl-content-width: 45rem;
+		--sl-content-pad-x: 1rem;
+		--sl-menu-button-size: 2rem;
+		--sl-nav-gap: var(--sl-content-pad-x);
+		/* Offset required to show outline inside an element instead of round the outside */
+		--sl-outline-offset-inside: -0.1875rem;
+
+		/* Global z-index values */
+		--sl-z-index-toc: 4;
+		--sl-z-index-menu: 5;
+		--sl-z-index-navbar: 10;
+		--sl-z-index-skiplink: 20;
+	}
 
-:root[data-theme='light'],
-[data-theme='light'] ::backdrop {
-	/* Colours (light mode) */
-	--sl-color-white: hsl(224, 10%, 10%);
-	--sl-color-gray-1: hsl(224, 14%, 16%);
-	--sl-color-gray-2: hsl(224, 10%, 23%);
-	--sl-color-gray-3: hsl(224, 7%, 36%);
-	--sl-color-gray-4: hsl(224, 6%, 56%);
-	--sl-color-gray-5: hsl(224, 6%, 77%);
-	--sl-color-gray-6: hsl(224, 20%, 94%);
-	--sl-color-gray-7: hsl(224, 19%, 97%);
-	--sl-color-black: hsl(0, 0%, 100%);
-
-	--sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%);
-	--sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%);
-	--sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
-	--sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%);
-	--sl-color-green: hsl(var(--sl-hue-green), 90%, 46%);
-	--sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%);
-	--sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%);
-	--sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%);
-	--sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%);
-	--sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%);
-	--sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%);
-	--sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%);
-	--sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%);
-	--sl-color-red: hsl(var(--sl-hue-red), 90%, 60%);
-	--sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%);
-
-	--sl-color-accent-high: hsl(234, 80%, 30%);
-	--sl-color-accent: hsl(234, 90%, 60%);
-	--sl-color-accent-low: hsl(234, 88%, 90%);
-
-	--sl-color-text-accent: var(--sl-color-accent);
-	--sl-color-text-invert: var(--sl-color-black);
-	--sl-color-bg-nav: var(--sl-color-gray-7);
-	--sl-color-bg-sidebar: var(--sl-color-bg);
-	--sl-color-bg-inline-code: var(--sl-color-gray-6);
-	--sl-color-bg-accent: var(--sl-color-accent);
-	--sl-color-hairline-light: var(--sl-color-gray-6);
-	--sl-color-hairline-shade: var(--sl-color-gray-6);
-
-	--sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);
-
-	/* Shadows (light mode) */
-	--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06);
-	--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03), 0px 5px 2px hsla(0, 0%, 0%, 0.03),
-		0px 3px 2px hsla(0, 0%, 0%, 0.06), 0px 1px 1px hsla(0, 0%, 0%, 0.06);
-	--sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01), 0px 16px 6px hsla(0, 0%, 0%, 0.03),
-		0px 9px 5px hsla(223, 13%, 10%, 0.08), 0px 4px 4px hsla(0, 0%, 0%, 0.16),
-		0px 4px 2px hsla(0, 0%, 0%, 0.04);
-}
+	:root[data-theme='light'],
+	[data-theme='light'] ::backdrop {
+		/* Colours (light mode) */
+		--sl-color-white: hsl(224, 10%, 10%);
+		--sl-color-gray-1: hsl(224, 14%, 16%);
+		--sl-color-gray-2: hsl(224, 10%, 23%);
+		--sl-color-gray-3: hsl(224, 7%, 36%);
+		--sl-color-gray-4: hsl(224, 6%, 56%);
+		--sl-color-gray-5: hsl(224, 6%, 77%);
+		--sl-color-gray-6: hsl(224, 20%, 94%);
+		--sl-color-gray-7: hsl(224, 19%, 97%);
+		--sl-color-black: hsl(0, 0%, 100%);
+
+		--sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%);
+		--sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%);
+		--sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
+		--sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%);
+		--sl-color-green: hsl(var(--sl-hue-green), 90%, 46%);
+		--sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%);
+		--sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%);
+		--sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%);
+		--sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%);
+		--sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%);
+		--sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%);
+		--sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%);
+		--sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%);
+		--sl-color-red: hsl(var(--sl-hue-red), 90%, 60%);
+		--sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%);
+
+		--sl-color-accent-high: hsl(234, 80%, 30%);
+		--sl-color-accent: hsl(234, 90%, 60%);
+		--sl-color-accent-low: hsl(234, 88%, 90%);
+
+		--sl-color-text-accent: var(--sl-color-accent);
+		--sl-color-text-invert: var(--sl-color-black);
+		--sl-color-bg-nav: var(--sl-color-gray-7);
+		--sl-color-bg-sidebar: var(--sl-color-bg);
+		--sl-color-bg-inline-code: var(--sl-color-gray-6);
+		--sl-color-bg-accent: var(--sl-color-accent);
+		--sl-color-hairline-light: var(--sl-color-gray-6);
+		--sl-color-hairline-shade: var(--sl-color-gray-6);
+
+		--sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);
+
+		/* Shadows (light mode) */
+		--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06);
+		--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03), 0px 5px 2px hsla(0, 0%, 0%, 0.03),
+			0px 3px 2px hsla(0, 0%, 0%, 0.06), 0px 1px 1px hsla(0, 0%, 0%, 0.06);
+		--sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01), 0px 16px 6px hsla(0, 0%, 0%, 0.03),
+			0px 9px 5px hsla(223, 13%, 10%, 0.08), 0px 4px 4px hsla(0, 0%, 0%, 0.16),
+			0px 4px 2px hsla(0, 0%, 0%, 0.04);
+	}
 
-@media (min-width: 50em) {
-	:root {
-		--sl-nav-height: 4rem;
-		--sl-nav-pad-x: 1.5rem;
-		--sl-text-h1: var(--sl-text-5xl);
-		--sl-text-h2: var(--sl-text-4xl);
-		--sl-text-h3: var(--sl-text-3xl);
-		--sl-text-h4: var(--sl-text-2xl);
+	@media (min-width: 50em) {
+		:root {
+			--sl-nav-height: 4rem;
+			--sl-nav-pad-x: 1.5rem;
+			--sl-text-h1: var(--sl-text-5xl);
+			--sl-text-h2: var(--sl-text-4xl);
+			--sl-text-h3: var(--sl-text-3xl);
+			--sl-text-h4: var(--sl-text-2xl);
+		}
 	}
-}
 
-@media (min-width: 72rem) {
-	:root {
-		--sl-content-pad-x: 1.5rem;
-		--sl-mobile-toc-height: 0rem;
+	@media (min-width: 72rem) {
+		:root {
+			--sl-content-pad-x: 1.5rem;
+			--sl-mobile-toc-height: 0rem;
+		}
 	}
 }

package/style/reset.css

@@ -1,48 +1,50 @@
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
+@layer starlight.reset {
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
 
-* {
-	margin: 0;
-}
+	* {
+		margin: 0;
+	}
 
-html {
-	color-scheme: dark;
-	accent-color: var(--sl-color-accent);
-}
+	html {
+		color-scheme: dark;
+		accent-color: var(--sl-color-accent);
+	}
 
-html[data-theme='light'] {
-	color-scheme: light;
-}
+	html[data-theme='light'] {
+		color-scheme: light;
+	}
 
-body {
-	font-family: var(--__sl-font);
-	line-height: var(--sl-line-height);
-	-webkit-font-smoothing: antialiased;
-	color: var(--sl-color-text);
-	background-color: var(--sl-color-bg);
-}
+	body {
+		font-family: var(--__sl-font);
+		line-height: var(--sl-line-height);
+		-webkit-font-smoothing: antialiased;
+		color: var(--sl-color-text);
+		background-color: var(--sl-color-bg);
+	}
 
-input,
-button,
-textarea,
-select {
-	font: inherit;
-}
+	input,
+	button,
+	textarea,
+	select {
+		font: inherit;
+	}
 
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-code {
-	overflow-wrap: anywhere;
-}
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	code {
+		overflow-wrap: anywhere;
+	}
 
-code {
-	font-family: var(--__sl-font-mono);
+	code {
+		font-family: var(--__sl-font-mono);
+	}
 }

package/style/util.css

@@ -1,61 +1,63 @@
-.sr-only {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border-width: 0;
-}
+@layer starlight.utils {
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
 
-.sl-hidden {
-	display: none;
-}
-.sl-flex {
-	display: flex;
-}
-.sl-block {
-	display: block;
-}
-@media (min-width: 50rem) {
-	.md\:sl-hidden {
+	.sl-hidden {
 		display: none;
 	}
-	.md\:sl-flex {
+	.sl-flex {
 		display: flex;
 	}
-	.md\:sl-block {
+	.sl-block {
 		display: block;
 	}
-}
-@media (min-width: 72rem) {
-	.lg\:sl-hidden {
-		display: none;
+	@media (min-width: 50rem) {
+		.md\:sl-hidden {
+			display: none;
+		}
+		.md\:sl-flex {
+			display: flex;
+		}
+		.md\:sl-block {
+			display: block;
+		}
 	}
-	.lg\:sl-flex {
-		display: flex;
+	@media (min-width: 72rem) {
+		.lg\:sl-hidden {
+			display: none;
+		}
+		.lg\:sl-flex {
+			display: flex;
+		}
+		.lg\:sl-block {
+			display: block;
+		}
 	}
-	.lg\:sl-block {
-		display: block;
+	[data-theme='light'] .light\:sl-hidden {
+		display: none;
+	}
+	[data-theme='dark'] .dark\:sl-hidden {
+		display: none;
 	}
-}
-[data-theme='light'] .light\:sl-hidden {
-	display: none;
-}
-[data-theme='dark'] .dark\:sl-hidden {
-	display: none;
-}
-
-/*
-Flip an element around the y-axis when in an RTL context.
-Primarily useful for things where we can’t rely on writing direction like icons.
-
-<Icon name="right-arrow" class="rtl:flip" />
 
-In a LTR context: →					In a RTL context: ←
-*/
-[dir='rtl'] .rtl\:flip:not(:where([dir='rtl'] [dir='ltr'] *)) {
-	transform: matrix(-1, 0, 0, 1, 0, 0);
+	/**
+	 * Flip an element around the y-axis when in an RTL context.
+	 * Primarily useful for things where we can’t rely on writing direction like icons.
+	 *
+	 * <Icon name="right-arrow" class="rtl:flip" />
+	 *
+	 * In a LTR context: →					In a RTL context: ←
+	 */
+	[dir='rtl'] .rtl\:flip:not(:where([dir='rtl'] [dir='ltr'] *)) {
+		transform: matrix(-1, 0, 0, 1, 0, 0);
+	}
 }

package/translations/ar.json

@@ -25,5 +25,6 @@
   "aside.caution": "تنبيه",
   "aside.danger": "تحذير",
   "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "طوِّر بواسطة Starlight"
+  "builtWithStarlight.label": "طوِّر بواسطة Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/ca.json

@@ -38,5 +38,6 @@
   "pagefind.one_result": "[COUNT] resultat per a: [SEARCH_TERM]",
   "pagefind.alt_search": "Cap resultat per a [SEARCH_TERM]. Mostrant resultats per a: [DIFFERENT_TERM]",
   "pagefind.search_suggestion": "Cap resultat per a [SEARCH_TERM]. Prova alguna d’aquestes cerques:",
-  "pagefind.searching": "Cercant [SEARCH_TERM]..."
+  "pagefind.searching": "Cercant [SEARCH_TERM]...",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/cs.json

@@ -38,5 +38,6 @@
   "pagefind.one_result": "[COUNT] výsledek pro: [SEARCH_TERM]",
   "pagefind.alt_search": "Žádné výsledky pro [SEARCH_TERM]. Namísto toho zobrazuji výsledky pro: [DIFFERENT_TERM]",
   "pagefind.search_suggestion": "Žádný výsledek pro [SEARCH_TERM]. Zkus nějaké z těchto hledání:",
-  "pagefind.searching": "Hledám [SEARCH_TERM]..."
+  "pagefind.searching": "Hledám [SEARCH_TERM]...",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/da.json

@@ -25,5 +25,6 @@
   "aside.caution": "Caution",
   "aside.danger": "Danger",
   "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Built with Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/de.json

@@ -25,5 +25,6 @@
   "aside.caution": "Achtung",
   "aside.danger": "Gefahr",
   "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "Erstellt mit Starlight"
+  "builtWithStarlight.label": "Erstellt mit Starlight",
+  "heading.anchorLabel": "Abschnitt betitelt „{{title}}“"
 }

package/translations/en.json

@@ -25,5 +25,6 @@
   "aside.caution": "Caution",
   "aside.danger": "Danger",
   "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Built with Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/es.json

@@ -38,5 +38,6 @@
   "pagefind.one_result": "[COUNT] resultado para: [SEARCH_TERM]",
   "pagefind.alt_search": "Ningún resultado para [SEARCH_TERM]. Mostrando resultados para: [DIFFERENT_TERM]",
   "pagefind.search_suggestion": "Ningún resultado para [SEARCH_TERM]. Prueba alguna de estas búsquedas:",
-  "pagefind.searching": "Buscando [SEARCH_TERM]..."
+  "pagefind.searching": "Buscando [SEARCH_TERM]...",
+  "heading.anchorLabel": "Sección titulada «{{title}}»"
 }

package/translations/fa.json

@@ -25,5 +25,6 @@
   "aside.caution": "احتیاط",
   "aside.danger": "خطر",
   "fileTree.directory": "فهرست",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Built with Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }