@astrojs/starlight 0.41.10 → 0.42.0

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/components/MobileMenuToggle.astro

@@ -0,0 +1,65 @@
+---
+import Icon from '../user-components/Icon.astro';
+---
+
+<button popovertarget="starlight__sidebar" class="sl-menu-button sl-flex md:sl-hidden print:hidden">
+	<Icon name="bars" class="open-menu" />
+	<Icon name="close" class="close-menu" />
+	<span class="sr-only">{Astro.locals.t('menuButton.accessibleLabel')}</span>
+</button>
+
+<style>
+	@layer starlight.core {
+		button {
+			position: fixed;
+			top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
+			inset-inline-end: var(--sl-nav-pad-x);
+			z-index: var(--sl-z-index-navbar);
+			border: 0;
+			border-radius: 50%;
+			width: var(--sl-menu-button-size);
+			height: var(--sl-menu-button-size);
+			padding: 0.5rem;
+			background-color: var(--sl-color-white);
+			color: var(--sl-color-black);
+			box-shadow: var(--sl-shadow-md);
+			cursor: pointer;
+		}
+
+		button:has(~ :popover-open) {
+			background-color: var(--sl-color-gray-2);
+			box-shadow: none;
+		}
+
+		button:has(~ :popover-open) .open-menu {
+			display: none;
+		}
+
+		button:not(:has(~ :popover-open)) .close-menu {
+			display: none;
+		}
+
+		:global([data-theme='light']) button {
+			background-color: var(--sl-color-black);
+			color: var(--sl-color-white);
+		}
+
+		:global([data-theme='light']) button:has(~ :popover-open) {
+			background-color: var(--sl-color-gray-5);
+		}
+	}
+</style>
+
+<style is:global>
+	@layer starlight.core {
+		body:has(#starlight__sidebar:popover-open) {
+			overflow: hidden;
+		}
+
+		@media (min-width: 50rem) {
+			body:has(#starlight__sidebar:popover-open) {
+				overflow: auto;
+			}
+		}
+	}
+</style>

package/{components → dist/components}/PageFrame.astro

@@ -10,11 +10,33 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 		hasSidebar && (
 			<nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
 				<MobileMenuToggle />
-				<div id="starlight__sidebar" class="sidebar-pane">
+				<script>
+					// The mobile menu uses the popover API to open and close without JavaScript. We enhance this
+					// behaviour with focus trapping while the menu is open.
+					class StarlightSidebarPane extends HTMLElement {
+						constructor() {
+							super();
+
+							// Close the menu when the viewport is resized between mobile and desktop sizes.
+							matchMedia('(min-width: 50em)').addEventListener('change', () => this.hidePopover());
+
+							// Update the menu state when the sidebar popover is toggled.
+							this.addEventListener('toggle', ({ newState }) => this.trapFocus(newState === 'open'));
+						}
+						/** Trap keyboard focus inside the header and menu when the menu is expanded. */
+						trapFocus(shouldTrap: boolean) {
+							document.querySelectorAll<HTMLElement>('.main-frame, .sl-skip-link').forEach((el) => {
+								el.toggleAttribute('inert', shouldTrap);
+							});
+						}
+					}
+					customElements.define('sl-sidebar-pane', StarlightSidebarPane);
+				</script>
+				<sl-sidebar-pane popover="" id="starlight__sidebar" class="sidebar-pane">
 					<div class="sidebar-content sl-flex">
 						<slot name="sidebar" />
 					</div>
-				</div>
+				</sl-sidebar-pane>
 			</nav>
 		)
 	}
@@ -48,7 +70,12 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 		}
 
 		.sidebar-pane {
-			visibility: var(--sl-sidebar-visibility, hidden);
+			/* By default, user agents apply some opinionated styles to popovers, which we don’t want. */
+			border: unset;
+			padding: unset;
+			height: unset;
+			color: unset;
+
 			position: fixed;
 			z-index: var(--sl-z-index-menu);
 			inset-block: var(--sl-nav-height) 0;
@@ -59,10 +86,6 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 			scrollbar-gutter: stable;
 		}
 
