From 68c7b96a9f0e11f4183f68f8768a990091400d75 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Fri, 7 Aug 2026 23:12:37 +0530 Subject: [PATCH] fix(showcase): render object props, bridge the mega menu gap, make scrollspy testable Object props never worked in generated demos, and my two earlier attempts each traded one failure for another: - a bare {...} attribute is read by the compiler as an interpolation, so it parsed JSON as JavaScript and the page 500ed - parenthesising it compiled, but prop coercion runs JSON.parse on the raw attribute, so ({...}) threw and every demo rendered empty and silent - entity-escaping the braces did not help either: the compiler hands the attribute over without decoding, so JSON.parse still failed They are now hoisted into page state and bound, which is what the playground has always done. The state initialiser uses JSON.parse rather than an object literal because the parser reads a leading brace as the start of a block. Navbar gains a real profile: a brand, links, a two-column dropdown panel and calls to action, instead of the generic scaffold samples that made every demo look identical and showed no dropdown at all. MegaMenu closed while the pointer travelled to it. The panel sits below the trigger and that offset belongs to neither element, so crossing it fired mouseleave on the root. A descendant now covers the gap. Scrollspy could not be exercised at all: its links pointed at ids that did not exist on the page. The demo now ships real sections, in page flow because the runtime observes against the viewport. Co-Authored-By: Claude Opus 5 --- .claude/launch.json | 10 +- docs/ui-visual-contract-0.8.json | 2 +- .../app/pages/components/navbar.wrn | 873 ++---------------- .../app/pages/components/scrollspy.wrn | 24 +- .../app/pages/navigation.wrn | 2 +- .../component-showcase/app/styles/global.css | 35 + .../scripts/generate-showcase.mjs | 46 +- .../scripts/showcase-profiles.mjs | 104 ++- .../component-showcase/showcase-manifest.json | 815 +++------------- packages/ui/component-catalog.json | 4 +- packages/ui/component-reference.json | 813 +++------------- packages/ui/components/MegaMenu.wrn | 15 + packages/ui/test/ui.test.ts | 12 + 13 files changed, 603 insertions(+), 2152 deletions(-) diff --git a/.claude/launch.json b/.claude/launch.json index 6c3a360d..a8ae569d 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -4,8 +4,14 @@ { "name": "component-showcase", "runtimeExecutable": "bun", - "runtimeArgs": ["run", "--cwd", "examples/component-showcase", "dev"], - "port": 3000 + "runtimeArgs": [ + "run", + "packages/cli/src/index.ts", + "dev", + "examples/component-showcase", + "--port=3400" + ], + "port": 3400 } ] } diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index eb83c9d7..d151b50f 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -61,7 +61,7 @@ "packages/ui/components/Map.wrn": "7b8a0d5412a464fd7cab8977d816542c506d8c5dab8230a3c984c2caee407c91", "packages/ui/components/MarketingSectionHeader.wrn": "7d6ffcc01a9331474475ea57ca58598be757abd9428b66bdfaf6f3603c5b145b", "packages/ui/components/Marquee.wrn": "b2b35eedf3297ba12ab3776385a9f3eab001027648d87a2a1968f576eee6c025", - "packages/ui/components/MegaMenu.wrn": "48f4ced485df0e8de5217630c8bdcec0b2317bf04e6b279399f2c93d98d56995", + "packages/ui/components/MegaMenu.wrn": "8a9a9b348ca1c5e182914ff55d981a91f47a49c52ef5e5efd8e4cb6e56361a43", "packages/ui/components/MetricCard.wrn": "6451182739298691908f68258c0250cce2a78b0dc27c97115579ece30d7d9f92", "packages/ui/components/MetricGrid.wrn": "6018a98c10628ed240ed236ed916c0ff60994d192c3aadafd10bc876be0f9364", "packages/ui/components/Modal.wrn": "59d4ae9d6dd2700692d9edecfe53ee868e9f864363a4885961d1813cb2bee51f", diff --git a/examples/component-showcase/app/pages/components/navbar.wrn b/examples/component-showcase/app/pages/components/navbar.wrn index 85da9102..a77de5f3 100644 --- a/examples/component-showcase/app/pages/components/navbar.wrn +++ b/examples/component-showcase/app/pages/components/navbar.wrn @@ -14,6 +14,9 @@ page NavbarDetail { state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full" state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar" 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\":\"/\"}") + state demo_obj_2 = JSON.parse("{\"label\":\"Acme\",\"href\":\"/\"}") seo { title = "Navbar" description = "Theme-aware, responsive navbar component." @@ -600,289 +603,54 @@ page NavbarDetail {
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

-
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+
Recommended

Brand, links and actions

The everyday shape: a brand, a row of links with the current page marked, and calls to action on the right. Arrow keys move along the menu bar.

01
Live preview
-
+
-
+
Component usage.wrn
<Navbar
-  label="Navbar"
   topbarLabel="Navbar"
   brand='{
-    "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"
-    ]
+    "label": "Northwind",
+    "description": "Console",
+    "href": "/"
   }'
   items='[
     {
-      "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"
-      ]
+      "label": "Overview",
+      "href": "/",
+      "value": "overview"
     },
     {
-      "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"
-      ]
+      "label": "Projects",
+      "href": "/projects",
+      "value": "projects"
+    },
+    {
+      "label": "Reports",
+      "href": "/reports",
+      "value": "reports"
     }
   ]'
   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"
-      ]
+      "label": "Sign in",
+      "href": "/login",
+      "variant": "link"
     },
     {
-      "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"
-      ]
+      "label": "Start free",
+      "href": "/signup",
+      "variant": "primary"
     }
   ]'
