@astrojs/starlight 0.33.2 → 0.34.0

package/user-components/FileTree.astro

@@ -8,127 +8,129 @@ const html = processFileTree(fileTreeHtml, Astro.locals.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;
-	}
+	@layer starlight.components {
+		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 > 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%;
-	}
+		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::marker),
-	starlight-file-tree :global(.directory > details > summary::-webkit-details-marker) {
-		color: var(--sl-color-gray-3);
-	}
+		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%;
+		}
 
-	starlight-file-tree :global(.directory > details > summary:hover),
-	starlight-file-tree :global(.directory > details > summary:hover .tree-icon) {
-		cursor: pointer;
-		color: var(--sl-color-text-accent);
-		fill: currentColor;
-	}
+		starlight-file-tree :global(.directory > details > summary::marker),
+		starlight-file-tree :global(.directory > details > summary::-webkit-details-marker) {
+			color: var(--sl-color-gray-3);
+		}
 
-	starlight-file-tree :global(.directory > details > summary:hover ~ ul) {
-		border-color: var(--sl-color-gray-4);
-	}
+		starlight-file-tree :global(.directory > details > summary:hover),
+		starlight-file-tree :global(.directory > details > summary:hover .tree-icon) {
+			cursor: pointer;
+			color: var(--sl-color-text-accent);
+			fill: currentColor;
+		}
 
-	starlight-file-tree :global(.directory > details > summary:hover .highlight .tree-icon) {
-		fill: currentColor;
-	}
+		starlight-file-tree :global(.directory > details > summary:hover ~ ul) {
+			border-color: var(--sl-color-gray-4);
+		}
 
-	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(.directory > details > summary:hover .highlight .tree-icon) {
+			fill: currentColor;
+		}
 
-	starlight-file-tree > :global(ul) {
-		margin: 0;
-		border: 0;
-		padding: 0;
-	}
+		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(li) {
-		margin: var(--y-space) 0;
-		padding: var(--y-pad) 0;
-	}
+		starlight-file-tree > :global(ul) {
+			margin: 0;
+			border: 0;
+			padding: 0;
+		}
 
-	starlight-file-tree :global(.file) {
-		margin-inline-start: calc(var(--x-space) - 0.125rem);
-		color: var(--sl-color-white);
-	}
+		starlight-file-tree :global(li) {
+			margin: var(--y-space) 0;
+			padding: var(--y-pad) 0;
+		}
 
-	starlight-file-tree :global(.tree-entry) {
-		display: inline-flex;
-		align-items: flex-start;
-		flex-wrap: wrap;
-		max-width: calc(100% - 1rem);
-	}
+		starlight-file-tree :global(.file) {
+			margin-inline-start: calc(var(--x-space) - 0.125rem);
+			color: var(--sl-color-white);
+		}
 
-	@media (min-width: 30em) {
 		starlight-file-tree :global(.tree-entry) {
-			flex-wrap: nowrap;
+			display: inline-flex;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			max-width: calc(100% - 1rem);
 		}
-	}
 
-	starlight-file-tree :global(.tree-entry > :first-child) {
-		flex-shrink: 0;
-	}
+		@media (min-width: 30em) {
+			starlight-file-tree :global(.tree-entry) {
+				flex-wrap: nowrap;
+			}
+		}
 
-	starlight-file-tree :global(.empty) {
-		color: var(--sl-color-gray-3);
-		padding-inline-start: 0.375rem;
-	}
+		starlight-file-tree :global(.tree-entry > :first-child) {
+			flex-shrink: 0;
+		}
 
-	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(.empty) {
+			color: var(--sl-color-gray-3);
+			padding-inline-start: 0.375rem;
+		}
 
-	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(.comment) {
+			color: var(--sl-color-gray-3);
+			padding-inline-start: 1.625rem;
+			max-width: 24rem;
+			min-width: 12rem;
+		}
 
-	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) {
+			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: currentColor;
+		starlight-file-tree :global(.highlight svg.tree-icon) {
+			fill: currentColor;
+		}
 	}
 </style>

package/user-components/Icon.astro

@@ -31,10 +31,12 @@ const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden':
 </>
 
 <style define:vars={{ 'sl-icon-color': color, 'sl-icon-size': size }}>
