ClintchizandClaude Opus 5
124da548b8
Every bundled component must expose color and size; the rewrites dropped them, which the library-wide invariant test caught. Rather than re-adding them as dead props, each component now maps color onto an accent variable that its active, current and focus affordances actually use, and size onto the root font scale. Regenerates the component reference, showcase and visual contract. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
403 lines
22 KiB
Plaintext
403 lines
22 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page StepperDetail {
|
|
layout = "showcase"
|
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
|
state playground_steps = JSON.parse(ctx.url.searchParams.get("pg_steps") ?? "[{\"id\":\"stepper-0-1\",\"key\":\"stepper-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#stepper-demo\",\"actionHref\":\"#stepper-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"stepper-0-2\",\"key\":\"stepper-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#stepper-demo\",\"actionHref\":\"#stepper-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
|
state playground_active = Number(ctx.url.searchParams.get("pg_active") ?? "0")
|
|
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
|
state playground_clickable = (ctx.url.searchParams.get("pg_clickable") ?? "false") === "true"
|
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Stepper"
|
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
|
seo {
|
|
title = "Stepper"
|
|
description = "Theme-aware, responsive stepper component."
|
|
}
|
|
view {
|
|
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
|
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Stepper</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Navigation component</span>
|
|
<h1>Stepper</h1>
|
|
<p>Theme-aware, responsive stepper component.</p>
|
|
<div class="detail-badges"><span>8 props</span><span>2 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
|
</div>
|
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
|
</header>
|
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Stepper" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Stepper</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
|
<div class="playground-workbench">
|
|
<div class="playground-preview">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="playground-preview-source" data-playground-preview><Stepper color='{playground_color}' size='{playground_size}' steps='{playground_steps}' active='{playground_active}' orientation='{playground_orientation}' clickable='{playground_clickable}' label='{playground_label}' class='{playground_class}' /></div>
|
|
<section class="playground-code" aria-label="Current component code">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
|
<pre><code data-playground-code><Stepper
|
|
steps='[
|
|
<span>{</span>
|
|
"id": "stepper-0-1",
|
|
"key": "stepper-0-1",
|
|
"value": "primary",
|
|
"label": "Primary workflow",
|
|
"title": "Primary workflow",
|
|
"description": "A clean default configuration for everyday product interfaces.",
|
|
"text": "A configurable sample message.",
|
|
"href": "#stepper-demo",
|
|
"actionHref": "#stepper-demo",
|
|
"actionLabel": "View details",
|
|
"icon": "icon-[lucide--sparkles]",
|
|
"iconClass": "icon-[lucide--sparkles]",
|
|
"variant": "primary",
|
|
"status": "Active",
|
|
"time": "09:30",
|
|
"current": true,
|
|
"selected": true,
|
|
"checked": true,
|
|
"disabled": false,
|
|
"outgoing": false,
|
|
"open": true,
|
|
"number": 1,
|
|
"count": 16,
|
|
"percentage": 72,
|
|
"color": "#7c3aed",
|
|
"target": "_self",
|
|
"ariaLabel": "Open primary workflow 1",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Nested option A",
|
|
"value": "nested-a"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Nested option B",
|
|
"value": "nested-b"
|
|
<span>}</span>
|
|
],
|
|
"links": [
|
|
<span>{</span>
|
|
"label": "Documentation",
|
|
"href": "#documentation"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "API reference",
|
|
"href": "#api-reference"
|
|
<span>}</span>
|
|
],
|
|
"values": [
|
|
"Included",
|
|
"Standard"
|
|
]
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"id": "stepper-0-2",
|
|
"key": "stepper-0-2",
|
|
"value": "secondary",
|
|
"label": "Additional option",
|
|
"title": "Supporting example",
|
|
"description": "A clean default configuration for everyday product interfaces.",
|
|
"text": "Another configurable message.",
|
|
"href": "#stepper-demo",
|
|
"actionHref": "#stepper-demo",
|
|
"actionLabel": "View details",
|
|
"icon": "icon-[lucide--sparkles]",
|
|
"iconClass": "icon-[lucide--sparkles]",
|
|
"variant": "primary",
|
|
"status": "Active",
|
|
"time": "09:30",
|
|
"current": false,
|
|
"selected": false,
|
|
"checked": false,
|
|
"disabled": false,
|
|
"outgoing": true,
|
|
"open": true,
|
|
"number": 2,
|
|
"count": 32,
|
|
"percentage": 72,
|
|
"color": "#7c3aed",
|
|
"target": "_self",
|
|
"ariaLabel": "Open primary workflow 2",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Nested option A",
|
|
"value": "nested-a"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Nested option B",
|
|
"value": "nested-b"
|
|
<span>}</span>
|
|
],
|
|
"links": [
|
|
<span>{</span>
|
|
"label": "Documentation",
|
|
"href": "#documentation"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "API reference",
|
|
"href": "#api-reference"
|
|
<span>}</span>
|
|
],
|
|
"values": [
|
|
"Included",
|
|
"Standard"
|
|
]
|
|
<span>}</span>
|
|
]'
|
|
label="Stepper">
|
|
<div data-slot="step-<span>{</span>index<span>}</span>">
|
|
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
|
</div>
|
|
</Stepper></code></pre>
|
|
</section>
|
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
|
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
|
</div>
|
|
<form class="playground-controls" data-playground-form>
|
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
|
<div class="playground-fields"><label class="playground-field" for="playground-stepper-color"><span><strong>color</strong><small>string</small></span><select id="playground-stepper-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-stepper-size"><span><strong>size</strong><small>string</small></span><select id="playground-stepper-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-stepper-steps"><span><strong>steps</strong><small>unknown[]</small></span><textarea id="playground-stepper-steps" name="pg_steps" rows="5" spellcheck="false" data-playground-json>[
|
|
{
|
|
"id": "stepper-0-1",
|
|
"key": "stepper-0-1",
|
|
"value": "primary",
|
|
"label": "Primary workflow",
|
|
"title": "Primary workflow",
|
|
"description": "A clean default configuration for everyday product interfaces.",
|
|
"text": "A configurable sample message.",
|
|
"href": "#stepper-demo",
|
|
"actionHref": "#stepper-demo",
|
|
"actionLabel": "View details",
|
|
"icon": "icon-[lucide--sparkles]",
|
|
"iconClass": "icon-[lucide--sparkles]",
|
|
"variant": "primary",
|
|
"status": "Active",
|
|
"time": "09:30",
|
|
"current": true,
|
|
"selected": true,
|
|
"checked": true,
|
|
"disabled": false,
|
|
"outgoing": false,
|
|
"open": true,
|
|
"number": 1,
|
|
"count": 16,
|
|
"percentage": 72,
|
|
"color": "#7c3aed",
|
|
"target": "_self",
|
|
"ariaLabel": "Open primary workflow 1",
|
|
"items": [
|
|
{
|
|
"label": "Nested option A",
|
|
"value": "nested-a"
|
|
},
|
|
{
|
|
"label": "Nested option B",
|
|
"value": "nested-b"
|
|
}
|
|
],
|
|
"links": [
|
|
{
|
|
"label": "Documentation",
|
|
"href": "#documentation"
|
|
},
|
|
{
|
|
"label": "API reference",
|
|
"href": "#api-reference"
|
|
}
|
|
],
|
|
"values": [
|
|
"Included",
|
|
"Standard"
|
|
]
|
|
},
|
|
{
|
|
"id": "stepper-0-2",
|
|
"key": "stepper-0-2",
|
|
"value": "secondary",
|
|
"label": "Additional option",
|
|
"title": "Supporting example",
|
|
"description": "A clean default configuration for everyday product interfaces.",
|
|
"text": "Another configurable message.",
|
|
"href": "#stepper-demo",
|
|
"actionHref": "#stepper-demo",
|
|
"actionLabel": "View details",
|
|
"icon": "icon-[lucide--sparkles]",
|
|
"iconClass": "icon-[lucide--sparkles]",
|
|
"variant": "primary",
|
|
"status": "Active",
|
|
"time": "09:30",
|
|
"current": false,
|
|
"selected": false,
|
|
"checked": false,
|
|
"disabled": false,
|
|
"outgoing": true,
|
|
"open": true,
|
|
"number": 2,
|
|
"count": 32,
|
|
"percentage": 72,
|
|
"color": "#7c3aed",
|
|
"target": "_self",
|
|
"ariaLabel": "Open primary workflow 2",
|
|
"items": [
|
|
{
|
|
"label": "Nested option A",
|
|
"value": "nested-a"
|
|
},
|
|
{
|
|
"label": "Nested option B",
|
|
"value": "nested-b"
|
|
}
|
|
],
|
|
"links": [
|
|
{
|
|
"label": "Documentation",
|
|
"href": "#documentation"
|
|
},
|
|
{
|
|
"label": "API reference",
|
|
"href": "#api-reference"
|
|
}
|
|
],
|
|
"values": [
|
|
"Included",
|
|
"Standard"
|
|
]
|
|
}
|
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stepper-active"><span><strong>active</strong><small>number</small></span><input id="playground-stepper-active" name="pg_active" type="number" value="0" /></label><label class="playground-field" for="playground-stepper-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-stepper-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-stepper-clickable"><span><strong>clickable</strong><small>boolean</small></span><input id="playground-stepper-clickable" name="pg_clickable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stepper-label"><span><strong>label</strong><small>string</small></span><input id="playground-stepper-label" name="pg_label" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-class"><span><strong>class</strong><small>string</small></span><input id="playground-stepper-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<div class="detail-layout">
|
|
<main class="detail-content">
|
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Recommended</span><h2>Horizontal progress</h2><p>Steps before the active one read as complete, the active one is highlighted, and the rest are muted.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="stepper-demo-1" class="demo-canvas demo-canvas--1">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" clickable="false" label="Stepper" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Horizontal progress usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Stepper
|
|
steps='[
|
|
<span>{</span>
|
|
"label": "Account",
|
|
"description": "Your details"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Billing",
|
|
"description": "Payment method"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Confirm",
|
|
"description": "Review and submit"
|
|
<span>}</span>
|
|
]'
|
|
active="1"
|
|
label="Stepper">
|
|
<div data-slot="step-<span>{</span>index<span>}</span>">
|
|
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
|
</div>
|
|
</Stepper></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Recommended</span><h2>Vertical with icons</h2><p>Vertical orientation suits a sidebar or a narrow column. Any step may carry an iconify class instead of its number.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="stepper-demo-2" class="demo-canvas demo-canvas--2">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Stepper size="sm" steps='[{"label":"Cloned","icon":"icon-[lucide--git-branch]"},{"label":"Built","icon":"icon-[lucide--hammer]"},{"label":"Deployed","icon":"icon-[lucide--rocket]"}]' active="2" orientation="vertical" clickable="false" label="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Vertical with icons usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Stepper
|
|
size="sm"
|
|
steps='[
|
|
<span>{</span>
|
|
"label": "Cloned",
|
|
"icon": "icon-[lucide--git-branch]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Built",
|
|
"icon": "icon-[lucide--hammer]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Deployed",
|
|
"icon": "icon-[lucide--rocket]"
|
|
<span>}</span>
|
|
]'
|
|
active="2"
|
|
orientation="vertical"
|
|
label="Compact example">
|
|
<div data-slot="step-<span>{</span>index<span>}</span>">
|
|
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
|
</div>
|
|
</Stepper></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Advanced</span><h2>Clickable steps</h2><p>With clickable the steps emit a change output and take arrow-key roving focus. Without it the stepper is read-only and stays out of the tab order.</p></div>
|
|
<span class="demo-case-number">03</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="stepper-demo-3" class="demo-canvas demo-canvas--3">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Stepper size="lg" steps='[{"label":"One"},{"label":"Two"},{"label":"Three"}]' active="0" clickable="true" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Clickable steps usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Stepper
|
|
size="lg"
|
|
steps='[
|
|
<span>{</span>
|
|
"label": "One"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Two"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Three"
|
|
<span>}</span>
|
|
]'
|
|
clickable="true"
|
|
label="Advanced example">
|
|
<div data-slot="step-<span>{</span>index<span>}</span>">
|
|
<div class="showcase-slot">step-<span>{</span>index<span>}</span> slot</div>
|
|
</div>
|
|
</Stepper></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><Stepper
|
|
@change='console.log(payload)'
|
|
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
|
|
|
const component = document.querySelector("[data-ui-component=\"Stepper\"], [data-component=\"Stepper\"]")
|
|
|
|
if (component) registerOutputHandler(component, "change", (payload) => <span>{</span>
|
|
console.log("change", payload)
|
|
<span>}</span>)</code></pre></section></div></div></section>
|
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>steps</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>clickable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
|
</main>
|
|
<aside class="detail-aside">
|
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#stepper-demo-1">Horizontal progress</a><a href="#stepper-demo-2">Vertical with icons</a><a href="#stepper-demo-3">Clickable steps</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/sidebar"><small>Previous</small><strong>← Sidebar</strong></a>
|
|
<a href="/components/tabs"><small>Next</small><strong>Tabs →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|