WorkRoot/WorkRoot-WRNexusJSComponent
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88

Browse Source 
- Sync app, public, scripts, test and examples from the framework's
  component-showcase: redesigned component demos, marketing blocks under
  /blocks, template and preview galleries, distinct Timeline/Section
  variants, Chat Bubble receipts, a top-placement Drawer demo, and the
  playground code panel fix (objects in array props no longer blank out).
- Standalone adaptations kept: the generator and tests read
  component-reference.json from the published @wrnexus/ui, and tests use
  the published @wrnexus/compiler and @wrnexus/syntax.
- Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88,
  styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the
  playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 16:50:22 +05:30
1 parent bec9ef2889
commit c0ac38c572
171 files changed
+21983 -35658
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/pages/components/navbar.wrn
+455 -398
View File
@@ -10,9 +10,18 @@ page NavbarDetail {
state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-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\":\"#navbar-demo\",\"actionHref\":\"#navbar-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\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-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 = ctx.url.searchParams.get("pg_active") ?? ""
state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
state playground_floating = (ctx.url.searchParams.get("pg_floating") ?? "false") === "true"
state playground_startFloating = ctx.url.searchParams.get("pg_startFloating") ?? "0px"
state playground_openOnHover = (ctx.url.searchParams.get("pg_openOnHover") ?? "false") === "true"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar"
state playground_collapseAt = ctx.url.searchParams.get("pg_collapseAt") ?? "900px"
state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "content"
state playground_mobileUtilitiesPosition = ctx.url.searchParams.get("pg_mobileUtilitiesPosition") ?? "header"
state playground_gutter = ctx.url.searchParams.get("pg_gutter") ?? "md"
state playground_contentGutter = ctx.url.searchParams.get("pg_contentGutter") ?? "md"
state playground_flushMobile = (ctx.url.searchParams.get("pg_flushMobile") ?? "false") === "true"
state playground_translationPrefix = ctx.url.searchParams.get("pg_translationPrefix") ?? ""
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
state demo_obj_0 = JSON.parse("{\"label\":\"Northwind\",\"description\":\"Console\",\"href\":\"/\"}")
state demo_obj_1 = JSON.parse("{\"label\":\"Northwind\",\"icon\":\"icon-[lucide--box]\",\"href\":\"/\"}")
@@ -30,7 +39,7 @@ page NavbarDetail {
<span class="showcase-eyebrow">Navigation component</span>
<h1>Navbar</h1>
<p>Theme-aware, responsive navbar component.</p>
<div class="detail-badges"><span>13 props</span><span>2 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
<div class="detail-badges"><span>22 props</span><span>4 slots</span><span>5 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>
@@ -39,13 +48,12 @@ page NavbarDetail {
<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><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' class='{playground_class}' /></div>
<div class="playground-preview-source" data-playground-preview><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' floating='{playground_floating}' startFloating='{playground_startFloating}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' collapseAt='{playground_collapseAt}' mobilePanel='{playground_mobilePanel}' mobileUtilitiesPosition='{playground_mobileUtilitiesPosition}' gutter='{playground_gutter}' contentGutter='{playground_contentGutter}' flushMobile='{playground_flushMobile}' translationPrefix='{playground_translationPrefix}' 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>&lt;Navbar
label="Navbar"
topbarLabel="Navbar"
brand='<span>&#123;</span>
<pre><code data-playground-code>page NavbarExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"id": "navbar-0-1",
"key": "navbar-0-1",
"value": "primary",
@@ -97,237 +105,250 @@ page NavbarDetail {
"Included",
"Standard"
]
<span>&#125;</span>'
items='[
<span>&#123;</span>
"id": "navbar-0-1",
"key": "navbar-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": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "navbar-0-2",
"key": "navbar-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
actions='[
<span>&#123;</span>
"id": "navbar-0-1",
"key": "navbar-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": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "navbar-0-2",
"key": "navbar-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
mobileLabel="Navbar"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;</code></pre>
<span>&#125;</span>,
<span>&#123;</span>
"id": "navbar-0-2",
"key": "navbar-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]
state actions = [
<span>&#123;</span>
"id": "navbar-0-1",
"key": "navbar-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": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "navbar-0-2",
"key": "navbar-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Navbar
label="Navbar"
topbarLabel="Navbar"
brand='<span>&#123;</span>
"id": "navbar-0-1",
"key": "navbar-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": "#navbar-demo",
"actionHref": "#navbar-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>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>'
items="<span>&#123;</span>items<span>&#125;</span>"
actions="<span>&#123;</span>actions<span>&#125;</span>"
mobileLabel="Navbar"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></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>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<header><div><span>Component props</span><strong>22 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-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-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-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-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-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-topbarLabel"><span><strong>topbar Label</strong><small>string</small></span><input id="playground-navbar-topbarLabel" name="pg_topbarLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-brand"><span><strong>brand</strong><small>Record&lt;string, unknown&gt;</small></span><textarea id="playground-navbar-brand" name="pg_brand" rows="5" spellcheck="false" data-playground-json>&#123;
"id": "navbar-0-1",
"key": "navbar-0-1",
@@ -594,7 +615,7 @@ page NavbarDetail {
"Standard"
]
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-floating"><span><strong>floating</strong><small>boolean</small></span><input id="playground-navbar-floating" name="pg_floating" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-startFloating"><span><strong>start Floating</strong><small>string</small></span><input id="playground-navbar-startFloating" name="pg_startFloating" type="text" value="0px" /></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-collapseAt"><span><strong>collapse At</strong><small>string</small></span><input id="playground-navbar-collapseAt" name="pg_collapseAt" type="text" value="900px" /></label><label class="playground-field" for="playground-navbar-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-navbar-mobilePanel" name="pg_mobilePanel" type="text" value="content" /></label><label class="playground-field" for="playground-navbar-mobileUtilitiesPosition"><span><strong>mobile Utilities Position</strong><small>string</small></span><input id="playground-navbar-mobileUtilitiesPosition" name="pg_mobileUtilitiesPosition" type="text" value="header" /></label><label class="playground-field" for="playground-navbar-gutter"><span><strong>gutter</strong><small>string</small></span><input id="playground-navbar-gutter" name="pg_gutter" type="text" value="md" /></label><label class="playground-field" for="playground-navbar-contentGutter"><span><strong>content Gutter</strong><small>string</small></span><input id="playground-navbar-contentGutter" name="pg_contentGutter" type="text" value="md" /></label><label class="playground-toggle" for="playground-navbar-flushMobile"><span><strong>flush Mobile</strong><small>boolean</small></span><input id="playground-navbar-flushMobile" name="pg_flushMobile" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-translationPrefix"><span><strong>translation Prefix</strong><small>string</small></span><input id="playground-navbar-translationPrefix" name="pg_translationPrefix" type="text" value="" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
@@ -609,56 +630,68 @@ page NavbarDetail {
<div class="demo-workbench">
<div id="navbar-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"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
<div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" floating="false" openOnHover="false" mobileLabel="Navbar" flushMobile="false" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Brand, links and actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Navbar
topbarLabel="Navbar"
brand='<span>&#123;</span>
"label": "Northwind",
"description": "Console",
"href": "/"
<span>&#125;</span>'
items='[
<span>&#123;</span>
"label": "Overview",
"href": "/",
"value": "overview"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Projects",
"href": "/projects",
"value": "projects"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Reports",
"href": "/reports",
"value": "reports"
<span>&#125;</span>
]'
actions='[
<span>&#123;</span>
"label": "Sign in",
"href": "/login",
"variant": "link"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Start free",
"href": "/signup",
"variant": "primary"
<span>&#125;</span>
]'
active="projects"
mobileLabel="Navbar"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;</code></pre>
<pre><code>page NavbarExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Overview",
"href": "/",
"value": "overview"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Projects",
"href": "/projects",
"value": "projects"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Reports",
"href": "/reports",
"value": "reports"
<span>&#125;</span>
]
state actions = [
<span>&#123;</span>
"label": "Sign in",
"href": "/login",
"variant": "link"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Start free",
"href": "/signup",
"variant": "primary"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Navbar
topbarLabel="Navbar"
brand='<span>&#123;</span>
"label": "Northwind",
"description": "Console",
"href": "/"
<span>&#125;</span>'
items="<span>&#123;</span>items<span>&#125;</span>"
actions="<span>&#123;</span>actions<span>&#125;</span>"
active="projects"
mobileLabel="Navbar"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -670,88 +703,100 @@ page NavbarDetail {
<div class="demo-workbench">
<div id="navbar-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"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
<div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" floating="false" openOnHover="false" mobileLabel="Compact example" flushMobile="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Dropdown and mega panel usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Navbar
size="sm"
label="Compact example"
topbarLabel="Compact example"
brand='<span>&#123;</span>
"label": "Northwind",
"icon": "icon-[lucide--box]",
"href": "/"
<span>&#125;</span>'
items='[
<span>&#123;</span>
"label": "Overview",
"href": "/",
"value": "overview"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Products",
"value": "products",
"columns": 2,
"description": "Everything in the platform.",
"children": [
<span>&#123;</span>
"label": "Platform",
"children": [
<span>&#123;</span>
"label": "Runtime",
"href": "/runtime",
"description": "The browser half.",
"icon": "icon-[lucide--cpu]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Compiler",
"href": "/compiler",
"description": "WRN to JavaScript.",
"icon": "icon-[lucide--hammer]"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Tooling",
"children": [
<span>&#123;</span>
"label": "CLI",
"href": "/cli",
"description": "Scaffold and deploy."
<span>&#125;</span>,
<span>&#123;</span>
"label": "Editor",
"href": "/editor",
"description": "Language server."
<span>&#125;</span>
]
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Pricing",
"href": "/pricing",
"value": "pricing"
<span>&#125;</span>
]'
actions='[
<span>&#123;</span>
"label": "Book a demo",
"href": "/demo",
"variant": "primary"
<span>&#125;</span>
]'
active="overview"
mobileLabel="Compact example"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;</code></pre>
<pre><code>page NavbarExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Overview",
"href": "/",
"value": "overview"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Products",
"value": "products",
"columns": 2,
"description": "Everything in the platform.",
"children": [
<span>&#123;</span>
"label": "Platform",
"children": [
<span>&#123;</span>
"label": "Runtime",
"href": "/runtime",
"description": "The browser half.",
"icon": "icon-[lucide--cpu]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Compiler",
"href": "/compiler",
"description": "WRN to JavaScript.",
"icon": "icon-[lucide--hammer]"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Tooling",
"children": [
<span>&#123;</span>
"label": "CLI",
"href": "/cli",
"description": "Scaffold and deploy."
<span>&#125;</span>,
<span>&#123;</span>
"label": "Editor",
"href": "/editor",
"description": "Language server."
<span>&#125;</span>
]
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Pricing",
"href": "/pricing",
"value": "pricing"
<span>&#125;</span>
]
state actions = [
<span>&#123;</span>
"label": "Book a demo",
"href": "/demo",
"variant": "primary"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Navbar
size="sm"
label="Compact example"
topbarLabel="Compact example"
brand='<span>&#123;</span>
"label": "Northwind",
"icon": "icon-[lucide--box]",
"href": "/"
<span>&#125;</span>'
items="<span>&#123;</span>items<span>&#125;</span>"
actions="<span>&#123;</span>actions<span>&#125;</span>"
active="overview"
mobileLabel="Compact example"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -763,47 +808,59 @@ page NavbarDetail {
<div class="demo-workbench">
<div id="navbar-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"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" openOnHover="false" mobileLabel="Toggle navigation" class="showcase-instance showcase-instance--3" /></div>
<div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" floating="false" openOnHover="false" mobileLabel="Toggle navigation" flushMobile="false" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Sticky and compact usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Navbar
size="sm"
label="Advanced example"
topbarLabel="Advanced example"
brand='<span>&#123;</span>
"label": "Acme",
"href": "/"
<span>&#125;</span>'
items='[
<span>&#123;</span>
"label": "Docs",
"href": "/docs",
"value": "docs"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Support",
"href": "/support",
"value": "support"
<span>&#125;</span>
]'
actions='[
<span>&#123;</span>
"label": "Dashboard",
"href": "/app",
"variant": "primary"
<span>&#125;</span>
]'
active="docs"
sticky="true"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;</code></pre>
<pre><code>page NavbarExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Docs",
"href": "/docs",
"value": "docs"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Support",
"href": "/support",
"value": "support"
<span>&#125;</span>
]
state actions = [
<span>&#123;</span>
"label": "Dashboard",
"href": "/app",
"variant": "primary"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Navbar
size="sm"
label="Advanced example"
topbarLabel="Advanced example"
brand='<span>&#123;</span>
"label": "Acme",
"href": "/"
<span>&#125;</span>'
items="<span>&#123;</span>items<span>&#125;</span>"
actions="<span>&#123;</span>actions<span>&#125;</span>"
active="docs"
sticky="true"&gt;
&lt;div data-slot="topbar"&gt;
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article></div></section>
@@ -836,7 +893,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload)
<span>&#125;</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>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>Record&lt;string, unknown&gt;</td><td><code><span>&#123;</span><span>&#125;</span></code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</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>
<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>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>Record&lt;string, unknown&gt;</td><td><code><span>&#123;</span><span>&#125;</span></code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>floating</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>startFloating</code></td><td>string</td><td><code>"0px"</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</code></td><td>No</td></tr><tr><td><code>collapseAt</code></td><td>string</td><td><code>"900px"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"content"</code></td><td>No</td></tr><tr><td><code>mobileUtilitiesPosition</code></td><td>string</td><td><code>"header"</code></td><td>No</td></tr><tr><td><code>gutter</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>contentGutter</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>flushMobile</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>translationPrefix</code></td><td>string</td><td><code>""</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="#navbar-demo-1">Brand, links and actions</a><a href="#navbar-demo-2">Dropdown and mega panel</a><a href="#navbar-demo-3">Sticky and compact</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>