WIP

docs/src/app/experiments/tabs-basic.tsx

@@ -0,0 +1,39 @@
+'use client';
+import * as React from 'react';
+import { Tabs } from '@base_ui/react/Tabs';
+import s from './tabs.module.css';
+
+export default function UnstyledTabsIntroduction() {
+  // const [v, sv] = React.useState<string | number | null>(0);
+
+  return (
+    <div>
+      <Tabs.Root
+        className={s.root}
+        // value={v}
+        // onValueChange={(val) => sv(val)}
+        defaultValue={0}
+        onKeyDown={(event) => {
+          console.log('tabs-basic TabsRoot onKeyDown');
+          console.log(event);
+        }}
+      >
+        <Tabs.List className={s.list} activateOnFocus={false}>
+          <Tabs.Tab className={s.tab}>0</Tabs.Tab>
+          <Tabs.Tab className={s.tab}>1</Tabs.Tab>
+          <Tabs.Tab className={s.tab}>2</Tabs.Tab>
+          <Tabs.Indicator className={s.indicator} />
+        </Tabs.List>
+        <Tabs.Panel className={s.panel} keepMounted>
+          0 panel
+        </Tabs.Panel>
+        <Tabs.Panel className={s.panel} keepMounted>
+          1 panel
+        </Tabs.Panel>
+        <Tabs.Panel className={s.panel} keepMounted>
+          2 panel
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  );
+}

docs/src/app/experiments/tabs.module.css

@@ -0,0 +1,115 @@
+.root {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.list {
+  background-color: #ddd;
+  border-radius: 12px;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-evenly;
+  /*  box-shadow: 0 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};*/
+  position: relative;
+}
+
+.tab {
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: black;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  background-color: transparent;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  padding: 10px 12px;
+  margin: 6px;
+  border: none;
+  border-radius: 7px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &[data-selected] {
+    background-color: pink;
+    color: black;
+  }
+}
+
+.panel {
+  width: 100%;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  padding: 20px 12px;
+  background: #fff;
+  border: 1px solid var(--code-6);
+  border-radius: 12px;
+  opacity: 0.6;
+  box-sizing: border-box;
+}
+
+.indicator {
+  display: none;
+  position: absolute;
+  inset: var(--active-tab-top) var(--active-tab-right) var(--active-tab-bottom)
+    var(--active-tab-left);
+  background: var(--code-6);
+  border-radius: 8px;
+  z-index: 0;
+  /*  box-shadow: 0 0 0 0 ${blue[200]};*/
+  outline-width: 0;
+
+  &[data-activation-direction='right'] {
+    transition:
+      left 0.6s 0.1s,
+      right 0.3s,
+      top 0.3s,
+      bottom 0.3s,
+      box-shadow 0.2s;
+  }
+
+  &[data-activation-direction='down'] {
+    transition:
+      top 0.6s 0.1s,
+      bottom 0.3s;
+    left: 0;
+    right: 0;
+    margin: 0 6px;
+  }
+
+  &[data-activation-direction='left'] {
+    transition:
+      left 0.3s,
+      right 0.6s 0.1s,
+      top 0.3s,
+      bottom 0.3s,
+      box-shadow 0.2s;
+  }
+
+  &[data-activation-direction='up'] {
+    transition:
+      top 0.3s,
+      bottom 0.6s 0.1s;
+    left: 0;
+    right: 0;
+    margin: 0 6px;
+  }
+
+  *:has(:focus-visible) > & {
+    box-shadow: 0 0 0 2px blue;
+  }
+}