11---
2- import { Tabs as StarlightTabs } from ' @astrojs/starlight/components' ;
2+ import { Tabs as StarlightTabs } from " @astrojs/starlight/components" ;
33
44export interface Props {
55 group? : string ;
66}
77---
88
99<astro-docs-tabs data-group ={ Astro .props .group } >
10- <StarlightTabs >
11- <slot />
12- </StarlightTabs >
10+ <StarlightTabs >
11+ <slot />
12+ </StarlightTabs >
1313</astro-docs-tabs>
1414
1515<style >
16- astro-docs-tabs {
17- display: block;
18- }
16+ astro-docs-tabs {
17+ display: block;
18+ }
1919</style >
2020
2121<script >
22- class AstroDocsTabs extends HTMLElement {
23- tabs: HTMLAnchorElement[];
24- panels: HTMLElement[];
22+ class AstroDocsTabs extends HTMLElement {
23+ tabs: HTMLAnchorElement[];
24+ panels: HTMLElement[];
2525
26- constructor() {
27- super();
26+ constructor() {
27+ super();
2828
29- const tablist = this.querySelector('[role="tablist"]')!;
30- const starlightTab = this.querySelector('starlight-tabs')!;
31- this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')];
32- this.panels = [...this.querySelectorAll<HTMLElement>('starlight-tabs > [role="tabpanel"]')];
29+ const tablist = this.querySelector('[role="tablist"]')!;
30+ const starlightTab = this.querySelector("starlight-tabs")!;
31+ this.tabs = [
32+ ...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]'),
33+ ];
34+ this.panels = [
35+ ...this.querySelectorAll<HTMLElement>(
36+ 'starlight-tabs > [role="tabpanel"]',
37+ ),
38+ ];
3339
34- if (!this.dataset.group) return;
40+ if (!this.dataset.group) return;
3541
36- const newSwitchTab = (a: HTMLAnchorElement, index: number) => {
37- // @ts-expect-error __proto__ isn't typed
38- starlightTab.__proto__.switchTab.bind(starlightTab)(a, index);
42+ const newSwitchTab = (a: HTMLAnchorElement, index: number) => {
43+ // @ts-expect-error __proto__ isn't typed
44+ starlightTab.__proto__.switchTab.bind(starlightTab)(a, index);
3945
40- const starlightTabs = document.querySelectorAll(
41- `[data-group="${this.dataset.group}"] starlight-tabs`
42- )!;
43- starlightTabs.forEach((tab) => {
44- // @ts-ignore
45- tab.parentElement.switchTab(
46- tab.firstElementChild?.firstElementChild?.children.item(index)?.firstElementChild,
47- index
48- );
49- });
46+ const starlightTabs = document.querySelectorAll(
47+ `[data-group="${this.dataset.group}"] starlight-tabs`,
48+ )!;
49+ starlightTabs.forEach((tab) => {
50+ // @ts-ignore
51+ tab.parentElement.switchTab(
52+ tab.firstElementChild?.firstElementChild?.children.item(index)
53+ ?.firstElementChild,
54+ index,
55+ );
56+ });
5057
51- starlightTab.scrollIntoView();
52- };
53- // @ts-expect-error starlightTab isn't typed as a custom element
54- starlightTab.switchTab = newSwitchTab;
55- }
58+ starlightTab.scrollIntoView();
59+ };
60+ // @ts-expect-error starlightTab isn't typed as a custom element
61+ starlightTab.switchTab = newSwitchTab;
62+ }
5663
57- // modified version to not scroll on switch (https://github.com/withastro/starlight/blob/201eb88f42069e5e575cba578b9cd6a3dfbbc5a9/packages/starlight/user-components/Tabs.astro#L116)
58- switchTab(newTab: HTMLAnchorElement | null | undefined, index: number) {
59- if (!newTab) return;
64+ // modified version to not scroll on switch (https://github.com/withastro/starlight/blob/201eb88f42069e5e575cba578b9cd6a3dfbbc5a9/packages/starlight/user-components/Tabs.astro#L116)
65+ switchTab(newTab: HTMLAnchorElement | null | undefined, index: number) {
66+ if (!newTab) return;
6067
61- // Mark all tabs as unselected and hide all tab panels.
62- this.tabs.forEach((tab) => {
63- tab.removeAttribute(' aria-selected' );
64- });
65- this.panels.forEach((oldPanel) => {
66- oldPanel.hidden = true;
67- });
68+ // Mark all tabs as unselected and hide all tab panels.
69+ this.tabs.forEach((tab) => {
70+ tab.removeAttribute(" aria-selected" );
71+ });
72+ this.panels.forEach((oldPanel) => {
73+ oldPanel.hidden = true;
74+ });
6875
69- // Show new panel and mark new tab as selected.
70- const newPanel = this.panels[index];
71- if (newPanel) newPanel.hidden = false;
72- // Restore active tab to the default tab order.
73- newTab.removeAttribute('tabindex');
74- newTab.setAttribute('aria-selected', 'true');
75- }
76+ // Show new panel and mark new tab as selected.
77+ const newPanel = this.panels[index];
78+ if (newPanel) newPanel.hidden = false;
79+ // Restore active tab to the default tab order.
80+ newTab.removeAttribute("tabindex");
81+ newTab.setAttribute("aria-selected", "true");
7682 }
83+ }
7784
78- customElements.define(' astro-docs-tabs' , AstroDocsTabs);
79- </script >
85+ customElements.define(" astro-docs-tabs" , AstroDocsTabs);
86+ </script >
0 commit comments