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

package/dist/docs/tabs.json

@@ -0,0 +1,652 @@
+{
+  "family": "tabs",
+  "ui": "tabs",
+  "binding": "react",
+  "catalog": {
+    "group": "Navigation",
+    "summary": "Switches between panels of related content."
+  },
+  "axes": {
+    "activation": [
+      "automatic",
+      "manual"
+    ],
+    "orientation": [
+      "horizontal",
+      "vertical"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "line",
+      "contained"
+    ],
+    "track": [
+      "line",
+      "none"
+    ],
+    "fit": [
+      "auto",
+      "equal"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ]
+  },
+  "members": {
+    "tabs": {
+      "nativeElement": "div",
+      "defaults": {
+        "activation": "automatic",
+        "orientation": "horizontal",
+        "size": "md",
+        "variant": "line",
+        "track": "line",
+        "fit": "auto",
+        "mount": "active",
+        "loop": true,
+        "disabled": false
+      },
+      "capabilities": [
+        "selection",
+        "orientation",
+        "size",
+        "appearance",
+        "disabled",
+        "removable",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "list",
+        "item",
+        "tab",
+        "start",
+        "label",
+        "end",
+        "dismiss",
+        "panel",
+        "scroll",
+        "actions"
+      ]
+    }
+  },
+  "docs": {
+    "tabs": {
+      "imports": {
+        "source": "import { Tab, TabActions, TabList, TabPanel, Tabs, TabsDefaultsProvider } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The Tabs root: a grid of four columns and two rows that carries data-ui=\"tabs\", the axes (data-size, data-variant, data-track, data-orientation, data-fit), data-disabled, data-overflowing and data-activation-direction. It renders the two paging controls itself, because it observes whether the list overflows."
+        },
+        {
+          "part": "list",
+          "element": "div[role=\"tablist\"], or the element render returns",
+          "required": true,
+          "purpose": "The scroll container, and the single Tab stop of the list. Name it with aria-label or aria-labelledby: Tabs writes neither, because only the page knows what the set of views is for."
+        },
+        {
+          "part": "item",
+          "element": "div[role=\"presentation\"], or the element the render of Tab returns",
+          "required": true,
+          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and because the marker spans the tab and its close button together. className and style reach it."
+        },
+        {
+          "part": "tab",
+          "element": "button[role=\"tab\"], or a[role=\"tab\"] with href",
+          "required": true,
+          "purpose": "The control. It holds aria-selected, aria-controls, the generated id and data-value, which the keyboard reads. Every other native prop and the ref reach it."
+        },
+        {
+          "part": "start",
+          "element": "span",
+          "required": false,
+          "purpose": "The content of start, before the label: an icon, as a flex item of the tab that never shrinks and that sizes an icon to the tab’s icon step."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The words, in a box of their own: text-overflow cuts it when fit=\"equal\" leaves too little room, and unicode-bidi: plaintext lets a label in another script read in its own direction."
+        },
+        {
+          "part": "end",
+          "element": "span",
+          "required": false,
+          "purpose": "The content of end, after the label: a count or a status, as a flex item of the tab that never shrinks."
+        },
+        {
+          "part": "dismiss",
+          "element": "button",
+          "required": false,
+          "purpose": "The close button. It has tabindex=\"-1\", so the arrow keys move between tabs only, and it stays in the accessibility tree, so a screen reader can press it. From the keyboard, Delete closes the focused tab, which aria-keyshortcuts on the tab announces."
+        },
+        {
+          "part": "panel",
+          "element": "div[role=\"tabpanel\"]",
+          "required": true,
+          "purpose": "The content of one tab, with aria-labelledby pointing at its tab and tabindex=\"0\". It carries the hidden attribute while another tab is selected. The panel element always exists, so every tab’s aria-controls names an element; mount decides whether its content exists."
+        },
+        {
+          "part": "scroll",
+          "element": "button",
+          "required": false,
+          "purpose": "One paging control at each end, drawn only while the list overflows. It is aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view."
+        },
+        {
+          "part": "actions",
+          "element": "div, or the element render returns",
+          "required": false,
+          "purpose": "A slot at the end of the tab row, for controls that act on what the tabs show. Put a Toolbar in it: one Tab stop however many buttons it holds."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Tabs",
+          "description": "The value of the selected tab. Passing it makes the selection controlled for the life of the component; without it, Tabs keeps the selection and starts from defaultValue."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Tabs",
+          "description": "The value an uncontrolled Tabs starts from, read once. When it is unset, no tab is selected and no panel is shown."
+        },
+        {
+          "name": "activation",
+          "type": "'automatic' | 'manual'",
+          "defaultValue": "automatic",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "Whether moving focus to a tab also selects it. The APG recommends automatic when panels show without a noticeable delay, and manual when a panel has to be fetched."
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "Which way the list runs, and so which arrow keys move between tabs. A horizontal list ignores Up and Down, so those keys keep scrolling the page."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "The control step of the list: height, type, padding and inner gap, all from the control scales the theme restates per density."
+        },
+        {
+          "name": "variant",
+          "type": "'line' | 'contained'",
+          "defaultValue": "line",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "How the list is drawn. Both variants paint the accent marker, which keeps the selected tab visible in the high-contrast scheme, where every surface is flattened."
+        },
+        {
+          "name": "track",
+          "type": "'line' | 'none'",
+          "defaultValue": "line",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "Whether the list draws the line its tabs stand on. none is for a list placed on a line the page already draws, such as a card header’s edge or a table’s rule, where two hairlines a pixel apart read as one smudge. The marker then sits on the item’s own edge, on the line that is there."
+        },
+        {
+          "name": "fit",
+          "type": "'auto' | 'equal'",
+          "defaultValue": "auto",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "Whether each tab is as wide as its label or takes an equal share of the line. equal cuts a label longer than its share with an ellipsis; auto never cuts a label and scrolls the list instead."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "When a panel’s content exists: only while its tab is selected (active), from its first selection on (lazy), or from the start (eager). A panel that is not selected carries the hidden attribute."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Tabs, TabsDefaultsProvider",
+          "description": "Whether the arrow keys wrap past the ends of the list."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Tabs",
+          "description": "Disables every tab with the native attribute, which also makes the arrow keys skip them, and dims the track."
+        },
+        {
+          "name": "value, on Tab",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Tab",
+          "description": "What this tab selects, and what the value of Tabs holds. It reaches the DOM as data-value, which the keyboard reads."
+        },
+        {
+          "name": "disabled, on Tab",
+          "type": "boolean",
+          "defaultValue": "from Tabs, or false",
+          "appliesTo": "Tab",
+          "description": "Disables this tab only, so one tab can be unavailable in a working list. Unset rather than false, so the tab follows Tabs."
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Tab",
+          "description": "Draws the close button and binds Delete on the tab, announced through aria-keyshortcuts."
+        },
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Tab",
+          "description": "The accessible name of the close button, required whenever it is drawn. Name what closes: “Close customers.sql” rather than “Close”."
+        },
+        {
+          "name": "start",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Tab",
+          "description": "Content before the label, such as an Icon, placed in the start part beside the words."
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Tab",
+          "description": "Content after the label, such as a Badge with a count, placed in the end part beside the words."
+        },
+        {
+          "name": "controls",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Tab",
+          "description": "The id of the region this tab controls when it is not a TabPanel, such as a table the selected value filters. aria-controls names that region."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Tab",
+          "description": "Renders the tab as a link. A plain click selects the tab without navigating; a click with a modifier key is left to the browser, which opens the address in a new browser tab or window."
+        },
+        {
+          "name": "value, on TabPanel",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "TabPanel",
+          "description": "The tab this panel belongs to. Tabs wires the pair with ids generated from the value."
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Tabs, TabList, Tab, TabPanel, TabActions",
+          "description": "Replaces the root element of any of the five and passes it every attribute, so a list can be a nav and Tabs a section. The tab control itself cannot be replaced: it holds the role, the value and the keyboard, and href covers the substitution that matters."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "Tab, TabPanel, Tabs",
+          "description": "On Tab, reaches the tab’s own control, so focus() and click() are the element’s own methods and no imperative handle stands in for them."
+        },
+        {
+          "name": "useTabs()",
+          "type": "() => TabsContextValue",
+          "defaultValue": "—",
+          "appliesTo": "inside Tabs",
+          "description": "What a tab and a panel read: the value, the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. It throws outside Tabs instead of rendering a control that looks right and does nothing."
+        },
+        {
+          "name": "TabsDefaultsProvider",
+          "type": "{ activation, orientation, size, variant, track, fit, mount, loop }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The eight settings an application decides once. A value set on one Tabs still wins."
+        },
+        {
+          "name": "aria-label, on TabList",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "TabList",
+          "description": "The name of the set of views. Tabs writes no name of its own; aria-labelledby works the same way."
+        }
+      ],
+      "events": [
+        {
+          "name": "onValueChange",
+          "payload": "(value: string, request: ChangeRequest<string | undefined>)",
+          "when": "Before the selection moves. The request carries the new value, the previous value (undefined while no tab is selected), the reason (pointer, keyboard, remove or programmatic), the originating event, and cancel(), which keeps the current tab."
+        },
+        {
+          "name": "onTabDismiss",
+          "payload": "(value: string, request: TabsDismissRequest)",
+          "when": "Before a tab is closed, by Delete or by its close button. The request carries the reason (pointer or keyboard) and cancel(), which stops both the dismissal and the selection move that would follow it. Tabs removes nothing itself: remove the tab from your own data."
+        },
+        {
+          "name": "onClick, onKeyDown, onFocus, on each Tab",
+          "payload": "the element’s own events",
+          "when": "When the tab’s control fires them. Your handler runs first, and preventDefault() in onClick also stops the selection."
+        }
+      ],
+      "accessibility": [
+        "Tabs implements the WAI-ARIA APG Tabs pattern (w3.org/WAI/ARIA/apg/patterns/tabs/) and its whole keyboard table: Tab enters the list on the selected tab and leaves to the panel, the arrow keys of the list’s direction move focus and wrap at both ends, Home and End reach the first and last enabled tab, Enter and Space select under manual activation, and Delete closes a dismissible tab. A horizontal list does not listen for Up and Down, so those keys keep scrolling the page while focus is in the list.",
+        "After a dismissal, focus follows the pattern: the next tab, the previous one when the closed tab was last, or the list itself when no tab is left, which is why the list carries tabindex=\"-1\". The selection follows the same rule, with the reason remove.",
+        "The close button is outside the arrow-key sequence and inside the accessibility tree. A screen reader reaches and presses it; from the keyboard, Delete closes the focused tab, and the tab announces the key with aria-keyshortcuts. In the arrow-key sequence, close buttons would double the presses it takes to cross the list.",
+        "The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.",
+        "A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.",
+        "Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.",
+        "The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
+        "A panel carries tabindex=\"0\", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-font-weight",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-letter-spacing",
+    "--slotted-control-line-height",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-6",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-tabs-actions-gap",
+    "--slotted-tabs-active-background",
+    "--slotted-tabs-active-marker-color",
+    "--slotted-tabs-color",
+    "--slotted-tabs-contained-background",
+    "--slotted-tabs-contained-selected-background",
+    "--slotted-tabs-dismiss-active-background",
+    "--slotted-tabs-dismiss-active-color",
+    "--slotted-tabs-dismiss-color",
+    "--slotted-tabs-dismiss-hover-background",
+    "--slotted-tabs-dismiss-hover-color",
+    "--slotted-tabs-fade-size",
+    "--slotted-tabs-gap",
+    "--slotted-tabs-hover-background",
+    "--slotted-tabs-hover-color",
+    "--slotted-tabs-hover-marker-color",
+    "--slotted-tabs-list-gap",
+    "--slotted-tabs-marker-color",
+    "--slotted-tabs-scroll-color",
+    "--slotted-tabs-selected-color",
+    "--slotted-tabs-track-color",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-inverse",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Tabs defaultValue=\"summary\">\n  <TabList aria-label=\"Order\">\n    <Tab value=\"summary\">Summary</Tab>\n    <Tab value=\"items\">Items</Tab>\n  </TabList>\n  <TabPanel value=\"summary\">Delivery expected on September 12.</TabPanel>\n  <TabPanel value=\"items\">Three items.</TabPanel>\n</Tabs>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activation",
+      "title": "Whether focus selects",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs, type TabsActivation } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst MODES: { activation: TabsActivation; caption: string }[] = [\n  { activation: 'automatic', caption: 'Automatic: the arrow keys select as they move.' },\n  { activation: 'manual', caption: 'Manual: the arrow keys move focus; Enter or Space selects.' },\n];\n\nconst REPORTS = [\n  { value: 'revenue', label: 'Revenue', panel: 'Revenue this quarter: $412,800.00.' },\n  { value: 'margin', label: 'Margin', panel: 'Gross margin this quarter: 38.4%.' },\n  { value: 'returns', label: 'Returns', panel: 'Return rate this quarter: 2.1%.' },\n];\n\nexport default function TabsActivationExample() {\n  return (\n    <Stack gap={8}>\n      {MODES.map((mode) => (\n        <Stack key={mode.activation} gap={3}>\n          <Text size=\"sm\" tone=\"muted\">\n            {mode.caption}\n          </Text>\n          <Tabs activation={mode.activation} defaultValue=\"revenue\">\n            <TabList aria-label=\"Quarterly reports\">\n              {REPORTS.map((report) => (\n                <Tab key={report.value} value={report.value}>\n                  {report.label}\n                </Tab>\n              ))}\n            </TabList>\n            {REPORTS.map((report) => (\n              <TabPanel key={report.value} value={report.value}>\n                <Text size=\"sm\">{report.panel}</Text>\n              </TabPanel>\n            ))}\n          </Tabs>\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "orientation",
+      "title": "Which way the list runs",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Tabs defaultValue=\"a\" orientation=\"vertical\">\n  <TabList aria-label=\"Settings\">\n    <Tab value=\"a\">Profile</Tab>\n    <Tab value=\"b\">Notifications</Tab>\n  </TabList>\n  <TabPanel value=\"a\">Name and photo.</TabPanel>\n  <TabPanel value=\"b\">Email notices.</TabPanel>\n</Tabs>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "The two ways a list is drawn",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Tabs defaultValue=\"a\" variant=\"line\" />;\n<Tabs defaultValue=\"a\" variant=\"contained\" />;\n\n// Standing on a line the page already drew — a card header, a table's rule.\n<Tabs defaultValue=\"a\" track=\"none\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the list sits at",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs, type TabsSize } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst SIZES: TabsSize[] = ['sm', 'md', 'lg'];\n\nconst VIEWS = [\n  { value: 'stock', label: 'Stock', panel: '1,284 units on hand across 3 warehouses.' },\n  { value: 'movements', label: 'Movements', panel: '46 movements in the last 7 days.' },\n  {\n    value: 'suppliers',\n    label: 'Suppliers',\n    panel: 'Ordered from Brightline Studio and Quill & Co.',\n  },\n];\n\nexport default function TabsSizes() {\n  return (\n    <Stack gap={8}>\n      {SIZES.map((size) => (\n        <Tabs key={size} defaultValue=\"stock\" size={size}>\n          <TabList aria-label=\"Product OAK-90\">\n            {VIEWS.map((view) => (\n              <Tab key={view.value} value={view.value}>\n                {view.label}\n              </Tab>\n            ))}\n          </TabList>\n          {VIEWS.map((view) => (\n            <TabPanel key={view.value} value={view.value}>\n              <Text size=\"sm\">{view.panel}</Text>\n            </TabPanel>\n          ))}\n        </Tabs>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "fit",
+      "title": "How the line is divided",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst QUEUES = [\n  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },\n  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },\n  {\n    value: 'inspection',\n    label: 'Awaiting inspection',\n    panel: '3 returns wait for a quality check before restocking.',\n  },\n];\n\nexport default function TabsFit() {\n  return (\n    <Tabs defaultValue=\"incoming\" fit=\"equal\" variant=\"contained\">\n      <TabList aria-label=\"Warehouse queues\">\n        {QUEUES.map((queue) => (\n          <Tab key={queue.value} value={queue.value}>\n            {queue.label}\n          </Tab>\n        ))}\n      </TabList>\n      {QUEUES.map((queue) => (\n        <TabPanel key={queue.value} value={queue.value}>\n          <Text size=\"sm\">{queue.panel}</Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "Every state the family paints",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Tabs defaultValue=\"a\">\n  <TabList aria-label=\"Order\">\n    <Tab value=\"a\">Available</Tab>\n    <Tab disabled value=\"b\">\n      Unavailable\n    </Tab>\n  </TabList>\n  <TabPanel value=\"a\">…</TabPanel>\n</Tabs>;\n\n<Tabs defaultValue=\"a\" disabled />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "mount",
+      "title": "When a panel exists",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs, type TabsMount } from '@slotted/react/tabs';\nimport { Textarea } from '@slotted/react/textarea';\nimport { Text } from '@slotted/react/typography';\n\nconst MODES: { mount: TabsMount; caption: string }[] = [\n  { mount: 'active', caption: 'mount=\"active\": the note is built again, empty, on return.' },\n  { mount: 'lazy', caption: 'mount=\"lazy\": the note keeps what was typed.' },\n];\n\nexport default function TabsMountExample() {\n  return (\n    <Stack gap={8}>\n      {MODES.map((mode) => (\n        <Stack key={mode.mount} gap={3}>\n          <Text size=\"sm\" tone=\"muted\">\n            {mode.caption}\n          </Text>\n          <Tabs defaultValue=\"note\" mount={mode.mount}>\n            <TabList aria-label=\"Order SO-1187\">\n              <Tab value=\"note\">Picking note</Tab>\n              <Tab value=\"summary\">Summary</Tab>\n            </TabList>\n            <TabPanel value=\"note\">\n              <Field>\n                <FieldLabel>Note for the picker</FieldLabel>\n                <Textarea placeholder=\"Pack the brackets separately\" rows={2} />\n              </Field>\n            </TabPanel>\n            <TabPanel value=\"summary\">\n              <Text size=\"sm\">3 lines, picked from zone C at Reno, NV.</Text>\n            </TabPanel>\n          </Tabs>\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dismissible",
+      "title": "Tabs a reader can close",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst OPEN = [\n  { id: 'SO-1187', customer: 'Harbor & Pine', total: '$1,240.00' },\n  { id: 'SO-1188', customer: 'Brightline Studio', total: '$318.50' },\n  { id: 'SO-1190', customer: 'Northgate Labs', total: '$2,906.10' },\n  { id: 'SO-1191', customer: 'Verde Kitchen', total: '$86.00' },\n];\n\nexport default function TabsDismissible() {\n  const [orders, setOrders] = useState(OPEN);\n  const [active, setActive] = useState('SO-1188');\n\n  if (orders.length === 0) {\n    return (\n      <Stack gap={3} align=\"start\">\n        <Text size=\"sm\" tone=\"muted\">\n          No orders open.\n        </Text>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onClick={() => {\n            setOrders(OPEN);\n            setActive('SO-1187');\n          }}\n        >\n          Reopen orders\n        </Button>\n      </Stack>\n    );\n  }\n\n  return (\n    <Tabs\n      value={active}\n      onValueChange={setActive}\n      onTabDismiss={(value) => setOrders((open) => open.filter((order) => order.id !== value))}\n    >\n      <TabList aria-label=\"Open orders\">\n        {orders.map((order) => (\n          <Tab key={order.id} dismissible dismissLabel={`Close ${order.id}`} value={order.id}>\n            {order.id}\n          </Tab>\n        ))}\n      </TabList>\n      {orders.map((order) => (\n        <TabPanel key={order.id} value={order.id}>\n          <Text size=\"sm\">\n            {order.customer}, {order.total}.\n          </Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "overflow",
+      "title": "A list that does not fit",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst WAREHOUSES = [\n  { code: 'RNO', city: 'Reno, NV', open: 42 },\n  { code: 'CMH', city: 'Columbus, OH', open: 37 },\n  { code: 'SAV', city: 'Savannah, GA', open: 18 },\n  { code: 'DFW', city: 'Dallas, TX', open: 51 },\n  { code: 'EWR', city: 'Newark, NJ', open: 29 },\n  { code: 'ONT', city: 'Ontario, CA', open: 64 },\n  { code: 'JOT', city: 'Joliet, IL', open: 23 },\n  { code: 'MEM', city: 'Memphis, TN', open: 46 },\n  { code: 'ABE', city: 'Allentown, PA', open: 12 },\n  { code: 'TIW', city: 'Tacoma, WA', open: 31 },\n  { code: 'SCK', city: 'Stockton, CA', open: 9 },\n  { code: 'IND', city: 'Indianapolis, IN', open: 27 },\n];\n\nexport default function TabsOverflow() {\n  return (\n    <Tabs defaultValue=\"MEM\">\n      <TabList aria-label=\"Warehouses\">\n        {WAREHOUSES.map((warehouse) => (\n          <Tab key={warehouse.code} value={warehouse.code}>\n            {warehouse.city}\n          </Tab>\n        ))}\n      </TabList>\n      {WAREHOUSES.map((warehouse) => (\n        <TabPanel key={warehouse.code} value={warehouse.code}>\n          <Text size=\"sm\">\n            {warehouse.code}: {warehouse.open} open orders to ship today.\n          </Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "links",
+      "title": "A view a router can deep-link to",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst VIEWS = [\n  { value: 'summary', label: 'Summary', panel: 'Harbor & Pine, $1,240.00, Net 30.' },\n  { value: 'items', label: 'Items', panel: '3 lines: shelves, brackets and an assembly kit.' },\n  { value: 'shipments', label: 'Shipments', panel: 'Atlas Freight, expected September 12.' },\n];\n\nexport default function TabsLinks() {\n  return (\n    <Tabs defaultValue=\"summary\">\n      <TabList aria-label=\"Order SO-1187\">\n        {VIEWS.map((view) => (\n          <Tab key={view.value} href={`#order-${view.value}`} value={view.value}>\n            {view.label}\n          </Tab>\n        ))}\n      </TabList>\n      {VIEWS.map((view) => (\n        <TabPanel key={view.value} value={view.value}>\n          <Text size=\"sm\">{view.panel}</Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Tabs defaultValue=\"a\">\n  <TabList aria-label=\"Extreme content\">\n    <Tab value=\"a\">sha256:9f86d081884c7d659a2feaa0c55ad015</Tab>\n    <Tab value=\"b\">بيانات التسليم</Tab>\n  </TabList>\n</Tabs>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting it once, and reaching past it",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<TabsDefaultsProvider size=\"sm\" variant=\"contained\">\n  <Tabs defaultValue=\"a\" render={(props) => <section {...props} />}>\n    <TabList aria-label=\"Order\" render={(props) => <nav {...props} />} />\n    <TabActions>\n      <Toolbar aria-label=\"Order actions\" size=\"sm\">\n        <Button variant=\"ghost\">Export</Button>\n      </Toolbar>\n    </TabActions>\n  </Tabs>\n</TabsDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The APG table, and where focus lands",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst STEPS = [\n  { value: 'picking', label: 'Picking', panel: '18 lines to pick in zone C.' },\n  { value: 'packing', label: 'Packing', panel: '6 orders waiting at station 2.' },\n  { value: 'loading', label: 'Loading', panel: 'Atlas Freight trailer at dock 4 until 15:30.' },\n];\n\nexport default function TabsKeyboard() {\n  const [last, setLast] = useState('Nothing selected yet.');\n\n  return (\n    <Stack gap={5}>\n      <Tabs\n        defaultValue=\"picking\"\n        onValueChange={(value, request) => {\n          const step = STEPS.find((item) => item.value === value);\n          setLast(`${step?.label} selected by ${request.reason}.`);\n        }}\n      >\n        <TabList aria-label=\"Outbound shift\">\n          {STEPS.map((step) => (\n            <Tab key={step.value} value={step.value}>\n              {step.label}\n            </Tab>\n          ))}\n        </TabList>\n        {STEPS.map((step) => (\n          <TabPanel key={step.value} value={step.value}>\n            <Text size=\"sm\">{step.panel}</Text>\n          </TabPanel>\n        ))}\n      </Tabs>\n      <Text size=\"sm\" tone=\"muted\">\n        {last}\n      </Text>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "actions",
+      "title": "actions.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Glyph } from '@slotted/react/icon';\nimport { Tab, TabActions, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Toolbar } from '@slotted/react/toolbar';\nimport { Text } from '@slotted/react/typography';\n\nconst VIEWS = [\n  { value: 'lines', label: 'Lines', panel: '6 lines from Quill & Co., $4,812.00.' },\n  { value: 'receipts', label: 'Receipts', panel: '4 of 6 lines received at Columbus, OH.' },\n  { value: 'history', label: 'History', panel: 'Approved by Marco Ilić on September 22.' },\n];\n\nexport default function TabsActionsExample() {\n  return (\n    <Tabs defaultValue=\"lines\">\n      <TabList aria-label=\"Purchase order PO-4521\">\n        {VIEWS.map((view) => (\n          <Tab key={view.value} value={view.value}>\n            {view.label}\n          </Tab>\n        ))}\n      </TabList>\n      <TabActions>\n        <Toolbar aria-label=\"Purchase order actions\" size=\"sm\">\n          <Button size=\"sm\" start={<Glyph name=\"upload\" />} tone=\"secondary\" variant=\"ghost\">\n            Export\n          </Button>\n          <Button size=\"sm\" start={<Glyph name=\"copy\" />} tone=\"secondary\" variant=\"ghost\">\n            Duplicate\n          </Button>\n        </Toolbar>\n      </TabActions>\n      {VIEWS.map((view) => (\n        <TabPanel key={view.value} value={view.value}>\n          <Text size=\"sm\">{view.panel}</Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst SECTIONS = [\n  {\n    value: 'summary',\n    label: 'Summary',\n    pairs: [\n      ['Customer', 'Harbor & Pine'],\n      ['Placed', 'September 8, 2026'],\n      ['Payment terms', 'Net 30'],\n      ['Total', '$1,240.00'],\n    ],\n  },\n  {\n    value: 'items',\n    label: 'Items',\n    pairs: [\n      ['Oak shelf, 90 cm', '4 × $180.00'],\n      ['Wall bracket, steel', '8 × $24.00'],\n      ['Assembly kit', '1 × $328.00'],\n    ],\n  },\n  {\n    value: 'shipments',\n    label: 'Shipments',\n    pairs: [\n      ['Carrier', 'Atlas Freight'],\n      ['Tracking', 'AF-2210-4471'],\n      ['Expected', 'September 12, 2026'],\n    ],\n  },\n];\n\nconst ACTIVITY = [\n  'Sep 9, 14:02 — Picked at Reno, NV',\n  'Sep 8, 16:45 — Payment approved',\n  'Sep 8, 16:41 — Order placed by Dana Whitfield',\n];\n\nexport default function TabsBasic() {\n  return (\n    <Tabs defaultValue=\"summary\">\n      <TabList aria-label=\"Order SO-1187\">\n        {SECTIONS.map((section) => (\n          <Tab key={section.value} value={section.value}>\n            {section.label}\n          </Tab>\n        ))}\n        <Tab value=\"activity\">Activity</Tab>\n      </TabList>\n      {SECTIONS.map((section) => (\n        <TabPanel key={section.value} value={section.value}>\n          <DescriptionList>\n            {section.pairs.map(([term, description]) => (\n              <DescriptionListItem key={term}>\n                <DescriptionListTerm>{term}</DescriptionListTerm>\n                <DescriptionListDescription>{description}</DescriptionListDescription>\n              </DescriptionListItem>\n            ))}\n          </DescriptionList>\n        </TabPanel>\n      ))}\n      <TabPanel value=\"activity\">\n        <Stack gap={2}>\n          {ACTIVITY.map((entry) => (\n            <Text key={entry} size=\"sm\">\n              {entry}\n            </Text>\n          ))}\n        </Stack>\n      </TabPanel>\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst VIEWS = [\n  { value: 'orders', label: 'Orders', panel: '12 open orders, $14,380.00 in total.' },\n  {\n    value: 'invoices',\n    label: 'Invoices',\n    panel: 'INV-20877 and INV-20902 are past due: $2,146.50.',\n  },\n  { value: 'payments', label: 'Payments', panel: 'Last payment: $3,200.00 on September 30.' },\n];\n\nexport default function TabsControlled() {\n  const [view, setView] = useState('orders');\n\n  return (\n    <Stack gap={5}>\n      <Inline gap={3} align=\"center\" justify=\"between\">\n        <Text size=\"sm\" tone=\"muted\">\n          2 invoices are past due.\n        </Text>\n        <Button size=\"sm\" variant=\"outline\" onClick={() => setView('invoices')}>\n          Review invoices\n        </Button>\n      </Inline>\n      <Tabs value={view} onValueChange={setView}>\n        <TabList aria-label=\"Account Harbor & Pine\">\n          {VIEWS.map((item) => (\n            <Tab key={item.value} value={item.value}>\n              {item.label}\n            </Tab>\n          ))}\n        </TabList>\n        {VIEWS.map((item) => (\n          <TabPanel key={item.value} value={item.value}>\n            <Text size=\"sm\">{item.panel}</Text>\n          </TabPanel>\n        ))}\n      </Tabs>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs, TabsDefaultsProvider } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nexport default function TabsDefaults() {\n  return (\n    <TabsDefaultsProvider size=\"sm\" variant=\"contained\">\n      <Stack gap={8}>\n        <Tabs defaultValue=\"stock\">\n          <TabList aria-label=\"Product OAK-90\">\n            <Tab value=\"stock\">Stock</Tab>\n            <Tab value=\"pricing\">Pricing</Tab>\n          </TabList>\n          <TabPanel value=\"stock\">\n            <Text size=\"sm\">1,284 units on hand.</Text>\n          </TabPanel>\n          <TabPanel value=\"pricing\">\n            <Text size=\"sm\">List price $180.00, cost $96.40.</Text>\n          </TabPanel>\n        </Tabs>\n        <Tabs defaultValue=\"open\" variant=\"line\">\n          <TabList aria-label=\"Purchase orders\">\n            <Tab value=\"open\">Open</Tab>\n            <Tab value=\"received\">Received</Tab>\n          </TabList>\n          <TabPanel value=\"open\">\n            <Text size=\"sm\">3 purchase orders for OAK-90 are open.</Text>\n          </TabPanel>\n          <TabPanel value=\"received\">\n            <Text size=\"sm\">Last received on September 22: 400 units.</Text>\n          </TabPanel>\n        </Tabs>\n      </Stack>\n    </TabsDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled",
+      "title": "disabled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nexport default function TabsDisabled() {\n  return (\n    <Stack gap={8}>\n      <Tabs defaultValue=\"summary\">\n        <TabList aria-label=\"Order SO-1192\">\n          <Tab value=\"summary\">Summary</Tab>\n          <Tab value=\"items\">Items</Tab>\n          <Tab disabled value=\"invoice\">\n            Invoice\n          </Tab>\n        </TabList>\n        <TabPanel value=\"summary\">\n          <Text size=\"sm\">Awaiting pickup. The invoice is issued once the order ships.</Text>\n        </TabPanel>\n        <TabPanel value=\"items\">\n          <Text size=\"sm\">5 items from the Reno, NV warehouse.</Text>\n        </TabPanel>\n        <TabPanel value=\"invoice\">\n          <Text size=\"sm\">Invoice INV-20931.</Text>\n        </TabPanel>\n      </Tabs>\n      <Tabs defaultValue=\"summary\" disabled>\n        <TabList aria-label=\"Order SO-1188\">\n          <Tab value=\"summary\">Summary</Tab>\n          <Tab value=\"items\">Items</Tab>\n          <Tab value=\"invoice\">Invoice</Tab>\n        </TabList>\n        <TabPanel value=\"summary\">\n          <Text size=\"sm\">Locked while the warehouse recounts this order.</Text>\n        </TabPanel>\n        <TabPanel value=\"items\">\n          <Text size=\"sm\">2 items from the Columbus, OH warehouse.</Text>\n        </TabPanel>\n        <TabPanel value=\"invoice\">\n          <Text size=\"sm\">Invoice INV-20917.</Text>\n        </TabPanel>\n      </Tabs>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter",
+      "title": "filter.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useId, useState } from 'react';\nimport { Badge } from '@slotted/react/badge';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { Tab, TabList, Tabs } from '@slotted/react/tabs';\n\nconst ORDERS = [\n  { id: 'SO-1187', customer: 'Harbor & Pine', status: 'open', total: '$1,240.00' },\n  { id: 'SO-1188', customer: 'Brightline Studio', status: 'shipped', total: '$318.50' },\n  { id: 'SO-1190', customer: 'Northgate Labs', status: 'open', total: '$2,906.10' },\n  { id: 'SO-1191', customer: 'Verde Kitchen', status: 'delayed', total: '$86.00' },\n  { id: 'SO-1193', customer: 'Quill & Co.', status: 'shipped', total: '$540.25' },\n];\n\nconst FILTERS = [\n  { value: 'all', label: 'All' },\n  { value: 'open', label: 'Open' },\n  { value: 'delayed', label: 'Delayed' },\n  { value: 'shipped', label: 'Shipped' },\n];\n\nconst STATUS: Record<string, string> = { open: 'Open', delayed: 'Delayed', shipped: 'Shipped' };\n\nconst matching = (filter: string) =>\n  filter === 'all' ? ORDERS : ORDERS.filter((order) => order.status === filter);\n\nexport default function TabsFilter() {\n  const tableId = useId();\n  const [filter, setFilter] = useState('all');\n\n  return (\n    <Stack gap={4}>\n      <Tabs size=\"sm\" value={filter} onValueChange={setFilter}>\n        <TabList aria-label=\"Orders by status\">\n          {FILTERS.map((item) => (\n            <Tab\n              key={item.value}\n              controls={tableId}\n              end={<Badge count={matching(item.value).length} showZero size=\"sm\" />}\n              value={item.value}\n            >\n              {item.label}\n            </Tab>\n          ))}\n        </TabList>\n      </Tabs>\n      <Table columns={4} id={tableId}>\n        <TableContent aria-label=\"Orders\">\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader>Status</TableColumnHeader>\n              <TableColumnHeader numeric>Total</TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {matching(filter).map((order) => (\n              <TableRow key={order.id} value={order.id}>\n                <TableRowHeader>{order.id}</TableRowHeader>\n                <TableCell>{order.customer}</TableCell>\n                <TableCell>{STATUS[order.status]}</TableCell>\n                <TableCell numeric>{order.total}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "icons",
+      "title": "icons.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Badge } from '@slotted/react/badge';\nimport { Glyph, type GlyphName, Icon } from '@slotted/react/icon';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst VIEWS: { value: string; label: string; icon: GlyphName; count?: number; panel: string }[] = [\n  {\n    value: 'overview',\n    label: 'Overview',\n    icon: 'file-text',\n    panel: 'Harbor & Pine, customer since 2021. Net 30 terms.',\n  },\n  {\n    value: 'orders',\n    label: 'Orders',\n    icon: 'inbox',\n    count: 12,\n    panel: '12 open orders, $14,380.00 in total.',\n  },\n  {\n    value: 'contacts',\n    label: 'Contacts',\n    icon: 'person',\n    count: 3,\n    panel: 'Dana Whitfield, Marco Ilić and Priya Raman.',\n  },\n  {\n    value: 'files',\n    label: 'Files',\n    icon: 'paperclip',\n    panel: 'Signed credit application and a W-9 form.',\n  },\n];\n\nexport default function TabsIcons() {\n  return (\n    <Tabs defaultValue=\"orders\">\n      <TabList aria-label=\"Customer Harbor & Pine\">\n        {VIEWS.map((view) => (\n          <Tab\n            key={view.value}\n            value={view.value}\n            start={\n              <Icon>\n                <Glyph name={view.icon} />\n              </Icon>\n            }\n            end={view.count === undefined ? undefined : <Badge count={view.count} size=\"sm\" />}\n          >\n            {view.label}\n          </Tab>\n        ))}\n      </TabList>\n      {VIEWS.map((view) => (\n        <TabPanel key={view.value} value={view.value}>\n          <Text size=\"sm\">{view.panel}</Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "record-header",
+      "title": "record-header.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Badge } from '@slotted/react/badge';\nimport { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport { Glyph, Icon } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Heading, Text } from '@slotted/react/typography';\n\nconst FACTS = [\n  ['Customer', 'Harbor & Pine'],\n  ['Placed', 'September 8, 2026'],\n  ['Payment terms', 'Net 30'],\n  ['Ship to', '88 Dock Street, Portland, OR'],\n  ['Carrier', 'Atlas Freight'],\n  ['Total', '$1,240.00'],\n];\n\nconst LINES = [\n  { sku: 'OAK-90', item: 'Oak shelf, 90 cm', quantity: 4, amount: '$720.00' },\n  { sku: 'BRK-ST', item: 'Wall bracket, steel', quantity: 8, amount: '$192.00' },\n  { sku: 'KIT-AS', item: 'Assembly kit', quantity: 1, amount: '$328.00' },\n];\n\nconst ACTIVITY = [\n  'Sep 9, 14:02 — Picked at Reno, NV by Luis Ortega',\n  'Sep 8, 16:45 — Payment approved',\n  'Sep 8, 16:41 — Order placed by Dana Whitfield',\n];\n\nexport default function TabsRecordHeader() {\n  return (\n    <Stack gap={6}>\n      <Inline gap={4} align=\"start\" justify=\"between\" wrap=\"wrap\">\n        <Stack gap={1}>\n          <Inline gap={3} align=\"center\">\n            <Heading level={2} size=\"xl\">\n              Order SO-1187\n            </Heading>\n            <Badge tone=\"warning\">Awaiting pickup</Badge>\n          </Inline>\n          <Text size=\"sm\" tone=\"muted\">\n            Harbor & Pine · Placed September 8, 2026\n          </Text>\n        </Stack>\n        <Inline gap={2}>\n          <Button size=\"sm\" start={<Glyph name=\"file-text\" />} tone=\"secondary\" variant=\"outline\">\n            Packing slip\n          </Button>\n          <Button size=\"sm\">Mark shipped</Button>\n        </Inline>\n      </Inline>\n      <Tabs defaultValue=\"overview\">\n        <TabList aria-label=\"Order SO-1187\">\n          <Tab\n            start={\n              <Icon>\n                <Glyph name=\"file-text\" />\n              </Icon>\n            }\n            value=\"overview\"\n          >\n            Overview\n          </Tab>\n          <Tab\n            end={<Badge count={LINES.length} size=\"sm\" />}\n            start={\n              <Icon>\n                <Glyph name=\"inbox\" />\n              </Icon>\n            }\n            value=\"items\"\n          >\n            Items\n          </Tab>\n          <Tab\n            end={<Badge count={ACTIVITY.length} size=\"sm\" />}\n            start={\n              <Icon>\n                <Glyph name=\"clock\" />\n              </Icon>\n            }\n            value=\"activity\"\n          >\n            Activity\n          </Tab>\n        </TabList>\n        <TabPanel value=\"overview\">\n          <DescriptionList columns={2}>\n            {FACTS.map(([term, description]) => (\n              <DescriptionListItem key={term}>\n                <DescriptionListTerm>{term}</DescriptionListTerm>\n                <DescriptionListDescription>{description}</DescriptionListDescription>\n              </DescriptionListItem>\n            ))}\n          </DescriptionList>\n        </TabPanel>\n        <TabPanel value=\"items\">\n          <Table columns={4}>\n            <TableContent aria-label=\"Order lines\">\n              <TableHead>\n                <TableRow>\n                  <TableColumnHeader>SKU</TableColumnHeader>\n                  <TableColumnHeader>Item</TableColumnHeader>\n                  <TableColumnHeader numeric>Quantity</TableColumnHeader>\n                  <TableColumnHeader numeric>Amount</TableColumnHeader>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {LINES.map((line) => (\n                  <TableRow key={line.sku} value={line.sku}>\n                    <TableRowHeader>{line.sku}</TableRowHeader>\n                    <TableCell>{line.item}</TableCell>\n                    <TableCell numeric>{line.quantity}</TableCell>\n                    <TableCell numeric>{line.amount}</TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </TableContent>\n          </Table>\n        </TabPanel>\n        <TabPanel value=\"activity\">\n          <Stack gap={2}>\n            {ACTIVITY.map((entry) => (\n              <Text key={entry} size=\"sm\">\n                {entry}\n              </Text>\n            ))}\n          </Stack>\n        </TabPanel>\n      </Tabs>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "settings",
+      "title": "settings.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Glyph, Icon } from '@slotted/react/icon';\nimport { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { TextField } from '@slotted/react/text-field';\nimport { Heading, Text } from '@slotted/react/typography';\n\nconst PLAN = [\n  ['Plan', 'Operations, annual'],\n  ['Seats', '24 of 30 in use'],\n  ['Next invoice', 'November 1, 2026: $4,320.00'],\n];\n\nexport default function TabsSettings() {\n  return (\n    <Tabs defaultValue=\"workspace\" orientation=\"vertical\">\n      <TabList aria-label=\"Settings\">\n        <Tab\n          start={\n            <Icon>\n              <Glyph name=\"file-text\" />\n            </Icon>\n          }\n          value=\"workspace\"\n        >\n          Workspace\n        </Tab>\n        <Tab\n          start={\n            <Icon>\n              <Glyph name=\"bell\" />\n            </Icon>\n          }\n          value=\"notifications\"\n        >\n          Notifications\n        </Tab>\n        <Tab\n          start={\n            <Icon>\n              <Glyph name=\"lock\" />\n            </Icon>\n          }\n          value=\"security\"\n        >\n          Security\n        </Tab>\n        <Tab\n          start={\n            <Icon>\n              <Glyph name=\"calendar\" />\n            </Icon>\n          }\n          value=\"billing\"\n        >\n          Billing\n        </Tab>\n      </TabList>\n      <TabPanel value=\"workspace\">\n        <Stack gap={5} align=\"start\">\n          <Heading level={3} size=\"md\">\n            Workspace\n          </Heading>\n          <Field>\n            <FieldLabel>Company name</FieldLabel>\n            <TextField defaultValue=\"Northwind Traders\" />\n            <FieldDescription>Printed on every invoice and packing slip.</FieldDescription>\n          </Field>\n          <Field>\n            <FieldLabel>Support email</FieldLabel>\n            <TextField defaultValue=\"support@northwind.example\" type=\"email\" />\n          </Field>\n          <Button size=\"sm\">Save changes</Button>\n        </Stack>\n      </TabPanel>\n      <TabPanel value=\"notifications\">\n        <Stack gap={4}>\n          <Heading level={3} size=\"md\">\n            Notifications\n          </Heading>\n          <Switch defaultChecked>Low stock</Switch>\n          <Switch defaultChecked>Late pickups</Switch>\n          <Switch>Cycle count variances</Switch>\n        </Stack>\n      </TabPanel>\n      <TabPanel value=\"security\">\n        <Stack gap={4}>\n          <Heading level={3} size=\"md\">\n            Security\n          </Heading>\n          <Switch defaultChecked>Require two-factor sign-in</Switch>\n          <Text size=\"sm\" tone=\"muted\">\n            Changed by Dana Whitfield on August 14.\n          </Text>\n        </Stack>\n      </TabPanel>\n      <TabPanel value=\"billing\">\n        <Stack gap={4}>\n          <Heading level={3} size=\"md\">\n            Billing\n          </Heading>\n          <DescriptionList>\n            {PLAN.map(([term, description]) => (\n              <DescriptionListItem key={term}>\n                <DescriptionListTerm>{term}</DescriptionListTerm>\n                <DescriptionListDescription>{description}</DescriptionListDescription>\n              </DescriptionListItem>\n            ))}\n          </DescriptionList>\n        </Stack>\n      </TabPanel>\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "variants.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport {\n  Tab,\n  TabList,\n  TabPanel,\n  Tabs,\n  type TabsTrack,\n  type TabsVariant,\n} from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst LOOKS: { variant: TabsVariant; track: TabsTrack }[] = [\n  { variant: 'line', track: 'line' },\n  { variant: 'contained', track: 'line' },\n  { variant: 'line', track: 'none' },\n];\n\nconst QUEUES = [\n  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },\n  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },\n  { value: 'returns', label: 'Returns', panel: '3 returns awaiting inspection.' },\n];\n\nexport default function TabsVariants() {\n  return (\n    <Stack gap={8}>\n      {LOOKS.map((look) => (\n        <Tabs\n          key={`${look.variant}-${look.track}`}\n          defaultValue=\"incoming\"\n          track={look.track}\n          variant={look.variant}\n        >\n          <TabList aria-label=\"Warehouse queues\">\n            {QUEUES.map((queue) => (\n              <Tab key={queue.value} value={queue.value}>\n                {queue.label}\n              </Tab>\n            ))}\n          </TabList>\n          {QUEUES.map((queue) => (\n            <TabPanel key={queue.value} value={queue.value}>\n              <Text size=\"sm\">{queue.panel}</Text>\n            </TabPanel>\n          ))}\n        </Tabs>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "vertical",
+      "title": "vertical.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst SECTIONS = [\n  {\n    value: 'general',\n    label: 'General',\n    lines: ['Code: RNO', 'Address: 1450 Terminal Way, Reno, NV 89502', 'Time zone: Pacific Time'],\n  },\n  {\n    value: 'receiving',\n    label: 'Receiving',\n    lines: ['Dock hours: 06:00–14:00, Monday to Friday', 'Appointment required for full trucks'],\n  },\n  {\n    value: 'shipping',\n    label: 'Shipping',\n    lines: ['Carriers: Atlas Freight, Ridgeway Parcel', 'Daily cut-off: 15:30'],\n  },\n  {\n    value: 'storage',\n    label: 'Storage',\n    lines: ['Zones: A–F, 1,920 bin locations', 'Cycle count: every 30 days'],\n  },\n];\n\nexport default function TabsVertical() {\n  return (\n    <Tabs defaultValue=\"general\" orientation=\"vertical\">\n      <TabList aria-label=\"Warehouse settings\">\n        {SECTIONS.map((section) => (\n          <Tab key={section.value} value={section.value}>\n            {section.label}\n          </Tab>\n        ))}\n      </TabList>\n      {SECTIONS.map((section) => (\n        <TabPanel key={section.value} value={section.value}>\n          <Stack gap={2}>\n            {section.lines.map((line) => (\n              <Text key={line} size=\"sm\">\n                {line}\n              </Text>\n            ))}\n          </Stack>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}