-		:global([aria-expanded='true']) ~ .sidebar-pane {
-			--sl-sidebar-visibility: visible;
-		}
-
 		.sidebar-content {
 			height: 100%;
 			min-height: max-content;
@@ -88,7 +111,8 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 				padding-inline-end: var(--sl-nav-pad-x);
 			}
 			.sidebar-pane {
-				--sl-sidebar-visibility: visible;
+				/* Make the sidebar visible on larger screens instead of deferring to popover state. */
+				display: block;
 				width: var(--sl-sidebar-width);
 				background-color: var(--sl-color-bg-sidebar);
 				border-inline-end: 1px solid var(--sl-color-hairline-shade);

package/dist/components-internals/Icons.d.ts

@@ -0,0 +1,415 @@
+import { FileIcon } from "../user-components/file-tree-icons.js";
+//#region src/components-internals/Icons.d.ts
+declare const BuiltInIcons: {
+  'up-caret': string;
+  'down-caret': string;
+  'right-caret': string;
+  'left-caret': string;
+  'up-arrow': string;
+  'down-arrow': string;
+  'right-arrow': string;
+  'left-arrow': string;
+  bars: string;
+  translate: string;
+  pencil: string;
+  pen: string;
+  document: string;
+  'add-document': string;
+  setting: string;
+  link: string;
+  'link-alt': string;
+  external: string;
+  download: string;
+  'cloud-download': string;
+  moon: string;
+  sun: string;
+  clock: string;
+  laptop: string;
+  desktop: string;
+  'mobile-android': string;
+  window: string;
+  database: string;
+  server: string;
+  'code-branch': string;
+  'open-book': string;
+  notes: string;
+  information: string;
+  magnifier: string;
+  'forward-slash': string;
+  close: string;
+  error: string;
+  warning: string;
+  'approve-check-circle': string;
+  'approve-check': string;
+  'question-circle': string;
+  question: string;
+  rocket: string;
+  star: string;
+  puzzle: string;
+  'list-format': string;
+  analytics: string;
+  random: string;
+  padlock: string;
+  comment: string;
+  'comment-alt': string;
+  heart: string;
+  github: string;
+  gitlab: string;
+  bitbucket: string;
+  forgejo: string;
+  codePen: string;
+  farcaster: string;
+  discord: string;
+  gitter: string;
+  twitter: string;
+  'x.com': string;
+  mastodon: string;
+  codeberg: string;
+  youtube: string;
+  threads: string;
+  linkedin: string;
+  twitch: string;
+  azureDevOps: string;
+  microsoftTeams: string;
+  instagram: string;
+  stackOverflow: string;
+  telegram: string;
+  whatsApp: string;
+  rss: string;
+  facebook: string;
+  email: string;
+  phone: string;
+  reddit: string;
+  patreon: string;
+  signal: string;
+  slack: string;
+  matrix: string;
+  hackerOne: string;
+  openCollective: string;
+  blueSky: string;
+  discourse: string;
+  zulip: string;
+  pinterest: string;
+  tiktok: string;
+  goodreads: string;
+  hypothesis: string;
+  astro: string;
+  solidjs: string;
+  alpine: string;
+  pnpm: string;
+  biome: string;
+  bun: string;
+  mdx: string;
+  apple: string;
+  linux: string;
+  homebrew: string;
+  nix: string;
+  starlight: string;
+  pkl: string;
+  node: string;
+  cloudflare: string;
+  vercel: string;
+  netlify: string;
+  deno: string;
+  jsr: string;
+  nostr: string;
+  backstage: string;
+  confluence: string;
+  jira: string;
+  storybook: string;
+  vscode: string;
+  jetbrains: string;
+  zed: string;
+  vim: string;
+  figma: string;
+  sketch: string;
+  npm: string;
+  npmx: string;
+  sourcehut: string;
+  substack: string;
+  chrome: string;
+  edge: string;
+  firefox: string;
+  safari: string;
+};
+type BuiltInIcon = 'up-caret' | 'down-caret' | 'right-caret' | 'left-caret' | 'up-arrow' | 'down-arrow' | 'right-arrow' | 'left-arrow' | 'bars' | 'translate' | 'pencil' | 'pen' | 'document' | 'add-document' | 'setting' | 'link' | 'link-alt' | 'external' | 'download' | 'cloud-download' | 'moon' | 'sun' | 'clock' | 'laptop' | 'desktop' | 'mobile-android' | 'window' | 'database' | 'server' | 'code-branch' | 'open-book' | 'notes' | 'information' | 'magnifier' | 'forward-slash' | 'close' | 'error' | 'warning' | 'approve-check-circle' | 'approve-check' | 'question-circle' | 'question' | 'rocket' | 'star' | 'puzzle' | 'list-format' | 'analytics' | 'random' | 'padlock' | 'comment' | 'comment-alt' | 'heart' | 'github' | 'gitlab' | 'bitbucket' | 'forgejo' | 'codePen' | 'farcaster' | 'discord' | 'gitter' | 'twitter' | 'x.com' | 'mastodon' | 'codeberg' | 'youtube' | 'threads' | 'linkedin' | 'twitch' | 'azureDevOps' | 'microsoftTeams' | 'instagram' | 'stackOverflow' | 'telegram' | 'whatsApp' | 'rss' | 'facebook' | 'email' | 'phone' | 'reddit' | 'patreon' | 'signal' | 'slack' | 'matrix' | 'hackerOne' | 'openCollective' | 'blueSky' | 'discourse' | 'zulip' | 'pinterest' | 'tiktok' | 'goodreads' | 'hypothesis' | 'astro' | 'solidjs' | 'alpine' | 'pnpm' | 'biome' | 'bun' | 'mdx' | 'apple' | 'linux' | 'homebrew' | 'nix' | 'starlight' | 'pkl' | 'node' | 'cloudflare' | 'vercel' | 'netlify' | 'deno' | 'jsr' | 'nostr' | 'backstage' | 'confluence' | 'jira' | 'storybook' | 'vscode' | 'jetbrains' | 'zed' | 'vim' | 'figma' | 'sketch' | 'npm' | 'npmx' | 'sourcehut' | 'substack' | 'chrome' | 'edge' | 'firefox' | 'safari';
+declare const Icons: {
+  'seti:folder': string;
+  'seti:bsl': string;
+  'seti:mdo': string;
+  'seti:salesforce': string;
+  'seti:asm': string;
+  'seti:bicep': string;
+  'seti:bazel': string;
+  'seti:c': string;
+  'seti:c-sharp': string;
+  'seti:html': string;
+  'seti:cpp': string;
+  'seti:clojure': string;
+  'seti:coldfusion': string;
+  'seti:config': string;
+  'seti:crystal': string;
+  'seti:crystal_embedded': string;
+  'seti:json': string;
+  'seti:css': string;
+  'seti:csv': string;
+  'seti:xls': string;
+  'seti:cu': string;
+  'seti:cake': string;
+  'seti:cake_php': string;
+  'seti:d': string;
+  'seti:word': string;
+  'seti:elixir': string;
+  'seti:elixir_script': string;
+  'seti:hex': string;
+  'seti:elm': string;
+  'seti:favicon': string;
+  'seti:f-sharp': string;
+  'seti:git': string;
+  'seti:go': string;
+  'seti:godot': string;
+  'seti:gradle': string;
+  'seti:grails': string;
+  'seti:graphql': string;
+  'seti:hacklang': string;
+  'seti:haml': string;
+  'seti:mustache': string;
+  'seti:haskell': string;
+  'seti:haxe': string;
+  'seti:jade': string;
+  'seti:java': string;
+  'seti:javascript': string;
+  'seti:jinja': string;
+  'seti:julia': string;
+  'seti:karma': string;
+  'seti:kotlin': string;
+  'seti:dart': string;
+  'seti:liquid': string;
+  'seti:livescript': string;
+  'seti:lua': string;
+  'seti:markdown': string;
+  'seti:argdown': string;
+  'seti:info': string;
+  'seti:clock': string;
+  'seti:maven': string;
+  'seti:nim': string;
+  'seti:github': string;
+  'seti:notebook': string;
+  'seti:nunjucks': string;
+  'seti:npm': string;
+  'seti:ocaml': string;
+  'seti:odata': string;
+  'seti:perl': string;
+  'seti:php': string;
+  'seti:pipeline': string;
+  'seti:pddl': string;
+  'seti:plan': string;
+  'seti:happenings': string;
+  'seti:powershell': string;
+  'seti:prisma': string;
+  'seti:pug': string;
+  'seti:puppet': string;
+  'seti:purescript': string;
+  'seti:python': string;
+  'seti:react': string;
+  'seti:rescript': string;
+  'seti:R': string;
+  'seti:ruby': string;
+  'seti:rust': string;
+  'seti:sass': string;
+  'seti:spring': string;
+  'seti:slim': string;
+  'seti:smarty': string;
+  'seti:sbt': string;
+  'seti:scala': string;
+  'seti:ethereum': string;
+  'seti:stylus': string;
+  'seti:svelte': string;
+  'seti:swift': string;
+  'seti:db': string;
+  'seti:terraform': string;
+  'seti:tex': string;
+  'seti:default': string;
+  'seti:twig': string;
+  'seti:typescript': string;
+  'seti:tsconfig': string;
+  'seti:vala': string;
+  'seti:vite': string;
+  'seti:vue': string;
+  'seti:wasm': string;
+  'seti:wat': string;
+  'seti:xml': string;
+  'seti:yml': string;
+  'seti:prolog': string;
+  'seti:zig': string;
+  'seti:zip': string;
+  'seti:wgt': string;
+  'seti:illustrator': string;
+  'seti:photoshop': string;
+  'seti:pdf': string;
+  'seti:font': string;
+  'seti:image': string;
+  'seti:svg': string;
+  'seti:sublime': string;
+  'seti:code-search': string;
+  'seti:shell': string;
+  'seti:video': string;
+  'seti:audio': string;
+  'seti:windows': string;
+  'seti:jenkins': string;
+  'seti:babel': string;
+  'seti:bower': string;
+  'seti:docker': string;
+  'seti:code-climate': string;
+  'seti:eslint': string;
+  'seti:firebase': string;
+  'seti:firefox': string;
+  'seti:gitlab': string;
+  'seti:grunt': string;
+  'seti:gulp': string;
+  'seti:ionic': string;
+  'seti:platformio': string;
+  'seti:rollup': string;
+  'seti:stylelint': string;
+  'seti:yarn': string;
+  'seti:webpack': string;
+  'seti:lock': string;
+  'seti:license': string;
+  'seti:makefile': string;
+  'seti:heroku': string;
+  'seti:todo': string;
+  'seti:ignored': string;
+  'up-caret': string;
+  'down-caret': string;
+  'right-caret': string;
+  'left-caret': string;
+  'up-arrow': string;
+  'down-arrow': string;
+  'right-arrow': string;
+  'left-arrow': string;
+  bars: string;
+  translate: string;
+  pencil: string;
+  pen: string;
+  document: string;
+  'add-document': string;
+  setting: string;
+  link: string;
+  'link-alt': string;
+  external: string;
+  download: string;
+  'cloud-download': string;
+  moon: string;
+  sun: string;
+  clock: string;
+  laptop: string;
+  desktop: string;
+  'mobile-android': string;
+  window: string;
+  database: string;
+  server: string;
+  'code-branch': string;
+  'open-book': string;
+  notes: string;
+  information: string;
+  magnifier: string;
+  'forward-slash': string;
+  close: string;
+  error: string;
+  warning: string;
+  'approve-check-circle': string;
+  'approve-check': string;
+  'question-circle': string;
+  question: string;
+  rocket: string;
+  star: string;
+  puzzle: string;
+  'list-format': string;
+  analytics: string;
+  random: string;
+  padlock: string;
+  comment: string;
+  'comment-alt': string;
+  heart: string;
+  github: string;
+  gitlab: string;
+  bitbucket: string;
+  forgejo: string;
+  codePen: string;
+  farcaster: string;
+  discord: string;
+  gitter: string;
+  twitter: string;
+  'x.com': string;
+  mastodon: string;
+  codeberg: string;
+  youtube: string;
+  threads: string;
+  linkedin: string;
+  twitch: string;
+  azureDevOps: string;
+  microsoftTeams: string;
+  instagram: string;
+  stackOverflow: string;
+  telegram: string;
+  whatsApp: string;
+  rss: string;
+  facebook: string;
+  email: string;
+  phone: string;
+  reddit: string;
+  patreon: string;
+  signal: string;
+  slack: string;
+  matrix: string;
+  hackerOne: string;
+  openCollective: string;
+  blueSky: string;
+  discourse: string;
+  zulip: string;
+  pinterest: string;
+  tiktok: string;
+  goodreads: string;
+  hypothesis: string;
+  astro: string;
+  solidjs: string;
+  alpine: string;
+  pnpm: string;
+  biome: string;
+  bun: string;
+  mdx: string;
+  apple: string;
+  linux: string;
+  homebrew: string;
+  nix: string;
+  starlight: string;
+  pkl: string;
+  node: string;
+  cloudflare: string;
+  vercel: string;
+  netlify: string;
+  deno: string;
+  jsr: string;
+  nostr: string;
+  backstage: string;
+  confluence: string;
+  jira: string;
+  storybook: string;
+  vscode: string;
+  jetbrains: string;
+  zed: string;
+  vim: string;
+  figma: string;
+  sketch: string;
+  npm: string;
+  npmx: string;
+  sourcehut: string;
+  substack: string;
+  chrome: string;
+  edge: string;
+  firefox: string;
+  safari: string;
+};
+type StarlightIcon = BuiltInIcon | FileIcon;
+//#endregion
+export { BuiltInIcon, BuiltInIcons, Icons, StarlightIcon };