@astrojs/starlight 0.33.1 → 0.34.0

package/translations/fr.json

@@ -28,5 +28,6 @@
   "expressiveCode.copyButtonTooltip": "Copier dans le presse-papiers",
   "expressiveCode.terminalWindowFallbackTitle": "Fenêtre de terminal",
   "fileTree.directory": "Répertoire",
-  "builtWithStarlight.label": "Créé avec Starlight"
+  "builtWithStarlight.label": "Créé avec Starlight",
+  "heading.anchorLabel": "Section intitulée « {{title}} »"
 }

package/translations/gl.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/he.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/hi.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/id.json

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

package/translations/it.json

@@ -25,5 +25,6 @@
   "aside.caution": "Attenzione",
   "aside.danger": "Pericolo",
   "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Built with Starlight",
+  "heading.anchorLabel": "Sezione intitolata “{{title}}”"
 }

package/translations/ja.json

@@ -25,5 +25,6 @@
   "aside.caution": "注意",
   "aside.danger": "危険",
   "fileTree.directory": "ディレクトリ",
-  "builtWithStarlight.label": "Starlightで作成"
+  "builtWithStarlight.label": "Starlightで作成",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/ko.json

@@ -25,5 +25,6 @@
   "aside.caution": "주의",
   "aside.danger": "위험",
   "fileTree.directory": "디렉터리",
-  "builtWithStarlight.label": "Starlight로 제작됨"
+  "builtWithStarlight.label": "Starlight로 제작됨",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/lv.json

@@ -25,5 +25,6 @@
   "aside.caution": "Uzmanību",
   "aside.danger": "Bīstamība",
   "fileTree.directory": "Direktorija",
-  "builtWithStarlight.label": "Veidots ar Starlight"
+  "builtWithStarlight.label": "Veidots ar Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/nb.json

@@ -25,5 +25,6 @@
   "aside.caution": "Advarsel",
   "aside.danger": "Fare",
   "fileTree.directory": "Mappe",
-  "builtWithStarlight.label": "Laget med Starlight"
+  "builtWithStarlight.label": "Laget med Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/nl.json

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

package/translations/pl.json

@@ -28,5 +28,6 @@
   "expressiveCode.copyButtonCopied": "Skopiowane!",
   "expressiveCode.copyButtonTooltip": "Skopiuj do schowka",
   "expressiveCode.terminalWindowFallbackTitle": "Okno terminala",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Built with Starlight",
+  "heading.anchorLabel": "Dział zatytułowany „{{title}}”"
 }

package/translations/pt.json

@@ -25,5 +25,6 @@
   "aside.caution": "Cuidado",
   "aside.danger": "Perigo",
   "fileTree.directory": "Directory",
-  "builtWithStarlight.label": "Feito com Starlight"
+  "builtWithStarlight.label": "Feito com Starlight",
+  "heading.anchorLabel": "Seção intitulada “{{title}}”"
 }

package/translations/ro.json

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

package/translations/ru.json

@@ -28,5 +28,6 @@
   "expressiveCode.copyButtonCopied": "Скопировано!",
   "expressiveCode.copyButtonTooltip": "Копировать",
   "expressiveCode.terminalWindowFallbackTitle": "Окно терминала",
-  "builtWithStarlight.label": "Сделано с помощью Starlight"
+  "builtWithStarlight.label": "Сделано с помощью Starlight",
+  "heading.anchorLabel": "Заголовок раздела «{{title}}»"
 }

package/translations/sk.json

@@ -25,5 +25,6 @@
   "aside.caution": "Upozornenie",
   "aside.danger": "Nebezpečenstvo",
   "fileTree.directory": "Adresár",
-  "builtWithStarlight.label": "Postavené so Starlight"
+  "builtWithStarlight.label": "Postavené so Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/sv.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/tr.json

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

package/translations/uk.json

@@ -25,5 +25,6 @@
   "aside.caution": "Обережно",
   "aside.danger": "Небезпечно",
   "fileTree.directory": "Каталог",
-  "builtWithStarlight.label": "Створено з Starlight"
+  "builtWithStarlight.label": "Створено з Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/vi.json

@@ -25,5 +25,6 @@
   "aside.caution": "Thận trọng",
   "aside.danger": "Nguy hiểm",
   "fileTree.directory": "Danh mục",
-  "builtWithStarlight.label": "Tạo với Starlight"
+  "builtWithStarlight.label": "Tạo với Starlight",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/zh-CN.json

@@ -25,5 +25,6 @@
   "aside.caution": "警告",
   "aside.danger": "危险",
   "fileTree.directory": "文件夹",
