@astrojs/starlight 0.5.6 → 0.6.0

package/user-components/Card.astro

@@ -3,67 +3,63 @@ import Icon from './Icon.astro';
 import type { Icons } from '../components/Icons';
 
 interface Props {
-  icon?: keyof typeof Icons;
-  title: string;
+	icon?: keyof typeof Icons;
+	title: string;
 }
 
 const { icon, title } = Astro.props;
 ---
 
 <article class="card flex">
-  <p class="title flex">
-    {icon && <Icon name={icon} class="icon" size="1.333em" />}
-    <span set:html={title} />
-  </p>
-  <div class="body"><slot /></div>
+	<p class="title flex">
+		{icon && <Icon name={icon} class="icon" size="1.333em" />}
+		<span set:html={title} />
+	</p>
+	<div class="body"><slot /></div>
 </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)
-    );
-  }
+	.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

@@ -1,6 +1,6 @@
 ---
 interface Props {
-  stagger?: boolean;
+	stagger?: boolean;
 }
 
 const { stagger = false } = Astro.props;
@@ -9,27 +9,27 @@ const { stagger = false } = Astro.props;
 <div class:list={['card-grid', { stagger }]}><slot /></div>
 
 <style>
-  .card-grid {
-    display: grid;
-    gap: 1rem;
-  }
+	.card-grid {
+		display: grid;
+		gap: 1rem;
+	}
 
-  .card-grid > :global(*) {
-    margin-top: 0 !important;
-  }
+	.card-grid > :global(*) {
+		margin-top: 0 !important;
+	}
 
-  @media (min-width: 50rem) {
-    .card-grid {
-      grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-    }
-    .stagger {
-      --stagger-height: 5rem;
-      padding-bottom: 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));
-    }
-  }
+		.stagger > :global(*):nth-child(2n) {
+			transform: translateY(var(--stagger-height));
+		}
+	}
 </style>

package/user-components/Icon.astro

@@ -2,34 +2,32 @@
 import { Icons } from '../components/Icons';
 
 interface Props {
-  name: keyof typeof Icons;
-  label?: string;
-  color?: string;
-  size?: string;
-  class?: string;
+	name: keyof typeof Icons;
+	label?: string;
+	color?: string;
+	size?: string;
+	class?: string;
 }
 
 const { name, label, size = '1em', color } = Astro.props;
-const a11yAttrs = label
-  ? ({ 'aria-label': label } as const)
-  : ({ 'aria-hidden': 'true' } as const);
+const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const);
 ---
 
 <svg
-  {...a11yAttrs}
-  class={Astro.props.class}
-  width="16"
-  height="16"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  set:html={Icons[name]}
+	{...a11yAttrs}
+	class={Astro.props.class}
+	width="16"
+	height="16"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	set:html={Icons[name]}
 />
 
 <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;
-  }
+	svg {
+		color: var(--sl-icon-color);
+		font-size: var(--sl-icon-size, 1em);
+		width: 1em;
+		height: 1em;
+	}
 </style>

package/user-components/TabItem.astro

@@ -2,16 +2,16 @@
 import { TabItemTagname } from './rehype-tabs';
 
 interface Props {
-  label: string;
+	label: string;
 }
 
 const { label } = Astro.props;
 
 if (!label) {
-  throw new Error('Missing prop `label` on `<TabItem>` component.');
+	throw new Error('Missing prop `label` on `<TabItem>` component.');
 }
 ---
 
 <TabItemTagname data-label={label}>
-  <slot />
+	<slot />
 </TabItemTagname>

package/user-components/Tabs.astro

@@ -6,138 +6,134 @@ const { html, panels } = processPanels(panelHtml);
 ---
 
 <starlight-tabs>
