docs: s2 docs quick fixes (#8967)

* docs: update the expanded key in s2 accordion docs

* increase gap between icons in available icons

* fix focus ring on search menu tabs

Author: yihuiliao

packages/dev/s2-docs/pages/s2/Accordion.mdx

@@ -36,7 +36,7 @@ import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel, type Key} from
 import {useState} from 'react';
 
 function Example() {
-  let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['system']));
+  let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['settings']));
 
   return (
     <Accordion

packages/dev/s2-docs/src/IconCards.tsx

@@ -64,7 +64,7 @@ export function IconCards() {
     <Autocomplete filter={filter}>
       <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
         <SearchField size="L" aria-label="Search icons" placeholder="Search icons" />
-        <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(8, 8), preserveAspectRatio: true}}>
+        <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
           <ListBox
             onAction={(item) => handleCopyImport(item.toString())}
             items={iconList}

packages/dev/s2-docs/src/Tabs.tsx

@@ -74,7 +74,7 @@ const tablist = style({
   paddingStart: 12,
   flexShrink: 0,
   flexBasis: '[0%]',
-  gap: 32,
+  gap: 24,
   maxWidth: 240,
   height: 'full',
   paddingY: 4
@@ -161,7 +161,7 @@ function TabLine(props: TabLineProps) {
   );
 }
 
-const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({
+const tab = style<TabRenderProps & {density?: 'compact' | 'regular', orientation?: 'vertical' | 'horizontal', labelBehavior?: 'show' | 'hide'}>({
   ...focusRing(),
   display: 'flex',
   color: {
@@ -173,7 +173,26 @@ const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavi
   },
   borderRadius: 'sm',
   gap: 'text-to-visual',
-  height: 48,
+  height: {
+    orientation: {
+      horizontal: {
+        density: {
+          compact: 32,
+          regular: 48
+        }
+      }
+    }
+  },
+  minHeight: {
+    orientation: {
+      vertical: {
+        density: {
+          compact: 32,
+          regular: 48
+        }
+      }
+    }
+  },
   alignItems: 'center',
   position: 'relative',
   cursor: 'default',