-	svg {
-		color: var(--sl-icon-color);
-		font-size: var(--sl-icon-size, 1em);
-		width: 1em;
-		height: 1em;
+	@layer starlight.components {
+		svg {
+			color: var(--sl-icon-color);
+			font-size: var(--sl-icon-size, 1em);
+			width: 1em;
+			height: 1em;
+		}
 	}
 </style>

package/user-components/LinkButton.astro

@@ -26,51 +26,53 @@ const {
 </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;
-	}
+	@layer starlight.components {
+		.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.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;
-	}
+		.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;
+		@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;
+		: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/LinkCard.astro

@@ -21,56 +21,58 @@ const { title, description, ...attributes } = Astro.props;
 </div>
 
 <style>
-	.sl-link-card {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		gap: 0.5rem;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		box-shadow: var(--sl-shadow-sm);
-		position: relative;
-	}
+	@layer starlight.components {
+		.sl-link-card {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			gap: 0.5rem;
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+			padding: 1rem;
+			box-shadow: var(--sl-shadow-sm);
+			position: relative;
+		}
 
-	a {
-		text-decoration: none;
-		line-height: var(--sl-line-height-headings);
-	}
+		a {
+			text-decoration: none;
+			line-height: var(--sl-line-height-headings);
+		}
 
-	/* a11y fix for https://github.com/withastro/starlight/issues/487 */
-	a::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-	}
+		/* a11y fix for https://github.com/withastro/starlight/issues/487 */
+		a::before {
+			content: '';
+			position: absolute;
+			inset: 0;
+		}
 
-	.stack {
-		flex-direction: column;
-		gap: 0.5rem;
-	}
+		.stack {
+			flex-direction: column;
+			gap: 0.5rem;
+		}
 
-	.title {
-		color: var(--sl-color-white);
-		font-weight: 600;
-		font-size: var(--sl-text-lg);
-	}
+		.title {
+			color: var(--sl-color-white);
+			font-weight: 600;
+			font-size: var(--sl-text-lg);
+		}
 
-	.description {
-		color: var(--sl-color-gray-3);
-		line-height: 1.5;
-	}
+		.description {
+			color: var(--sl-color-gray-3);
+			line-height: 1.5;
+		}
 
-	.icon {
-		color: var(--sl-color-gray-3);
-	}
+		.icon {
+			color: var(--sl-color-gray-3);
+		}
 
-	/* Hover state */
-	.sl-link-card:hover {
-		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
-		border-color: var(--sl-color-gray-2);
-	}
+		/* Hover state */
+		.sl-link-card:hover {
+			background: var(--sl-color-gray-7, var(--sl-color-gray-6));
+			border-color: var(--sl-color-gray-2);
+		}
 
-	.sl-link-card:hover .icon {
-		color: var(--sl-color-white);
+		.sl-link-card:hover .icon {
+			color: var(--sl-color-white);
+		}
 	}
 </style>

package/user-components/Steps.astro

@@ -8,79 +8,83 @@ 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;
+	@layer starlight.components {
+		.sl-steps {
+			--bullet-size: calc(var(--sl-line-height) * 1rem);
+			--bullet-margin: 0.375rem;
 
-		list-style: none;
-		counter-reset: steps-counter var(--sl-steps-start, 0);
-		padding-inline-start: 0;
-	}
+			list-style: none;
+			counter-reset: steps-counter var(--sl-steps-start, 0);
+			padding-inline-start: 0;
+		}
 
-	.sl-steps > li {
-		counter-increment: steps-counter;
-		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;
-	}
+		.sl-steps > li {
+			counter-increment: steps-counter;
+			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(steps-counter);
-		position: absolute;
-		top: 0;
-		inset-inline-start: 0;
-		width: var(--bullet-size);
-		height: var(--bullet-size);
-		line-height: var(--bullet-size);
+		/* Custom list marker element. */
+		.sl-steps > li::before {
+			content: counter(steps-counter);
+			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);
-	}
+			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::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);
+		/* Vertical guideline linking list numbers. */
+		.sl-steps > li::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
+	@layer starlight.content {
+		/* 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 {
-		/*
+		.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;
+			--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>