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