@pnx-mixtape/mxds 0.0.29 → 0.1.0-rc.0

package/src/Component/Tabs/Components/Tab.figma.ts

@@ -0,0 +1,20 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=10-9
+// source=src/Component/Tabs/Components/Tab.tsx
+// component=Tab
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const label = instance.getString("Label")
+
+// `active` is not a settable prop on Tab — it compares its own `id` against the
+// parent <Tabs active="..."> value. See Tabs.figma.ts (the TabList composite mapping)
+// for how the active tab is actually selected in code.
+export default {
+  example: figma.code`<Tab id="tab-id">${label}</Tab>`,
+  imports: ['import { Tab } from "@pnx-mixtape/mxds/react"'],
+  id: "tab",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Tabs/Components/Tab.tsx

@@ -1,4 +1,5 @@
-import { JSX, PropsWithChildren } from "react"
+import { JSX, KeyboardEventHandler, MouseEventHandler, PropsWithChildren } from "react"
+import { useFocusManager } from "react-aria"
 import { useTabContext } from "../Tabs"
 
 type TabProps = PropsWithChildren & {
@@ -8,9 +9,10 @@ type TabProps = PropsWithChildren & {
 
 const Tab = ({ id, className, children }: TabProps): JSX.Element => {
   const { activeTab, setActiveTab } = useTabContext()
+  const focusManager = useFocusManager()
   const isActive: boolean = activeTab === id
 
-  const handleClick = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     setActiveTab(id)
     if (typeof window === "undefined") return
     const urlParams: URLSearchParams = new URLSearchParams(window.location.search)
@@ -19,12 +21,36 @@ const Tab = ({ id, className, children }: TabProps): JSX.Element => {
     window.history.replaceState({}, "", `${window.location.pathname}?${urlParams.toString()}`)
   }
 
+  const handleKeydown: KeyboardEventHandler<HTMLButtonElement> = (event): void => {
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault()
+        focusManager?.focusNext({ wrap: true })
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        focusManager?.focusPrevious({ wrap: true })
+        break
+      case "Home":
+        event.preventDefault()
+        focusManager?.focusFirst()
+        break
+      case "End":
+        event.preventDefault()
+        focusManager?.focusLast()
+        break
+      default:
+        break
+    }
+  }
+
   return (
     <button
       id={`${id}-button`}
       aria-controls={id}
       role="tab"
       onClick={handleClick}
+      onKeyDown={handleKeydown}
       className={className}
       aria-selected={isActive}
       tabIndex={isActive ? 0 : -1}

package/src/Component/Tabs/Components/TabList.tsx

@@ -1,9 +1,15 @@
 import { JSX, PropsWithChildren } from "react"
+import { FocusScope } from "react-aria"
+import { useTabContext } from "../Tabs"
 
-const TabList = ({ children }: PropsWithChildren): JSX.Element => (
-  <div className={"mx-tabs__list desktop-only"} role="tablist">
-    {children}
-  </div>
-)
+const TabList = ({ children }: PropsWithChildren): JSX.Element => {
+  const { tabListRef } = useTabContext()
+
+  return (
+    <div className={"mx-tabs__list desktop-only"} role="tablist" ref={tabListRef}>
+      <FocusScope>{children}</FocusScope>
+    </div>
+  )
+}
 
 export default TabList

package/src/Component/Tabs/Components/TabPanel.figma.ts

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=105-31
+// source=src/Component/Tabs/Components/TabPanel.tsx
+// component=TabPanel
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const content = instance.getSlot("Content")
+
+// `id` is required in code (must match the triggering Tab's `id` so aria-controls
+// resolves) — not meaningfully representable in Figma, fixed placeholder like Tab's
+// own mapping. `className` (default "mx-section--l") is a cosmetic spacing override,
+// not modelled.
+export default {
+  example: figma.code`<TabPanel id="panel-id">${content}</TabPanel>`,
+  imports: ['import { TabPanel } from "@pnx-mixtape/mxds/react"'],
+  id: "tab-panel",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Tabs/Components/TabPanel.tsx

@@ -14,8 +14,7 @@ const TabPanel = ({ children, id, className = "mx-section--l" }: TabPanelProps):
     <div
       id={id}
       className={classNames("mx-tabs__panel", "mx-vertical-flow", className)}
-      // @ts-expect-error inert is allowed.
-      inert={!isActive ? "true" : null}
+      inert={!isActive}
       aria-labelledby={`${id}-button`}
       role="tabpanel"
       tabIndex={0}

package/src/Component/Tabs/Elements/Tabs.ts

@@ -33,6 +33,7 @@ export default class Tabs extends HTMLElement {
   connectedCallback(): void {
     if (!this.panels) return
     this.locationHash = window.location.hash
+    this.tabFocus = 0
 
     this.tabs = new Map()
     this.panels.forEach((panel: HTMLDivElement): void => {
@@ -83,26 +84,31 @@ export default class Tabs extends HTMLElement {
     }
   }
 
-  handleKeydown = ({ key }: KeyboardEvent): void => {
-    if (key === "ArrowRight" || key === "ArrowLeft") {
-      this.triggers[this.tabFocus].setAttribute("tabindex", "-1")
-      if (key === "ArrowRight") {
-        this.tabFocus += 1
-        // If we're at the end, go to the start
-        if (this.tabFocus >= this.triggers.length) {
-          this.tabFocus = 0
-        }
-        // Move left
-      } else if (key === "ArrowLeft") {
-        this.tabFocus -= 1
-        // If we're at the start, move to the end
-        if (this.tabFocus < 0) {
-          this.tabFocus = this.triggers.length - 1
-        }
-      }
-      this.triggers[this.tabFocus].setAttribute("tabindex", "0")
-      this.triggers[this.tabFocus].focus()
+  handleKeydown = (event: KeyboardEvent): void => {
+    const { key, target } = event
+    const tabs = [...this.triggers]
+    const currentIndex = tabs.indexOf(target as HTMLButtonElement)
+    if (currentIndex === -1) return
+    let newIndex = 0
+    switch (key) {
+      case "ArrowRight":
+        newIndex = (currentIndex + 1) % tabs.length
+        break
+      case "ArrowLeft":
+        newIndex = (currentIndex - 1 + tabs.length) % tabs.length
+        break
+      case "Home":
+        newIndex = 0
+        break
+      case "End":
+        newIndex = tabs.length - 1
+        break
+      default:
+        return
     }
+    event.preventDefault()
+    event.stopPropagation()
+    tabs[newIndex].focus()
   }
 
   handleClick = (event: MouseEvent): void => {
@@ -206,7 +212,7 @@ export default class Tabs extends HTMLElement {
     }
     panels.forEach(panel => {
       panel.setAttribute("role", "tabpanel")
-      panel.setAttribute("tabindex", "0")
+      panel.setAttribute("tabindex", "-1")
       panel.setAttribute("aria-label", panel.getAttribute("data-tab"))
     })
     return panels
@@ -224,12 +230,12 @@ export default class Tabs extends HTMLElement {
     this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {
       if (key === id) {
         tab.setAttribute("aria-selected", "true")
-        tab.setAttribute("tab-index", "0")
+        tab.setAttribute("tabindex", "0")
         panel.removeAttribute("inert")
         this.dropMenuTrigger.textContent = tab.textContent
       } else {
         tab.setAttribute("aria-selected", "false")
-        tab.setAttribute("tab-index", "-1")
+        tab.setAttribute("tabindex", "-1")
         panel.setAttribute("inert", "")
       }
     })

package/src/Component/Tabs/README.md

@@ -1,30 +1,224 @@
 # Tabs
 
-### How to use
+A tabbed content interface with a desktop tab strip and a mobile dropdown menu. Active tab state is synced to the URL `?tab=` query parameter, and the `<mx-tabs>` custom element also auto-opens a tab when the URL hash matches a panel id.
 
-**CSS**
+## CSS Import
 
-`@import '@pnx-mixtape/mxds/src/Component/Tabs/tabs.css';`
+```css
+@import "@pnx-mixtape/mxds/src/Component/Tabs/tabs.css";
+```
 
-**Twig**
+---
 
-You can setup a twig namespace in your project if you wish to use the twig files directly.
+## Twig
 
-- Eg: `{% extends '@mixtape/Component/Tabs/tabs.twig' %}`
+```twig
+{% include '@mixtape/Component/Tabs/tabs.twig' with {
+  id: 'tab-example',
+  title: heading_component,
+  items: [
+    include('@mixtape/Component/Tabs/tab-item.twig', {
+      id: 'tab-1',
+      title: 'Funk',
+      content: 'Funk panel content',
+      active: true,
+    }),
+    include('@mixtape/Component/Tabs/tab-item.twig', {
+      id: 'tab-2',
+      title: 'Soul',
+      content: 'Soul panel content',
+    }),
+  ],
+} %}
+```
 
-Alternatively copy/paste the file for more control.
+**tabs.twig props** (`Tabs` type from `ids-shape`):
 
-**JSX Components**
+| Prop    | Type        | Description                                  |
+| ------- | ----------- | -------------------------------------------- |
+| `id`    | `string`    | Unique id for the tab set (required)         |
+| `items` | `TabItem[]` | List of rendered tab-item strings (required) |
+| `title` | `Heading`   | Optional heading rendered above the tabs     |
 
-`import { Tabs, TabList, Tab, TabPanel } from '@pnx-mixtape/mxds/src/react';`
+The template always applies the `mx-tabs--lined` modifier — there is no Twig prop to pick a different `TabStyles` variant. React consumers can override via the `modifier` prop; Twig consumers either fork the template or change the class via `attributes.addClass(...)` at the include site.
 
-**JS Custom Element**
+**tab-item.twig props** (`TabItem` type from `ids-shape`):
 
-Custom Elements are self defined, simply import the desired feature.
-These do not use the Shadow DOM and are not typical Web Components.
-External CSS applies.
-No Polyfills or frameworks are required.
+| Prop      | Type          | Description                                          |
+| --------- | ------------- | ---------------------------------------------------- |
+| `id`      | `string`      | Unique id for the panel (required)                   |
+| `title`   | `string`      | Label used for the generated tab button (required)   |
+| `content` | `WysiwygText` | Panel content HTML (required)                        |
+| `active`  | `boolean`     | Adds `data-active` to mark this panel as the default |
 
-- Sticky import: `import '@pnx-mixtape/mxds/src/Component/Tabs/Elements/Tabs';` and be sure to include `<mx-tabs>` around the content.
+---
 
-See twig files for all HTML examples.
+## HTML + Web Component
+
+The `<mx-tabs>` custom element auto-builds both the desktop tab strip and the mobile drop menu from `[data-tab]` panel elements. You only author the panels — tab buttons are generated at connect time.
+
+```html
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tabs-example">
+  <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-1" data-tab="Funk">
+    Funk panel content.
+  </div>
+  <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-2" data-tab="Soul">
+    Soul panel content.
+  </div>
+  <div
+    class="mx-tabs__panel mx-vertical-flow mx-container"
+    id="tab-3"
+    data-tab="Motown"
+    data-active
+  >
+    Motown panel content.
+  </div>
+</mx-tabs>
+```
+
+**Import the JS:**
+
+```js
+import "@pnx-mixtape/mxds/src/Component/Tabs/Elements/Tabs"
+```
+
+**Panel requirements:**
+
+- Each panel needs an `id` and a `data-tab="Label"` attribute (used as the button label and `aria-label`).
+- Add `data-active` to mark a panel active by default. Otherwise the first panel is active, unless the URL hash matches a panel id.
+- The element sets `role="tabpanel"`, `tabindex="0"`, and `aria-label` automatically.
+
+**Attributes on `<mx-tabs>`:**
+
+| Attribute            | Default                                                | Description                                                                 |
+| -------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------- |
+| `id`                 | auto (`tab-drop-menu-*`)                               | Id used for the drop menu anchor                                            |
+| `mq`                 | `(max-width: 720px)`                                   | Media query that switches between drop menu (mobile) and tab list (desktop) |
+| `tabListClasses`     | `mx-tabs__list`                                        | Classes applied to the generated tab list wrapper                           |
+| `dropTriggerClasses` | `mx-button mx-icon mx-icon--chevron-down mx-icon--end` | Classes applied to the mobile drop menu trigger button                      |
+
+**Custom event:** `tab-toggle` — dispatched on tab change with `detail: { id, tab, button, panel }`.
+
+---
+
+## React
+
+Uses a Context-based composition pattern. `Tabs` wraps a `TabDropMenu` (mobile trigger), a `TabList` (desktop trigger strip), and one `TabPanel` per tab. The `id` prop on each `Tab` must match its corresponding `TabPanel` `id`.
+
+```tsx
+import { Tabs, TabList, Tab, TabPanel, TabDropMenu, DropMenuItem } from "@pnx-mixtape/mxds/react"
+import { TabStyles } from "@pnx-mixtape/mxds/src/enums"
+
+// Default
+<Tabs id="tabs-example" active="tab-1">
+  <TabDropMenu>
+    <DropMenuItem id="tab-1" label="Tab 1" aria-controls="tab-1" role="tab" />
+    <DropMenuItem id="tab-2" label="Tab 2" aria-controls="tab-2" role="tab" />
+    <DropMenuItem id="tab-3" label="Tab 3" aria-controls="tab-3" role="tab" />
+  </TabDropMenu>
+  <TabList>
+    <Tab id="tab-1">Tab 1</Tab>
+    <Tab id="tab-2">Tab 2</Tab>
+    <Tab id="tab-3">Tab 3</Tab>
+  </TabList>
+  <TabPanel id="tab-1"><p>This is tab 1</p></TabPanel>
+  <TabPanel id="tab-2"><p>This is tab 2</p></TabPanel>
+  <TabPanel id="tab-3"><p>This is tab 3</p></TabPanel>
+</Tabs>
+
+// Lined variant (borders under the tab strip)
+<Tabs id="tabs-lined" active="tab-1" modifier={TabStyles.LINED}>
+  {/* ...same children... */}
+</Tabs>
+
+// Centered variant (tab strip centred horizontally)
+<Tabs id="tabs-centered" active="tab-1" modifier={TabStyles.CENTERED}>
+  {/* ...same children... */}
+</Tabs>
+```
+
+**`Tabs` props:**
+
+| Prop       | Type        | Default          | Description                                                                        |
+| ---------- | ----------- | ---------------- | ---------------------------------------------------------------------------------- |
+| `id`       | `string`    | auto (`useId()`) | Unique id for the tab set — also used by the drop menu context                     |
+| `active`   | `string`    | —                | Id of the initially active tab panel. Overridden by a `?tab=` URL param if present |
+| `modifier` | `TabStyles` | —                | Visual variant — applies an `mx-tabs--{modifier}` class                            |
+| `children` | `ReactNode` | —                | `TabDropMenu`, `TabList`, and `TabPanel` children                                  |
+
+**`Tab` props:**
+
+| Prop        | Type        | Description                                                                                        |
+| ----------- | ----------- | -------------------------------------------------------------------------------------------------- |
+| `id`        | `string`    | Must match the matching `TabPanel` `id`. Renders as `id="{id}-button"` with `aria-controls="{id}"` |
+| `className` | `string`    | Optional extra class on the `<button>`                                                             |
+| `children`  | `ReactNode` | Tab label                                                                                          |
+
+**`TabPanel` props:**
+
+| Prop        | Type        | Default           | Description                                 |
+| ----------- | ----------- | ----------------- | ------------------------------------------- |
+| `id`        | `string`    | —                 | Must match the matching `Tab` `id`          |
+| `className` | `string`    | `"mx-section--l"` | Extra class on the panel (controls padding) |
+| `children`  | `ReactNode` | —                 | Panel content                               |
+
+**`TabList`** — no props. Renders a `<div class="mx-tabs__list desktop-only" role="tablist">`.
+
+**`TabDropMenu`** — no props. Renders a `DropMenu` labelled with the current active tab, visible only on mobile.
+
+---
+
+## Modifiers (`TabStyles` enum)
+
+| Class                   | `TabStyles` value                   | Visual intent                                                                                |
+| ----------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------- |
+| `mx-tabs` (no modifier) | `TabStyles.DEFAULT` (`"default"`)   | Plain tab strip, left-aligned buttons                                                        |
+| `mx-tabs--centered`     | `TabStyles.CENTERED` (`"centered"`) | Tab strip centred horizontally (medium-up)                                                   |
+| `mx-tabs--lined`        | `TabStyles.LINED` (`"lined"`)       | Border under the tab list, buttons rounded at the top (medium-up). Used by the Twig template |
+
+---
+
+## Accessibility
+
+- The tab strip uses `role="tablist"`; each tab uses `role="tab"`; each panel uses `role="tabpanel"`.
+- Selected state is communicated via `aria-selected="true"`. Inactive tabs are `aria-selected="false"`.
+- Each tab has `aria-controls="{panelId}"`; each panel has `aria-labelledby="{tabId}-button"` (React) or `aria-label="{title}"` (web component).
+- Roving tab index — the active tab is `tabindex="0"`; other tabs are `tabindex="-1"`.
+- **Keyboard:** ArrowRight moves focus to the next tab (wraps to first at end), ArrowLeft moves focus to the previous tab (wraps to last at start). Focus follows selection on click.
+  - **React:** arrow-key roving uses react-aria's `useFocusManager` inside a `FocusScope` wrapping the tab list.
+  - **Web component (`<mx-tabs>`):** arrow-key roving is handled by the shared `Keyboard` utility.
+- Inactive panels receive `inert` so their content is removed from the focus order and screen reader tree.
+- Active panel is focused programmatically on tab change (web component) with `preventScroll: true`.
+- Mobile drop menu uses `role="tablist"` on the popover and `role="tab"` on each `DropMenuItem`.
+- Icon-only chevron on the drop menu trigger uses `aria-hidden` / icon font classes — the button label is the current tab's text.
+
+---
+
+## URL state
+
+- Changing tab writes `?tab={id}` via `history.replaceState` — no page reload.
+- On load, if `?tab={id}` is present it overrides the `active` prop (React) / first-panel default (web component).
+- `<mx-tabs>` also checks `window.location.hash` — if the hash matches a panel `id`, that tab opens.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-tabs {
+  --tab-min-width: 0; /* min-inline-size of each tab button */
+  --tab-font-size: var(--font-size-m); /* button font size */
+  --vertical-padding: var(--spacing-xxs); /* button vertical padding */
+  --horizontal-padding: var(--spacing-m); /* button horizontal padding */
+  --tab-background: var(--colour-background); /* inactive tab background */
+  --tab-foreground: var(--colour-foreground); /* inactive tab text colour */
+  --tab-active-background: var(--colour-background-alt); /* active tab background */
+  --tab-active-foreground: var(--colour-foreground); /* active tab text colour */
+  --tab-panels-padding: var(--section-l) 0; /* padding around panel content */
+}
+
+.mx-tabs--lined {
+  --line-width: 1px; /* border thickness */
+  --line-colour: var(--colour-border); /* border colour */
+}
+```

package/src/Component/Tabs/Tabs.figma.ts

@@ -0,0 +1,41 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=10-48
+// source=src/Component/Tabs/Tabs.tsx
+// component=Tabs
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+// `Style` (TabStyles) is a prop on the OUTER <Tabs> component in code (applied to
+// .mx-tabs, cascading to .mx-tabs__list via CSS) — TabList.tsx itself only accepts
+// `children`, no style prop. This mapping (on the Figma "TabList" node) represents
+// the real composite: Tabs > TabList > Tab. TabList doesn't get its own separate
+// Code Connect file because of that prop mismatch — there's no distinct Figma node
+// for the bare, style-less <Tabs> wrapper to hang a separate <TabList> mapping off
+// of. TabPanel, by contrast, has zero prop overlap with Tabs/TabList and IS a real
+// standalone mapping — see TabPanel.figma.ts.
+const style = instance.getEnum("Style", {
+  Default: null,
+  Centered: "TabStyles.CENTERED",
+  Lined: "TabStyles.LINED",
+})
+const styleProp = style ? ` modifier={${style}}` : ""
+
+// TabList's Tab children are a real SLOT (any number of Tab instances, in any order),
+// not fixed named instances — each child renders via its own Tab Code Connect mapping.
+const tabs = instance.getSlot("Content")
+
+// Which tab renders "active" can't be read back from a child Tab instance through the
+// current Code Connect API (InstanceHandle only exposes executeTemplate/hasCodeConnect/
+// codeConnectId — no variant-property introspection from the parent). `active` is
+// omitted here rather than guessed at.
+export default {
+  example: figma.code`<Tabs id="tabs-id"${styleProp}><TabList>${tabs}</TabList></Tabs>`,
+  imports: [
+    'import { Tabs, TabList } from "@pnx-mixtape/mxds/react"',
+    'import { TabStyles } from "@pnx-mixtape/mxds/src/enums"',
+  ],
+  id: "tabs",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Tabs/Tabs.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect } from "storybook/test"
 import Component from "./tabs.twig"
 import TabItem from "./tab-item.twig"
 import { HeadingTypes, Tabs as TabsType } from "@pnx-mixtape/ids-shape"
@@ -10,6 +11,7 @@ import "./Elements/Tabs"
 import "../Popover/popover.css"
 import "../DropMenu/drop-menu.css"
 import Heading from "../../Atom/Heading/heading.twig"
+import { modes } from "../../../.storybook/modes"
 
 /**
  * A Tabs component built from a list of TabItems.
@@ -39,7 +41,7 @@ const meta: Meta<TabsType> = {
         content:
           "Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
       }),
-    ],
+    ].join(""),
   },
   parameters: {
     a11y: {
@@ -53,6 +55,12 @@ const meta: Meta<TabsType> = {
         ],
       },
     },
+    chromatic: {
+      modes: {
+        mobile: modes["xs"],
+        desktop: modes["xl"],
+      },
+    },
   },
   argTypes: {
     id: {
@@ -64,14 +72,15 @@ const meta: Meta<TabsType> = {
       },
     },
     items: {
-      description: "A list of [TabItem](/?path=/docs/component-tabs-tabitem--docs) objects.",
+      description:
+        "A concatenated string of [TabItem](/?path=/docs/component-tabs-tabitem--docs) markup.",
       type: {
         name: "other",
         required: true,
-        value: "array",
+        value: "string",
       },
       table: {
-        type: { summary: "TabItem[]" },
+        type: { summary: "string" },
       },
     },
     title: {
@@ -87,7 +96,52 @@ const meta: Meta<TabsType> = {
 export default meta
 type Story = StoryObj<TabsType>
 
-export const Tabs: Story = {}
+export const Tabs: Story = {
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const tab1 = canvas.getByRole("tab", { name: "Funk" })
+    const tab2 = canvas.getByRole("tab", { name: "Soul" })
+    const tab3 = canvas.getByRole("tab", { name: "Motown" })
+    const panel = (id: string): HTMLElement => canvasElement.querySelector(`#${id}`) as HTMLElement
+
+    await step("Funk starts selected", async () => {
+      await expect(tab1).toHaveAttribute("aria-selected", "true")
+      await expect(panel("tab-1")).not.toHaveAttribute("inert")
+      await expect(panel("tab-2")).toHaveAttribute("inert")
+    })
+
+    await step("Click selects a tab and moves focus to its panel", async () => {
+      await userEvent.click(tab2)
+      await expect(tab2).toHaveAttribute("aria-selected", "true")
+      await expect(tab1).toHaveAttribute("aria-selected", "false")
+      await expect(panel("tab-2")).not.toHaveAttribute("inert")
+      await expect(panel("tab-1")).toHaveAttribute("inert")
+      await expect(panel("tab-2")).toHaveFocus()
+    })
+
+    await step("ArrowRight/ArrowLeft move focus, with wraparound", async () => {
+      tab2.focus()
+      await userEvent.keyboard("{ArrowRight}")
+      await expect(tab3).toHaveFocus()
+      await userEvent.keyboard("{ArrowRight}")
+      await expect(tab1).toHaveFocus()
+      await userEvent.keyboard("{ArrowLeft}")
+      await expect(tab3).toHaveFocus()
+    })
+
+    await step("Home/End jump to first/last tab", async () => {
+      await userEvent.keyboard("{Home}")
+      await expect(tab1).toHaveFocus()
+      await userEvent.keyboard("{End}")
+      await expect(tab3).toHaveFocus()
+    })
+
+    await step("Reset: reselect Funk and clear the ?tab= param", async () => {
+      await userEvent.click(tab1)
+      await expect(tab1).toHaveAttribute("aria-selected", "true")
+      window.history.replaceState({}, "", window.location.pathname)
+    })
+  },
+}
 
 /**
  * Can have a heading above the tabs for extra context.