docs(demo): add "what it is / when to use" captions to demo section groups

[jackgranatowski]

62 of 122 narrative

groups in demo/index.html lacked a one-line
description saying what the group demonstrates and when to reach for it.
Add a muted caption paragraph under each group that was missing one (65
groups), matching the existing caption style already used by the layout
sections. Wording is grounded in the per-entry descriptions from
docs/api-index.json.

Two

s that are demo content rather than group headings (the "h3 — The
quick brown fox" type specimen and the "Lists Are Restored" heading inside
the .sf-prose sample) are intentionally left untouched.

No token/class coverage change; coverage.test.js and the demo-visual e2e
suite stay green.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 25 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 66f557b9-00f8-4439-aa09-206ad0f62c85

📥 Commits

Reviewing files that changed from the base of the PR and between bb27974 and fd53af0.

📒 Files selected for processing (1)

• demo/index.html

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/sf-prose-config-demo-issues-tbvnfq

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

This PR adds one-line descriptive captions under 65 <h3> group headings in demo/index.html that previously lacked them, matching the muted-text paragraph style used by existing layout sections. The captions are grounded in docs/api-index.json descriptions and no token or class coverage is changed.

• Two of the new captions contain unescaped HTML tag names (<a> in the "Link States" group and <hr> in the "HR & Separator" group). The <hr> causes the browser to implicitly close the paragraph early, orphaning the trailing text; the <a> wraps the remainder of the sentence in an implicit anchor element.
• The adjacent paragraph at line 2593 already correctly uses <code>&lt;hr&gt;</code>, so the fix pattern is established in the same file.

Confidence Score: 3/5

Two of the new caption paragraphs contain raw, unescaped HTML element names that the browser will interpret as actual tags rather than display as text, producing broken markup in the rendered demo.

The <hr> caption at line 2591 causes the browser to implicitly close the enclosing <p> element early (since <p> cannot contain a block element), leaving the descriptive text orphaned outside the paragraph. The <a> caption at line 1152 silently wraps the trailing sentence in a phantom anchor. Both are visible rendering defects in the demo page; everything else in the PR is well-formed.

demo/index.html — specifically the "Link States" caption (line 1152) and the "HR & Separator" caption (line 2591).

Important Files Changed

Filename	Overview
demo/index.html	Adds ~65 muted caption paragraphs under demo section headings; two captions contain unescaped HTML tags ( and ) that produce broken DOM structure in the rendered demo.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[demo/index.html h3 group heading] --> B{Had caption already?}
    B -- Yes --> C[Left untouched]
    B -- No --> D[New muted caption paragraph added]
    D --> E{Caption text contains raw HTML tag?}
    E -- No: 63 captions --> F[Renders correctly]
    E -- Yes: 2 captions --> G[Unescaped tag in text]
    G --> H[lt-a-gt wraps tail text in phantom anchor]
    G --> I[lt-hr-gt breaks paragraph, orphans tail text]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[demo/index.html h3 group heading] --> B{Had caption already?}
    B -- Yes --> C[Left untouched]
    B -- No --> D[New muted caption paragraph added]
    D --> E{Caption text contains raw HTML tag?}
    E -- No: 63 captions --> F[Renders correctly]
    E -- Yes: 2 captions --> G[Unescaped tag in text]
    G --> H[lt-a-gt wraps tail text in phantom anchor]
    G --> I[lt-hr-gt breaks paragraph, orphans tail text]

Loading

_{Reviews (1): Last reviewed commit: "docs(demo): add "what it is / when to us..." | Re-trigger Greptile}

[greptile-apps]

Unescaped <hr> in paragraph text will break the DOM. Because <p> cannot contain a block-level element, the browser implicitly closes the <p> before rendering the <hr>, so the text "— a themed divider…" is orphaned outside any paragraph. Line 2593 directly below already shows the correct pattern: <code>&lt;hr&gt;</code>.

Suggested change

	<p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">The default <hr> — a themed divider using border-color tokens; spacing follows the surrounding rhythm.</p>
	<p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">The default <code>&lt;hr&gt;</code> — a themed divider using border-color tokens; spacing follows the surrounding rhythm.</p>

[greptile-apps]

The unescaped <a> here creates a real (invisible) anchor element, causing everything after it — "— a consistent affordance with no utility class." — to be wrapped inside an implicit <a> tag with no href. The intent is clearly to reference the HTML element name as text, so it should use escaped entities or a <code> tag, consistent with the rest of the file.

Suggested change

	<p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Default, hover, visited and active link colors on bare <a> — a consistent affordance with no utility class.</p>
	<p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Default, hover, visited and active link colors on bare <code>&lt;a&gt;</code> — a consistent affordance with no utility class.</p>