@astrojs/starlight 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @astrojs/starlight
 
+## 0.21.0
+
+### Minor Changes
+
+- [#1568](https://github.com/withastro/starlight/pull/1568) [`5f99a71d`](https://github.com/withastro/starlight/commit/5f99a71ddfe92568b1cd3c0bfe5ebfd139797c1a) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds support for optionally setting an icon on a `<TabItem>` component to make it easier to visually distinguish between tabs.
+
+- [#1308](https://github.com/withastro/starlight/pull/1308) [`9a918a5b`](https://github.com/withastro/starlight/commit/9a918a5b4902f43729f4d023257772710af3a12b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds `<FileTree>` component to display the structure of a directory.
+
+- [#1308](https://github.com/withastro/starlight/pull/1308) [`9a918a5b`](https://github.com/withastro/starlight/commit/9a918a5b4902f43729f4d023257772710af3a12b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds 144 new file-type icons from the [Seti UI icon set](https://github.com/jesseweed/seti-ui#current-icons), available with the `seti:` prefix, e.g. `seti:javascript`.
+
+- [#1564](https://github.com/withastro/starlight/pull/1564) [`d880065e`](https://github.com/withastro/starlight/commit/d880065e29a632823a08adcb6158a59fd9557270) Thanks [@delucis](https://github.com/delucis)! - Adds a `<Steps>` component for styling more complex guided tasks.
+
+- [#1308](https://github.com/withastro/starlight/pull/1308) [`9a918a5b`](https://github.com/withastro/starlight/commit/9a918a5b4902f43729f4d023257772710af3a12b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds 5 new icons: `astro`, `biome`, `bun`, `mdx`, and `pnpm`.
+
 ## 0.20.1
 
 ### Patch Changes

package/components/Icons.ts

@@ -1,4 +1,6 @@
-export const Icons = {
+import { FileIcons } from '../user-components/file-tree-icons';
+
+export const BuiltInIcons = {
 	'up-caret':
 		'<path d="m17 13.41-4.29-4.24a.999.999 0 0 0-1.42 0l-4.24 4.24a1 1 0 1 0 1.41 1.42L12 11.29l3.54 3.54a1 1 0 0 0 1.41 0 1 1 0 0 0 .05-1.42Z"/>',
 	'down-caret':
@@ -105,4 +107,16 @@ export const Icons = {
 		'<path d="M22.5 1.5v21h-2.25V24H24V0h-3.75v1.5h2.25ZM7.46 7.95V9.1h.04a3.02 3.02 0 0 1 2.61-1.39c.54 0 1.03.1 1.48.32.44.2.78.58 1.01 1.1.26-.37.6-.7 1.03-.99.44-.28.95-.43 1.55-.43.45 0 .87.06 1.26.17.38.11.71.29.99.53.27.24.49.56.64.95.15.4.23.86.23 1.42v5.72h-2.34v-4.85c0-.29-.01-.56-.04-.8a1.73 1.73 0 0 0-.18-.67 1.1 1.1 0 0 0-.44-.45 1.6 1.6 0 0 0-.78-.16c-.33 0-.6.06-.8.19-.2.12-.37.29-.48.5a2 2 0 0 0-.23.69c-.04.26-.06.52-.06.78v4.77H10.6v-4.8l-.01-.75a2.29 2.29 0 0 0-.14-.69c-.08-.2-.23-.38-.42-.5a1.5 1.5 0 0 0-.85-.2c-.15.01-.3.04-.44.08-.19.06-.37.15-.52.28-.18.14-.32.34-.44.6-.12.26-.18.6-.18 1.02v4.96H5.25V7.94h2.21ZM1.5 1.5v21h2.25V24H0V0h3.75v1.5H1.5Z"/>',
 	openCollective:
 		'<path d="M21.86 5.17a11.94 11.94 0 0 1 0 13.66l-3.1-3.1a7.68 7.68 0 0 0 0-7.46l3.1-3.1Zm-3.03-3.03-3.1 3.1a7.71 7.71 0 1 0 0 13.51l3.1 3.11a12 12 0 1 1 0-19.73Z"/><path d="M21.86 5.17a11.94 11.94 0 0 1 0 13.66l-3.1-3.1a7.68 7.68 0 0 0 0-7.46l3.1-3.1Z"/>',
+	astro:
+		'<path d="M7.233 15.856c-.456 1.5-.132 3.586.948 4.57v-.036l.036-.096c.132-.636.648-1.032 1.309-1.008.612.012.96.336 1.044 1.044.036.264.036.528.048.803v.084c0 .6.168 1.176.504 1.68.3.48.72.851 1.284 1.103l-.024-.048-.024-.096c-.42-1.26-.12-2.135.984-2.879l.336-.227.745-.492a3.647 3.647 0 0 0 1.536-2.603c.06-.456 0-.9-.132-1.331l-.18.12c-1.668.887-3.577 1.2-5.425.84-1.117-.169-2.197-.48-3-1.416l.011-.012ZM2 15.592s3.205-1.559 6.421-1.559l2.437-7.508c.084-.36.348-.6.648-.6.3 0 .552.24.648.612l2.425 7.496c3.816 0 6.421 1.56 6.421 1.56L15.539.72c-.144-.444-.42-.72-.768-.72H8.24c-.348 0-.6.276-.768.72L2 15.592Z"/>',
+	pnpm: '<path d="M0 0v7.5h7.5V0H0Zm8.25 0v7.5h7.498V0H8.25Zm8.25 0v7.5H24V0h-7.5ZM8.25 8.25v7.5h7.498v-7.5H8.25Zm8.25 0v7.5H24v-7.5h-7.5ZM0 16.5V24h7.5v-7.5H0Zm8.25 0V24h7.498v-7.5H8.25Zm8.25 0V24H24v-7.5h-7.5Z"/>',
+	biome:
+		'<path d="m12 2-5.346 9.259a12.065 12.065 0 0 1 6.326-.22l1.807.427-1.7 7.208-1.81-.427c-2.223-.524-4.36.644-5.263 2.507l-1.672-.809c1.276-2.636 4.284-4.232 7.363-3.505l.848-3.593A10.213 10.213 0 0 0 0 22.785h24L12 2Z"/>',
+	bun: '<path d="M11.966 22.132c6.609 0 11.966-4.326 11.966-9.661 0-3.308-2.051-6.23-5.204-7.963-1.283-.713-2.291-1.353-3.13-1.885C14.018 1.619 13.043 1 11.966 1c-1.094 0-2.327.783-3.955 1.816a49.78 49.78 0 0 1-2.808 1.692C2.051 6.241 0 9.163 0 12.471c0 5.335 5.357 9.661 11.966 9.661Zm-1.397-17.83a5.885 5.885 0 0 0 .497-2.403c0-.144.201-.186.229-.028.656 2.775-.9 4.15-2.051 4.61-.124.048-.199-.12-.103-.208a5.747 5.747 0 0 0 1.428-1.971Zm2.052-.102a5.795 5.795 0 0 0-.78-2.3v-.015c-.068-.123.086-.263.185-.172 1.956 2.105 1.303 4.055.554 5.037-.082.102-.229-.003-.188-.126a5.837 5.837 0 0 0 .229-2.424Zm1.771-.559a5.709 5.709 0 0 0-1.607-1.801v-.014c-.112-.085-.024-.274.113-.218 2.588 1.084 2.766 3.171 2.452 4.395a.116.116 0 0 1-.13.09.11.11 0 0 1-.071-.045.118.118 0 0 1-.022-.083 5.863 5.863 0 0 0-.735-2.324ZM9.32 4.2c-.616.544-1.279.758-2.058.997-.116 0-.194-.078-.155-.18 1.747-.907 2.369-1.645 2.99-2.771 0 0 .155-.117.188.085 0 .303-.348 1.325-.965 1.869Zm4.931 11.205a2.95 2.95 0 0 1-.935 1.549 2.16 2.16 0 0 1-1.282.618 2.167 2.167 0 0 1-1.323-.618 2.95 2.95 0 0 1-.923-1.549.243.243 0 0 1 .064-.197.23.23 0 0 1 .192-.069h3.954a.227.227 0 0 1 .244.16c.01.035.014.07.009.106Zm-5.443-2.17a1.85 1.85 0 0 1-2.377-.244 1.969 1.969 0 0 1-.233-2.44c.207-.318.502-.565.846-.711a1.84 1.84 0 0 1 2.053.42c.264.27.443.616.515.99a1.98 1.98 0 0 1-.108 1.118c-.142.35-.384.653-.696.867Zm8.471.005a1.85 1.85 0 0 1-2.374-.252 1.956 1.956 0 0 1-.546-1.362c0-.383.11-.758.319-1.076.207-.318.502-.566.847-.711a1.84 1.84 0 0 1 1.09-.108c.366.076.702.261.965.533s.44.617.512.993a1.98 1.98 0 0 1-.113 1.118 1.922 1.922 0 0 1-.7.865Z"/>',
+	mdx: '<path d="m15.494 12.406-3.169 3.169-3.25-3.169.894-.894 1.706 1.707V8.588h1.219V13.3l1.706-1.706.894.812Zm-13.65-.65 2.193 2.194 2.276-2.194v3.575H7.53v-6.58l-3.494 3.493L.625 8.75v6.581h1.219v-3.575ZM22.4 15.25l-2.519-2.519-2.518 2.519-.813-.894 2.519-2.518-2.6-2.6.893-.813 2.52 2.6 2.6-2.6.893.813-2.6 2.6 2.519 2.518-.894.894Z"/>',
+};
+
+export const Icons = {
+	...BuiltInIcons,
+	...FileIcons,
 };

package/components.ts

@@ -5,4 +5,6 @@ export { default as Icon } from './user-components/Icon.astro';
 export { default as Tabs } from './user-components/Tabs.astro';
 export { default as TabItem } from './user-components/TabItem.astro';
 export { default as LinkCard } from './user-components/LinkCard.astro';
+export { default as Steps } from './user-components/Steps.astro';
+export { default as FileTree } from './user-components/FileTree.astro';
 export { Code } from 'astro-expressive-code/components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -184,7 +184,9 @@
     "@types/mdast": "^4.0.3",
     "astro-expressive-code": "^0.33.4",
     "bcp-47": "^2.1.0",
+    "hast-util-from-html": "^2.0.1",
     "hast-util-select": "^6.0.2",
+    "hast-util-to-string": "^3.0.0",
     "hastscript": "^8.0.0",
     "mdast-util-directive": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",

package/schemas/i18n.ts

@@ -121,6 +121,10 @@ function starlightI18nSchema() {
 			'aside.note': z.string().describe('Text shown on the note aside variant'),
 			'aside.caution': z.string().describe('Text shown on the warning aside variant'),
 			'aside.danger': z.string().describe('Text shown on the danger aside variant'),
+
+			'fileTree.directory': z
+				.string()
+				.describe('Label for the directory icon in the file tree component.'),
 		})
 		.partial();
 }

package/translations/ar.json

@@ -22,5 +22,6 @@
   "aside.note": "ملحوظة",
   "aside.tip": "نصيحة",
   "aside.caution": "تنبيه",
-  "aside.danger": "تحذير"
+  "aside.danger": "تحذير",
+  "fileTree.directory": "Directory"
 }

package/translations/cs.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/da.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/de.json

@@ -22,5 +22,6 @@
   "aside.note": "Hinweis",
   "aside.tip": "Tipp",
   "aside.caution": "Achtung",
-  "aside.danger": "Gefahr"
+  "aside.danger": "Gefahr",
+  "fileTree.directory": "Directory"
 }

package/translations/en.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/es.json

@@ -25,5 +25,6 @@
   "aside.danger": "Peligro",
   "expressiveCode.copyButtonCopied": "¡Copiado!",
   "expressiveCode.copyButtonTooltip": "Copiar al portapapeles",
-  "expressiveCode.terminalWindowFallbackTitle": "Ventana de terminal"
+  "expressiveCode.terminalWindowFallbackTitle": "Ventana de terminal",
+  "fileTree.directory": "Directory"
 }

package/translations/fa.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/fr.json

@@ -25,5 +25,6 @@
   "aside.danger": "Danger",
   "expressiveCode.copyButtonCopied": "Copié !",
   "expressiveCode.copyButtonTooltip": "Copier dans le presse-papiers",
-  "expressiveCode.terminalWindowFallbackTitle": "Fenêtre de terminal"
+  "expressiveCode.terminalWindowFallbackTitle": "Fenêtre de terminal",
+  "fileTree.directory": "Directory"
 }

package/translations/gl.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/he.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/hi.json

@@ -22,5 +22,6 @@
   "aside.note": "टिप्पणी",
   "aside.tip": "संकेत",
   "aside.caution": "सावधानी",
-  "aside.danger": "खतरा"
+  "aside.danger": "खतरा",
+  "fileTree.directory": "Directory"
 }

