Tabs

// The active tab comes from the URL, never from tracked state.
let activeIndex = sections.findIndex((section) => section.fragment === fragment);
let active = sections[activeIndex];

<Tabs>
	<Tabs.List aria-label="Settings sections" activeIndex={activeIndex} tabSize="7rem">
		{sections.map((section, index) => (
			<Tabs.Tab
				key={section.fragment}
				href={section.fragment}
				aria-selected={index === activeIndex}
				mix={[
					is("7rem"),
					// A fragment navigation leaves no history entry the runtime reports,
					// so the island reads the URL back on the press itself.
					on<HTMLAnchorElement, "click">("click", () => {
						fragment = section.fragment;
						void handle.update();
					}),
				]}
			>
				{section.label}
			</Tabs.Tab>
		))}
	</Tabs.List>
	<Tabs.Panels>
		<Tabs.Panel aria-label={active.heading} mix={[vstack({ gap: 2, align: "start" })]}>
			<div mix={[hstack({ gap: 2, align: "center" })]}>
				<span mix={[text("base"), weight("semibold")]}>{active.heading}</span>
				<Badge variant="secondary">{active.fragment}</Badge>
			</div>
			<Text>{active.body}</Text>
		</Tabs.Panel>
	</Tabs.Panels>
</Tabs>