+  active="projects"
   mobileLabel="Navbar">
   <div data-slot="topbar">
     <div class="showcase-slot">topbar slot</div>
@@ -896,290 +664,86 @@ page NavbarDetail {
-
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+
Advanced

Dropdown and mega panel

An item carrying children opens a panel built from native details and summary, so it is keyboard operable without any extra script. Give a child its own children to get a titled column inside the panel.

02
Live preview
-
+
-
+
Component usage.wrn
<Navbar
   size="sm"
   label="Compact example"
   topbarLabel="Compact example"
   brand='{
-    "id": "navbar-1-1",
-    "key": "navbar-1-1",
-    "value": "primary",
-    "label": "Secondary workflow",
-    "title": "Secondary workflow",
-    "description": "A compact configuration designed for dense application layouts.",
-    "text": "A configurable sample message.",
-    "href": "#navbar-demo",
-    "actionHref": "#navbar-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--zap]",
-    "iconClass": "icon-[lucide--zap]",
-    "variant": "secondary",
-    "status": "Active",
-    "time": "10:15",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 24,
-    "percentage": 48,
-    "color": "#0284c7",
-    "target": "_self",
-    "ariaLabel": "Open secondary 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"
-    ]
+    "label": "Northwind",
+    "icon": "icon-[lucide--box]",
+    "href": "/"
   }'
   items='[
     {
-      "id": "navbar-1-1",
-      "key": "navbar-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
+      "label": "Overview",
+      "href": "/",
+      "value": "overview"
+    },
+    {
+      "label": "Products",
+      "value": "products",
+      "columns": 2,
+      "description": "Everything in the platform.",
+      "children": [
         {
-          "label": "Nested option A",
-          "value": "nested-a"
+          "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": "Nested option B",
-          "value": "nested-b"
+          "label": "Tooling",
+          "children": [
+            {
+              "label": "CLI",
+              "href": "/cli",
+              "description": "Scaffold and deploy."
+            },
+            {
+              "label": "Editor",
+              "href": "/editor",
+              "description": "Language server."
+            }
+          ]
         }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     },
     {
-      "id": "navbar-1-2",
-      "key": "navbar-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary 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"
-      ]
+      "label": "Pricing",
+      "href": "/pricing",
+      "value": "pricing"
     }
   ]'
   actions='[
     {
-      "id": "navbar-1-1",
-      "key": "navbar-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary 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-1-2",
-      "key": "navbar-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary 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"
-      ]
+      "label": "Book a demo",
+      "href": "/demo",
+      "variant": "primary"
     }
   ]'
+  active="overview"
   mobileLabel="Compact example">
   <div data-slot="topbar">
     <div class="showcase-slot">topbar slot</div>
@@ -1193,291 +757,46 @@ page NavbarDetail {
-
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+
Compact

Sticky and compact

Sticky keeps the bar pinned while the page scrolls. The toggle appears below the tablet breakpoint and the links collapse behind it.

03
Live preview
-
+
-
+
Component usage.wrn
<Navbar
-  size="lg"
+  size="sm"
   label="Advanced example"
   topbarLabel="Advanced example"
   brand='{
-    "id": "navbar-2-1",
-    "key": "navbar-2-1",
-    "value": "primary",
-    "label": "Advanced workflow",
-    "title": "Advanced workflow",
-    "description": "A richer configuration with more supporting information and actions.",
-    "text": "A configurable sample message.",
-    "href": "#navbar-demo",
-    "actionHref": "#navbar-demo",
-    "actionLabel": "Explore workflow",
-    "icon": "icon-[lucide--circle-check]",
-    "iconClass": "icon-[lucide--circle-check]",
-    "variant": "success",
-    "status": "Complete",
-    "time": "11:45",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 32,
-    "percentage": 91,
-    "color": "#059669",
-    "target": "_self",
-    "ariaLabel": "Open advanced 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",
-      "Unlimited"
-    ]
+    "label": "Acme",
+    "href": "/"
   }'
   items='[
     {
-      "id": "navbar-2-1",
-      "key": "navbar-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced 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",
-        "Unlimited"
-      ]
+      "label": "Docs",
+      "href": "/docs",
+      "value": "docs"
     },
     {
-      "id": "navbar-2-2",
-      "key": "navbar-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced 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",
-        "Unlimited"
-      ]
+      "label": "Support",
+      "href": "/support",
+      "value": "support"
     }
   ]'
   actions='[
     {
-      "id": "navbar-2-1",
-      "key": "navbar-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced 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",
-        "Unlimited"
-      ]
-    },
-    {
-      "id": "navbar-2-2",
-      "key": "navbar-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#navbar-demo",
-      "actionHref": "#navbar-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced 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",
-        "Unlimited"
-      ]
+      "label": "Dashboard",
+      "href": "/app",
+      "variant": "primary"
     }
   ]'
-  mobileLabel="Advanced example">
+  active="docs"
+  sticky="true">
   <div data-slot="topbar">
     <div class="showcase-slot">topbar slot</div>
   </div>
@@ -1520,7 +839,7 @@ if (component) registerOutputHandler(component, "action", (payload) => 
         
Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Primary navigation"No
topbarLabelstring"Utility navigation"No
brandRecord<string, unknown>{}No
itemsunknown[][]No
actionsunknown[][]No
activestring""No
stickybooleanfalseNo
openOnHoverbooleanfalseNo
maxWidthstring"full"No
mobileLabelstring"Toggle navigation"No
classstring""No