Refresh UI components and showcase; release updated framework packages

examples/component-showcase/app/pages/components/nav.wrn

@@ -35,118 +35,123 @@ page NavDetail {
           <div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' 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;Nav
-  items='[
-    <span>&#123;</span>
-      "id": "nav-0-1",
-      "key": "nav-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": "#nav-demo",
-      "actionHref": "#nav-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": "nav-0-2",
-      "key": "nav-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#nav-demo",
-      "actionHref": "#nav-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>
-  ]'
-  label="Nav"
-  toggleLabel="Nav"
-/&gt;</code></pre>
+            <pre><code data-playground-code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "id": "nav-0-1",
+    "key": "nav-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": "#nav-demo",
+    "actionHref": "#nav-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": "nav-0-2",
+    "key": "nav-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#nav-demo",
+    "actionHref": "#nav-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;Nav
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      label="Nav"
+      toggleLabel="Nav"
+    /&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>
@@ -280,36 +285,41 @@ page NavDetail {
           </div>
           <section class="demo-code" aria-label="Horizontal links 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;Nav
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "value": "home",
-      "icon": "icon-[lucide--house]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Inbox",
-      "href": "/inbox",
-      "value": "inbox",
-      "badge": "9"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Reports",
-      "href": "/reports",
-      "value": "reports"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Archive",
-      "href": "/archive",
-      "value": "archive",
-      "disabled": true
-    <span>&#125;</span>
-  ]'
-  active="inbox"
-  label="Nav"
-  toggleLabel="Nav"
-/&gt;</code></pre>
+            <pre><code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "value": "home",
+    "icon": "icon-[lucide--house]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Inbox",
+    "href": "/inbox",
+    "value": "inbox",
+    "badge": "9"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Reports",
+    "href": "/reports",
+    "value": "reports"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Archive",
+    "href": "/archive",
+    "value": "archive",
+    "disabled": true
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="inbox"
+      label="Nav"
+      toggleLabel="Nav"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -326,46 +336,51 @@ page NavDetail {
           </div>
           <section class="demo-code" aria-label="Nested submenus 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;Nav
-  size="sm"
-  items='[
-    <span>&#123;</span>
-      "label": "Home",
-      "href": "/",
-      "value": "home"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Products",
-      "value": "products",
-      "items": [
-        <span>&#123;</span>
-          "label": "Overview",
-          "href": "/p",
-          "value": "p-overview"
-        <span>&#125;</span>,
-        <span>&#123;</span>
-          "label": "Platform",
-          "value": "p-platform",
-          "items": [
-            <span>&#123;</span>
-              "label": "Runtime",
-              "href": "/p/runtime",
-              "value": "runtime"
-            <span>&#125;</span>,
-            <span>&#123;</span>
-              "label": "Compiler",
-              "href": "/p/compiler",
-              "value": "compiler"
-            <span>&#125;</span>
-          ]
-        <span>&#125;</span>
-      ]
-    <span>&#125;</span>
-  ]'
-  active="p-overview"
-  label="Compact example"
-  toggleLabel="Compact example"
-/&gt;</code></pre>
+            <pre><code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Home",
+    "href": "/",
+    "value": "home"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Products",
+    "value": "products",
+    "items": [
+      <span>&#123;</span>
+        "label": "Overview",
+        "href": "/p",
+        "value": "p-overview"
+      <span>&#125;</span>,
+      <span>&#123;</span>
+        "label": "Platform",
+        "value": "p-platform",
+        "items": [
+          <span>&#123;</span>
+            "label": "Runtime",
+            "href": "/p/runtime",
+            "value": "runtime"
+          <span>&#125;</span>,
+          <span>&#123;</span>
+            "label": "Compiler",
+            "href": "/p/compiler",
+            "value": "compiler"
+          <span>&#125;</span>
+        ]
+      <span>&#125;</span>
+    ]
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      size="sm"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="p-overview"
+      label="Compact example"
+      toggleLabel="Compact example"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article>
@@ -382,34 +397,39 @@ page NavDetail {
           </div>
           <section class="demo-code" aria-label="Vertical rail 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;Nav
-  size="lg"
-  items='[
-    <span>&#123;</span>
-      "label": "Dashboard",
-      "href": "/",
-      "value": "dash",
-      "icon": "icon-[lucide--gauge]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Team",
-      "href": "/team",
-      "value": "team",
-      "icon": "icon-[lucide--users]"
-    <span>&#125;</span>,
-    <span>&#123;</span>
-      "label": "Settings",
-      "href": "/settings",
-      "value": "settings",
-      "icon": "icon-[lucide--settings]"
-    <span>&#125;</span>
-  ]'
-  active="team"
-  orientation="vertical"
-  label="Advanced example"
-  collapsible="false"
-  toggleLabel="Advanced example"
-/&gt;</code></pre>
+            <pre><code>page NavExample <span>&#123;</span>
+  state items = [
+  <span>&#123;</span>
+    "label": "Dashboard",
+    "href": "/",
+    "value": "dash",
+    "icon": "icon-[lucide--gauge]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Team",
+    "href": "/team",
+    "value": "team",
+    "icon": "icon-[lucide--users]"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "label": "Settings",
+    "href": "/settings",
+    "value": "settings",
+    "icon": "icon-[lucide--settings]"
+  <span>&#125;</span>
+]
+  view <span>&#123;</span>
+    &lt;Nav
+      size="lg"
+      items="<span>&#123;</span>items<span>&#125;</span>"
+      active="team"
+      orientation="vertical"
+      label="Advanced example"
+      collapsible="false"
+      toggleLabel="Advanced example"
+    /&gt;
+  <span>&#125;</span>
+<span>&#125;</span></code></pre>
           </section>
         </div>
       </article></div></section>