NgmdTab

Tabs API designed to survive Custom Element rendering inside markdown.

Authoring:

<ngmd-tabs> <ngmd-tab title="pnpm"> <pre><code>pnpm install</code></pre> </ngmd-tab> <ngmd-tab title="npm"> <pre><code>npm install</code></pre> </ngmd-tab> </ngmd-tabs>

Why this shape (vs. the previous <ng-template ngmdTab> directive API): inside <analog-markdown [content]> the body is rendered via innerHTML and Angular's compiler never walks it, so <ng-template> children get stripped by the browser and directives never apply. <ngmd-tab> as a real component upgrades through @angular/elements so its content survives. The parent walks the light DOM, reads each tab's title attribute for the trigger row, and toggles visibility via a data-active attribute the child observes — same pattern used by <ngmd-workflow> for step indexing.

Visual style mirrors adev's docs-tab-group: rounded outer border, underline on the active trigger, content panel below. A11y: role="tablist", role="tab" + aria-selected + aria-controls, role="tabpanel" + aria-labelledby, arrow / Home / End keyboard navigation with focus moved to the new active trigger.