-  {
-    panels && (
-      <div class="tablist-wrapper not-content">
-        <ul role="tablist">
-          {panels.map(({ label, panelId, tabId }, idx) => (
-            <li role="presentation" class="tab">
-              <a
-                role="tab"
-                href={'#' + panelId}
-                id={tabId}
-                aria-selected={idx === 0 && 'true'}
-                tabindex={idx !== 0 ? -1 : 0}
-              >
-                {label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    )
-  }
-  <Fragment set:html={html} />
+	{
+		panels && (
+			<div class="tablist-wrapper not-content">
+				<ul role="tablist">
+					{panels.map(({ label, panelId, tabId }, idx) => (
+						<li role="presentation" class="tab">
+							<a
+								role="tab"
+								href={'#' + panelId}
+								id={tabId}
+								aria-selected={idx === 0 && 'true'}
+								tabindex={idx !== 0 ? -1 : 0}
+							>
+								{label}
+							</a>
+						</li>
+					))}
+				</ul>
+			</div>
+		)
+	}
+	<Fragment set:html={html} />
 </starlight-tabs>
 
 <style>
-  starlight-tabs {
-    display: block;
-  }
+	starlight-tabs {
+		display: block;
+	}
 
-  .tablist-wrapper {
-    overflow-x: auto;
-  }
+	.tablist-wrapper {
+		overflow-x: auto;
+	}
 
-  [role='tablist'] {
-    display: flex;
-    list-style: none;
-    border-bottom: 2px solid var(--sl-color-gray-5);
-    padding: 0;
-  }
+	[role='tablist'] {
+		display: flex;
+		list-style: none;
+		border-bottom: 2px solid var(--sl-color-gray-5);
+		padding: 0;
+	}
 
-  .tab {
-    margin-bottom: -2px;
-  }
-  .tab > [role='tab'] {
-    display: block;
-    padding: 0 1.25rem;
-    text-decoration: none;
-    border-bottom: 2px solid var(--sl-color-gray-5);
-    color: var(--sl-color-gray-3);
-    outline-offset: var(--sl-outline-offset-inside);
-  }
-  .tab [role='tab'][aria-selected] {
-    color: var(--sl-color-white);
-    border-color: var(--sl-color-text-accent);
-    font-weight: 600;
-  }
+	.tab {
+		margin-bottom: -2px;
+	}
+	.tab > [role='tab'] {
+		display: block;
+		padding: 0 1.25rem;
+		text-decoration: none;
+		border-bottom: 2px solid var(--sl-color-gray-5);
+		color: var(--sl-color-gray-3);
+		outline-offset: var(--sl-outline-offset-inside);
+	}
+	.tab [role='tab'][aria-selected] {
+		color: var(--sl-color-white);
+		border-color: var(--sl-color-text-accent);
+		font-weight: 600;
+	}
 
-  .tablist-wrapper ~ :global([role='tabpanel']) {
-    margin-top: 1rem;
-  }
+	.tablist-wrapper ~ :global([role='tabpanel']) {
+		margin-top: 1rem;
+	}
 </style>
 
 <script>
-  class StarlightTabs extends HTMLElement {
-    tabs: HTMLAnchorElement[];
-    panels: HTMLElement[];
+	class StarlightTabs extends HTMLElement {
+		tabs: HTMLAnchorElement[];
+		panels: HTMLElement[];
 
-    constructor() {
-      super();
-      const tablist = this.querySelector<HTMLUListElement>('[role="tablist"]')!;
-      this.tabs = [
-        ...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]'),
-      ];
-      this.panels = [
-        ...this.querySelectorAll<HTMLElement>('[role="tabpanel"]'),
-      ];
+		constructor() {
+			super();
+			const tablist = this.querySelector<HTMLUListElement>('[role="tablist"]')!;
+			this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')];
+			this.panels = [...this.querySelectorAll<HTMLElement>('[role="tabpanel"]')];
 
-      this.tabs.forEach((tab, i) => {
-        // Handle clicks for mouse users
-        tab.addEventListener('click', (e) => {
-          e.preventDefault();
-          const currentTab = tablist.querySelector('[aria-selected]');
-          if (e.currentTarget !== currentTab) {
-            this.switchTab(e.currentTarget as HTMLAnchorElement, i);
-          }
-        });
+			this.tabs.forEach((tab, i) => {
+				// Handle clicks for mouse users
+				tab.addEventListener('click', (e) => {
+					e.preventDefault();
+					const currentTab = tablist.querySelector('[aria-selected]');
+					if (e.currentTarget !== currentTab) {
+						this.switchTab(e.currentTarget as HTMLAnchorElement, i);
+					}
+				});
 
-        // Handle keyboard input
-        tab.addEventListener('keydown', (e) => {
-          const index = this.tabs.indexOf(e.currentTarget as any);
-          // Work out which key the user is pressing and
-          // Calculate the new tab's index where appropriate
-          const nextIndex =
-            e.key === 'ArrowLeft'
-              ? index - 1
-              : e.key === 'ArrowRight'
-              ? index + 1
-              : e.key === 'Home'
-              ? 0
-              : e.key === 'End'
-              ? this.tabs.length - 1
-              : null;
-          if (nextIndex === null) return;
-          if (this.tabs[nextIndex]) {
-            e.preventDefault();
-            this.switchTab(this.tabs[nextIndex], nextIndex);
-          }
-        });
-      });
-    }
+				// Handle keyboard input
+				tab.addEventListener('keydown', (e) => {
+					const index = this.tabs.indexOf(e.currentTarget as any);
+					// Work out which key the user is pressing and
+					// Calculate the new tab's index where appropriate
+					const nextIndex =
+						e.key === 'ArrowLeft'
+							? index - 1
+							: e.key === 'ArrowRight'
+							? index + 1
+							: e.key === 'Home'
+							? 0
+							: e.key === 'End'
+							? this.tabs.length - 1
+							: null;
+					if (nextIndex === null) return;
+					if (this.tabs[nextIndex]) {
+						e.preventDefault();
+						this.switchTab(this.tabs[nextIndex], nextIndex);
+					}
+				});
+			});
+		}
 
-    switchTab(newTab: HTMLAnchorElement | null | undefined, index: number) {
-      if (!newTab) return;
+		switchTab(newTab: HTMLAnchorElement | null | undefined, index: number) {
+			if (!newTab) return;
 
-      // Mark all tabs as unselected and hide all tab panels.
-      this.tabs.forEach((tab) => {
-        tab.removeAttribute('aria-selected');
-        tab.setAttribute('tabindex', '-1');
-      });
-      this.panels.forEach((oldPanel) => {
-        oldPanel.hidden = true;
-      });
+			// Mark all tabs as unselected and hide all tab panels.
+			this.tabs.forEach((tab) => {
+				tab.removeAttribute('aria-selected');
+				tab.setAttribute('tabindex', '-1');
+			});
+			this.panels.forEach((oldPanel) => {
+				oldPanel.hidden = true;
+			});
 
-      // Show new panel and mark new tab as selected.
-      const newPanel = this.panels[index];
-      if (newPanel) newPanel.hidden = false;
-      // Restore active tab to the default tab order.
-      newTab.removeAttribute('tabindex');
-      newTab.setAttribute('aria-selected', 'true');
-      newTab.focus();
-    }
-  }
+			// Show new panel and mark new tab as selected.
+			const newPanel = this.panels[index];
+			if (newPanel) newPanel.hidden = false;
+			// Restore active tab to the default tab order.
+			newTab.removeAttribute('tabindex');
+			newTab.setAttribute('aria-selected', 'true');
+			newTab.focus();
+		}
+	}
 
-  customElements.define('starlight-tabs', StarlightTabs);
+	customElements.define('starlight-tabs', StarlightTabs);
 </script>