From 8069541cd985cb5876417df6020bc4b7d0988a01 Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Fri, 7 Aug 2026 19:26:57 +0530
Subject: [PATCH 1/2] refactor(csr): one document observer with subscribers

Overlay clamping, dialog focus, roving focus and scrollspy each ran their own
MutationObserver over the same stream of records. They now share one, with the
per-feature work registered as subscribers. Every subscriber already defers,
so the extra callbacks are cheap and the bookkeeping is paid for once.

The attribute filter stays explicit rather than observing everything: an
unfiltered observer would see the tabindex the roving code writes and loop on
its own output.

This is better structured but it is not a fix for the size budget -- it buys
82 bytes of headroom, not room to grow. Splitting the runtime so a page pays
only for the behaviour it uses is still the outstanding decision.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/csr/src/reactive-runtime.ts | 75 +++++++++++++++-------------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/packages/csr/src/reactive-runtime.ts b/packages/csr/src/reactive-runtime.ts
index 0dcdd0e6..ebb99d25 100644
--- a/packages/csr/src/reactive-runtime.ts
+++ b/packages/csr/src/reactive-runtime.ts
@@ -2886,6 +2886,32 @@ export const REACTIVE_RUNTIME = String.raw`
     });
   }
 
+  /*
+   * One document observer, several subscribers. The filter stays explicit:
+   * observing every attribute would see the tabindex the roving code writes
+   * and loop on its own output.
+   */
+  var documentWatchers = [];
+
+  function watchDocument(handler) {
+    documentWatchers.push(handler);
+  }
+
+  function startDocumentWatch() {
+    if (window.__wrnexusDocWatchBound || typeof MutationObserver !== "function") return;
+    window.__wrnexusDocWatchBound = true;
+    new MutationObserver(function () {
+      for (var index = 0; index < documentWatchers.length; index += 1) documentWatchers[index]();
+    }).observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      // prettier-ignore
+      attributeFilter: ["data-open","data-show","class","style","hidden",
+        "data-placement","aria-selected","aria-current","disabled","aria-disabled"],
+    });
+  }
+
   function setupAnchoredOverlays() {
     if (window.__wrnexusAnchoredBound) return;
     window.__wrnexusAnchoredBound = true;
@@ -2894,14 +2920,7 @@ export const REACTIVE_RUNTIME = String.raw`
     // root, data-show on the panel, a class), so watch for any attribute or
     // structural change and re-measure on the next frame instead of trying to
     // enumerate every signal.
-    if (typeof MutationObserver === "function") {
-      new MutationObserver(scheduleAnchoredReposition).observe(document.documentElement, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ["data-open", "data-show", "class", "data-placement"],
-      });
-    }
+    watchDocument(scheduleAnchoredReposition);
 
     window.addEventListener("resize", scheduleAnchoredReposition);
     window.addEventListener("scroll", scheduleAnchoredReposition, true);
@@ -3027,19 +3046,11 @@ export const REACTIVE_RUNTIME = String.raw`
     if (window.__wrnexusDialogsBound) return;
     window.__wrnexusDialogsBound = true;
 
-    if (typeof MutationObserver === "function") {
-      new MutationObserver(function () {
-        // Same deferral as the anchored clamp: the mutation that opens a
-        // dialog is the one that makes it visible, so it still measures as
-        // hidden until the panel has been laid out.
-        window.setTimeout(syncDialogs, 0);
-      }).observe(document.documentElement, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ["data-open", "data-show", "class", "style", "hidden"],
-      });
-    }
+    // Deferred: the mutation that opens a dialog is the one that makes it
+    // visible, so it is not laid out yet when the record arrives.
+    watchDocument(function () {
+      window.setTimeout(syncDialogs, 0);
+    });
 
     document.addEventListener("keydown", trapDialogTab, true);
     syncDialogs();
@@ -3157,16 +3168,9 @@ export const REACTIVE_RUNTIME = String.raw`
 
     document.addEventListener("keydown", handleRovingKeydown, true);
 
-    if (typeof MutationObserver === "function") {
-      new MutationObserver(function () {
-        window.setTimeout(syncRovingGroups, 0);
-      }).observe(document.documentElement, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ["aria-selected", "aria-current", "disabled", "aria-disabled", "hidden"],
-      });
-    }
+    watchDocument(function () {
+      window.setTimeout(syncRovingGroups, 0);
+    });
 
     syncRovingGroups();
   }
@@ -3240,11 +3244,9 @@ export const REACTIVE_RUNTIME = String.raw`
       for (var index = 0; index < navs.length; index += 1) wireScrollspy(navs[index]);
     };
     wireAll();
-    if (typeof MutationObserver === "function") {
-      new MutationObserver(function () {
-        window.setTimeout(wireAll, 0);
-      }).observe(document.documentElement, { subtree: true, childList: true });
-    }
+    watchDocument(function () {
+      window.setTimeout(wireAll, 0);
+    });
   }
 
   function hydrateScopes(root) {
@@ -5466,6 +5468,7 @@ export const REACTIVE_RUNTIME = String.raw`
   setupModalDialogs();
   setupRovingFocus();
   setupScrollspy();
+  startDocumentWatch();
   window.__wrnexusRepositionAnchored = repositionAnchored;
   window.__wrnexusHydrateScopes = hydrateScopes;
   window.__wrnexusInvalidateClientModule = function (url) { clientModuleCache.delete(url); };

From 361129b6ac49c7275304fd8deba80cee98e8d299 Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Fri, 7 Aug 2026 21:20:19 +0530
Subject: [PATCH 2/2] perf(build): budget the runtime on what ships, not on
 source bytes

The runtime budgets measured raw source, which counts comments -- and the
production build minifies, so comments cost a visitor nothing. The metric
therefore rewarded deleting explanatory comments over writing smaller code,
and could not tell a real feature from a wall of prose.

They now measure the minified output, which is what is actually served:
/__wrnexus/reactive.js is its own file, minified, with an immutable year-long
cache. The reactive runtime is 69684 minified against a 80000 budget, from
175246 raw -- roughly 21kB gzipped, fetched once.

Also fixes two real bugs found while testing the showcase:

  - object-valued props were serialised as a bare {...} attribute, which the
    compiler read as interpolation and tried to parse as JavaScript. That
    returned 500 for /components/navbar. Arrays start with [ and were never
    affected, which is why only object props broke. All 108 pages now render.

  - the runtime walked text nodes inside textarea, script and style, so a
    JSON sample in a textarea was evaluated away.

Navbar styles move out of ui.css into the component, matching the rest of the
navigation group. No declarations changed: 4519 before and after.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/ui-visual-contract-0.8.json              |    4 +-
 .../app/pages/components/accordion.wrn        |   80 +-
 .../pages/components/advanced-date-picker.wrn |   40 +-
 .../components/advanced-range-slider.wrn      |   40 +-
 .../app/pages/components/advanced-select.wrn  |   16 +-
 .../app/pages/components/alert.wrn            |   80 +-
 .../pages/components/auth-split-layout.wrn    |   12 +-
 .../app/pages/components/avatar-group.wrn     |   40 +-
 .../app/pages/components/breadcrumb.wrn       |   40 +-
 .../app/pages/components/button-group.wrn     |   40 +-
 .../app/pages/components/card.wrn             |  120 +-
 .../app/pages/components/carousel.wrn         |   40 +-
 .../app/pages/components/chart.wrn            |   40 +-
 .../app/pages/components/chat-bubble.wrn      |   40 +-
 .../app/pages/components/checkbox.wrn         |   80 +-
 .../app/pages/components/clipboard.wrn        |   40 +-
 .../app/pages/components/collapse.wrn         |   80 +-
 .../app/pages/components/combo-box.wrn        |   16 +-
 .../app/pages/components/confetti.wrn         |   40 +-
 .../app/pages/components/context-menu.wrn     |   16 +-
 .../app/pages/components/ctasection.wrn       |   40 +-
 .../app/pages/components/data-map.wrn         |   40 +-
 .../app/pages/components/data-table.wrn       |    4 +-
 .../app/pages/components/device-frame.wrn     |   40 +-
 .../app/pages/components/drag-and-drop.wrn    |   40 +-
 .../app/pages/components/dropdown.wrn         |   16 +-
 .../app/pages/components/feature-grid.wrn     |   12 +-
 .../app/pages/components/file-upload.wrn      |   40 +-
 .../app/pages/components/footer.wrn           |   60 +-
 .../app/pages/components/hero-actions.wrn     |    8 +-
 .../app/pages/components/hero.wrn             |  120 +-
 .../app/pages/components/legend-indicator.wrn |   40 +-
 .../app/pages/components/list-group.wrn       |   40 +-
 .../app/pages/components/list.wrn             |   40 +-
 .../app/pages/components/map.wrn              |   40 +-
 .../app/pages/components/marquee.wrn          |   40 +-
 .../app/pages/components/mega-menu.wrn        |   40 +-
 .../app/pages/components/metric-grid.wrn      |   12 +-
 .../app/pages/components/nav.wrn              |   40 +-
 .../app/pages/components/navbar.wrn           |  106 +-
 .../app/pages/components/page-header.wrn      |   12 +-
 .../app/pages/components/portal-dashboard.wrn |  160 +--
 .../app/pages/components/radio.wrn            |   40 +-
 .../app/pages/components/range-slider.wrn     |   40 +-
 .../app/pages/components/rating.wrn           |   40 +-
 .../app/pages/components/scrollspy.wrn        |   40 +-
 .../app/pages/components/select.wrn           |   80 +-
 .../app/pages/components/sidebar.wrn          |   40 +-
 .../app/pages/components/split-hero.wrn       |   80 +-
 .../app/pages/components/stats-bar.wrn        |   16 +-
 .../app/pages/components/stepper.wrn          |   40 +-
 .../app/pages/components/styled-icon.wrn      |   40 +-
 .../app/pages/components/tabs.wrn             |   40 +-
 .../app/pages/components/timeline.wrn         |   40 +-
 .../pages/components/toast-notifications.wrn  |   40 +-
 .../app/pages/components/toast.wrn            |   40 +-
 .../app/pages/components/toggle-count.wrn     |   40 +-
 .../app/pages/components/tree-view.wrn        |   40 +-
 .../app/pages/components/wysiwyg-editor.wrn   |   40 +-
 .../app/pages/navigation.wrn                  |    2 +-
 .../scripts/generate-showcase.mjs             |   19 +-
 packages/csr/src/reactive-runtime.ts          |    5 +
 packages/csr/test/reactive.test.ts            |   15 +
 packages/ui/components/Navbar.wrn             |  436 +++++++
 packages/ui/test/ui.test.ts                   |   11 +-
 packages/ui/ui.css                            | 1092 -----------------
 scripts/lib/measure-runtime-size.ts           |   57 +
 scripts/security-performance-audit.mjs        |   37 +-
 68 files changed, 1882 insertions(+), 2422 deletions(-)
 create mode 100644 scripts/lib/measure-runtime-size.ts

diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json
index 7fdf5602..07838c66 100644
--- a/docs/ui-visual-contract-0.8.json
+++ b/docs/ui-visual-contract-0.8.json
@@ -66,7 +66,7 @@
     "packages/ui/components/MetricGrid.wrn": "6018a98c10628ed240ed236ed916c0ff60994d192c3aadafd10bc876be0f9364",
     "packages/ui/components/Modal.wrn": "59d4ae9d6dd2700692d9edecfe53ee868e9f864363a4885961d1813cb2bee51f",
     "packages/ui/components/Nav.wrn": "7dc456b879e9248bde267b986cdcb138b8f3127d98b51e27bc9708129953f5e2",
-    "packages/ui/components/Navbar.wrn": "cf28cf4cdd23c85821d3302e6881115c2c14977e7cb7142d306cf559fea2a518",
+    "packages/ui/components/Navbar.wrn": "7989d25819312014c0a0855370b80b925d53ff735d682fdb61e9677a9dacb7f3",
     "packages/ui/components/PageHeader.wrn": "0761235a4924eec09877be40b292d27b70db22d210be7d8e989493165c20df86",
     "packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983",
     "packages/ui/components/PinInput.wrn": "5196f584de8d548a5dfa03688c3c95da3c948cead2662b05e927386ccea74299",
@@ -110,6 +110,6 @@
     "packages/ui/components/progress.wrn": "ba6f4dfcc00f04f34e9533be675bb4a6200c3cdcd7d03fc597377e48520fdec7",
     "packages/ui/components/skeleton.wrn": "ceec8af147b8be08155500e378393ac7c72d819da61b62191c076c80e943d5a9",
     "packages/ui/components/spinner.wrn": "abc4ee3ede2e019289257e9009eee012c880a85839cc220fac6dbe1b780caf52",
-    "packages/ui/ui.css": "eee7da4d1088703a61db8e78c43eb6ff7f1b6a02fd8082d8d722beb65bf78382"
+    "packages/ui/ui.css": "f71641efb0c98b673af70c10dbcea8e693de258ce8620b4f84c64553ea70204e"
   }
 }
diff --git a/examples/component-showcase/app/pages/components/accordion.wrn b/examples/component-showcase/app/pages/components/accordion.wrn
index d62c39eb..a754d286 100644
--- a/examples/component-showcase/app/pages/components/accordion.wrn
+++ b/examples/component-showcase/app/pages/components/accordion.wrn
@@ -268,7 +268,7 @@ page AccordionDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>17 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-accordion-size"><span><strong>size</strong><small>string</small></span><select id="playground-accordion-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-accordion-color"><span><strong>color</strong><small>string</small></span><select id="playground-accordion-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-accordion-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-accordion-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-accordion-class"><span><strong>class</strong><small>string</small></span><input id="playground-accordion-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-accordion-id"><span><strong>id</strong><small>string</small></span><input id="playground-accordion-id" name="pg_id" type="text" value="accordion" /></label><label class="playground-field" for="playground-accordion-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-accordion-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "accordion-0-1",
     "key": "accordion-0-1",
     "value": "primary",
@@ -297,31 +297,31 @@ page AccordionDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "accordion-0-2",
     "key": "accordion-0-2",
     "value": "secondary",
@@ -350,32 +350,32 @@ page AccordionDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-accordion-defaultOpen"><span><strong>default Open</strong><small>unknown[]</small></span><textarea id="playground-accordion-defaultOpen" name="pg_defaultOpen" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "accordion-0-1",
     "key": "accordion-0-1",
     "value": "primary",
@@ -404,31 +404,31 @@ page AccordionDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "accordion-0-2",
     "key": "accordion-0-2",
     "value": "secondary",
@@ -457,30 +457,30 @@ page AccordionDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-accordion-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-accordion-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-alwaysOpen"><span><strong>always Open</strong><small>boolean</small></span><input id="playground-accordion-alwaysOpen" name="pg_alwaysOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-accordion-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-accordion-indicator"><span><strong>indicator</strong><small>string</small></span><input id="playground-accordion-indicator" name="pg_indicator" type="text" value="plus" /></label><label class="playground-field" for="playground-accordion-indicatorPosition"><span><strong>indicator Position</strong><small>string</small></span><input id="playground-accordion-indicatorPosition" name="pg_indicatorPosition" type="text" value="start" /></label><label class="playground-toggle" for="playground-accordion-showIndicator"><span><strong>show Indicator</strong><small>boolean</small></span><input id="playground-accordion-showIndicator" name="pg_showIndicator" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-accordion-bordered" name="pg_bordered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-separated"><span><strong>separated</strong><small>boolean</small></span><input id="playground-accordion-separated" name="pg_separated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-flush"><span><strong>flush</strong><small>boolean</small></span><input id="playground-accordion-flush" name="pg_flush" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-contentItalic"><span><strong>content Italic</strong><small>boolean</small></span><input id="playground-accordion-contentItalic" name="pg_contentItalic" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn
index 9c1063d7..b5a40355 100644
--- a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn
+++ b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn
@@ -152,7 +152,7 @@ page AdvancedDatePickerDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-advanced-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-date-picker-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-advanced-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-date-picker-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-advanced-date-picker-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-date-picker-title" name="pg_title" type="text" value="Advanced Date Picker example" /></label><label class="playground-field" for="playground-advanced-date-picker-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-date-picker-description" name="pg_description" type="text" value="A polished default advanced date picker for a modern application." /></label><label class="playground-field" for="playground-advanced-date-picker-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-advanced-date-picker-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "advanced-date-picker-0-1",
     "key": "advanced-date-picker-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page AdvancedDatePickerDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "advanced-date-picker-0-2",
     "key": "advanced-date-picker-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page AdvancedDatePickerDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-date-picker-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn
index 3f46bbf9..39b0b2b8 100644
--- a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn
+++ b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn
@@ -152,7 +152,7 @@ page AdvancedRangeSliderDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-advanced-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-range-slider-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-advanced-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-range-slider-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-advanced-range-slider-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-range-slider-title" name="pg_title" type="text" value="Advanced Range Slider example" /></label><label class="playground-field" for="playground-advanced-range-slider-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-range-slider-description" name="pg_description" type="text" value="A polished default advanced range slider for a modern application." /></label><label class="playground-field" for="playground-advanced-range-slider-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-advanced-range-slider-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "advanced-range-slider-0-1",
     "key": "advanced-range-slider-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page AdvancedRangeSliderDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "advanced-range-slider-0-2",
     "key": "advanced-range-slider-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page AdvancedRangeSliderDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-range-slider-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/advanced-select.wrn b/examples/component-showcase/app/pages/components/advanced-select.wrn
index 557f4e64..2142adbd 100644
--- a/examples/component-showcase/app/pages/components/advanced-select.wrn
+++ b/examples/component-showcase/app/pages/components/advanced-select.wrn
@@ -125,36 +125,36 @@ page AdvancedSelectDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>51 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-advanced-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-advanced-select-label" name="pg_label" type="text" value="Default advanced select" /></label><label class="playground-field" for="playground-advanced-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-advanced-select-name" name="pg_name" type="text" value="advanced-select-1" /></label><label class="playground-field" for="playground-advanced-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-advanced-select-value" name="pg_value" type="text" value="design" /></label><label class="playground-field" for="playground-advanced-select-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "value": "design",
     "label": "Design",
     "description": "Product and visual design",
     "icon": "icon-[lucide--palette]",
     "color": "#8b5cf6",
     "avatar": "/showcase-images/avatar-design.svg"
