@astrojs/starlight 0.25.4 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,107 @@
 # @astrojs/starlight
 
+## 0.26.0
+
+### Minor Changes
+
+- [#1784](https://github.com/withastro/starlight/pull/1784) [`68f56a7`](https://github.com/withastro/starlight/commit/68f56a7ffd314b760443a057db9ed1a982dbe191) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds `<LinkButton>` component for visually distinct and emphasized call to action links
+
+- [#2150](https://github.com/withastro/starlight/pull/2150) [`9368494`](https://github.com/withastro/starlight/commit/9368494210dbcd80ada5b410340814fe36c4eb6c) Thanks [@delucis](https://github.com/delucis)! - Adds state persistence across page navigations to the main site sidebar
+
+- [#2087](https://github.com/withastro/starlight/pull/2087) [`caa84ea`](https://github.com/withastro/starlight/commit/caa84eaa7dc653d27d539fd3a93df346a9f0f149) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds persistence to synced `<Tabs>` so that a user's choices are reflected across page navigations.
+
+- [#2051](https://github.com/withastro/starlight/pull/2051) [`ec3b579`](https://github.com/withastro/starlight/commit/ec3b5794cac55a5755620fa5e205f0d54c9e343b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds a guideline to the last step of the `<Steps>` component.
+
+  If you want to preserve the previous behaviour and hide the guideline on final steps, you can add the following custom CSS to your site:
+
+  ```css
+  /* Hide the guideline for the final step in <Steps> lists. */
+  .sl-steps > li:last-of-type::after {
+    background: transparent;
+  }
+  ```
+
+- [#1784](https://github.com/withastro/starlight/pull/1784) [`68f56a7`](https://github.com/withastro/starlight/commit/68f56a7ffd314b760443a057db9ed1a982dbe191) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Changes the hero component action button default [variant](https://starlight.astro.build/reference/frontmatter/#heroconfig) from `minimal` to `primary`.
+
+  ⚠️ **BREAKING CHANGE:** If you want to preserve the previous appearance, hero component action buttons previously declared without a `variant` will need to be updated to include the `variant` property with the value `minimal`.
+
+  ```diff
+  hero:
+    actions:
+      - text: View on GitHub
+        link: https://github.com/astronaut/my-project
+        icon: external
+  +     variant: minimal
+  ```
+
+- [#2168](https://github.com/withastro/starlight/pull/2168) [`e044fee`](https://github.com/withastro/starlight/commit/e044feeae9a336a87db526107e5772b54ddc567f) Thanks [@HiDeoo](https://github.com/HiDeoo)! - ⚠️ **BREAKING CHANGE:** Updates the `<StarlightPage />` component `sidebar` prop to accept an array of [`SidebarItem`](https://starlight.astro.build/reference/configuration/#sidebaritem)s like the main Starlight `sidebar` configuration in `astro.config.mjs`.
+
+  This change simplifies the definition of sidebar items in the `<StarlightPage />` component, allows for shared sidebar configuration between the global `sidebar` option and `<StarlightPage />` component, and also enables the usage of autogenerated sidebar groups with the `<StarlightPage />` component.
+  If you are using the `<StarlightPage />` component with a custom `sidebar` configuration, you will need to update the `sidebar` prop to an array of [`SidebarItem`](https://starlight.astro.build/reference/configuration/#sidebaritem) objects.
+
+  For example, the following custom page with a custom `sidebar` configuration defines a “Resources” group with a “New” badge, a link to the “Showcase” page which is part of the `docs` content collection, and a link to the Starlight website:
+
+  ```astro
+  ---
+  // src/pages/custom-page/example.astro
+  ---
+
+  <StarlightPage
+    frontmatter={{ title: 'My custom page' }}
+    sidebar={[
+      {
+        type: 'group',
+        label: 'Resources',
+        badge: { text: 'New' },
+        items: [
+          { type: 'link', label: 'Showcase', href: '/showcase/' },
+          {
+            type: 'link',
+            label: 'Starlight',
+            href: 'https://starlight.astro.build/',
+          },
+        ],
+      },
+    ]}
+  >
+    <p>This is a custom page with a custom component.</p>
+  </StarlightPage>
+  ```
+
+  This configuration will now need to be updated to the following:
+
+  ```astro
+  ---
+  // src/pages/custom-page/example.astro
+  ---
+
+  <StarlightPage
+    frontmatter={{ title: 'My custom page' }}
+    sidebar={[
+      {
+        label: 'Resources',
+        badge: { text: 'New' },
+        items: [
+          'showcase',
+          { label: 'Starlight', link: 'https://starlight.astro.build/' },
+        ],
+      },
+    ]}
+  >
+    <p>This is a custom page with a custom component.</p>
+  </StarlightPage>
+  ```
+
+  See the [“Sidebar Navigation”](https://starlight.astro.build/guides/sidebar/) guide to learn more about the available options for customizing the sidebar.
+
+## 0.25.5
+
+### Patch Changes
+
+- [#2171](https://github.com/withastro/starlight/pull/2171) [`c8258d7`](https://github.com/withastro/starlight/commit/c8258d7ef9264a0f85710d463a83d16013dc1934) Thanks [@delucis](https://github.com/delucis)! - Improves build performance slightly for bigger sites
+
+- [#2199](https://github.com/withastro/starlight/pull/2199) [`91557fd`](https://github.com/withastro/starlight/commit/91557fd73a43ab596f0fefb7c9aa0218b9a0b208) Thanks [@connorjs](https://github.com/connorjs)! - Adds Azure DevOps (`azureDevOps`) icon for use in social links.
+
 ## 0.25.4
 
 ### Patch Changes

package/__e2e__/fixtures/basics/src/content/docs/tabs-unsynced.mdx

@@ -0,0 +1,21 @@
+---
+title: Tabs unsynced
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+A basic set of tabs.
+
+<Tabs>
+	<TabItem label="npm">npm command</TabItem>
+	<TabItem label="pnpm">pnpm command</TabItem>
+	<TabItem label="yarn">yarn command</TabItem>
+</Tabs>
+
+Another basic set of tabs.
+
+<Tabs>
+	<TabItem label="one">tab 1</TabItem>
+	<TabItem label="two">tab 2</TabItem>
+	<TabItem label="three">tab 3</TabItem>
+</Tabs>

package/__e2e__/fixtures/basics/src/content/docs/tabs.mdx

@@ -52,3 +52,19 @@ Another set of tabs using the `pkg` sync key and using icons.
 		another yarn command
 	</TabItem>
 </Tabs>
+
+A set of tabs using the `os` sync key.
+
+<Tabs syncKey="os">
+	<TabItem label="macos">macOS</TabItem>
+	<TabItem label="windows">Windows</TabItem>
+	<TabItem label="linux">GNU/Linux</TabItem>
+</Tabs>
+
+Another set of tabs using the `os` sync key.
+
+<Tabs syncKey="os">
+	<TabItem label="macos">ls</TabItem>
+	<TabItem label="windows">Get-ChildItem</TabItem>
+	<TabItem label="linux">ls</TabItem>
+</Tabs>

package/__e2e__/tabs.test.ts

@@ -52,12 +52,16 @@ test('syncs only tabs using the same sync key', async ({ page, starlight }) => {
 	const pkgTabsA = tabs.nth(0);
 	const unsyncedTabs = tabs.nth(1);
 	const styleTabs = tabs.nth(3);
+	const osTabsA = tabs.nth(5);
+	const osTabsB = tabs.nth(6);
 
 	// Select the pnpm tab in the set of tabs synced with the 'pkg' key.
 	await pkgTabsA.getByRole('tab').filter({ hasText: 'pnpm' }).click();
 
 	await expectSelectedTab(unsyncedTabs, 'one', 'tab 1');
 	await expectSelectedTab(styleTabs, 'css', 'css code');
+	await expectSelectedTab(osTabsA, 'macos', 'macOS');
+	await expectSelectedTab(osTabsB, 'macos', 'ls');
 });
 
 test('supports synced tabs with different tab items', async ({ page, starlight }) => {
@@ -139,6 +143,156 @@ test('syncs tabs with the same sync key if they do not consistenly use icons', a
 	await expectSelectedTab(pkgTabsA, 'yarn', 'yarn command');
 });
 
+test('restores tabs only for synced tabs with a persisted state', async ({ page, starlight }) => {
+	await starlight.goto('/tabs');
+
+	const tabs = page.locator('starlight-tabs');
+	const pkgTabsA = tabs.nth(0);
+	const pkgTabsB = tabs.nth(2);
+	const pkgTabsC = tabs.nth(4);
+	const unsyncedTabs = tabs.nth(1);
+	const styleTabs = tabs.nth(3);
+	const osTabsA = tabs.nth(5);
+	const osTabsB = tabs.nth(6);
+
+	// Select the pnpm tab in the set of tabs synced with the 'pkg' key.
+	await pkgTabsA.getByRole('tab').filter({ hasText: 'pnpm' }).click();
+
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+	await expectSelectedTab(pkgTabsB, 'pnpm', 'another pnpm command');
+	await expectSelectedTab(pkgTabsC, 'pnpm', 'another pnpm command');
+
+	page.reload();
+
+	// The synced tabs with a persisted state should be restored.
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+	await expectSelectedTab(pkgTabsB, 'pnpm', 'another pnpm command');
+	await expectSelectedTab(pkgTabsC, 'pnpm', 'another pnpm command');
+
+	// Other tabs should not be affected.
+	await expectSelectedTab(unsyncedTabs, 'one', 'tab 1');
+	await expectSelectedTab(styleTabs, 'css', 'css code');
+	await expectSelectedTab(osTabsA, 'macos', 'macOS');
+	await expectSelectedTab(osTabsB, 'macos', 'ls');
+});
+
+test('restores tabs for a single set of synced tabs with a persisted state', async ({
+	page,
+	starlight,
+}) => {
+	await starlight.goto('/tabs');
+
+	const tabs = page.locator('starlight-tabs');
+	const styleTabs = tabs.nth(3);
+
+	// Select the tailwind tab in the set of tabs synced with the 'style' key.
+	await styleTabs.getByRole('tab').filter({ hasText: 'tailwind' }).click();
+
+	await expectSelectedTab(styleTabs, 'tailwind', 'tailwind code');
+
+	page.reload();
+
+	// The synced tabs with a persisted state should be restored.
+	await expectSelectedTab(styleTabs, 'tailwind', 'tailwind code');
+});
+
+test('restores tabs for multiple synced tabs with different sync keys', async ({
+	page,
+	starlight,
+}) => {
+	await starlight.goto('/tabs');
+
+	const tabs = page.locator('starlight-tabs');
+	const pkgTabsA = tabs.nth(0);
+	const pkgTabsB = tabs.nth(2);
+	const pkgTabsC = tabs.nth(4);
+	const osTabsA = tabs.nth(5);
+	const osTabsB = tabs.nth(6);
+
+	// Select the pnpm tab in the set of tabs synced with the 'pkg' key.
+	await pkgTabsA.getByRole('tab').filter({ hasText: 'pnpm' }).click();
+
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+	await expectSelectedTab(pkgTabsB, 'pnpm', 'another pnpm command');
+	await expectSelectedTab(pkgTabsC, 'pnpm', 'another pnpm command');
+
+	// Select the windows tab in the set of tabs synced with the 'os' key.
+	await osTabsB.getByRole('tab').filter({ hasText: 'windows' }).click();
+
+	page.reload();
+
+	// The synced tabs with a persisted state for the `pkg` sync key should be restored.
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+	await expectSelectedTab(pkgTabsB, 'pnpm', 'another pnpm command');
+	await expectSelectedTab(pkgTabsC, 'pnpm', 'another pnpm command');
+
+	// The synced tabs with a persisted state for the `os` sync key should be restored.
+	await expectSelectedTab(osTabsA, 'windows', 'Windows');
+	await expectSelectedTab(osTabsB, 'windows', 'Get-ChildItem');
+});
+
+test('includes the `<starlight-tabs-restore>` element only for synced tabs', async ({
+	page,
+	starlight,
+}) => {
+	await starlight.goto('/tabs');
+
+	// The page includes 7 sets of tabs.
+	await expect(page.locator('starlight-tabs')).toHaveCount(7);
+	// Only 6 sets of tabs are synced.
+	await expect(page.locator('starlight-tabs-restore')).toHaveCount(6);
+});
+
+test('includes the synced tabs restore script only when needed and at most once', async ({
+	page,
+	starlight,
+}) => {
+	const syncedTabsRestoreScriptRegex = /customElements\.define\('starlight-tabs-restore',/g;
+
+	await starlight.goto('/tabs');
+
+	// The page includes at least one set of synced tabs.
+	expect((await page.content()).match(syncedTabsRestoreScriptRegex)?.length).toBe(1);
+
+	await starlight.goto('/tabs-unsynced');
+
+	// The page includes no set of synced tabs.
+	expect((await page.content()).match(syncedTabsRestoreScriptRegex)).toBeNull();
+});
+
+test('gracefully handles invalid persisted state for synced tabs', async ({ page, starlight }) => {
+	await starlight.goto('/tabs');
+
+	const tabs = page.locator('starlight-tabs');
+	const pkgTabsA = tabs.nth(0);
+
+	// Select the pnpm tab in the set of tabs synced with the 'pkg' key.
+	await pkgTabsA.getByRole('tab').filter({ hasText: 'pnpm' }).click();
+
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+
+	// Replace the persisted state with a new invalid value.
+	await page.evaluate(
+		(value) => localStorage.setItem('starlight-synced-tabs__pkg', value),
+		'invalid-value'
+	);
+
+	page.reload();
+
+	// The synced tabs should not be restored due to the invalid persisted state.
+	await expectSelectedTab(pkgTabsA, 'npm', 'npm command');
+
+	// Select the pnpm tab in the set of tabs synced with the 'pkg' key.
+	await pkgTabsA.getByRole('tab').filter({ hasText: 'pnpm' }).click();
+
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+
+	// The synced tabs should be restored with the new valid persisted state.
+	expect(await page.evaluate(() => localStorage.getItem('starlight-synced-tabs__pkg'))).toBe(
+		'pnpm'
+	);
+});
+
 async function expectSelectedTab(tabs: Locator, label: string, panel: string) {
 	expect((await tabs.getByRole('tab', { selected: true }).textContent())?.trim()).toBe(label);
 	expect((await tabs.getByRole('tabpanel').textContent())?.trim()).toBe(panel);

package/__e2e__/test-utils.ts

@@ -5,6 +5,7 @@ import { build, preview } from 'astro';
 export { expect, type Locator } from '@playwright/test';
 
 process.env.ASTRO_TELEMETRY_DISABLED = 'true';
+process.env.ASTRO_DISABLE_UPDATE_CHECK = 'true';
 
 // Setup a test environment that will build and start a preview server for a given fixture path and
 // provide a Starlight Playwright fixture accessible from within all tests.

package/components/Hero.astro

@@ -2,7 +2,7 @@
 import { Image } from 'astro:assets';
 import { PAGE_TITLE_ID } from '../constants';
 import type { Props } from '../props';
-import CallToAction from './CallToAction.astro';
+import LinkButton from '../user-components/LinkButton.astro';
 
 const { data } = Astro.props.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
@@ -50,8 +50,11 @@ if (image) {
 		{
 			actions.length > 0 && (
 				<div class="sl-flex actions">
-					{actions.map(({ text, ...attrs }) => (
-						<CallToAction {...attrs} set:html={text} />
+					{actions.map(({ attrs, icon, link: href, text, variant }) => (
+						<LinkButton {href} {variant} icon={icon?.name} {...attrs}>
+							{text}
+							{icon?.html && <Fragment set:html={icon.html} />}
+						</LinkButton>
 					))}
 				</div>
 			)

package/components/Icons.ts

@@ -92,6 +92,9 @@ export const BuiltInIcons = {
 		'<path d="M20.47 2H3.53a1.45 1.45 0 0 0-1.47 1.43v17.14A1.45 1.45 0 0 0 3.53 22h16.94a1.45 1.45 0 0 0 1.47-1.43V3.43A1.45 1.45 0 0 0 20.47 2ZM8.09 18.74h-3v-9h3v9ZM6.59 8.48a1.56 1.56 0 0 1 0-3.12 1.57 1.57 0 1 1 0 3.12Zm12.32 10.26h-3v-4.83c0-1.21-.43-2-1.52-2A1.65 1.65 0 0 0 12.85 13a2 2 0 0 0-.1.73v5h-3v-9h3V11a3 3 0 0 1 2.71-1.5c2 0 3.45 1.29 3.45 4.06v5.18Z"/>',
 	twitch:
 		'<path d="M2.5 1 1 4.8v15.4h5.5V23h3.1l3-2.8H17l6-5.7V1H2.6ZM21 13.5l-3.4 3.3H12l-3 2.8v-2.8H4.5V3H21v10.5Zm-3.4-6.8v5.8h-2V6.7h2Zm-5.5 0v5.8h-2V6.7h2Z"/>',
+	azureDevOps:
+		'<path d="M17,4v9.74l-4,3.28-6.2-2.26V17L3.29,12.41l10.23.8V4.44Zm-3.41.49L7.85,1V3.29L2.58,4.84,1,6.87v4.61l2.26,1V6.57Z"/>',
+
 	microsoftTeams:
 		'<path d="M13.78 7.2a3.63 3.63 0 1 0-4.3-3.68h1.78a2.52 2.52 0 0 1 2.52 2.53V7.2zM7.34 18.8h3.92a2.52 2.52 0 0 0 2.52-2.52V8.37h4.17c.58.01 1.04.5 1.03 1.07v6.45a6.3 6.3 0 0 1-6.14 6.43 6.3 6.3 0 0 1-5.5-3.52zm16.1-14.06a2.51 2.51 0 1 1-5.02 0 2.51 2.51 0 0 1 5.02 0zm-3.36 14.24h-.17c.4-1 .59-2.05.57-3.11V9.46c0-.38-.07-.75-.23-1.09h2.69c.58 0 1.06.48 1.06 1.06v5.65a3.9 3.9 0 0 1-3.9 3.9h-.02z"/><path d="M1.02 5.02h10.24c.56 0 1.02.46 1.02 1.03v10.23a1.02 1.02 0 0 1-1.02 1.02H1.02A1.02 1.02 0 0 1 0 16.28V6.04c0-.56.46-1.02 1.02-1.02zm7.81 3.9V7.84H3.45v1.08h2.03v5.57h1.3V8.92h2.05z"/>',
 	instagram:

package/components/Page.astro

@@ -80,6 +80,7 @@ const pagefindEnabled =
 		<PageFrame {...Astro.props}>
 			<Header slot="header" {...Astro.props} />
 			{Astro.props.hasSidebar && <Sidebar slot="sidebar" {...Astro.props} />}
+			<script src="./SidebarPersistState"></script>
 			<TwoColumnContent {...Astro.props}>
 				<PageSidebar slot="right-sidebar" {...Astro.props} />
 				<main

package/components/Sidebar.astro

@@ -2,12 +2,46 @@
 import type { Props } from '../props';
 
 import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
+import { getSidebarHash } from '../utils/navigation';
 import SidebarSublist from './SidebarSublist.astro';
 
 const { sidebar } = Astro.props;
+const hash = getSidebarHash(sidebar);
 ---
 
-<SidebarSublist sublist={sidebar} />
+<sl-sidebar-state-persist data-hash={hash}>
+	<SidebarSublist sublist={sidebar} />
+</sl-sidebar-state-persist>
 <div class="md:sl-hidden">
 	<MobileMenuFooter {...Astro.props} />
 </div>
+
+{
+	/*
+		Inline script to restore sidebar state as soon as possible.
+		- On smaller viewports, restoring state is skipped as the sidebar is collapsed inside a menu.
+		- The state is parsed from session storage and restored.
+		- This is a progressive enhancement, so any errors are swallowed silently.
+	*/
+}
+<script is:inline>
+	(() => {
+		try {
+			if (!matchMedia('(min-width: 50em)').matches) return;
+			const scroller = document.getElementById('starlight__sidebar');
+			/** @type {HTMLElement | null} */
+			const target = document.querySelector('sl-sidebar-state-persist');
+			const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0');
+			if (!scroller || !target || !state || target.dataset.hash !== state.hash) return;
+			target
+				.querySelectorAll('details')
+				.forEach((el, idx) => typeof state.open[idx] === 'boolean' && (el.open = state.open[idx]));
+			scroller.scrollTop = state.scroll;
+		} catch {}
+	})();
+</script>
+<style>
+	sl-sidebar-state-persist {
+		display: contents;
+	}
+</style>

package/components/SidebarPersistState.ts

@@ -0,0 +1,70 @@
+// Collect required elements from the DOM.
+const scroller = document.getElementById('starlight__sidebar');
+const target = scroller?.querySelector<HTMLElement>('sl-sidebar-state-persist');
+const details = [...(target?.querySelectorAll('details') || [])];
+
+/** Starlight uses this key to store sidebar state in `sessionStorage`. */
+const storageKey = 'sl-sidebar-state';
+
+/** The shape used to persist sidebar state across a user’s session. */
+interface SidebarState {
+	hash: string;
+	open: Array<boolean | null>;
+	scroll: number;
+}
+
+/**
+ * Get the current sidebar state.
+ *
+ * The `open` state is loaded from session storage, while `scroll` and `hash` are read from the current page.
+ */
+const getState = (): SidebarState => {
+	let open = [];
+	try {
+		const rawStoredState = sessionStorage.getItem(storageKey);
+		const storedState = JSON.parse(rawStoredState || '{}');
+		if (Array.isArray(storedState.open)) open = storedState.open;
+	} catch {}
+	return {
+		hash: target?.dataset.hash || '',
+		open,
+		scroll: scroller?.scrollTop || 0,
+	};
+};
+
+/** Store the passed sidebar state in session storage. */
+const storeState = (state: SidebarState): void => {
+	try {
+		sessionStorage.setItem(storageKey, JSON.stringify(state));
+	} catch {}
+};
+
+/** Updates sidebar state in session storage without modifying `open` state. */
+const updateState = (): void => storeState(getState());
+
+/** Updates sidebar state in session storage to include a new value for a specific `<details>` element. */
+const setToggleState = (open: boolean, detailsIndex: number): void => {
+	const state = getState();
+	state.open[detailsIndex] = open;
+	storeState(state);
+};
+
+// Store the current `open` state whenever a user interacts with one of the `<details>` groups.
+target?.addEventListener('click', (event) => {
+	if (!(event.target instanceof Element)) return;
+	// Query for the nearest `<summary>` and then its parent `<details>`.
+	// This excludes clicks outside of the `<summary>`, which don’t trigger toggles.
+	const toggledDetails = event.target.closest('summary')?.closest('details');
+	if (!toggledDetails) return;
+	const index = details.indexOf(toggledDetails);
+	if (index === -1) return;
+	setToggleState(!toggledDetails.open, index);
+});
+
+// Store sidebar state before navigating. These will also store it on tab blur etc.,
+// but avoid using the `beforeunload` event, which can cause issues with back/forward cache
+// on some browsers.
+addEventListener('visibilitychange', () => {
+	if (document.visibilityState === 'hidden') updateState();
+});
+addEventListener('pageHide', updateState);

package/components.ts

@@ -8,4 +8,5 @@ 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 { default as LinkButton } from './user-components/LinkButton.astro';
 export { Code } from 'astro-expressive-code/components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.25.4",
+  "version": "0.26.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -42,10 +42,6 @@
       "types": "./components/Sidebar.astro.tsx",
       "import": "./components/Sidebar.astro"
     },
-    "./components/CallToAction.astro": {
-      "types": "./components/CallToAction.astro.tsx",
-      "import": "./components/CallToAction.astro"
-    },
     "./components/MarkdownContent.astro": {
       "types": "./components/MarkdownContent.astro.tsx",
       "import": "./components/MarkdownContent.astro"

package/schemas/hero.ts

@@ -49,8 +49,8 @@ export const HeroSchema = ({ image }: SchemaContext) =>
 				text: z.string(),
 				/** Value for the link’s `href` attribute, e.g. `/page` or `https://mysite.com`. */
 				link: z.string(),
-				/** Button style to use. One of `primary`, `secondary`, or `minimal` (the default). */
-				variant: z.enum(['primary', 'secondary', 'minimal']).default('minimal'),
+				/** Button style to use. One of `primary` (the default), `secondary`, or `minimal`. */
+				variant: z.enum(['primary', 'secondary', 'minimal']).default('primary'),
 				/**
 				 * An optional icon to display alongside the link text.
 				 * Can be an inline `<svg>` or the name of one of Starlight’s built-in icons.

package/schemas/social.ts

@@ -14,6 +14,7 @@ export const socialLinks = [
 	'threads',
 	'linkedin',
 	'twitch',
+	'azureDevOps',
 	'microsoftTeams',
 	'instagram',
 	'stackOverflow',
@@ -62,6 +63,7 @@ export const SocialLinksSchema = () =>
 					threads: 'Threads',
 					linkedin: 'LinkedIn',
 					twitch: 'Twitch',
+					azureDevOps: 'Azure DevOps',
 					microsoftTeams: 'Microsoft Teams',
 					instagram: 'Instagram',
 					stackOverflow: 'Stack Overflow',

package/user-components/FileTree.astro

@@ -1,9 +1,10 @@
 ---
+import { stripLeadingAndTrailingSlashes } from '../utils/path';
 import { slugToLocaleData } from '../utils/slugs';
 import { useTranslations } from '../utils/translations';
 import { processFileTree } from './rehype-file-tree';
 
-const slug = Astro.url.pathname.replace(/^\//, '').replace(/\/$/, '');
+const slug = stripLeadingAndTrailingSlashes(Astro.url.pathname);
 const t = useTranslations(slugToLocaleData(slug).locale);
 
 const fileTreeHtml = await Astro.slots.render('default');

package/user-components/LinkButton.astro

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { Icons } from '../components/Icons';
+import Icon from './Icon.astro';
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
+	href: string | URL;
+	icon?: keyof typeof Icons | undefined;
+	iconPlacement?: 'start' | 'end' | undefined;
+	variant?: 'primary' | 'secondary' | 'minimal';
+}
+
+const {
+	class: className,
+	icon,
+	iconPlacement = 'end',
+	variant = 'primary',
+	...attrs
+} = Astro.props;
+---
+
+<a class:list={['sl-link-button not-content', variant, className]} {...attrs}>
+	{icon && iconPlacement === 'start' && <Icon name={icon} size="1.5rem" />}
+	<slot />
+	{icon && iconPlacement === 'end' && <Icon name={icon} size="1.5rem" />}
+</a>
+
+<style>
+	.sl-link-button {
+		align-items: center;
+		border: 1px solid transparent;
+		border-radius: 999rem;
+		display: inline-flex;
+		font-size: var(--sl-text-sm);
+		gap: 0.5em;
+		line-height: 1.1875;
+		outline-offset: 0.25rem;
+		padding: 0.4375rem 1.125rem;
+		text-decoration: none;
+	}
+
+	.sl-link-button.primary {
+		background: var(--sl-color-text-accent);
+		border-color: var(--sl-color-text-accent);
+		color: var(--sl-color-black);
+	}
+	.sl-link-button.primary:hover {
+		color: var(--sl-color-black);
+	}
+	.sl-link-button.secondary {
+		border-color: inherit;
+		color: var(--sl-color-white);
+	}
+	.sl-link-button.minimal {
+		color: var(--sl-color-white);
+		padding-inline: 0;
+	}
+
+	.sl-link-button :global(svg) {
+		flex-shrink: 0;
+	}
+
+	@media (min-width: 50rem) {
+		.sl-link-button {
+			font-size: var(--sl-text-base);
+			padding: 0.9375rem 1.25rem;
+		}
+	}
+
+	:global(.sl-markdown-content) .sl-link-button {
+		margin-inline-end: 1rem;
+	}
+	:global(.sl-markdown-content) .sl-link-button:not(:where(p *)) {
+		margin-block: 1rem;
+	}
+</style>

package/user-components/Steps.astro

@@ -51,7 +51,7 @@ const { html } = processSteps(content);
 	}
 
 	/* Vertical guideline linking list numbers. */
-	.sl-steps > li:not(:last-of-type)::after {
+	.sl-steps > li::after {
 		--guide-width: 1px;
 		content: '';
 		position: absolute;

package/user-components/Tabs.astro

@@ -9,8 +9,67 @@ interface Props {
 const { syncKey } = Astro.props;
 const panelHtml = await Astro.slots.render('default');
 const { html, panels } = processPanels(panelHtml);
+
+/**
+ * Synced tabs are persisted across page using `localStorage`. The script used to restore the
+ * active tab for a given sync key has a few requirements:
+ *
+ * - The script should only be included when at least one set of synced tabs is present on the page.
+ * - The script should be inlined to avoid a flash of invalid active tab.
+ * - The script should only be included once per page.
+ *
+ * To do so, we keep track of whether the script has been rendered using a variable stored using
+ * `Astro.locals` which will be reset for each new page. The value is tracked using an untyped
+ * symbol on purpose to avoid Starlight users to get autocomplete for it and avoid potential
+ * clashes with user-defined variables.
+ *
+ * The restore script defines a custom element `starlight-tabs-restore` that will be included in
+ * each set of synced tabs to restore the active tab based on the persisted value using the
+ * `connectedCallback` lifecycle method. To ensure this callback can access all tabs and panels for
+ * the current set of tabs, the script should be rendered before the tabs themselves.
+ */
+const isSynced = syncKey !== undefined;
+const didRenderSyncedTabsRestoreScriptSymbol = Symbol.for('starlight:did-render-synced-tabs-restore-script');
+// @ts-expect-error - See above
+const shouldRenderSyncedTabsRestoreScript = isSynced && Astro.locals[didRenderSyncedTabsRestoreScriptSymbol] !== true;
+
+if (isSynced) {
+	// @ts-expect-error - See above
+	Astro.locals[didRenderSyncedTabsRestoreScriptSymbol] = true
+}
 ---
 
+{/* Inlined to avoid a flash of invalid active tab. */}
+{shouldRenderSyncedTabsRestoreScript && <script is:inline>
+(() => {
+	class StarlightTabsRestore extends HTMLElement {
+		connectedCallback() {
+			const starlightTabs = this.closest('starlight-tabs');
+			if (!(starlightTabs instanceof HTMLElement) || typeof localStorage === 'undefined') return;
+			const syncKey = starlightTabs.dataset.syncKey;
+			if (!syncKey) return;
+			const label = localStorage.getItem(`starlight-synced-tabs__${syncKey}`);
+			if (!label) return;
+			const tabs = [...starlightTabs?.querySelectorAll('[role="tab"]')];
+			const tabIndexToRestore = tabs.findIndex(
+				(tab) => tab instanceof HTMLAnchorElement && tab.textContent?.trim() === label
+			);
+			const panels = starlightTabs?.querySelectorAll('[role="tabpanel"]');
+			const newTab = tabs[tabIndexToRestore];
+			const newPanel = panels[tabIndexToRestore];
+			if (tabIndexToRestore < 1 || !newTab || !newPanel) return;
+			tabs[0]?.setAttribute('aria-selected', 'false');
+			tabs[0]?.setAttribute('tabindex', '-1');
+			panels?.[0]?.setAttribute('hidden', 'true');
+			newTab.removeAttribute('tabindex');
+			newTab.setAttribute('aria-selected', 'true');
+			newPanel.removeAttribute('hidden');
+		}
+	}
+	customElements.define('starlight-tabs-restore', StarlightTabsRestore);
+})()
+</script>}
+
 <starlight-tabs data-sync-key={syncKey}>
 	{
 		panels && (
@@ -35,6 +94,7 @@ const { html, panels } = processPanels(panelHtml);
 		)
 	}
 	<Fragment set:html={html} />
+	{isSynced && <starlight-tabs-restore />}
 </starlight-tabs>
 
 <style>
@@ -86,6 +146,8 @@ const { html, panels } = processPanels(panelHtml);
 		tabs: HTMLAnchorElement[];
 		panels: HTMLElement[];
 		#syncKey: string | undefined;
+		// The storage key prefix should be in sync with the one used in the restore script.
+		#storageKeyPrefix = 'starlight-synced-tabs__';
 
 		constructor() {
 			super();
@@ -159,25 +221,41 @@ const { html, panels } = processPanels(panelHtml);
 			newTab.setAttribute('aria-selected', 'true');
 			if (shouldSync) {
 				newTab.focus();
-				StarlightTabs.#syncTabs(this, newTab.innerText);
+				StarlightTabs.#syncTabs(this, newTab);
 				window.scrollTo({
 					top: window.scrollY + (this.getBoundingClientRect().top - previousTabsOffset),
 				});
 			}
 		}
 
-		static #syncTabs(emitter: StarlightTabs, label: string | null) {
+		#persistSyncedTabs(label: string) {
+			if (!this.#syncKey || typeof localStorage === 'undefined') return;
+			localStorage.setItem(this.#storageKeyPrefix + this.#syncKey, label);
+		}
+
+		static #syncTabs(emitter: StarlightTabs, newTab: HTMLAnchorElement) {
 			const syncKey = emitter.#syncKey;
+			const label = StarlightTabs.#getTabLabel(newTab);
 			if (!syncKey || !label) return;
 			const syncedTabs = StarlightTabs.#syncedTabs.get(syncKey);
 			if (!syncedTabs) return;
 
 			for (const receiver of syncedTabs) {
 				if (receiver === emitter) continue;
-				const labelIndex = receiver.tabs.findIndex((tab) => tab.innerText === label);
+				const labelIndex = receiver.tabs.findIndex((tab) => StarlightTabs.#getTabLabel(tab) === label);
 				if (labelIndex === -1) continue;
 				receiver.switchTab(receiver.tabs[labelIndex], labelIndex, false);
 			}
+
+			emitter.#persistSyncedTabs(label);
+		}
+
+		static #getTabLabel(tab: HTMLAnchorElement) {
+			// `textContent` returns the content of all elements. In the case of a tab with an icon, this
+			// could potentially include extra spaces due to the presence of the SVG icon.
+			// To sync tabs with the same sync key and label, no matter the presence of an icon, we trim
+			// these extra spaces.
+			return tab.textContent?.trim();
 		}
 	}
 

package/utils/localizedUrl.ts

@@ -1,4 +1,5 @@
 import config from 'virtual:starlight/user-config';
+import { stripTrailingSlash } from './path';
 
 /**
  * Get the equivalent of the passed URL for the passed locale.
@@ -12,7 +13,7 @@ export function localizedUrl(url: URL, locale: string | undefined): URL {
 	}
 	if (locale === 'root') locale = '';
 	/** Base URL with trailing `/` stripped. */
-	const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+	const base = stripTrailingSlash(import.meta.env.BASE_URL);
 	const hasBase = url.pathname.startsWith(base);
 	// Temporarily remove base to simplify
 	if (hasBase) url.pathname = url.pathname.replace(base, '');

package/utils/navigation.ts

@@ -15,6 +15,7 @@ import { pickLang } from './i18n';
 import { ensureLeadingSlash, ensureTrailingSlash, stripLeadingAndTrailingSlashes } from './path';
 import { getLocaleRoutes, routes, type Route } from './routing';
 import { localeToLang, slugToPathname } from './slugs';
+import type { StarlightConfig } from './user-config';
 
 const DirKey = Symbol('DirKey');
 const SlugKey = Symbol('SlugKey');
@@ -139,10 +140,10 @@ function linkFromInternalSidebarLinkItem(
 	locale: string | undefined,
 	currentPathname: string
 ) {
-	let slugWithLocale = locale ? locale + '/' + item.slug : item.slug;
 	// Astro passes root `index.[md|mdx]` entries with a slug of `index`
-	slugWithLocale = slugWithLocale.replace(/\/?index$/, '');
-	const entry = routes.find((entry) => slugWithLocale === entry.slug);
+	const slug = item.slug === 'index' ? '' : item.slug;
+	const localizedSlug = locale ? (slug ? locale + '/' + slug : locale) : slug;
+	const entry = routes.find((entry) => localizedSlug === entry.slug);
 	if (!entry) {
 		const hasExternalSlashes = item.slug.at(0) === '/' || item.slug.at(-1) === '/';
 		if (hasExternalSlashes) {
@@ -333,17 +334,48 @@ function sidebarFromDir(
 	);
 }
 
-/** Get the sidebar for the current page. */
+/** Get the sidebar for the current page using the global config. */
 export function getSidebar(pathname: string, locale: string | undefined): SidebarEntry[] {
+	return getSidebarFromConfig(config.sidebar, pathname, locale);
+}
+
+/** Get the sidebar for the current page using the specified sidebar config. */
+export function getSidebarFromConfig(
+	sidebarConfig: StarlightConfig['sidebar'],
+	pathname: string,
+	locale: string | undefined
+): SidebarEntry[] {
 	const routes = getLocaleRoutes(locale);
-	if (config.sidebar) {
-		return config.sidebar.map((group) => configItemToEntry(group, pathname, locale, routes));
+	if (sidebarConfig) {
+		return sidebarConfig.map((group) => configItemToEntry(group, pathname, locale, routes));
 	} else {
 		const tree = treeify(routes, locale || '');
 		return sidebarFromDir(tree, pathname, locale, false);
 	}
 }
 
+/** Generates a deterministic string based on the content of the passed sidebar. */
+export function getSidebarHash(sidebar: SidebarEntry[]): string {
+	let hash = 0;
+	const sidebarIdentity = recursivelyBuildSidebarIdentity(sidebar);
+	for (let i = 0; i < sidebarIdentity.length; i++) {
+		const char = sidebarIdentity.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+	}
+	return (hash >>> 0).toString(36).padStart(7, '0');
+}
+
+/** Recurses through a sidebar tree to generate a string concatenating labels and link hrefs. */
+function recursivelyBuildSidebarIdentity(sidebar: SidebarEntry[]): string {
+	return sidebar
+		.flatMap((entry) =>
+			entry.type === 'group'
+				? entry.label + recursivelyBuildSidebarIdentity(entry.entries)
+				: entry.label + entry.href
+		)
+		.join('');
+}
+
 /** Turn the nested tree structure of a sidebar into a flat list of all the links. */
 export function flattenSidebar(sidebar: SidebarEntry[]): Link[] {
 	return sidebar.flatMap((entry) =>
@@ -410,4 +442,7 @@ function applyPrevNextLinkConfig(
 }
 
 /** Remove the extension from a path. */
-const stripExtension = (path: string) => path.replace(/\.\w+$/, '');
+function stripExtension(path: string) {
+	const periodIndex = path.lastIndexOf('.');
+	return path.slice(0, periodIndex > -1 ? periodIndex : undefined);
+}

package/utils/slugs.ts

@@ -1,5 +1,6 @@
 import config from 'virtual:starlight/user-config';
 import { BuiltInDefaultLocale } from './i18n';
+import { stripTrailingSlash } from './path';
 
 export interface LocaleData {
 	/** Writing direction. */
@@ -52,7 +53,7 @@ export function slugToParam(slug: string): string | undefined {
 	return slug === 'index' || slug === ''
 		? undefined
 		: slug.endsWith('/index')
-			? slug.replace(/\/index$/, '')
+			? slug.slice(0, -6)
 			: slug;
 }
 
@@ -77,7 +78,7 @@ export function localizedSlug(slug: string, locale: string | undefined): string
 	locale = locale || '';
 	if (slugLocale === slug) return locale;
 	if (slugLocale) {
-		return slug.replace(slugLocale + '/', locale ? locale + '/' : '').replace(/\/$/, '');
+		return stripTrailingSlash(slug.replace(slugLocale + '/', locale ? locale + '/' : ''));
 	}
 	return slug ? locale + '/' + slug : locale;
 }
@@ -106,7 +107,7 @@ export function localizedId(id: string, locale: string | undefined): string {
 /** Extract the slug from a URL. */
 export function urlToSlug(url: URL): string {
 	let pathname = url.pathname;
-	const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+	const base = stripTrailingSlash(import.meta.env.BASE_URL);
 	if (pathname.startsWith(base)) pathname = pathname.replace(base, '');
 	const segments = pathname.split('/');
 	const htmlExt = '.html';

package/utils/starlight-page.ts

@@ -12,11 +12,11 @@ import {
 } from './route-data';
 import type { StarlightDocsEntry } from './routing';
 import { slugToLocaleData, urlToSlug } from './slugs';
-import { getPrevNextLinks, getSidebar } from './navigation';
+import { getPrevNextLinks, getSidebarFromConfig } from './navigation';
 import { useTranslations } from './translations';
 import { docsSchema } from '../schema';
-import { BadgeConfigSchema } from '../schemas/badge';
-import { SidebarLinkItemHTMLAttributesSchema } from '../schemas/sidebar';
+import { SidebarItemSchema } from '../schemas/sidebar';
+import type { StarlightConfig, StarlightUserConfig } from './user-config';
 
 /**
  * The frontmatter schema for Starlight pages derived from the default schema for Starlight’s
@@ -64,88 +64,12 @@ type StarlightPageFrontmatter = Omit<
 	'editUrl' | 'sidebar'
 > & { editUrl?: string | false };
 
-/**
- * Link configuration schema for `<StarlightPage>`.
- * Sets default values where possible to be more user friendly than raw `SidebarEntry` type.
- */
-const LinkSchema = z
-	.object({
-		/** @deprecated Specifying `type` is no longer required. */
-		type: z.literal('link').default('link'),
-		label: z.string(),
-		href: z.string(),
-		isCurrent: z.boolean().default(false),
-		badge: BadgeConfigSchema(),
-		attrs: SidebarLinkItemHTMLAttributesSchema(),
-	})
-	// Make sure badge is in the object even if undefined — Zod doesn’t seem to have a way to set `undefined` as a default.
-	.transform((item) => ({ badge: undefined, ...item }));
-
-/** Base schema for link groups without the recursive `items` array. */
-const LinkGroupBase = z.object({
-	/** @deprecated Specifying `type` is no longer required. */
-	type: z.literal('group').default('group'),
-	label: z.string(),
-	collapsed: z.boolean().default(false),
-	badge: BadgeConfigSchema(),
-});
-
-//  These manual types are needed to correctly type the recursive link group type.
-type ManualLinkGroupInput = Prettify<
-	z.input<typeof LinkGroupBase> &
-		// The original implementation of `<StarlightPage>` in v0.19.0 used `entries`.
-		// We want to use `items` so it matches the sidebar config in `astro.config.mjs`.
-		// Keeping `entries` support for now to not break anyone.
-		// TODO: warn about `entries` usage in a future version
-		// TODO: remove support for `entries` in a future version
-		(| {
-					/** Array of links and subcategories to display in this category. */
-					items: Array<z.input<typeof LinkSchema> | ManualLinkGroupInput>;
-			  }
-			| {
-					/**
-					 * @deprecated Use `items` instead of `entries`.
-					 * Support for `entries` will be removed in a future version of Starlight.
-					 */
-					entries: Array<z.input<typeof LinkSchema> | ManualLinkGroupInput>;
-			  }
-		)
->;
-type ManualLinkGroupOutput = z.output<typeof LinkGroupBase> & {
-	entries: Array<z.output<typeof LinkSchema> | ManualLinkGroupOutput>;
-	badge: z.output<typeof LinkGroupBase>['badge'];
-};
-type LinkGroupSchemaType = z.ZodType<ManualLinkGroupOutput, z.ZodTypeDef, ManualLinkGroupInput>;
-/**
- * Link group configuration schema for `<StarlightPage>`.
- * Sets default values where possible to be more user friendly than raw `SidebarEntry` type.
- */
-const LinkGroupSchema: LinkGroupSchemaType = z.preprocess(
-	// Map `items` to `entries` as expected by the `SidebarEntry` type.
-	(arg) => {
-		if (arg && typeof arg === 'object' && 'items' in arg) {
-			const { items, ...rest } = arg;
-			return { ...rest, entries: items };
-		}
-		return arg;
-	},
-	LinkGroupBase.extend({
-		entries: z.lazy(() => z.union([LinkSchema, LinkGroupSchema]).array()),
-	})
-		// Make sure badge is in the object even if undefined.
-		.transform((item) => ({ badge: undefined, ...item }))
-) as LinkGroupSchemaType;
-
-/** Sidebar configuration schema for `<StarlightPage>` */
-const StarlightPageSidebarSchema = z.union([LinkSchema, LinkGroupSchema]).array();
-type StarlightPageSidebarUserConfig = z.input<typeof StarlightPageSidebarSchema>;
-
-/** Parse sidebar prop to ensure all required defaults are in place. */
-const normalizeSidebarProp = (
-	sidebarProp: StarlightPageSidebarUserConfig
-): StarlightRouteData['sidebar'] => {
+/** Parse sidebar prop to ensure it's valid. */
+const validateSidebarProp = (
+	sidebarProp: StarlightUserConfig['sidebar']
+): StarlightConfig['sidebar'] => {
 	return parseWithFriendlyErrors(
-		StarlightPageSidebarSchema,
+		SidebarItemSchema.array().optional(),
 		sidebarProp,
 		'Invalid sidebar prop passed to the `<StarlightPage/>` component.'
 	);
@@ -159,7 +83,7 @@ export type StarlightPageProps = Prettify<
 	Partial<Omit<RemoveIndexSignature<PageProps>, 'entry' | 'entryMeta' | 'id' | 'locale' | 'slug'>> &
 		// Add the sidebar definitions for a Starlight page.
 		Partial<Pick<StarlightRouteData, 'hasSidebar'>> & {
-			sidebar?: StarlightPageSidebarUserConfig;
+			sidebar?: StarlightUserConfig['sidebar'];
 			// And finally add the Starlight page frontmatter properties in a `frontmatter` property.
 			frontmatter: StarlightPageFrontmatter;
 		}
@@ -190,9 +114,11 @@ export async function generateStarlightPageRouteData({
 	const pageFrontmatter = await getStarlightPageFrontmatter(frontmatter);
 	const id = `${stripLeadingAndTrailingSlashes(slug)}.md`;
 	const localeData = slugToLocaleData(slug);
-	const sidebar = props.sidebar
-		? normalizeSidebarProp(props.sidebar)
-		: getSidebar(url.pathname, localeData.locale);
+	const sidebar = getSidebarFromConfig(
+		props.sidebar ? validateSidebarProp(props.sidebar) : config.sidebar,
+		url.pathname,
+		localeData.locale
+	);
 	const headings = props.headings ?? [];
 	const pageDocsEntry: StarlightPageDocsEntry = {
 		id,

package/components/CallToAction.astro

@@ -1,51 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import Icon from '../user-components/Icon.astro';
-import type { Icons } from './Icons';
-
-interface Props {
-	variant: 'primary' | 'secondary' | 'minimal';
-	link: string;
-	icon?: undefined | { type: 'icon'; name: keyof typeof Icons } | { type: 'raw'; html: string };
-	attrs?: Omit<HTMLAttributes<'a'>, 'href'> | undefined;
-}
-
-const { link, variant, icon } = Astro.props;
-const { class: customClass, ...attrs } = Astro.props.attrs || {};
----
-
-<a class:list={['sl-flex action', variant, customClass]} href={link} {...attrs}>
-	<slot />
-	{icon?.type === 'icon' && <Icon name={icon.name} size="1.5rem" />}
-	{icon?.type === 'raw' && <Fragment set:html={icon.html} />}
-</a>
-
-<style>
-	.action {
-		gap: 0.5em;
-		align-items: center;
-		border-radius: 999rem;
-		padding: 0.5rem 1.125rem;
-		color: var(--sl-color-white);
-		line-height: 1.1875;
-		text-decoration: none;
-		font-size: var(--sl-text-sm);
-	}
-	.action.primary {
-		background: var(--sl-color-text-accent);
-		color: var(--sl-color-black);
-	}
-	.action.secondary {
-		border: 1px solid;
-	}
-	.action.minimal {
-		padding-inline: 0;
-	}
-
-	@media (min-width: 50rem) {
-		.action {
-			font-size: var(--sl-text-base);
-			padding: 1rem 1.25rem;
-		}
-	}
-</style>