-  "builtWithStarlight.label": "基于 Starlight 构建"
+  "builtWithStarlight.label": "基于 Starlight 构建",
+  "heading.anchorLabel": "Section titled “{{title}}”"
 }

package/translations/zh-TW.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}}”"
 }

package/user-components/Badge.astro

@@ -26,121 +26,123 @@ const {
 <><span class:list={['sl-badge', variant, size, customClass]} {...attrs}>{text}</span></>
 
 <style>
-	:global(:root) {
-		--sl-badge-default-border: var(--sl-color-accent);
-		--sl-badge-default-bg: var(--sl-color-accent-low);
-		--sl-badge-default-text: #fff;
-
-		--sl-badge-note-border: var(--sl-color-blue);
-		--sl-badge-note-bg: var(--sl-color-blue-low);
-		--sl-badge-note-text: #fff;
-
-		--sl-badge-danger-border: var(--sl-color-red);
-		--sl-badge-danger-bg: var(--sl-color-red-low);
-		--sl-badge-danger-text: #fff;
-
-		--sl-badge-success-border: var(--sl-color-green);
-		--sl-badge-success-bg: var(--sl-color-green-low);
-		--sl-badge-success-text: #fff;
-
-		--sl-badge-caution-border: var(--sl-color-orange);
-		--sl-badge-caution-bg: var(--sl-color-orange-low);
-		--sl-badge-caution-text: #fff;
-
-		--sl-badge-tip-border: var(--sl-color-purple);
-		--sl-badge-tip-bg: var(--sl-color-purple-low);
-		--sl-badge-tip-text: #fff;
-	}
-
-	:global([data-theme='light']:root) {
-		--sl-badge-default-bg: var(--sl-color-accent-high);
-		--sl-badge-note-bg: var(--sl-color-blue-high);
-		--sl-badge-danger-bg: var(--sl-color-red-high);
-		--sl-badge-success-bg: var(--sl-color-green-high);
-		--sl-badge-caution-bg: var(--sl-color-orange-high);
-		--sl-badge-tip-bg: var(--sl-color-purple-high);
-	}
-
-	.sl-badge {
-		display: inline-block;
-		border: 1px solid var(--sl-color-border-badge);
-		border-radius: 0.25rem;
-		font-family: var(--sl-font-system-mono);
-		line-height: normal;
-		color: var(--sl-color-text-badge);
-		background-color: var(--sl-color-bg-badge);
-		overflow-wrap: anywhere;
-	}
-
-	/* Sidebar overrides */
-	:global(.sidebar-content) .sl-badge {
-		line-height: 1;
-		font-size: var(--sl-text-xs);
-		padding: 0.125rem 0.375rem;
-	}
-
-	/* outline variant */
-	:global(.sidebar-content a[aria-current='page']) > .sl-badge {
-		--sl-color-bg-badge: transparent;
-		--sl-color-border-badge: currentColor;
-		color: inherit;
-	}
-
-	/* Color variants */
-	.default {
-		--sl-color-bg-badge: var(--sl-badge-default-bg);
-		--sl-color-border-badge: var(--sl-badge-default-border);
-		--sl-color-text-badge: var(--sl-badge-default-text);
-	}
-
-	.note {
-		--sl-color-bg-badge: var(--sl-badge-note-bg);
-		--sl-color-border-badge: var(--sl-badge-note-border);
-		--sl-color-text-badge: var(--sl-badge-note-text);
-	}
-
-	.danger {
-		--sl-color-bg-badge: var(--sl-badge-danger-bg);
-		--sl-color-border-badge: var(--sl-badge-danger-border);
-		--sl-color-text-badge: var(--sl-badge-danger-text);
-	}
-
-	.success {
-		--sl-color-bg-badge: var(--sl-badge-success-bg);
-		--sl-color-border-badge: var(--sl-badge-success-border);
-		--sl-color-text-badge: var(--sl-badge-success-text);
-	}
-
-	.tip {
-		--sl-color-bg-badge: var(--sl-badge-tip-bg);
-		--sl-color-border-badge: var(--sl-badge-tip-border);
-		--sl-color-text-badge: var(--sl-badge-tip-text);
-	}
-
-	.caution {
-		--sl-color-bg-badge: var(--sl-badge-caution-bg);
-		--sl-color-border-badge: var(--sl-badge-caution-border);
-		--sl-color-text-badge: var(--sl-badge-caution-text);
-	}
-
-	/* Size variants */
-	.small {
-		font-size: var(--sl-text-xs);
-		padding: 0.125rem 0.25rem;
-	}
-
-	.medium {
-		font-size: var(--sl-text-sm);
-		padding: 0.175rem 0.35rem;
-	}
-
-	.large {
-		font-size: var(--sl-text-base);
-		padding: 0.225rem 0.45rem;
-	}
-
-	/* Badge in headings */
-	:global(.sl-markdown-content :is(h1, h2, h3, h4, h5, h6)) .sl-badge {
-		vertical-align: middle;
+	@layer starlight.components {
+		:global(:root) {
+			--sl-badge-default-border: var(--sl-color-accent);
+			--sl-badge-default-bg: var(--sl-color-accent-low);
+			--sl-badge-default-text: #fff;
+
+			--sl-badge-note-border: var(--sl-color-blue);
+			--sl-badge-note-bg: var(--sl-color-blue-low);
+			--sl-badge-note-text: #fff;
+
+			--sl-badge-danger-border: var(--sl-color-red);
+			--sl-badge-danger-bg: var(--sl-color-red-low);
+			--sl-badge-danger-text: #fff;
+
+			--sl-badge-success-border: var(--sl-color-green);
+			--sl-badge-success-bg: var(--sl-color-green-low);
+			--sl-badge-success-text: #fff;
+
+			--sl-badge-caution-border: var(--sl-color-orange);
+			--sl-badge-caution-bg: var(--sl-color-orange-low);
+			--sl-badge-caution-text: #fff;
+
+			--sl-badge-tip-border: var(--sl-color-purple);
+			--sl-badge-tip-bg: var(--sl-color-purple-low);
+			--sl-badge-tip-text: #fff;
+		}
+
+		:global([data-theme='light']:root) {
+			--sl-badge-default-bg: var(--sl-color-accent-high);
+			--sl-badge-note-bg: var(--sl-color-blue-high);
+			--sl-badge-danger-bg: var(--sl-color-red-high);
+			--sl-badge-success-bg: var(--sl-color-green-high);
+			--sl-badge-caution-bg: var(--sl-color-orange-high);
+			--sl-badge-tip-bg: var(--sl-color-purple-high);
+		}
+
+		.sl-badge {
+			display: inline-block;
+			border: 1px solid var(--sl-color-border-badge);
+			border-radius: 0.25rem;
+			font-family: var(--sl-font-system-mono);
+			line-height: normal;
+			color: var(--sl-color-text-badge);
+			background-color: var(--sl-color-bg-badge);
+			overflow-wrap: anywhere;
+		}
+
+		/* Sidebar overrides */
+		:global(.sidebar-content) .sl-badge {
+			line-height: 1;
+			font-size: var(--sl-text-xs);
+			padding: 0.125rem 0.375rem;
+		}
+
+		/* outline variant */
+		:global(.sidebar-content a[aria-current='page']) > .sl-badge {
+			--sl-color-bg-badge: transparent;
+			--sl-color-border-badge: currentColor;
+			color: inherit;
+		}
+
+		/* Color variants */
+		.default {
+			--sl-color-bg-badge: var(--sl-badge-default-bg);
+			--sl-color-border-badge: var(--sl-badge-default-border);
+			--sl-color-text-badge: var(--sl-badge-default-text);
+		}
+
+		.note {
+			--sl-color-bg-badge: var(--sl-badge-note-bg);
+			--sl-color-border-badge: var(--sl-badge-note-border);
+			--sl-color-text-badge: var(--sl-badge-note-text);
+		}
+
+		.danger {
+			--sl-color-bg-badge: var(--sl-badge-danger-bg);
+			--sl-color-border-badge: var(--sl-badge-danger-border);
+			--sl-color-text-badge: var(--sl-badge-danger-text);
+		}
+
+		.success {
+			--sl-color-bg-badge: var(--sl-badge-success-bg);
+			--sl-color-border-badge: var(--sl-badge-success-border);
+			--sl-color-text-badge: var(--sl-badge-success-text);
+		}
+
+		.tip {
+			--sl-color-bg-badge: var(--sl-badge-tip-bg);
+			--sl-color-border-badge: var(--sl-badge-tip-border);
+			--sl-color-text-badge: var(--sl-badge-tip-text);
+		}
+
+		.caution {
+			--sl-color-bg-badge: var(--sl-badge-caution-bg);
+			--sl-color-border-badge: var(--sl-badge-caution-border);
+			--sl-color-text-badge: var(--sl-badge-caution-text);
+		}
+
+		/* Size variants */
+		.small {
+			font-size: var(--sl-text-xs);
+			padding: 0.125rem 0.25rem;
+		}
+
+		.medium {
+			font-size: var(--sl-text-sm);
+			padding: 0.175rem 0.35rem;
+		}
+
+		.large {
+			font-size: var(--sl-text-base);
+			padding: 0.225rem 0.45rem;
+		}
+
+		/* Badge in headings */
+		:global(.sl-markdown-content :is(h1, h2, h3, h4, h5, h6)) .sl-badge {
+			vertical-align: middle;
+		}
 	}
 </style>

package/user-components/Card.astro

@@ -19,47 +19,49 @@ const { icon, title } = Astro.props;
 </article>
 
 <style>
-	.card {
-		--sl-card-border: var(--sl-color-purple);
-		--sl-card-bg: var(--sl-color-purple-low);
-		border: 1px solid var(--sl-color-gray-5);
-		background-color: var(--sl-color-black);
-		padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
-		flex-direction: column;
-		gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
-	}
-	.card:nth-child(4n + 1) {
-		--sl-card-border: var(--sl-color-orange);
-		--sl-card-bg: var(--sl-color-orange-low);
-	}
-	.card:nth-child(4n + 3) {
-		--sl-card-border: var(--sl-color-green);
-		--sl-card-bg: var(--sl-color-green-low);
-	}
-	.card:nth-child(4n + 4) {
-		--sl-card-border: var(--sl-color-red);
-		--sl-card-bg: var(--sl-color-red-low);
-	}
-	.card:nth-child(4n + 5) {
-		--sl-card-border: var(--sl-color-blue);
-		--sl-card-bg: var(--sl-color-blue-low);
-	}
-	.title {
-		font-weight: 600;
-		font-size: var(--sl-text-h4);
-		color: var(--sl-color-white);
-		line-height: var(--sl-line-height-headings);
-		gap: 1rem;
-		align-items: center;
-	}
-	.card .icon {
-		border: 1px solid var(--sl-card-border);
-		background-color: var(--sl-card-bg);
-		padding: 0.2em;
-		border-radius: 0.25rem;
-	}
-	.card .body {
-		margin: 0;
-		font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+	@layer starlight.components {
+		.card {
+			--sl-card-border: var(--sl-color-purple);
+			--sl-card-bg: var(--sl-color-purple-low);
+			border: 1px solid var(--sl-color-gray-5);
+			background-color: var(--sl-color-black);
+			padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+			flex-direction: column;
+			gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+		}
+		.card:nth-child(4n + 1) {
+			--sl-card-border: var(--sl-color-orange);
+			--sl-card-bg: var(--sl-color-orange-low);
+		}
+		.card:nth-child(4n + 3) {
+			--sl-card-border: var(--sl-color-green);
+			--sl-card-bg: var(--sl-color-green-low);
+		}
+		.card:nth-child(4n + 4) {
+			--sl-card-border: var(--sl-color-red);
+			--sl-card-bg: var(--sl-color-red-low);
+		}
+		.card:nth-child(4n + 5) {
+			--sl-card-border: var(--sl-color-blue);
+			--sl-card-bg: var(--sl-color-blue-low);
+		}
+		.title {
+			font-weight: 600;
+			font-size: var(--sl-text-h4);
+			color: var(--sl-color-white);
+			line-height: var(--sl-line-height-headings);
+			gap: 1rem;
+			align-items: center;
+		}
+		.card .icon {
+			border: 1px solid var(--sl-card-border);
+			background-color: var(--sl-card-bg);
+			padding: 0.2em;
+			border-radius: 0.25rem;
+		}
+		.card .body {
+			margin: 0;
+			font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+		}
 	}
 </style>

package/user-components/CardGrid.astro

@@ -9,28 +9,30 @@ const { stagger = false } = Astro.props;
 <div class:list={['card-grid', { stagger }]}><slot /></div>
 
 <style>
-	.card-grid {
-		display: grid;
-		grid-template-columns: 100%;
-		gap: 1rem;
-	}
-
-	.card-grid > :global(*) {
-		margin-top: 0 !important;
-	}
-
-	@media (min-width: 50rem) {
+	@layer starlight.components {
 		.card-grid {
-			grid-template-columns: 1fr 1fr;
-			gap: 1.5rem;
+			display: grid;
+			grid-template-columns: 100%;
+			gap: 1rem;
 		}
-		.stagger {
-			--stagger-height: 5rem;
-			padding-bottom: var(--stagger-height);
+
+		.card-grid > :global(*) {
+			margin-top: 0 !important;
 		}
 
-		.stagger > :global(*):nth-child(2n) {
-			transform: translateY(var(--stagger-height));
+		@media (min-width: 50rem) {
+			.card-grid {
+				grid-template-columns: 1fr 1fr;
+				gap: 1.5rem;
+			}
+			.stagger {
+				--stagger-height: 5rem;
+				padding-bottom: var(--stagger-height);
+			}
+
+			.stagger > :global(*):nth-child(2n) {
+				transform: translateY(var(--stagger-height));
+			}
 		}
 	}
 </style>