Skip to content

feat(tabs): interactive tabs via '## Title {.tabs}' heading class#87

Open
teezeit wants to merge 1 commit intoakonan:mainfrom
teezeit:feat/tabs-upstream
Open

feat(tabs): interactive tabs via '## Title {.tabs}' heading class#87
teezeit wants to merge 1 commit intoakonan:mainfrom
teezeit:feat/tabs-upstream

Conversation

@teezeit
Copy link
Copy Markdown
Contributor

@teezeit teezeit commented Apr 19, 2026

Summary

  • ## Title {.tabs} heading class declares a tabs container; child ### headings become tab panels
  • First tab active by default; {.active} on a child heading overrides
  • Tab headers render as an underline-style tab bar (not pill/button)
  • Injects a minimal click-delegated wmdSwitchTab script once per page (idempotent via window.__wmdTabsInit)
  • Updates docs/guide/syntax.md and SYNTAX-SPEC-v0.1.md

Syntax

## Settings {.tabs}

### Profile
Name
[_____________________________]{required}

### Notifications
[ ] Email alerts
[ ] SMS alerts

### Security {.active}
[Change Password]

Implementation notes

Mirrors the existing grid pattern: same top-level loop in transformToWiremdAST, same heading-depth traversal for child collection. Tab CSS uses an underline indicator (border-bottom) rather than pills to match standard tab conventions.

Test plan

  • ## Heading {.tabs} renders tab headers + panels
  • First tab active by default; {.active} on a child heading overrides
  • Clicking a tab header shows its panel and hides others
  • Works across all styles (sketch, clean, wireframe, material, brutal)
  • npm test passes (484 tests)

🤖 Generated with Claude Code

Mirrors the grid pattern: heading with .tabs class declares the tabs
container; direct child headings (depth+1) become tab panels. First
tab active by default; {.active} on a sub-heading overrides.

- Parser: detect .tabs class in top-level loop, emit tabs/tab nodes
- Renderer: tabs case emits header row + panel divs, injects one-time
  click-delegated switcher script (idempotent via window.__wmdTabsInit)
- Styles: structural underline tab rules in getStyleCSS wrapper,
  sketch-specific color overrides
- Docs: updated syntax guide and SYNTAX-SPEC
- Tests: 7 parser + 6 renderer tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant