[tabs] Modernize implementation

[mj12albert]

Summary

• A custom metadata object can be passed into Composite components and hooks

• Replace useCompound with Composite

• Rename direction prop to dir not yet, need to discuss the overall approach further [core] Standardize text direction (RTL/LTR) handling #831

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-751--base-ui.netlify.app/

Generated by 🚫 dangerJS against ab269fd

[mj12albert]

@atomiks Why is stopPropagation() needed here, and is it ever ok to force propagate it? This breaks a test

Given this structure:

<Tabs.Root onKeyDown={handleKeyDown}>
  <Tabs.List>
    <Tabs.Tab value={0} />
    <Tabs.Tab value={1} />
  </Tabs.List>
  {/* tab panels */}
</Tabs.Root>

Tabs.List is a CompositeRoot, so on arrow keys, the event doesn't propagate and handleKeyDown doesn't get called

[atomiks]

I'm not certain on that. It may not be necessary in most cases

[mj12albert]

OK ~ let's let it propagate by default, but I've put a param around it just in case:

if (stopEventPropagation) {
  event.stopPropagation();
}