@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/tabs.examples.md

@@ -0,0 +1,1247 @@
+<!-- index: ./index.md -->
+# tabs
+
+`data-ui="tabs"` · Switches between panels of related content.
+
+## Examples
+
+### Playground
+
+One family with every axis on it, driven by the controls below the canvas. Tab into it once: the list is a single stop, and the arrows move the selection from there.
+
+Excerpt — not a complete module
+
+```tsx
+<Tabs defaultValue="summary">
+  <TabList aria-label="Order">
+    <Tab value="summary">Summary</Tab>
+    <Tab value="items">Items</Tab>
+  </TabList>
+  <TabPanel value="summary">Delivery expected on September 12.</TabPanel>
+  <TabPanel value="items">Three items.</TabPanel>
+</Tabs>;
+```
+
+### Whether focus selects
+
+Automatic is the APG’s recommendation for panels that are already loaded; manual moves focus and waits for Enter or Space, which is what a panel that fetches needs.
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs, type TabsActivation } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const MODES: { activation: TabsActivation; caption: string }[] = [
+  { activation: 'automatic', caption: 'Automatic: the arrow keys select as they move.' },
+  { activation: 'manual', caption: 'Manual: the arrow keys move focus; Enter or Space selects.' },
+];
+
+const REPORTS = [
+  { value: 'revenue', label: 'Revenue', panel: 'Revenue this quarter: $412,800.00.' },
+  { value: 'margin', label: 'Margin', panel: 'Gross margin this quarter: 38.4%.' },
+  { value: 'returns', label: 'Returns', panel: 'Return rate this quarter: 2.1%.' },
+];
+
+export default function TabsActivationExample() {
+  return (
+    <Stack gap={8}>
+      {MODES.map((mode) => (
+        <Stack key={mode.activation} gap={3}>
+          <Text size="sm" tone="muted">
+            {mode.caption}
+          </Text>
+          <Tabs activation={mode.activation} defaultValue="revenue">
+            <TabList aria-label="Quarterly reports">
+              {REPORTS.map((report) => (
+                <Tab key={report.value} value={report.value}>
+                  {report.label}
+                </Tab>
+              ))}
+            </TabList>
+            {REPORTS.map((report) => (
+              <TabPanel key={report.value} value={report.value}>
+                <Text size="sm">{report.panel}</Text>
+              </TabPanel>
+            ))}
+          </Tabs>
+        </Stack>
+      ))}
+    </Stack>
+  );
+}
+```
+
+### Which way the list runs
+
+A horizontal list scrolls and refuses the up and down arrows, so the page keeps scrolling with focus inside it; a vertical one stacks, turns the track and the marker, and announces aria-orientation.
+
+Excerpt — not a complete module
+
+```tsx
+<Tabs defaultValue="a" orientation="vertical">
+  <TabList aria-label="Settings">
+    <Tab value="a">Profile</Tab>
+    <Tab value="b">Notifications</Tab>
+  </TabList>
+  <TabPanel value="a">Name and photo.</TabPanel>
+  <TabPanel value="b">Email notices.</TabPanel>
+</Tabs>;
+```
+
+### The two ways a list is drawn
+
+Line is a row of labels over a hairline; contained is a sunken track holding a surface per tab; and track="none" keeps the labels and drops the hairline, for a list standing on a line the page already drew. All three keep the accent marker, which is what survives the high-contrast scheme after every surface flattens.
+
+Excerpt — not a complete module
+
+```tsx
+<Tabs defaultValue="a" variant="line" />;
+<Tabs defaultValue="a" variant="contained" />;
+
+// Standing on a line the page already drew — a card header, a table's rule.
+<Tabs defaultValue="a" track="none" />;
+```
+
+### The step the list sits at
+
+Height, type, padding and the inner gap all come from the control scales, so switching the toolbar to dense shrinks each step whole rather than in parts.
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs, type TabsSize } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const SIZES: TabsSize[] = ['sm', 'md', 'lg'];
+
+const VIEWS = [
+  { value: 'stock', label: 'Stock', panel: '1,284 units on hand across 3 warehouses.' },
+  { value: 'movements', label: 'Movements', panel: '46 movements in the last 7 days.' },
+  {
+    value: 'suppliers',
+    label: 'Suppliers',
+    panel: 'Ordered from Brightline Studio and Quill & Co.',
+  },
+];
+
+export default function TabsSizes() {
+  return (
+    <Stack gap={8}>
+      {SIZES.map((size) => (
+        <Tabs key={size} defaultValue="stock" size={size}>
+          <TabList aria-label="Product OAK-90">
+            {VIEWS.map((view) => (
+              <Tab key={view.value} value={view.value}>
+                {view.label}
+              </Tab>
+            ))}
+          </TabList>
+          {VIEWS.map((view) => (
+            <TabPanel key={view.value} value={view.value}>
+              <Text size="sm">{view.panel}</Text>
+            </TabPanel>
+          ))}
+        </Tabs>
+      ))}
+    </Stack>
+  );
+}
+```
+
+### How the line is divided
+
+auto makes each tab as wide as its label and scrolls what does not fit; equal divides the line between them and is the one place a horizontal label is ever truncated.
+
+Example
+
+```tsx
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const QUEUES = [
+  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },
+  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },
+  {
+    value: 'inspection',
+    label: 'Awaiting inspection',
+    panel: '3 returns wait for a quality check before restocking.',
+  },
+];
+
+export default function TabsFit() {
+  return (
+    <Tabs defaultValue="incoming" fit="equal" variant="contained">
+      <TabList aria-label="Warehouse queues">
+        {QUEUES.map((queue) => (
+          <Tab key={queue.value} value={queue.value}>
+            {queue.label}
+          </Tab>
+        ))}
+      </TabList>
+      {QUEUES.map((queue) => (
+        <TabPanel key={queue.value} value={queue.value}>
+          <Text size="sm">{queue.panel}</Text>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### Every state the family paints
+
+A tab that is not selected raises its ink on hover. In the line variant a neutral bar appears where the mark would go and darkens on press; in the contained variant the cell fills instead. A selected one does neither, because it is already at full strength. Disabled is the native attribute, which is also what makes the browser skip it.
+
+Excerpt — not a complete module
+
+```tsx
+<Tabs defaultValue="a">
+  <TabList aria-label="Order">
+    <Tab value="a">Available</Tab>
+    <Tab disabled value="b">
+      Unavailable
+    </Tab>
+  </TabList>
+  <TabPanel value="a">…</TabPanel>
+</Tabs>;
+
+<Tabs defaultValue="a" disabled />;
+```
+
+### When a panel exists
+
+active builds the panel on selection and drops it after, lazy keeps it once built, eager builds every one up front. A panel holding a table or a chart is the reason the default is active.
+
+Example
+
+```tsx
+import { Field, FieldLabel } from '@slotted/react/field';
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs, type TabsMount } from '@slotted/react/tabs';
+import { Textarea } from '@slotted/react/textarea';
+import { Text } from '@slotted/react/typography';
+
+const MODES: { mount: TabsMount; caption: string }[] = [
+  { mount: 'active', caption: 'mount="active": the note is built again, empty, on return.' },
+  { mount: 'lazy', caption: 'mount="lazy": the note keeps what was typed.' },
+];
+
+export default function TabsMountExample() {
+  return (
+    <Stack gap={8}>
+      {MODES.map((mode) => (
+        <Stack key={mode.mount} gap={3}>
+          <Text size="sm" tone="muted">
+            {mode.caption}
+          </Text>
+          <Tabs defaultValue="note" mount={mode.mount}>
+            <TabList aria-label="Order SO-1187">
+              <Tab value="note">Picking note</Tab>
+              <Tab value="summary">Summary</Tab>
+            </TabList>
+            <TabPanel value="note">
+              <Field>
+                <FieldLabel>Note for the picker</FieldLabel>
+                <Textarea placeholder="Pack the brackets separately" rows={2} />
+              </Field>
+            </TabPanel>
+            <TabPanel value="summary">
+              <Text size="sm">3 lines, picked from zone C at Reno, NV.</Text>
+            </TabPanel>
+          </Tabs>
+        </Stack>
+      ))}
+    </Stack>
+  );
+}
+```
+
+### Tabs a reader can close
+
+Delete closes the focused tab and the pointer closes it from the control; the family then asks for the neighbour — the following tab, or the preceding one when the closed tab was last — and removes nothing itself.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const OPEN = [
+  { id: 'SO-1187', customer: 'Harbor & Pine', total: '$1,240.00' },
+  { id: 'SO-1188', customer: 'Brightline Studio', total: '$318.50' },
+  { id: 'SO-1190', customer: 'Northgate Labs', total: '$2,906.10' },
+  { id: 'SO-1191', customer: 'Verde Kitchen', total: '$86.00' },
+];
+
+export default function TabsDismissible() {
+  const [orders, setOrders] = useState(OPEN);
+  const [active, setActive] = useState('SO-1188');
+
+  if (orders.length === 0) {
+    return (
+      <Stack gap={3} align="start">
+        <Text size="sm" tone="muted">
+          No orders open.
+        </Text>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            setOrders(OPEN);
+            setActive('SO-1187');
+          }}
+        >
+          Reopen orders
+        </Button>
+      </Stack>
+    );
+  }
+
+  return (
+    <Tabs
+      value={active}
+      onValueChange={setActive}
+      onTabDismiss={(value) => setOrders((open) => open.filter((order) => order.id !== value))}
+    >
+      <TabList aria-label="Open orders">
+        {orders.map((order) => (
+          <Tab key={order.id} dismissible dismissLabel={`Close ${order.id}`} value={order.id}>
+            {order.id}
+          </Tab>
+        ))}
+      </TabList>
+      {orders.map((order) => (
+        <TabPanel key={order.id} value={order.id}>
+          <Text size="sm">
+            {order.customer}, {order.total}.
+          </Text>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### A list that does not fit
+
+The list scrolls rather than wrapping or truncating, two paging controls appear only while there is somewhere to scroll, and the arrow keys bring each tab into view as focus reaches it.
+
+Example
+
+```tsx
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const WAREHOUSES = [
+  { code: 'RNO', city: 'Reno, NV', open: 42 },
+  { code: 'CMH', city: 'Columbus, OH', open: 37 },
+  { code: 'SAV', city: 'Savannah, GA', open: 18 },
+  { code: 'DFW', city: 'Dallas, TX', open: 51 },
+  { code: 'EWR', city: 'Newark, NJ', open: 29 },
+  { code: 'ONT', city: 'Ontario, CA', open: 64 },
+  { code: 'JOT', city: 'Joliet, IL', open: 23 },
+  { code: 'MEM', city: 'Memphis, TN', open: 46 },
+  { code: 'ABE', city: 'Allentown, PA', open: 12 },
+  { code: 'TIW', city: 'Tacoma, WA', open: 31 },
+  { code: 'SCK', city: 'Stockton, CA', open: 9 },
+  { code: 'IND', city: 'Indianapolis, IN', open: 27 },
+];
+
+export default function TabsOverflow() {
+  return (
+    <Tabs defaultValue="MEM">
+      <TabList aria-label="Warehouses">
+        {WAREHOUSES.map((warehouse) => (
+          <Tab key={warehouse.code} value={warehouse.code}>
+            {warehouse.city}
+          </Tab>
+        ))}
+      </TabList>
+      {WAREHOUSES.map((warehouse) => (
+        <TabPanel key={warehouse.code} value={warehouse.code}>
+          <Text size="sm">
+            {warehouse.code}: {warehouse.open} open orders to ship today.
+          </Text>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### A view a router can deep-link to
+
+href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.
+
+Example
+
+```tsx
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const VIEWS = [
+  { value: 'summary', label: 'Summary', panel: 'Harbor & Pine, $1,240.00, Net 30.' },
+  { value: 'items', label: 'Items', panel: '3 lines: shelves, brackets and an assembly kit.' },
+  { value: 'shipments', label: 'Shipments', panel: 'Atlas Freight, expected September 12.' },
+];
+
+export default function TabsLinks() {
+  return (
+    <Tabs defaultValue="summary">
+      <TabList aria-label="Order SO-1187">
+        {VIEWS.map((view) => (
+          <Tab key={view.value} href={`#order-${view.value}`} value={view.value}>
+            {view.label}
+          </Tab>
+        ))}
+      </TabList>
+      {VIEWS.map((view) => (
+        <TabPanel key={view.value} value={view.value}>
+          <Text size="sm">{view.panel}</Text>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### Content the family did not choose
+
+An unbroken digest breaks inside its own tab instead of setting the list’s width, a right-to-left label reads its own way inside a page that reads the other, and a long label scrolls rather than wrapping.
+
+Excerpt — not a complete module
+
+```tsx
+<Tabs defaultValue="a">
+  <TabList aria-label="Extreme content">
+    <Tab value="a">sha256:9f86d081884c7d659a2feaa0c55ad015</Tab>
+    <Tab value="b">بيانات التسليم</Tab>
+  </TabList>
+</Tabs>;
+```
+
+### Setting it once, and reaching past it
+
+The provider carries the seven decisions an application takes once, render substitutes every root so a list can be a real nav, and the actions slot is where a Toolbar goes.
+
+Excerpt — not a complete module
+
+```tsx
+<TabsDefaultsProvider size="sm" variant="contained">
+  <Tabs defaultValue="a" render={(props) => <section {...props} />}>
+    <TabList aria-label="Order" render={(props) => <nav {...props} />} />
+    <TabActions>
+      <Toolbar aria-label="Order actions" size="sm">
+        <Button variant="ghost">Export</Button>
+      </Toolbar>
+    </TabActions>
+  </Tabs>
+</TabsDefaultsProvider>;
+```
+
+### The APG table, and where focus lands
+
+Tab enters on the selected tab and leaves to the panel, the arrows of the flow axis move and wrap, Home and End reach the ends, and Delete closes a dismissible tab and moves focus to its neighbour.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const STEPS = [
+  { value: 'picking', label: 'Picking', panel: '18 lines to pick in zone C.' },
+  { value: 'packing', label: 'Packing', panel: '6 orders waiting at station 2.' },
+  { value: 'loading', label: 'Loading', panel: 'Atlas Freight trailer at dock 4 until 15:30.' },
+];
+
+export default function TabsKeyboard() {
+  const [last, setLast] = useState('Nothing selected yet.');
+
+  return (
+    <Stack gap={5}>
+      <Tabs
+        defaultValue="picking"
+        onValueChange={(value, request) => {
+          const step = STEPS.find((item) => item.value === value);
+          setLast(`${step?.label} selected by ${request.reason}.`);
+        }}
+      >
+        <TabList aria-label="Outbound shift">
+          {STEPS.map((step) => (
+            <Tab key={step.value} value={step.value}>
+              {step.label}
+            </Tab>
+          ))}
+        </TabList>
+        {STEPS.map((step) => (
+          <TabPanel key={step.value} value={step.value}>
+            <Text size="sm">{step.panel}</Text>
+          </TabPanel>
+        ))}
+      </Tabs>
+      <Text size="sm" tone="muted">
+        {last}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+### actions.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Tab, TabActions, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Toolbar } from '@slotted/react/toolbar';
+import { Text } from '@slotted/react/typography';
+
+const VIEWS = [
+  { value: 'lines', label: 'Lines', panel: '6 lines from Quill & Co., $4,812.00.' },
+  { value: 'receipts', label: 'Receipts', panel: '4 of 6 lines received at Columbus, OH.' },
+  { value: 'history', label: 'History', panel: 'Approved by Marco Ilić on September 22.' },
+];
+
+export default function TabsActionsExample() {
+  return (
+    <Tabs defaultValue="lines">
+      <TabList aria-label="Purchase order PO-4521">
+        {VIEWS.map((view) => (
+          <Tab key={view.value} value={view.value}>
+            {view.label}
+          </Tab>
+        ))}
+      </TabList>
+      <TabActions>
+        <Toolbar aria-label="Purchase order actions" size="sm">
+          <Button size="sm" start={<Glyph name="upload" />} tone="secondary" variant="ghost">
+            Export
+          </Button>
+          <Button size="sm" start={<Glyph name="copy" />} tone="secondary" variant="ghost">
+            Duplicate
+          </Button>
+        </Toolbar>
+      </TabActions>
+      {VIEWS.map((view) => (
+        <TabPanel key={view.value} value={view.value}>
+          <Text size="sm">{view.panel}</Text>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### controlled.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const VIEWS = [
+  { value: 'orders', label: 'Orders', panel: '12 open orders, $14,380.00 in total.' },
+  {
+    value: 'invoices',
+    label: 'Invoices',
+    panel: 'INV-20877 and INV-20902 are past due: $2,146.50.',
+  },
+  { value: 'payments', label: 'Payments', panel: 'Last payment: $3,200.00 on September 30.' },
+];
+
+export default function TabsControlled() {
+  const [view, setView] = useState('orders');
+
+  return (
+    <Stack gap={5}>
+      <Inline gap={3} align="center" justify="between">
+        <Text size="sm" tone="muted">
+          2 invoices are past due.
+        </Text>
+        <Button size="sm" variant="outline" onClick={() => setView('invoices')}>
+          Review invoices
+        </Button>
+      </Inline>
+      <Tabs value={view} onValueChange={setView}>
+        <TabList aria-label="Account Harbor & Pine">
+          {VIEWS.map((item) => (
+            <Tab key={item.value} value={item.value}>
+              {item.label}
+            </Tab>
+          ))}
+        </TabList>
+        {VIEWS.map((item) => (
+          <TabPanel key={item.value} value={item.value}>
+            <Text size="sm">{item.panel}</Text>
+          </TabPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
+}
+```
+
+### defaults.tsx
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs, TabsDefaultsProvider } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+export default function TabsDefaults() {
+  return (
+    <TabsDefaultsProvider size="sm" variant="contained">
+      <Stack gap={8}>
+        <Tabs defaultValue="stock">
+          <TabList aria-label="Product OAK-90">
+            <Tab value="stock">Stock</Tab>
+            <Tab value="pricing">Pricing</Tab>
+          </TabList>
+          <TabPanel value="stock">
+            <Text size="sm">1,284 units on hand.</Text>
+          </TabPanel>
+          <TabPanel value="pricing">
+            <Text size="sm">List price $180.00, cost $96.40.</Text>
+          </TabPanel>
+        </Tabs>
+        <Tabs defaultValue="open" variant="line">
+          <TabList aria-label="Purchase orders">
+            <Tab value="open">Open</Tab>
+            <Tab value="received">Received</Tab>
+          </TabList>
+          <TabPanel value="open">
+            <Text size="sm">3 purchase orders for OAK-90 are open.</Text>
+          </TabPanel>
+          <TabPanel value="received">
+            <Text size="sm">Last received on September 22: 400 units.</Text>
+          </TabPanel>
+        </Tabs>
+      </Stack>
+    </TabsDefaultsProvider>
+  );
+}
+```
+
+### disabled.tsx
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+export default function TabsDisabled() {
+  return (
+    <Stack gap={8}>
+      <Tabs defaultValue="summary">
+        <TabList aria-label="Order SO-1192">
+          <Tab value="summary">Summary</Tab>
+          <Tab value="items">Items</Tab>
+          <Tab disabled value="invoice">
+            Invoice
+          </Tab>
+        </TabList>
+        <TabPanel value="summary">
+          <Text size="sm">Awaiting pickup. The invoice is issued once the order ships.</Text>
+        </TabPanel>
+        <TabPanel value="items">
+          <Text size="sm">5 items from the Reno, NV warehouse.</Text>
+        </TabPanel>
+        <TabPanel value="invoice">
+          <Text size="sm">Invoice INV-20931.</Text>
+        </TabPanel>
+      </Tabs>
+      <Tabs defaultValue="summary" disabled>
+        <TabList aria-label="Order SO-1188">
+          <Tab value="summary">Summary</Tab>
+          <Tab value="items">Items</Tab>
+          <Tab value="invoice">Invoice</Tab>
+        </TabList>
+        <TabPanel value="summary">
+          <Text size="sm">Locked while the warehouse recounts this order.</Text>
+        </TabPanel>
+        <TabPanel value="items">
+          <Text size="sm">2 items from the Columbus, OH warehouse.</Text>
+        </TabPanel>
+        <TabPanel value="invoice">
+          <Text size="sm">Invoice INV-20917.</Text>
+        </TabPanel>
+      </Tabs>
+    </Stack>
+  );
+}
+```
+
+### filter.tsx
+
+Example
+
+```tsx
+import { useId, useState } from 'react';
+import { Badge } from '@slotted/react/badge';
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/table';
+import { Tab, TabList, Tabs } from '@slotted/react/tabs';
+
+const ORDERS = [
+  { id: 'SO-1187', customer: 'Harbor & Pine', status: 'open', total: '$1,240.00' },
+  { id: 'SO-1188', customer: 'Brightline Studio', status: 'shipped', total: '$318.50' },
+  { id: 'SO-1190', customer: 'Northgate Labs', status: 'open', total: '$2,906.10' },
+  { id: 'SO-1191', customer: 'Verde Kitchen', status: 'delayed', total: '$86.00' },
+  { id: 'SO-1193', customer: 'Quill & Co.', status: 'shipped', total: '$540.25' },
+];
+
+const FILTERS = [
+  { value: 'all', label: 'All' },
+  { value: 'open', label: 'Open' },
+  { value: 'delayed', label: 'Delayed' },
+  { value: 'shipped', label: 'Shipped' },
+];
+
+const STATUS: Record<string, string> = { open: 'Open', delayed: 'Delayed', shipped: 'Shipped' };
+
+const matching = (filter: string) =>
+  filter === 'all' ? ORDERS : ORDERS.filter((order) => order.status === filter);
+
+export default function TabsFilter() {
+  const tableId = useId();
+  const [filter, setFilter] = useState('all');
+
+  return (
+    <Stack gap={4}>
+      <Tabs size="sm" value={filter} onValueChange={setFilter}>
+        <TabList aria-label="Orders by status">
+          {FILTERS.map((item) => (
+            <Tab
+              key={item.value}
+              controls={tableId}
+              end={<Badge count={matching(item.value).length} showZero size="sm" />}
+              value={item.value}
+            >
+              {item.label}
+            </Tab>
+          ))}
+        </TabList>
+      </Tabs>
+      <Table columns={4} id={tableId}>
+        <TableContent aria-label="Orders">
+          <TableHead>
+            <TableRow>
+              <TableColumnHeader>Order</TableColumnHeader>
+              <TableColumnHeader>Customer</TableColumnHeader>
+              <TableColumnHeader>Status</TableColumnHeader>
+              <TableColumnHeader numeric>Total</TableColumnHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {matching(filter).map((order) => (
+              <TableRow key={order.id} value={order.id}>
+                <TableRowHeader>{order.id}</TableRowHeader>
+                <TableCell>{order.customer}</TableCell>
+                <TableCell>{STATUS[order.status]}</TableCell>
+                <TableCell numeric>{order.total}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContent>
+      </Table>
+    </Stack>
+  );
+}
+```
+
+### icons.tsx
+
+Example
+
+```tsx
+import { Badge } from '@slotted/react/badge';
+import { Glyph, type GlyphName, Icon } from '@slotted/react/icon';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const VIEWS: { value: string; label: string; icon: GlyphName; count?: number; panel: string }[] = [
+  {
+    value: 'overview',
+    label: 'Overview',
+    icon: 'file-text',
+    panel: 'Harbor & Pine, customer since 2021. Net 30 terms.',
+  },
+  {
+    value: 'orders',
+    label: 'Orders',
+    icon: 'inbox',
+    count: 12,
+    panel: '12 open orders, $14,380.00 in total.',
+  },
+  {
+    value: 'contacts',
+    label: 'Contacts',
+    icon: 'person',
+    count: 3,
+    panel: 'Dana Whitfield, Marco Ilić and Priya Raman.',
+  },
+  {
+    value: 'files',
+    label: 'Files',
+    icon: 'paperclip',
+    panel: 'Signed credit application and a W-9 form.',
+  },
+];
+
+export default function TabsIcons() {
+  return (
+    <Tabs defaultValue="orders">
+      <TabList aria-label="Customer Harbor & Pine">
+        {VIEWS.map((view) => (
+          <Tab
+            key={view.value}
+            value={view.value}
+            start={
+              <Icon>
+                <Glyph name={view.icon} />
+              </Icon>
+            }
+            end={view.count === undefined ? undefined : <Badge count={view.count} size="sm" />}
+          >
+            {view.label}
+          </Tab>
+        ))}
+      </TabList>
+      {VIEWS.map((view) => (
+        <TabPanel key={view.value} value={view.value}>
+          <Text size="sm">{view.panel}</Text>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### record-header.tsx
+
+Example
+
+```tsx
+import { Badge } from '@slotted/react/badge';
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import { Glyph, Icon } from '@slotted/react/icon';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/table';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Heading, Text } from '@slotted/react/typography';
+
+const FACTS = [
+  ['Customer', 'Harbor & Pine'],
+  ['Placed', 'September 8, 2026'],
+  ['Payment terms', 'Net 30'],
+  ['Ship to', '88 Dock Street, Portland, OR'],
+  ['Carrier', 'Atlas Freight'],
+  ['Total', '$1,240.00'],
+];
+
+const LINES = [
+  { sku: 'OAK-90', item: 'Oak shelf, 90 cm', quantity: 4, amount: '$720.00' },
+  { sku: 'BRK-ST', item: 'Wall bracket, steel', quantity: 8, amount: '$192.00' },
+  { sku: 'KIT-AS', item: 'Assembly kit', quantity: 1, amount: '$328.00' },
+];
+
+const ACTIVITY = [
+  'Sep 9, 14:02 — Picked at Reno, NV by Luis Ortega',
+  'Sep 8, 16:45 — Payment approved',
+  'Sep 8, 16:41 — Order placed by Dana Whitfield',
+];
+
+export default function TabsRecordHeader() {
+  return (
+    <Stack gap={6}>
+      <Inline gap={4} align="start" justify="between" wrap="wrap">
+        <Stack gap={1}>
+          <Inline gap={3} align="center">
+            <Heading level={2} size="xl">
+              Order SO-1187
+            </Heading>
+            <Badge tone="warning">Awaiting pickup</Badge>
+          </Inline>
+          <Text size="sm" tone="muted">
+            Harbor & Pine · Placed September 8, 2026
+          </Text>
+        </Stack>
+        <Inline gap={2}>
+          <Button size="sm" start={<Glyph name="file-text" />} tone="secondary" variant="outline">
+            Packing slip
+          </Button>
+          <Button size="sm">Mark shipped</Button>
+        </Inline>
+      </Inline>
+      <Tabs defaultValue="overview">
+        <TabList aria-label="Order SO-1187">
+          <Tab
+            start={
+              <Icon>
+                <Glyph name="file-text" />
+              </Icon>
+            }
+            value="overview"
+          >
+            Overview
+          </Tab>
+          <Tab
+            end={<Badge count={LINES.length} size="sm" />}
+            start={
+              <Icon>
+                <Glyph name="inbox" />
+              </Icon>
+            }
+            value="items"
+          >
+            Items
+          </Tab>
+          <Tab
+            end={<Badge count={ACTIVITY.length} size="sm" />}
+            start={
+              <Icon>
+                <Glyph name="clock" />
+              </Icon>
+            }
+            value="activity"
+          >
+            Activity
+          </Tab>
+        </TabList>
+        <TabPanel value="overview">
+          <DescriptionList columns={2}>
+            {FACTS.map(([term, description]) => (
+              <DescriptionListItem key={term}>
+                <DescriptionListTerm>{term}</DescriptionListTerm>
+                <DescriptionListDescription>{description}</DescriptionListDescription>
+              </DescriptionListItem>
+            ))}
+          </DescriptionList>
+        </TabPanel>
+        <TabPanel value="items">
+          <Table columns={4}>
+            <TableContent aria-label="Order lines">
+              <TableHead>
+                <TableRow>
+                  <TableColumnHeader>SKU</TableColumnHeader>
+                  <TableColumnHeader>Item</TableColumnHeader>
+                  <TableColumnHeader numeric>Quantity</TableColumnHeader>
+                  <TableColumnHeader numeric>Amount</TableColumnHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {LINES.map((line) => (
+                  <TableRow key={line.sku} value={line.sku}>
+                    <TableRowHeader>{line.sku}</TableRowHeader>
+                    <TableCell>{line.item}</TableCell>
+                    <TableCell numeric>{line.quantity}</TableCell>
+                    <TableCell numeric>{line.amount}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </TableContent>
+          </Table>
+        </TabPanel>
+        <TabPanel value="activity">
+          <Stack gap={2}>
+            {ACTIVITY.map((entry) => (
+              <Text key={entry} size="sm">
+                {entry}
+              </Text>
+            ))}
+          </Stack>
+        </TabPanel>
+      </Tabs>
+    </Stack>
+  );
+}
+```
+
+### settings.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';
+import { Glyph, Icon } from '@slotted/react/icon';
+import { Stack } from '@slotted/react/stack';
+import { Switch } from '@slotted/react/switch';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { TextField } from '@slotted/react/text-field';
+import { Heading, Text } from '@slotted/react/typography';
+
+const PLAN = [
+  ['Plan', 'Operations, annual'],
+  ['Seats', '24 of 30 in use'],
+  ['Next invoice', 'November 1, 2026: $4,320.00'],
+];
+
+export default function TabsSettings() {
+  return (
+    <Tabs defaultValue="workspace" orientation="vertical">
+      <TabList aria-label="Settings">
+        <Tab
+          start={
+            <Icon>
+              <Glyph name="file-text" />
+            </Icon>
+          }
+          value="workspace"
+        >
+          Workspace
+        </Tab>
+        <Tab
+          start={
+            <Icon>
+              <Glyph name="bell" />
+            </Icon>
+          }
+          value="notifications"
+        >
+          Notifications
+        </Tab>
+        <Tab
+          start={
+            <Icon>
+              <Glyph name="lock" />
+            </Icon>
+          }
+          value="security"
+        >
+          Security
+        </Tab>
+        <Tab
+          start={
+            <Icon>
+              <Glyph name="calendar" />
+            </Icon>
+          }
+          value="billing"
+        >
+          Billing
+        </Tab>
+      </TabList>
+      <TabPanel value="workspace">
+        <Stack gap={5} align="start">
+          <Heading level={3} size="md">
+            Workspace
+          </Heading>
+          <Field>
+            <FieldLabel>Company name</FieldLabel>
+            <TextField defaultValue="Northwind Traders" />
+            <FieldDescription>Printed on every invoice and packing slip.</FieldDescription>
+          </Field>
+          <Field>
+            <FieldLabel>Support email</FieldLabel>
+            <TextField defaultValue="support@northwind.example" type="email" />
+          </Field>
+          <Button size="sm">Save changes</Button>
+        </Stack>
+      </TabPanel>
+      <TabPanel value="notifications">
+        <Stack gap={4}>
+          <Heading level={3} size="md">
+            Notifications
+          </Heading>
+          <Switch defaultChecked>Low stock</Switch>
+          <Switch defaultChecked>Late pickups</Switch>
+          <Switch>Cycle count variances</Switch>
+        </Stack>
+      </TabPanel>
+      <TabPanel value="security">
+        <Stack gap={4}>
+          <Heading level={3} size="md">
+            Security
+          </Heading>
+          <Switch defaultChecked>Require two-factor sign-in</Switch>
+          <Text size="sm" tone="muted">
+            Changed by Dana Whitfield on August 14.
+          </Text>
+        </Stack>
+      </TabPanel>
+      <TabPanel value="billing">
+        <Stack gap={4}>
+          <Heading level={3} size="md">
+            Billing
+          </Heading>
+          <DescriptionList>
+            {PLAN.map(([term, description]) => (
+              <DescriptionListItem key={term}>
+                <DescriptionListTerm>{term}</DescriptionListTerm>
+                <DescriptionListDescription>{description}</DescriptionListDescription>
+              </DescriptionListItem>
+            ))}
+          </DescriptionList>
+        </Stack>
+      </TabPanel>
+    </Tabs>
+  );
+}
+```
+
+### variants.tsx
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  type TabsTrack,
+  type TabsVariant,
+} from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const LOOKS: { variant: TabsVariant; track: TabsTrack }[] = [
+  { variant: 'line', track: 'line' },
+  { variant: 'contained', track: 'line' },
+  { variant: 'line', track: 'none' },
+];
+
+const QUEUES = [
+  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },
+  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },
+  { value: 'returns', label: 'Returns', panel: '3 returns awaiting inspection.' },
+];
+
+export default function TabsVariants() {
+  return (
+    <Stack gap={8}>
+      {LOOKS.map((look) => (
+        <Tabs
+          key={`${look.variant}-${look.track}`}
+          defaultValue="incoming"
+          track={look.track}
+          variant={look.variant}
+        >
+          <TabList aria-label="Warehouse queues">
+            {QUEUES.map((queue) => (
+              <Tab key={queue.value} value={queue.value}>
+                {queue.label}
+              </Tab>
+            ))}
+          </TabList>
+          {QUEUES.map((queue) => (
+            <TabPanel key={queue.value} value={queue.value}>
+              <Text size="sm">{queue.panel}</Text>
+            </TabPanel>
+          ))}
+        </Tabs>
+      ))}
+    </Stack>
+  );
+}
+```
+
+### vertical.tsx
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';
+import { Text } from '@slotted/react/typography';
+
+const SECTIONS = [
+  {
+    value: 'general',
+    label: 'General',
+    lines: ['Code: RNO', 'Address: 1450 Terminal Way, Reno, NV 89502', 'Time zone: Pacific Time'],
+  },
+  {
+    value: 'receiving',
+    label: 'Receiving',
+    lines: ['Dock hours: 06:00–14:00, Monday to Friday', 'Appointment required for full trucks'],
+  },
+  {
+    value: 'shipping',
+    label: 'Shipping',
+    lines: ['Carriers: Atlas Freight, Ridgeway Parcel', 'Daily cut-off: 15:30'],
+  },
+  {
+    value: 'storage',
+    label: 'Storage',
+    lines: ['Zones: A–F, 1,920 bin locations', 'Cycle count: every 30 days'],
+  },
+];
+
+export default function TabsVertical() {
+  return (
+    <Tabs defaultValue="general" orientation="vertical">
+      <TabList aria-label="Warehouse settings">
+        {SECTIONS.map((section) => (
+          <Tab key={section.value} value={section.value}>
+            {section.label}
+          </Tab>
+        ))}
+      </TabList>
+      {SECTIONS.map((section) => (
+        <TabPanel key={section.value} value={section.value}>
+          <Stack gap={2}>
+            {section.lines.map((line) => (
+              <Text key={line} size="sm">
+                {line}
+              </Text>
+            ))}
+          </Stack>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}
+```