package/translations/id.json

@@ -22,5 +22,6 @@
   "aside.note": "Catatan",
   "aside.tip": "Tips",
   "aside.caution": "Perhatian",
-  "aside.danger": "Bahaya"
+  "aside.danger": "Bahaya",
+  "fileTree.directory": "Directory"
 }

package/translations/it.json

@@ -22,5 +22,6 @@
   "aside.note": "Nota",
   "aside.tip": "Consiglio",
   "aside.caution": "Attenzione",
-  "aside.danger": "Pericolo"
+  "aside.danger": "Pericolo",
+  "fileTree.directory": "Directory"
 }

package/translations/ja.json

@@ -22,5 +22,6 @@
   "aside.note": "ノート",
   "aside.tip": "ヒント",
   "aside.caution": "注意",
-  "aside.danger": "危険"
+  "aside.danger": "危険",
+  "fileTree.directory": "Directory"
 }

package/translations/ko.json

@@ -22,5 +22,6 @@
   "aside.note": "노트",
   "aside.tip": "팁",
   "aside.caution": "주의",
-  "aside.danger": "위험"
+  "aside.danger": "위험",
+  "fileTree.directory": "Directory"
 }

package/translations/nb.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/nl.json

@@ -22,5 +22,6 @@
   "aside.note": "Opmerking",
   "aside.tip": "Tip",
   "aside.caution": "Opgepast",