-  },
-  {
+  &#125;,
+  &#123;
     "value": "engineering",
     "label": "Engineering",
     "description": "Platform and application engineering",
     "icon": "icon-[lucide--code-2]",
     "color": "#0ea5e9",
     "avatar": "/showcase-images/avatar-engineering.svg"
-  },
-  {
+  &#125;,
+  &#123;
     "value": "growth",
     "label": "Growth",
     "description": "Marketing and customer growth",
     "icon": "icon-[lucide--trending-up]",
     "color": "#10b981",
     "avatar": "/showcase-images/avatar-growth.svg"
-  },
-  {
+  &#125;,
+  &#123;
     "value": "support",
     "label": "Support",
     "description": "Customer operations",
     "disabled": false
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-groups"><span><strong>groups</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-advanced-select-placeholder" name="pg_placeholder" type="text" value="Choose a team" /></label><label class="playground-field" for="playground-advanced-select-placeholderIcon"><span><strong>placeholder Icon</strong><small>string</small></span><input id="playground-advanced-select-placeholderIcon" name="pg_placeholderIcon" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-advanced-select-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Search options…" /></label><label class="playground-toggle" for="playground-advanced-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-advanced-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-advanced-select-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-advanced-select-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-advanced-select-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-allowEmpty"><span><strong>allow Empty</strong><small>boolean</small></span><input id="playground-advanced-select-allowEmpty" name="pg_allowEmpty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-tags"><span><strong>tags</strong><small>boolean</small></span><input id="playground-advanced-select-tags" name="pg_tags" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-advanced-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-advanced-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-advanced-select-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-advanced-select-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-advanced-select-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-advanced-select-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-advanced-select-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-advanced-select-loadingLabel" name="pg_loadingLabel" type="text" value="Loading options…" /></label><label class="playground-field" for="playground-advanced-select-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-advanced-select-emptyLabel" name="pg_emptyLabel" type="text" value="No options found" /></label><label class="playground-field" for="playground-advanced-select-selectedOptionsLabel"><span><strong>selected Options Label</strong><small>string</small></span><input id="playground-advanced-select-selectedOptionsLabel" name="pg_selectedOptionsLabel" type="text" value="Selected options" /></label><label class="playground-field" for="playground-advanced-select-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-advanced-select-clearLabel" name="pg_clearLabel" type="text" value="Clear selection" /></label><label class="playground-field" for="playground-advanced-select-createLabel"><span><strong>create Label</strong><small>string</small></span><input id="playground-advanced-select-createLabel" name="pg_createLabel" type="text" value="Create" /></label><label class="playground-field" for="playground-advanced-select-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-advanced-select-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-advanced-select-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-advanced-select-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-advanced-select-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-advanced-select-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-advanced-select-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-advanced-select-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-advanced-select-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-maxSelections"><span><strong>max Selections</strong><small>number</small></span><input id="playground-advanced-select-maxSelections" name="pg_maxSelections" type="number" value="0" /></label><label class="playground-toggle" for="playground-advanced-select-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-advanced-select-showCounter" name="pg_showCounter" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-counterTemplate"><span><strong>counter Template</strong><small>string</small></span><input id="playground-advanced-select-counterTemplate" name="pg_counterTemplate" type="text" value="{selected} selected" /></label><label class="playground-field" for="playground-advanced-select-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-advanced-select-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-select-selectedTemplate"><span><strong>selected Template</strong><small>string</small></span><input id="playground-advanced-select-selectedTemplate" name="pg_selectedTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-advanced-select-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-advanced-select-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-scrollToSelected"><span><strong>scroll To Selected</strong><small>boolean</small></span><input id="playground-advanced-select-scrollToSelected" name="pg_scrollToSelected" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-advanced-select-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-advanced-select-placement" name="pg_placement"><option value="bottom" selected>bottom</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-toggle" for="playground-advanced-select-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-advanced-select-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-advanced-select-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-advanced-select-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-advanced-select-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-advanced-select-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-advanced-select-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-advanced-select-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-advanced-select-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-advanced-select-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-page"><span><strong>page</strong><small>number</small></span><input id="playground-advanced-select-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-advanced-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-select-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/alert.wrn b/examples/component-showcase/app/pages/components/alert.wrn
index 50b4f9e6..fd2e7193 100644
--- a/examples/component-showcase/app/pages/components/alert.wrn
+++ b/examples/component-showcase/app/pages/components/alert.wrn
@@ -281,7 +281,7 @@ page AlertDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>21 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-alert-size"><span><strong>size</strong><small>string</small></span><select id="playground-alert-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-alert-color"><span><strong>color</strong><small>string</small></span><select id="playground-alert-color" name="pg_color"><option value="info" selected>info</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-alert-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-alert-variant" name="pg_variant" type="text" value="soft" /></label><label class="playground-field" for="playground-alert-class"><span><strong>class</strong><small>string</small></span><input id="playground-alert-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-alert-radius"><span><strong>radius</strong><small>string</small></span><input id="playground-alert-radius" name="pg_radius" type="text" value="md" /></label><label class="playground-field" for="playground-alert-shadow"><span><strong>shadow</strong><small>string</small></span><input id="playground-alert-shadow" name="pg_shadow" type="text" value="sm" /></label><label class="playground-field" for="playground-alert-title"><span><strong>title</strong><small>string</small></span><input id="playground-alert-title" name="pg_title" type="text" value="Alert example" /></label><label class="playground-field" for="playground-alert-description"><span><strong>description</strong><small>string</small></span><input id="playground-alert-description" name="pg_description" type="text" value="A polished default alert for a modern application." /></label><label class="playground-field" for="playground-alert-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-alert-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "alert-0-1",
     "key": "alert-0-1",
     "value": "primary",
@@ -310,31 +310,31 @@ page AlertDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "alert-0-2",
     "key": "alert-0-2",
     "value": "secondary",
@@ -363,32 +363,32 @@ page AlertDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-alert-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-alert-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "alert-0-1",
     "key": "alert-0-1",
     "value": "primary",
@@ -417,31 +417,31 @@ page AlertDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "alert-0-2",
     "key": "alert-0-2",
     "value": "secondary",
@@ -470,30 +470,30 @@ page AlertDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-alert-showIcon"><span><strong>show Icon</strong><small>boolean</small></span><input id="playground-alert-showIcon" name="pg_showIcon" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-alert-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-alert-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-alert-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-alert-dismissLabel" name="pg_dismissLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-role"><span><strong>role</strong><small>string</small></span><input id="playground-alert-role" name="pg_role" type="text" value="alert" /></label><label class="playground-field" for="playground-alert-live"><span><strong>live</strong><small>string</small></span><input id="playground-alert-live" name="pg_live" type="text" value="polite" /></label><label class="playground-field" for="playground-alert-linkLabel"><span><strong>link Label</strong><small>string</small></span><input id="playground-alert-linkLabel" name="pg_linkLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-linkHref"><span><strong>link Href</strong><small>string</small></span><input id="playground-alert-linkHref" name="pg_linkHref" type="text" value="#alert-demo" /></label><label class="playground-field" for="playground-alert-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-alert-actionLabel" name="pg_actionLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-alert-actionHref" name="pg_actionHref" type="text" value="#alert-demo" /></label><label class="playground-toggle" for="playground-alert-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-alert-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/auth-split-layout.wrn b/examples/component-showcase/app/pages/components/auth-split-layout.wrn
index a6ebf956..7d383935 100644
--- a/examples/component-showcase/app/pages/components/auth-split-layout.wrn
+++ b/examples/component-showcase/app/pages/components/auth-split-layout.wrn
@@ -77,30 +77,30 @@ page AuthSplitLayoutDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-auth-split-layout-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-split-layout-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-auth-split-layout-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-split-layout-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-auth-split-layout-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-auth-split-layout-eyebrow" name="pg_eyebrow" type="text" value="Secure identity" /></label><label class="playground-field" for="playground-auth-split-layout-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-split-layout-title" name="pg_title" type="text" value="Auth Split Layout example" /></label><label class="playground-field" for="playground-auth-split-layout-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-split-layout-description" name="pg_description" type="text" value="A polished default auth split layout for a modern application." /></label><label class="playground-field" for="playground-auth-split-layout-brand"><span><strong>brand</strong><small>string</small></span><input id="playground-auth-split-layout-brand" name="pg_brand" type="text" value="Police Management System" /></label><label class="playground-field" for="playground-auth-split-layout-features"><span><strong>features</strong><small>unknown[]</small></span><textarea id="playground-auth-split-layout-features" name="pg_features" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Team members",
     "values": [
       "5",
       "Unlimited",
       "Unlimited"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Support",
     "values": [
       "Email",
       "Priority",
       "Dedicated"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Audit history",
     "values": [
       "7 days",
       "90 days",
       "Custom"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-auth-split-layout-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-split-layout-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/avatar-group.wrn b/examples/component-showcase/app/pages/components/avatar-group.wrn
index f05b0a1b..7bbd8159 100644
--- a/examples/component-showcase/app/pages/components/avatar-group.wrn
+++ b/examples/component-showcase/app/pages/components/avatar-group.wrn
@@ -156,7 +156,7 @@ page AvatarGroupDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>12 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-avatar-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "avatar-group-0-1",
     "key": "avatar-group-0-1",
     "value": "primary",
@@ -185,31 +185,31 @@ page AvatarGroupDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "avatar-group-0-2",
     "key": "avatar-group-0-2",
     "value": "secondary",
@@ -238,30 +238,30 @@ page AvatarGroupDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</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-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-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-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="4" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Avatar Group" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/breadcrumb.wrn b/examples/component-showcase/app/pages/components/breadcrumb.wrn
index 98a81812..cd0ff289 100644
--- a/examples/component-showcase/app/pages/components/breadcrumb.wrn
+++ b/examples/component-showcase/app/pages/components/breadcrumb.wrn
@@ -158,7 +158,7 @@ page BreadcrumbDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>12 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-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "breadcrumb-0-1",
     "key": "breadcrumb-0-1",
     "value": "primary",
@@ -187,31 +187,31 @@ page BreadcrumbDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "breadcrumb-0-2",
     "key": "breadcrumb-0-2",
     "value": "secondary",
@@ -240,30 +240,30 @@ page BreadcrumbDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</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-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-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-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/button-group.wrn b/examples/component-showcase/app/pages/components/button-group.wrn
index 625df374..18a29650 100644
--- a/examples/component-showcase/app/pages/components/button-group.wrn
+++ b/examples/component-showcase/app/pages/components/button-group.wrn
@@ -158,7 +158,7 @@ page ButtonGroupDetail {
         <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>
           <div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "button-group-0-1",
     "key": "button-group-0-1",
     "value": "primary",
@@ -187,31 +187,31 @@ page ButtonGroupDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "button-group-0-2",
     "key": "button-group-0-2",
     "value": "secondary",
@@ -240,30 +240,30 @@ page ButtonGroupDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</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-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-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-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button Group 1 example" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/card.wrn b/examples/component-showcase/app/pages/components/card.wrn
index 3085024f..7cb34a73 100644
--- a/examples/component-showcase/app/pages/components/card.wrn
+++ b/examples/component-showcase/app/pages/components/card.wrn
@@ -401,7 +401,7 @@ page CardDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>31 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-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-card-title" name="pg_title" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-subtitle"><span><strong>subtitle</strong><small>string</small></span><input id="playground-card-subtitle" name="pg_subtitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-card-description" name="pg_description" type="text" value="A polished default card for a modern application." /></label><label class="playground-field" for="playground-card-header"><span><strong>header</strong><small>string</small></span><input id="playground-card-header" name="pg_header" type="text" value="" /></label><label class="playground-field" for="playground-card-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-card-footer" name="pg_footer" type="text" value="" /></label><label class="playground-field" for="playground-card-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-card-imageSrc" name="pg_imageSrc" type="text" value="" /></label><label class="playground-field" for="playground-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-card-imageAlt" name="pg_imageAlt" type="text" value="" /></label><label class="playground-field" for="playground-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-card-actionLabel" name="pg_actionLabel" type="text" value="Card" /></label><label class="playground-field" for="playground-card-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-card-actionHref" name="pg_actionHref" type="text" value="#card-demo" /></label><label class="playground-field" for="playground-card-headerActions"><span><strong>header Actions</strong><small>unknown[]</small></span><textarea id="playground-card-headerActions" name="pg_headerActions" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "card-0-1",
     "key": "card-0-1",
     "value": "primary",
@@ -430,31 +430,31 @@ page CardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "card-0-2",
     "key": "card-0-2",
     "value": "secondary",
@@ -483,32 +483,32 @@ page CardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-navigation"><span><strong>navigation</strong><small>unknown[]</small></span><textarea id="playground-card-navigation" name="pg_navigation" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "card-0-1",
     "key": "card-0-1",
     "value": "primary",
@@ -537,31 +537,31 @@ page CardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "card-0-2",
     "key": "card-0-2",
     "value": "secondary",
@@ -590,32 +590,32 @@ page CardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-activeNav"><span><strong>active Nav</strong><small>string</small></span><input id="playground-card-activeNav" name="pg_activeNav" type="text" value="" /></label><label class="playground-toggle" for="playground-card-mobileNavigation"><span><strong>mobile Navigation</strong><small>boolean</small></span><input id="playground-card-mobileNavigation" name="pg_mobileNavigation" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-alertTitle"><span><strong>alert Title</strong><small>string</small></span><input id="playground-card-alertTitle" name="pg_alertTitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-alertDescription"><span><strong>alert Description</strong><small>string</small></span><input id="playground-card-alertDescription" name="pg_alertDescription" type="text" value="A polished default card for a modern application." /></label><label class="playground-toggle" for="playground-card-empty"><span><strong>empty</strong><small>boolean</small></span><input id="playground-card-empty" name="pg_empty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-emptyTitle"><span><strong>empty Title</strong><small>string</small></span><input id="playground-card-emptyTitle" name="pg_emptyTitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-emptyIcon"><span><strong>empty Icon</strong><small>string</small></span><input id="playground-card-emptyIcon" name="pg_emptyIcon" type="text" value="icon-[lucide--inbox]" /></label><label class="playground-field" for="playground-card-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-card-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "card-0-1",
     "key": "card-0-1",
     "value": "primary",
@@ -644,31 +644,31 @@ page CardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "card-0-2",
     "key": "card-0-2",
     "value": "secondary",
@@ -697,30 +697,30 @@ page CardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-card-size" name="pg_size"><option value="md" selected>md</option><option value="compact">compact</option><option value="default">default</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</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-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-card-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-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-card-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-card-layout" name="pg_layout"><option value="vertical" selected>vertical</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-card-hover"><span><strong>hover</strong><small>string</small></span><input id="playground-card-hover" name="pg_hover" type="text" value="none" /></label><label class="playground-toggle" for="playground-card-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-card-scrollable" name="pg_scrollable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-maxHeight"><span><strong>max Height</strong><small>string</small></span><input id="playground-card-maxHeight" name="pg_maxHeight" type="text" value="18rem" /></label><label class="playground-toggle" for="playground-card-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-card-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-card-ariaLabel" name="pg_ariaLabel" type="text" value="Card 1 example" /></label><label class="playground-field" for="playground-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/carousel.wrn b/examples/component-showcase/app/pages/components/carousel.wrn
index c4c87faa..f04fe840 100644
--- a/examples/component-showcase/app/pages/components/carousel.wrn
+++ b/examples/component-showcase/app/pages/components/carousel.wrn
@@ -170,7 +170,7 @@ page CarouselDetail {
         <form class="playground-controls" data-playground-form>
           <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-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-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-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-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-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="Carousel example" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="A polished default carousel for a modern application." /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "carousel-0-1",
     "key": "carousel-0-1",
     "value": "primary",
@@ -199,31 +199,31 @@ page CarouselDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "carousel-0-2",
     "key": "carousel-0-2",
     "value": "secondary",
@@ -252,30 +252,30 @@ page CarouselDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</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="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Carousel 1 example" /></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/chart.wrn b/examples/component-showcase/app/pages/components/chart.wrn
index db1e5d79..311675e6 100644
--- a/examples/component-showcase/app/pages/components/chart.wrn
+++ b/examples/component-showcase/app/pages/components/chart.wrn
@@ -152,7 +152,7 @@ page ChartDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-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-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-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-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Chart example" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="A polished default chart for a modern application." /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "chart-0-1",
     "key": "chart-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ChartDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "chart-0-2",
     "key": "chart-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ChartDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/chat-bubble.wrn b/examples/component-showcase/app/pages/components/chat-bubble.wrn
index 5df8b1c3..655dd56d 100644
--- a/examples/component-showcase/app/pages/components/chat-bubble.wrn
+++ b/examples/component-showcase/app/pages/components/chat-bubble.wrn
@@ -159,7 +159,7 @@ page ChatBubbleDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>11 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-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-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-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-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-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="Chat Bubble example" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="A polished default chat bubble for a modern application." /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "chat-bubble-0-1",
     "key": "chat-bubble-0-1",
     "value": "primary",
@@ -188,31 +188,31 @@ page ChatBubbleDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "chat-bubble-0-2",
     "key": "chat-bubble-0-2",
     "value": "secondary",
@@ -241,30 +241,30 @@ page ChatBubbleDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Chat Bubble 1 example" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/checkbox.wrn b/examples/component-showcase/app/pages/components/checkbox.wrn
index a4cfe5e9..2bcd3249 100644
--- a/examples/component-showcase/app/pages/components/checkbox.wrn
+++ b/examples/component-showcase/app/pages/components/checkbox.wrn
@@ -280,7 +280,7 @@ page CheckboxDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>27 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-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-id"><span><strong>id</strong><small>string</small></span><input id="playground-checkbox-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Checkbox" /></label><label class="playground-toggle" for="playground-checkbox-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-checkbox-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-checkbox-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-checkbox-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-checkbox-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-checkbox-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-checkbox-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-checkbox-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-checkbox-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-checkbox-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "checkbox-0-1",
     "key": "checkbox-0-1",
     "value": "primary",
@@ -309,31 +309,31 @@ page CheckboxDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "checkbox-0-2",
     "key": "checkbox-0-2",
     "value": "secondary",
@@ -362,32 +362,32 @@ page CheckboxDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-checkbox-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-checkbox-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "checkbox-0-1",
     "key": "checkbox-0-1",
     "value": "primary",
@@ -416,31 +416,31 @@ page CheckboxDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "checkbox-0-2",
     "key": "checkbox-0-2",
     "value": "secondary",
@@ -469,30 +469,30 @@ page CheckboxDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-indeterminate"><span><strong>indeterminate</strong><small>boolean</small></span><input id="playground-checkbox-indeterminate" name="pg_indeterminate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-checkbox-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-checkbox-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-checkbox-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-checkbox-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-checkbox-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-checkbox-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-checkbox-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-error"><span><strong>error</strong><small>string</small></span><input id="playground-checkbox-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-checkbox-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-checkbox-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-checkbox-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-checkbox-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-checkbox-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-class"><span><strong>class</strong><small>string</small></span><input id="playground-checkbox-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/clipboard.wrn b/examples/component-showcase/app/pages/components/clipboard.wrn
index 26f8f513..90d4991b 100644
--- a/examples/component-showcase/app/pages/components/clipboard.wrn
+++ b/examples/component-showcase/app/pages/components/clipboard.wrn
@@ -152,7 +152,7 @@ page ClipboardDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-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-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-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-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="Clipboard example" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="A polished default clipboard for a modern application." /></label><label class="playground-field" for="playground-clipboard-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-clipboard-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "clipboard-0-1",
     "key": "clipboard-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ClipboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "clipboard-0-2",
     "key": "clipboard-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ClipboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-clipboard-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-clipboard-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/collapse.wrn b/examples/component-showcase/app/pages/components/collapse.wrn
index 0de2fbd9..606c69b3 100644
--- a/examples/component-showcase/app/pages/components/collapse.wrn
+++ b/examples/component-showcase/app/pages/components/collapse.wrn
@@ -260,7 +260,7 @@ page CollapseDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-collapse-size"><span><strong>size</strong><small>string</small></span><select id="playground-collapse-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-collapse-color"><span><strong>color</strong><small>string</small></span><select id="playground-collapse-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-collapse-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-collapse-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "collapse-0-1",
     "key": "collapse-0-1",
     "value": "primary",
@@ -289,31 +289,31 @@ page CollapseDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "collapse-0-2",
     "key": "collapse-0-2",
     "value": "secondary",
@@ -342,32 +342,32 @@ page CollapseDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-collapse-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-collapse-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-collapse-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-collapse-mode" name="pg_mode" type="text" value="panel" /></label><label class="playground-field" for="playground-collapse-initialOpenIndexes"><span><strong>initial Open Indexes</strong><small>unknown[]</small></span><textarea id="playground-collapse-initialOpenIndexes" name="pg_initialOpenIndexes" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "collapse-0-1",
     "key": "collapse-0-1",
     "value": "primary",
@@ -396,31 +396,31 @@ page CollapseDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "collapse-0-2",
     "key": "collapse-0-2",
     "value": "secondary",
@@ -449,30 +449,30 @@ page CollapseDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-collapse-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-collapse-ariaLabel" name="pg_ariaLabel" type="text" value="Collapse 1 example" /></label><label class="playground-field" for="playground-collapse-class"><span><strong>class</strong><small>string</small></span><input id="playground-collapse-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/combo-box.wrn b/examples/component-showcase/app/pages/components/combo-box.wrn
index 883c5d66..5974e613 100644
--- a/examples/component-showcase/app/pages/components/combo-box.wrn
+++ b/examples/component-showcase/app/pages/components/combo-box.wrn
@@ -113,37 +113,37 @@ page ComboBoxDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>41 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-combo-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-combo-box-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-combo-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-combo-box-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-combo-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-combo-box-label" name="pg_label" type="text" value="Default autocomplete" /></label><label class="playground-field" for="playground-combo-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-combo-box-name" name="pg_name" type="text" value="combobox-1" /></label><label class="playground-field" for="playground-combo-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-combo-box-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-combo-box-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "value": "design",
     "label": "Design",
     "description": "Product and visual design",
     "icon": "icon-[lucide--palette]",
     "color": "#8b5cf6",
     "avatar": "/showcase-images/avatar-design.svg"
-  },
-  {
+  &#125;,
+  &#123;
     "value": "engineering",
     "label": "Engineering",
     "description": "Platform and application engineering",
     "icon": "icon-[lucide--code-2]",
     "color": "#0ea5e9",
     "avatar": "/showcase-images/avatar-engineering.svg"
-  },
-  {
+  &#125;,
+  &#123;
     "value": "growth",
     "label": "Growth",
     "description": "Marketing and customer growth",
     "icon": "icon-[lucide--trending-up]",
     "color": "#10b981",
     "avatar": "/showcase-images/avatar-growth.svg"
-  },
-  {
+  &#125;,
+  &#123;
     "value": "support",
     "label": "Support",
     "description": "Customer operations",
     "icon": "icon-[lucide--life-buoy]",
     "color": "#f59e0b"
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>unknown[]</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-combo-box-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-combo-box-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-combo-box-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-combo-box-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-combo-box-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-combo-box-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-combo-box-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-combo-box-placement" name="pg_placement"><option value="bottom" selected>bottom</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-combo-box-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-combo-box-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-toggle" for="playground-combo-box-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-combo-box-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-combo-box-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-combo-box-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-combo-box-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-combo-box-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-combo-box-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-combo-box-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-combo-box-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-combo-box-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-page"><span><strong>page</strong><small>number</small></span><input id="playground-combo-box-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-combo-box-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-combo-box-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-combo-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-combo-box-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/confetti.wrn b/examples/component-showcase/app/pages/components/confetti.wrn
index b5c391e4..78105e6c 100644
--- a/examples/component-showcase/app/pages/components/confetti.wrn
+++ b/examples/component-showcase/app/pages/components/confetti.wrn
@@ -152,7 +152,7 @@ page ConfettiDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-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-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-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-confetti-title"><span><strong>title</strong><small>string</small></span><input id="playground-confetti-title" name="pg_title" type="text" value="Confetti example" /></label><label class="playground-field" for="playground-confetti-description"><span><strong>description</strong><small>string</small></span><input id="playground-confetti-description" name="pg_description" type="text" value="A polished default confetti for a modern application." /></label><label class="playground-field" for="playground-confetti-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-confetti-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "confetti-0-1",
     "key": "confetti-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ConfettiDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "confetti-0-2",
     "key": "confetti-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ConfettiDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-confetti-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-confetti-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/context-menu.wrn b/examples/component-showcase/app/pages/components/context-menu.wrn
index d79568c1..9ab4f0be 100644
--- a/examples/component-showcase/app/pages/components/context-menu.wrn
+++ b/examples/component-showcase/app/pages/components/context-menu.wrn
@@ -173,27 +173,27 @@ page ContextMenuDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>18 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-context-menu-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-context-menu-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Open dashboard",
     "description": "View the operational workspace",
     "value": "dashboard",
     "icon": "icon-[lucide--layout-dashboard]"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Share record",
     "value": "share",
     "icon": "icon-[lucide--share-2]",
     "shortcut": "Ctrl S"
-  },
-  {
+  &#125;,
+  &#123;
     "type": "divider"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Delete record",
     "value": "delete",
     "icon": "icon-[lucide--trash-2]",
     "danger": true
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-context-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-context-menu-trigger" name="pg_trigger"><option value="click" selected>click</option><option value="contextmenu">contextmenu</option><option value="both">both</option><option value="manual">manual</option><option value="hover">hover</option><option value="focus">focus</option></select></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-context-menu-placement" name="pg_placement"><option value="pointer" selected>pointer</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-context-menu-align"><span><strong>align</strong><small>string</small></span><select id="playground-context-menu-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-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-context-menu-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-context-menu-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-field" for="playground-context-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-context-menu-label" name="pg_label" type="text" value="Context Menu" /></label><label class="playground-toggle" for="playground-context-menu-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-context-menu-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-context-menu-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-context-menu-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-minWidth"><span><strong>min Width</strong><small>string</small></span><input id="playground-context-menu-minWidth" name="pg_minWidth" type="text" value="14rem" /></label><label class="playground-field" for="playground-context-menu-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-context-menu-maxWidth" name="pg_maxWidth"><option value="20rem" selected>20rem</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><option value="full">full</option></select></label><label class="playground-field" for="playground-context-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-context-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/ctasection.wrn b/examples/component-showcase/app/pages/components/ctasection.wrn
index 1e6c37bc..731c5689 100644
--- a/examples/component-showcase/app/pages/components/ctasection.wrn
+++ b/examples/component-showcase/app/pages/components/ctasection.wrn
@@ -191,7 +191,7 @@ page CTASectionDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>25 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-ctasection-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-ctasection-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-title"><span><strong>title</strong><small>string</small></span><input id="playground-ctasection-title" name="pg_title" type="text" value="CTASection example" /></label><label class="playground-field" for="playground-ctasection-description"><span><strong>description</strong><small>string</small></span><input id="playground-ctasection-description" name="pg_description" type="text" value="A polished default ctasection for a modern application." /></label><label class="playground-field" for="playground-ctasection-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-ctasection-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-align"><span><strong>align</strong><small>string</small></span><select id="playground-ctasection-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="left">left</option><option value="right">right</option><option value="split">split</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-ctasection-size"><span><strong>size</strong><small>string</small></span><select id="playground-ctasection-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</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-ctasection-color"><span><strong>color</strong><small>string</small></span><select id="playground-ctasection-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-ctasection-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-ctasection-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-ctasection-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-ctasection-primaryLabel" name="pg_primaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-ctasection-primaryHref" name="pg_primaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-ctasection-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-ctasection-secondaryLabel" name="pg_secondaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-ctasection-secondaryHref" name="pg_secondaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-ctasection-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-backgroundImage"><span><strong>background Image</strong><small>string</small></span><input id="playground-ctasection-backgroundImage" name="pg_backgroundImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-ctasection-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualAlt"><span><strong>visual Alt</strong><small>string</small></span><input id="playground-ctasection-visualAlt" name="pg_visualAlt" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualIcon"><span><strong>visual Icon</strong><small>string</small></span><input id="playground-ctasection-visualIcon" name="pg_visualIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualTitle"><span><strong>visual Title</strong><small>string</small></span><input id="playground-ctasection-visualTitle" name="pg_visualTitle" type="text" value="CTASection example" /></label><label class="playground-field" for="playground-ctasection-visualDescription"><span><strong>visual Description</strong><small>string</small></span><input id="playground-ctasection-visualDescription" name="pg_visualDescription" type="text" value="A polished default ctasection for a modern application." /></label><label class="playground-field" for="playground-ctasection-visualItems"><span><strong>visual Items</strong><small>unknown[]</small></span><textarea id="playground-ctasection-visualItems" name="pg_visualItems" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "ctasection-0-1",
     "key": "ctasection-0-1",
     "value": "primary",
@@ -220,31 +220,31 @@ page CTASectionDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "ctasection-0-2",
     "key": "ctasection-0-2",
     "value": "secondary",
@@ -273,30 +273,30 @@ page CTASectionDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-ctasection-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-ctasection-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-ctasection-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-ctasection-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-ctasection-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-ctasection-fullBleed" name="pg_fullBleed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-ctasection-class"><span><strong>class</strong><small>string</small></span><input id="playground-ctasection-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/data-map.wrn b/examples/component-showcase/app/pages/components/data-map.wrn
index c9eeee8f..d0156f80 100644
--- a/examples/component-showcase/app/pages/components/data-map.wrn
+++ b/examples/component-showcase/app/pages/components/data-map.wrn
@@ -152,7 +152,7 @@ page DataMapDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-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-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-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-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Data Map example" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="A polished default data map for a modern application." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "data-map-0-1",
     "key": "data-map-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page DataMapDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "data-map-0-2",
     "key": "data-map-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page DataMapDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/data-table.wrn b/examples/component-showcase/app/pages/components/data-table.wrn
index c4f68ed9..5cbc9366 100644
--- a/examples/component-showcase/app/pages/components/data-table.wrn
+++ b/examples/component-showcase/app/pages/components/data-table.wrn
@@ -504,11 +504,11 @@ page DataTableDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>29 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-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="danger">danger</option><option value="info">info</option><option value="warning">warning</option></select></label><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-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-data-table-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rows"><span><strong>rows</strong><small>unknown[]</small></span><textarea id="playground-data-table-rows" name="pg_rows" rows="5" spellcheck="false" data-playground-json>[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"}, {"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"}]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rowKey"><span><strong>row Key</strong><small>string</small></span><input id="playground-data-table-rowKey" name="pg_rowKey" type="text" value="id" /></label><label class="playground-toggle" for="playground-data-table-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-data-table-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-data-table-loadingLabel" name="pg_loadingLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-data-table-errorLabel" name="pg_errorLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-data-table-retryLabel" name="pg_retryLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-data-table-caption" name="pg_caption" type="text" value="Accounts" /></label><label class="playground-field" for="playground-data-table-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-table-description" name="pg_description" type="text" value="A polished default data table for a modern application." /></label><label class="playground-toggle" for="playground-data-table-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-data-table-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-data-table-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Enter a sample value" /></label><label class="playground-toggle" for="playground-data-table-paginated"><span><strong>paginated</strong><small>boolean</small></span><input id="playground-data-table-paginated" name="pg_paginated" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-data-table-pageSize" name="pg_pageSize" type="number" value="5" /></label><label class="playground-field" for="playground-data-table-paginationStyle"><span><strong>pagination Style</strong><small>string</small></span><select id="playground-data-table-paginationStyle" name="pg_paginationStyle"><option value="compact" selected>compact</option><option value="numbered">numbered</option></select></label><label class="playground-field" for="playground-data-table-pageSizes"><span><strong>page Sizes</strong><small>number[]</small></span><textarea id="playground-data-table-pageSizes" name="pg_pageSizes" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="danger">danger</option><option value="info">info</option><option value="warning">warning</option></select></label><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-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-data-table-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[&#123;"key": "name", "label": "Account", "sortable": true&#125;, &#123;"key": "plan", "label": "Plan", "sortable": true&#125;, &#123;"key": "owner", "label": "Owner"&#125;, &#123;"key": "seats", "label": "Seats", "align": "end", "sortable": true&#125;, &#123;"key": "statusHtml", "label": "Status", "align": "center", "html": true&#125;]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rows"><span><strong>rows</strong><small>unknown[]</small></span><textarea id="playground-data-table-rows" name="pg_rows" rows="5" spellcheck="false" data-playground-json>[&#123;"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rowKey"><span><strong>row Key</strong><small>string</small></span><input id="playground-data-table-rowKey" name="pg_rowKey" type="text" value="id" /></label><label class="playground-toggle" for="playground-data-table-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-data-table-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-data-table-loadingLabel" name="pg_loadingLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-data-table-errorLabel" name="pg_errorLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-data-table-retryLabel" name="pg_retryLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-data-table-caption" name="pg_caption" type="text" value="Accounts" /></label><label class="playground-field" for="playground-data-table-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-table-description" name="pg_description" type="text" value="A polished default data table for a modern application." /></label><label class="playground-toggle" for="playground-data-table-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-data-table-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-data-table-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Enter a sample value" /></label><label class="playground-toggle" for="playground-data-table-paginated"><span><strong>paginated</strong><small>boolean</small></span><input id="playground-data-table-paginated" name="pg_paginated" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-data-table-pageSize" name="pg_pageSize" type="number" value="5" /></label><label class="playground-field" for="playground-data-table-paginationStyle"><span><strong>pagination Style</strong><small>string</small></span><select id="playground-data-table-paginationStyle" name="pg_paginationStyle"><option value="compact" selected>compact</option><option value="numbered">numbered</option></select></label><label class="playground-field" for="playground-data-table-pageSizes"><span><strong>page Sizes</strong><small>number[]</small></span><textarea id="playground-data-table-pageSizes" name="pg_pageSizes" rows="5" spellcheck="false" data-playground-json>[
   5,
   10,
   25
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-data-table-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-data-table-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[{"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"}, {"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"}, {"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"}, {"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"}]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-striped"><span><strong>striped</strong><small>boolean</small></span><input id="playground-data-table-striped" name="pg_striped" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-data-table-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-data-table-bordered" name="pg_bordered" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-gridlines"><span><strong>gridlines</strong><small>string</small></span><select id="playground-data-table-gridlines" name="pg_gridlines"><option value="rows" selected>rows</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-data-table-density"><span><strong>density</strong><small>string</small></span><select id="playground-data-table-density" name="pg_density"><option value="default" selected>default</option><option value="compact">compact</option><option value="comfortable">comfortable</option></select></label><label class="playground-field" for="playground-data-table-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-data-table-emptyLabel" name="pg_emptyLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-noResultsLabel"><span><strong>no Results Label</strong><small>string</small></span><input id="playground-data-table-noResultsLabel" name="pg_noResultsLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-clearSearchLabel"><span><strong>clear Search Label</strong><small>string</small></span><input id="playground-data-table-clearSearchLabel" name="pg_clearSearchLabel" type="text" value="Data Table" /></label><label class="playground-toggle" for="playground-data-table-stickyFirstColumn"><span><strong>sticky First Column</strong><small>boolean</small></span><input id="playground-data-table-stickyFirstColumn" name="pg_stickyFirstColumn" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-data-table-layout" name="pg_layout"><option value="rows" selected>rows</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-data-table-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-table-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-data-table-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-data-table-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[&#123;"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"&#125;, &#123;"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"&#125;, &#123;"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"&#125;, &#123;"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"&#125;]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-striped"><span><strong>striped</strong><small>boolean</small></span><input id="playground-data-table-striped" name="pg_striped" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-data-table-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-data-table-bordered" name="pg_bordered" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-gridlines"><span><strong>gridlines</strong><small>string</small></span><select id="playground-data-table-gridlines" name="pg_gridlines"><option value="rows" selected>rows</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-data-table-density"><span><strong>density</strong><small>string</small></span><select id="playground-data-table-density" name="pg_density"><option value="default" selected>default</option><option value="compact">compact</option><option value="comfortable">comfortable</option></select></label><label class="playground-field" for="playground-data-table-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-data-table-emptyLabel" name="pg_emptyLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-noResultsLabel"><span><strong>no Results Label</strong><small>string</small></span><input id="playground-data-table-noResultsLabel" name="pg_noResultsLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-clearSearchLabel"><span><strong>clear Search Label</strong><small>string</small></span><input id="playground-data-table-clearSearchLabel" name="pg_clearSearchLabel" type="text" value="Data Table" /></label><label class="playground-toggle" for="playground-data-table-stickyFirstColumn"><span><strong>sticky First Column</strong><small>boolean</small></span><input id="playground-data-table-stickyFirstColumn" name="pg_stickyFirstColumn" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-data-table-layout" name="pg_layout"><option value="rows" selected>rows</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-data-table-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-table-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
diff --git a/examples/component-showcase/app/pages/components/device-frame.wrn b/examples/component-showcase/app/pages/components/device-frame.wrn
index 6499c3a2..5d98758e 100644
--- a/examples/component-showcase/app/pages/components/device-frame.wrn
+++ b/examples/component-showcase/app/pages/components/device-frame.wrn
@@ -160,7 +160,7 @@ page DeviceFrameDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>14 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-device-frame-size"><span><strong>size</strong><small>string</small></span><select id="playground-device-frame-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-device-frame-color"><span><strong>color</strong><small>string</small></span><select id="playground-device-frame-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-device-frame-title"><span><strong>title</strong><small>string</small></span><input id="playground-device-frame-title" name="pg_title" type="text" value="Device Frame example" /></label><label class="playground-field" for="playground-device-frame-description"><span><strong>description</strong><small>string</small></span><input id="playground-device-frame-description" name="pg_description" type="text" value="A polished default device frame for a modern application." /></label><label class="playground-field" for="playground-device-frame-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-device-frame-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "device-frame-0-1",
     "key": "device-frame-0-1",
     "value": "primary",
@@ -189,31 +189,31 @@ page DeviceFrameDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "device-frame-0-2",
     "key": "device-frame-0-2",
     "value": "secondary",
@@ -242,30 +242,30 @@ page DeviceFrameDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-device-frame-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/drag-and-drop.wrn b/examples/component-showcase/app/pages/components/drag-and-drop.wrn
index 3bc18c77..6645fd70 100644
--- a/examples/component-showcase/app/pages/components/drag-and-drop.wrn
+++ b/examples/component-showcase/app/pages/components/drag-and-drop.wrn
@@ -152,7 +152,7 @@ page DragAndDropDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-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-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-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-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Drag And Drop example" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="A polished default drag and drop for a modern application." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "drag-and-drop-0-1",
     "key": "drag-and-drop-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page DragAndDropDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "drag-and-drop-0-2",
     "key": "drag-and-drop-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page DragAndDropDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/dropdown.wrn b/examples/component-showcase/app/pages/components/dropdown.wrn
index 138ee180..d5621f13 100644
--- a/examples/component-showcase/app/pages/components/dropdown.wrn
+++ b/examples/component-showcase/app/pages/components/dropdown.wrn
@@ -172,27 +172,27 @@ page DropdownDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>17 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-dropdown-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Open dashboard",
     "description": "View the operational workspace",
     "value": "dashboard",
     "icon": "icon-[lucide--layout-dashboard]"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Share record",
     "value": "share",
     "icon": "icon-[lucide--share-2]",
     "shortcut": "Ctrl S"
-  },
-  {
+  &#125;,
+  &#123;
     "type": "divider"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Delete record",
     "value": "delete",
     "icon": "icon-[lucide--trash-2]",
     "danger": true
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-dropdown-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Open playground menu" /></label><label class="playground-field" for="playground-dropdown-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-dropdown-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-dropdown-showChevron"><span><strong>show Chevron</strong><small>boolean</small></span><input id="playground-dropdown-showChevron" name="pg_showChevron" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-menuLabel"><span><strong>menu Label</strong><small>string</small></span><input id="playground-dropdown-menuLabel" name="pg_menuLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-dropdown-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-dropdown-width"><span><strong>width</strong><small>string</small></span><select id="playground-dropdown-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option></select></label><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-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-dropdown-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-dropdown-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-dropdown-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-dropdown-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-dropdown-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-dropdown-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-dropdown-emptyLabel" name="pg_emptyLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-class"><span><strong>class</strong><small>string</small></span><input id="playground-dropdown-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/feature-grid.wrn b/examples/component-showcase/app/pages/components/feature-grid.wrn
index 32710a12..b77fdccb 100644
--- a/examples/component-showcase/app/pages/components/feature-grid.wrn
+++ b/examples/component-showcase/app/pages/components/feature-grid.wrn
@@ -159,7 +159,7 @@ page FeatureGridDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>14 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-feature-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-grid-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-feature-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-grid-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-feature-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-feature-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "icon": "icon-[lucide--shield-check]",
     "eyebrow": "Citizen support",
     "title": "Citizen services",
@@ -170,8 +170,8 @@ page FeatureGridDetail {
     "color": "primary",
     "variant": "default",
     "hover": "lift"
-  },
-  {
+  &#125;,
+  &#123;
     "icon": "icon-[lucide--map-pin]",
     "eyebrow": "Directory",
     "title": "Station directory",
@@ -182,8 +182,8 @@ page FeatureGridDetail {
     "color": "info",
     "variant": "soft",
     "hover": "border"
-  },
-  {
+  &#125;,
+  &#123;
     "icon": "icon-[lucide--radio-tower]",
     "eyebrow": "Verified",
     "title": "Public updates",
@@ -194,7 +194,7 @@ page FeatureGridDetail {
     "color": "success",
     "variant": "gradient",
     "hover": "glow"
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-feature-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-feature-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-feature-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-feature-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-feature-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-feature-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-feature-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-feature-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-feature-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-feature-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-grid-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-grid-align" name="pg_align"><option value="start" selected>start</option><option value="stretch">stretch</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-feature-grid-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-feature-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-grid-label"><span><strong>label</strong><small>string</small></span><input id="playground-feature-grid-label" name="pg_label" type="text" value="Feature Grid" /></label><label class="playground-field" for="playground-feature-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/file-upload.wrn b/examples/component-showcase/app/pages/components/file-upload.wrn
index 8c8f4732..0fdf7a23 100644
--- a/examples/component-showcase/app/pages/components/file-upload.wrn
+++ b/examples/component-showcase/app/pages/components/file-upload.wrn
@@ -152,7 +152,7 @@ page FileUploadDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-file-upload-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-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-file-upload-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-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-file-upload-title"><span><strong>title</strong><small>string</small></span><input id="playground-file-upload-title" name="pg_title" type="text" value="File Upload example" /></label><label class="playground-field" for="playground-file-upload-description"><span><strong>description</strong><small>string</small></span><input id="playground-file-upload-description" name="pg_description" type="text" value="A polished default file upload for a modern application." /></label><label class="playground-field" for="playground-file-upload-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-file-upload-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "file-upload-0-1",
     "key": "file-upload-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page FileUploadDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "file-upload-0-2",
     "key": "file-upload-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page FileUploadDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-file-upload-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-file-upload-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-file-upload-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/footer.wrn b/examples/component-showcase/app/pages/components/footer.wrn
index c1e20418..95687ac9 100644
--- a/examples/component-showcase/app/pages/components/footer.wrn
+++ b/examples/component-showcase/app/pages/components/footer.wrn
@@ -164,77 +164,77 @@ page FooterDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-footer-size"><span><strong>size</strong><small>string</small></span><select id="playground-footer-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</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-footer-color"><span><strong>color</strong><small>string</small></span><select id="playground-footer-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-footer-label"><span><strong>label</strong><small>string</small></span><input id="playground-footer-label" name="pg_label" type="text" value="Footer" /></label><label class="playground-field" for="playground-footer-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "type": "header",
     "label": "Product",
     "description": "Build consistent interfaces with WRNexusJS.",
     "items": [
-      {
+      &#123;
         "label": "Components",
         "href": "/base"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Themes",
         "href": "/themes"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Examples",
         "href": "/blocks"
-      }
+      &#125;
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "type": "header",
     "label": "Developers",
     "items": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "/docs"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Installation",
         "href": "/installation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Framework guides",
         "href": "/framework-guides"
-      }
+      &#125;
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "type": "header",
     "label": "Resources",
     "items": [
-      {
+      &#123;
         "label": "Accessibility",
         "href": "/accessibility"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Design tokens",
         "href": "/colors"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Typography",
         "href": "/fonts"
-      }
+      &#125;
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "type": "header",
     "label": "Company",
     "items": [
-      {
+      &#123;
         "label": "WorkRoot",
         "href": "https://workroot.in",
         "external": true
-      },
-      {
+      &#125;,
+      &#123;
         "label": "WRNexusJS",
         "href": "https://wrnexusjs.dev",
         "external": true
-      }
+      &#125;
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-footer-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="compact">compact</option><option value="xl">xl</option><option value="full">full</option><option value="lg">lg</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-footer-copyright"><span><strong>copyright</strong><small>string</small></span><input id="playground-footer-copyright" name="pg_copyright" type="text" value="" /></label><label class="playground-field" for="playground-footer-class"><span><strong>class</strong><small>string</small></span><input id="playground-footer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/hero-actions.wrn b/examples/component-showcase/app/pages/components/hero-actions.wrn
index 18043687..67dedcc9 100644
--- a/examples/component-showcase/app/pages/components/hero-actions.wrn
+++ b/examples/component-showcase/app/pages/components/hero-actions.wrn
@@ -152,18 +152,18 @@ page HeroActionsDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-hero-actions-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Browse components",
     "href": "#components",
     "icon": "icon-[lucide--blocks]",
     "variant": "primary"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "View metrics",
     "href": "#metrics",
     "icon": "icon-[lucide--chart-no-axes-column-increasing]",
     "variant": "outline"
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-actions-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-actions-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-actions-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-hero-actions-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-hero-actions-stackOnMobile"><span><strong>stack On Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-stackOnMobile" name="pg_stackOnMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-actions-fullWidthMobile"><span><strong>full Width Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-fullWidthMobile" name="pg_fullWidthMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-actions-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-actions-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-hero-actions-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-actions-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-hero-actions-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-actions-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/hero.wrn b/examples/component-showcase/app/pages/components/hero.wrn
index 63e234e7..7785bae7 100644
--- a/examples/component-showcase/app/pages/components/hero.wrn
+++ b/examples/component-showcase/app/pages/components/hero.wrn
@@ -428,7 +428,7 @@ page HeroDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>38 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-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-hero-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-hero-title" name="pg_title" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-hero-description" name="pg_description" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</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-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-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-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-hero-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-hero-layout" name="pg_layout"><option value="split" selected>split</option><option value="stacked">stacked</option><option value="content">content</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><select id="playground-hero-visualStyle" name="pg_visualStyle"><option value="plain" selected>plain</option><option value="card">card</option><option value="soft">soft</option></select></label><label class="playground-toggle" for="playground-hero-showDecorations"><span><strong>show Decorations</strong><small>boolean</small></span><input id="playground-hero-showDecorations" name="pg_showDecorations" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-hero-fullBleed" name="pg_fullBleed" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-hero-visualEyebrow" name="pg_visualEyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualTitle"><span><strong>visual Title</strong><small>string</small></span><input id="playground-hero-visualTitle" name="pg_visualTitle" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-visualDescription"><span><strong>visual Description</strong><small>string</small></span><input id="playground-hero-visualDescription" name="pg_visualDescription" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-visualIcon"><span><strong>visual Icon</strong><small>string</small></span><input id="playground-hero-visualIcon" name="pg_visualIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-hero-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualAlt"><span><strong>visual Alt</strong><small>string</small></span><input id="playground-hero-visualAlt" name="pg_visualAlt" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualItems"><span><strong>visual Items</strong><small>unknown[]</small></span><textarea id="playground-hero-visualItems" name="pg_visualItems" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "hero-0-1",
     "key": "hero-0-1",
     "value": "primary",
@@ -457,31 +457,31 @@ page HeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "hero-0-2",
     "key": "hero-0-2",
     "value": "secondary",
@@ -510,32 +510,32 @@ page HeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-hero-primaryHref" name="pg_primaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-primaryTarget"><span><strong>primary Target</strong><small>string</small></span><input id="playground-hero-primaryTarget" name="pg_primaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryTarget"><span><strong>secondary Target</strong><small>string</small></span><input id="playground-hero-secondaryTarget" name="pg_secondaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryLabel"><span><strong>tertiary Label</strong><small>string</small></span><input id="playground-hero-tertiaryLabel" name="pg_tertiaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-tertiaryHref"><span><strong>tertiary Href</strong><small>string</small></span><input id="playground-hero-tertiaryHref" name="pg_tertiaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-tertiaryIcon"><span><strong>tertiary Icon</strong><small>string</small></span><input id="playground-hero-tertiaryIcon" name="pg_tertiaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryTarget"><span><strong>tertiary Target</strong><small>string</small></span><input id="playground-hero-tertiaryTarget" name="pg_tertiaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-badges"><span><strong>badges</strong><small>unknown[]</small></span><textarea id="playground-hero-badges" name="pg_badges" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "hero-0-1",
     "key": "hero-0-1",
     "value": "primary",
@@ -564,31 +564,31 @@ page HeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "hero-0-2",
     "key": "hero-0-2",
     "value": "secondary",
@@ -617,32 +617,32 @@ page HeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-trustItems"><span><strong>trust Items</strong><small>unknown[]</small></span><textarea id="playground-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "hero-0-1",
     "key": "hero-0-1",
     "value": "primary",
@@ -671,31 +671,31 @@ page HeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "hero-0-2",
     "key": "hero-0-2",
     "value": "secondary",
@@ -724,30 +724,30 @@ page HeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-hero-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-hero-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/legend-indicator.wrn b/examples/component-showcase/app/pages/components/legend-indicator.wrn
index 743622e0..b51e9255 100644
--- a/examples/component-showcase/app/pages/components/legend-indicator.wrn
+++ b/examples/component-showcase/app/pages/components/legend-indicator.wrn
@@ -152,7 +152,7 @@ page LegendIndicatorDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-legend-indicator-size"><span><strong>size</strong><small>string</small></span><select id="playground-legend-indicator-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-legend-indicator-color"><span><strong>color</strong><small>string</small></span><select id="playground-legend-indicator-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-legend-indicator-title"><span><strong>title</strong><small>string</small></span><input id="playground-legend-indicator-title" name="pg_title" type="text" value="Legend Indicator example" /></label><label class="playground-field" for="playground-legend-indicator-description"><span><strong>description</strong><small>string</small></span><input id="playground-legend-indicator-description" name="pg_description" type="text" value="A polished default legend indicator for a modern application." /></label><label class="playground-field" for="playground-legend-indicator-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-legend-indicator-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "legend-indicator-0-1",
     "key": "legend-indicator-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page LegendIndicatorDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "legend-indicator-0-2",
     "key": "legend-indicator-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page LegendIndicatorDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-legend-indicator-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-legend-indicator-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-legend-indicator-class"><span><strong>class</strong><small>string</small></span><input id="playground-legend-indicator-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/list-group.wrn b/examples/component-showcase/app/pages/components/list-group.wrn
index ceec778b..37315eea 100644
--- a/examples/component-showcase/app/pages/components/list-group.wrn
+++ b/examples/component-showcase/app/pages/components/list-group.wrn
@@ -152,7 +152,7 @@ page ListGroupDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-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-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-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-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="List Group example" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="A polished default list group for a modern application." /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "list-group-0-1",
     "key": "list-group-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ListGroupDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "list-group-0-2",
     "key": "list-group-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ListGroupDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/list.wrn b/examples/component-showcase/app/pages/components/list.wrn
index f9269c74..e129b0f4 100644
--- a/examples/component-showcase/app/pages/components/list.wrn
+++ b/examples/component-showcase/app/pages/components/list.wrn
@@ -152,7 +152,7 @@ page ListDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-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-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "list-0-1",
     "key": "list-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ListDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "list-0-2",
     "key": "list-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ListDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/map.wrn b/examples/component-showcase/app/pages/components/map.wrn
index 8e025977..1a35d3a8 100644
--- a/examples/component-showcase/app/pages/components/map.wrn
+++ b/examples/component-showcase/app/pages/components/map.wrn
@@ -152,7 +152,7 @@ page MapDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-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-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "map-0-1",
     "key": "map-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page MapDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "map-0-2",
     "key": "map-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page MapDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/marquee.wrn b/examples/component-showcase/app/pages/components/marquee.wrn
index 675021b1..7fa6d2eb 100644
--- a/examples/component-showcase/app/pages/components/marquee.wrn
+++ b/examples/component-showcase/app/pages/components/marquee.wrn
@@ -152,7 +152,7 @@ page MarqueeDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-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-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "marquee-0-1",
     "key": "marquee-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page MarqueeDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "marquee-0-2",
     "key": "marquee-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page MarqueeDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-marquee-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-marquee-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-marquee-class"><span><strong>class</strong><small>string</small></span><input id="playground-marquee-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/mega-menu.wrn b/examples/component-showcase/app/pages/components/mega-menu.wrn
index d1db2148..ea5f6c66 100644
--- a/examples/component-showcase/app/pages/components/mega-menu.wrn
+++ b/examples/component-showcase/app/pages/components/mega-menu.wrn
@@ -152,7 +152,7 @@ page MegaMenuDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-mega-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-mega-menu-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-mega-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-mega-menu-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-mega-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-mega-menu-label" name="pg_label" type="text" value="Mega Menu" /></label><label class="playground-field" for="playground-mega-menu-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-mega-menu-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-mega-menu-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-mega-menu-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "mega-menu-0-1",
     "key": "mega-menu-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page MegaMenuDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "mega-menu-0-2",
     "key": "mega-menu-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page MegaMenuDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-mega-menu-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-mega-menu-footer" name="pg_footer" type="text" value="" /></label><label class="playground-toggle" for="playground-mega-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-mega-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-mega-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-mega-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/metric-grid.wrn b/examples/component-showcase/app/pages/components/metric-grid.wrn
index 512eaa2f..93a007cf 100644
--- a/examples/component-showcase/app/pages/components/metric-grid.wrn
+++ b/examples/component-showcase/app/pages/components/metric-grid.wrn
@@ -156,7 +156,7 @@ page MetricGridDetail {
         <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>
           <div class="playground-fields"><label class="playground-field" for="playground-metric-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Public services",
     "value": "24",
     "description": "Citizen-facing services available online.",
@@ -165,8 +165,8 @@ page MetricGridDetail {
     "trendLabel": "this release",
     "trendDirection": "up",
     "color": "primary"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Police stations",
     "value": "126",
     "description": "Searchable station and jurisdiction entries.",
@@ -174,8 +174,8 @@ page MetricGridDetail {
     "trend": "Updated",
     "trendLabel": "today",
     "color": "info"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Availability",
     "value": "99.9",
     "suffix": "%",
@@ -185,7 +185,7 @@ page MetricGridDetail {
     "trendLabel": "30 days",
     "trendDirection": "positive",
     "color": "success"
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-metric-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-metric-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-metric-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-metric-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-metric-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-metric-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-metric-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-metric-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-grid-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-metric-grid-dividers" name="pg_dividers" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-grid-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-metric-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-grid-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-metric-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-metric-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-metric-grid-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-metric-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-metric-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-field" for="playground-metric-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/nav.wrn b/examples/component-showcase/app/pages/components/nav.wrn
index 4514923f..cf96ed70 100644
--- a/examples/component-showcase/app/pages/components/nav.wrn
+++ b/examples/component-showcase/app/pages/components/nav.wrn
@@ -154,7 +154,7 @@ page NavDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>9 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-nav-color"><span><strong>color</strong><small>string</small></span><select id="playground-nav-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-nav-size"><span><strong>size</strong><small>string</small></span><select id="playground-nav-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-nav-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-nav-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "nav-0-1",
     "key": "nav-0-1",
     "value": "primary",
@@ -183,31 +183,31 @@ page NavDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "nav-0-2",
     "key": "nav-0-2",
     "value": "secondary",
@@ -236,30 +236,30 @@ page NavDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-nav-active"><span><strong>active</strong><small>string</small></span><input id="playground-nav-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-nav-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-nav-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-nav-label"><span><strong>label</strong><small>string</small></span><input id="playground-nav-label" name="pg_label" type="text" value="Nav" /></label><label class="playground-toggle" for="playground-nav-collapsible"><span><strong>collapsible</strong><small>boolean</small></span><input id="playground-nav-collapsible" name="pg_collapsible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-nav-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-nav-toggleLabel" name="pg_toggleLabel" type="text" value="Nav" /></label><label class="playground-field" for="playground-nav-class"><span><strong>class</strong><small>string</small></span><input id="playground-nav-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/navbar.wrn b/examples/component-showcase/app/pages/components/navbar.wrn
index 6f5d79ba..85da9102 100644
--- a/examples/component-showcase/app/pages/components/navbar.wrn
+++ b/examples/component-showcase/app/pages/components/navbar.wrn
@@ -325,7 +325,7 @@ page NavbarDetail {
         </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>
-          <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>{
+          <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",
   "value": "primary",
@@ -354,31 +354,31 @@ page NavbarDetail {
   "target": "_self",
   "ariaLabel": "Open primary workflow 1",
   "items": [
-    {
+    &#123;
       "label": "Nested option A",
       "value": "nested-a"
-    },
-    {
+    &#125;,
+    &#123;
       "label": "Nested option B",
       "value": "nested-b"
-    }
+    &#125;
   ],
   "links": [
-    {
+    &#123;
       "label": "Documentation",
       "href": "#documentation"
-    },
-    {
+    &#125;,
+    &#123;
       "label": "API reference",
       "href": "#api-reference"
-    }
+    &#125;
   ],
   "values": [
     "Included",
     "Standard"
   ]
-}</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-navbar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+&#125;</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-navbar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+  &#123;
     "id": "navbar-0-1",
     "key": "navbar-0-1",
     "value": "primary",
@@ -407,31 +407,31 @@ page NavbarDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "navbar-0-2",
     "key": "navbar-0-2",
     "value": "secondary",
@@ -460,32 +460,32 @@ page NavbarDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-navbar-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "navbar-0-1",
     "key": "navbar-0-1",
     "value": "primary",
@@ -514,31 +514,31 @@ page NavbarDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "navbar-0-2",
     "key": "navbar-0-2",
     "value": "secondary",
@@ -567,30 +567,30 @@ page NavbarDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "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>
         </form>
       </div>
@@ -607,7 +607,7 @@ page NavbarDetail {
           <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="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"]}' 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"]},{"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Navbar size="default" 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"]})' 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"]},{"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -903,7 +903,7 @@ page NavbarDetail {
           <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='{"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"]}' 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":"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"]}]' 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"]}]' 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='({"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"]})' 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":"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1200,7 +1200,7 @@ page NavbarDetail {
           <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="lg" 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"]}' 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"]},{"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Navbar size="lg" 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"]})' 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"]},{"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
diff --git a/examples/component-showcase/app/pages/components/page-header.wrn b/examples/component-showcase/app/pages/components/page-header.wrn
index 7ddf220c..7e348f5c 100644
--- a/examples/component-showcase/app/pages/components/page-header.wrn
+++ b/examples/component-showcase/app/pages/components/page-header.wrn
@@ -183,19 +183,19 @@ page PageHeaderDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>25 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-page-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-page-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-page-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-page-header-title" name="pg_title" type="text" value="Page Header example" /></label><label class="playground-field" for="playground-page-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-page-header-description" name="pg_description" type="text" value="A polished default page header for a modern application." /></label><label class="playground-field" for="playground-page-header-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-page-header-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-page-header-id" name="pg_id" type="text" value="page-title" /></label><label class="playground-field" for="playground-page-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-page-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-page-header-centered"><span><strong>centered</strong><small>boolean</small></span><input id="playground-page-header-centered" name="pg_centered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-page-header-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-page-header-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-page-header-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="large">large</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-page-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-page-header-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-page-header-showBreadcrumbs"><span><strong>show Breadcrumbs</strong><small>boolean</small></span><input id="playground-page-header-showBreadcrumbs" name="pg_showBreadcrumbs" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-breadcrumbs"><span><strong>breadcrumbs</strong><small>unknown[]</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Home",
     "href": "/",
     "icon": "icon-[lucide--house]"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Components",
     "href": "/base"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Page header",
     "current": true
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-page-header-breadcrumbParent"><span><strong>breadcrumb Parent</strong><small>string</small></span><input id="playground-page-header-breadcrumbParent" name="pg_breadcrumbParent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-breadcrumbParentHref"><span><strong>breadcrumb Parent Href</strong><small>string</small></span><input id="playground-page-header-breadcrumbParentHref" name="pg_breadcrumbParentHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-breadcrumbCurrent"><span><strong>breadcrumb Current</strong><small>string</small></span><input id="playground-page-header-breadcrumbCurrent" name="pg_breadcrumbCurrent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-page-header-primaryLabel" name="pg_primaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-page-header-primaryHref" name="pg_primaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-page-header-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-page-header-secondaryLabel" name="pg_secondaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-page-header-secondaryHref" name="pg_secondaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-page-header-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-page-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-page-header-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-page-header-variant" name="pg_variant"><option value="default" selected>default</option><option value="minimal">minimal</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-page-header-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-page-header-borderBottom" name="pg_borderBottom" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-page-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/portal-dashboard.wrn b/examples/component-showcase/app/pages/components/portal-dashboard.wrn
index 308ce511..908479d7 100644
--- a/examples/component-showcase/app/pages/components/portal-dashboard.wrn
+++ b/examples/component-showcase/app/pages/components/portal-dashboard.wrn
@@ -487,7 +487,7 @@ page PortalDashboardDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>14 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-portal-dashboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-portal-dashboard-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-portal-dashboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-portal-dashboard-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-portal-dashboard-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-portal-dashboard-eyebrow" name="pg_eyebrow" type="text" value="Overview" /></label><label class="playground-field" for="playground-portal-dashboard-eyebrowKey"><span><strong>eyebrow Key</strong><small>string</small></span><input id="playground-portal-dashboard-eyebrowKey" name="pg_eyebrowKey" type="text" value="" /></label><label class="playground-field" for="playground-portal-dashboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-portal-dashboard-title" name="pg_title" type="text" value="Portal Dashboard example" /></label><label class="playground-field" for="playground-portal-dashboard-titleKey"><span><strong>title Key</strong><small>string</small></span><input id="playground-portal-dashboard-titleKey" name="pg_titleKey" type="text" value="" /></label><label class="playground-field" for="playground-portal-dashboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-portal-dashboard-description" name="pg_description" type="text" value="A polished default portal dashboard for a modern application." /></label><label class="playground-field" for="playground-portal-dashboard-descriptionKey"><span><strong>description Key</strong><small>string</small></span><input id="playground-portal-dashboard-descriptionKey" name="pg_descriptionKey" type="text" value="A polished default portal dashboard for a modern application." /></label><label class="playground-field" for="playground-portal-dashboard-userName"><span><strong>user Name</strong><small>string</small></span><input id="playground-portal-dashboard-userName" name="pg_userName" type="text" value="" /></label><label class="playground-field" for="playground-portal-dashboard-metrics"><span><strong>metrics</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-metrics" name="pg_metrics" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "portal-dashboard-0-1",
     "key": "portal-dashboard-0-1",
     "value": "primary",
@@ -516,31 +516,31 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "portal-dashboard-0-2",
     "key": "portal-dashboard-0-2",
     "value": "secondary",
@@ -569,32 +569,32 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "portal-dashboard-0-1",
     "key": "portal-dashboard-0-1",
     "value": "primary",
@@ -623,31 +623,31 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "portal-dashboard-0-2",
     "key": "portal-dashboard-0-2",
     "value": "secondary",
@@ -676,32 +676,32 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-updates"><span><strong>updates</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-updates" name="pg_updates" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "portal-dashboard-0-1",
     "key": "portal-dashboard-0-1",
     "value": "primary",
@@ -730,31 +730,31 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "portal-dashboard-0-2",
     "key": "portal-dashboard-0-2",
     "value": "secondary",
@@ -783,32 +783,32 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-tasks"><span><strong>tasks</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-tasks" name="pg_tasks" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "portal-dashboard-0-1",
     "key": "portal-dashboard-0-1",
     "value": "primary",
@@ -837,31 +837,31 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "portal-dashboard-0-2",
     "key": "portal-dashboard-0-2",
     "value": "secondary",
@@ -890,30 +890,30 @@ page PortalDashboardDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-portal-dashboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/radio.wrn b/examples/component-showcase/app/pages/components/radio.wrn
index 5e877014..6285c092 100644
--- a/examples/component-showcase/app/pages/components/radio.wrn
+++ b/examples/component-showcase/app/pages/components/radio.wrn
@@ -170,7 +170,7 @@ page RadioDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>25 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-radio-size"><span><strong>size</strong><small>string</small></span><select id="playground-radio-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-radio-color"><span><strong>color</strong><small>string</small></span><select id="playground-radio-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-radio-id"><span><strong>id</strong><small>string</small></span><input id="playground-radio-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-radio-name"><span><strong>name</strong><small>string</small></span><input id="playground-radio-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-radio-label"><span><strong>label</strong><small>string</small></span><input id="playground-radio-label" name="pg_label" type="text" value="Radio" /></label><label class="playground-toggle" for="playground-radio-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-radio-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-radio-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-radio-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-radio-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-radio-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-radio-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-radio-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-radio-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-radio-value"><span><strong>value</strong><small>string</small></span><input id="playground-radio-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-radio-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-radio-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "radio-0-1",
     "key": "radio-0-1",
     "value": "primary",
@@ -199,31 +199,31 @@ page RadioDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "radio-0-2",
     "key": "radio-0-2",
     "value": "secondary",
@@ -252,30 +252,30 @@ page RadioDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-radio-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-radio-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-radio-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-radio-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-radio-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-radio-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-radio-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-radio-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-radio-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-radio-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-radio-error"><span><strong>error</strong><small>string</small></span><input id="playground-radio-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-radio-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-radio-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-radio-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-radio-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-radio-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-class"><span><strong>class</strong><small>string</small></span><input id="playground-radio-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/range-slider.wrn b/examples/component-showcase/app/pages/components/range-slider.wrn
index 7199aa07..1bfc4d34 100644
--- a/examples/component-showcase/app/pages/components/range-slider.wrn
+++ b/examples/component-showcase/app/pages/components/range-slider.wrn
@@ -173,7 +173,7 @@ page RangeSliderDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>26 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-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-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-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-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-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Range Slider" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-range-slider-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-marks"><span><strong>marks</strong><small>unknown[]</small></span><textarea id="playground-range-slider-marks" name="pg_marks" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "range-slider-0-1",
     "key": "range-slider-0-1",
     "value": "primary",
@@ -202,31 +202,31 @@ page RangeSliderDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "range-slider-0-2",
     "key": "range-slider-0-2",
     "value": "secondary",
@@ -255,30 +255,30 @@ page RangeSliderDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-range-slider-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-range-slider-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-range-slider-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-error"><span><strong>error</strong><small>string</small></span><input id="playground-range-slider-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-range-slider-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-range-slider-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-range-slider-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-range-slider-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-range-slider-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/rating.wrn b/examples/component-showcase/app/pages/components/rating.wrn
index 3041a5ed..abb9030a 100644
--- a/examples/component-showcase/app/pages/components/rating.wrn
+++ b/examples/component-showcase/app/pages/components/rating.wrn
@@ -152,7 +152,7 @@ page RatingDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-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-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-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-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="Rating example" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="A polished default rating for a modern application." /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "rating-0-1",
     "key": "rating-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page RatingDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "rating-0-2",
     "key": "rating-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page RatingDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/scrollspy.wrn b/examples/component-showcase/app/pages/components/scrollspy.wrn
index 66c40564..221de88a 100644
--- a/examples/component-showcase/app/pages/components/scrollspy.wrn
+++ b/examples/component-showcase/app/pages/components/scrollspy.wrn
@@ -151,7 +151,7 @@ page ScrollspyDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-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-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-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-scrollspy-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "scrollspy-0-1",
     "key": "scrollspy-0-1",
     "value": "primary",
@@ -180,31 +180,31 @@ page ScrollspyDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "scrollspy-0-2",
     "key": "scrollspy-0-2",
     "value": "secondary",
@@ -233,30 +233,30 @@ page ScrollspyDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-heading"><span><strong>heading</strong><small>string</small></span><input id="playground-scrollspy-heading" name="pg_heading" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/select.wrn b/examples/component-showcase/app/pages/components/select.wrn
index 4fab97d8..f33d7714 100644
--- a/examples/component-showcase/app/pages/components/select.wrn
+++ b/examples/component-showcase/app/pages/components/select.wrn
@@ -275,7 +275,7 @@ page SelectDetail {
         <form class="playground-controls" data-playground-form>
           <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-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-select-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-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-select-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-select-id"><span><strong>id</strong><small>string</small></span><input id="playground-select-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-select-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-select-label" name="pg_label" type="text" value="Select" /></label><label class="playground-toggle" for="playground-select-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-select-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-select-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-select-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "select-0-1",
     "key": "select-0-1",
     "value": "primary",
@@ -304,31 +304,31 @@ page SelectDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "select-0-2",
     "key": "select-0-2",
     "value": "secondary",
@@ -357,32 +357,32 @@ page SelectDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "select-0-1",
     "key": "select-0-1",
     "value": "primary",
@@ -411,31 +411,31 @@ page SelectDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "select-0-2",
     "key": "select-0-2",
     "value": "secondary",
@@ -464,30 +464,30 @@ page SelectDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-select-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-select-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-select-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-select-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-select-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-select-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-select-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-select-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-select-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-select-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-select-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-select-error"><span><strong>error</strong><small>string</small></span><input id="playground-select-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-select-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-select-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-select-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-select-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/sidebar.wrn b/examples/component-showcase/app/pages/components/sidebar.wrn
index 3bdc3afe..40880878 100644
--- a/examples/component-showcase/app/pages/components/sidebar.wrn
+++ b/examples/component-showcase/app/pages/components/sidebar.wrn
@@ -156,7 +156,7 @@ page SidebarDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-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-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-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-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "sidebar-0-1",
     "key": "sidebar-0-1",
     "value": "primary",
@@ -185,31 +185,31 @@ page SidebarDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "sidebar-0-2",
     "key": "sidebar-0-2",
     "value": "secondary",
@@ -238,30 +238,30 @@ page SidebarDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-sidebar-mobileLabel" name="pg_mobileLabel" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-drawerTitle"><span><strong>drawer Title</strong><small>string</small></span><input id="playground-sidebar-drawerTitle" name="pg_drawerTitle" type="text" value="Sidebar example" /></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/split-hero.wrn b/examples/component-showcase/app/pages/components/split-hero.wrn
index 9bdc2f00..b3873da4 100644
--- a/examples/component-showcase/app/pages/components/split-hero.wrn
+++ b/examples/component-showcase/app/pages/components/split-hero.wrn
@@ -305,7 +305,7 @@ page SplitHeroDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>31 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-split-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-split-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-split-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="icon-[lucide--sparkles]" /></label><label class="playground-field" for="playground-split-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-split-hero-title" name="pg_title" type="text" value="Split Hero example" /></label><label class="playground-field" for="playground-split-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-split-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-split-hero-description" name="pg_description" type="text" value="A polished default split hero for a modern application." /></label><label class="playground-field" for="playground-split-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-split-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Split Hero" /></label><label class="playground-field" for="playground-split-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-split-hero-primaryHref" name="pg_primaryHref" type="text" value="#split-hero-demo" /></label><label class="playground-field" for="playground-split-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-split-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-split-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Split Hero" /></label><label class="playground-field" for="playground-split-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-split-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#split-hero-demo" /></label><label class="playground-field" for="playground-split-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-split-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-split-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-toggle" for="playground-split-hero-reverse"><span><strong>reverse</strong><small>boolean</small></span><input id="playground-split-hero-reverse" name="pg_reverse" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-split-hero-ratio"><span><strong>ratio</strong><small>string</small></span><select id="playground-split-hero-ratio" name="pg_ratio"><option value="balanced" selected>balanced</option><option value="content">content</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-split-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-split-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-split-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-split-hero-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-split-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-split-hero-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-split-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-split-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-split-hero-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-split-hero-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-split-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-split-hero-fullBleed" name="pg_fullBleed" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-split-hero-backgroundImage"><span><strong>background Image</strong><small>string</small></span><input id="playground-split-hero-backgroundImage" name="pg_backgroundImage" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-split-hero-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualAlt"><span><strong>visual Alt</strong><small>string</small></span><input id="playground-split-hero-visualAlt" name="pg_visualAlt" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualIcon"><span><strong>visual Icon</strong><small>string</small></span><input id="playground-split-hero-visualIcon" name="pg_visualIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-split-hero-visualEyebrow" name="pg_visualEyebrow" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualTitle"><span><strong>visual Title</strong><small>string</small></span><input id="playground-split-hero-visualTitle" name="pg_visualTitle" type="text" value="Split Hero example" /></label><label class="playground-field" for="playground-split-hero-visualDescription"><span><strong>visual Description</strong><small>string</small></span><input id="playground-split-hero-visualDescription" name="pg_visualDescription" type="text" value="A polished default split hero for a modern application." /></label><label class="playground-field" for="playground-split-hero-visualItems"><span><strong>visual Items</strong><small>unknown[]</small></span><textarea id="playground-split-hero-visualItems" name="pg_visualItems" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "split-hero-0-1",
     "key": "split-hero-0-1",
     "value": "primary",
@@ -334,31 +334,31 @@ page SplitHeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "split-hero-0-2",
     "key": "split-hero-0-2",
     "value": "secondary",
@@ -387,32 +387,32 @@ page SplitHeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-split-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><input id="playground-split-hero-visualStyle" name="pg_visualStyle" type="text" value="panel" /></label><label class="playground-field" for="playground-split-hero-trustItems"><span><strong>trust Items</strong><small>unknown[]</small></span><textarea id="playground-split-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "split-hero-0-1",
     "key": "split-hero-0-1",
     "value": "primary",
@@ -441,31 +441,31 @@ page SplitHeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "split-hero-0-2",
     "key": "split-hero-0-2",
     "value": "secondary",
@@ -494,30 +494,30 @@ page SplitHeroDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-split-hero-class"><span><strong>class</strong><small>string</small></span><input id="playground-split-hero-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/stats-bar.wrn b/examples/component-showcase/app/pages/components/stats-bar.wrn
index 0172e161..059dc19d 100644
--- a/examples/component-showcase/app/pages/components/stats-bar.wrn
+++ b/examples/component-showcase/app/pages/components/stats-bar.wrn
@@ -154,34 +154,34 @@ page StatsBarDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>10 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-stats-bar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-stats-bar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "label": "Composite components",
     "value": "18",
     "description": "Reusable public-page building blocks",
     "icon": "icon-[lucide--blocks]",
     "color": "primary"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Rendering",
     "value": "SSR",
     "description": "Server-first WRNexusJS rendering",
     "icon": "icon-[lucide--server]",
     "color": "info"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Responsive",
     "value": "Yes",
     "description": "Mobile, tablet, and desktop layouts",
     "icon": "icon-[lucide--monitor-smartphone]",
     "color": "success"
-  },
-  {
+  &#125;,
+  &#123;
     "label": "Theme aware",
     "value": "Yes",
     "description": "Active theme and accent palettes",
     "icon": "icon-[lucide--palette]",
     "color": "warning"
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stats-bar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-stats-bar-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-toggle" for="playground-stats-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-stats-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-stats-bar-dividers" name="pg_dividers" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-icons"><span><strong>icons</strong><small>boolean</small></span><input id="playground-stats-bar-icons" name="pg_icons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stats-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-stats-bar-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-stats-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-stats-bar-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-stats-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-stats-bar-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option><option value="minimal">minimal</option><option value="solid">solid</option></select></label><label class="playground-field" for="playground-stats-bar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-stats-bar-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-stats-bar-class"><span><strong>class</strong><small>string</small></span><input id="playground-stats-bar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/stepper.wrn b/examples/component-showcase/app/pages/components/stepper.wrn
index da2ccae9..0aa41b2a 100644
--- a/examples/component-showcase/app/pages/components/stepper.wrn
+++ b/examples/component-showcase/app/pages/components/stepper.wrn
@@ -155,7 +155,7 @@ page StepperDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-stepper-color"><span><strong>color</strong><small>string</small></span><select id="playground-stepper-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-stepper-size"><span><strong>size</strong><small>string</small></span><select id="playground-stepper-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-stepper-steps"><span><strong>steps</strong><small>unknown[]</small></span><textarea id="playground-stepper-steps" name="pg_steps" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "stepper-0-1",
     "key": "stepper-0-1",
     "value": "primary",
@@ -184,31 +184,31 @@ page StepperDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "stepper-0-2",
     "key": "stepper-0-2",
     "value": "secondary",
@@ -237,30 +237,30 @@ page StepperDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stepper-active"><span><strong>active</strong><small>number</small></span><input id="playground-stepper-active" name="pg_active" type="number" value="0" /></label><label class="playground-field" for="playground-stepper-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-stepper-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-stepper-clickable"><span><strong>clickable</strong><small>boolean</small></span><input id="playground-stepper-clickable" name="pg_clickable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stepper-label"><span><strong>label</strong><small>string</small></span><input id="playground-stepper-label" name="pg_label" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-class"><span><strong>class</strong><small>string</small></span><input id="playground-stepper-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/styled-icon.wrn b/examples/component-showcase/app/pages/components/styled-icon.wrn
index b710ecb3..04362bd0 100644
--- a/examples/component-showcase/app/pages/components/styled-icon.wrn
+++ b/examples/component-showcase/app/pages/components/styled-icon.wrn
@@ -152,7 +152,7 @@ page StyledIconDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-styled-icon-size"><span><strong>size</strong><small>string</small></span><select id="playground-styled-icon-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-styled-icon-color"><span><strong>color</strong><small>string</small></span><select id="playground-styled-icon-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-styled-icon-title"><span><strong>title</strong><small>string</small></span><input id="playground-styled-icon-title" name="pg_title" type="text" value="Styled Icon example" /></label><label class="playground-field" for="playground-styled-icon-description"><span><strong>description</strong><small>string</small></span><input id="playground-styled-icon-description" name="pg_description" type="text" value="A polished default styled icon for a modern application." /></label><label class="playground-field" for="playground-styled-icon-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-styled-icon-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "styled-icon-0-1",
     "key": "styled-icon-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page StyledIconDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "styled-icon-0-2",
     "key": "styled-icon-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page StyledIconDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-styled-icon-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-styled-icon-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-styled-icon-class"><span><strong>class</strong><small>string</small></span><input id="playground-styled-icon-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/tabs.wrn b/examples/component-showcase/app/pages/components/tabs.wrn
index bc90c6e9..a834d587 100644
--- a/examples/component-showcase/app/pages/components/tabs.wrn
+++ b/examples/component-showcase/app/pages/components/tabs.wrn
@@ -155,7 +155,7 @@ page TabsDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>9 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-tabs-color"><span><strong>color</strong><small>string</small></span><select id="playground-tabs-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-tabs-size"><span><strong>size</strong><small>string</small></span><select id="playground-tabs-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-tabs-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-tabs-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "tabs-0-1",
     "key": "tabs-0-1",
     "value": "primary",
@@ -184,31 +184,31 @@ page TabsDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "tabs-0-2",
     "key": "tabs-0-2",
     "value": "secondary",
@@ -237,30 +237,30 @@ page TabsDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-tabs-active"><span><strong>active</strong><small>string</small></span><input id="playground-tabs-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-tabs-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-tabs-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-tabs-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-tabs-mode" name="pg_mode" type="text" value="client" /></label><label class="playground-field" for="playground-tabs-param"><span><strong>param</strong><small>string</small></span><input id="playground-tabs-param" name="pg_param" type="text" value="tab" /></label><label class="playground-field" for="playground-tabs-label"><span><strong>label</strong><small>string</small></span><input id="playground-tabs-label" name="pg_label" type="text" value="Tabs" /></label><label class="playground-field" for="playground-tabs-class"><span><strong>class</strong><small>string</small></span><input id="playground-tabs-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/timeline.wrn b/examples/component-showcase/app/pages/components/timeline.wrn
index e6336e94..b23fc912 100644
--- a/examples/component-showcase/app/pages/components/timeline.wrn
+++ b/examples/component-showcase/app/pages/components/timeline.wrn
@@ -152,7 +152,7 @@ page TimelineDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-timeline-size"><span><strong>size</strong><small>string</small></span><select id="playground-timeline-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</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-timeline-color"><span><strong>color</strong><small>string</small></span><select id="playground-timeline-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-timeline-title"><span><strong>title</strong><small>string</small></span><input id="playground-timeline-title" name="pg_title" type="text" value="Timeline example" /></label><label class="playground-field" for="playground-timeline-description"><span><strong>description</strong><small>string</small></span><input id="playground-timeline-description" name="pg_description" type="text" value="A polished default timeline for a modern application." /></label><label class="playground-field" for="playground-timeline-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-timeline-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "timeline-0-1",
     "key": "timeline-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page TimelineDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "timeline-0-2",
     "key": "timeline-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page TimelineDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/toast-notifications.wrn b/examples/component-showcase/app/pages/components/toast-notifications.wrn
index 101e4378..0117fe8f 100644
--- a/examples/component-showcase/app/pages/components/toast-notifications.wrn
+++ b/examples/component-showcase/app/pages/components/toast-notifications.wrn
@@ -152,7 +152,7 @@ page ToastNotificationsDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-toast-notifications-size"><span><strong>size</strong><small>string</small></span><select id="playground-toast-notifications-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-toast-notifications-color"><span><strong>color</strong><small>string</small></span><select id="playground-toast-notifications-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-toast-notifications-title"><span><strong>title</strong><small>string</small></span><input id="playground-toast-notifications-title" name="pg_title" type="text" value="Toast Notifications example" /></label><label class="playground-field" for="playground-toast-notifications-description"><span><strong>description</strong><small>string</small></span><input id="playground-toast-notifications-description" name="pg_description" type="text" value="A polished default toast notifications for a modern application." /></label><label class="playground-field" for="playground-toast-notifications-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-toast-notifications-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "toast-notifications-0-1",
     "key": "toast-notifications-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ToastNotificationsDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "toast-notifications-0-2",
     "key": "toast-notifications-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ToastNotificationsDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toast-notifications-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-toast-notifications-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-toast-notifications-class"><span><strong>class</strong><small>string</small></span><input id="playground-toast-notifications-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/toast.wrn b/examples/component-showcase/app/pages/components/toast.wrn
index 0565b55c..e27e0602 100644
--- a/examples/component-showcase/app/pages/components/toast.wrn
+++ b/examples/component-showcase/app/pages/components/toast.wrn
@@ -152,7 +152,7 @@ page ToastDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-toast-size"><span><strong>size</strong><small>string</small></span><select id="playground-toast-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-toast-color"><span><strong>color</strong><small>string</small></span><select id="playground-toast-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-toast-title"><span><strong>title</strong><small>string</small></span><input id="playground-toast-title" name="pg_title" type="text" value="Toast example" /></label><label class="playground-field" for="playground-toast-description"><span><strong>description</strong><small>string</small></span><input id="playground-toast-description" name="pg_description" type="text" value="A polished default toast for a modern application." /></label><label class="playground-field" for="playground-toast-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-toast-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "toast-0-1",
     "key": "toast-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page ToastDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "toast-0-2",
     "key": "toast-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page ToastDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toast-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-toast-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-toast-class"><span><strong>class</strong><small>string</small></span><input id="playground-toast-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/toggle-count.wrn b/examples/component-showcase/app/pages/components/toggle-count.wrn
index 4046f97b..0e7d9850 100644
--- a/examples/component-showcase/app/pages/components/toggle-count.wrn
+++ b/examples/component-showcase/app/pages/components/toggle-count.wrn
@@ -172,7 +172,7 @@ page ToggleCountDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>23 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-toggle-count-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-toggle-count-variant" name="pg_variant" type="text" value="segmented" /></label><label class="playground-field" for="playground-toggle-count-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-count-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-toggle-count-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-count-name" name="pg_name" type="text" value="billing-cycle" /></label><label class="playground-field" for="playground-toggle-count-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-count-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-toggle-count-firstValue"><span><strong>first Value</strong><small>string</small></span><input id="playground-toggle-count-firstValue" name="pg_firstValue" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-firstLabel"><span><strong>first Label</strong><small>string</small></span><input id="playground-toggle-count-firstLabel" name="pg_firstLabel" type="text" value="Toggle Count" /></label><label class="playground-field" for="playground-toggle-count-secondValue"><span><strong>second Value</strong><small>string</small></span><input id="playground-toggle-count-secondValue" name="pg_secondValue" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-secondLabel"><span><strong>second Label</strong><small>string</small></span><input id="playground-toggle-count-secondLabel" name="pg_secondLabel" type="text" value="Toggle Count" /></label><label class="playground-field" for="playground-toggle-count-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-toggle-count-ariaLabel" name="pg_ariaLabel" type="text" value="Toggle Count 1 example" /></label><label class="playground-field" for="playground-toggle-count-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-toggle-count-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "toggle-count-0-1",
     "key": "toggle-count-0-1",
     "value": "primary",
@@ -201,31 +201,31 @@ page ToggleCountDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "toggle-count-0-2",
     "key": "toggle-count-0-2",
     "value": "secondary",
@@ -254,30 +254,30 @@ page ToggleCountDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toggle-count-currency"><span><strong>currency</strong><small>string</small></span><input id="playground-toggle-count-currency" name="pg_currency" type="text" value="$" /></label><label class="playground-field" for="playground-toggle-count-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-toggle-count-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-firstValueKey"><span><strong>first Value Key</strong><small>string</small></span><input id="playground-toggle-count-firstValueKey" name="pg_firstValueKey" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-secondValueKey"><span><strong>second Value Key</strong><small>string</small></span><input id="playground-toggle-count-secondValueKey" name="pg_secondValueKey" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-emptyValue"><span><strong>empty Value</strong><small>string</small></span><input id="playground-toggle-count-emptyValue" name="pg_emptyValue" type="text" value="—" /></label><label class="playground-field" for="playground-toggle-count-align"><span><strong>align</strong><small>string</small></span><select id="playground-toggle-count-align" name="pg_align"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-toggle-count-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-toggle-count-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-count-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-animate"><span><strong>animate</strong><small>boolean</small></span><input id="playground-toggle-count-animate" name="pg_animate" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-count-animationDuration"><span><strong>animation Duration</strong><small>number</small></span><input id="playground-toggle-count-animationDuration" name="pg_animationDuration" type="number" value="450" /></label><label class="playground-field" for="playground-toggle-count-animationSteps"><span><strong>animation Steps</strong><small>number</small></span><input id="playground-toggle-count-animationSteps" name="pg_animationSteps" type="number" value="18" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/tree-view.wrn b/examples/component-showcase/app/pages/components/tree-view.wrn
index 6ca427dd..7ba9b54e 100644
--- a/examples/component-showcase/app/pages/components/tree-view.wrn
+++ b/examples/component-showcase/app/pages/components/tree-view.wrn
@@ -152,7 +152,7 @@ page TreeViewDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-tree-view-size"><span><strong>size</strong><small>string</small></span><select id="playground-tree-view-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-tree-view-color"><span><strong>color</strong><small>string</small></span><select id="playground-tree-view-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-tree-view-title"><span><strong>title</strong><small>string</small></span><input id="playground-tree-view-title" name="pg_title" type="text" value="Tree View example" /></label><label class="playground-field" for="playground-tree-view-description"><span><strong>description</strong><small>string</small></span><input id="playground-tree-view-description" name="pg_description" type="text" value="A polished default tree view for a modern application." /></label><label class="playground-field" for="playground-tree-view-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-tree-view-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "tree-view-0-1",
     "key": "tree-view-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page TreeViewDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "tree-view-0-2",
     "key": "tree-view-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page TreeViewDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-tree-view-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-tree-view-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-tree-view-class"><span><strong>class</strong><small>string</small></span><input id="playground-tree-view-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn
index 4c4d6380..adfba02e 100644
--- a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn
+++ b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn
@@ -152,7 +152,7 @@ page WysiwygEditorDetail {
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 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-wysiwyg-editor-size"><span><strong>size</strong><small>string</small></span><select id="playground-wysiwyg-editor-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-wysiwyg-editor-color"><span><strong>color</strong><small>string</small></span><select id="playground-wysiwyg-editor-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-wysiwyg-editor-title"><span><strong>title</strong><small>string</small></span><input id="playground-wysiwyg-editor-title" name="pg_title" type="text" value="Wysiwyg Editor example" /></label><label class="playground-field" for="playground-wysiwyg-editor-description"><span><strong>description</strong><small>string</small></span><input id="playground-wysiwyg-editor-description" name="pg_description" type="text" value="A polished default wysiwyg editor for a modern application." /></label><label class="playground-field" for="playground-wysiwyg-editor-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-wysiwyg-editor-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
-  {
+  &#123;
     "id": "wysiwyg-editor-0-1",
     "key": "wysiwyg-editor-0-1",
     "value": "primary",
@@ -181,31 +181,31 @@ page WysiwygEditorDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 1",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  },
-  {
+  &#125;,
+  &#123;
     "id": "wysiwyg-editor-0-2",
     "key": "wysiwyg-editor-0-2",
     "value": "secondary",
@@ -234,30 +234,30 @@ page WysiwygEditorDetail {
     "target": "_self",
     "ariaLabel": "Open primary workflow 2",
     "items": [
-      {
+      &#123;
         "label": "Nested option A",
         "value": "nested-a"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "Nested option B",
         "value": "nested-b"
-      }
+      &#125;
     ],
     "links": [
-      {
+      &#123;
         "label": "Documentation",
         "href": "#documentation"
-      },
-      {
+      &#125;,
+      &#123;
         "label": "API reference",
         "href": "#api-reference"
-      }
+      &#125;
     ],
     "values": [
       "Included",
       "Standard"
     ]
-  }
+  &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-wysiwyg-editor-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-wysiwyg-editor-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-wysiwyg-editor-class"><span><strong>class</strong><small>string</small></span><input id="playground-wysiwyg-editor-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
diff --git a/examples/component-showcase/app/pages/navigation.wrn b/examples/component-showcase/app/pages/navigation.wrn
index 7f4d84fd..91c1a97a 100644
--- a/examples/component-showcase/app/pages/navigation.wrn
+++ b/examples/component-showcase/app/pages/navigation.wrn
@@ -56,7 +56,7 @@ page NavigationShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Navbar size="default" 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"]}' 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"]},{"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><Navbar size="default" 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"]})' 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"]},{"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"]}]' 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"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p></div>
diff --git a/examples/component-showcase/scripts/generate-showcase.mjs b/examples/component-showcase/scripts/generate-showcase.mjs
index adadf44a..9f93b8e5 100644
--- a/examples/component-showcase/scripts/generate-showcase.mjs
+++ b/examples/component-showcase/scripts/generate-showcase.mjs
@@ -83,6 +83,15 @@ const escapeText = (value) =>
  */
 const escapeCode = (value) =>
   escapeText(value).replaceAll("{", "<span>&#123;</span>").replaceAll("}", "<span>&#125;</span>");
+/*
+ * JSON for a textarea. Entities keep the braces away from the WRN compiler,
+ * which would otherwise read them as interpolation and fail the page build,
+ * while the browser decodes them so the reader still sees valid JSON. The
+ * span trick used for code samples cannot be used here: a textarea shows its
+ * markup literally.
+ */
+const escapeTextareaJson = (value) =>
+  escapeText(value).replaceAll("{", "&#123;").replaceAll("}", "&#125;");
 const escapeAttribute = (value) =>
   escapeText(value).replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 
@@ -418,7 +427,13 @@ function sampleValue(prop, component, variation) {
 function wrnAttribute(name, value) {
   if (typeof value === "object" && value !== null) {
     const expression = JSON.stringify(value).replaceAll("'", "\\u0027");
-    return `${name}='${expression}'`;
+    /*
+     * An object literal has to be parenthesised. A bare {...} at the start of
+     * an attribute is read as an interpolation, so the compiler tried to parse
+     * the JSON as JavaScript and stopped at the first colon. Arrays start with
+     * [ and were never affected, which is why only object props broke.
+     */
+    return `${name}='${Array.isArray(value) ? expression : `(${expression})`}'`;
   }
   return `${name}="${escapeAttribute(String(value))}"`;
 }
@@ -653,7 +668,7 @@ function playgroundControl(prop, component) {
     prop.type === "object" ||
     prop.type.includes("[]");
   if (structured) {
-    return `<label class="playground-field" for="${id}"><span><strong>${label}</strong>${meta}</span><textarea id="${id}" name="pg_${escapeAttribute(prop.name)}" rows="5" spellcheck="false" data-playground-json>${escapeText(value)}</textarea><em data-playground-error></em></label>`;
+    return `<label class="playground-field" for="${id}"><span><strong>${label}</strong>${meta}</span><textarea id="${id}" name="pg_${escapeAttribute(prop.name)}" rows="5" spellcheck="false" data-playground-json>${escapeTextareaJson(value)}</textarea><em data-playground-error></em></label>`;
   }
 
   const options = playgroundOptions(prop, component, value);
diff --git a/packages/csr/src/reactive-runtime.ts b/packages/csr/src/reactive-runtime.ts
index ebb99d25..132b7850 100644
--- a/packages/csr/src/reactive-runtime.ts
+++ b/packages/csr/src/reactive-runtime.ts
@@ -2360,6 +2360,11 @@ export const REACTIVE_RUNTIME = String.raw`
     while ((textNode = walker.nextNode())) {
       var template = textNode.nodeValue;
       if (template.indexOf("{") === -1) continue;
+      // Text in these is data, not a template: a JSON sample sitting in a
+      // textarea would otherwise be read as mustaches and eaten.
+      var owner = textNode.parentNode;
+      var ownerName = owner ? owner.nodeName : "";
+      if (ownerName === "TEXTAREA" || ownerName === "SCRIPT" || ownerName === "STYLE") continue;
       if (!owns(textNode)) continue;
       (function (node, tpl) {
         reactive(function () {
diff --git a/packages/csr/test/reactive.test.ts b/packages/csr/test/reactive.test.ts
index 25ea5c2b..4cfacea2 100644
--- a/packages/csr/test/reactive.test.ts
+++ b/packages/csr/test/reactive.test.ts
@@ -1052,3 +1052,18 @@ test("an empty or false roving attribute opts the group out entirely", () => {
   a.dispatchEvent(keydown(win, "ArrowRight"));
   expect(doc.activeElement!.id).toBe("a");
 });
+
+test("json inside a textarea is left alone, not read as mustaches", () => {
+  const win = mount(
+    `<div data-scope="count: 7">
+       <textarea id="editor">{"id":"a-1","count":3}</textarea>
+       <span id="out">{count}</span>
+     </div>`,
+  );
+  const doc = win.document;
+  // The surrounding scope still interpolates normally...
+  expect(doc.querySelector("#out")!.textContent).toBe("7");
+  // ...but the textarea holds data, and an expression engine would have
+  // evaluated {"id":"a-1","count":3} away and left it empty.
+  expect(doc.querySelector("#editor")!.textContent).toBe('{"id":"a-1","count":3}');
+});
diff --git a/packages/ui/components/Navbar.wrn b/packages/ui/components/Navbar.wrn
index 20dbe442..662b6cca 100644
--- a/packages/ui/components/Navbar.wrn
+++ b/packages/ui/components/Navbar.wrn
@@ -140,4 +140,440 @@ size: string = "default"
       </div>
     </header>
   }
+
+  style {
+    /* Full application navigation */
+    .wire-navbar {
+      position: relative;
+      z-index: 40;
+      width: 100%;
+      color: var(--wire-color-text);
+      background: color-mix(in srgb, var(--wire-color-surface) 96%, transparent);
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-navbar--sticky {
+      position: sticky;
+      top: 0;
+      backdrop-filter: blur(16px);
+    }
+
+    .wire-navbar__topbar:empty,
+    .wire-navbar__topbar:not(:has(*)) {
+      display: none;
+    }
+
+    .wire-navbar__topbar:not(:empty) {
+      display: flex;
+      min-height: 2.25rem;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.35rem clamp(1rem, 4vw, 3rem);
+      color: var(--wire-color-muted);
+      background: var(--wire-color-surface-2);
+      border-bottom: 1px solid var(--wire-color-border);
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+
+    .wire-navbar__main {
+      display: flex;
+      min-height: 4.25rem;
+      width: min(100%, 90rem);
+      margin-inline: auto;
+      padding: 0.75rem clamp(1rem, 4vw, 3rem);
+      align-items: center;
+      gap: 1.5rem;
+    }
+
+    .wire-navbar--width-full .wire-navbar__main {
+      width: 100%;
+      max-width: none;
+    }
+
+    .wire-navbar--width-compact .wire-navbar__main {
+      width: min(86%, 80rem);
+    }
+
+    .wire-navbar__brand,
+    .wire-navbar__menu-link,
+    .wire-navbar__dropdown summary,
+    .wire-navbar__action,
+    .wire-navbar__panel a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .wire-navbar__brand {
+      display: inline-flex;
+      min-width: 0;
+      align-items: center;
+      gap: 0.75rem;
+      flex: 0 0 auto;
+    }
+
+    .wire-navbar__brand-logo {
+      display: block;
+      width: auto;
+      max-width: 11rem;
+      height: 2.5rem;
+      object-fit: contain;
+    }
+
+    .wire-navbar__brand-icon {
+      width: 2.5rem;
+      height: 2.5rem;
+      color: var(--wire-component-color, var(--wire-color-primary));
+    }
+
+    .wire-navbar__brand-copy {
+      display: grid;
+      min-width: 0;
+      line-height: 1.2;
+    }
+
+    .wire-navbar__brand-copy strong {
+      font-size: 0.9rem;
+      font-weight: 600;
+    }
+
+    .wire-navbar__brand-copy small {
+      margin-top: 0.2rem;
+      color: var(--wire-color-muted);
+      font-size: 0.6875rem;
+      font-weight: 400;
+    }
+
+    .wire-navbar__collapse,
+    .wire-navbar__menus,
+    .wire-navbar__actions {
+      display: flex;
+      align-items: center;
+    }
+
+    .wire-navbar__collapse {
+      min-width: 0;
+      flex: 1;
+      gap: 1rem;
+    }
+
+    .wire-navbar__menus {
+      justify-content: center;
+      flex: 1;
+      gap: 0.25rem;
+    }
+
+    .wire-navbar__actions {
+      justify-content: flex-end;
+      gap: 0.5rem;
+    }
+
+    .wire-navbar__menu-link,
+    .wire-navbar__dropdown > summary,
+    .wire-navbar__action {
+      display: inline-flex;
+      min-height: 2.75rem;
+      padding: 0.65rem 0.8rem;
+      align-items: center;
+      gap: 0.45rem;
+      border-radius: 0.65rem;
+      cursor: pointer;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    .wire-navbar__menu-link:hover,
+    .wire-navbar__dropdown > summary:hover {
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-2);
+    }
+
+    .wire-navbar__menu-link[aria-current="page"],
+    .wire-navbar__dropdown > summary[aria-current="page"] {
+      color: var(--wire-component-color, var(--wire-color-primary));
+      font-weight: 600;
+      background: color-mix(
+        in srgb,
+        var(--wire-component-color, var(--wire-color-primary)) 12%,
+        transparent
+      );
+      box-shadow: inset 0 -2px 0 var(--wire-component-color, var(--wire-color-primary));
+    }
+
+    .wire-navbar__menu-link[aria-current="page"]:hover,
+    .wire-navbar__dropdown > summary[aria-current="page"]:hover {
+      color: var(--wire-component-color, var(--wire-color-primary));
+      background: color-mix(
+        in srgb,
+        var(--wire-component-color, var(--wire-color-primary)) 16%,
+        transparent
+      );
+    }
+
+    .wire-navbar__dropdown {
+      position: relative;
+    }
+
+    .wire-navbar__dropdown > summary {
+      list-style: none;
+    }
+
+    .wire-navbar__dropdown > summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .wire-navbar__chevron {
+      width: 0.45rem;
+      height: 0.45rem;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      transform: rotate(45deg) translateY(-0.15rem);
+      transition: transform var(--wire-motion-fast, 150ms) ease;
+    }
+
+    .wire-navbar__dropdown[open] .wire-navbar__chevron {
+      transform: rotate(225deg) translate(-0.1rem, -0.1rem);
+    }
+
+    .wire-navbar__panel {
+      position: absolute;
+      top: calc(100% + 0.55rem);
+      left: 50%;
+      display: grid;
+      width: max-content;
+      min-width: 15rem;
+      max-width: min(90vw, 64rem);
+      padding: 0.65rem;
+      gap: 0.45rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.9rem;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+      box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
+      opacity: 1;
+      transform: translateX(-50%) translateY(0) scale(1);
+      transform-origin: top center;
+      transition:
+        opacity 180ms ease,
+        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
+        display 180ms allow-discrete;
+    }
+
+    .wire-navbar__panel::before {
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+      left: 0;
+      height: 0.65rem;
+      content: "";
+    }
+
+    .wire-navbar__dropdown:not([open]) > .wire-navbar__panel {
+      display: none;
+      opacity: 0;
+      transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
+    }
+
+    @starting-style {
+      .wire-navbar__dropdown[open] > .wire-navbar__panel {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
+      }
+    }
+
+    .wire-navbar__dropdown--mega {
+      position: static;
+    }
+
+    .wire-navbar__dropdown--mega .wire-navbar__panel {
+      right: auto;
+      left: 50%;
+      width: min(calc(100vw - 2rem), 64rem);
+    }
+
+    .wire-navbar__panel--columns-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .wire-navbar__panel--columns-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .wire-navbar__panel--columns-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .wire-navbar__panel-intro {
+      grid-column: 1 / -1;
+      margin: 0;
+      padding: 0.5rem 0.65rem;
+      color: var(--wire-color-muted);
+      font-size: 0.8125rem;
+      font-weight: 400;
+    }
+
+    .wire-navbar__group {
+      display: grid;
+      align-content: start;
+      gap: 0.25rem;
+    }
+
+    .wire-navbar__group-title {
+      padding: 0.55rem 0.65rem 0.25rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .wire-navbar__group > small {
+      padding: 0 0.65rem 0.4rem;
+      color: var(--wire-color-muted);
+      font-size: 0.7rem;
+      font-weight: 400;
+    }
+
+    .wire-navbar__panel a {
+      display: flex;
+      min-height: 2.75rem;
+      padding: 0.65rem;
+      align-items: flex-start;
+      gap: 0.65rem;
+      border-radius: 0.6rem;
+      font-size: 0.8rem;
+      font-weight: 450;
+    }
+
+    .wire-navbar__panel a:hover {
+      background: var(--wire-color-surface-2);
+    }
+
+    .wire-navbar__panel a span:last-child {
+      display: grid;
+      gap: 0.15rem;
+    }
+
+    .wire-navbar__panel a strong {
+      font-weight: 500;
+    }
+
+    .wire-navbar__panel a small {
+      color: var(--wire-color-muted);
+      font-size: 0.7rem;
+      font-weight: 400;
+    }
+
+    .wire-navbar__action {
+      border: 1px solid transparent;
+    }
+
+    .wire-navbar__action--primary {
+      color: var(--wire-color-on-primary, #fff);
+      background: var(--wire-component-color, var(--wire-color-primary));
+      font-weight: 600;
+    }
+
+    .wire-navbar__action--outline {
+      border-color: var(--wire-color-border);
+    }
+
+    .wire-navbar__toggle {
+      display: none;
+      width: 2.75rem;
+      height: 2.75rem;
+      margin-left: auto;
+      padding: 0.65rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.65rem;
+      color: inherit;
+      background: var(--wire-color-surface);
+    }
+
+    .wire-navbar__toggle span {
+      display: block;
+      height: 2px;
+      margin: 0.25rem 0;
+      background: currentColor;
+    }
+
+    @media (max-width: 900px) {
+    .wire-navbar--width-compact .wire-navbar__main {
+        width: 100%;
+      }
+    .wire-navbar__toggle {
+        display: block;
+      }
+    .wire-navbar__collapse {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: 0;
+        display: none;
+        padding: 0.75rem 1rem 1rem;
+        align-items: stretch;
+        flex-direction: column;
+        background: var(--wire-color-surface);
+        border-bottom: 1px solid var(--wire-color-border);
+        box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
+        max-height: calc(100dvh - 4rem);
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+    .wire-navbar__collapse.is-open {
+        display: flex;
+      }
+    .wire-navbar__menus,
+      .wire-navbar__actions {
+        width: 100%;
+        align-items: stretch;
+        flex-direction: column;
+      }
+    .wire-navbar__menu-link,
+      .wire-navbar__dropdown > summary,
+      .wire-navbar__action {
+        width: 100%;
+      }
+    .wire-navbar__panel,
+      .wire-navbar__dropdown--mega .wire-navbar__panel {
+        position: static;
+        width: 100%;
+        max-width: none;
+        margin-top: 0.25rem;
+        box-shadow: none;
+        transform: none;
+        overflow: hidden;
+        animation: wire-navbar-mobile-panel 180ms ease both;
+      }
+    .wire-navbar__dropdown:not([open]) > .wire-navbar__panel,
+      .wire-navbar__dropdown[open] > .wire-navbar__panel {
+        transform: none;
+      }
+    .wire-navbar__panel[class*="wire-navbar__panel--columns-"] {
+        grid-template-columns: 1fr;
+      }
+    .wire-navbar__panel::before {
+        display: none;
+      }
+    }
+
+    @media (max-width: 600px) {
+    .wire-navbar__brand-copy small {
+        display: none;
+      }
+    }
+
+    @keyframes wire-navbar-mobile-panel {
+      from {
+        opacity: 0;
+        transform: translateY(-0.35rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
 }
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 4b2331e3..830e865c 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -436,10 +436,17 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toContain(".wire-next--field");
   expect(css).toContain('[data-show="false"]');
   expect(css).toContain("display: none !important");
-  expect(css).toMatch(
+  /*
+   * Navbar styles now ship with the component rather than from ui.css, so the
+   * whole navigation group follows one convention. The rules themselves are
+   * unchanged; only where they live moved.
+   */
+  const navbarSource = readFileSync(uiComponentPath("Navbar"), "utf8");
+  expect(css).not.toContain(".wire-navbar");
+  expect(navbarSource).toMatch(
     /\.wire-navbar__brand-copy strong\s*\{[^}]*font-size: 0\.9rem;[^}]*font-weight: 600;/s,
   );
-  expect(css).toMatch(
+  expect(navbarSource).toMatch(
     /\.wire-navbar__menu-link,[\s\S]*?font-size: 0\.8125rem;[\s\S]*?font-weight: 500;/,
   );
   expect(css).toMatch(
diff --git a/packages/ui/ui.css b/packages/ui/ui.css
index 9d2c304f..a52ac5cf 100644
--- a/packages/ui/ui.css
+++ b/packages/ui/ui.css
@@ -14,7 +14,6 @@
 [data-show="undefined"] {
   display: none !important;
 }
-
 /*
  * Universal component configuration. Every canonical component exposes
  * `color` and `size`, while theme, mode, and font flow through inherited
@@ -65,7 +64,6 @@
 .wire-next :is(a, button, input, select, textarea):focus-visible {
   outline-color: var(--wire-component-color);
 }
-
 /* --- Layout --------------------------------------------------------------- */
 .wire-container {
   width: 100%;
@@ -93,7 +91,6 @@
   border-top: 1px solid var(--wire-color-border);
   margin: 0;
 }
-
 /* gap scale (shared by stack / hstack / grid) */
 .wire-gap-0 {
   gap: 0;
@@ -119,7 +116,6 @@
 .wire-gap-8 {
   gap: 3rem;
 }
-
 .wire-items-start {
   align-items: flex-start;
 }
@@ -132,7 +128,6 @@
 .wire-items-stretch {
   align-items: stretch;
 }
-
 .wire-cols-1 {
   grid-template-columns: repeat(1, 1fr);
 }
@@ -156,7 +151,6 @@
     grid-template-columns: 1fr;
   }
 }
-
 /* --- Button --------------------------------------------------------------- */
 .wire-action {
   position: relative;
@@ -195,7 +189,6 @@
   outline: 2px solid var(--wire-color-primary);
   outline-offset: 2px;
 }
-
 .wire-btn--color-primary {
   --wire-btn-color: var(--wire-color-primary);
   --wire-btn-contrast: var(--wire-color-primary-contrast);
@@ -313,7 +306,6 @@
   transform: none;
   box-shadow: none;
 }
-
 .wire-btn--size-xs,
 .wire-btn--xs {
   min-height: 1.5rem;
@@ -429,7 +421,6 @@
   opacity: 1;
   transform: translate(-50%, 0);
 }
-
 /* --- Inputs --------------------------------------------------------------- */
 .wire-input {
   width: 100%;
@@ -452,7 +443,6 @@
   resize: vertical;
   min-height: 4.5rem;
 }
-
 /* Validation states (set by /__wrnexus/validate.js). */
 .wire-invalid {
   border-color: var(--wire-color-danger) !important;
@@ -464,7 +454,6 @@
   color: var(--wire-color-danger);
   font-size: 0.8rem;
 }
-
 .wire-check {
   display: inline-flex;
   align-items: center;
@@ -483,7 +472,6 @@
 .wire-check__label {
   color: var(--wire-color-text);
 }
-
 /* --- Badge ---------------------------------------------------------------- */
 .wire-badge {
   display: inline-flex;
@@ -514,7 +502,6 @@
   background: var(--wire-color-warning);
   color: var(--wire-color-primary-contrast);
 }
-
 /* --- Alert ---------------------------------------------------------------- */
 .wire-alert {
   border: 1px solid var(--wire-color-border);
@@ -592,7 +579,6 @@
 .wire-alert__dismiss:hover {
   background: color-mix(in srgb, currentColor 8%, transparent);
 }
-
 /* --- Card ----------------------------------------------------------------- */
 .wire-card {
   background: var(--wire-color-surface);
@@ -630,7 +616,6 @@
   border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
   box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 11%, transparent);
 }
-
 /* --- Avatar --------------------------------------------------------------- */
 .wire-avatar {
   width: 2.5rem;
@@ -639,7 +624,6 @@
   object-fit: cover;
   border: 1px solid var(--wire-color-border);
 }
-
 /* --- Avatar -------------------------------------------------------------- */
 .wire-next--avatar {
   display: inline-flex;
@@ -647,11 +631,9 @@
   max-width: 100%;
   align-items: center;
 }
-
 .wire-next--avatar-media {
   gap: 0.8rem;
 }
-
 .wire-next__avatar-wrap {
   --wire-avatar-size: 3rem;
   --wire-avatar-color: var(--wire-color-primary);
@@ -664,7 +646,6 @@
   border-radius: 999px;
   outline: none;
 }
-
 .wire-next__avatar-wrap[data-size="xs"] {
   --wire-avatar-size: 1.75rem;
 }
@@ -681,7 +662,6 @@
 .wire-next__avatar-wrap[data-size="xl"] {
   --wire-avatar-size: 5rem;
 }
-
 .wire-next__avatar-wrap[data-color="secondary"] {
   --wire-avatar-color: #737373;
 }
@@ -703,7 +683,6 @@
 .wire-next__avatar-wrap[data-color="dark"] {
   --wire-avatar-color: #27272a;
 }
-
 .wire-next__avatar {
   display: grid;
   width: 100%;
@@ -718,56 +697,47 @@
     0 0 0 2px var(--wire-color-bg),
     0 5px 14px rgb(0 0 0 / 0.16);
 }
-
 .wire-next__avatar-wrap[data-shape="rounded"] {
   border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
 }
-
 .wire-next__avatar-wrap[data-shape="square"] {
   border-radius: 0;
 }
-
 .wire-next__avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
 .wire-next__avatar-initials {
   font-size: calc(var(--wire-avatar-size) * 0.32);
   font-weight: 750;
   line-height: 1;
   letter-spacing: -0.02em;
 }
-
 .wire-next__avatar-placeholder {
   width: 54%;
   height: 54%;
   color: currentColor;
   opacity: 0.72;
 }
-
 .wire-next__avatar-wrap[data-variant="soft"] .wire-next__avatar {
   color: var(--wire-avatar-color);
   border-color: transparent;
   background: color-mix(in srgb, var(--wire-avatar-color) 15%, var(--wire-color-surface));
   box-shadow: none;
 }
-
 .wire-next__avatar-wrap[data-variant="outline"] .wire-next__avatar {
   color: var(--wire-avatar-color);
   border-color: var(--wire-avatar-color);
   background: transparent;
   box-shadow: none;
 }
-
 .wire-next__avatar-wrap[data-variant="white"] .wire-next__avatar {
   color: var(--wire-color-text);
   border-color: var(--wire-color-border);
   background: var(--wire-color-surface);
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
 }
-
 .wire-next__avatar-status {
   position: absolute;
   right: -0.04rem;
@@ -779,12 +749,10 @@
   border-radius: 999px;
   background: var(--wire-color-muted);
 }
-
 .wire-next__avatar-wrap[data-status-position="top"] .wire-next__avatar-status {
   top: -0.04rem;
   bottom: auto;
 }
-
 .wire-next__avatar-status[data-status="online"],
 .wire-next__avatar-status[data-status="success"] {
   background: #14cba8;
@@ -797,7 +765,6 @@
 .wire-next__avatar-status[data-status="warning"] {
   background: #ffc400;
 }
-
 .wire-next__avatar-badge {
   position: absolute;
   right: -0.25rem;
@@ -813,17 +780,14 @@
   background: #27272a;
   box-shadow: 0 4px 10px rgb(0 0 0 / 0.22);
 }
-
 .wire-next__avatar-badge > span {
   width: 62%;
   height: 62%;
 }
-
 .wire-next__avatar-badge--text {
   font-size: calc(var(--wire-avatar-size) * 0.18);
   font-weight: 800;
 }
-
 .wire-next__avatar-tooltip {
   position: absolute;
   left: 50%;
@@ -846,7 +810,6 @@
     opacity var(--wire-motion-fast) var(--wire-ease-standard),
     transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__avatar-tooltip::after {
   content: "";
   position: absolute;
@@ -856,29 +819,24 @@
   border-top-color: var(--wire-color-text);
   transform: translateX(-50%);
 }
-
 .wire-next__avatar-wrap:hover .wire-next__avatar-tooltip,
 .wire-next__avatar-wrap:focus-visible .wire-next__avatar-tooltip {
   opacity: 1;
   transform: translate(-50%, 0);
 }
-
 .wire-next__avatar-wrap:focus-visible {
   outline: 2px solid var(--wire-avatar-color);
   outline-offset: 4px;
 }
-
 .wire-next__avatar-copy {
   display: grid;
   min-width: 0;
   gap: 0.15rem;
 }
-
 .wire-next__avatar-copy strong {
   color: var(--wire-color-text);
   font-size: 0.9rem;
 }
-
 .wire-next__avatar-copy > span {
   overflow: hidden;
   color: var(--wire-color-muted);
@@ -886,7 +844,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 /* --- Avatar group -------------------------------------------------------- */
 .wire-next--avatar-group {
   --wire-avatar-group-size: 3rem;
@@ -895,7 +852,6 @@
   width: fit-content;
   max-width: 100%;
 }
-
 .wire-next--avatar-group[data-size="xs"] {
   --wire-avatar-group-size: 1.75rem;
 }
@@ -912,27 +868,22 @@
 .wire-next--avatar-group[data-size="xl"] {
   --wire-avatar-group-size: 5rem;
 }
-
 .wire-next__avatar-group-members {
   display: flex;
   align-items: center;
 }
-
 .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member,
 .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow {
   margin-left: calc(var(--wire-avatar-group-size) * -0.22);
 }
-
 .wire-next--avatar-group[data-layout="stack"] :first-child {
   margin-left: 0;
 }
-
 .wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members {
   display: grid;
   grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size));
   gap: 0.65rem;
 }
-
 .wire-next__avatar-group-member,
 .wire-next__avatar-group-overflow {
   --wire-avatar-group-color: var(--wire-color-primary);
@@ -948,7 +899,6 @@
     z-index var(--wire-motion-fast),
     transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
-
 .wire-next__avatar-group-member[data-color="secondary"] {
   --wire-avatar-group-color: #737373;
 }
@@ -964,11 +914,9 @@
 .wire-next__avatar-group-member[data-color="danger"] {
   --wire-avatar-group-color: var(--wire-color-danger);
 }
-
 .wire-next__avatar-group-member[data-shape="rounded"] {
   border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
 }
-
 .wire-next__avatar-group-avatar,
 .wire-next__avatar-group-overflow-button {
   display: grid;
@@ -985,33 +933,28 @@
   font-size: calc(var(--wire-avatar-group-size) * 0.3);
   font-weight: 800;
 }
-
 .wire-next__avatar-group-avatar img,
 .wire-next__avatar-group-menu-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
 .wire-next__avatar-group-overflow-button {
   cursor: pointer;
   color: var(--wire-color-text);
   background: var(--wire-color-surface-2);
 }
-
 .wire-next__avatar-group-member:hover,
 .wire-next__avatar-group-member:focus-visible,
 .wire-next__avatar-group-overflow:focus-within {
   z-index: 5;
   transform: translateY(-3px);
 }
-
 .wire-next__avatar-group-member:focus-visible,
 .wire-next__avatar-group-overflow-button:focus-visible {
   outline: 2px solid var(--wire-color-primary);
   outline-offset: 3px;
 }
-
 .wire-next__avatar-group-tooltip {
   position: absolute;
   left: 50%;
@@ -1033,13 +976,11 @@
     opacity var(--wire-motion-fast),
     transform var(--wire-motion-fast);
 }
-
 .wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip,
 .wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip {
   opacity: 1;
   transform: translate(-50%, 0);
 }
-
 .wire-next__avatar-group-menu {
   position: absolute;
   top: calc(100% + 0.65rem);
@@ -1056,7 +997,6 @@
   background: var(--wire-color-surface);
   box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
 }
-
 .wire-next__avatar-group-menu-item {
   display: flex;
   align-items: center;
@@ -1065,11 +1005,9 @@
   border-radius: 0.4rem;
   font-size: 0.82rem;
 }
-
 .wire-next__avatar-group-menu-item:hover {
   background: var(--wire-color-surface-2);
 }
-
 .wire-next__avatar-group-menu-avatar {
   display: grid;
   width: 1.75rem;
@@ -1082,7 +1020,6 @@
   font-size: 0.65rem;
   font-weight: 800;
 }
-
 /* --- Spinner -------------------------------------------------------------- */
 .wire-spinner {
   display: inline-block;
@@ -1098,7 +1035,6 @@
     transform: rotate(360deg);
   }
 }
-
 /* --- Disclosure ----------------------------------------------------------- */
 .wire-disclosure {
   border: 1px solid var(--wire-color-border);
@@ -1118,7 +1054,6 @@
   padding: 0 0.9rem 0.75rem;
   color: var(--wire-color-muted);
 }
-
 /* --- Select --------------------------------------------------------------- */
 .wire-select {
   appearance: none;
@@ -1134,7 +1069,6 @@
   background-repeat: no-repeat;
   padding-right: 2rem;
 }
-
 /* --- Switch --------------------------------------------------------------- */
 .wire-switch {
   display: inline-flex;
@@ -1180,7 +1114,6 @@
 .wire-switch__label {
   color: var(--wire-color-text);
 }
-
 /* --- Progress ------------------------------------------------------------- */
 .wire-progress {
   appearance: none;
@@ -1201,7 +1134,6 @@
 .wire-progress::-moz-progress-bar {
   background: var(--wire-color-primary);
 }
-
 /* --- Tag ------------------------------------------------------------------ */
 .wire-tag {
   display: inline-flex;
@@ -1236,7 +1168,6 @@
   color: #201400;
   border-color: transparent;
 }
-
 /* --- Skeleton ------------------------------------------------------------- */
 .wire-skeleton {
   display: inline-block;
@@ -1258,7 +1189,6 @@
     background-position: 0 50%;
   }
 }
-
 /* --- Tooltip -------------------------------------------------------------- */
 .wire-tooltip {
   position: relative;
@@ -1286,7 +1216,6 @@
 .wire-tooltip:focus-visible::after {
   opacity: 1;
 }
-
 /* --- Table ---------------------------------------------------------------- */
 .wire-table-wrap {
   overflow-x: auto;
@@ -1326,7 +1255,6 @@
   outline: 2px solid var(--wire-color-primary);
   outline-offset: 2px;
 }
-
 /* --- Component-system foundations --------------------------------------- */
 .wire-type {
   margin: 0;
@@ -1363,7 +1291,6 @@
 .wire-text--end {
   text-align: end;
 }
-
 .wire-form {
   display: grid;
   gap: 1.25rem;
@@ -1421,7 +1348,6 @@
   width: 1rem;
   height: 1rem;
 }
-
 .wire-overlay {
   position: fixed;
   inset: 0;
@@ -1462,7 +1388,6 @@
 .wire-dialog__actions--wrap {
   flex-wrap: wrap;
 }
-
 .wire-filter-bar {
   display: flex;
   align-items: end;
@@ -1486,7 +1411,6 @@
 .wire-comparison-table {
   min-width: 42rem;
 }
-
 .wire-desktop-nav > ul,
 .wire-mobile-nav ul,
 .wire-mega-menu ul {
@@ -1564,7 +1488,6 @@
   border-radius: var(--wire-radius);
   box-shadow: var(--wire-shadow-1);
 }
-
 .wire-page-shell {
   width: 100%;
   min-width: 0;
@@ -1589,7 +1512,6 @@
   min-width: 0;
   max-width: 52rem;
 }
-
 .wire-product-card,
 .wire-metric {
   padding: clamp(1rem, 3vw, 1.5rem);
@@ -1649,7 +1571,6 @@
   font-size: 0.875rem;
   line-height: 1.5;
 }
-
 .wire-sdk-tabs__panel {
   overflow-x: auto;
   border: 1px solid var(--wire-color-border);
@@ -1702,7 +1623,6 @@
   color: var(--wire-color-muted);
   line-height: 1.4;
 }
-
 @media (max-width: 768px) {
   .wire-desktop-nav {
     display: none;
@@ -1723,7 +1643,6 @@
     position: static;
   }
 }
-
 /* --- Complete catalog composition patterns ----------------------------- */
 .wire-catalog-action {
   display: inline-flex;
@@ -1732,7 +1651,6 @@
 .wire-catalog-action > :only-child {
   min-width: 0;
 }
-
 /* Authentication compositions intentionally mirror the polished identity
  * experience: compact hierarchy, generous controls, and token-driven color. */
 .wire-auth-card {
@@ -1775,7 +1693,6 @@
 .wire-auth-card > .wire-catalog-card__image {
   margin-bottom: 1.25rem;
 }
-
 .wire-auth-action {
   display: flex;
   width: 100%;
@@ -1852,7 +1769,6 @@
 .wire-auth-action > :where(a, button):hover .wire-auth-action__arrow {
   transform: translateX(0.25rem);
 }
-
 .wire-auth-field {
   display: grid;
   gap: 0.5rem;
@@ -1863,7 +1779,6 @@
   display: flex;
   align-items: center;
 }
-
 .wire-public-header-action {
   display: inline-flex;
   min-height: 2.5rem;
@@ -2032,7 +1947,6 @@
   object-fit: cover;
   border-radius: calc(var(--wire-radius) * 0.75);
 }
-
 @media (max-width: 480px) {
   .wire-catalog-action,
   .wire-catalog-action > :where(a, button) {
@@ -2047,7 +1961,6 @@
     border-radius: var(--wire-radius) var(--wire-radius) 0 0;
   }
 }
-
 /* --- Motion system -------------------------------------------------------
  * Applies to both Tailwind-authored and token-authored components. Motion is
  * intentionally limited to composited properties so interaction stays fluid.
@@ -2059,7 +1972,6 @@
   --wire-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 /* Tailwind v4 color bridge. Define the aliases at the document root so both
  * packaged components and application-authored pages/components inherit the
  * palette selected in wrnexus.config.ts. */
@@ -2106,7 +2018,6 @@
   --color-rose-600: var(--wire-color-danger);
   --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black);
 }
-
 /* Stable semantic helpers for application-authored markup. These deliberately
  * avoid spacing so applications remain in control of their own layout. */
 .wire-bg-page {
@@ -2147,45 +2058,36 @@
 .wire-border {
   border-color: var(--wire-color-border);
 }
-
 [data-component] {
   animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both;
 }
-
 [data-component]
   :where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]) {
   transition-property: color, background-color, border-color, opacity, box-shadow, transform;
   transition-duration: var(--wire-motion-base);
   transition-timing-function: var(--wire-ease-standard);
 }
-
 [data-component] :where(input, select, textarea, .wire-input, .wire-select) {
   transition-duration: var(--wire-motion-fast);
 }
-
 [data-component] :where(.wire-card, .wire-panel, .wire-surface, .wire-catalog-card, article) {
   transition-property: border-color, background-color, box-shadow, transform;
   transition-duration: var(--wire-motion-base);
   transition-timing-function: var(--wire-ease-emphasized);
 }
-
 [data-component] :where(.wire-overlay, [role="dialog"]) {
   animation: wire-overlay-enter var(--wire-motion-base) var(--wire-ease-standard) both;
 }
-
 [data-component] :where(.wire-dialog, [role="dialog"] > :first-child) {
   animation: wire-dialog-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both;
 }
-
 [data-component] :where([role="menu"], [role="listbox"], [role="tooltip"], .wire-mega-menu__panel) {
   transform-origin: top center;
   animation: wire-popover-enter var(--wire-motion-base) var(--wire-ease-emphasized) both;
 }
-
 [data-component] :where([role="progressbar"], progress) {
   transition: inline-size var(--wire-motion-slow) var(--wire-ease-emphasized);
 }
-
 @media (hover: hover) and (pointer: fine) {
   [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):hover {
     transform: translateY(-1px);
@@ -2196,30 +2098,25 @@
     box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.12);
   }
 }
-
 /* --- Screenshot-directed canonical component set ------------------------- */
 .wire-next {
   margin: 0;
   color: var(--wire-color-text);
   font-family: var(--wrn-font-sans, inherit);
 }
-
 .wire-next--rounded,
 .wire-next--image img {
   border-radius: var(--wire-radius-md);
 }
-
 .wire-next--container {
   width: min(100%, 72rem);
   margin-inline: auto;
 }
-
 .wire-next--columns,
 .wire-next--grid {
   display: grid;
   grid-template-columns: repeat(var(--wire-next-columns, 2), minmax(0, 1fr));
 }
-
 .wire-next--columns-1 {
   --wire-next-columns: 1;
 }
@@ -2241,19 +2138,16 @@
 .wire-next--gap-lg {
   gap: 1.5rem;
 }
-
 .wire-next--layout-splitter {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 }
-
 .wire-next--custom-scrollbar {
   max-height: 24rem;
   overflow: auto;
   scrollbar-color: var(--wire-color-primary) transparent;
   scrollbar-width: thin;
 }
-
 .wire-next--link {
   display: inline-flex;
   align-items: center;
@@ -2261,7 +2155,6 @@
   color: var(--wire-color-primary);
   text-underline-offset: 0.2em;
 }
-
 .wire-next--divider {
   display: flex;
   align-items: center;
@@ -2280,7 +2173,6 @@
   min-height: 4rem;
   background: var(--wire-color-border);
 }
-
 .wire-next--kbd {
   display: inline-flex;
   min-width: 1.8rem;
@@ -2292,7 +2184,6 @@
   background: var(--wire-color-surface-2);
   font-size: 0.75rem;
 }
-
 .wire-next--button-group {
   display: inline-flex;
   align-items: stretch;
@@ -2300,33 +2191,26 @@
   max-width: 100%;
   isolation: isolate;
 }
-
 .wire-next--button-group[data-orientation="vertical"] {
   flex-direction: column;
 }
-
 .wire-next--button-group[data-attached="false"] {
   gap: 0.5rem;
 }
-
 .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
   position: relative;
   margin: 0;
 }
-
 .wire-next--button-group[data-attached="true"] > .wire-action {
   display: flex;
 }
-
 .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
   height: 100%;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
   > :is(.wire-btn, .wire-action):not(:first-child) {
   margin-inline-start: -1px;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
   > .wire-btn:not(:first-child):not(:last-child),
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
@@ -2334,7 +2218,6 @@
   > .wire-btn {
   border-radius: 0;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
   > .wire-btn:first-child:not(:last-child),
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
@@ -2343,7 +2226,6 @@
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
   > .wire-btn:last-child:not(:first-child),
 .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
@@ -2352,12 +2234,10 @@
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
   > :is(.wire-btn, .wire-action):not(:first-child) {
   margin-top: -1px;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
   > .wire-btn:not(:first-child):not(:last-child),
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
@@ -2365,7 +2245,6 @@
   > .wire-btn {
   border-radius: 0;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
   > .wire-btn:first-child:not(:last-child),
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
@@ -2374,7 +2253,6 @@
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
   > .wire-btn:last-child:not(:first-child),
 .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
@@ -2383,24 +2261,20 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-
 .wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
 .wire-next--button-group > .wire-btn:focus-visible {
   z-index: 2;
 }
-
 .wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
   z-index: 1;
   border-color: var(--wire-component-color);
   background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
   color: var(--wire-component-color);
 }
-
 .wire-next--button-group[data-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.6;
 }
-
 @media (max-width: 480px) {
   .wire-next--button-group[data-responsive="true"] {
     display: flex;
@@ -2450,7 +2324,6 @@
     border-end-end-radius: var(--wire-radius-sm);
   }
 }
-
 .wire-next--toast,
 .wire-next--device-frame,
 .wire-next--tree-view,
@@ -2478,7 +2351,6 @@
   background: var(--wire-color-surface);
   box-shadow: var(--wire-shadow-1);
 }
-
 .wire-next--collapse {
   --wire-collapse-color: var(--wire-component-color, var(--wire-color-primary));
   display: grid;
@@ -2487,20 +2359,17 @@
   gap: 0.75rem;
   color: var(--wire-color-text);
 }
-
 .wire-next--device-frame > header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
 }
-
 .wire-next__device-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
 }
-
 .wire-next__device-actions button {
   min-height: 2.25rem;
   padding-inline: 0.7rem;
@@ -2509,7 +2378,6 @@
   background: var(--wire-color-surface-2);
   color: inherit;
 }
-
 .wire-next__device-shell {
   overflow: hidden;
   width: min(100%, 24rem);
@@ -2520,42 +2388,35 @@
   background: var(--wire-color-background);
   transition: width var(--wire-motion-normal) var(--wire-ease-standard);
 }
-
 .wire-next--device-frame[data-device="tablet"] .wire-next__device-shell {
   width: min(100%, 42rem);
 }
-
 .wire-next--device-frame[data-device="desktop"] .wire-next__device-shell {
   width: 100%;
   border-width: 0.4rem;
   border-radius: var(--wire-radius-md);
 }
-
 .wire-next--device-frame[data-orientation="landscape"] .wire-next__device-shell {
   width: min(100%, 48rem);
   min-height: 20rem;
 }
-
 .wire-next__device-shell :is(iframe, .wire-next__device-content) {
   width: 100%;
   min-height: inherit;
   border: 0;
 }
-
 @media (max-width: 640px) {
   .wire-next--device-frame > header {
     align-items: stretch;
     flex-direction: column;
   }
 }
-
 .wire-next__collapse-item {
   display: grid;
   min-width: 0;
   justify-items: start;
   gap: 0;
 }
-
 .wire-next__collapse-trigger {
   display: inline-flex;
   min-height: 2.75rem;
@@ -2571,25 +2432,20 @@
   font-weight: 700;
   cursor: pointer;
 }
-
 .wire-next__collapse-trigger:focus-visible {
   outline: 2px solid var(--wire-collapse-color);
   outline-offset: 3px;
 }
-
 .wire-next__collapse-trigger:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-
 .wire-next__collapse-chevron {
   transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron {
   transform: rotate(180deg);
 }
-
 .wire-next__collapse-panel {
   width: min(100%, 42rem);
   max-height: 0;
@@ -2601,13 +2457,11 @@
     margin-top 300ms var(--wire-ease-emphasized),
     opacity 200ms var(--wire-ease-standard);
 }
-
 .wire-next__collapse-panel[data-open="true"] {
   max-height: 40rem;
   margin-top: 0.75rem;
   opacity: 1;
 }
-
 .wire-next__collapse-content {
   display: grid;
   overflow: hidden;
@@ -2618,43 +2472,35 @@
   border-radius: var(--wire-radius-md);
   background: var(--wire-color-surface-raised, var(--wire-color-surface));
 }
-
 .wire-next__collapse-content h4,
 .wire-next__collapse-content p,
 .wire-next__collapse-preview {
   margin: 0;
 }
-
 .wire-next__collapse-content nav {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
 }
-
 .wire-next__collapse-content a {
   color: var(--wire-collapse-color);
   font-weight: 650;
   text-decoration: none;
 }
-
 .wire-next--collapse[data-mode="inline"] .wire-next__collapse-item {
   gap: 0;
 }
-
 .wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview {
   order: 1;
   margin-bottom: 0.5rem;
 }
-
 .wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel {
   order: 2;
   width: 100%;
 }
-
 .wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] {
   margin-top: 0;
 }
-
 .wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger {
   order: 3;
   margin-top: 0.5rem;
@@ -2665,28 +2511,23 @@
   background: transparent;
   color: var(--wire-collapse-color);
 }
-
 .wire-next--collapse[data-mode="inline"] .wire-next__collapse-content {
   padding: 0;
   border: 0;
   background: transparent;
 }
-
 .wire-next--collapse.wire-next--size-sm {
   font-size: 0.875rem;
 }
-
 .wire-next--collapse.wire-next--size-lg {
   font-size: 1.0625rem;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .wire-next__collapse-chevron,
   .wire-next__collapse-panel {
     transition: none;
   }
 }
-
 .wire-next--chat-bubble {
   --wire-chat-color: var(--wire-component-color, var(--wire-color-primary));
   --wire-chat-padding: 1rem;
@@ -2696,35 +2537,29 @@
   gap: 1rem;
   color: var(--wire-color-text);
 }
-
 .wire-next--chat-bubble.wire-next--size-sm {
   --wire-chat-padding: 0.75rem;
   font-size: 0.875rem;
 }
-
 .wire-next--chat-bubble.wire-next--size-lg {
   --wire-chat-padding: 1.25rem;
   font-size: 1.0625rem;
 }
-
 .wire-next__chat-header h3,
 .wire-next__chat-header p,
 .wire-next__chat-content h4,
 .wire-next__chat-content p {
   margin: 0;
 }
-
 .wire-next__chat-header p {
   margin-top: 0.35rem;
   color: var(--wire-color-text-muted);
 }
-
 .wire-next__chat-thread {
   display: grid;
   min-width: 0;
   gap: 1.25rem;
 }
-
 .wire-next__chat-message {
   display: grid;
   width: min(78%, 34rem);
@@ -2732,32 +2567,26 @@
   justify-self: start;
   gap: 0.4rem;
 }
-
 .wire-next__chat-message[data-direction="outgoing"] {
   justify-self: end;
 }
-
 .wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message {
   justify-self: start;
 }
-
 .wire-next__chat-row {
   display: flex;
   min-width: 0;
   align-items: flex-start;
   gap: 0.75rem;
 }
-
 .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row {
   flex-direction: row-reverse;
 }
-
 .wire-next--chat-bubble[data-one-sided="true"]
   .wire-next__chat-message[data-direction="outgoing"]
   .wire-next__chat-row {
   flex-direction: row;
 }
-
 .wire-next__chat-content {
   min-width: 0;
   padding: var(--wire-chat-padding);
@@ -2767,56 +2596,46 @@
   color: var(--wire-color-text);
   cursor: pointer;
 }
-
 .wire-next__chat-content:focus-visible {
   outline: 2px solid var(--wire-chat-color);
   outline-offset: 2px;
 }
-
 .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content {
   border-color: var(--wire-chat-color);
   background: var(--wire-chat-color);
   color: var(--wire-color-primary-contrast, #fff);
 }
-
 .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) {
   color: inherit;
 }
-
 .wire-next__chat-content h4 {
   margin-bottom: 0.65rem;
   font-size: 1em;
 }
-
 .wire-next__chat-content p + p,
 .wire-next__chat-content p + nav {
   margin-top: 0.75rem;
 }
-
 .wire-next__chat-content ul {
   display: grid;
   margin: 0.55rem 0 0;
   padding-inline-start: 1.25rem;
   gap: 0.35rem;
 }
-
 .wire-next__chat-content nav {
   display: grid;
   margin-top: 0.75rem;
   gap: 0.3rem;
 }
-
 .wire-next__chat-content a {
   color: var(--wire-chat-color);
   font-weight: 650;
   text-decoration: none;
 }
-
 .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a {
   color: inherit;
   text-decoration: underline;
 }
-
 .wire-next__chat-avatar {
   display: grid;
   flex: 0 0 2.5rem;
@@ -2831,18 +2650,15 @@
   cursor: pointer;
   place-items: center;
 }
-
 .wire-next__chat-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
 .wire-next__chat-avatar:focus-visible {
   outline: 2px solid var(--wire-chat-color);
   outline-offset: 2px;
 }
-
 .wire-next__chat-meta {
   display: flex;
   align-items: center;
@@ -2851,15 +2667,12 @@
   color: var(--wire-color-text-muted);
   font-size: 0.78em;
 }
-
 .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta {
   justify-content: flex-end;
 }
-
 .wire-next__chat-meta[data-tone="danger"] {
   color: var(--wire-color-danger);
 }
-
 .wire-next__chat-meta button {
   padding: 0;
   border: 0;
@@ -2870,7 +2683,6 @@
   cursor: pointer;
   text-decoration: underline;
 }
-
 @media (max-width: 640px) {
   .wire-next__chat-message {
     width: min(92%, 34rem);
@@ -2886,7 +2698,6 @@
     padding-inline: 0;
   }
 }
-
 .wire-next--card {
   --wire-card-color: var(--wire-component-color, var(--wire-color-primary));
   --wire-card-padding: 1.25rem;
@@ -2894,7 +2705,6 @@
   width: 100%;
   color: var(--wire-color-text);
 }
-
 .wire-next--carousel {
   --wire-carousel-color: var(--wire-component-color, var(--wire-color-primary));
   display: grid;
@@ -2903,35 +2713,29 @@
   gap: 1rem;
   color: var(--wire-color-text);
 }
-
 .wire-next__carousel-header h3,
 .wire-next__carousel-header p {
   margin: 0;
 }
-
 .wire-next__carousel-header p {
   margin-top: 0.35rem;
   color: var(--wire-color-text-muted);
 }
-
 .wire-next__carousel-layout {
   display: flex;
   min-width: 0;
   gap: 0.75rem;
 }
-
 .wire-next__carousel-main {
   display: grid;
   flex: 1;
   min-width: 0;
   gap: 0.75rem;
 }
-
 .wire-next__carousel-stage {
   position: relative;
   min-width: 0;
 }
-
 .wire-next__carousel-viewport {
   position: relative;
   overflow: hidden;
@@ -2941,11 +2745,9 @@
   background: var(--wire-color-surface-subtle, var(--wire-color-surface));
   outline: none;
 }
-
 .wire-next__carousel-viewport:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent);
 }
-
 .wire-next__carousel-track {
   display: flex;
   align-items: stretch;
@@ -2963,11 +2765,9 @@
   translate: var(--wire-carousel-drag-offset, 0) 0;
   will-change: transform;
 }
-
 .wire-next--carousel[data-dragging="true"] .wire-next__carousel-track {
   transition: none;
 }
-
 .wire-next--carousel[data-rtl="true"] .wire-next__carousel-track {
   transform: translateX(
     calc(
@@ -2979,7 +2779,6 @@
     )
   );
 }
-
 .wire-next__carousel-slide {
   position: relative;
   display: grid;
@@ -2994,36 +2793,29 @@
   place-items: center;
   background: var(--wire-color-surface-raised, var(--wire-color-surface));
 }
-
 .wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide {
   min-height: 0;
 }
-
 .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide {
   flex-basis: min(78%, 32rem);
 }
-
 .wire-next--carousel[data-centered="true"] .wire-next__carousel-track {
   box-sizing: border-box;
   transform: translateX(
     calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap)))
   );
 }
-
 .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child {
   margin-inline-start: calc((100% - min(78%, 32rem)) / 2);
 }
-
 .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child {
   margin-inline-end: calc((100% - min(78%, 32rem)) / 2);
 }
-
 .wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track {
   transform: translateX(
     calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap)))
   );
 }
-
 .wire-next__carousel-slide > img {
   position: absolute;
   width: 100%;
@@ -3031,7 +2823,6 @@
   object-fit: cover;
   inset: 0;
 }
-
 .wire-next__carousel-slide-content {
   position: relative;
   z-index: 1;
@@ -3039,21 +2830,17 @@
   padding: clamp(2rem, 8vw, 5rem);
   text-align: center;
 }
-
 .wire-next__carousel-slide-content h4,
 .wire-next__carousel-slide-content p {
   margin: 0;
 }
-
 .wire-next__carousel-slide-content h4 {
   font-size: clamp(1.5rem, 4vw, 2.4rem);
 }
-
 .wire-next__carousel-slide-content p {
   margin-top: 0.65rem;
   color: var(--wire-color-text-muted);
 }
-
 .wire-next__carousel-control {
   position: absolute;
   z-index: 3;
@@ -3070,37 +2857,30 @@
   place-items: center;
   transform: translateY(-50%);
 }
-
 .wire-next__carousel-control:focus-visible,
 .wire-next__carousel-pagination button:focus-visible,
 .wire-next__carousel-thumbnails button:focus-visible {
   outline: 2px solid var(--wire-carousel-color);
   outline-offset: 2px;
 }
-
 .wire-next__carousel-control:disabled {
   cursor: not-allowed;
   opacity: 0.35;
 }
-
 .wire-next__carousel-control--previous {
   left: 1rem;
 }
-
 .wire-next__carousel-control--next {
   right: 1rem;
 }
-
 .wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous {
   right: 1rem;
   left: auto;
 }
-
 .wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next {
   right: auto;
   left: 1rem;
 }
-
 .wire-next__carousel-pagination {
   display: flex;
   min-height: 1.5rem;
@@ -3108,7 +2888,6 @@
   justify-content: center;
   gap: 0.5rem;
 }
-
 .wire-next__carousel-pagination button {
   width: 0.65rem;
   min-height: 0.65rem;
@@ -3118,12 +2897,10 @@
   background: transparent;
   cursor: pointer;
 }
-
 .wire-next__carousel-pagination button[data-active="true"] {
   border-color: var(--wire-carousel-color);
   background: var(--wire-carousel-color);
 }
-
 .wire-next__carousel-counter {
   position: absolute;
   z-index: 3;
@@ -3136,14 +2913,12 @@
   font-weight: 700;
   transform: translateX(-50%);
 }
-
 .wire-next__carousel-thumbnails {
   display: flex;
   overflow: auto;
   gap: 0.55rem;
   scrollbar-width: thin;
 }
-
 .wire-next__carousel-thumbnails button {
   display: grid;
   flex: 0 0 8.5rem;
@@ -3157,56 +2932,46 @@
   cursor: pointer;
   place-items: center;
 }
-
 .wire-next__carousel-thumbnails button[data-active="true"] {
   border-color: var(--wire-carousel-color);
   box-shadow: inset 0 0 0 1px var(--wire-carousel-color);
 }
-
 .wire-next__carousel-thumbnails img {
   width: 100%;
   height: 4rem;
   object-fit: cover;
 }
-
 .wire-next__carousel-thumbnails span {
   padding: 0.5rem;
 }
-
 .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
   flex: 0 0 9rem;
   flex-direction: column;
   max-height: 28rem;
 }
-
 .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
   flex-basis: 7.5rem;
   width: 100%;
 }
-
 .wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport {
   cursor: grab;
   touch-action: pan-y;
   user-select: none;
   -webkit-user-select: none;
 }
-
 .wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active {
   cursor: grabbing;
 }
-
 .wire-next--carousel[data-draggable="true"] img,
 .wire-next--carousel[data-draggable="true"] a {
   -webkit-user-drag: none;
 }
-
 .wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport {
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
   scrollbar-width: thin;
 }
-
 .wire-next--carousel[data-snap="true"] .wire-next__carousel-track {
   --wire-carousel-snap-slide: calc(
     (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
@@ -3221,13 +2986,11 @@
   padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2);
   transform: none;
 }
-
 .wire-next--carousel[data-snap="true"] .wire-next__carousel-slide {
   width: auto;
   min-width: 0;
   scroll-snap-align: center;
 }
-
 @media (max-width: 640px) {
   .wire-next__carousel-slide {
     flex-basis: 100%;
@@ -3249,21 +3012,17 @@
     width: auto;
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
   .wire-next__carousel-track {
     transition-duration: 0.01ms;
   }
 }
-
 .wire-next--card[data-size="sm"] {
   --wire-card-padding: 0.85rem;
 }
-
 .wire-next--card[data-size="lg"] {
   --wire-card-padding: 1.75rem;
 }
-
 .wire-next__card-panel {
   position: relative;
   display: flex;
@@ -3280,18 +3039,15 @@
     border-color var(--wire-motion-base) ease,
     box-shadow var(--wire-motion-base) var(--wire-ease-emphasized);
 }
-
 .wire-next--card[data-variant="top-border"] > .wire-next__card-panel,
 .wire-next--card[data-variant="accent"] > .wire-next__card-panel {
   border-top: 4px solid var(--wire-card-color);
 }
-
 .wire-next--card[data-hover="raise"] > .wire-next__card-panel:hover {
   border-color: color-mix(in srgb, var(--wire-card-color) 38%, var(--wire-color-border));
   box-shadow: var(--wire-shadow-3);
   transform: translateY(-4px);
 }
-
 .wire-next__card-header,
 .wire-next__card-footer {
   display: flex;
@@ -3303,22 +3059,18 @@
   color: var(--wire-color-muted);
   font-size: 0.875rem;
 }
-
 .wire-next__card-header {
   border-bottom: 1px solid var(--wire-color-border);
 }
-
 .wire-next__card-footer {
   margin-top: auto;
   border-top: 1px solid var(--wire-color-border);
 }
-
 .wire-next__card-header-actions {
   display: inline-flex;
   gap: 0.2rem;
   align-items: center;
 }
-
 .wire-next__card-header-actions button {
   display: inline-grid;
   width: 2rem;
@@ -3330,24 +3082,20 @@
   cursor: pointer;
   place-items: center;
 }
-
 .wire-next__card-header-actions button:hover {
   background: color-mix(in srgb, var(--wire-card-color) 12%, transparent);
   color: var(--wire-card-color);
 }
-
 .wire-next__card-header-actions button:focus-visible {
   outline: 2px solid var(--wire-card-color);
   outline-offset: 1px;
 }
-
 .wire-next__card-media {
   position: relative;
   overflow: hidden;
   min-height: 10rem;
   background: var(--wire-color-surface-2);
 }
-
 .wire-next__card-media > img {
   display: block;
   width: 100%;
@@ -3356,23 +3104,19 @@
   object-fit: cover;
   transition: transform 420ms var(--wire-ease-emphasized);
 }
-
 .wire-next--card[data-hover="image"] .wire-next__card-panel:hover .wire-next__card-media > img {
   transform: scale(1.06);
 }
-
 .wire-next__card-media--overlay {
   aspect-ratio: 16 / 9;
   min-height: 18rem;
 }
-
 .wire-next__card-media--overlay > img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
 }
-
 .wire-next__card-overlay {
   position: absolute;
   inset: 0;
@@ -3390,12 +3134,10 @@
   color: white;
   text-shadow: 0 1px 2px rgb(0 0 0 / 0.42);
 }
-
 .wire-next__card-overlay h3 {
   color: white;
   font-size: clamp(1.1rem, 2.2vw, 1.35rem);
 }
-
 .wire-next__card-overlay p {
   max-width: 48rem;
   color: #fff;
@@ -3405,25 +3147,21 @@
     0 1px 2px rgb(0 0 0 / 0.9),
     0 2px 8px rgb(0 0 0 / 0.62);
 }
-
 .wire-next__card-overlay .wire-next__card-subtitle {
   color: rgb(255 255 255 / 0.78);
 }
-
 .wire-next__card-overlay small {
   margin-top: auto;
   color: rgb(255 255 255 / 0.88);
   font-weight: 600;
   text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
 }
-
 .wire-next__card-body {
   display: grid;
   gap: 0.65rem;
   min-width: 0;
   padding: var(--wire-card-padding);
 }
-
 .wire-next__card-body[data-scrollable="true"] {
   max-height: var(--wire-card-max-height);
   overflow: auto;
@@ -3431,19 +3169,16 @@
   scrollbar-color: var(--wire-card-color) transparent;
   scrollbar-width: thin;
 }
-
 .wire-next__card-body h3,
 .wire-next__card-body p,
 .wire-next__card-overlay h3,
 .wire-next__card-overlay p {
   margin: 0;
 }
-
 .wire-next__card-body p {
   color: var(--wire-color-muted);
   line-height: 1.65;
 }
-
 .wire-next__card-subtitle {
   color: var(--wire-color-muted);
   font-size: 0.72rem;
@@ -3451,7 +3186,6 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-
 .wire-next__card-action {
   display: inline-flex;
   gap: 0.25rem;
@@ -3462,21 +3196,17 @@
   font-weight: 700;
   text-decoration: none;
 }
-
 .wire-next__card-action:hover {
   text-decoration: underline;
   text-underline-offset: 0.2em;
 }
-
 .wire-next__card-navigation {
   background: var(--wire-color-surface-2);
 }
-
 .wire-next__card-tabs {
   display: flex;
   overflow-x: auto;
 }
-
 .wire-next__card-tabs button {
   min-height: 3rem;
   flex: 1 0 auto;
@@ -3488,12 +3218,10 @@
   cursor: pointer;
   font-weight: 700;
 }
-
 .wire-next__card-tabs button[data-active="true"] {
   border-color: var(--wire-card-color);
   color: var(--wire-color-text);
 }
-
 .wire-next__card-navigation-select {
   display: none;
   width: calc(100% - 2rem);
@@ -3504,7 +3232,6 @@
   background: var(--wire-color-surface);
   color: var(--wire-color-text);
 }
-
 .wire-next__card-alert {
   display: flex;
   gap: 0.35rem;
@@ -3513,7 +3240,6 @@
   color: var(--wire-color-text);
   font-size: 0.875rem;
 }
-
 .wire-next__card-empty {
   display: grid;
   min-height: 12rem;
@@ -3521,51 +3247,41 @@
   place-content: center;
   place-items: center;
 }
-
 .wire-next__card-empty > span {
   margin-bottom: 0.75rem;
   font-size: 2.25rem;
 }
-
 .wire-next--card[data-align="center"] .wire-next__card-body {
   text-align: center;
   place-items: center;
 }
-
 .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel {
   display: grid;
   grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr);
 }
-
 .wire-next--card[data-layout="horizontal"] .wire-next__card-media {
   grid-row: 1 / span 4;
   min-height: 100%;
 }
-
 .wire-next__card-group {
   display: grid;
   grid-template-columns: repeat(var(--wire-card-columns, 3), minmax(0, 1fr));
 }
-
 .wire-next__card-group > .wire-next__card-panel {
   border-radius: 0;
   box-shadow: none;
 }
-
 .wire-next__card-group > .wire-next__card-panel:not(:first-child) {
   margin-inline-start: -1px;
 }
-
 .wire-next__card-group > .wire-next__card-panel:first-child {
   border-start-start-radius: var(--wire-radius-md);
   border-end-start-radius: var(--wire-radius-md);
 }
-
 .wire-next__card-group > .wire-next__card-panel:last-child {
   border-start-end-radius: var(--wire-radius-md);
   border-end-end-radius: var(--wire-radius-md);
 }
-
 @media (max-width: 768px) {
   .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel {
     display: flex;
@@ -3598,7 +3314,6 @@
     border-end-end-radius: var(--wire-radius-md);
   }
 }
-
 @media (max-width: 480px) {
   .wire-next__card-media--overlay {
     aspect-ratio: 4 / 3;
@@ -3613,7 +3328,6 @@
     display: block;
   }
 }
-
 .wire-next--blockquote {
   --wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary));
   --wire-blockquote-font-size: 1.125rem;
@@ -3624,32 +3338,26 @@
   color: var(--wire-color-text);
   text-align: left;
 }
-
 .wire-next--blockquote[data-size="xs"] {
   --wire-blockquote-font-size: 0.875rem;
   --wire-blockquote-mark-size: 3rem;
 }
-
 .wire-next--blockquote[data-size="sm"] {
   --wire-blockquote-font-size: 1rem;
   --wire-blockquote-mark-size: 3.5rem;
 }
-
 .wire-next--blockquote[data-size="md"],
 .wire-next--blockquote[data-size="default"] {
   --wire-blockquote-font-size: 1.125rem;
 }
-
 .wire-next--blockquote[data-size="lg"] {
   --wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
   --wire-blockquote-mark-size: 5rem;
 }
-
 .wire-next--blockquote[data-size="xl"] {
   --wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
   --wire-blockquote-mark-size: 5.75rem;
 }
-
 .wire-next--blockquote > blockquote {
   position: relative;
   display: block;
@@ -3657,7 +3365,6 @@
   margin: 0;
   padding-top: calc(var(--wire-blockquote-mark-size) * 0.78);
 }
-
 .wire-next__blockquote-mark {
   position: absolute;
   top: 0;
@@ -3673,7 +3380,6 @@
   text-align: start;
   user-select: none;
 }
-
 .wire-next__blockquote-copy {
   min-width: 0;
   font-family: Georgia, "Times New Roman", serif;
@@ -3681,19 +3387,15 @@
   line-height: 1.55;
   text-wrap: pretty;
 }
-
 .wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy {
   font-style: italic;
 }
-
 .wire-next__blockquote-copy > :first-child {
   margin-top: 0;
 }
-
 .wire-next__blockquote-copy > :last-child {
   margin-bottom: 0;
 }
-
 .wire-next__blockquote-citation {
   display: inline-flex;
   gap: 0.75rem;
@@ -3704,7 +3406,6 @@
   font-size: 0.875rem;
   line-height: 1.35;
 }
-
 .wire-next__blockquote-avatar {
   width: 2.5rem;
   height: 2.5rem;
@@ -3713,93 +3414,76 @@
   border-radius: 999px;
   object-fit: cover;
 }
-
 .wire-next__blockquote-attribution {
   display: grid;
   gap: 0.15rem;
 }
-
 .wire-next__blockquote-attribution cite {
   color: var(--wire-color-text);
   font-style: normal;
   font-weight: 700;
 }
-
 .wire-next__blockquote-attribution a {
   color: inherit;
   text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent);
   text-underline-offset: 0.2em;
 }
-
 .wire-next__blockquote-attribution a:hover {
   color: var(--wire-blockquote-color);
 }
-
 .wire-next--blockquote[data-align="center"] {
   text-align: center;
 }
-
 .wire-next--blockquote[data-align="right"],
 .wire-next--blockquote[data-align="end"] {
   text-align: right;
 }
-
 .wire-next--blockquote[data-align="center"] > blockquote,
 .wire-next--blockquote[data-align="right"] > blockquote,
 .wire-next--blockquote[data-align="end"] > blockquote {
   text-align: inherit;
 }
-
 .wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark {
   text-align: center;
 }
-
 .wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark,
 .wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark {
   text-align: end;
 }
-
 .wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation {
   margin-inline: auto;
 }
-
 .wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation,
 .wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation {
   margin-inline-start: auto;
 }
-
 .wire-next--blockquote[data-variant="bordered"],
 .wire-next--blockquote[data-variant="border"],
 .wire-next--blockquote[data-variant="left-border"] {
   padding-inline-start: 1.5rem;
   border-inline-start: 4px solid var(--wire-blockquote-color);
 }
-
 .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark,
 .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark,
 .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark {
   display: none;
 }
-
 .wire-next--blockquote[data-variant="bordered"] > blockquote,
 .wire-next--blockquote[data-variant="border"] > blockquote,
 .wire-next--blockquote[data-variant="left-border"] > blockquote {
   display: block;
   padding-top: 0;
 }
-
 .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy,
 .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy,
 .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy {
   padding-top: 0;
 }
-
 .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation,
 .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation,
 .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation {
   margin-inline-start: 0;
 }
-
 @media (max-width: 480px) {
   .wire-next--blockquote {
     --wire-blockquote-mark-size: 3.25rem;
@@ -3816,7 +3500,6 @@
     margin-inline-start: 0;
   }
 }
-
 .wire-next--alert {
   --wire-alert-color: var(--wire-component-color);
   --wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface));
@@ -3829,88 +3512,69 @@
   border-radius: var(--wire-radius, 0.75rem);
   color: var(--wire-color-text);
 }
-
 .wire-next--alert[data-radius="none"] {
   border-radius: 0;
 }
-
 .wire-next--alert[data-radius="sm"] {
   border-radius: var(--wire-radius-sm, 0.375rem);
 }
-
 .wire-next--alert[data-radius="lg"] {
   border-radius: calc(var(--wire-radius, 0.75rem) * 1.35);
 }
-
 .wire-next--alert[data-radius="xl"] {
   border-radius: calc(var(--wire-radius, 0.75rem) * 1.75);
 }
-
 .wire-next--alert[data-shadow="none"] {
   box-shadow: none;
 }
-
 .wire-next--alert[data-shadow="sm"] {
   box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent);
 }
-
 .wire-next--alert[data-shadow="md"] {
   box-shadow:
     0 2px 6px color-mix(in srgb, #000 10%, transparent),
     0 12px 28px color-mix(in srgb, #000 18%, transparent);
 }
-
 .wire-next--alert[data-shadow="lg"] {
   box-shadow:
     0 4px 10px color-mix(in srgb, #000 12%, transparent),
     0 20px 48px color-mix(in srgb, #000 24%, transparent);
 }
-
 .wire-next--alert[data-color="secondary"] {
   --wire-alert-color: #737373;
 }
-
 .wire-next--alert[data-color="success"] {
   --wire-alert-color: #0f9f8f;
 }
-
 .wire-next--alert[data-color="danger"] {
   --wire-alert-color: #dc3545;
 }
-
 .wire-next--alert[data-color="warning"] {
   --wire-alert-color: #eab308;
 }
-
 .wire-next--alert[data-color="info"] {
   --wire-alert-color: #2563eb;
 }
-
 .wire-next--alert[data-color="dark"] {
   --wire-alert-color: #27272a;
 }
-
 .wire-next--alert[data-color="light"] {
   --wire-alert-color: #f4f4f5;
 }
-
 .wire-next--alert-soft {
   border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border));
   background: var(--wire-alert-soft);
 }
-
 .wire-next--alert-soft .wire-next__alert-title,
 .wire-next--alert-soft .wire-next__alert-icon,
 .wire-next--alert-soft .wire-next__alert-actions a {
   color: var(--wire-alert-color);
 }
-
 .wire-next--alert-solid {
   border-color: var(--wire-alert-color);
   background: var(--wire-alert-color);
   color: white;
 }
-
 .wire-next--alert.wire-next--alert-solid
   :is(
     .wire-next__alert-title,
@@ -3921,58 +3585,46 @@
   ) {
   color: currentColor;
 }
-
 .wire-next--alert-solid[data-color="light"] {
   color: #18181b;
 }
-
 .wire-next--alert-solid[data-color="warning"] {
   color: #18181b;
 }
-
 .wire-next--alert-bordered {
   border-color: var(--wire-alert-color);
   background: var(--wire-color-surface);
 }
-
 .wire-next--alert-bordered .wire-next__alert-title,
 .wire-next--alert-bordered .wire-next__alert-icon,
 .wire-next--alert-bordered .wire-next__alert-actions a {
   color: var(--wire-alert-color);
 }
-
 .wire-next--alert-accent {
   border-color: color-mix(in srgb, var(--wire-alert-color) 35%, var(--wire-color-border));
   border-left: 4px solid var(--wire-alert-color);
   background: var(--wire-alert-soft);
 }
-
 .wire-next--alert-accent .wire-next__alert-title,
 .wire-next--alert-accent .wire-next__alert-icon,
 .wire-next--alert-accent .wire-next__alert-actions a {
   color: var(--wire-alert-color);
 }
-
 .wire-next--alert-compact {
   padding: 0.75rem 0.9rem;
 }
-
 .wire-next--alert-compact:not(:has(.wire-next__alert-icon)):not(:has(.wire-next__alert-dismiss)) {
   grid-template-columns: minmax(0, 1fr);
 }
-
 .wire-next--alert-compact .wire-next__alert-body {
   display: block;
 }
-
 .wire-next--alert-compact .wire-next__alert-title {
   margin-right: 0.25rem;
 }
-
 .wire-next--alert-compact .wire-next__alert-body > p {
   display: inline;
 }
-
 .wire-next__alert-icon {
   display: inline-grid;
   width: 1.25rem;
@@ -3981,55 +3633,46 @@
   margin-top: 0.05rem;
   color: var(--wire-alert-color);
 }
-
 .wire-next__alert-icon > span {
   width: 1rem;
   height: 1rem;
 }
-
 .wire-next__alert-body {
   display: grid;
   min-width: 0;
   gap: 0.35rem;
 }
-
 .wire-next__alert-title {
   font-size: 0.88rem;
   line-height: 1.45;
 }
-
 .wire-next__alert-body > p,
 .wire-next__alert-body li {
   color: inherit;
   font-size: 0.8rem;
   line-height: 1.55;
 }
-
 .wire-next__alert-body > ul {
   display: grid;
   gap: 0.25rem;
   margin: 0.15rem 0 0;
   padding-left: 1.25rem;
 }
-
 .wire-next__alert-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1rem;
   margin-top: 0.35rem;
 }
-
 .wire-next__alert-actions a {
   color: var(--wire-alert-color);
   font-size: 0.78rem;
   font-weight: 700;
   text-decoration: none;
 }
-
 .wire-next__alert-actions a:hover {
   text-decoration: underline;
 }
-
 .wire-next__alert-actions a[data-variant="action"] {
   padding: 0.35rem 0.6rem;
   border-radius: var(--wire-radius-sm);
@@ -4037,7 +3680,6 @@
   color: white;
   text-decoration: none;
 }
-
 .wire-next__alert-dismiss {
   display: inline-grid;
   width: 1.75rem;
@@ -4050,16 +3692,13 @@
   color: currentColor;
   cursor: pointer;
 }
-
 .wire-next__alert-dismiss:hover {
   background: color-mix(in srgb, currentColor 10%, transparent);
 }
-
 .wire-next__alert-dismiss:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
-
 @media (max-width: 36rem) {
   .wire-next--alert {
     grid-template-columns: auto minmax(0, 1fr);
@@ -4071,23 +3710,19 @@
     justify-self: end;
   }
 }
-
 .wire-next--accordion {
   --wire-accordion-accent: var(--wire-component-color);
   display: grid;
   width: 100%;
   color: var(--wire-color-text);
 }
-
 .wire-next__accordion-item {
   min-width: 0;
 }
-
 .wire-next__accordion-heading {
   margin: 0;
   font: inherit;
 }
-
 .wire-next__accordion-heading > button {
   display: flex;
   width: 100%;
@@ -4103,23 +3738,19 @@
   text-align: left;
   cursor: pointer;
 }
-
 .wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) {
   min-width: 0;
   flex: 1;
 }
-
 .wire-next__accordion-heading > button:focus-visible {
   border-radius: var(--wire-radius-sm);
   outline: 2px solid var(--wire-accordion-accent);
   outline-offset: 2px;
 }
-
 .wire-next__accordion-heading > button:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-
 .wire-next__accordion-indicator {
   display: inline-flex;
   width: 1rem;
@@ -4135,36 +3766,30 @@
     color var(--wire-motion-fast) var(--wire-ease-standard),
     transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__accordion-indicator > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-
 .wire-next__accordion-indicator > [class*="icon-["] {
   width: 0.95rem;
   height: 0.95rem;
 }
-
 .wire-next__accordion-item[data-open="true"]
   > .wire-next__accordion-heading
   .wire-next__accordion-indicator {
   color: var(--wire-accordion-accent);
   transform: rotate(45deg);
 }
-
 .wire-next--accordion[data-indicator="chevron"]
   .wire-next__accordion-item[data-open="true"]
   > .wire-next__accordion-heading
   .wire-next__accordion-indicator {
   transform: rotate(180deg);
 }
-
 .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button {
   color: var(--wire-accordion-accent);
 }
-
 .wire-next__accordion-panel {
   display: grid;
   grid-template-rows: 0fr;
@@ -4173,80 +3798,65 @@
     grid-template-rows var(--wire-motion-base) var(--wire-ease-standard),
     opacity var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-
 .wire-next__accordion-panel > div {
   overflow: hidden;
 }
-
 .wire-next__accordion-content {
   padding: 0 0 1rem 1.75rem;
   color: var(--wire-color-muted);
   font-size: 0.86rem;
   line-height: 1.65;
 }
-
 .wire-next__accordion-content > p {
   color: inherit;
 }
-
 .wire-next__accordion-content-italic > p::first-line {
   font-style: italic;
 }
-
 .wire-next__accordion-nested {
   display: grid;
   margin-top: 0.5rem;
 }
-
 .wire-next__accordion-nested .wire-next__accordion-content {
   padding-left: 1.5rem;
 }
-
 .wire-next--accordion-bordered {
   overflow: hidden;
   border: 1px solid var(--wire-color-border);
   border-radius: var(--wire-radius-md);
   background: var(--wire-color-surface);
 }
-
 .wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item {
   border-top: 1px solid var(--wire-color-border);
 }
-
 .wire-next--accordion-bordered
   > .wire-next__accordion-item
   > .wire-next__accordion-heading
   > button {
   padding-inline: 1rem;
 }
-
 .wire-next--accordion-bordered
   > .wire-next__accordion-item
   > .wire-next__accordion-panel
   .wire-next__accordion-content {
   padding-inline: 1rem;
 }
-
 .wire-next--accordion-separated {
   gap: 0.5rem;
 }
-
 .wire-next--accordion-separated > .wire-next__accordion-item {
   overflow: hidden;
   border: 1px solid transparent;
   border-radius: var(--wire-radius-md);
   background: var(--wire-color-surface-2);
 }
-
 .wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] {
   border-color: var(--wire-color-border);
 }
-
 .wire-next--accordion-separated
   > .wire-next__accordion-item
   > .wire-next__accordion-heading
@@ -4257,20 +3867,17 @@
   .wire-next__accordion-content {
   padding-inline: 1rem;
 }
-
 .wire-next--accordion-flush {
   border-radius: 0;
   background: transparent;
   box-shadow: none;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .wire-next__accordion-panel,
   .wire-next__accordion-indicator {
     transition: none;
   }
 }
-
 .wire-next--toggle-count {
   --wire-toggle-count-accent: var(--wire-component-color);
   display: grid;
@@ -4278,27 +3885,21 @@
   gap: 0.75rem;
   color: var(--wire-color-text);
 }
-
 .wire-next--toggle-count-full {
   width: 100%;
 }
-
 .wire-next__toggle-count-control {
   display: flex;
 }
-
 .wire-next__toggle-count-control--start {
   justify-content: flex-start;
 }
-
 .wire-next__toggle-count-control--center {
   justify-content: center;
 }
-
 .wire-next__toggle-count-control--end {
   justify-content: flex-end;
 }
-
 .wire-next__toggle-count-segmented {
   display: inline-flex;
   gap: 0.2rem;
@@ -4307,7 +3908,6 @@
   background: var(--wire-color-surface-2);
   box-shadow: inset 0 0 0 1px var(--wire-color-border);
 }
-
 .wire-next__toggle-count-segmented button {
   min-height: 2.35rem;
   padding: 0.45rem 0.8rem;
@@ -4320,7 +3920,6 @@
   font-weight: 700;
   cursor: pointer;
 }
-
 .wire-next__toggle-count-segmented button[aria-pressed="true"] {
   background: var(--wire-color-surface);
   color: var(--wire-color-text);
@@ -4328,33 +3927,27 @@
     var(--wire-shadow-1),
     inset 0 -2px var(--wire-toggle-count-accent);
 }
-
 .wire-next__toggle-count-segmented button:focus-visible,
 .wire-next__toggle-count-switch:focus-visible {
   outline: 2px solid var(--wire-toggle-count-accent);
   outline-offset: 2px;
 }
-
 .wire-next__toggle-count-segmented button:disabled,
 .wire-next__toggle-count-switch:disabled {
   cursor: not-allowed;
 }
-
 .wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) {
   align-items: center;
   gap: 0.7rem;
   font-size: 0.78rem;
   font-weight: 700;
 }
-
 .wire-next__toggle-count-control > span {
   color: var(--wire-color-muted);
 }
-
 .wire-next__toggle-count-control > span[data-selected="true"] {
   color: var(--wire-color-text);
 }
-
 .wire-next__toggle-count-switch {
   position: relative;
   width: 2.65rem;
@@ -4366,7 +3959,6 @@
   cursor: pointer;
   transition: background-color var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__toggle-count-switch > span {
   display: block;
   width: 1rem;
@@ -4376,17 +3968,14 @@
   box-shadow: var(--wire-shadow-1);
   transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__toggle-count-switch[aria-checked="true"] {
   border-color: var(--wire-toggle-count-accent);
   background: var(--wire-toggle-count-accent);
 }
-
 .wire-next__toggle-count-switch[aria-checked="true"] > span {
   background: white;
   transform: translateX(1.15rem);
 }
-
 .wire-next__toggle-count-items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
@@ -4395,7 +3984,6 @@
   border-radius: var(--wire-radius-md);
   background: var(--wire-color-surface);
 }
-
 .wire-next__toggle-count-items article {
   display: grid;
   align-content: start;
@@ -4403,17 +3991,14 @@
   min-width: 0;
   padding: 1rem;
 }
-
 .wire-next__toggle-count-items article + article {
   border-left: 1px solid var(--wire-color-border);
 }
-
 .wire-next__toggle-count-items article > span {
   color: var(--wire-color-muted);
   font-size: 0.75rem;
   font-weight: 600;
 }
-
 .wire-next__toggle-count-items strong {
   display: flex;
   align-items: baseline;
@@ -4421,7 +4006,6 @@
   font-size: 1.5rem;
   line-height: 1;
 }
-
 .wire-next__toggle-count-items [data-toggle-count-value] {
   min-width: 2ch;
   font-variant-numeric: tabular-nums;
@@ -4429,17 +4013,14 @@
     color var(--wire-motion-fast) var(--wire-ease-standard),
     transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next__toggle-count-items strong small {
   color: inherit;
   font-size: 0.65em;
 }
-
 .wire-next__toggle-count-items article > small {
   color: var(--wire-color-muted);
   font-size: 0.68rem;
 }
-
 @media (max-width: 36rem) {
   .wire-next__toggle-count-control {
     justify-content: center;
@@ -4454,19 +4035,16 @@
     border-left: 0;
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
   .wire-next__toggle-count-items [data-toggle-count-value] {
     transition: none;
   }
 }
-
 .wire-next p {
   margin: 0;
   color: var(--wire-color-muted);
   line-height: 1.6;
 }
-
 .wire-next__items {
   display: flex;
   flex-wrap: wrap;
@@ -4478,7 +4056,6 @@
   background: var(--wire-color-surface-2);
   font-size: 0.75rem;
 }
-
 /* --- Badge --------------------------------------------------------------- */
 .wire-next--badge-root {
   position: relative;
@@ -4487,7 +4064,6 @@
   max-width: 100%;
   vertical-align: middle;
 }
-
 .wire-next__badge {
   --wire-badge-color: var(--wire-color-primary);
   position: relative;
@@ -4510,25 +4086,21 @@
   line-height: 1;
   white-space: nowrap;
 }
-
 .wire-next__badge[data-size="xs"] {
   min-height: 1.25rem;
   padding: 0.15rem 0.4rem;
   font-size: 0.625rem;
 }
-
 .wire-next__badge[data-size="sm"] {
   min-height: 1.45rem;
   padding: 0.2rem 0.5rem;
   font-size: 0.6875rem;
 }
-
 .wire-next__badge[data-size="lg"] {
   min-height: 2rem;
   padding: 0.35rem 0.75rem;
   font-size: 0.825rem;
 }
-
 .wire-next__badge[data-color="secondary"] {
   --wire-badge-color: #737373;
 }
@@ -4550,49 +4122,40 @@
 .wire-next__badge[data-color="light"] {
   --wire-badge-color: #f4f4f5;
 }
-
 .wire-next__badge[data-color="warning"][data-variant="solid"],
 .wire-next__badge[data-color="light"][data-variant="solid"] {
   color: #18181b;
 }
-
 .wire-next__badge[data-variant="soft"] {
   color: var(--wire-badge-color);
   border-color: transparent;
   background: color-mix(in srgb, var(--wire-badge-color) 15%, var(--wire-color-surface));
   box-shadow: none;
 }
-
 .wire-next__badge[data-variant="outline"] {
   color: var(--wire-badge-color);
   background: transparent;
   box-shadow: none;
 }
-
 .wire-next__badge[data-variant="white"] {
   color: var(--wire-color-text);
   border-color: var(--wire-color-border);
   background: var(--wire-color-surface);
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
 }
-
 .wire-next__badge[data-shape="rounded"] {
   border-radius: 0.4rem;
 }
-
 .wire-next__badge[data-shape="square"] {
   border-radius: 0;
 }
-
 .wire-next__badge-label {
   min-width: 0;
 }
-
 .wire-next__badge-label--truncate {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .wire-next__badge-dot {
   width: 0.42rem;
   height: 0.42rem;
@@ -4600,7 +4163,6 @@
   border-radius: 999px;
   background: currentColor;
 }
-
 .wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) {
   width: 0.7rem;
   min-width: 0.7rem;
@@ -4609,19 +4171,16 @@
   padding: 0;
   border: 2px solid var(--wire-color-bg);
 }
-
 .wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label))
   .wire-next__badge-dot {
   width: 100%;
   height: 100%;
 }
-
 .wire-next__badge-icon {
   width: 0.9rem;
   height: 0.9rem;
   flex: none;
 }
-
 .wire-next__badge-avatar {
   width: 1.25rem;
   height: 1.25rem;
@@ -4630,7 +4189,6 @@
   border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
   border-radius: 999px;
 }
-
 .wire-next__badge-dismiss {
   display: grid;
   width: 1.15rem;
@@ -4644,21 +4202,17 @@
   background: color-mix(in srgb, currentColor 12%, transparent);
   cursor: pointer;
 }
-
 .wire-next__badge-dismiss:hover {
   background: color-mix(in srgb, currentColor 22%, transparent);
 }
-
 .wire-next__badge-dismiss:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
-
 .wire-next__badge-dismiss span {
   width: 0.75rem;
   height: 0.75rem;
 }
-
 .wire-next__badge-anchor {
   display: inline-flex;
   min-height: 2.75rem;
@@ -4674,27 +4228,22 @@
   font-size: 0.875rem;
   font-weight: 700;
 }
-
 .wire-next__badge-anchor > [class*="icon-"] {
   width: 1rem;
   height: 1rem;
 }
-
 .wire-next--badge-anchored[data-placement="inline"] {
   align-items: center;
 }
-
 .wire-next--badge-anchored[data-placement="inline"] .wire-next__badge {
   margin-left: -0.55rem;
 }
-
 .wire-next--badge-anchored[data-placement="top-right"] .wire-next__badge {
   position: absolute;
   top: -0.55rem;
   right: -0.75rem;
   z-index: 2;
 }
-
 .wire-next__badge-ping {
   position: absolute;
   z-index: -1;
@@ -4704,7 +4253,6 @@
   opacity: 0.5;
   animation: wire-badge-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
-
 @keyframes wire-badge-ping {
   75%,
   100% {
@@ -4712,13 +4260,11 @@
     transform: scale(1.45);
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
   .wire-next__badge-ping {
     animation: none;
   }
 }
-
 .wire-next details {
   overflow: hidden;
   border: 1px solid var(--wire-color-border);
@@ -4733,7 +4279,6 @@
   padding: 0 0.75rem 0.75rem;
   color: var(--wire-color-muted);
 }
-
 .wire-next__row {
   display: flex;
   align-items: center;
@@ -4744,7 +4289,6 @@
   width: 100%;
   accent-color: var(--wire-color-primary);
 }
-
 .wire-next--pin-input {
   display: grid;
   width: 100%;
@@ -4754,20 +4298,17 @@
   border: 0;
   color: var(--wire-color-text);
 }
-
 .wire-next__pin-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
 }
-
 .wire-next__pin-heading legend {
   padding: 0;
   font-size: 0.82em;
   font-weight: 700;
 }
-
 .wire-next__pin-clear {
   display: inline-flex;
   align-items: center;
@@ -4781,12 +4322,10 @@
   font-weight: 750;
   cursor: pointer;
 }
-
 .wire-next__pin-clear > span:first-child {
   width: 0.9rem;
   height: 0.9rem;
 }
-
 .wire-next__pin-cells {
   display: flex;
   max-width: 100%;
@@ -4796,7 +4335,6 @@
   padding: 0.2rem;
   scrollbar-width: thin;
 }
-
 .wire-next--pin-input .wire-next__pin-cells input {
   flex: 0 0 clamp(2.4rem, 8vw, 3.25rem);
   width: clamp(2.4rem, 8vw, 3.25rem);
@@ -4817,41 +4355,34 @@
     box-shadow var(--wire-motion-base) var(--wire-ease-standard),
     transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next--pin-input .wire-next__pin-cells input::placeholder {
   color: var(--wire-color-muted);
   opacity: 0.45;
 }
-
 .wire-next--pin-input .wire-next__pin-cells input:focus-visible {
   border-color: var(--wire-component-color);
   outline: 0;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
   transform: translateY(-1px);
 }
-
 .wire-next--pin-input .wire-next__pin-cells input:disabled,
 .wire-next--pin-input .wire-next__pin-cells input:read-only {
   cursor: not-allowed;
   opacity: 0.55;
 }
-
 .wire-next__pin-separator {
   color: var(--wire-color-muted);
   font-size: 1.1rem;
   font-weight: 800;
 }
-
 .wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input {
   border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border));
   background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg));
 }
-
 .wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input,
 .wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input {
   border-color: var(--wire-color-danger);
 }
-
 @media (max-width: 480px) {
   .wire-next__pin-cells {
     gap: 0.3rem;
@@ -4864,7 +4395,6 @@
     height: min(3rem, 14vw);
   }
 }
-
 .wire-next--spinner i {
   display: block;
   width: 1.5rem;
@@ -4891,7 +4421,6 @@
   background-size: 200% 100%;
   animation: wire-shimmer 1.4s infinite;
 }
-
 .wire-next--navbar,
 .wire-next--mega-menu,
 .wire-next--nav,
@@ -4927,314 +4456,6 @@
   color: var(--wire-color-text);
   background: var(--wire-color-surface-2);
 }
-
-/* Full application navigation */
-.wire-navbar {
-  position: relative;
-  z-index: 40;
-  width: 100%;
-  color: var(--wire-color-text);
-  background: color-mix(in srgb, var(--wire-color-surface) 96%, transparent);
-  border-bottom: 1px solid var(--wire-color-border);
-}
-.wire-navbar--sticky {
-  position: sticky;
-  top: 0;
-  backdrop-filter: blur(16px);
-}
-.wire-navbar__topbar:empty,
-.wire-navbar__topbar:not(:has(*)) {
-  display: none;
-}
-.wire-navbar__topbar:not(:empty) {
-  display: flex;
-  min-height: 2.25rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.35rem clamp(1rem, 4vw, 3rem);
-  color: var(--wire-color-muted);
-  background: var(--wire-color-surface-2);
-  border-bottom: 1px solid var(--wire-color-border);
-  font-size: 0.75rem;
-  font-weight: 400;
-}
-.wire-navbar__main {
-  display: flex;
-  min-height: 4.25rem;
-  width: min(100%, 90rem);
-  margin-inline: auto;
-  padding: 0.75rem clamp(1rem, 4vw, 3rem);
-  align-items: center;
-  gap: 1.5rem;
-}
-.wire-navbar--width-full .wire-navbar__main {
-  width: 100%;
-  max-width: none;
-}
-.wire-navbar--width-compact .wire-navbar__main {
-  width: min(86%, 80rem);
-}
-.wire-navbar__brand,
-.wire-navbar__menu-link,
-.wire-navbar__dropdown summary,
-.wire-navbar__action,
-.wire-navbar__panel a {
-  color: inherit;
-  text-decoration: none;
-}
-.wire-navbar__brand {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.75rem;
-  flex: 0 0 auto;
-}
-.wire-navbar__brand-logo {
-  display: block;
-  width: auto;
-  max-width: 11rem;
-  height: 2.5rem;
-  object-fit: contain;
-}
-.wire-navbar__brand-icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  color: var(--wire-component-color, var(--wire-color-primary));
-}
-.wire-navbar__brand-copy {
-  display: grid;
-  min-width: 0;
-  line-height: 1.2;
-}
-.wire-navbar__brand-copy strong {
-  font-size: 0.9rem;
-  font-weight: 600;
-}
-.wire-navbar__brand-copy small {
-  margin-top: 0.2rem;
-  color: var(--wire-color-muted);
-  font-size: 0.6875rem;
-  font-weight: 400;
-}
-.wire-navbar__collapse,
-.wire-navbar__menus,
-.wire-navbar__actions {
-  display: flex;
-  align-items: center;
-}
-.wire-navbar__collapse {
-  min-width: 0;
-  flex: 1;
-  gap: 1rem;
-}
-.wire-navbar__menus {
-  justify-content: center;
-  flex: 1;
-  gap: 0.25rem;
-}
-.wire-navbar__actions {
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-.wire-navbar__menu-link,
-.wire-navbar__dropdown > summary,
-.wire-navbar__action {
-  display: inline-flex;
-  min-height: 2.75rem;
-  padding: 0.65rem 0.8rem;
-  align-items: center;
-  gap: 0.45rem;
-  border-radius: 0.65rem;
-  cursor: pointer;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  white-space: nowrap;
-}
-.wire-navbar__menu-link:hover,
-.wire-navbar__dropdown > summary:hover {
-  color: var(--wire-color-text);
-  background: var(--wire-color-surface-2);
-}
-.wire-navbar__menu-link[aria-current="page"],
-.wire-navbar__dropdown > summary[aria-current="page"] {
-  color: var(--wire-component-color, var(--wire-color-primary));
-  font-weight: 600;
-  background: color-mix(
-    in srgb,
-    var(--wire-component-color, var(--wire-color-primary)) 12%,
-    transparent
-  );
-  box-shadow: inset 0 -2px 0 var(--wire-component-color, var(--wire-color-primary));
-}
-.wire-navbar__menu-link[aria-current="page"]:hover,
-.wire-navbar__dropdown > summary[aria-current="page"]:hover {
-  color: var(--wire-component-color, var(--wire-color-primary));
-  background: color-mix(
-    in srgb,
-    var(--wire-component-color, var(--wire-color-primary)) 16%,
-    transparent
-  );
-}
-.wire-navbar__dropdown {
-  position: relative;
-}
-.wire-navbar__dropdown > summary {
-  list-style: none;
-}
-.wire-navbar__dropdown > summary::-webkit-details-marker {
-  display: none;
-}
-.wire-navbar__chevron {
-  width: 0.45rem;
-  height: 0.45rem;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: rotate(45deg) translateY(-0.15rem);
-  transition: transform var(--wire-motion-fast, 150ms) ease;
-}
-.wire-navbar__dropdown[open] .wire-navbar__chevron {
-  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
-}
-.wire-navbar__panel {
-  position: absolute;
-  top: calc(100% + 0.55rem);
-  left: 50%;
-  display: grid;
-  width: max-content;
-  min-width: 15rem;
-  max-width: min(90vw, 64rem);
-  padding: 0.65rem;
-  gap: 0.45rem;
-  border: 1px solid var(--wire-color-border);
-  border-radius: 0.9rem;
-  color: var(--wire-color-text);
-  background: var(--wire-color-surface);
-  box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
-  opacity: 1;
-  transform: translateX(-50%) translateY(0) scale(1);
-  transform-origin: top center;
-  transition:
-    opacity 180ms ease,
-    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
-    display 180ms allow-discrete;
-}
-.wire-navbar__panel::before {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  left: 0;
-  height: 0.65rem;
-  content: "";
-}
-.wire-navbar__dropdown:not([open]) > .wire-navbar__panel {
-  display: none;
-  opacity: 0;
-  transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
-}
-@starting-style {
-  .wire-navbar__dropdown[open] > .wire-navbar__panel {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
-  }
-}
-.wire-navbar__dropdown--mega {
-  position: static;
-}
-.wire-navbar__dropdown--mega .wire-navbar__panel {
-  right: auto;
-  left: 50%;
-  width: min(calc(100vw - 2rem), 64rem);
-}
-.wire-navbar__panel--columns-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.wire-navbar__panel--columns-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.wire-navbar__panel--columns-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-.wire-navbar__panel-intro {
-  grid-column: 1 / -1;
-  margin: 0;
-  padding: 0.5rem 0.65rem;
-  color: var(--wire-color-muted);
-  font-size: 0.8125rem;
-  font-weight: 400;
-}
-.wire-navbar__group {
-  display: grid;
-  align-content: start;
-  gap: 0.25rem;
-}
-.wire-navbar__group-title {
-  padding: 0.55rem 0.65rem 0.25rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.wire-navbar__group > small {
-  padding: 0 0.65rem 0.4rem;
-  color: var(--wire-color-muted);
-  font-size: 0.7rem;
-  font-weight: 400;
-}
-.wire-navbar__panel a {
-  display: flex;
-  min-height: 2.75rem;
-  padding: 0.65rem;
-  align-items: flex-start;
-  gap: 0.65rem;
-  border-radius: 0.6rem;
-  font-size: 0.8rem;
-  font-weight: 450;
-}
-.wire-navbar__panel a:hover {
-  background: var(--wire-color-surface-2);
-}
-.wire-navbar__panel a span:last-child {
-  display: grid;
-  gap: 0.15rem;
-}
-.wire-navbar__panel a strong {
-  font-weight: 500;
-}
-.wire-navbar__panel a small {
-  color: var(--wire-color-muted);
-  font-size: 0.7rem;
-  font-weight: 400;
-}
-.wire-navbar__action {
-  border: 1px solid transparent;
-}
-.wire-navbar__action--primary {
-  color: var(--wire-color-on-primary, #fff);
-  background: var(--wire-component-color, var(--wire-color-primary));
-  font-weight: 600;
-}
-.wire-navbar__action--outline {
-  border-color: var(--wire-color-border);
-}
-.wire-navbar__toggle {
-  display: none;
-  width: 2.75rem;
-  height: 2.75rem;
-  margin-left: auto;
-  padding: 0.65rem;
-  border: 1px solid var(--wire-color-border);
-  border-radius: 0.65rem;
-  color: inherit;
-  background: var(--wire-color-surface);
-}
-.wire-navbar__toggle span {
-  display: block;
-  height: 2px;
-  margin: 0.25rem 0;
-  background: currentColor;
-}
-
 /* Structured responsive footer */
 .wire-footer {
   width: 100%;
@@ -5373,66 +4594,7 @@
 .wire-footer__copyright-right:not(:has(*)) {
   min-height: 0;
 }
-
 @media (max-width: 900px) {
-  .wire-navbar--width-compact .wire-navbar__main {
-    width: 100%;
-  }
-  .wire-navbar__toggle {
-    display: block;
-  }
-  .wire-navbar__collapse {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    left: 0;
-    display: none;
-    padding: 0.75rem 1rem 1rem;
-    align-items: stretch;
-    flex-direction: column;
-    background: var(--wire-color-surface);
-    border-bottom: 1px solid var(--wire-color-border);
-    box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
-    max-height: calc(100dvh - 4rem);
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
-  .wire-navbar__collapse.is-open {
-    display: flex;
-  }
-  .wire-navbar__menus,
-  .wire-navbar__actions {
-    width: 100%;
-    align-items: stretch;
-    flex-direction: column;
-  }
-  .wire-navbar__menu-link,
-  .wire-navbar__dropdown > summary,
-  .wire-navbar__action {
-    width: 100%;
-  }
-  .wire-navbar__panel,
-  .wire-navbar__dropdown--mega .wire-navbar__panel {
-    position: static;
-    width: 100%;
-    max-width: none;
-    margin-top: 0.25rem;
-    box-shadow: none;
-    transform: none;
-    overflow: hidden;
-    animation: wire-navbar-mobile-panel 180ms ease both;
-  }
-  .wire-navbar__dropdown:not([open]) > .wire-navbar__panel,
-  .wire-navbar__dropdown[open] > .wire-navbar__panel {
-    transform: none;
-  }
-  .wire-navbar__panel[class*="wire-navbar__panel--columns-"] {
-    grid-template-columns: 1fr;
-  }
-  .wire-navbar__panel::before {
-    display: none;
-  }
   .wire-footer__grid {
     grid-template-columns: 1fr;
   }
@@ -5447,9 +4609,6 @@
   }
 }
 @media (max-width: 600px) {
-  .wire-navbar__brand-copy small {
-    display: none;
-  }
   .wire-footer__links {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -5473,7 +4632,6 @@
     grid-template-columns: 1fr;
   }
 }
-
 /* Portal display, accent, and language preferences */
 .wire-preferences {
   display: inline-flex;
@@ -5537,18 +4695,6 @@
   box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18));
   animation: wire-component-enter 160ms ease both;
 }
-
-@keyframes wire-navbar-mobile-panel {
-  from {
-    opacity: 0;
-    transform: translateY(-0.35rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 /* Responsive grouped application sidebar */
 .wire-sidebar-shell {
   width: 15rem;
@@ -5668,7 +4814,6 @@
     transform: translateY(0);
   }
 }
-
 @media (max-width: 1023px) {
   .wire-sidebar-shell {
     width: 100%;
@@ -5831,7 +4976,6 @@
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E")
     center / contain no-repeat;
 }
-
 /* Reusable responsive portal dashboard */
 .wire-portal-dashboard {
   width: min(100%, 96rem);
@@ -6055,7 +5199,6 @@
 .wire-portal-dashboard__timeline p {
   margin-block: 0.15rem;
 }
-
 @media (max-width: 1100px) {
   .wire-portal-dashboard__metrics {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -6085,7 +5228,6 @@
     grid-template-columns: 1fr;
   }
 }
-
 .wire-next--field {
   display: grid;
   width: min(100%, 28rem);
@@ -6105,7 +5247,6 @@
   font: inherit;
   font-weight: 500;
 }
-
 /* Reusable dropdown and account menu */
 .wire-dropdown {
   position: relative;
@@ -6224,7 +5365,6 @@
     overflow-y: auto;
   }
 }
-
 /* Shared authentication shell and forms */
 .wire-auth-split {
   display: grid;
@@ -6444,7 +5584,6 @@
 .wire-next--field textarea {
   resize: vertical;
 }
-
 .wire-next--field,
 .wire-next--choice-field {
   --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
@@ -6454,17 +5593,14 @@
   font-size: 0.8125rem;
   font-weight: 500;
 }
-
 .wire-next--field.wire-next--size-sm,
 .wire-next--choice-field.wire-next--size-sm {
   font-size: 0.8125rem;
 }
-
 .wire-next--field.wire-next--size-lg,
 .wire-next--choice-field.wire-next--size-lg {
   font-size: 1rem;
 }
-
 .wire-next__field-heading {
   display: flex;
   min-width: 0;
@@ -6472,24 +5608,20 @@
   justify-content: space-between;
   gap: 1rem;
 }
-
 .wire-next__field-heading label {
   color: var(--wire-color-text);
   font-weight: 600;
 }
-
 .wire-next__field-hint,
 .wire-next__field-help {
   color: var(--wire-color-muted);
   font-size: 0.82em;
   font-weight: 500;
 }
-
 .wire-next__field-control {
   position: relative;
   min-width: 0;
 }
-
 .wire-next__field-control > :is(input, textarea, select) {
   padding-inline: 0.85rem;
   border-color: var(--wire-color-border);
@@ -6497,15 +5629,12 @@
   background: var(--wire-color-surface);
   font-size: 0.8125rem;
 }
-
 .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
   padding-inline-start: 2.5rem;
 }
-
 .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
   padding-inline-end: 2.5rem;
 }
-
 .wire-next__field-icon {
   position: absolute;
   z-index: 1;
@@ -6515,18 +5644,15 @@
   pointer-events: none;
   transform: translateY(-50%);
 }
-
 .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
   right: 0.85rem;
   left: auto;
 }
-
 .wire-next--field[data-variant="outlined"]
   .wire-next__field-control
   > :is(input, textarea, select) {
   border-width: 2px;
 }
-
 .wire-next--field[data-variant="underline"]
   .wire-next__field-control
   > :is(input, textarea, select) {
@@ -6536,17 +5662,14 @@
   background: transparent;
   box-shadow: none;
 }
-
 .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
   border-radius: 999px;
   padding-inline: 1.15rem;
 }
-
 .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
   border-color: transparent;
   background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
 }
-
 .wire-next__field-floating-label {
   position: absolute;
   top: 50%;
@@ -6556,16 +5679,13 @@
   transform: translateY(-50%);
   transition: 150ms ease;
 }
-
 .wire-next--textarea .wire-next__field-floating-label {
   top: 1.35rem;
 }
-
 .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
   padding-top: 1.2rem;
   padding-bottom: 0.3rem;
 }
-
 .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
   position: absolute !important;
   width: 1px !important;
@@ -6575,12 +5695,10 @@
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
 }
-
 .wire-next--field[data-floating="true"]
   .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
   display: none;
 }
-
 .wire-next--field[data-floating="true"]
   .wire-next__field-control
   > :is(input, textarea):is(:focus, :not(:placeholder-shown))
@@ -6589,33 +5707,27 @@
   font-size: 0.7em;
   transform: none;
 }
-
 .wire-next__field-error {
   min-height: 1em;
   color: var(--wire-color-danger);
   font-size: 0.82em;
   font-weight: 600;
 }
-
 .wire-next__field-error:empty {
   display: none;
 }
-
 .wire-next--field[data-invalid="true"] :is(input, textarea, select),
 .wire-next--choice-field[data-invalid="true"] input {
   border-color: var(--wire-color-danger);
 }
-
 .wire-next--field :is(input, textarea, select):disabled,
 .wire-next--choice-field input:disabled {
   cursor: not-allowed;
   opacity: 0.58;
 }
-
 .wire-next--field :is(input, textarea, select):read-only {
   background: var(--wire-color-surface-2);
 }
-
 .wire-next--field[data-inline="true"],
 .wire-next--choice-field[data-inline="true"] {
   display: grid;
@@ -6626,37 +5738,30 @@
   align-items: center;
   gap: 0.75rem;
 }
-
 .wire-next--field[data-inline="true"] .wire-next__field-heading,
 .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
   min-height: 2.65rem;
   align-items: center;
 }
-
 .wire-next--field[data-inline="true"] .wire-next__field-heading {
   justify-content: flex-end;
 }
-
 .wire-next--field[data-inline="true"] .wire-next__field-help,
 .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
   display: flex;
   min-height: 2.65rem;
   align-items: center;
 }
-
 .wire-next--choice-field[data-inline="true"] {
   grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
 }
-
 .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
   display: none;
 }
-
 .wire-next--field[data-inline="true"] .wire-next__field-error,
 .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
   grid-column: 2 / -1;
 }
-
 .wire-next__sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -6668,14 +5773,12 @@
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
 }
-
 .wire-next__choice-field {
   display: grid;
   width: 100%;
   max-width: none;
   gap: 0.4rem;
 }
-
 .wire-next__choice {
   display: flex;
   min-width: 0;
@@ -6686,7 +5789,6 @@
   font-size: 0.75rem;
   font-weight: 500;
 }
-
 .wire-next__checkbox-content {
   display: grid;
   width: 100%;
@@ -6694,13 +5796,11 @@
   align-items: start;
   grid-template-columns: minmax(0, 1fr);
 }
-
 .wire-next__checkbox-content > .wire-next__choice {
   width: 100%;
   min-width: 0;
   align-items: flex-start;
 }
-
 .wire-next__checkbox-slot {
   display: block;
   min-width: 0;
@@ -6709,51 +5809,42 @@
   font-size: 0.75rem;
   line-height: 1.45;
 }
-
 .wire-next__checkbox-slot:empty {
   display: none;
 }
-
 .wire-next__checkbox-slot :is(a, button) {
   color: var(--wire-field-color);
 }
-
 .wire-next__choice input {
   flex: 0 0 auto;
   margin: 0;
   accent-color: var(--wire-field-color);
 }
-
 .wire-next__choice-copy {
   display: grid;
   min-width: 0;
   gap: 0.15rem;
   line-height: 1.35;
 }
-
 .wire-next__choice-copy small {
   color: var(--wire-color-muted);
   font-weight: 500;
 }
-
 .wire-next__radio-group,
 .wire-next__checkbox-group {
   display: grid;
   min-width: 0;
   gap: 0.65rem;
 }
-
 .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
 .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
   grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
   align-items: stretch;
 }
-
 .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
 .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
 }
-
 .wire-next--radio-field[data-card="true"] .wire-next--radio,
 .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
   min-height: 4.5rem;
@@ -6762,58 +5853,48 @@
   border-radius: var(--wire-radius-sm);
   background: var(--wire-color-surface);
 }
-
 .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
 .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
   border-color: var(--wire-field-color);
   box-shadow: 0 0 0 1px var(--wire-field-color);
 }
-
 .wire-next--radio-field[data-list="true"] .wire-next--radio,
 .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
   padding-block: 0.75rem;
   border-bottom: 1px solid var(--wire-color-border);
 }
-
 .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
 .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
   justify-content: space-between;
 }
-
 .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
 .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
   order: 2;
 }
-
 .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
 .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
   order: 1;
 }
-
 .wire-next__choice[data-variant="outlined"],
 .wire-next__choice[data-variant="floating"] {
   padding: 0.65rem 0.8rem;
   border: 1px solid var(--wire-color-border);
   border-radius: var(--wire-radius-sm);
 }
-
 .wire-next__choice[data-variant="pill"] {
   padding: 0.65rem 1rem;
   border-radius: 999px;
   background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
 }
-
 .wire-next__choice[data-variant="ghost"] {
   padding: 0.65rem 0.8rem;
   border-radius: var(--wire-radius-sm);
   background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
 }
-
 .wire-next__choice[data-variant="underline"] {
   padding-block: 0.5rem;
   border-bottom: 1px solid var(--wire-color-border);
 }
-
 .wire-next--switch input {
   appearance: none;
   position: relative;
@@ -6824,28 +5905,23 @@
   background: var(--wire-color-surface-2);
   transition: background var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next--switch {
   min-height: 2.65rem;
   justify-content: flex-start;
 }
-
 .wire-next--switch > span:last-child {
   line-height: 1.35;
 }
-
 .wire-next--select .wire-next__field-control {
   display: flex;
   align-items: center;
 }
-
 .wire-next--select select {
   width: 100%;
   min-height: 2.65rem;
   margin: 0;
   line-height: 1.35;
 }
-
 .wire-next--switch input::after {
   position: absolute;
   top: 0.15rem;
@@ -6857,17 +5933,14 @@
   content: "";
   transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
 }
-
 .wire-next--switch input:checked {
   border-color: var(--wire-field-color);
   background: var(--wire-field-color);
 }
-
 .wire-next--switch input:checked::after {
   background: var(--wire-color-primary-contrast, #fff);
   transform: translateX(1.1rem);
 }
-
 .wire-next__color-control,
 .wire-next__range-control,
 .wire-next__input-group-control,
@@ -6877,19 +5950,16 @@
   align-items: center;
   gap: 0.65rem;
 }
-
 .wire-next__color-control input[type="color"] {
   width: 3rem;
   padding: 0.2rem;
 }
-
 .wire-next__range-track {
   display: grid;
   flex: 1;
   min-width: 0;
   gap: 0.35rem;
 }
-
 .wire-next__range-control input {
   width: 100%;
   min-width: 0;
@@ -6897,7 +5967,6 @@
   flex: 1;
   accent-color: var(--wire-field-color);
 }
-
 .wire-next__custom-slider {
   position: relative;
   width: 100%;
@@ -6905,7 +5974,6 @@
   cursor: pointer;
   touch-action: none;
 }
-
 .wire-next__custom-slider::before,
 .wire-next__slider-fill {
   position: absolute;
@@ -6915,21 +5983,18 @@
   transform: translateY(-50%);
   content: "";
 }
-
 .wire-next__custom-slider::before {
   right: 0;
   left: 0;
   background: var(--wire-color-surface-2);
   box-shadow: inset 0 0 0 1px var(--wire-color-border);
 }
-
 .wire-next__slider-fill {
   z-index: 1;
   left: 0;
   width: var(--wire-range-progress);
   background: var(--wire-field-color);
 }
-
 .wire-next__slider-thumb {
   position: absolute;
   z-index: 3;
@@ -6943,12 +6008,10 @@
   box-shadow: var(--wire-shadow-1);
   transform: translate(-50%, -50%);
 }
-
 .wire-next__custom-slider:focus-visible {
   outline: 3px solid color-mix(in srgb, var(--wire-field-color) 28%, transparent);
   outline-offset: 3px;
 }
-
 .wire-next__slider-marks button {
   position: absolute;
   z-index: 2;
@@ -6961,7 +6024,6 @@
   background: var(--wire-color-muted);
   transform: translate(-50%, -50%);
 }
-
 .wire-next__range-control[data-show-steps="true"] input {
   background-image: repeating-linear-gradient(
     90deg,
@@ -6971,7 +6033,6 @@
     var(--wire-color-border) 10%
   );
 }
-
 .wire-next__range-bounds {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -6979,20 +6040,16 @@
   font-size: 0.78em;
   font-variant-numeric: tabular-nums;
 }
-
 .wire-next__range-bounds span:nth-child(2) {
   text-align: center;
 }
-
 .wire-next__range-bounds span:last-child {
   text-align: right;
 }
-
 .wire-next__range-control output {
   min-width: 3ch;
   font-variant-numeric: tabular-nums;
 }
-
 .wire-next__range-stepper {
   display: inline-grid;
   width: 2.35rem;
@@ -7007,17 +6064,14 @@
   font-size: 1.2rem;
   cursor: pointer;
 }
-
 .wire-next__range-stepper:hover:not(:disabled) {
   border-color: var(--wire-field-color);
   color: var(--wire-field-color);
 }
-
 .wire-next__range-stepper:disabled {
   cursor: not-allowed;
   opacity: 0.45;
 }
-
 .wire-next__picker-control,
 .wire-next--time-picker .wire-next__field-control {
   position: relative;
@@ -7025,7 +6079,6 @@
   min-width: 0;
   align-items: center;
 }
-
 .wire-next__picker-control > button:first-of-type,
 .wire-next__time-trigger {
   display: flex;
@@ -7042,7 +6095,6 @@
   font: inherit;
   text-align: left;
 }
-
 .wire-next__picker-clear {
   position: absolute;
   right: 2.5rem;
@@ -7050,7 +6102,6 @@
   background: transparent;
   color: var(--wire-color-muted);
 }
-
 .wire-next__calendar,
 .wire-next__time-panel {
   z-index: 20;
@@ -7063,18 +6114,15 @@
   background: var(--wire-color-surface);
   box-shadow: var(--wire-shadow-3);
 }
-
 .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
 .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
   display: none;
 }
-
 .wire-next__date-selectors {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 0.65rem;
 }
-
 .wire-next__date-selectors label {
   display: grid;
   gap: 0.3rem;
@@ -7082,7 +6130,6 @@
   font-size: 0.78rem;
   font-weight: 600;
 }
-
 .wire-next__date-selectors select {
   width: 100%;
   min-height: 2.35rem;
@@ -7093,20 +6140,17 @@
   color: var(--wire-color-text);
   font: inherit;
 }
-
 .wire-next__date-done {
   background: var(--wire-field-color) !important;
   color: var(--wire-color-primary-contrast, #fff) !important;
   font-weight: 650;
 }
-
 .wire-next__calendar > header {
   display: grid;
   grid-template-columns: 2.25rem 1fr 2.25rem;
   align-items: center;
   text-align: center;
 }
-
 .wire-next__calendar button,
 .wire-next__time-panel button {
   min-height: 2.25rem;
@@ -7115,7 +6159,6 @@
   background: transparent;
   color: inherit;
 }
-
 .wire-next__calendar-weekdays,
 .wire-next__calendar-grid {
   display: grid;
@@ -7123,36 +6166,29 @@
   gap: 0.2rem;
   text-align: center;
 }
-
 .wire-next__calendar-weekdays {
   color: var(--wire-color-muted);
   font-size: 0.75rem;
 }
-
 .wire-next__calendar-grid button:hover,
 .wire-next__time-panel button:hover {
   background: var(--wire-color-surface-2);
 }
-
 .wire-next__calendar-grid button[aria-pressed="true"],
 .wire-next__time-panel button[aria-pressed="true"] {
   background: var(--wire-field-color);
   color: var(--wire-color-primary-contrast, #fff);
 }
-
 .wire-next__calendar-grid button[data-outside="true"] {
   color: var(--wire-color-muted);
   opacity: 0.55;
 }
-
 .wire-next__calendar-grid button[data-today="true"] {
   box-shadow: inset 0 0 0 1px var(--wire-field-color);
 }
-
 .wire-next__time-panel {
   grid-template-columns: 1fr 1fr;
 }
-
 .wire-next__time-options {
   display: grid;
   max-height: 12rem;
@@ -7160,18 +6196,15 @@
   overflow-y: auto;
   gap: 0.2rem;
 }
-
 .wire-next__time-period {
   display: flex;
   gap: 0.35rem;
 }
-
 .wire-next__time-done {
   align-self: end;
   background: var(--wire-field-color) !important;
   color: var(--wire-color-primary-contrast, #fff) !important;
 }
-
 .wire-next--file-upload-progress {
   display: grid;
   width: min(100%, 36rem);
@@ -7182,7 +6215,6 @@
   background: var(--wire-color-surface);
   box-shadow: var(--wire-shadow-1);
 }
-
 .wire-next--file-upload-progress .wire-next__row,
 .wire-next__upload-actions {
   display: flex;
@@ -7190,12 +6222,10 @@
   justify-content: space-between;
   gap: 0.75rem;
 }
-
 .wire-next--file-upload-progress .wire-next__row > span {
   display: grid;
   min-width: 0;
 }
-
 .wire-next--file-upload-progress progress {
   width: 100%;
   height: 0.55rem;
@@ -7204,11 +6234,9 @@
   border-radius: 999px;
   accent-color: var(--wire-component-color);
 }
-
 .wire-next__upload-actions {
   justify-content: flex-end;
 }
-
 .wire-next__upload-actions button {
   min-height: 2.25rem;
   padding-inline: 0.8rem;
@@ -7217,13 +6245,11 @@
   background: var(--wire-color-surface-2);
   color: inherit;
 }
-
 @media (max-width: 640px) {
   .wire-next__time-panel {
     grid-template-columns: 1fr;
   }
 }
-
 .wire-next__file-control {
   position: relative;
   min-height: 2.75rem;
@@ -7232,57 +6258,48 @@
   border-radius: var(--wire-radius-sm);
   background: var(--wire-color-surface);
 }
-
 .wire-next__file-control input {
   position: absolute;
   cursor: pointer;
   opacity: 0;
   inset: 0;
 }
-
 .wire-next__input-group-control {
   overflow: hidden;
   border: 1px solid var(--wire-color-border);
   border-radius: var(--wire-radius-sm);
   background: var(--wire-color-surface);
 }
-
 .wire-next--field[data-variant="underline"]
   :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
   border-width: 0 0 1px;
   border-radius: 0;
   background: transparent;
 }
-
 .wire-next--field[data-variant="outlined"]
   :is(.wire-next__input-group-control, .wire-next__file-control) {
   border-width: 2px;
 }
-
 .wire-next--field[data-variant="pill"]
   :is(.wire-next__input-group-control, .wire-next__file-control) {
   border-radius: 999px;
 }
-
 .wire-next--field[data-variant="ghost"]
   :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
   border-color: transparent;
   background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
 }
-
 .wire-next__input-group-control input {
   flex: 1;
   min-width: 0;
   border: 0;
   box-shadow: none;
 }
-
 .wire-next__input-addon,
 .wire-next__input-group-control button {
   padding: 0.7rem 0.85rem;
   white-space: nowrap;
 }
-
 .wire-next__input-group-control button {
   align-self: stretch;
   border: 0;
@@ -7292,7 +6309,6 @@
   font-weight: 700;
   cursor: pointer;
 }
-
 @media (max-width: 640px) {
   .wire-next--field[data-inline="true"],
   .wire-next--choice-field[data-inline="true"] {
@@ -7304,7 +6320,6 @@
     grid-column: auto;
   }
 }
-
 .wire-next--toggle-password {
   display: grid;
   width: 100%;
@@ -7315,29 +6330,24 @@
   padding: 0;
   border: 0;
 }
-
 .wire-next--toggle-password > label {
   color: var(--wire-color-text);
   font-size: 0.75rem;
   font-weight: 600;
 }
-
 .wire-next__password-fields {
   display: grid;
   gap: 1rem;
 }
-
 .wire-next__password-field {
   display: grid;
   gap: 0.45rem;
 }
-
 .wire-next__password-field > label {
   color: var(--wire-color-text);
   font-size: 0.82em;
   font-weight: 750;
 }
-
 .wire-next__password-control {
   position: relative;
   display: flex;
@@ -7345,7 +6355,6 @@
   align-items: center;
   width: 100%;
 }
-
 .wire-next__password-control > input {
   width: 100%;
   min-width: 0;
@@ -7362,12 +6371,10 @@
     border-color var(--wire-motion-base) var(--wire-ease-standard),
     box-shadow var(--wire-motion-base) var(--wire-ease-standard);
 }
-
 .wire-next__password-control > input:focus-visible {
   border-color: var(--wire-component-color);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
 }
-
 .wire-next__password-toggle {
   position: absolute;
   top: 50%;
@@ -7384,14 +6391,12 @@
   cursor: pointer;
   transform: translateY(-50%);
 }
-
 .wire-next__password-toggle:hover,
 .wire-next__password-toggle:focus-visible {
   color: var(--wire-component-color);
   background: color-mix(in srgb, var(--wire-component-color) 10%, transparent);
   outline: 0;
 }
-
 .wire-next__password-icon {
   display: block;
   width: 1.05em;
@@ -7401,11 +6406,9 @@
   mask-repeat: no-repeat;
   mask-size: contain;
 }
-
 .wire-next__password-icon--show {
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
 }
-
 .wire-next__password-toggle[aria-pressed="true"]::after {
   position: absolute;
   width: 1.25em;
@@ -7416,7 +6419,6 @@
   transform: rotate(45deg);
   box-shadow: 0 0 0 1px var(--wire-color-bg);
 }
-
 .wire-next__password-checkbox {
   display: inline-flex;
   width: fit-content;
@@ -7426,25 +6428,21 @@
   font-size: 0.78em;
   cursor: pointer;
 }
-
 .wire-next__password-checkbox > input {
   width: 1rem;
   height: 1rem;
   margin: 0;
   accent-color: var(--wire-component-color);
 }
-
 .wire-next--toggle-password > small {
   color: var(--wire-color-muted);
   font-size: 0.72em;
 }
-
 .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
 .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
   border-color: var(--wire-color-danger);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
 }
-
 .wire-next--strong-password {
   position: relative;
   display: grid;
@@ -7452,16 +6450,13 @@
   gap: 0.6rem;
   color: var(--wire-color-text);
 }
-
 .wire-next--strong-password > label {
   font-size: 0.82em;
   font-weight: 700;
 }
-
 .wire-next__strong-password-anchor {
   position: relative;
 }
-
 .wire-next--strong-password input {
   width: 100%;
   min-height: 2.75em;
@@ -7476,22 +6471,18 @@
     border-color 160ms ease,
     box-shadow 160ms ease;
 }
-
 .wire-next--strong-password input:focus-visible {
   border-color: var(--wire-component-color);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent);
 }
-
 .wire-next--strong-password.wire-next--invalid input,
 .wire-next--strong-password input.wire-invalid {
   border-color: var(--wire-color-danger);
 }
-
 .wire-next__strong-password-details {
   display: grid;
   gap: 0.65rem;
 }
-
 .wire-next__strong-password-summary {
   display: flex;
   align-items: center;
@@ -7500,11 +6491,9 @@
   color: var(--wire-color-muted);
   font-size: 0.75em;
 }
-
 .wire-next__strong-password-summary strong {
   color: var(--wire-color-text);
 }
-
 .wire-next__strong-password-meter {
   width: 100%;
   height: 0.42rem;
@@ -7512,7 +6501,6 @@
   border-radius: 999px;
   background: color-mix(in srgb, var(--wire-color-border) 72%, transparent);
 }
-
 .wire-next__strong-password-meter > span {
   display: block;
   width: 0;
@@ -7523,19 +6511,15 @@
     width 180ms ease,
     background-color 180ms ease;
 }
-
 .wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span {
   background: var(--wire-color-warning);
 }
-
 .wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span {
   background: var(--wire-component-color);
 }
-
 .wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span {
   background: var(--wire-color-success);
 }
-
 .wire-next__strong-password-requirements {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -7544,7 +6528,6 @@
   padding: 0;
   list-style: none;
 }
-
 .wire-next__strong-password-requirements li {
   display: flex;
   min-width: 0;
@@ -7554,7 +6537,6 @@
   font-size: 0.72em;
   line-height: 1.45;
 }
-
 .wire-next__strong-password-requirements li > span {
   position: relative;
   width: 0.9rem;
@@ -7564,7 +6546,6 @@
   border: 1px solid currentColor;
   border-radius: 50%;
 }
-
 .wire-next__strong-password-requirements li > span::after {
   position: absolute;
   top: 0.12rem;
@@ -7577,26 +6558,21 @@
   opacity: 0;
   transform: rotate(45deg);
 }
-
 .wire-next__strong-password-requirements li[data-met="true"] {
   color: var(--wire-color-success);
 }
-
 .wire-next__strong-password-requirements li[data-met="true"] > span {
   border-color: var(--wire-color-success);
   background: var(--wire-color-success);
 }
-
 .wire-next__strong-password-requirements li[data-met="true"] > span::after {
   opacity: 1;
 }
-
 .wire-next__strong-password-details > small {
   color: var(--wire-color-muted);
   font-size: 0.7em;
   line-height: 1.5;
 }
-
 .wire-next__strong-password-popover {
   position: absolute;
   top: calc(100% + 0.7rem);
@@ -7616,13 +6592,11 @@
     transform 140ms ease,
     visibility 140ms ease;
 }
-
 .wire-next__strong-password-popover[data-open="true"] {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }
-
 .wire-next__strong-password-popover-arrow {
   position: absolute;
   top: -0.38rem;
@@ -7634,13 +6608,11 @@
   background: var(--wire-color-surface);
   transform: rotate(45deg);
 }
-
 @media (max-width: 560px) {
   .wire-next__strong-password-requirements {
     grid-template-columns: 1fr;
   }
 }
-
 .wire-next--advanced-select {
   position: relative;
   display: grid;
@@ -7994,7 +6966,6 @@
     min-width: 100%;
   }
 }
-
 .wire-next--choice {
   display: inline-flex;
   align-items: center;
@@ -8006,7 +6977,6 @@
   height: 1.1rem;
   accent-color: var(--wire-color-primary);
 }
-
 .wire-next--modal,
 .wire-next--drawer,
 .wire-next--dropdown,
@@ -8036,13 +7006,11 @@
   background: transparent;
   cursor: pointer;
 }
-
 @keyframes wire-shimmer {
   to {
     background-position: -200% 0;
   }
 }
-
 @media (max-width: 768px) {
   .wire-next--columns,
   .wire-next--grid,
@@ -8050,12 +7018,10 @@
     grid-template-columns: 1fr;
   }
 }
-
 [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):active {
   transform: translateY(0) scale(0.98);
   transition-duration: var(--wire-motion-fast);
 }
-
 @keyframes wire-component-enter {
   from {
     opacity: 0;
@@ -8066,7 +7032,6 @@
     transform: translateY(0);
   }
 }
-
 @keyframes wire-overlay-enter {
   from {
     opacity: 0;
@@ -8075,7 +7040,6 @@
     opacity: 1;
   }
 }
-
 @keyframes wire-dialog-enter {
   from {
     opacity: 0;
@@ -8086,7 +7050,6 @@
     transform: translateY(0) scale(1);
   }
 }
-
 @keyframes wire-popover-enter {
   from {
     opacity: 0;
@@ -8097,7 +7060,6 @@
     transform: translateY(0) scale(1);
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
   [data-component],
   [data-component] *,
@@ -8125,7 +7087,6 @@
     flex: 1 1 100%;
   }
 }
-
 /* --- Expanded foundation catalog ---------------------------------------- */
 .wire-container--narrow {
   max-width: 44rem;
@@ -8340,7 +7301,6 @@
   border-radius: 999px;
   background: var(--wire-color-success);
 }
-
 @media (max-width: 768px) {
   .wire-split-layout,
   .wire-sidebar-layout {
@@ -8350,7 +7310,6 @@
     position: static;
   }
 }
-
 /* --- Segmented button group --------------------------------------------- */
 .wire-segmented-group {
   display: inline-grid;
@@ -8370,16 +7329,13 @@
     var(--wire-shadow-1);
   scrollbar-width: none;
 }
-
 .wire-segmented-group::-webkit-scrollbar {
   display: none;
 }
-
 .wire-segmented-group--full {
   display: grid;
   width: 100%;
 }
-
 .wire-segmented-group__button {
   position: relative;
   isolation: isolate;
@@ -8408,7 +7364,6 @@
     box-shadow var(--wire-motion-base) var(--wire-ease-standard),
     transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
-
 .wire-segmented-group__button::before {
   content: "";
   position: absolute;
@@ -8423,37 +7378,30 @@
     opacity var(--wire-motion-base) var(--wire-ease-standard),
     transform var(--wire-motion-slow) var(--wire-ease-emphasized);
 }
-
 .wire-segmented-group__button:hover:not(:disabled) {
   color: var(--wire-color-text);
   background: color-mix(in srgb, var(--wire-color-surface) 65%, transparent);
 }
-
 .wire-segmented-group__button--active {
   color: var(--wire-color-text);
   border-color: color-mix(in srgb, var(--wire-color-primary) 22%, var(--wire-color-border));
   transform: translateY(-1px);
 }
-
 .wire-segmented-group__button--active::before {
   opacity: 1;
   transform: scale(1);
 }
-
 .wire-segmented-group__button--active .wire-segmented-group__label {
   animation: wire-segmented-label-in var(--wire-motion-slow) var(--wire-ease-emphasized) both;
 }
-
 .wire-segmented-group__button:focus-visible {
   outline: 2px solid var(--wire-color-primary);
   outline-offset: 1px;
 }
-
 .wire-segmented-group__button:disabled {
   cursor: not-allowed;
   opacity: 0.45;
 }
-
 .wire-segmented-group__badge {
   display: inline-flex;
   min-height: 1.35rem;
@@ -8466,32 +7414,27 @@
   font-size: 0.7rem;
   font-weight: 800;
 }
-
 .wire-segmented-group__icon {
   width: 1rem;
   height: 1rem;
   flex: none;
   color: currentColor;
 }
-
 .wire-segmented-group--sm .wire-segmented-group__button {
   min-height: 2.15rem;
   padding: 0.4rem 0.7rem;
   font-size: 0.8rem;
 }
-
 .wire-segmented-group--lg .wire-segmented-group__button {
   min-height: 3rem;
   padding: 0.7rem 1.15rem;
   font-size: 0.95rem;
 }
-
 .wire-segmented-group__empty {
   padding: 0.65rem 0.9rem;
   color: var(--wire-color-muted);
   font-size: 0.875rem;
 }
-
 @keyframes wire-segmented-label-in {
   from {
     opacity: 0.68;
@@ -8502,13 +7445,11 @@
     transform: translateY(0);
   }
 }
-
 /* --- Analytics dashboard preview ---------------------------------------- */
 .wire-analytics-preview {
   width: 100%;
   min-width: 0;
 }
-
 .wire-analytics-preview__surface {
   display: grid;
   grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
@@ -8530,12 +7471,10 @@
   border-radius: calc(var(--wire-radius) * 1.35);
   box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
 }
-
 .wire-analytics-preview__visual,
 .wire-analytics-preview__content {
   min-width: 0;
 }
-
 .wire-analytics-preview__chart,
 .wire-analytics-preview__image {
   width: 100%;
@@ -8544,16 +7483,13 @@
   background: color-mix(in srgb, var(--wire-color-surface-2) 92%, transparent);
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent);
 }
-
 .wire-analytics-preview__image {
   aspect-ratio: 16 / 10;
   object-fit: cover;
 }
-
 .wire-analytics-preview__chart {
   padding: clamp(1rem, 2vw, 1.35rem);
 }
-
 .wire-analytics-preview__chart-header {
   display: flex;
   align-items: center;
@@ -8562,19 +7498,16 @@
   color: var(--wire-color-text);
   font-size: 0.875rem;
 }
-
 .wire-analytics-preview__chart-header span {
   color: var(--wire-color-success);
   font-weight: 800;
 }
-
 .wire-analytics-preview__chart-svg {
   width: 100%;
   height: auto;
   margin-top: 1rem;
   color: var(--wire-color-primary);
 }
-
 .wire-analytics-preview__days {
   display: flex;
   justify-content: space-between;
@@ -8583,12 +7516,10 @@
   color: var(--wire-color-muted);
   font-size: 0.7rem;
 }
-
 .wire-analytics-preview__content {
   display: grid;
   align-content: center;
 }
-
 .wire-analytics-preview__eyebrow {
   margin: 0;
   color: var(--wire-color-primary);
@@ -8597,7 +7528,6 @@
   letter-spacing: 0.16em;
   text-transform: uppercase;
 }
-
 .wire-analytics-preview__title {
   max-width: 13ch;
   margin: 0;
@@ -8607,11 +7537,9 @@
   font-weight: 750;
   letter-spacing: -0.045em;
 }
-
 .wire-analytics-preview__eyebrow + .wire-analytics-preview__title {
   margin-top: 0.8rem;
 }
-
 .wire-analytics-preview__description {
   max-width: 34rem;
   margin: 1rem 0 0;
@@ -8619,12 +7547,10 @@
   font-size: 1rem;
   line-height: 1.7;
 }
-
 .wire-analytics-preview__metrics {
   min-width: 0;
   margin-top: 1.5rem;
 }
-
 .wire-analytics-preview__action {
   display: inline-flex;
   width: fit-content;
@@ -8635,40 +7561,32 @@
   font-weight: 750;
   text-decoration: none;
 }
-
 .wire-analytics-preview__action span {
   transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
-
 .wire-analytics-preview__action:hover span {
   transform: translateX(0.25rem);
 }
-
 /* --- Metric grid refinements -------------------------------------------- */
 .wire-metric-grid-shell {
   width: 100%;
   min-width: 0;
 }
-
 .wire-metric-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
   gap: 1rem;
   min-width: 0;
 }
-
 .wire-metric-grid[data-columns="2"] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-
 .wire-metric-grid[data-columns="3"] {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-
 .wire-metric-grid[data-columns="4"] {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-
 .wire-metric-card {
   display: flex;
   min-width: 0;
@@ -8682,7 +7600,6 @@
   border-radius: calc(var(--wire-radius) * 0.9);
   box-shadow: var(--wire-shadow-1);
 }
-
 .wire-metric-card__value {
   overflow-wrap: anywhere;
   color: var(--wire-color-text);
@@ -8691,26 +7608,22 @@
   font-weight: 750;
   letter-spacing: -0.045em;
 }
-
 .wire-metric-card__label {
   margin-top: 0.7rem;
   color: var(--wire-color-text);
   font-size: 0.875rem;
   font-weight: 700;
 }
-
 .wire-metric-card__description {
   margin: 0.45rem 0 0;
   color: var(--wire-color-muted);
   font-size: 0.8rem;
   line-height: 1.5;
 }
-
 .wire-metric-grid--compact {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.75rem;
 }
-
 .wire-metric-card--compact {
   min-height: 7.25rem;
   padding: 1rem;
@@ -8718,18 +7631,15 @@
   background: color-mix(in srgb, var(--wire-color-surface-2) 72%, var(--wire-color-surface));
   box-shadow: none;
 }
-
 .wire-metric-card--compact .wire-metric-card__value {
   font-size: clamp(1rem, 2vw, 1.35rem);
   line-height: 1.15;
 }
-
 .wire-metric-card--compact .wire-metric-card__label {
   margin-top: 0.45rem;
   color: var(--wire-color-muted);
   font-size: 0.75rem;
 }
-
 .wire-metric-grid__empty {
   grid-column: 1 / -1;
   margin: 0;
@@ -8739,7 +7649,6 @@
   border: 1px dashed var(--wire-color-border);
   border-radius: var(--wire-radius);
 }
-
 @media (max-width: 900px) {
   .wire-analytics-preview__surface {
     grid-template-columns: 1fr;
@@ -8749,7 +7658,6 @@
     max-width: 18ch;
   }
 }
-
 @media (max-width: 640px) {
   .wire-segmented-group {
     width: 100%;
diff --git a/scripts/lib/measure-runtime-size.ts b/scripts/lib/measure-runtime-size.ts
new file mode 100644
index 00000000..c5879e97
--- /dev/null
+++ b/scripts/lib/measure-runtime-size.ts
@@ -0,0 +1,57 @@
+/**
+ * Report the minified size of each browser runtime, as JSON on stdout.
+ *
+ * Run under Bun because minifying is what the production build does, and this
+ * has to measure the same thing. The security audit runs under Node and shells
+ * out to this.
+ *
+ * Measuring the raw source instead would count comments, which the production
+ * minifier strips -- so they cost a visitor nothing while still consuming the
+ * budget. That made the old metric reward deleting explanatory comments over
+ * writing smaller code.
+ */
+import {
+  getReactiveRuntime,
+  getNavRuntime,
+  getRealtimeRuntime,
+} from "../../packages/csr/src/index.ts";
+
+const runtimes: Record<string, string> = {
+  "reactive-runtime.ts": getReactiveRuntime(),
+  "nav-runtime.ts": getNavRuntime(),
+  "realtime-runtime.ts": getRealtimeRuntime(),
+};
+
+const sizes: Record<string, number> = {};
+
+for (const [name, source] of Object.entries(runtimes)) {
+  const built = await Bun.build({
+    // A blob entrypoint keeps this off the filesystem, so a failed run cannot
+    // leave scratch files behind in the repository.
+    entrypoints: ["runtime.js"],
+    target: "browser",
+    format: "esm",
+    minify: true,
+    plugins: [
+      {
+        name: "inline-runtime",
+        setup(build) {
+          build.onResolve({ filter: /^runtime\.js$/ }, () => ({
+            path: "runtime.js",
+            namespace: "inline",
+          }));
+          build.onLoad({ filter: /.*/, namespace: "inline" }, () => ({
+            contents: source,
+            loader: "js",
+          }));
+        },
+      },
+    ],
+  });
+  if (!built.success || !built.outputs.length) {
+    throw new Error(`Failed to minify ${name}:\n${built.logs.map(String).join("\n")}`);
+  }
+  sizes[name] = (await built.outputs[0]!.text()).length;
+}
+
+process.stdout.write(JSON.stringify(sizes));
diff --git a/scripts/security-performance-audit.mjs b/scripts/security-performance-audit.mjs
index 375cc41e..ab6479b0 100644
--- a/scripts/security-performance-audit.mjs
+++ b/scripts/security-performance-audit.mjs
@@ -155,21 +155,38 @@ addCheck(
   dynamicCode.join(", ") || "No dynamic code execution in security foundation packages.",
 );
 
+/*
+ * Runtime budgets are measured on the code that actually ships.
+ *
+ * These used to measure the raw source, which counts comments -- and comments
+ * are stripped by the production minifier, so they cost a user nothing. The
+ * old metric therefore paid people to delete explanatory comments in exchange
+ * for no real saving, while a genuine feature and a wall of prose looked
+ * identical to it.
+ *
+ * The runtime is served from /__wrnexus/reactive.js as its own file, minified
+ * and sent with an immutable year-long cache, so what a visitor pays is the
+ * minified transfer once. That is the number worth defending.
+ */
 const runtimeBudgets = {
-  // Raised for the 9.0 release: the reactive runtime took on anchored-overlay
-  // clamping, modal dialog focus/scroll behaviour, the toaster and the client
-  // half of DataTable. This is a deliberate ceiling, not a rubber stamp --
-  // raise it again only alongside a decision about what the runtime should own.
-  "reactive-runtime.ts": 175_000,
-  "nav-runtime.ts": 25_000,
-  "realtime-runtime.ts": 15_000,
+  "reactive-runtime.ts": 80_000,
+  "nav-runtime.ts": 12_000,
+  "realtime-runtime.ts": 8_000,
 };
+const minifiedSizes = JSON.parse(
+  execFileSync(
+    process.platform === "win32" ? "bun.exe" : "bun",
+    [join(root, "scripts", "lib", "measure-runtime-size.ts")],
+    { cwd: root, encoding: "utf8" },
+  ),
+);
 for (const [file, budget] of Object.entries(runtimeBudgets)) {
-  const bytes = statSync(join(root, "packages", "csr", "src", file)).size;
+  const bytes = minifiedSizes[file];
+  const raw = statSync(join(root, "packages", "csr", "src", file)).size;
   addCheck(
     `PERF-RUNTIME-SIZE-${file.replace(/-runtime\.ts$/, "").toUpperCase()}`,
-    bytes <= budget,
-    `${file} is ${bytes} bytes (budget ${budget}).`,
+    typeof bytes === "number" && bytes <= budget,
+    `${file} minifies to ${bytes} bytes (budget ${budget}, ${raw} raw).`,
   );
 }
 addCheck(