Add horizontal table of contents for The Filter in the revamped immersive layout

[peranosborn]

Stacked on #16875. Merge that first; this PR targets its branch so the diff only shows the table of contents changes.

What does this change?

Immersive Filter articles in the revamped immersive layout get a horizontal table of contents instead of the vertical "Jump to" list.

• HorizontalTableOfContents island (new): a sticky bar of links to the article's sections. It scrolls horizontally, with edge fades, and has previous/next buttons from tablet up (swipe below tablet). The section currently in view is marked with aria-current="location".
• ArticleBody: new tableOfContentsStyle prop ('default' | 'horizontal', default 'default'). 'horizontal' renders the new island and adds a scroll-margin-top to section headings so they don't land under the sticky bar.
• StandardLayoutArticleGrid: passes 'horizontal' for immersive articles with a Filter series tag (hasFilterSeriesTag, added in Add filter check to prevent showing slim nav in immersive format #16875).
• Palette: new --list-sticky-nav-* tokens (background, border, text, hover, active). These are pillar-tinted, with neutral fallbacks for Labs and Special Report.

Like #16875, this only covers the revamped immersive layout (StandardLayout, behind the articles-and-publishing-revamped-immersive-layout test). ImmersiveLayout is unchanged, and all other articles keep the existing table of contents.

Why?

The Filter's long-form buying guides have a lot of sections. A sticky horizontal nav lets readers see where they are and jump between sections without scrolling back to the top.

How has this change been tested?

• Unit tests for HorizontalTableOfContents.
• Storybook stories for the component.
• Ran locally against a CODE preview Filter immersive article with the revamped layout test forced on.

Screenshots

Before	After

🤖 Generated with Claude Code

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:15089f9e5c601c74d35d933a067eded947e0273f9885873458c4cc39ebe32220

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:15089f9e5c601c74d35d933a067eded947e0273f9885873458c4cc39ebe32220"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-po-horizontal-table-of-contents"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-32278"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

---

From guardian/actions-ecr.

[github-actions]

Deploy build 32278 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 32278 of dotcom:rendering-all to CODE
• Deploy parts of build 32278 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.