-  "aside.danger": "Gevaar"
+  "aside.danger": "Gevaar",
+  "fileTree.directory": "Directory"
 }

package/translations/pt.json

@@ -22,5 +22,6 @@
   "aside.note": "Nota",
   "aside.tip": "Dica",
   "aside.caution": "Cuidado",
-  "aside.danger": "Perigo"
+  "aside.danger": "Perigo",
+  "fileTree.directory": "Directory"
 }

package/translations/ro.json

@@ -22,5 +22,6 @@
   "aside.note": "Mențiune",
   "aside.tip": "Sfat",
   "aside.caution": "Atenție",
-  "aside.danger": "Pericol"
+  "aside.danger": "Pericol",
+  "fileTree.directory": "Directory"
 }

package/translations/ru.json

@@ -22,5 +22,6 @@
   "aside.note": "Заметка",
   "aside.tip": "Знали ли вы?",
   "aside.caution": "Осторожно",
-  "aside.danger": "Опасно"
+  "aside.danger": "Опасно",
+  "fileTree.directory": "Directory"
 }

package/translations/sv.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/tr.json

@@ -22,5 +22,6 @@
   "aside.note": "Note",
   "aside.tip": "Tip",
   "aside.caution": "Caution",
-  "aside.danger": "Danger"
+  "aside.danger": "Danger",
+  "fileTree.directory": "Directory"
 }

package/translations/uk.json

@@ -22,5 +22,6 @@
   "aside.note": "Заувага",
   "aside.tip": "Порада",
   "aside.caution": "Обережно",
-  "aside.danger": "Небезпечно"
+  "aside.danger": "Небезпечно",
+  "fileTree.directory": "Directory"
 }

package/translations/vi.json

@@ -22,5 +22,6 @@
   "aside.note": "Ghi chú",
   "aside.tip": "Mẹo",
   "aside.caution": "Thận trọng",
-  "aside.danger": "Nguy hiểm"
+  "aside.danger": "Nguy hiểm",
+  "fileTree.directory": "Directory"
 }

package/translations/zh-CN.json

@@ -22,5 +22,6 @@
   "aside.note": "注意",
   "aside.tip": "提示",
   "aside.caution": "警告",
-  "aside.danger": "危险"
+  "aside.danger": "危险",
+  "fileTree.directory": "Directory"
 }

package/translations/zh-TW.json

@@ -22,5 +22,6 @@
   "aside.note": "注意",
   "aside.tip": "提示",
   "aside.caution": "警告",
-  "aside.danger": "危險"
+  "aside.danger": "危險",
+  "fileTree.directory": "Directory"
 }

package/user-components/FileTree.astro

@@ -0,0 +1,139 @@
+---
+import { slugToLocaleData } from '../utils/slugs';
+import { useTranslations } from '../utils/translations';
+import { processFileTree } from './rehype-file-tree';
+
+const slug = Astro.url.pathname.replace(/^\//, '').replace(/\/$/, '');
+const t = useTranslations(slugToLocaleData(slug).locale);
+
+const fileTreeHtml = await Astro.slots.render('default');
+const html = processFileTree(fileTreeHtml, t('fileTree.directory'));
+---
+
+<starlight-file-tree set:html={html} class="not-content" data-pagefind-ignore />
+
+<style>
+	starlight-file-tree {
+		--x-space: 1.5rem;
+		--y-space: 0.125rem;
+		--y-pad: 0;
+
+		display: block;
+		border: 1px solid var(--sl-color-gray-5);
+		padding: 1rem;
+		background-color: var(--sl-color-gray-6);
+		font-size: var(--sl-text-xs);
+		font-family: var(--__sl-font-mono);
+		overflow-x: auto;
+	}
+
+	starlight-file-tree :global(.directory > details) {
+		border: 0;
+		padding: 0;
+		padding-inline-start: var(--x-space);
+		background: transparent;
+	}
+
+	starlight-file-tree :global(.directory > details > summary) {
+		margin-inline-start: calc(-1 * var(--x-space));
+		border: 0;
+		padding: var(--y-pad) 0.625rem;
+		font-weight: normal;
+		color: var(--sl-color-white);
+		max-width: 100%;
+
+		&::marker,
+		&::-webkit-details-marker {
+			color: var(--sl-color-gray-3);
+		}
+
+		&:hover,
+		&:hover :global(.tree-icon) {
+			cursor: pointer;
+			color: var(--sl-color-text-accent);
+			fill: var(--sl-color-text-accent);
+
+			& ~ :global(ul) {
+				border-color: var(--sl-color-gray-4);
+			}
+		}
+
+		&:hover :global(.highlight .tree-icon) {
+			fill: var(--sl-color-text-invert);
+		}
+	}
+
+	starlight-file-tree :global(ul) {
+		margin-inline-start: 0.5rem;
+		border-inline-start: 1px solid var(--sl-color-gray-5);
+		padding: 0;
+		padding-inline-start: 0.125rem;
+		list-style: none;
+	}
+
+	starlight-file-tree > :global(ul) {
+		margin: 0;
+		border: 0;
+		padding: 0;
+	}
+
+	starlight-file-tree :global(li) {
+		margin: var(--y-space) 0;
+		padding: var(--y-pad) 0;
+	}
+
+	starlight-file-tree :global(.file) {
+		margin-inline-start: calc(var(--x-space) - 0.125rem);
+		color: var(--sl-color-white);
+	}
+
+	starlight-file-tree :global(.tree-entry) {
+		display: inline-flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+		max-width: calc(100% - 1rem);
+
+		@media (min-width: 30em) {
+			& {
+				flex-wrap: nowrap;
+			}
+		}
+
+		& > :global(:first-child) {
+			flex-shrink: 0;
+		}
+	}
+
+	starlight-file-tree :global(.empty) {
+		color: var(--sl-color-gray-3);
+		padding-inline-start: 0.375rem;
+	}
+
+	starlight-file-tree :global(.comment) {
+		color: var(--sl-color-gray-3);
+		padding-inline-start: 1.625rem;
+		max-width: 24rem;
+		min-width: 12rem;
+	}
+
+	starlight-file-tree :global(.highlight) {
+		display: inline-block;
+		border-radius: 0.25rem;
+		padding-inline-end: 0.5rem;
+		color: var(--sl-color-text-invert);
+		background-color: var(--sl-color-text-accent);
+	}
+
+	starlight-file-tree :global(svg) {
+		display: inline;
+		fill: var(--sl-color-gray-3);
+		vertical-align: middle;
+		margin-inline: 0.25rem 0.375rem;
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	starlight-file-tree :global(.highlight svg.tree-icon) {
+		fill: var(--sl-color-text-invert);
+	}
+</style>

package/user-components/Steps.astro

@@ -0,0 +1,84 @@
+---
+import { processSteps } from './rehype-steps';
+
+const content = await Astro.slots.render('default');
+const { html } = processSteps(content);
+---
+
+<Fragment set:html={html} />
+
+<style is:global>
+	.sl-steps {
+		--bullet-size: calc(var(--sl-line-height) * 1rem);
+		--bullet-margin: 0.375rem;
+
+		list-style: none;
+		padding-inline-start: 0;
+	}
+
+	.sl-steps > li {
+		position: relative;
+		padding-inline-start: calc(var(--bullet-size) + 1rem);
+		/* HACK: Keeps any `margin-bottom` inside the `<li>`’s padding box to avoid gaps in the hairline border. */
+		padding-bottom: 1px;
+		/* Prevent bullets from touching in short list items. */
+		min-height: calc(var(--bullet-size) + var(--bullet-margin));
+	}
+	.sl-steps > li + li {
+		/* Remove margin between steps. */
+		margin-top: 0;
+	}
+
+	/* Custom list marker element. */
+	.sl-steps > li::before {
+		content: counter(list-item);
+		position: absolute;
+		top: 0;
+		inset-inline-start: 0;
+		width: var(--bullet-size);
+		height: var(--bullet-size);
+		line-height: var(--bullet-size);
+
+		font-size: var(--sl-text-xs);
+		font-weight: 600;
+		text-align: center;
+		color: var(--sl-color-white);
+		background-color: var(--sl-color-gray-6);
+		border-radius: 99rem;
+		box-shadow: inset 0 0 0 1px var(--sl-color-gray-5);
+	}
+
+	/* Vertical guideline linking list numbers. */
+	.sl-steps > li:not(:last-of-type)::after {
+		--guide-width: 1px;
+		content: '';
+		position: absolute;
+		top: calc(var(--bullet-size) + var(--bullet-margin));
+		bottom: var(--bullet-margin);
+		inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
+		width: var(--guide-width);
+		background-color: var(--sl-color-hairline-light);
+	}
+
+	/* Adjust first item inside a step so that it aligns vertically with the number
+			even if using a larger font size (e.g. a heading) */
+	.sl-steps > li > :first-child {
+		/*
+		The `lh` unit is not yet supported by all browsers in our support matrix
+		— see https://caniuse.com/mdn-css_types_length_lh
+		In unsupported browsers we approximate this using our known line-heights.
+		*/
+		--lh: calc(1em * var(--sl-line-height));
+		--shift-y: calc(0.5 * (var(--bullet-size) - var(--lh)));
+		transform: translateY(var(--shift-y));
+		margin-bottom: var(--shift-y);
+	}
+	.sl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
+		--lh: calc(1em * var(--sl-line-height-headings));
+	}
+	@supports (--prop: 1lh) {
+		.sl-steps > li > :first-child {
+			--lh: 1lh;
+		}
+	}
+</style>

package/user-components/TabItem.astro

@@ -1,17 +1,19 @@
 ---
 import { TabItemTagname } from './rehype-tabs';
+import type { Icons } from '../components/Icons';
 
 interface Props {
+	icon?: keyof typeof Icons;
 	label: string;
 }
 
-const { label } = Astro.props;
+const { icon, label } = Astro.props;
 
 if (!label) {
 	throw new Error('Missing prop `label` on `<TabItem>` component.');
 }
 ---
 
-<TabItemTagname data-label={label}>
+<TabItemTagname data-label={label} data-icon={icon}>
 	<slot />
 </TabItemTagname>

package/user-components/Tabs.astro

@@ -1,4 +1,5 @@
 ---
+import Icon from './Icon.astro';
 import { processPanels } from './rehype-tabs';
 
 const panelHtml = await Astro.slots.render('default');
@@ -10,7 +11,7 @@ const { html, panels } = processPanels(panelHtml);
 		panels && (
 			<div class="tablist-wrapper not-content">
 				<ul role="tablist">
-					{panels.map(({ label, panelId, tabId }, idx) => (
+					{panels.map(({ icon, label, panelId, tabId }, idx) => (
 						<li role="presentation" class="tab">
 							<a
 								role="tab"
@@ -19,6 +20,7 @@ const { html, panels } = processPanels(panelHtml);
 								aria-selected={idx === 0 && 'true'}
 								tabindex={idx !== 0 ? -1 : 0}
 							>
+								{icon && <Icon name={icon} />}
 								{label}
 							</a>
 						</li>
@@ -50,7 +52,9 @@ const { html, panels } = processPanels(panelHtml);
 		margin-bottom: -2px;
 	}
 	.tab > [role='tab'] {
-		display: block;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 		padding: 0 1.25rem;
 		text-decoration: none;
 		border-bottom: 2px solid var(--sl-color-gray-5);